/* Medmio ROI calculator - scoped styles. Builds on css/calc.css (.calc-field
   etc.); tokens from styles.css :root. */

/* "Your practice" input card */
.roi-practice {
  max-width: 920px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px 32px 26px;
}

.roi-practice__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.roi-practice__title {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.roi-practice__note { font-size: 0.82rem; color: var(--gray); }

.roi-practice .calc-grid { grid-template-columns: 1fr 1fr 1fr; }

/* Input with $ / % affix */
.calc-input { position: relative; }
.calc-input input { width: 100%; }
.calc-input--pre input { padding-left: 26px; }
.calc-input--suf input { padding-right: 30px; }
.calc-input__affix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-soft);
  pointer-events: none;
}
.calc-input--pre .calc-input__affix { left: 12px; }
.calc-input--suf .calc-input__affix { right: 12px; }

/* Three gain cards */
.roi-gains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 920px;
  margin: 18px auto 0;
}

.roi-gain {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.roi-gain h3 { font-size: 0.98rem; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.01em; }

.roi-gain__value {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.roi-gain__per { font-size: 0.76rem; font-weight: 600; color: var(--gray-soft); text-transform: uppercase; letter-spacing: 0.06em; }

.roi-gain label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.roi-gain input[type="range"] { width: 100%; accent-color: var(--green); }

.roi-gain .roi-slider__val { font-weight: 700; color: var(--green-deep); white-space: nowrap; }

.roi-gain .calc-hint { font-size: 0.78rem; color: var(--gray); line-height: 1.5; margin-top: auto; }
.roi-gain .calc-hint a { color: var(--blue-deep); }

/* Total band */
.roi-total {
  max-width: 920px;
  margin: 18px auto 0;
  background: var(--green-soft);
  border: 1px solid var(--green);
  border-radius: var(--radius-lg);
  padding: 22px 32px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.roi-total__label { font-size: 0.95rem; font-weight: 700; color: var(--ink-soft); }
.roi-total__value { font-size: 2rem; font-weight: 800; color: var(--green-deep); letter-spacing: -0.015em; }
.roi-total__unit { font-size: 1.05rem; font-weight: 700; color: var(--green-deep); opacity: 0.75; margin-left: 2px; }
.roi-total__sub { display: block; font-size: 0.78rem; font-weight: 500; color: var(--gray); margin-top: 2px; }

.roi-disclaimer {
  max-width: 920px;
  margin: 18px auto 0;
  font-size: 0.85rem;
  color: var(--gray);
  line-height: 1.6;
}

@media (max-width: 880px) {
  .roi-practice { padding: 20px 18px; }
  .roi-practice .calc-grid { grid-template-columns: 1fr; }
  .roi-gains { grid-template-columns: 1fr; }
  .roi-total { flex-direction: column; gap: 4px; }
}