/**
 * SmartMatch Recommendations Quiz Styles
 * SmartMatch Brand Colors: Purple #45295C, Orange #ED5C2E
 *
 * Design token system updated in v1.4.8+ to align with the partner-team
 * redesign prototype (Phase 1 of visual parity work). The legacy --smr-*
 * tokens below are preserved for backward compatibility; the new tokens
 * (typography scale, layered shadows, conversation gradient, option states)
 * power the Phase 2+ component restyling.
 */

/* ── Font imports ────────────────────────────────────────────
   Inter (body) + Montserrat (headings) — matches the prototype.
   Self-imports so the plugin doesn't depend on the theme loading them. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700;800&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    /* Brand palette — preserved exactly so existing rules still work */
    --smr-primary: #45295C;
    --smr-primary-dark: #351d47;
    --smr-primary-light: #6B4C8A;
    --smr-accent: #ED5C2E;
    --smr-accent-light: #FF7A4D;
    --smr-success: #28A745;
    --smr-medigap: #6F42C1;
    --smr-neutral: #6C757D;
    --smr-warning: #FF8C00;
    --smr-danger: #DC3545;
    --smr-text-dark: #2D2D2D;
    --smr-text-body: #4A4A4A;
    --smr-text-light: #6C757D;
    --smr-border: #E0E0E0;
    --smr-bg: #F7F7F7;
    --smr-white: #FFFFFF;
    --smr-radius: 12px;
    --smr-shadow: 0 4px 20px rgba(69, 41, 92, 0.1);

    /* ── New tokens (Phase 1 — visual parity foundation) ──── */

    /* Extended brand palette — tints used by option buttons,
       muted backgrounds, the conversation gradient, etc. */
    --smr-primary-muted: #eae1f7;
    --smr-primary-border: #b692e0;
    --smr-primary-muted-bg: #f9f6fd;

    /* Inactive / disabled step UI tokens */
    --smr-step-inactive: #e9e9f0;
    --smr-step-inactive-border: #d1d5db;
    --smr-step-inactive-text: #4a4a4a;

    /* CTA gradient endpoints (orange → purple) */
    --smr-cta-from: #d37160;
    --smr-cta-to: #5e2b96;
    --smr-accent-orange-hover: #d54d26;

    /* Soft warm background for the quiz canvas */
    --smr-conversation-bg: linear-gradient(180deg, #f9f6fd 0%, #ffffff 60%);

    /* Layered shadow system — replaces the single --smr-shadow */
    --smr-shadow-card: 0 8px 32px rgba(69, 41, 92, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    --smr-shadow-card-hover: 0 12px 40px rgba(69, 41, 92, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    --smr-shadow-header: 0 2px 8px rgba(0, 0, 0, 0.06);
    --smr-shadow-cta: 0 4px 16px rgba(237, 92, 46, 0.3);
    --smr-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* Option-button state tokens */
    --smr-option-bg: #ffffff;
    --smr-option-bg-hover: #f9f6fd;
    --smr-option-bg-selected: #f9f6fd;
    --smr-option-border: #d4cfde;
    --smr-option-border-hover: #b692e0;
    --smr-option-border-selected: #45295c;

    /* Typography scale — senior-friendly 16px base */
    --smr-text-3xl: 2.25rem;
    --smr-text-2xl: 2rem;
    --smr-text-xl: 1.5rem;
    --smr-text-lg: 1.125rem;
    --smr-text-base: 1rem;
    --smr-text-sm: 0.875rem;

    /* Font stacks — Inter for body, Montserrat for headings/buttons */
    --smr-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --smr-font-heading: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --smr-font-weight-normal: 400;
    --smr-font-weight-medium: 500;
    --smr-font-weight-bold: 700;

    /* Transition timings */
    --smr-transition-fast: 150ms ease;
    --smr-transition-normal: 300ms ease;
    --smr-transition-slow: 500ms ease;
}

/* ── Base typography (scoped to the quiz container) ──────────
   Body copy uses Inter; headings and buttons use Montserrat.
   Scoped to .smr-quiz-container so we never affect the
   surrounding WordPress theme's typography. */
.smr-quiz-container {
    font-family: var(--smr-font-sans);
    font-size: var(--smr-text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.smr-quiz-container h1,
.smr-quiz-container h2,
.smr-quiz-container h3,
.smr-quiz-container h4,
.smr-quiz-container h5,
.smr-quiz-container h6,
.smr-quiz-container button,
.smr-quiz-container .smr-question-card h2,
.smr-quiz-container .smr-question-card h3 {
    font-family: var(--smr-font-heading);
}

/* Container.
   max-width bumped 900 → 1100 in Phase 4 to make better use of the
   horizontal space available in wider hosts (full-width pages, larger
   popups). Narrow hosts ignore this — they stay at their own width
   because margin:0 auto + max-width is responsive by definition. */
.smr-quiz-container {
    line-height: 1.7;
    color: var(--smr-text-body);
    background: var(--smr-white);
    border-radius: var(--smr-radius);
    box-shadow: var(--smr-shadow-card);
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
}

/* ─── Header (Phase 4b redesign) ──────────────────────────────
   Three-row layout. CSS handles all state transitions; JS only
   toggles two class hooks:
     • .smr-past-intro on the container (Q2+ collapses the intro)
     • .smr-results-header on the header itself (results state)

   Row 1: .smr-brand-row   ─ co-branded logos (always visible during
                             the quiz, sized down past Q1).
   Row 2: .smr-quiz-intro  ─ quiz title + subtitle. Shown on Q1 only.
   Row 3: .smr-progress-container ─ progress bar (hidden on results).

   Phase 7 — the header is now a LIGHT panel to match the partner-team
   Figma. Title/subtitle render in brand purple on white, logos sit on
   white with a per-logo brand-purple underline (replacing the older
   vertical white divider), and a subtle bottom border separates the
   header from the form below. The dark-gradient look is preserved
   only on the results hero (a deliberate contrast moment). */
.smr-quiz-header {
    background: var(--smr-white);
    color: var(--smr-text-dark);
    padding: 24px 40px 18px;
    text-align: center;
    border-bottom: 1px solid var(--smr-border);
    transition: padding var(--smr-transition-normal);
}

.smr-quiz-header h1,
.smr-quiz-title {
    font-family: var(--smr-font-heading);
    font-size: var(--smr-text-2xl);
    font-weight: var(--smr-font-weight-bold);
    margin: 0 0 8px 0;
    color: var(--smr-primary) !important;
    letter-spacing: -0.3px;
}

/* Brand row ─ centered logo strip. Partner logo is prepended by
   renderCobrandHeader() when accessed via /connect/. Per-logo
   underline (the thin brand-purple stripe beneath each logo) lives on
   the wraps, not on the row itself, so each logo "owns" its underline
   regardless of how many logos are present. */
.smr-brand-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 28px;
    margin: 0 0 16px 0;
    flex-wrap: wrap;
    transition: margin var(--smr-transition-normal),
                gap var(--smr-transition-normal);
}

/* Shared treatment for both brand and partner logo wraps:
   - per-logo brand-purple underline (replaces the old vertical divider)
   - small bottom padding so the underline sits below, not under, the logo
   - rounded corners so the optional tint pill (applyLogoContrastTint)
     reads as a deliberate background rather than a hard rectangle. */
.smr-brand-logo-wrap,
.smr-partner-logo-wrap {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 4px 8px 6px;
    border-bottom: 2px solid var(--smr-primary);
    transition: background var(--smr-transition-fast),
                padding var(--smr-transition-normal),
                border-color var(--smr-transition-normal);
}

/* When a logo gets the dark-pill tint (light-on-light scenario), the
   purple underline disappears into the dark pill — switch it to a
   contrasting accent so the row still reads as "underlined logos". */
.smr-brand-logo-wrap.smr-logo-light-tinted,
.smr-partner-logo-wrap.smr-logo-light-tinted {
    border-bottom-color: var(--smr-accent);
}

/* Brand logo height is capped at 48px in the redesigned light header
   even when the admin has set --smr-logo-height higher. The admin
   setting was originally scoped to "Results header" only; with the
   logo now appearing throughout the quiz, a hard cap prevents a tall
   admin setting from dominating every step. */
.smr-brand-logo {
    display: block;
    max-height: min(var(--smr-logo-height, 48px), 48px);
    width: auto;
    margin: 0;
    transition: max-height var(--smr-transition-normal);
}

.smr-partner-logo-wrap img {
    max-height: 40px;
    width: auto;
    display: block;
    transition: max-height var(--smr-transition-normal);
}

/* Legacy vertical divider — kept hidden for back-compat. Earlier
   phases injected this element between logos; renderCobrandHeader()
   no longer creates it, but clean up just in case. */
.smr-cobrand-divider {
    display: none;
}

/* Intro block ─ quiz title + subtitle. Wraps the welcome content
   shown on Q1; hidden by .smr-past-intro on Q2+. */
.smr-quiz-intro {
    margin: 0 0 16px 0;
    overflow: hidden;
    transition: max-height var(--smr-transition-normal),
                margin var(--smr-transition-normal),
                opacity var(--smr-transition-normal);
}

.smr-quiz-subtitle {
    font-family: var(--smr-font-sans);
    font-size: var(--smr-text-base);
    opacity: 1;
    margin: 0;
    color: var(--smr-text-light) !important;
    font-weight: var(--smr-font-weight-normal);
}

/* ─── State: .smr-past-intro (Q2+) ────────────────────────────
   Collapses the header to just the brand row + progress. */
.smr-past-intro .smr-quiz-header {
    padding: 16px 40px 14px;
}

.smr-past-intro .smr-brand-row {
    margin-bottom: 12px;
    gap: 22px;
}

.smr-past-intro .smr-brand-logo {
    max-height: 32px;
}

.smr-past-intro .smr-partner-logo-wrap img {
    max-height: 28px;
}

.smr-past-intro .smr-brand-logo-wrap,
.smr-past-intro .smr-partner-logo-wrap {
    padding: 3px 6px 5px;
}

.smr-past-intro .smr-quiz-intro {
    max-height: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* ─── State: .smr-results-header (Phase 5b) ───────────────────
   The legacy purple banner is now completely hidden on the
   results page. The co-brand row is mirrored inside the hero
   panel by JS (.smr-results-hero-brandrow) so users still see
   branding on results — just integrated into the hero rather
   than as a separate banner above it.

   On retake, the .smr-results-header class is removed (see
   retakeQuiz()) and the header becomes visible again with the
   original title restored. */
.smr-quiz-header.smr-results-header {
    display: none;
}

@media (max-width: 640px) {
    .smr-quiz-header {
        padding: 20px 22px 16px;
    }
    .smr-past-intro .smr-quiz-header {
        padding: 14px 22px 12px;
    }
    .smr-brand-row {
        gap: 20px;
    }
    .smr-brand-logo {
        max-height: 38px;
    }
    .smr-partner-logo-wrap img {
        max-height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .smr-quiz-header,
    .smr-quiz-intro,
    .smr-brand-row,
    .smr-brand-logo,
    .smr-brand-logo-wrap,
    .smr-partner-logo-wrap,
    .smr-partner-logo-wrap img {
        transition: none;
    }
}

/* Progress Bar — Phase 7 retint for the light header. The track is
   now a muted purple wash (used to be a translucent white that
   relied on the old dark gradient). The fill keeps the brand
   orange-to-orange-light gradient so progress reads at a glance. */
.smr-progress-container {
    padding: 0 20px;
}

.smr-progress-bar {
    height: 6px;
    background: var(--smr-primary-muted);
    border-radius: 999px;
    overflow: hidden;
}

.smr-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--smr-accent), var(--smr-accent-light));
    border-radius: 999px;
    transition: width 0.5s ease-in-out;
    width: 8.33%;
}

.smr-progress-text {
    display: none;
}

/* Quiz Form ─ canvas for the questionnaire body.
   Conversation gradient backdrop + decorative blurred orbs match the
   prototype's warm, conversational feel. Orbs are pseudo-elements so no
   markup change is required; pointer-events:none so they never block
   clicks. */
.smr-quiz-form {
    padding: 40px;
    position: relative;
    overflow: hidden;
    background: var(--smr-conversation-bg);
    isolation: isolate;
}

.smr-quiz-form::before,
.smr-quiz-form::after {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(90px);
    will-change: transform;
}

.smr-quiz-form::before {
    top: -120px;
    right: -160px;
    background: var(--smr-primary-muted);
    opacity: 0.85;
}

.smr-quiz-form::after {
    bottom: -120px;
    left: -120px;
    background: var(--smr-cta-from);
    opacity: 0.30;
}

@media (max-width: 640px) {
    .smr-quiz-form::before,
    .smr-quiz-form::after {
        width: 300px;
        height: 300px;
        filter: blur(70px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .smr-progress-fill {
        transition: none;
    }
}

/* Question Slides */
.smr-question-slide {
    display: none;
}

.smr-question-slide.active {
    display: block;
}

/* Phase 7 — Section/category label.
   Previously rendered as a stand-alone bar above the question card
   with a heavy accent-bottom border. The Figma puts it INSIDE the
   card, prefixed with a small calendar icon, no underline. The
   uppercase tracking gives it the "form metadata" feel the partner
   team uses. */
.smr-section-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--smr-text-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 16px 0;
    padding: 0;
    border: none;
}

.smr-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--smr-text-light);
    flex-shrink: 0;
}

.smr-section-icon svg {
    width: 100%;
    height: 100%;
}

.smr-section-text {
    line-height: 1;
}

/* Phase 7 — Question card.
   The card no longer carries its own border (the parent .smr-quiz-form
   provides the conversation-gradient backdrop and visual frame). Inside,
   the section label + question heading + options stack flush so the
   focal point is the question itself. */
.smr-question-card {
    background: transparent;
    border-radius: var(--smr-radius);
    padding: 0;
    border: none;
}

.smr-question-label {
    display: block;
    margin-bottom: 24px;
}

/* The "Q1 / Q2 / ..." pill is preserved for back-compat but hidden
   in the new layout — the Figma uses the section label + the
   progress bar as the wayfinding signals, not a "Q1" pill. */
.smr-question-number {
    display: none;
}

.smr-question-text {
    font-family: var(--smr-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--smr-text-dark);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.smr-question-subtext {
    font-size: 0.95rem;
    color: var(--smr-text-light);
    margin: -16px 0 24px 0;
    font-style: normal;
    line-height: 1.5;
}

/* Input Styles */
.smr-input,
.smr-select,
.smr-textarea {
    width: 100%;
    padding: 14px 18px;
    font-size: 1rem;
    border: 2px solid var(--smr-border);
    border-radius: 8px;
    background: var(--smr-white);
    color: var(--smr-text-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.smr-input:focus,
.smr-select:focus,
.smr-textarea:focus {
    outline: none;
    border-color: var(--smr-primary);
    box-shadow: 0 0 0 3px rgba(69, 41, 92, 0.15);
}

/* Radio & Checkbox option cards ─ Phase 7 redesign.
   The card is a horizontal flex row with three zones:
     1. .smr-option-icon       (optional — only when admin sets icon)
     2. .smr-option-body       (label + optional description, stacked)
     3. ::after indicator      (empty radio circle / filled checkmark)
   The native input is visually hidden but keyboard-focusable. When no
   icon is configured, .smr-option-icon simply isn't in the DOM and
   flex naturally consumes the freed space — no phantom indent. */

/* Single-column stack on all widths (mirrors Figma).
   Why no auto-fit 2-column anymore: with the new icon column the
   option cards need full row width for the description to breathe.
   On wide viewports the form max-width already keeps total measure
   readable. */
.smr-radio-group,
.smr-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.smr-radio-option,
.smr-checkbox-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 60px 16px 16px;
    background: var(--smr-option-bg);
    border: 2px solid var(--smr-option-border);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color var(--smr-transition-normal),
                border-color var(--smr-transition-normal),
                box-shadow var(--smr-transition-normal),
                transform var(--smr-transition-normal);
    user-select: none;
}

.smr-radio-option:hover,
.smr-checkbox-option:hover {
    background: var(--smr-option-bg-hover);
    border-color: var(--smr-option-border-hover);
    transform: translateY(-1px);
}

/* Visually hide native input but keep it focusable + submittable.
   sr-only pattern (used by Tailwind, Bootstrap, and the partner team). */
.smr-radio-option input,
.smr-checkbox-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* Icon column — small rounded square containing the admin-supplied
   icon image. Background is a soft brand-purple wash; on selection
   it deepens to solid brand purple and the icon inverts to white. */
.smr-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--smr-primary-muted-bg);
    flex-shrink: 0;
    transition: background-color var(--smr-transition-normal);
}

.smr-option-icon img {
    width: 22px;
    height: 22px;
    display: block;
    transition: filter var(--smr-transition-normal);
}

/* Body column — label + optional description stack. flex: 1 so the
   indicator stays right-anchored regardless of body height. */
.smr-option-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.smr-option-label {
    font-size: var(--smr-text-base);
    font-weight: var(--smr-font-weight-bold);
    color: var(--smr-text-dark);
    line-height: 1.4;
    transition: color var(--smr-transition-normal);
}

.smr-option-description {
    font-size: 0.85rem;
    font-weight: var(--smr-font-weight-normal);
    color: var(--smr-text-light);
    line-height: 1.4;
    transition: color var(--smr-transition-normal);
}

/* Selected state — light-purple card fill, brand-purple border,
   filled icon, deepened text. */
.smr-radio-option:has(input:checked),
.smr-checkbox-option:has(input:checked) {
    background: var(--smr-option-bg-selected);
    border-color: var(--smr-option-border-selected);
    box-shadow: var(--smr-shadow-card);
}

.smr-radio-option:has(input:checked) .smr-option-label,
.smr-checkbox-option:has(input:checked) .smr-option-label {
    color: var(--smr-primary);
}

.smr-radio-option:has(input:checked) .smr-option-description,
.smr-checkbox-option:has(input:checked) .smr-option-description {
    color: var(--smr-text-body);
}

.smr-radio-option:has(input:checked) .smr-option-icon,
.smr-checkbox-option:has(input:checked) .smr-option-icon {
    background: var(--smr-primary);
}

/* Invert the icon to white when selected. brightness(0) crushes the
   image to pure black; invert(1) flips to pure white. Works for any
   monochrome PNG/SVG; multi-colour icons will go monochrome white in
   the selected state (acceptable trade-off — the partner team uses
   the same convention). */
.smr-radio-option:has(input:checked) .smr-option-icon img,
.smr-checkbox-option:has(input:checked) .smr-option-icon img {
    filter: brightness(0) invert(1);
}

/* Indicator — empty circle by default, filled-purple checkmark when
   selected. The two states share a single ::after pseudo-element;
   colour + content swap on :has(input:checked). */
.smr-radio-option::after,
.smr-checkbox-option::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 18px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--smr-white);
    border: 2px solid var(--smr-border);
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    transform: translateY(-50%);
    transition: background-color var(--smr-transition-normal),
                border-color var(--smr-transition-normal),
                background-image var(--smr-transition-normal);
    pointer-events: none;
}

