/* ==========================================================================
   WeightFall step-form — addendum to style.css
   New classes only. Every existing .cmsf-* class (options, fields, unit
   toggles, buttons, progress bar, product cards, etc.) is reused as-is —
   nothing here overrides them. Colours/tokens match style.css: navy
   #242754, yellow #fbce1d, ink #1a1a3e, Poppins.
   ========================================================================== */

/* ── "Why we ask" expandable box ──────────────────────────────────────
   Sits under the question subtitle, above the options. Closed by default;
   .cmsf-why-toggle click adds/removes .open on the wrapping .cmsf-why. */
.cmsf-why { margin: -6px 0 16px; }
.cmsf-why .cmsf-why-toggle {
    background: none;
    border: 1.5px solid #e0e0ec;
    color: #242754;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    padding: 7px 12px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cmsf-why-toggle:hover { border-color: #b0b0d8; }
.cmsf-why-chev {
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s;
}
.cmsf-why.open .cmsf-why-chev { transform: rotate(225deg) translateY(2px); }
.cmsf-why-body {
    display: none;
    margin-top: 10px;
    padding: 14px 16px;
    background: #f5f5fc;
    border-radius: 12px;
    font-size: 13px;
    color: #1a1a3e;
    line-height: 1.55;
}
.cmsf-why.open .cmsf-why-body { display: block; }
.cmsf-why-body b { display: block; margin-bottom: 4px; color: #242754; font-weight: 600; }

/* ── Verdict banner (top of the plan / next screens) ─────────────────── */
.cmsf-verdict {
    background: #f5f5fc;
    border-left: 4px solid #242754;
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 18px;
}
.cmsf-verdict .cmsf-section-tag { color: #242754; margin-bottom: 6px; }
.cmsf-verdict .cmsf-step-title { margin-bottom: 6px !important; }
.cmsf-verdict .cmsf-step-subtitle { margin-bottom: 0 !important; color: #444; }

/* ── Generic panel (order summary / "what happens next") ─────────────── */
.cmsf-panel {
    border: 1.5px solid #e8e8f0;
    border-radius: 14px;
    background: #fff;
    padding: 18px 20px;
    margin-bottom: 14px;
}
.cmsf-panel h4 { font-size: 14px; font-weight: 700; color: #242754; margin: 0 0 10px; }
.cmsf-panel .cmsf-line { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; color: #1a1a3e; }
.cmsf-panel .cmsf-line-inc span:last-child { color: #242754; font-weight: 500; font-size: 12px; }
.cmsf-panel-divider { height: 1px; background: #eee; margin: 10px 0; }
.cmsf-panel .cmsf-line-total { font-size: 15px; font-weight: 700; color: #1a1a3e; padding-top: 4px; }
.cmsf-panel .cmsf-line-total span:last-child { color: #242754; }
.cmsf-btn-full { width: 100%; margin: 14px 0 12px; }

/* ── GP consent screen fields ──────────────────────────────────────── */
.cmsf-gp-fields { margin-top: 16px; }

/* ── Plan screen footnote / trust line ────────────────────────────── */
.cmsf-plan-footnote { font-size: 11px; color: #999; line-height: 1.6; margin: 4px 0 16px; }
.cmsf-plan-trust { font-size: 11px; color: #999; text-align: center; line-height: 1.6; margin: 4px 0 16px; }

.cmsf-steps { list-style: none; counter-reset: cmsfstep; margin: 0; padding: 0; }
.cmsf-steps li { counter-increment: cmsfstep; position: relative; padding: 8px 0 8px 34px; font-size: 13px; color: #555; }
.cmsf-steps li::before {
    content: counter(cmsfstep, decimal-leading-zero);
    position: absolute; left: 0; top: 6px;
    font-size: 11px; font-weight: 700; color: #242754;
    background: #f0f0f8; border-radius: 6px; padding: 2px 6px;
}
.cmsf-steps li b { display: block; font-weight: 600; color: #1a1a3e; }

/* ── Medication / dose selector (plan screen) ─────────────────────────── */
.cmsf-medcard {
    border: 1.5px solid #e8e8f0;
    border-radius: 14px;
    background: #fff;
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.cmsf-medcard:hover { border-color: #b0b0d8; }
.cmsf-medcard.is-on { border-color: #242754; background: #f5f5fc; }
.cmsf-medcard-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 5px; flex-direction: column; }
/* Plan screen — price figure emphasis */
.cmsf-medcard-price b { font-size: 18px; font-weight: 700; color: #1a1a3e; }
.cmsf-medcard h4 { font-size: 15px; font-weight: 700; color: #1a1a3e; margin: 0; }
.cmsf-medcard-price { font-size: 12px; color: #888; white-space: nowrap; }
.cmsf-medcard p { font-size: 12px; color: #888; margin: 6px 0 0; line-height: 1.5; }
.cmsf-badge {
    display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    background: #1a1a3e; color: #fbce1d; border-radius: 6px; padding: 3px 8px; margin-bottom: 8px;
}
.cmsf-dose-row-wrap { margin-top: 12px; }
.cmsf-dose-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cmsf-dose {
    font-family: 'Poppins', sans-serif; border: 1.5px solid #e8e8f0; background: #fff; border-radius: 10px;
    padding: 8px 13px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; color: #1a1a3e;
}
.cmsf-dose:hover { border-color: #242754; }
.cmsf-dose.is-on { border-color: #242754; background: #242754; color: #fff; }
.cmsf-dose:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Ineligible container reused for stop / recheck / notyet screens ─── */
#cmsfIneligible.visible { display: block; }
#cmsfIneligible .cmsf-options { text-align: left; margin-top: 16px; }
#cmsfIneligible .cmsf-opt small { color: #999; }

/* ── Message box uses the existing .cmsf-msg-box, just anchored under the wrapper ── */
#cmsfMsgBox { margin: 0 0 12px; }

@media (max-width: 600px) {
    .cmsf-panel { padding: 14px 16px; }
    .cmsf-medcard { padding: 14px; }
}





/* ==========================================================================
   Plan screen — visual refresh (design only, no structural changes)
   ========================================================================== */

/* Grid: cards stack on mobile, side-by-side on wider screens */
.cmsf-products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 6px;
}
@media (min-width: 680px) {
    /* .cmsf-products-grid {
        grid-template-columns: 1fr 1fr;
    } */
}

/* Med card — lifted look */
.cmsf-medcard {
    border: 2px solid #e8e8f0;
    border-radius: 18px;
    background: #fff;
    padding: 20px;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    position: relative;
    box-shadow: 0 2px 10px rgba(36,39,84,0.06);
}
.cmsf-medcard:hover {
    border-color: #b0b0d8;
    box-shadow: 0 4px 18px rgba(36,39,84,0.11);
}
.cmsf-medcard.is-on {
    border-color: #242754;
    background: #f5f5fc;
    box-shadow: 0 6px 24px rgba(36,39,84,0.13);
}

/* Mounjaro "Most popular" accent */
.cmsf-medcard[data-med="Mounjaro"] {
    border-color: #c8c8e8;
}
.cmsf-medcard[data-med="Mounjaro"].is-on {
    border-color: #242754;
}
.cmsf-medcard[data-med="Mounjaro"]::before {
    content: '★ Most popular';
    position: absolute;
    top: -1px;
    right: 18px;
    background: #242754;
    color: #fbce1d;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 10px;
    border-radius: 0 0 10px 10px;
}
@media (max-width: 480px) {
    .cmsf-medcard[data-med="Mounjaro"]::before {
    padding: 5px 8px;
    box-sizing: border-box;
    line-height: 12px;
    font-weight: 600;
    font-size: 8px;
}
}

/* Selectable radio-style circle */
.cmsf-medcard::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #c8c8e8;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}
.cmsf-medcard.is-on::after {
    border-color: #242754;
    background: #242754;
    box-shadow: inset 0 0 0 4px #fff;
}
/* Mounjaro: push circle below the "Most popular" label */
.cmsf-medcard[data-med="Mounjaro"]::after {
    top: 44px;
}

/* Trust icons row under each card description */
.cmsf-medcard-trust {
    display: flex;
    gap: 10px;
    margin: 12px 0 4px;
    flex-wrap: wrap;
}
.cmsf-medcard-trust span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #000;
    background: #eaeaff;
    border-radius: 20px;
    padding: 4px 10px;
}
.cmsf-medcard-trust span::before {
    font-size: 13px;
}
.cmsf-medcard-trust .cmsf-trust-clinician::before { content: '👤'; }
.cmsf-medcard-trust .cmsf-trust-monitor::before   { content: '🛡'; }
.cmsf-medcard-trust .cmsf-trust-pay::before       { content: '🔒'; }

/* Heading size tweak inside card */
.cmsf-medcard h4 {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a3e;
    margin: 0 0 2px;
    padding-right: 30px; /* clear the radio circle */
}

/* Price: align right of heading */
.cmsf-medcard-price {
    font-size: 14px;
    color: #555;
    white-space: nowrap;
}

/* Order panel — tighter and more prominent */
#cmsfOrderPanel {
    border: 2px solid #242754;
    border-radius: 18px;
    background: #f5f5fc;
    padding: 22px 22px 18px;
    margin-top: 16px;
}
#cmsfOrderPanel h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 12px;
}
#cmsfOrderPanel .cmsf-btn-full {
    background: #fbce1d;
    color: #1a1a3e;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 20px;
    cursor: pointer;
    width: 100%;
    margin: 14px 0 10px;
    transition: background 0.15s, transform 0.12s;
    display: flex;
    justify-content: center;
}
#cmsfOrderPanel .cmsf-btn-full:hover {
    background: #f5c200;
    transform: translateY(-1px);
}

/* Bottom trust strip */
.cmsf-plan-trust-strip {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 18px 0 8px;
    padding: 14px 10px;
    border-top: 1px solid #eee;
}
.cmsf-plan-trust-strip span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #666;
    text-align: center;
}
.cmsf-plan-trust-strip span strong {
    font-size: 12px;
    color: #1a1a3e;
}
.cmsf-plan-trust-strip span::before {
    font-size: 18px;
}
.cmsf-plan-trust-strip .cmsf-ts-clinician::before { content: '🛡'; }
.cmsf-plan-trust-strip .cmsf-ts-secure::before    { content: '🔒'; }
.cmsf-plan-trust-strip .cmsf-ts-cqc::before       { content: '✅'; }