.smr-radio-option:has(input:checked)::after,
.smr-checkbox-option:has(input:checked)::after {
    background-color: var(--smr-primary);
    border-color: var(--smr-primary);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* Keyboard focus ring (native input is hidden, so route :focus-visible
   from the input to the wrapping label). */
.smr-radio-option:has(input:focus-visible),
.smr-checkbox-option:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(69, 41, 92, 0.22);
}

.smr-radio-option:has(input:focus-visible):has(input:checked),
.smr-checkbox-option:has(input:focus-visible):has(input:checked) {
    box-shadow: var(--smr-shadow-card), 0 0 0 3px rgba(69, 41, 92, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .smr-radio-option,
    .smr-checkbox-option,
    .smr-option-icon,
    .smr-option-icon img,
    .smr-option-label,
    .smr-option-description {
        transition: none;
    }

    .smr-radio-option:hover,
    .smr-checkbox-option:hover {
        transform: none;
    }

    .smr-radio-option::after,
    .smr-checkbox-option::after {
        transition: none;
    }
}

/* Slider */
.smr-slider-container {
    padding: 20px 0;
}

.smr-slider {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    background: linear-gradient(to right, var(--smr-medigap), var(--smr-neutral), var(--smr-success));
    border-radius: 4px;
    outline: none;
}

.smr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: var(--smr-white);
    border: 3px solid var(--smr-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.smr-slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--smr-text-light);
}

.smr-slider-value {
    font-weight: 700;
    color: var(--smr-primary);
    font-size: 1.1rem;
}

/* Ranking */
.smr-ranking-container {
    padding: 10px 0;
}

.smr-ranking-instructions {
    font-size: 0.9rem;
    color: var(--smr-text-light);
    margin-bottom: 15px;
}

.smr-ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.smr-ranking-item {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    background: var(--smr-white);
    border: 2px solid var(--smr-border);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: grab;
    transition: all 0.2s;
}

.smr-ranking-item:hover {
    border-color: var(--smr-primary);
}

.smr-ranking-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.smr-ranking-handle {
    color: var(--smr-text-light);
    margin-right: 15px;
    font-size: 1.2rem;
}

/* Birthday Selector */
.smr-birthday-selector {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 12px;
}

/* File Upload */
.smr-file-upload {
    position: relative;
}

.smr-file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.smr-file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border: 2px dashed var(--smr-border);
    border-radius: var(--smr-radius);
    background: var(--smr-bg);
    cursor: pointer;
    transition: all 0.2s;
}

.smr-file-label:hover {
    border-color: var(--smr-primary);
    background: rgba(69, 41, 92, 0.03);
}

.smr-file-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.smr-file-name {
    display: block;
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--smr-success);
    font-weight: 600;
}

/* Navigation Buttons */
.smr-nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--smr-border);
}

.smr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-size: var(--smr-text-base);
    font-weight: var(--smr-font-weight-bold);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color var(--smr-transition-normal),
                color var(--smr-transition-normal),
                border-color var(--smr-transition-normal),
                box-shadow var(--smr-transition-normal);
    border: 2px solid transparent;
    font-family: var(--smr-font-heading);
    line-height: 1.5;
}

.smr-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--smr-white), 0 0 0 4px var(--smr-primary);
}

.smr-btn-primary {
    background: var(--smr-primary);
    color: var(--smr-white);
    border-color: var(--smr-primary);
}

.smr-btn-primary:hover {
    background: var(--smr-primary-dark);
    border-color: var(--smr-primary-dark);
}

.smr-btn-primary:disabled,
.smr-btn-primary[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.smr-btn-secondary {
    background: transparent;
    color: var(--smr-primary);
    border-color: var(--smr-primary-border);
}

.smr-btn-secondary:hover {
    background: var(--smr-primary-muted-bg);
    border-color: var(--smr-primary);
    color: var(--smr-primary);
}

/* Lead Form */
.smr-lead-form-section {
    padding: 40px;
}

.smr-lead-form-section h2 {
    font-size: 1.75rem;
    color: var(--smr-primary);
    margin: 0 0 15px 0;
    text-align: center;
}

.smr-lead-intro {
    text-align: center;
    color: var(--smr-text-light);
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.smr-lead-form-card {
    background: var(--smr-bg);
    border-radius: var(--smr-radius);
    padding: 30px;
    border: 1px solid var(--smr-border);
}

.smr-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.smr-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--smr-text-dark);
}

.smr-required {
    color: var(--smr-danger);
}

/* Consent Section */
.smr-consent-section {
    margin: 25px 0;
    padding: 20px;
    background: var(--smr-white);
    border-radius: 8px;
    border: 1px solid var(--smr-border);
}

.smr-consent-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}

.smr-consent-label input {
    margin-right: 12px;
    margin-top: 4px;
    width: 18px;
    height: 18px;
    accent-color: var(--smr-primary);
}

.smr-consent-text {
    font-size: 0.85rem;
    color: var(--smr-text-body);
    line-height: 1.6;
}

.smr-consent-text a {
    color: var(--smr-primary);
    text-decoration: underline;
}

.smr-lead-submit-container {
    text-align: center;
    margin-top: 25px;
}

/* Lead-form submit ─ promoted CTA styling.
   Overrides .smr-btn-primary (brand purple) with the orange→hover-orange
   CTA palette so the "convert" moment stays visually distinct from the
   in-quiz navigation buttons. No markup change required. */
.smr-lead-submit-btn {
    min-width: 250px;
    padding: 16px 40px;
    font-size: var(--smr-text-lg);
    background: var(--smr-accent);
    border-color: var(--smr-accent);
    box-shadow: var(--smr-shadow-cta);
}

.smr-lead-submit-btn:hover {
    background: var(--smr-accent-orange-hover);
    border-color: var(--smr-accent-orange-hover);
}

/* ──────────────────────────────────────────────────────────────
   RESULTS PAGE (Phase 3 — visual parity with the partner-team
   prototype). The page is dynamically rendered by quiz-script.js
   into #smrResultsContent. Markup is unchanged; this CSS upgrades
   the visual treatment of every section.
   ────────────────────────────────────────────────────────────── */

/* Results Section ─ canvas backdrop.
   Mirrors the .smr-quiz-form treatment from Phase 2a so the
   transition from quiz → results feels seamless. Decorative orbs
   are mirrored to the opposite corners for a subtle "new room"
   feel. */
.smr-results-section {
    padding: 48px 40px 32px;
    position: relative;
    overflow: hidden;
    background: var(--smr-conversation-bg);
    isolation: isolate;
}

.smr-results-section::before,
.smr-results-section::after {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(90px);
}

.smr-results-section::before {
    top: -120px;
    left: -160px;
    background: var(--smr-primary-muted);
    opacity: 0.75;
}

.smr-results-section::after {
    bottom: -120px;
    right: -120px;
    background: var(--smr-cta-from);
    opacity: 0.28;
}

.smr-results-section h2 {
    font-family: var(--smr-font-heading);
    font-size: var(--smr-text-2xl);
    color: var(--smr-primary);
    margin: 0 0 24px 0;
    text-align: center;
    font-weight: var(--smr-font-weight-bold);
}

/* Results title ─ slightly larger than the default quiz title so the
   "Your Results" moment gets a small visual lift. The .smr-quiz-header
   .smr-results-header padding/state rules live with the header
   definitions above (Phase 4b). */
.smr-results-title {
    font-family: var(--smr-font-heading) !important;
    font-size: var(--smr-text-3xl) !important;
    font-weight: var(--smr-font-weight-bold) !important;
    color: var(--smr-white) !important;
    margin: 0 !important;
    text-align: center;
    letter-spacing: -0.5px;
}

/* ─── Results Hero Panel (Phase 5 — 2-column layout) ──────────
   The hero replaces the old standalone recommendation card +
   score display + CTA section trio. Left column carries the copy
   and primary actions; right column has the tier card with the
   spectrum slider. Stacks to single column on narrow widths. */
.smr-results-hero {
    position: relative;
    background: linear-gradient(135deg, var(--smr-primary-dark) 0%, var(--smr-primary) 100%);
    color: var(--smr-white);
    border-radius: 20px;
    padding: 36px 36px 32px;
    margin-bottom: 24px;
    box-shadow: var(--smr-shadow-card);
    overflow: hidden;
    isolation: isolate;
}

/* Soft top highlight for depth */
.smr-results-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.smr-results-actions-icons {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    gap: 6px;
}

/* ─── Hero co-brand row (Phase 5b) ────────────────────────────
   Mirrors the header brand row into the top of the hero panel
   so the co-brand is visible even though the legacy header is
   now hidden on results. Centered, full hero width, capped logo
   sizes so wide partner logos don't break layout. */
.smr-results-hero-brandrow {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 0 24px 0;
    flex-wrap: wrap;
    /* Leave room for the action icons in the top-right */
    padding: 0 56px;
}

/* Phase 6a — both logos now sit inside a wrapper so applyDarkLogoTint
   can apply a translucent-white pill behind dark logos without
   touching light ones. The wrappers are transparent by default;
   the JS adds .smr-logo-dark-tinted + inline background only when
   a dark-on-transparent logo is detected. The transition keeps the
   fade-in tasteful rather than a hard pop. */
.smr-results-hero-brand-wrap,
.smr-results-hero-partner-wrap {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    padding: 4px 10px;
    transition: background-color var(--smr-transition-normal);
}

.smr-results-hero-brand-wrap.smr-logo-dark-tinted,
.smr-results-hero-partner-wrap.smr-logo-dark-tinted {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.smr-results-hero-brand-logo {
    max-height: 38px;
    width: auto;
    display: block;
}

.smr-results-hero-partner-wrap img {
    max-height: 34px;
    width: auto;
    display: block;
}

.smr-results-hero-cobrand-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.smr-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--smr-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--smr-transition-normal),
                border-color var(--smr-transition-normal);
}

.smr-icon-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
}

.smr-icon-btn svg {
    display: block;
}

.smr-results-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

.smr-results-hero-left {
    min-width: 0;
}

.smr-results-hero-title {
    font-family: var(--smr-font-heading);
    font-size: var(--smr-text-3xl);
    font-weight: var(--smr-font-weight-bold);
    color: var(--smr-white) !important;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.smr-results-hero-intro {
    font-size: var(--smr-text-base);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 20px 0;
}

/* Benefit chips ─ translucent pills with green checkmarks */
.smr-results-hero-chips {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.smr-results-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-size: var(--smr-text-sm);
    font-weight: var(--smr-font-weight-medium);
    color: var(--smr-white);
    line-height: 1.3;
}

.smr-chip-check {
    color: #34D399;
    font-weight: var(--smr-font-weight-bold);
    font-size: 0.95em;
    line-height: 1;
}

.smr-results-hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

/* Phase 5 primary CTA inside the hero ─ solid white pill on the
   gradient (the partner team's "Talk to an Agent" treatment).
   Uses heading font + brand-purple text for high contrast. */
.smr-results-hero-cta {
    background: var(--smr-white);
    color: var(--smr-primary);
    padding: 12px 24px;
    font-family: var(--smr-font-heading);
    font-size: var(--smr-text-base);
    font-weight: var(--smr-font-weight-bold);
    border-radius: 8px;
    border: 2px solid var(--smr-white);
    cursor: pointer;
    transition: background-color var(--smr-transition-normal),
                color var(--smr-transition-normal);
}

.smr-results-hero-cta:hover {
    background: var(--smr-primary-muted-bg);
    color: var(--smr-primary-dark);
}

.smr-results-hero-or {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--smr-text-base);
    line-height: 1.4;
}

/* Force phone-link colour past any host-theme `a {color:...}` rule.
   Without these the link inherits the theme's body link colour, which
   produces the muted/greenish look reported in user screenshots. */
.smr-results-hero-phone,
.smr-results-hero-phone:link,
.smr-results-hero-phone:visited,
.smr-results-hero-phone:hover,
.smr-results-hero-phone:active,
.smr-results-hero-phone:focus {
    color: var(--smr-white) !important;
    font-weight: var(--smr-font-weight-bold);
    text-decoration: none;
}

.smr-results-hero-phone:hover {
    text-decoration: underline !important;
}

.smr-results-hero-right {
    min-width: 0;
}

/* ─── Recommendation Card (Phase 5 — inside the hero panel) ───
   The tier-class gradient backgrounds defined further below still
   apply. Sizing/radius is updated here so the card sits comfortably
   in the hero's right column rather than dominating full-width. */
.smr-recommendation-card {
    position: relative;
    text-align: center;
    padding: 24px 20px;
    border-radius: 16px;
    margin: 0;
    color: var(--smr-white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    isolation: isolate;
}

/* Subtle inner highlight at top for depth */
.smr-recommendation-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
    pointer-events: none;
}

/* Tier gradients ─ continuous orange → purple spectrum.
   Mirrors RESULT_CONFIG.gradient values from the partner team's
   recommendation.ts. Fixes the pre-existing bug where the JS
   emitted .tier-advantage / .tier-strong-advantage but the CSS
   only had rules for .tier-ma / .tier-strong-ma. */
.smr-recommendation-card.tier-strong-advantage {
    background: linear-gradient(135deg, #AF4A41 0%, #D27161 100%);
}

.smr-recommendation-card.tier-advantage {
    background: linear-gradient(135deg, #D27161 0%, #934B7E 100%);
}

.smr-recommendation-card.tier-balanced {
    background: linear-gradient(135deg, #D27161 0%, #45295C 100%);
}

.smr-recommendation-card.tier-medigap {
    background: linear-gradient(135deg, #934B7E 0%, #45295C 100%);
}

.smr-recommendation-card.tier-strong-medigap {
    background: linear-gradient(135deg, #45295C 0%, #653093 100%);
}

/* Backwards-compatible aliases ─ catch any legacy tier-ma /
   tier-strong-ma references that might still be emitted by older
   admin configurations. */
.smr-recommendation-card.tier-ma {
    background: linear-gradient(135deg, #D27161 0%, #934B7E 100%);
}

.smr-recommendation-card.tier-strong-ma {
    background: linear-gradient(135deg, #AF4A41 0%, #D27161 100%);
}

.smr-recommendation-tier {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.20);
    color: var(--smr-white);
    font-family: var(--smr-font-heading);
    font-size: 0.75rem;
    font-weight: var(--smr-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin: 0 0 12px 0;
    position: relative;
    z-index: 1;
}

.smr-recommendation-plan {
    font-family: var(--smr-font-heading);
    font-size: var(--smr-text-xl);
    font-weight: var(--smr-font-weight-bold);
    color: var(--smr-white) !important;
    line-height: 1.15;
    margin: 0 0 16px 0;
    position: relative;
    z-index: 1;
    letter-spacing: -0.3px;
}

/* ─── Spectrum slider inside the recommendation card ──────────
   Phase 5: the slider lives inside the card as a white pill,
   creating a clean visual contrast against the tier gradient. */
.smr-recommendation-slider {
    background: var(--smr-white);
    border-radius: 12px;
    padding: 14px 16px 12px;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* Legacy .smr-score-display rules retained as no-ops for backwards
   compatibility — the new template renders the slider inside the
   recommendation card via .smr-recommendation-slider. */
.smr-score-display {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.smr-scale-container {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
}

/* Slider bar uses the same spectrum as the recommendation cards. */
.smr-scale-bar {
    height: 6px;
    background: linear-gradient(
        90deg,
        #AF4A41 0%,
        #D27161 25%,
        #934B7E 50%,
        #45295C 75%,
        #653093 100%
    );
    border-radius: 999px;
    margin: 6px 0 10px;
    position: relative;
}

.smr-scale-indicator {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    background: var(--smr-white);
    border: 3px solid var(--smr-primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.20);
    transition: left var(--smr-transition-slow);
}

.smr-scale-labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--smr-font-heading);
    font-size: 0.78rem;
    color: var(--smr-text-body);
    font-weight: var(--smr-font-weight-bold);
    margin-bottom: 4px;
}

.smr-scale-labels span:first-child {
    color: #AF4A41;
}

.smr-scale-labels span:last-child {
    color: var(--smr-primary-dark);
}

.smr-scale-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--smr-text-light);
    padding: 0 2px;
    margin-top: 4px;
    font-weight: var(--smr-font-weight-medium);
}

/* ─── Rationale Accordion (Phase 5b) ──────────────────────────
   Collapsible via native <details>/<summary> for accessibility:
   keyboard focusable, screen readers announce expanded state,
   works without JS. The chevron rotation is driven by the
   [open] attribute selector. The disclosure triangle is hidden
   on Safari (::-webkit-details-marker) and on
   Firefox/Blink (summary { list-style: none }). */
/* Phase 6c — Light-purple gradient gives the rationale row visual
   weight without competing with the hero. The brand-purple-tinted
   border + soft shadow lifts it off the page background. When the
   accordion expands, the body section keeps the same gradient so
   the component reads as one unit. */
.smr-rationale-accordion {
    background: linear-gradient(135deg, var(--smr-primary-muted-bg) 0%, var(--smr-primary-muted) 100%);
    border: 1px solid var(--smr-primary-muted);
    border-radius: 14px;
    margin: 0 0 32px;
    box-shadow: 0 1px 3px rgba(69, 41, 92, 0.06),
                0 4px 14px rgba(69, 41, 92, 0.05);
    overflow: hidden;
    transition: box-shadow var(--smr-transition-normal),
                border-color var(--smr-transition-normal);
}

.smr-rationale-accordion:hover {
    border-color: var(--smr-primary-border);
    box-shadow: 0 2px 6px rgba(69, 41, 92, 0.08),
                0 6px 18px rgba(69, 41, 92, 0.08);
}

.smr-rationale-summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: background-color var(--smr-transition-normal);
    user-select: none;
    outline: none;
}

.smr-rationale-summary::-webkit-details-marker {
    display: none;
}

.smr-rationale-summary::marker {
    content: '';
}

.smr-rationale-accordion[open] .smr-rationale-summary {
    border-bottom: 1px solid var(--smr-primary-border);
}

.smr-rationale-summary:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

.smr-rationale-summary:focus-visible {
    background-color: rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 0 0 2px var(--smr-primary-border);
}

.smr-rationale-summary-label {
    font-family: var(--smr-font-heading);
    font-size: 1.05rem;
    font-weight: var(--smr-font-weight-bold);
    color: var(--smr-primary);
    line-height: 1.3;
    letter-spacing: -0.005em;
}

/* White-ish chevron pill so the icon reads cleanly against the
   purple gradient. Hover deepens to fully opaque white. */
.smr-rationale-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    color: var(--smr-primary);
    flex-shrink: 0;
    transition: transform var(--smr-transition-normal),
                background-color var(--smr-transition-normal);
}

.smr-rationale-chevron svg {
    width: 16px;
    height: 16px;
}

.smr-rationale-summary:hover .smr-rationale-chevron {
    background: var(--smr-white);
}

.smr-rationale-accordion[open] .smr-rationale-chevron {
    transform: rotate(180deg);
}

.smr-rationale-body {
    padding: 18px 22px 22px;
    color: var(--smr-text-body);
    line-height: 1.65;
    font-size: 0.95rem;
}

.smr-rationale-body p {
    margin: 0 0 12px 0;
}

.smr-rationale-body p:last-child {
    margin-bottom: 0;
}

.smr-rationale-body ul {
    list-style: none;
    padding: 0;
    margin: 16px 0 0 0;
}

.smr-rationale-body li {
    padding: 8px 0 8px 32px;
    position: relative;
    line-height: 1.6;
    color: var(--smr-text-body);
}

.smr-rationale-body li:before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 8px;
    color: var(--smr-white);
    background: var(--smr-primary);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: var(--smr-font-weight-bold);
}

/* Legacy .smr-rationale-section rules retained as backwards-
   compatible aliases in case any markup still renders the old
   structure. Same visual treatment as the new accordion body. */
.smr-rationale-section,
.smr-next-steps-section {
    background: var(--smr-white);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: var(--smr-shadow-card);
}

.smr-rationale-section h3,
.smr-next-steps-section h3 {
    font-family: var(--smr-font-heading);
    font-size: var(--smr-text-xl);
    font-weight: var(--smr-font-weight-bold);
    color: var(--smr-primary);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--smr-primary-muted);
}

.smr-rationale-section ul {
    list-style: none;
    padding: 0;
    margin: 16px 0 0 0;
}

.smr-rationale-section li {
    padding: 8px 0 8px 32px;
    position: relative;
    line-height: 1.6;
    color: var(--smr-text-body);
}

.smr-rationale-section li:before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 8px;
    color: var(--smr-white);
    background: var(--smr-primary);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: var(--smr-font-weight-bold);
}

/* ─── Warnings Box ────────────────────────────────────────────
   Softer left-border accent style replaces the previous orange
   gradient block. Reads as an aside rather than competing with
   the recommendation card. */
.smr-warnings-box {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-left: 4px solid var(--smr-warning);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: var(--smr-shadow-header);
}

.smr-warnings-box p {
    margin: 0 0 8px 0;
    line-height: 1.6;
    color: #92400E;
    font-size: var(--smr-text-sm);
}

.smr-warnings-box p:last-child {
    margin-bottom: 0;
}

/* ─── Disclaimer ──────────────────────────────────────────────
   Quiet footer-style block. */
.smr-disclaimer {
    background: var(--smr-bg);
    padding: 18px 24px;
    border-radius: 12px;
    font-size: var(--smr-text-sm);
    color: var(--smr-text-light);
    margin-top: 24px;
    line-height: 1.6;
}

.smr-disclaimer p {
    margin: 0;
}

/* ─── Results Footer (Phase 5) ────────────────────────────────
   Inline "Prefer to call? phone | hours" strip below the lead
   form. Quiet but legible — matches the partner team's footer. */
.smr-results-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px 24px;
    margin: 20px 0 8px;
    color: var(--smr-text-body);
    font-size: var(--smr-text-sm);
    flex-wrap: wrap;
    text-align: center;
    line-height: 1.4;
}

.smr-results-footer-phone,
.smr-results-footer-phone:link,
.smr-results-footer-phone:visited,
.smr-results-footer-phone:hover,
.smr-results-footer-phone:active,
.smr-results-footer-phone:focus {
    color: var(--smr-primary) !important;
    text-decoration: none;
    font-weight: var(--smr-font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

.smr-results-footer-phone strong {
    font-family: var(--smr-font-heading);
    font-weight: var(--smr-font-weight-bold);
}

.smr-results-footer-phone:hover {
    text-decoration: underline !important;
}

.smr-results-footer-phone svg {
    flex-shrink: 0;
}

.smr-results-footer-divider {
    color: var(--smr-text-light);
    opacity: 0.6;
}

.smr-results-footer-hours {
    color: var(--smr-text-body);
}

/* ─── Edit Responses link (Phase 5) ───────────────────────────
   Quiet link below the disclaimer. Replaces the previous loud
   "Retake Quiz" button — the action is the same, just calmer. */
.smr-edit-responses-btn,
.smr-retake-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--smr-primary);
    font-family: var(--smr-font-heading);
    font-size: var(--smr-text-sm);
    font-weight: var(--smr-font-weight-bold);
    cursor: pointer;
    margin: 16px auto 0;
    text-decoration: none;
    transition: color var(--smr-transition-normal);
}

.smr-edit-responses-btn {
    display: block;
    margin: 16px auto 0;
    text-align: center;
}

.smr-edit-responses-btn:hover,
.smr-retake-btn:hover {
    color: var(--smr-primary-dark);
    text-decoration: underline;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 720px) {
    .smr-results-hero {
        padding: 28px 22px 24px;
    }

    .smr-results-hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* On narrow widths the right-column card stacks BELOW the copy.
       This keeps the answer visible after a small scroll while
       prioritising the "Your Results" headline above the fold. */
    .smr-results-hero-title {
        font-size: var(--smr-text-2xl);
    }

    .smr-results-actions-icons {
        top: 12px;
        right: 12px;
    }

    .smr-results-hero-brandrow {
        padding: 0 44px 0 0;
        margin-bottom: 20px;
        gap: 12px;
    }

    .smr-results-hero-brand-logo {
        max-height: 32px;
    }

    .smr-results-hero-partner-wrap img {
        max-height: 28px;
    }

    .smr-results-hero-cobrand-divider {
        height: 24px;
    }

    .smr-recommendation-card {
        padding: 22px 18px;
    }

    .smr-recommendation-plan {
        font-size: var(--smr-text-lg);
    }

    .smr-rationale-summary {
        padding: 14px 18px;
    }

    .smr-rationale-summary-label {
        font-size: 1rem;
    }

    .smr-rationale-body {
        padding: 16px 18px 20px;
        font-size: 0.92rem;
    }
}

@media (max-width: 640px) {
    .smr-results-section {
        padding: 32px 20px 24px;
    }

    .smr-results-section::before,
    .smr-results-section::after {
        width: 300px;
        height: 300px;
        filter: blur(70px);
    }

    .smr-rationale-section,
    .smr-next-steps-section {
        padding: 24px 20px;
    }

    .smr-results-hero-actions {
        gap: 12px;
    }

    .smr-results-hero-cta {
        width: 100%;
    }

    .smr-results-footer {
        flex-direction: column;
        gap: 6px;
    }

    .smr-results-footer-divider {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .smr-scale-indicator,
    .smr-icon-btn,
    .smr-results-hero-cta,
    .smr-rationale-summary,
    .smr-rationale-chevron {
        transition: none;
    }
}

/* Lead Form on Results Page ─ contextual upgrades only.
   Scoped via .smr-lead-form-results so the pre-results / mid-quiz
   lead form variant is untouched. */
.smr-lead-form-results {
    scroll-margin-top: 100px;
    padding: 0;
    margin-bottom: 24px;
}

.smr-lead-form-results h2 {
    font-family: var(--smr-font-heading);
    font-size: var(--smr-text-xl);
    color: var(--smr-primary);
    font-weight: var(--smr-font-weight-bold);
    margin: 0 0 8px 0;
    text-align: left;
}

.smr-lead-form-results .smr-lead-intro {
    color: var(--smr-text-body);
    font-size: var(--smr-text-sm);
    margin: 0 0 24px 0;
    text-align: left;
    max-width: none;
    line-height: 1.5;
}

.smr-lead-form-results .smr-lead-form-card {
    background: var(--smr-white);
    border-radius: 16px;
    padding: 32px;
    border: none;
    box-shadow: var(--smr-shadow-card);
}

@media (max-width: 640px) {
    .smr-lead-form-results .smr-lead-form-card {
        padding: 24px 20px;
    }

    .smr-lead-form-results h2 {
        font-size: var(--smr-text-xl);
    }
}

/* Chatbot Modal */
.smr-chatbot-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smr-chatbot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.smr-chatbot-container {
    position: relative;
    background: var(--smr-white);
    border-radius: var(--smr-radius);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.smr-chatbot-header {
    background: linear-gradient(135deg, var(--smr-primary), var(--smr-primary-light));
    color: var(--smr-white);
    padding: 20px;
    border-radius: var(--smr-radius) var(--smr-radius) 0 0;
    position: relative;
}

.smr-chatbot-header h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    color: var(--smr-white) !important;
}

.smr-chatbot-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
    color: var(--smr-white) !important;
}

.smr-chatbot-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--smr-white);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.8;
}

.smr-chatbot-close:hover {
    opacity: 1;
}

.smr-chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    max-height: 350px;
}

.smr-chat-message {
    display: flex;
    margin-bottom: 15px;
}

.smr-chat-message.bot {
    justify-content: flex-start;
}

.smr-chat-message.user {
    justify-content: flex-end;
}

.smr-bot-avatar {
    width: 36px;
    height: 36px;
    background: var(--smr-primary);
    color: var(--smr-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 10px;
    flex-shrink: 0;
}

.smr-message-bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.smr-chat-message.bot .smr-message-bubble {
    background: var(--smr-bg);
    color: var(--smr-text-body);
}

.smr-chat-message.user .smr-message-bubble {
    background: var(--smr-primary);
    color: var(--smr-white);
}

.smr-chatbot-input-area {
    padding: 15px 20px;
    border-top: 1px solid var(--smr-border);
}

.smr-chat-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.smr-chat-button {
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid var(--smr-border);
    background: var(--smr-white);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.smr-chat-button:hover {
    border-color: var(--smr-primary);
}

.smr-chat-button.primary {
    background: var(--smr-primary);
    color: var(--smr-white);
    border-color: var(--smr-primary);
}

.smr-chat-input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.smr-chat-input-group input {
    padding: 12px 16px;
    border: 2px solid var(--smr-border);
    border-radius: 8px;
    font-size: 1rem;
}

.smr-chat-skip-link {
    text-align: center;
    margin-top: 10px;
}

.smr-chat-skip-link button {
    background: none;
    border: none;
    color: var(--smr-text-light);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
}

.smr-chat-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.smr-chat-checkbox-label {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--smr-bg);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
}

.smr-chat-checkbox-label input {
    margin-right: 8px;
    accent-color: var(--smr-primary);
}

/* Error State */
.smr-error {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05));
    border: 2px solid var(--smr-danger);
    color: var(--smr-danger);
    padding: 20px;
    border-radius: var(--smr-radius);
    text-align: center;
    font-weight: 600;
}

/* ==========================================
   Coverage Comparison Panel (Phase 6b)
   ==========================================
   Three-column card showing the user's employer plan side-by-side
   with national-average Medicare Advantage and Original Medicare +
   Supplement + Rx numbers. The recommended option gets a green
   "GREAT FIT" badge, and any row where the Medicare option is
   cheaper than the user's employer plan shows a "Save ~$X" delta
   in green underneath the value. Layout deliberately mirrors the
   partner-team Figma so cross-product visual parity holds.

   The .smr-comparison-fit-color custom property is local to this
   panel — keeping it scoped here rather than in :root prevents it
   from leaking into other components (where green is reserved for
   the success state). */
.smr-comparison-section {
    --smr-comparison-fit-color: #16a34a;
    --smr-comparison-fit-bg: rgba(22, 163, 74, 0.12);
    --smr-comparison-divider: rgba(69, 41, 92, 0.10);
    /* Bottom margin gives the IRMAA footnote breathing room before the
       rationale accordion. Without this the footnote and the accordion
       summary visually collide. */
    margin: 36px 0 32px;
}

.smr-comparison-header {
    margin-bottom: 16px;
}

.smr-comparison-title {
    font-family: var(--smr-font-heading);
    font-size: 1.55rem;
    color: var(--smr-primary);
    margin: 0 0 6px 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.smr-comparison-intro {
    color: var(--smr-text-light);
    margin: 0;
    font-size: 0.95rem;
}

/* Card container — soft shadow + rounded corners; the table inside
   handles its own row dividers so the card itself is just a frame. */
.smr-comparison-card {
    background: var(--smr-white);
    border: 1px solid var(--smr-comparison-divider);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04),
                0 4px 12px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.smr-comparison-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Column header row — slightly larger padding so the GREAT FIT
   badge has breathing room. */
.smr-comparison-table thead th {
    padding: 22px 20px 18px;
    text-align: left;
    vertical-align: top;
    background: transparent;
    font-family: var(--smr-font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--smr-primary);
    border-bottom: 1px solid var(--smr-comparison-divider);
}

.smr-comparison-table thead th.smr-comparison-col-label {
    width: 22%;
}

.smr-comparison-col-name {
    display: block;
}

/* GREAT FIT badge — green pill underneath the column name. We use
   inline-block + margin so the column header height stays consistent
   between recommended / non-recommended columns. */
.smr-comparison-fit-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    background: var(--smr-comparison-fit-bg);
    color: var(--smr-comparison-fit-color);
    font-family: var(--smr-font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    line-height: 1;
}

/* Body rows */
.smr-comparison-table tbody td,
.smr-comparison-table tbody th {
    padding: 22px 20px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--smr-comparison-divider);
    background: transparent;
}

.smr-comparison-table tbody tr:last-child td,
.smr-comparison-table tbody tr:last-child th {
    border-bottom: none;
}

.smr-comparison-row-label {
    color: var(--smr-text-light);
    font-weight: 500;
    font-size: 0.95rem;
}

.smr-comparison-your {
    color: var(--smr-primary);
    font-weight: 700;
    font-size: 1.1rem;
}

.smr-comparison-medicare {
    color: var(--smr-primary);
    font-weight: 700;
    font-size: 1.1rem;
}

.smr-comparison-cell-value {
    font-weight: 700;
    color: var(--smr-primary);
}

.smr-comparison-cell-savings {
    margin-top: 4px;
    color: var(--smr-comparison-fit-color);
    font-weight: 500;
    font-size: 0.85rem;
}

/* Subtle background tint on the recommended column so the eye lands
   on it first. Applied to header AND every body cell in that column
   so the tint runs the full height. */
.smr-comparison-col--recommended {
    background: var(--smr-comparison-fit-bg) !important;
}

.smr-comparison-footnote {
    margin: 16px 4px 0;
    font-size: 0.85rem;
    color: var(--smr-text-light);
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .smr-quiz-header {
        padding: 18px 22px 14px;
    }

    .smr-quiz-header h1 {
        font-size: 1.35rem;
    }

    .smr-quiz-form,
    .smr-lead-form-section,
    .smr-results-section {
        padding: 25px 20px;
    }

    .smr-question-card {
        padding: 0;
    }

    /* Tighter option cards on narrow viewports; icon shrinks slightly
       so the body has room to breathe. */
    .smr-radio-option,
    .smr-checkbox-option {
        padding: 14px 52px 14px 14px;
        gap: 12px;
    }

    .smr-option-icon {
        width: 38px;
        height: 38px;
        border-radius: 9px;
    }

    .smr-option-icon img {
        width: 20px;
        height: 20px;
    }

    .smr-question-text {
        font-size: 1.25rem;
    }
    
    .smr-form-row {
        grid-template-columns: 1fr;
    }
    
    .smr-birthday-selector {
        grid-template-columns: 1fr;
    }
    
    .smr-nav-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .smr-btn {
        width: 100%;
    }
    
    .smr-recommendation-plan {
        font-size: 1.4rem;
    }
    
    /* Coverage Comparison panel — narrow viewports.
       The full 4-column table is too dense at <600px, so we collapse
       to a horizontally scrollable card. Padding tightens but the
       column layout, badge, and savings deltas all remain intact so
       the user can swipe to see Medicare Supplement on the right. */
    .smr-comparison-title {
        font-size: 1.3rem;
    }

    .smr-comparison-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .smr-comparison-table {
        min-width: 560px;
    }

    .smr-comparison-table thead th,
    .smr-comparison-table tbody td,
    .smr-comparison-table tbody th {
        padding: 16px 14px;
        font-size: 0.92rem;
    }

    .smr-comparison-your,
    .smr-comparison-medicare,
    .smr-comparison-cell-value {
        font-size: 1rem;
    }

    .smr-comparison-cell-savings {
        font-size: 0.78rem;
    }
}

/* ==========================================
   EMAIL PDF MODAL
   Lazy-built dialog used by the "Email me this
   recommendation" button on the results hero.
   ========================================== */

.smr-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: var(--smr-font-stack, 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.smr-modal[hidden] {
    display: none !important;
}

.smr-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(45, 25, 60, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.smr-modal-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #FFFFFF;
    border-radius: var(--smr-radius);
    padding: 28px 28px 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(69, 41, 92, 0.08);
    animation: smr-modal-rise 180ms ease-out;
}

@keyframes smr-modal-rise {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.smr-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--smr-text-light);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 50%;
    transition: background 120ms ease, color 120ms ease;
}

.smr-modal-close:hover,
.smr-modal-close:focus-visible {
    background: var(--smr-primary-muted);
    color: var(--smr-primary);
    outline: none;
}

.smr-modal-title {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--smr-primary);
    padding-right: 28px;
}

.smr-modal-intro {
    margin: 0 0 18px;
    font-size: 0.95rem;
    color: var(--smr-text-light);
    line-height: 1.5;
}

.smr-modal-label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--smr-text-dark);
    letter-spacing: 0.02em;
}

.smr-modal-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    color: var(--smr-text-dark);
    background: #FFFFFF;
    border: 1.5px solid var(--smr-border);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.smr-modal-input:focus {
    outline: none;
    border-color: var(--smr-primary);
    box-shadow: 0 0 0 3px rgba(69, 41, 92, 0.15);
}

.smr-modal-status {
    margin-top: 12px;
    padding: 10px 12px;
    font-size: 0.9rem;
    border-radius: 6px;
    line-height: 1.4;
}

.smr-modal-status[hidden] {
    display: none;
}

.smr-modal-status.is-error {
    background: #FCE9E0;
    color: #9C3D1A;
    border: 1px solid #F4B59A;
}

.smr-modal-status.is-success {
    background: #E3F4E5;
    color: #1E5E33;
    border: 1px solid #B7DDC0;
}

.smr-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.smr-modal-btn {
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    transition: background 120ms ease, color 120ms ease, transform 80ms ease;
}

.smr-modal-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.smr-modal-btn-secondary {
    background: transparent;
    color: var(--smr-text-light);
}

.smr-modal-btn-secondary:hover:not(:disabled) {
    background: var(--smr-primary-muted);
    color: var(--smr-primary);
}

.smr-modal-btn-primary {
    background: var(--smr-primary);
    color: #FFFFFF;
}

.smr-modal-btn-primary:hover:not(:disabled) {
    background: var(--smr-primary-dark);
}

.smr-modal-btn-primary:active:not(:disabled) {
    transform: translateY(1px);
}

body.smr-modal-open {
    overflow: hidden;
}

@media (max-width: 480px) {
    .smr-modal {
        padding: 12px;
    }
    .smr-modal-card {
        padding: 22px 20px 18px;
    }
    .smr-modal-actions {
        flex-direction: column-reverse;
    }
    .smr-modal-actions .smr-modal-btn {
        width: 100%;
    }
}

/* ==========================================
   PRINT-ONLY CONTACT INFO
   Hidden on screen, shown on print
   ========================================== */

.smr-print-contact-info {
    display: none !important; /* Hidden on screen */
}

/* ==========================================
   PRINT STYLES
   For printing/saving recommendation as PDF
   JS beforeprint/afterprint handles hiding
   non-quiz siblings in the DOM.
   ========================================== */

@media print {
    @page {
        margin: 0.5in;
        size: letter;
    }

    html, body {
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* The JS beforeprint handler creates #smr-print-overlay on <body>
       with all the content we need, and hides everything else. */
    #smr-print-overlay {
        display: block !important;
        overflow: visible !important;
    }

    #smr-print-overlay .smr-recommendation-tier {
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 10px;
        color: #4A4A4A;
    }

    #smr-print-overlay .smr-recommendation-plan {
        font-size: 1.75rem;
        font-weight: 700;
        color: #45295C;
    }
}