.ss-shell {
    /* Brand palette — the only place raw hex codes live. Everything below references these. */
    --ss-ocean: #004e59;
    --ss-ocean-20: #ccdcdf;
    --ss-ocean-40: #99b8bd;
    --ss-lime: #76bc21;
    --ss-yellow: #fce200;
    --ss-yellow-hover: #e6ce00;
    --ss-yellow-pressed: #cfb900;
    --ss-gray: #9a9a9b;
    --ss-gray-40: #d7d7d7;
    --ss-gray-text: #6e6e70;
    --ss-ink: #1d2b2e;
    --ss-ink-muted: #4a5759;
    --ss-page: #f3f4f4;
    --ss-white: #ffffff;
    /* Semantic tokens mapped onto the brand palette. */
    --ss-primary: var(--ss-ocean);
    --ss-primary-hover: var(--ss-ocean);
    --ss-header-navy: var(--ss-ocean);
    --ss-green: var(--ss-lime);
    --ss-red: #EF4444;
    --ss-body-bg: var(--ss-page);
    --ss-card-bg: var(--ss-white);
    --ss-border: var(--ss-gray-40);
    --ss-divider-subtle: var(--ss-page);
    --ss-text: var(--ss-ink);
    --ss-text-secondary: var(--ss-ink-muted);
    --ss-disabled: var(--ss-gray-40);
    --ss-disabled-text: var(--ss-gray-text);
    --ss-back-disabled: var(--ss-gray-40);
    --ss-inactive: var(--ss-gray);
    --ss-icon: var(--ss-lime);
    --ss-selected-bg: var(--ss-ocean-20);
    --ss-focus-ring: var(--ss-ocean);
    /* Phase-panel / stepper palette (TOS-125) */
    --ss-step-active: var(--ss-ocean);
    --ss-step-complete: var(--ss-lime);
    --ss-step-future-bg: var(--ss-page);
    --ss-step-future-num: var(--ss-text-secondary);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ss-body-bg);
    font-family: "Segoe UI", "Segoe UI Variable", Inter, Roboto, sans-serif;
    color: var(--ss-text);
}

.ss-banner {
    flex: 0 0 auto;
    background: var(--ss-header-navy);
    color: var(--ss-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 34px;
    font-size: 14px;
    font-weight: 600;
}

.ss-banner-left,
.ss-banner-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Emergency notice keeps white text; only its warning icon picks up the yellow. */
.ss-banner-right svg {
    color: var(--ss-yellow);
}

.ss-banner svg {
    flex: 0 0 auto;
}

.ss-banner-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.ss-header {
    flex: 0 0 auto;
    background: var(--ss-card-bg);
    border-bottom: 1px solid var(--ss-border);
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 40px;
}

.ss-logobar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

    .ss-logobar .ss-logo-tm2u {
        width: 140px;
        max-width: 100%;
        object-fit: contain;
    }

.ss-header .ss-logo-partner {
    flex: 0 0 auto;
    width: 180px;
    max-width: 100%;
    object-fit: contain;
}

.ss-stepper {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    padding: 0;
}

.ss-stepper-inner {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 720px;
}

.ss-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
    gap: 8px;
}

.ss-step-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--ss-inactive);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--ss-text-secondary);
    background: var(--ss-card-bg);
}

.ss-step.is-active .ss-step-dot {
    border-color: var(--ss-step-active);
    color: var(--ss-step-active);
}

.ss-step.is-complete .ss-step-dot {
    border-color: var(--ss-step-complete);
    background: var(--ss-step-complete);
    color: var(--ss-white);
}

.ss-step-label {
    font-size: 13px;
    color: var(--ss-text-secondary);
    font-weight: 500;
}

.ss-step.is-active .ss-step-label {
    color: var(--ss-step-active);
    font-weight: 600;
}

.ss-step-line {
    flex: 1 1 auto;
    height: 2px;
    background: var(--ss-border);
    margin-top: 16px;
}

.ss-step.is-complete + .ss-step-line {
    background: var(--ss-step-complete);
}

.ss-main {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    padding: 18px 40px;
    align-items: stretch;
    overflow: hidden;
}

.ss-aside {
    align-self: stretch;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.ss-card {
    flex: 0 0 auto;
    background: var(--ss-card-bg);
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    padding: 14px 18px;
}

/* "In this phase" card carries the lime accent bar on its leading edge. */
.ss-card-phase {
    border-left: 4px solid var(--ss-lime);
}

.ss-card-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ss-step-active);
    margin: 0 0 10px;
}

/* "Before your visit" left timeline */
.ss-journey-head {
    flex: 0 0 auto;
}

.ss-journey-heading {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ss-header-navy);
    margin: 4px 0 26px;
}

.ss-journey-section {
    font-size: 16px;
    font-weight: 700;
    color: var(--ss-header-navy);
    margin: 0 0 20px;
}

.ss-journey {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.ss-journey-item {
    display: flex;
    gap: 14px;
    padding-bottom: 28px;
}

    .ss-journey-item:last-child {
        padding-bottom: 0;
    }

.ss-journey-marker {
    position: relative;
    flex: 0 0 32px;
    display: flex;
    justify-content: center;
}

.ss-journey-dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    background: var(--ss-white);
    border: 1.5px solid var(--ss-inactive);
    color: var(--ss-step-future-num);
}

/* Vertical connector to the next milestone */
.ss-journey-item:not(:last-child) .ss-journey-marker::after {
    content: "";
    position: absolute;
    top: 34px;
    bottom: -4px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: var(--ss-inactive);
}

.ss-journey-item.is-complete .ss-journey-marker::after {
    background: var(--ss-step-complete);
}

/* Indicators keep one size and weight in every state: active is outlined, complete is filled lime with a check. */
.ss-journey-item.is-active .ss-journey-dot {
    border-color: var(--ss-header-navy);
    color: var(--ss-header-navy);
}

.ss-journey-item.is-complete .ss-journey-dot {
    background: var(--ss-step-complete);
    border-color: var(--ss-step-complete);
    color: var(--ss-white);
}

.ss-journey-body {
    padding-top: 5px;
}

.ss-journey-label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: var(--ss-step-future-num);
}

.ss-journey-item.is-complete .ss-journey-label,
.ss-journey-item.is-active .ss-journey-label {
    color: var(--ss-header-navy);
}

.ss-journey-here {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ss-step-active);
}

/* Compact journey used by the "In This Phase" card: same states and connectors, scaled to the card. */
.ss-journey-compact .ss-journey-item {
    gap: 12px;
    padding-bottom: 18px;
}

    .ss-journey-compact .ss-journey-item:last-child {
        padding-bottom: 0;
    }

.ss-journey-compact .ss-journey-marker {
    flex-basis: 26px;
}

.ss-journey-compact .ss-journey-item:not(.is-active):not(.is-complete) .ss-journey-dot,
.ss-journey-compact .ss-journey-item:not(.is-active):not(.is-complete) .ss-journey-label {
    color: var(--ss-text-secondary);
}

.ss-journey-compact .ss-journey-dot {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

.ss-journey-compact .ss-journey-item:not(:last-child) .ss-journey-marker::after {
    top: 28px;
}

.ss-journey-compact .ss-journey-body {
    padding-top: 3px;
}

.ss-journey-compact .ss-journey-label {
    font-size: 14px;
    line-height: 1.4;
}

.ss-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ss-text);
}

    .ss-info-row svg {
        color: var(--ss-icon);
        flex: 0 0 auto;
    }

/* Dark "Don't see your condition?" help card */
.ss-card-help {
    background: var(--ss-header-navy);
    border-color: var(--ss-header-navy);
    color: #fff;
}

.ss-help-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

    .ss-help-icon {
        flex: 0 0 auto;
        margin-top: 1px;
        color: #93A7D6;
    }

.ss-help-text {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.45;
    color: #E5EAF5;
}

.ss-help-label {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #93A7D6;
}

.ss-help-phone {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

/* "About seizure medications" card — informational, always fully expanded (including mobile). */
.ss-card-medinfo {
    background: var(--ss-ocean-20);
    border-color: var(--ss-ocean-40);
    color: var(--ss-ink);
    font-size: 14px;
    line-height: 1.5;
}

.ss-medinfo-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--ss-ocean);
}

    .ss-medinfo-title svg {
        flex: 0 0 auto;
        color: var(--ss-ocean);
    }

.ss-medinfo-text {
    margin: 0 0 8px;
}

.ss-medinfo-list {
    margin: 0 0 12px;
    padding-left: 20px;
}

    .ss-medinfo-list li + li {
        margin-top: 8px;
    }

    .ss-medinfo-list strong {
        font-weight: 600;
        color: var(--ss-ocean);
    }

.ss-medinfo-closing {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--ss-ocean-40);
}

/* Light "Need help?" card — support number on every non-specialty screen. */
.ss-needhelp-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ss-step-active);
}

    .ss-needhelp-phone svg {
        flex: 0 0 auto;
        color: var(--ss-icon);
    }

.ss-content {
    background: var(--ss-card-bg);
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    padding: 24px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ss-step-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ss-header-navy);
    margin: 0 0 6px;
}

.ss-content-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--ss-header-navy);
    margin: 0 0 8px;
}

    .ss-content-title:focus,
    .ss-content-title:focus-visible {
        outline: none;
    }

.ss-content-instructions {
    font-size: 14px;
    color: var(--ss-text-secondary);
    margin: 0 0 24px;
    max-width: 100%;
    line-height: 1.5;
}

.ss-content-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.ss-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 520px;
}

.ss-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--ss-card-bg);
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--ss-text);
    transition: border-color .15s ease, background .15s ease;
}

    .ss-option:hover {
        border-color: var(--ss-primary);
    }

    /* 2px border on selection; padding drops 1px so the row doesn't shift. */
    .ss-option.is-selected {
        border: 2px solid var(--ss-primary);
        padding: 15px 17px;
        background: var(--ss-selected-bg);
    }

.ss-option-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--ss-inactive);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ss-option.is-selected .ss-option-radio {
    border-color: var(--ss-primary);
}

    .ss-option.is-selected .ss-option-radio::after {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--ss-primary);
    }

.ss-placeholder {
    font-size: 14px;
    color: var(--ss-text-secondary);
    font-style: italic;
}

.ss-textarea {
    width: 100%;
    max-width: 640px;
    padding: 14px 16px;
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ss-text);
    line-height: 1.5;
    resize: vertical;
}

    .ss-textarea:focus {
        outline: none;
        border-color: var(--ss-primary);
    }

/* Tall single-field variant used on the "Reason for your visit" step, where the
   textarea is the only input and should fill the available content height. */
.ss-textarea-lg {
    max-width: 94%;
    min-height: 320px;
    resize: none;
}

/* Accessible label that stays in the DOM for screen readers but is hidden visually. */
.ss-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ss-review-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 640px;
    margin: 0;
}

.ss-review-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ss-border);
}

    .ss-review-row dt {
        font-size: 14px;
        font-weight: 500;
        color: var(--ss-text-secondary);
        flex: 0 0 auto;
    }

    .ss-review-row dd {
        margin: 0;
        font-size: 15px;
        font-weight: 500;
        color: var(--ss-text);
        text-align: right;
    }

.ss-expect-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
    margin: 0;
    padding-left: 20px;
    font-size: 15px;
    color: var(--ss-text);
    line-height: 1.5;
}

.ss-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 40px;
    background: transparent;
}

.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.ss-btn-back {
    background: var(--ss-white);
    border: 2px solid var(--ss-primary);
    color: var(--ss-primary);
}

    .ss-btn-back:hover:not(:disabled) {
        background: var(--ss-selected-bg);
    }

    .ss-btn-back:disabled {
        background: var(--ss-white);
        border-color: var(--ss-back-disabled);
        color: var(--ss-disabled-text);
        cursor: not-allowed;
    }

/* Electric Yellow is reserved for Continue. States: enabled → hover → pressed, plus disabled,
   keyboard focus and loading. Errors never recolor the button; the message sits above the footer. */
.ss-btn-continue {
    min-width: 140px;
    gap: 10px;
    background: var(--ss-yellow);
    border-color: var(--ss-yellow-pressed);
    color: var(--ss-ocean);
    transition: background .12s ease;
}

    .ss-btn-continue:hover:not(:disabled) {
        background: var(--ss-yellow-hover);
    }

    .ss-btn-continue:active:not(:disabled):not(.is-loading) {
        background: var(--ss-yellow-pressed);
    }

    .ss-btn-continue:disabled {
        background: var(--ss-disabled);
        border-color: var(--ss-disabled);
        color: var(--ss-disabled-text);
        cursor: not-allowed;
    }

    .ss-btn-continue.is-loading,
    .ss-btn-continue.is-loading:hover {
        background: var(--ss-yellow);
        cursor: progress;
    }

.ss-btn:focus-visible {
    outline: 2px solid var(--ss-focus-ring);
    outline-offset: 2px;
}

.ss-btn-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: ss-spin .7s linear infinite;
}

@keyframes ss-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ss-btn-spinner {
        animation-duration: 2s;
    }
}

.ss-footer-wrap {
    flex: 0 0 auto;
}

.ss-footer-error {
    margin: 0;
    padding: 12px 40px 0;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: var(--ss-text);
}

/* Visible focus state for keyboard navigation of the radio options. */
.ss-option:focus-visible {
    outline: 2px solid var(--ss-focus-ring);
    outline-offset: 2px;
}

/* ── New Patient Information modal ─────────────────────────────── */
.ss-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(17, 24, 39, 0.45);
    overflow-y: auto;
}

.ss-modal-overlay-top {
    z-index: 1100;
    background: rgba(17, 24, 39, 0.3);
}

.ss-modal {
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--ss-card-bg);
    box-shadow: 0 20px 48px rgba(17, 24, 39, 0.28);
    padding: 24px 28px 20px;
    box-sizing: border-box;
}

.ss-modal-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--ss-text);
    margin: 0 0 4px;
}

/* ── Appointment details ("before your visit") modal ──────────────
   A wide two-column dialog: the journey rail on the left, the active step's body and the modal
   footer on the right. Opened from the provider step's Continue. */
.ss-appt-modal {
    max-width: 1040px;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
}

.ss-appt-grid {
    display: flex;
    align-items: stretch;
    /* Fixed height so the modal stays the same size on every step (reason for visit,
       complete information, …); the content pane scrolls within this constant frame. */
    height: min(680px, calc(100vh - 48px));
}

.ss-appt-nav {
    flex: 0 0 256px;
    box-sizing: border-box;
    padding: 32px 20px;
    border-right: 1px solid var(--ss-border);
    overflow-y: auto;
}

.ss-appt-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;          /* lets the content pane shrink and scroll instead of pushing the footer out */
    --ss-appt-foot-h: 77px; /* 16px + 44px button + 16px padding + 1px border */
}

.ss-appt-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;   /* overflow-y:auto forces overflow-x to auto; pin it so the map never adds a horizontal bar */
    min-height: 0;
    /* Room equal to the footer so the last item scrolls fully clear of Back / Save and continue. */
    padding: 32px 32px var(--ss-appt-foot-h, 77px);
    scroll-padding-bottom: var(--ss-appt-foot-h, 77px);
    /* Don't let the browser re-anchor the scroll position when content above changes size
       (results or the map loading in); the patient's position stays where they left it. */
    overflow-anchor: none;
    /* Keep the pane scrollable but hide the scrollbar chrome — the visible bar looked out of place
       inside the modal. Content still scrolls via wheel/trackpad/keyboard. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge/IE */
}

    .ss-appt-content::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;              /* Chrome/Safari/Edge */
    }

    /* The step bodies reuse the page content classes; trim the leading margin so the title sits at the
       top of the pane. */
    .ss-appt-content .ss-content-title {
        margin-top: 0;
    }

    .ss-appt-content .ss-content-instructions {
        margin-bottom: 12px;
    }

.ss-appt-placeholder {
    min-height: 260px;
}

.ss-appt-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 32px;
    border-top: 1px solid var(--ss-border);
}

    /* Back and Save and continue share one size. */
    .ss-appt-foot .ss-btn {
        height: 44px;
        min-width: 180px;
    }

@media (max-width: 860px) {
    .ss-appt-grid {
        flex-direction: column;
    }

    .ss-appt-nav {
        flex-basis: auto;
        border-right: none;
        border-bottom: 1px solid var(--ss-border);
    }
}

.ss-modal-subtitle {
    font-size: 13px;
    color: #1F1F1F;
    margin: 0 0 16px;
    line-height: 1.45;
    font-weight: 500;
}

.ss-npf-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ss-text);
    margin: 4px 0 12px;
}

.ss-npf-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 13px 14px;
    margin-bottom: 4px;
}

.ss-npf-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.ss-col-12 {
    grid-column: span 12;
}

.ss-col-6 {
    grid-column: span 6;
}

.ss-col-4 {
    grid-column: span 4;
}

.ss-col-3 {
    grid-column: span 3;
}

.ss-npf-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ss-text);
}

.ss-req {
    color: var(--ss-red);
    margin-left: 2px;
}

.ss-npf-input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #D0D5DD;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--ss-text);
    background: var(--ss-card-bg);
}

    .ss-npf-input::placeholder {
        color: #9ca3af;
    }

    .ss-npf-input:focus {
        outline: none;
        border-color: var(--ss-primary);
        box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
    }

.ss-npf-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

    /* Keep the option list dark even while the placeholder greys out the collapsed select. */
    .ss-npf-select option {
        color: var(--ss-text);
    }

.ss-npf-placeholder {
    color: var(--ss-text);
}

.ss-npf-invalid {
    border-color: var(--ss-red);
}

.ss-npf-error {
    font-size: 12px;
    color: var(--ss-red);
}

.ss-npf-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 14px 0 2px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ss-text);
}

    .ss-npf-consent input {
        width: 18px;
        height: 18px;
        margin-top: 2px;
        flex: 0 0 auto;
        accent-color: var(--ss-primary);
    }

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

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

.ss-modal-cancel {
    height: 40px;
    background: #fff;
    border: 1px solid var(--ss-border);
    color: var(--ss-text);
}

    .ss-modal-cancel:hover {
        background: var(--ss-divider-subtle);
    }

.ss-modal-save {
    height: 40px;
    min-width: 150px;
    background: var(--ss-header-navy);
    color: #fff;
}

    .ss-modal-save:hover:not(:disabled) {
        filter: brightness(1.1);
    }

    .ss-modal-save:disabled {
        background: var(--ss-disabled);
        color: #fff;
        cursor: not-allowed;
    }

/* Continue inside a modal footer matches the 40px Cancel/Back beside it. */
.ss-modal-actions .ss-btn-continue {
    height: 40px;
}

.ss-confirm {
    position: relative;
    width: 100%;
    max-width: 470px;
    background: var(--ss-card-bg);
    border-radius: 10px;
    box-shadow: 0 20px 48px rgba(17, 24, 39, 0.3);
    padding: 22px 24px 20px;
    box-sizing: border-box;
}

/* Provider-not-covered dialog: warning icon beside the title, then the message and actions. */
.ss-ci-notcovered {
    max-width: 470px;
}

.ss-ci-notcovered-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    padding-right: 20px;
}

    .ss-ci-notcovered-head .ss-confirm-title {
        margin: 0;
    }

.ss-ci-notcovered-icon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #B45309;
}

.ss-confirm-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ss-text);
    margin: 0 0 8px;
}

.ss-confirm-text {
    font-size: 13px;
    color: var(--ss-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.ss-confirm-discard {
    height: 40px;
    background: var(--ss-red);
    color: #fff;
}

    .ss-confirm-discard:hover {
        filter: brightness(0.95);
    }

/* ── "You may already be a patient" dialog ─────────────────────── */
.ss-prf {
    position: relative;
    max-width: 420px;
    padding: 28px 28px 26px;
    border-radius: 12px;
    text-align: center;
}

.ss-prf-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--ss-text-secondary);
    cursor: pointer;
}

    .ss-prf-close:hover {
        color: var(--ss-text);
    }

.ss-prf-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ss-prf-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ss-text);
    margin: 4px 0 12px;
    line-height: 1.4;
}

.ss-prf-subtitle {
    font-size: 14px;
    color: var(--ss-text-secondary);
    margin: 0 0 14px;
    line-height: 1.5;
}

.ss-prf-text {
    font-size: 14px;
    color: var(--ss-text-secondary);
    margin: 0 0 10px;
    line-height: 1.5;
}

.ss-prf-phone {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    color: var(--ss-header-navy);
    text-decoration: none;
    margin: 0 0 22px;
}

    .ss-prf-phone:hover {
        text-decoration: underline;
    }

.ss-prf-action {
    min-width: 180px;
    height: 40px;
    background: #fff;
    border: 1px solid var(--ss-primary);
    color: var(--ss-primary);
}

    .ss-prf-action:hover {
        background: var(--ss-divider-subtle);
    }

.ss-rs-modal {
    position: relative;
    width: 100%;
    max-width: 650px;
    max-height: calc(100vh - 48px);
    background: #FFFFFF;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(17, 24, 39, 0.28);
    box-sizing: border-box;
}

    .ss-rs-modal .ss-modal-title {
        font-size: 21px;
        line-height: 1.3;
        font-weight: 600;
        color: #1F1F1F;
        margin: 0;
        padding: 26px 24px 4px;
        padding-right: 55px;
    }

    .ss-rs-modal .ss-modal-subtitle {
        font-size: 14px;
        line-height: 1.45;
        font-weight: 400;
        color: #1F1F1F;
        margin: 0;
        padding: 4px 24px 16px;
    }

    .ss-rs-modal .ss-modal-actions .ss-btn {
        height: 40px;
        padding: 0 18px;
        white-space: nowrap;
    }

.ss-rs-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #6B7280;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

    .ss-rs-close:hover {
        background: #F3F4F6;
        color: #1F2937;
    }

.ss-rs-modal .ss-npf-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 17px;
    margin: 0;
    padding: 0 24px 0;
}

.ss-rs-modal .ss-npf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ss-rs-modal .ss-col-6 {
    grid-column: span 6;
}

.ss-rs-modal .ss-npf-label {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    color: #1F1F1F;
    margin: 0;
}

.ss-rs-modal .ss-req {
    color: #DC2626;
    margin-left: 2px;
}

.ss-rs-modal .ss-npf-input {
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    border: 1px solid #C9CED8;
    border-radius: 5px;
    padding: 0 12px;
    background: #FFFFFF;
    color: #1F2937;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ss-rs-modal .ss-npf-input::placeholder {
        color: #9CA3AF;
    }

    .ss-rs-modal .ss-npf-input:hover {
        border-color: #AEB5C2;
    }

    .ss-rs-modal .ss-npf-input:focus {
        border-color: #273277;
        box-shadow: 0 0 0 2px rgba(39, 50, 119, 0.12);
    }

    .ss-rs-modal .ss-npf-input.ss-npf-invalid {
        border-color: #DC2626;
    }

.ss-rs-modal .ss-npf-error {
    font-size: 12px;
    line-height: 1.3;
    color: #DC2626;
}

.ss-rs-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 24px 0;
    padding: 11px 13px;
    border: 1px solid #D9DDE7;
    border-radius: 10px;
    background: #F5F6F8;
    color: #1F1F1F;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    box-sizing: border-box;
}


.ss-rs-note--ok {
    border-color: #BBF7D0;
    background: #F0FDF4;
    color: #166534;
}

.ss-rs-note--info {
    border-color: #BFDBFE;
    background: #EFF6FF;
    color: #1F1F1F;
}

.ss-rs-modal .ss-modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin: 22px 0 0;
    padding: 10px 24px;
    min-height: 54px;
    border-top: 1px solid #E5E7EB;
    box-sizing: border-box;
    background: #FFFFFF;
}

    .ss-rs-modal .ss-modal-actions .ss-btn {
        height: 34px;
        min-width: 80px;
        padding: 0 18px;
        border-radius: 5px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }

.ss-rs-record {
    margin: 16px 0 2px;
    border: 1px solid var(--ss-border);
    border-radius: 12px;
    background: #F9FAFB;
    overflow: hidden;
}

.ss-rs-modal .ss-modal-cancel {
    background: #FFFFFF;
    border: 1px solid #272C73;
    color: #272C73;
}

    .ss-rs-modal .ss-modal-cancel:hover {
        background: #F5F6FB;
        border-color: #272C73;
    }

.ss-rs-modal .ss-modal-save {
    min-width: 102px;
    background: var(--ss-green);
    border: 1px solid var(--ss-green);
    color: #FFFFFF;
}

    .ss-rs-modal .ss-modal-save:hover:not(:disabled) {
        background: #15803D;
        border-color: #15803D;
    }

    .ss-rs-modal .ss-modal-save:disabled {
        background: #A1A1AA;
        border-color: #A1A1AA;
        color: #FFFFFF;
        cursor: not-allowed;
    }

.ss-rs-record {
    margin: 16px 24px 0;
    border: 1px solid #D9DDE7;
    border-radius: 8px;
    background: #F8F9FB;
    overflow: hidden;
}

.ss-rs-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: 14px;
}

    .ss-rs-row + .ss-rs-row {
        border-top: 1px solid #E5E7EB;
    }

.ss-rs-row-label {
    flex: 0 0 108px;
    color: #667085;
}

.ss-rs-row-value {
    color: #1F2937;
    font-weight: 500;
}

.ss-rs-reasons-title {
    font-size: 14px;
    font-weight: 600;
    color: #1F1F1F;
    margin: 14px 24px 6px;
}

.ss-rs-reasons {
    margin: 0 24px;
    padding-left: 20px;
    font-size: 15px;
    color: #1F1F1F;
    line-height: 1.7;
}

.ss-rs-primary {
    height: 34px;
    min-width: 120px;
    background: var(--ss-green);
    border: 1px solid #272C73;
    color: #FFFFFF;
}

    .ss-rs-primary:hover {
        background: var(--ss-green);
        border-color: #20245F;
    }

.ss-rs-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 260px;
    padding: 40px 24px;
}

.ss-rs-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #E5E7EB;
    border-top-color: #272C73;
    border-radius: 50%;
    animation: ss-rs-spin 0.8s linear infinite;
}

.ss-rs-loading-text {
    margin: 0;
    font-size: 14px;
    color: #667085;
}

@keyframes ss-rs-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .ss-shell {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .ss-main {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .ss-aside,
    .ss-content,
    .ss-content-body {
        overflow: visible;
    }

    .ss-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
    }

    .ss-step-label {
        font-size: 12px;
    }

    .ss-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .ss-header .ss-logo-partner {
        align-self: flex-start;
    }

    .ss-banner,
    .ss-header,
    .ss-main,
    .ss-footer,
    .ss-footer-error {
        padding-left: 18px;
        padding-right: 18px;
    }

    .ss-col-12,
    .ss-col-6,
    .ss-col-4,
    .ss-col-3 {
        grid-column: span 12;
    }

    .ss-rs-modal .ss-col-6 {
        grid-column: span 12;
    }

    .ss-modal {
        padding: 22px 18px 20px;
    }
}

/* ── Date of Birth: input wrapper + custom calendar popup ──────────── */
.dob-input-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
}

    /* Leave room for the calendar icon so text never sits under it. */
    .dob-input-wrapper .ss-npf-input {
        padding-right: 38px;
    }

.dob-calendar-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #667689;
    display: flex;
    align-items: center;
    line-height: 0;
}

    .dob-calendar-btn:hover {
        color: #273277;
    }

/* Popup is appended to <body> (position: fixed), so it sits above the
   modal overlay (z-index 1000) and is positioned by dobInput.js. */
.dob-cal-popup {
    position: fixed;
    z-index: 1300;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2),
                0 8px 10px 1px rgba(0, 0, 0, .14),
                0 3px 14px 2px rgba(0, 0, 0, .12);
    min-width: 280px;
    padding-bottom: 8px;
    opacity: 0;
    transform: scaleY(0.92);
    transform-origin: top center;
    transition: opacity .13s ease, transform .13s ease;
    pointer-events: none;
    user-select: none;
    font-family: "Segoe UI", "Segoe UI Variable", Inter, Roboto, sans-serif;
}

    .dob-cal-popup.dob-cal-open {
        opacity: 1;
        transform: scaleY(1);
        pointer-events: auto;
    }

.dob-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    min-height: 48px;
}

.dob-cal-nav {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    font-size: 26px;
    color: rgba(0, 0, 0, .54);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: background .1s;
}

    .dob-cal-nav:hover {
        background: rgba(0, 0, 0, .06);
    }

.dob-cal-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, .87);
    flex: 1;
    text-align: center;
}

.dob-cal-grid {
    padding: 0 8px;
}

.dob-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 2px;
}

    .dob-cal-weekdays span {
        text-align: center;
        font-size: 11px;
        color: rgba(0, 0, 0, .38);
        font-weight: 600;
        padding: 6px 0;
        letter-spacing: .3px;
    }

.dob-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.dob-cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 13px;
    color: rgba(0, 0, 0, .87);
    cursor: pointer;
    margin: 1px auto;
    transition: background-color .1s;
    box-sizing: border-box;
}

.dob-cal-blank {
    cursor: default;
    pointer-events: none;
}

.dob-cal-day:not(.dob-cal-blank):not(.dob-cal-disabled):not(.dob-cal-selected):hover {
    background-color: rgba(39, 50, 119, .12);
}

.dob-cal-disabled {
    color: rgba(0, 0, 0, .26);
    cursor: default;
    pointer-events: none;
}

.dob-cal-today {
    border: 1px solid rgba(0, 0, 0, .38);
    font-weight: 600;
}

.dob-cal-selected {
    background-color: #273277 !important;
    color: #fff !important;
    font-weight: 600;
}

/* ── "Let's find your appointment" modal (TOS-108) ─────────────── */
.ss-fa-modal {
    /* Match the appointment details modal so both dialogs are the same size. */
    max-width: 1040px;
    height: min(680px, calc(100vh - 48px));
    border-radius: 8px;
    /* The body scrolls; the action bar stays pinned to the bottom. */
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Scrollable content area above the fixed footer. */
.ss-fa-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 24px 28px 8px;
}

/* Cancel / See available times — pinned and visible while the modal is open. */
.ss-fa-actions {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 16px 28px;
    border-top: 1px solid var(--ss-border);
    background: #fff;
}

    .ss-fa-modal .ss-modal-title {
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 6px;
    }

    .ss-fa-modal .ss-modal-subtitle {
        font-size: 15px;
        font-weight: 400;
        color: var(--ss-text-secondary);
        margin: 0 0 12px;
    }

    /* Hairlines above and below the identity fields, matching the design. */
    .ss-fa-modal .ss-npf-grid:first-of-type {
        padding-top: 20px;
        padding-bottom: 22px;
        border-top: 1px solid var(--ss-border);
        border-bottom: 1px solid var(--ss-border);
    }

.ss-fa-section {
    margin-top: 20px;
}

.ss-fa-section-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--ss-text);
    margin: 0 0 12px;
}

/* Segmented choice buttons — age group and coverage type. */
.ss-fa-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.ss-fa-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    background: #fff;
    color: var(--ss-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

    .ss-fa-choice:hover {
        border-color: var(--ss-header-navy);
    }

    .ss-fa-choice.is-selected {
        border-color: var(--ss-header-navy);
        background: #EEF1FA;
        color: var(--ss-header-navy);
        font-weight: 600;
        box-shadow: 0 0 0 1px var(--ss-header-navy);
    }

    .ss-fa-choice:focus-visible {
        outline: 2px solid var(--ss-primary);
        outline-offset: 2px;
    }

.ss-fa-hint {
    display: block;
    margin-top: 6px;
    text-align: right;
    font-size: 12px;
    color: var(--ss-text-secondary);
}

.ss-fa-guardian {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #B45309;
}

/* Health plan searchable combobox. */
.ss-fa-combo {
    position: relative;
}

.ss-fa-combo-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.16);
    padding: 4px;
}

.ss-fa-combo-option {
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--ss-text);
    cursor: pointer;
}

    .ss-fa-combo-option:hover {
        background: var(--ss-divider-subtle);
    }

    .ss-fa-combo-option.is-selected {
        background: #EEF1FA;
        color: var(--ss-header-navy);
        font-weight: 600;
    }

.ss-fa-combo-empty {
    padding: 12px;
    font-size: 13px;
    color: var(--ss-text-secondary);
}

/* Deferred-details note above the consent block. */
.ss-fa-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 22px;
    padding: 14px 16px;
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    background: var(--ss-divider-subtle);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ss-text);
}

.ss-fa-note-icon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--ss-text-secondary);
}

.ss-fa-selfpay-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ss-text-secondary);
}

.ss-fa-submit-error {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--ss-red);
}

/* Invalid consent checkbox row. */
.ss-npf-consent.ss-npf-invalid {
    color: var(--ss-red);
}

    .ss-npf-consent.ss-npf-invalid input {
        outline: 2px solid var(--ss-red);
        outline-offset: 1px;
    }

.ss-ins-coverage {
    margin-bottom: 24px;
}

.ss-ins-coverage-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ss-text);
    margin: 0 0 12px;
}

.ss-ins-coverage-options {
    display: flex;
    align-items: center;
    gap: 28px;
}

.ss-ins-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--ss-text);
    cursor: pointer;
}

    .ss-ins-radio input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: var(--ss-primary);
        cursor: pointer;
    }

.ss-ins-grid {
    gap: 18px 24px;
    margin-bottom: 4px;
    max-width: 860px;
}

.ss-ins-select-empty {
    color: #9ca3af;
}

/* Searchable health-plan combobox */
.ss-combo {
    position: relative;
}

.ss-combo-trigger {
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

    .ss-combo-trigger .ss-combo-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.ss-combo.is-open .ss-combo-trigger {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
}

/* Leave room for the clear button between the value and the chevron. */
.ss-combo-trigger-filled {
    padding-right: 58px;
}

.ss-combo-clear {
    position: absolute;
    top: 50%;
    right: 34px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    color: #667085;
    background: transparent;
    cursor: pointer;
}

    .ss-combo-clear:hover {
        color: var(--ss-text);
        background: #EAECF0;
    }

.ss-combo-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.ss-combo-panel {
    position: absolute;
    z-index: 41;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--ss-card-bg);
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    overflow: hidden;
}

.ss-combo-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #EAECF0;
}

.ss-combo-search-icon {
    color: #9ca3af;
    flex: 0 0 auto;
}

.ss-combo-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--ss-text);
    background: transparent;
}

    .ss-combo-search-input::placeholder {
        color: #9ca3af;
    }

.ss-combo-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: none;
    border-radius: 999px;
    padding: 0;
    font-size: 11px;
    line-height: 1;
    color: var(--ss-text-secondary);
    background: #EAECF0;
    cursor: pointer;
}

    .ss-combo-search-clear:hover {
        color: var(--ss-text);
        background: #DDE1E7;
    }

.ss-combo-list {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
}

.ss-combo-group-label {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ss-text-secondary);
}

.ss-combo-option {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--ss-text);
    cursor: pointer;
}

    .ss-combo-option:hover {
        background: #F8FAFC;
    }

    .ss-combo-option.is-selected {
        background: #EFF6FF;
        color: var(--ss-primary);
        font-weight: 600;
    }

.ss-combo-empty {
    padding: 14px 12px;
    font-size: 13px;
    color: var(--ss-text-secondary);
}

.ss-ins-upload-block {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.ss-ins-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 20px;
    border: none;
    border-radius: 6px;
    background: #5571c6;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

    .ss-ins-upload-btn:hover {
        background: #4761b3;
    }

.ss-ins-upload-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ss-ins-upload-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--ss-border);
    border-radius: 6px;
    background: var(--ss-divider-subtle);
    font-size: 13px;
    color: var(--ss-text);
}

.ss-ins-chip-check {
    color: var(--ss-green);
    flex: 0 0 auto;
}

.ss-ins-chip-label {
    font-weight: 600;
}

.ss-ins-chip-name {
    color: var(--ss-text-secondary);
}

.ss-ins-chip-remove {
    border: none;
    background: transparent;
    color: var(--ss-text-secondary);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 2px;
}

    .ss-ins-chip-remove:hover {
        color: var(--ss-red);
    }

.ss-ins-modal {
    width: 100%;
    max-width: 660px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--ss-card-bg);
    border-radius: 10px;
    box-shadow: 0 20px 48px rgba(17, 24, 39, 0.28);
    padding: 22px 26px 20px;
    box-sizing: border-box;
}

.ss-ins-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.ss-ins-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--ss-text);
    margin: 0;
}

.ss-ins-modal-close {
    border: none;
    background: transparent;
    color: var(--ss-text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}

    .ss-ins-modal-close:hover {
        color: var(--ss-text);
    }

.ss-ins-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.ss-ins-slot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.ss-ins-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px 16px;
    border: 1.5px dashed #9db2e6;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}

    .ss-ins-dropzone:hover {
        border-color: var(--ss-primary);
        background: rgba(85, 113, 198, 0.05);
    }

.ss-ins-file-input {
    display: none;
}

.ss-ins-slot-illus {
    width: 62px;
    height: auto;
    object-fit: contain;
    margin-bottom: 2px;
}

.ss-ins-slot-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--ss-text);
}

.ss-ins-slot-add {
    font-size: 14px;
    font-weight: 600;
    color: var(--ss-primary);
}

.ss-ins-support {
    font-size: 12px;
    color: var(--ss-text-secondary);
    margin: 16px 0 0;
}

.ss-ins-modal-error {
    font-size: 13px;
    color: var(--ss-red);
    margin: 8px 0 0;
}

.ss-ins-modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.ss-ins-done {
    height: 40px;
    min-width: 110px;
    background: var(--ss-green);
    color: #fff;
    border: none;
}

    .ss-ins-done:hover {
        filter: brightness(0.95);
    }

.ss-ins-progress {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ss-ins-progress-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ss-ins-progress-name {
    font-size: 13px;
    color: var(--ss-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-ins-progress-track {
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: var(--ss-divider-subtle);
    overflow: hidden;
}

.ss-ins-progress-bar {
    height: 100%;
    border-radius: 4px;
    background: var(--ss-primary);
    transition: width .12s linear;
}

.ss-ins-progress-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.ss-ins-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--ss-border);
    background: #fff;
    color: var(--ss-text-secondary);
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}

    .ss-ins-ctrl:hover {
        color: var(--ss-text);
    }

.ss-ins-ctrl-cancel:hover {
    color: var(--ss-red);
    border-color: var(--ss-red);
}

.ss-ins-ctrl-done {
    border-color: var(--ss-green);
    color: var(--ss-green);
    cursor: default;
}
/* Coverage type section */

.ss-ins-type-section {
    margin: -6px 0 24px;
    max-width: 860px;
}

.ss-ins-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ss-ins-type-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ss-text);
}

.ss-ins-type-title span {
    font-weight: 400;
    color: var(--ss-text-secondary);
}

.ss-ins-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ss-ins-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #D6DAE3;
    border-radius: 999px;
    background: #fff;
    color: #1A1A1A;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .ss-ins-pill:hover {
        background: #F8FAFC;
        border-color: #BFC7D4;
    }

    .ss-ins-pill.is-selected {
        border-color: var(--ss-primary);
        background: #EFF6FF;
        color: var(--ss-primary);
        padding-right: 8px;
        box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.08);
    }

    .ss-ins-pill svg {
        width: 16px;
        height: 16px;
        color: currentColor;
        flex: 0 0 auto;
    }

.ss-ins-pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 1px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    color: var(--ss-primary);
    background: rgba(29, 78, 216, 0.12);
    flex: 0 0 auto;
}

    .ss-ins-pill.is-selected:hover .ss-ins-pill-remove {
        background: rgba(29, 78, 216, 0.2);
    }

.ss-ins-type-message {
    margin: 9px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #344054;
}

.ss-ins-warning {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: #B45309;
}

@media (max-width:768px) {
    .ss-ins-type-header {
        align-items: flex-start;
        gap: 8px;
    }

    .ss-ins-type-pills {
        gap: 8px;
    }

    .ss-ins-pill {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        text-align: center;
    }
}

/* ── Complete Information step (TOS-32) ───────────────────────────── */
.ss-ci-section {
    border: 1px solid var(--ss-border);
    border-radius: 10px;
    background: var(--ss-card-bg);
    margin-bottom: 20px;
    overflow: visible;
}

.ss-ci-section:last-child {
    margin-bottom: 0;
}

.ss-ci-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ss-border);
    background: #F9FAFB;
    border-radius: 10px 10px 0 0;
}

.ss-ci-section-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--ss-text);
}

.ss-ci-section-body {
    padding: 18px 20px 20px;
}

.ss-ci-edit {
    border: none;
    background: transparent;
    color: #6F96C8;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    text-decoration: underline;
    flex: 0 0 auto;
}

    .ss-ci-edit:hover {
        color: #5A80B2;
    }

/* Read-only detail rows (Name / DOB / Phone, coverage type / plan). */
.ss-ci-readonly {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 48px;
}

.ss-ci-readonly-bordered {
    position: relative;
    padding-bottom: 18px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ss-divider-subtle);
}

.ss-ci-ro-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ss-ci-ro-label {
    font-size: 13px;
    color: var(--ss-text-secondary);
}

.ss-ci-ro-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--ss-text);
}

/* Change button pinned to the right of the coverage read-only row, level with the plan values
   (the bottom line of each label/value pair) rather than the labels above them. */
.ss-ci-change {
    margin-left: auto;
    align-self: flex-end;
}

.ss-ci-grid {
    margin-top: 16px;
    gap: 16px 20px;
    max-width: 900px;
}

    /* First grid in a body sits flush with the section body top padding. */
    .ss-ci-section-body > .ss-ci-grid:first-child {
        margin-top: 0;
    }

.ss-ci-optional {
    color: var(--ss-text-secondary);
    font-weight: 400;
}

.ss-ci-readonly {
    background: #F9FAFB;
    cursor: default;
    outline: none;
}

.ss-ci-warning {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #B45309;
}

.ss-ci-panel-error {
    margin: 12px 0 0;
}

.ss-ci-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ss-divider-subtle);
}

    .ss-ci-panel-actions .ss-btn {
        min-width: 96px;
    }

.ss-ci-change-panel {
    padding: 4px 0 2px;
}

    /* The health-plan field is the last field in the panel. Inside the fixed-height appointment
       modal a downward dropdown gets clipped by the scrolling content and adds a second scrollbar,
       so open it upward — it overlays the space above the field and stays fully visible. */
    .ss-ci-change-panel .ss-combo-panel {
        top: auto;
        bottom: calc(100% + 4px);
    }

/* Coverage type as a single row of choice pills (insurance segments + Self pay). Selecting one
   fills it solid navy; the health-plan field below appears for any insurance segment. */
.ss-ci-cov-label {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ss-text);
}

    .ss-ci-cov-label span {
        font-weight: 400;
        color: var(--ss-text-secondary);
    }

.ss-ci-cov-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.ss-ci-cov-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    background: #fff;
    color: var(--ss-text);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

    .ss-ci-cov-pill:hover {
        border-color: var(--ss-header-navy);
    }

    .ss-ci-cov-pill.is-selected {
        border-color: var(--ss-header-navy);
        background: var(--ss-header-navy);
        color: #fff;
        font-weight: 600;
    }

    .ss-ci-cov-pill:focus-visible {
        outline: 2px solid var(--ss-primary);
        outline-offset: 2px;
    }

@media (max-width: 768px) {
    .ss-ci-cov-pill {
        flex: 1 1 calc(50% - 12px);
    }
}

.ss-ci-whose {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--ss-divider-subtle);
}

.ss-ci-card-block {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--ss-divider-subtle);
}

.ss-ci-card-lead {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ss-text-secondary);
    max-width: 560px;
}

.ss-ci-manual-lead {
    margin: 20px 0 0;
    font-size: 14px;
    color: var(--ss-text-secondary);
}

.ss-ci-manual {
    margin-top: 10px;
}

/* ── Insurance eligibility check (feature-flagged: FeatureFlags:EligibilityCheck) ── */
.ss-elig {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--ss-divider-subtle);
    max-width: 900px;
}

.ss-elig-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.ss-elig-banner + .ss-elig-row {
    margin-top: 14px;
}

.ss-elig-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    background: #fff;
    color: var(--ss-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

    .ss-elig-btn:hover:not(:disabled) {
        border-color: var(--ss-header-navy);
        background: #F9FAFB;
    }

    .ss-elig-btn:focus-visible {
        outline: 2px solid var(--ss-primary);
        outline-offset: 2px;
    }

    .ss-elig-btn:disabled {
        color: var(--ss-disabled);
        cursor: not-allowed;
    }

.ss-elig-help,
.ss-elig-checking {
    font-size: 13px;
    color: var(--ss-text-secondary);
}

.ss-elig-checking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ss-elig-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #D0D5DD;
    border-top-color: var(--ss-text-secondary);
    border-radius: 50%;
    animation: ss-rs-spin .8s linear infinite;
}

.ss-elig-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 14px 18px;
    border-radius: 8px;
}

    .ss-elig-banner.is-active {
        background: #DCF3DE;
        color: #14532D;
    }

    .ss-elig-banner.is-inactive {
        background: #FDE2E1;
        color: #7F1D1D;
    }

    .ss-elig-banner.is-unverified {
        background: #FBE3AE;
        color: #6B4105;
    }

.ss-elig-banner-main {
    min-width: 0;
}

.ss-elig-banner-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

    .ss-elig-banner-title svg {
        flex: 0 0 auto;
    }

.ss-elig-banner-text {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.4;
}

.ss-elig-copay {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding-left: 24px;
    border-left: 1px solid rgba(20, 83, 45, .25);
}

.ss-elig-copay-label {
    font-size: 13px;
}

.ss-elig-copay-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
}

@media (max-width: 768px) {
    .ss-elig-copay {
        align-items: flex-start;
        padding-left: 0;
        padding-top: 10px;
        border-left: none;
        border-top: 1px solid rgba(20, 83, 45, .25);
        width: 100%;
    }
}

/* ── Choose a Provider step (TOS-44) ─────────────────────────────── */
.ss-prov-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: #EFF4FF;
    border: 1px solid #DCE6FB;
    border-radius: 10px;
}

.ss-prov-filters-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 auto;
    min-width: 0;
}

    .ss-prov-filters-left .custom-select-wrap {
        flex: 0 0 auto;
        width: 220px;
    }

    .ss-prov-filters-left .custom-select-wrap:last-child {
        width: 160px;
    }

    .ss-prov-filters-left .custom-select-trigger {
        height: 42px;
        font-size: 14px;
    }

.ss-prov-range {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ss-prov-range-btn {
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--ss-border);
    border-radius: 6px;
    background: #fff;
    color: var(--ss-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

    .ss-prov-range-btn:hover {
        border-color: var(--ss-primary);
    }

    .ss-prov-range-btn.is-active {
        border-color: var(--ss-step-active);
        background: #EFF6FF;
        color: var(--ss-step-active);
        font-weight: 600;
    }

.ss-prov-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ss-prov-card {
    border: 1px solid var(--ss-border);
    border-radius: 10px;
    padding: 18px 20px;
    background: var(--ss-card-bg);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ss-prov-card:hover {
        border-color: var(--ss-primary);
        box-shadow: 0 2px 10px rgba(29, 78, 216, 0.08);
    }

    .ss-prov-card:focus-visible {
        outline: 2px solid var(--ss-primary);
        outline-offset: 2px;
    }

.ss-prov-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ss-prov-avatar,
.ss-prov-avatar-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
}

.ss-prov-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    background: var(--ss-inactive);
}

.ss-prov-headinfo {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ss-prov-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--ss-text);
}

.ss-prov-metaline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ss-prov-specialty {
    font-size: 14px;
    color: var(--ss-text-secondary);
}

.ss-prov-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #EFF3FB;
    color: #3A4A7A;
    font-size: 12px;
    font-weight: 500;
}

.ss-prov-bio {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--ss-text-secondary);
    line-height: 1.5;
}

.ss-prov-bio-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-prov-readmore {
    flex: 0 0 auto;
    color: var(--ss-step-active);
    font-weight: 600;
    white-space: nowrap;
}

.ss-prov-avail {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ss-divider-subtle);
}

.ss-prov-avail-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--ss-text-secondary);
}

.ss-prov-avail-lead {
    color: var(--ss-text-secondary);
}

.ss-prov-avail-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--ss-step-active);
}

.ss-prov-slots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ss-prov-slot {
    height: 40px;
    min-width: 84px;
    padding: 0 16px;
    border: 1px solid var(--ss-border);
    border-radius: 6px;
    background: #fff;
    color: var(--ss-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

    .ss-prov-slot:hover {
        border-color: var(--ss-primary);
        background: #F5F8FF;
    }

    .ss-prov-slot.is-selected {
        background: var(--ss-primary);
        border-color: var(--ss-primary);
        color: #fff;
    }

    .ss-prov-slot:focus-visible {
        outline: 2px solid var(--ss-primary);
        outline-offset: 2px;
    }

.ss-prov-moretimes {
    border: none;
    background: transparent;
    color: var(--ss-step-active);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 6px;
}

    .ss-prov-moretimes:hover {
        text-decoration: underline;
    }

.ss-prov-disclaimer {
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid #F5D78E;
    border-radius: 8px;
    background: #FFF8E6;
    color: var(--ss-text);
    font-size: 14px;
    line-height: 1.5;
}

/* No-availability state: nothing returned even after the fallback search. */
.ss-prov-noavail {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px 40px;
}

.ss-prov-noavail-art {
    width: 150px;
    height: auto;
    margin-bottom: 20px;
}

.ss-prov-noavail-title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 600;
    color: var(--ss-header-navy);
}

.ss-prov-noavail-text {
    margin: 0 0 24px;
    max-width: 480px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ss-text-secondary);
}

.ss-prov-noavail-phone {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 320px;
    padding: 14px 24px;
    border-radius: 10px;
    background: #E6EEFC;
    color: var(--ss-header-navy);
    text-decoration: none;
    transition: background 0.15s ease;
}

    .ss-prov-noavail-phone:hover {
        background: #D8E4FA;
    }

.ss-prov-noavail-phone-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding-right: 16px;
    box-sizing: content-box;
    border-right: 1px solid #B9C8E8;
}

.ss-prov-noavail-phone-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.ss-prov-noavail-phone-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ss-prov-noavail-phone-number {
    font-size: 20px;
    font-weight: 700;
}

.ss-prov-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 48px 24px;
}

.ss-prov-empty-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ss-text);
}

.ss-prov-empty-text {
    margin: 0;
    font-size: 14px;
    color: var(--ss-text-secondary);
    line-height: 1.5;
    max-width: 420px;
}

.ss-prov-empty-phone {
    color: var(--ss-header-navy);
    font-weight: 600;
    text-decoration: none;
}

.ss-prov-empty-btn {
    margin-top: 6px;
    height: 40px;
    padding: 0 20px;
    background: #fff;
    border: 1px solid var(--ss-step-active);
    color: var(--ss-step-active);
}

    .ss-prov-empty-btn:hover {
        background: var(--ss-divider-subtle);
    }

/* Provider detail modal — inherits width/height sizing from .ss-modal
   (same as the demography modal): width:100%, max-width:620px,
   max-height:calc(100vh - 48px). */
.ss-prov-modal {
    position: relative;
    padding: 26px 28px 20px;
    /* Flex column so header/bio/footer stay pinned and only the slots
       area scrolls (single scrollbar, footer never clipped). */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header, bio, browse-link and footer keep their natural size. */
.ss-prov-modal-head,
.ss-prov-modal-bio,
.ss-prov-browse,
.ss-prov-modal-foot {
    flex: 0 0 auto;
}

.ss-prov-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    border: none;
    background: transparent;
    color: var(--ss-red);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}

    .ss-prov-modal-close:hover {
        filter: brightness(0.85);
    }

.ss-prov-modal-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 32px;
}

.ss-prov-modal-bio {
    margin: 18px 0 0;
    font-size: 14px;
    color: var(--ss-text);
    line-height: 1.6;
}

.ss-prov-browse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 18px 0 4px;
    border: none;
    background: transparent;
    color: var(--ss-step-active);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

    .ss-prov-browse:hover {
        text-decoration: underline;
    }

.ss-prov-modal-avail {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ss-divider-subtle);
    display: flex;
    flex-direction: column;
    gap: 0;
    /* The only scrollable region in the modal. flex:1 fills the space
       left between the pinned bio and footer; min-height:0 lets it
       shrink below its content so it scrolls instead of the whole modal. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.ss-prov-daygroup {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--ss-divider-subtle);
}

    .ss-prov-daygroup:first-child {
        padding-top: 4px;
    }

    .ss-prov-daygroup:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

.ss-prov-dayheading {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ss-text);
}

.ss-prov-modal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 28px 16px;
}

.ss-prov-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ss-divider-subtle);
    font-size: 14px;
    color: var(--ss-text-secondary);
}

.ss-prov-modal-foot-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ss-prov-modal-continue {
    min-width: 130px;
    height: 42px;
}

.ss-prov-modal-foot-link {
    border: none;
    background: transparent;
    color: var(--ss-step-active);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

    .ss-prov-modal-foot-link:hover {
        text-decoration: underline;
    }

    .ss-prov-modal-foot-link.is-disabled {
        color: var(--ss-disabled);
        cursor: default;
    }

@media (max-width: 768px) {
    .ss-prov-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .ss-prov-range {
        justify-content: space-between;
    }

    .ss-prov-bio {
        flex-direction: column;
        gap: 2px;
    }

    .ss-prov-bio-text {
        white-space: normal;
    }
}

/* ── Provider card: portrait | name + bio | next available ─────────
   Same footprint as the earlier card; the photo column stretches to the
   card's height. The selected provider's card gets a blue outline. */
.ss-pc-card {
    display: grid;
    /* 50/50 split: photo + bio take the left half, the time slots the right half (the third column
       is half the card less half of one 24px gap, so the divider sits on the centre line). */
    grid-template-columns: 124px minmax(0, 1fr) calc(50% - 12px);
    gap: 0 24px;
    padding: 18px 20px;
    border: 1px solid var(--ss-border);
    border-radius: 12px;
    background: var(--ss-card-bg);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ss-pc-card:hover {
        border-color: var(--ss-primary);
        box-shadow: 0 2px 10px rgba(29, 78, 216, 0.08);
    }

    .ss-pc-card:focus-visible {
        outline: 2px solid var(--ss-primary);
        outline-offset: 2px;
    }

    .ss-pc-card.is-selected {
        border-color: var(--ss-primary);
        box-shadow: 0 0 0 1px var(--ss-primary);
    }

.ss-pc-photo {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 150px;
    border-radius: 10px;
    background: #DFE5EF;
    overflow: hidden;
}

    .ss-pc-photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ss-pc-silhouette {
    width: 78%;
    fill: #AEBBD7;
}

.ss-pc-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.ss-pc-name {
    margin: 0;
    font-size: 19px;
    line-height: 1.25;
    color: var(--ss-text);
}

.ss-pc-name-main {
    font-weight: 700;
}

.ss-pc-name-cred {
    font-weight: 400;
    color: #4B5563;
}

.ss-pc-specialty {
    margin: 0;
    font-size: 14px;
    color: var(--ss-text-secondary);
}

.ss-pc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.ss-pc-bio {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ss-text);
}

.ss-pc-link {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ss-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .ss-pc-link:hover {
        text-decoration: underline;
    }

    .ss-pc-link:focus-visible {
        outline: 2px solid var(--ss-primary);
        outline-offset: 2px;
        border-radius: 2px;
    }

.ss-pc-avail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding-left: 24px;
    border-left: 1px solid var(--ss-border);
}

.ss-pc-avail-lead {
    margin: 0;
    font-size: 13px;
    color: var(--ss-text-secondary);
}

.ss-pc-avail-date {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ss-text);
}

.ss-pc-avail-none {
    margin: 2px 0 10px;
    font-size: 14px;
    color: var(--ss-text-secondary);
}

.ss-pc-slots {
    display: grid;
    /* Fill the wider half left-to-right so the times sit close to the divider. */
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
}

    .ss-pc-slots .ss-prov-slot {
        min-width: 0;
        width: 100%;
        padding: 0 8px;
    }

/* ── Provider modal header (matches the card) ─────────────────────── */
.ss-pm-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ss-text);
    cursor: pointer;
}

    .ss-pm-close svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
    }

    .ss-pm-close:hover {
        background: var(--ss-divider-subtle);
    }

.ss-pm-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 36px;
}

.ss-pm-photo {
    flex: 0 0 auto;
    width: 72px;
    min-height: 0;
    height: 86px;
}

.ss-pm-headinfo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ss-pm-credentials {
    margin-bottom: -8px;
}

.ss-pm-back {
    flex: 0 0 auto;
    color: var(--ss-primary);
}

    .ss-pm-back svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ── "Select another date" calendar view ──────────────────────────── */
.ss-cal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--ss-border);
}

.ss-cal-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--ss-text);
}

.ss-cal-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: 6px;
    background: #EBF3FC;
    color: #1E3A6E;
    font-size: 14px;
    line-height: 1.45;
}

    .ss-cal-note svg {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin-top: 1px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
    }

.ss-cal-layout {
    display: grid;
    grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.ss-cal {
    padding: 14px 12px 10px;
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}

.ss-cal-monthbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 8px;
}

.ss-cal-month {
    font-size: 15px;
    font-weight: 600;
    color: var(--ss-text);
}

.ss-cal-nav {
    display: flex;
    gap: 2px;
}

.ss-cal-navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--ss-text);
    cursor: pointer;
}

    .ss-cal-navbtn svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .ss-cal-navbtn:hover:not(:disabled) {
        background: var(--ss-divider-subtle);
    }

    .ss-cal-navbtn:disabled {
        color: var(--ss-inactive);
        cursor: default;
    }

.ss-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: 4px;
}

.ss-cal-dow {
    padding: 4px 0;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--ss-text-secondary);
}

.ss-cal-day {
    justify-self: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--ss-text);
    font-size: 14px;
    cursor: pointer;
}

    .ss-cal-day:hover:not(:disabled):not(.is-selected) {
        background: #EBF3FC;
    }

    .ss-cal-day:focus-visible {
        outline: 2px solid var(--ss-primary);
        outline-offset: 1px;
    }

    .ss-cal-day.is-today {
        font-weight: 700;
    }

    .ss-cal-day:disabled {
        color: #B8BDC7;
        cursor: default;
    }

    .ss-cal-day.is-selected {
        background: var(--ss-primary);
        border-color: var(--ss-primary);
        color: #fff;
        font-weight: 600;
    }

.ss-cal-times {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ss-cal-hint {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ss-text-secondary);
}

.ss-cal-loading {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .ss-cal-loading .ss-rs-spinner {
        width: 22px;
        height: 22px;
        border-width: 2px;
    }

.ss-cal-dayheading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ss-text);
}

.ss-cal-offset {
    font-size: 13px;
    font-weight: 500;
    color: var(--ss-text-secondary);
}

    .ss-cal-offset.is-yours {
        color: var(--ss-primary);
        font-weight: 600;
    }

.ss-cal-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

    .ss-cal-slots .ss-prov-slot {
        min-width: 0;
        padding: 0 6px;
    }

.ss-cal-foot {
    flex-wrap: nowrap;
}

.ss-cal-foot-text {
    min-width: 0;
    color: var(--ss-text);
}

.ss-cal-foot-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.ss-cal-cancel {
    min-width: 100px;
    height: 42px;
    background: #fff;
    border-color: #D1D5DB;
    color: var(--ss-text);
}

    .ss-cal-cancel:hover {
        background: var(--ss-divider-subtle);
    }

@media (max-width: 900px) {
    .ss-pc-card {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 16px 18px;
    }

    .ss-pc-avail {
        grid-column: 1 / -1;
        padding: 14px 0 0;
        border-left: none;
        border-top: 1px solid var(--ss-border);
    }

    .ss-pc-slots {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ss-pc-card {
        grid-template-columns: 76px minmax(0, 1fr);
        padding: 16px;
    }

    .ss-pc-photo {
        min-height: 96px;
        align-self: start;
    }

    .ss-pc-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ss-cal-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ss-cal-foot {
        flex-wrap: wrap;
    }

    .ss-cal-foot-actions {
        width: 100%;
    }

        .ss-cal-foot-actions .ss-btn {
            flex: 1 1 0;
            min-width: 0;
        }
}

/* ── Medications / Pharmacy step (TOS-114) ───────────────────────────
   Two sections in one modal step. The body scrolls inside .ss-appt-content. */
.ss-medrx {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.medrx-section {
    padding-top: 4px;
    min-width: 0;
    overflow-x: clip;   /* clip, not hidden: hidden would make this a scroll container and break the sticky map */
}

.medrx-heading {
    font-size: 18px;
    font-weight: 600;
    color: var(--ss-text);
    margin: 0 0 4px;
}

.medrx-subhead {
    font-size: 13px;
    color: var(--ss-text-secondary);
    line-height: 1.45;
    margin: 0 0 16px;
    max-width: 560px;
}

.medrx-divider {
    border: none;
    border-top: 1px solid var(--ss-border);
    margin: 20px 0;
}

/* ── Medications ─────────────────────────────────────────────── */
.medrx-seizure {
    border: 1px solid var(--ss-border);
    border-left: 4px solid var(--ss-green);
    background: color-mix(in srgb, var(--ss-header-navy) 5%, var(--ss-card-bg));
    padding: 16px 20px;
    margin: 0 0 16px;
    min-width: 0;
}

.medrx-seizure-q {
    float: left; /* keeps the legend inside the fieldset's padding box */
    width: 100%;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ss-header-navy);
}

.medrx-seizure-hint {
    clear: both;
    font-size: 13px;
    color: var(--ss-text-secondary);
    margin: 2px 0 12px;
}

.medrx-seizure-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.medrx-seizure-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 72px;
    padding: 12px 14px;
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    background: var(--ss-card-bg);
    font-size: 14px;
    line-height: 1.35;
    color: var(--ss-text);
    cursor: pointer;
}

    .medrx-seizure-option input {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--ss-header-navy);
        cursor: pointer;
    }

    .medrx-seizure-option span {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: break-word;
    }

    .medrx-seizure-option:hover {
        border-color: var(--ss-header-navy);
    }

    .medrx-seizure-option.is-selected {
        border: 2px solid var(--ss-header-navy);
        padding: 11px 13px;
        background: color-mix(in srgb, var(--ss-header-navy) 12%, var(--ss-card-bg));
        color: var(--ss-header-navy);
        font-weight: 600;
    }

    .medrx-seizure-option:has(input:focus-visible) {
        outline: 2px solid var(--ss-primary);
        outline-offset: 2px;
    }

@media (max-width: 720px) {
    .medrx-seizure-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.medrx-med {
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.medrx-med-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.medrx-med-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ss-text);
}

.medrx-med-remove {
    background: none;
    border: none;
    color: var(--ss-red);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 4px;
}

    .medrx-med-remove:hover {
        text-decoration: underline;
    }

.medrx-name-field {
    position: relative;
    margin-bottom: 12px;
}

.medrx-med-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 12px;
}

.medrx-add {
    width: 100%;
    border: 1px dashed #C4CBD6;
    background: var(--ss-card-bg);
    border-radius: 8px;
    padding: 11px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ss-primary);
    cursor: pointer;
}

    .medrx-add:hover {
        border-color: var(--ss-primary);
        background: var(--ss-divider-subtle);
    }

/* ── Pharmacy ────────────────────────────────────────────────── */
.medrx-mode {
    display: inline-flex;
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    padding: 3px;
    gap: 3px;
    margin-bottom: 16px;
}

.medrx-mode-opt {
    background: none;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ss-text-secondary);
    cursor: pointer;
}

    .medrx-mode-opt.is-active {
        background: var(--ss-header-navy);
        color: #fff;
    }

.medrx-search {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.medrx-search-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* ZIP codes and short addresses fit comfortably; no need to span the whole row. */
.medrx-search-zip {
    flex: 0 1 240px;
}

.medrx-search-radius {
    flex: 0 0 auto;
}

.medrx-search-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ss-text);
}

.medrx-radius-select {
    height: 42px;
    padding: 0 32px 0 12px;
    border: 1px solid #D0D5DD;
    border-radius: 6px;
    background: var(--ss-card-bg);
    font-size: 14px;
    color: var(--ss-text);
    cursor: pointer;
}

    .medrx-radius-select:focus {
        outline: none;
        border-color: var(--ss-primary);
        box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
    }

.medrx-search-box {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #D0D5DD;
    border-radius: 6px;
    padding: 0 8px 0 12px;
    background: var(--ss-card-bg);
}

    .medrx-search-box:focus-within {
        border-color: var(--ss-primary);
        box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
    }

.medrx-search-icon {
    flex: 0 0 auto;
    color: var(--ss-text-secondary);
}

.medrx-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--ss-text);
    background: transparent;
}

.medrx-search-go {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 6px;
    background: var(--ss-header-navy);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.medrx-locate {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--ss-border);
    border-radius: 6px;
    background: var(--ss-card-bg);
    color: var(--ss-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

    .medrx-locate:hover:not(:disabled) {
        border-color: var(--ss-primary);
        color: var(--ss-primary);
    }

    .medrx-locate:disabled {
        color: var(--ss-disabled);
        cursor: default;
    }

.medrx-geo-error {
    font-size: 12px;
    color: var(--ss-red);
    margin: 0 0 12px;
}

.medrx-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.medrx-chip {
    border: 1px solid var(--ss-border);
    border-radius: 999px;
    background: var(--ss-card-bg);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ss-text-secondary);
    cursor: pointer;
}

    .medrx-chip:hover {
        border-color: var(--ss-primary);
    }

    .medrx-chip.is-active {
        border-color: var(--ss-primary);
        background: var(--ss-primary);
        color: #fff;
    }

.medrx-caption {
    font-size: 12px;
    color: var(--ss-text-secondary);
    margin: 0 0 10px;
}

.medrx-empty {
    border: 1px dashed var(--ss-border);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}

.medrx-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ss-text);
    margin: 0 0 6px;
}

.medrx-empty-text {
    font-size: 13px;
    color: var(--ss-text-secondary);
    margin: 0;
}

.medrx-empty-clear {
    border: 1px solid var(--ss-primary);
    background: var(--ss-card-bg);
    color: var(--ss-primary);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.medrx-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.medrx-result {
    display: flex;
    gap: 12px;
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .medrx-result:hover {
        border-color: var(--ss-primary);
    }

    .medrx-result:focus-visible {
        outline: none;
        border-color: var(--ss-primary);
        box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.2);
    }

    .medrx-result.is-selected {
        border-color: var(--ss-primary);
        background: rgba(29, 78, 216, 0.05);
        box-shadow: 0 0 0 1px var(--ss-primary) inset;
    }

.medrx-result-num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ss-header-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.medrx-result-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.medrx-result-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.medrx-result-name {
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ss-text);
    overflow-wrap: anywhere;
}

.medrx-result-dist {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--ss-text-secondary);
}

.medrx-result-store,
.medrx-result-addr {
    font-size: 12px;
    color: var(--ss-text-secondary);
    overflow-wrap: anywhere;
}

.medrx-result-hours {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.medrx-open {
    color: var(--ss-green);
    font-weight: 600;
}

.medrx-closed {
    color: var(--ss-red);
    font-weight: 600;
}

.medrx-hours-detail {
    color: var(--ss-text-secondary);
}

.medrx-result-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.medrx-tag {
    font-size: 11px;
    font-weight: 500;
    color: var(--ss-text-secondary);
    background: var(--ss-divider-subtle);
    border-radius: 4px;
    padding: 2px 8px;
}

.medrx-tag-net {
    color: #0F766E;
    background: #CCFBF1;
}

.medrx-result-picked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ss-primary);
}

@media (max-width: 768px) {
    .medrx-med-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .medrx-mode {
        display: flex;
        width: 100%;
    }

    .medrx-mode-opt {
        flex: 1 1 0;
    }

    /* ZIP takes the row; Distance and Search share the next one. */
    .medrx-search-zip {
        flex: 1 1 100%;
    }

    .medrx-search-radius {
        flex: 1 1 auto;
    }

    .medrx-locate {
        justify-content: center;
    }
}

/* ── Pharmacy list + map layout (TOS-114 Google integration) ─────────
   List on the left carries every field; the map sits alongside on desktop. On mobile the list shows
   first and the map opens via the Show map control. */
.medrx-pickup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 16px;
    align-items: start;
}

.medrx-results-col {
    min-width: 0;
}

.medrx-map-col {
    position: sticky;
    top: 0;
    min-width: 0;
}

.medrx-map {
    width: 100%;
    height: var(--medrx-panel-h, 420px);
    border-radius: 8px;
    border: 1px solid var(--ss-border);
    overflow: hidden;
}

.medrx-pickup {
    --medrx-panel-h: 420px;
}

@media (min-width: 769px) {
    .medrx-pickup {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    }
}

/* Show more reveals further pharmacies; past the first page the list scrolls inside the map's
   height (with the scrollbar hidden) instead of growing the page. */
.medrx-caption {
    margin: 0;
    padding-bottom: 8px;
}

.medrx-show-more {
    width: 100%;
    margin-top: 10px;
    border: 1px solid var(--ss-border);
    background: var(--ss-card-bg);
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ss-primary);
    cursor: pointer;
}

    .medrx-show-more:hover {
        border-color: var(--ss-primary);
        background: var(--ss-divider-subtle);
    }

.medrx-results {
    gap: 8px;
}

    /* After "Show more" the list scrolls inside a fixed height instead of growing the page. */
    .medrx-results.is-scrollable {
        max-height: var(--medrx-panel-h, 420px);
        overflow-y: auto;
        overflow-x: hidden;   /* overflow-y:auto forces overflow-x to auto; pin it so no horizontal bar appears */
        overscroll-behavior: contain;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* legacy Edge/IE */
    }

        .medrx-results.is-scrollable::-webkit-scrollbar {
            display: none;
        }

.medrx-result {
    padding: 10px 12px;
    gap: 10px;
}

.medrx-result-name {
    font-size: 13px;
}

/* Amazon Location (MapLibre) markers: teardrop pins numbered to match the result list.
   MapLibre owns the element's inline transform, so the shape comes from an SVG, not a rotation. */
.medrx-pin {
    --pin-bg: #8B95A7;
    position: relative;
    width: 28px;
    height: 36px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

    .medrx-pin svg {
        display: block;
    }

    .medrx-pin path {
        fill: var(--pin-bg);
        stroke: #fff;
        stroke-width: 1.5;
    }

    .medrx-pin span {
        position: absolute;
        top: 6px;
        left: 0;
        right: 0;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        pointer-events: none;
    }

    .medrx-pin.is-hovered {
        --pin-bg: var(--ss-primary);
        z-index: 2;
    }

    .medrx-pin.is-selected {
        --pin-bg: var(--ss-header-navy);
        z-index: 3;
    }

.medrx-radius-label {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ss-header-navy);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

.medrx-pin-origin {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ss-primary);
    border: 2px solid #fff;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.25);
}

.medrx-map-placeholder {
    height: 440px;
    border: 1px dashed var(--ss-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--ss-text-secondary);
    background:
        linear-gradient(45deg, var(--ss-divider-subtle) 25%, transparent 25%) 0 0 / 24px 24px,
        linear-gradient(-45deg, var(--ss-divider-subtle) 25%, transparent 25%) 0 0 / 24px 24px,
        var(--ss-card-bg);
    text-align: center;
    padding: 12px;
}

    .medrx-map-placeholder span {
        font-size: 13px;
        font-weight: 600;
        color: var(--ss-text);
    }

    .medrx-map-placeholder small {
        font-size: 11px;
    }

.medrx-map-note {
    font-size: 12px;
    color: var(--ss-red);
    margin: 6px 0 0;
}

.medrx-loading {
    font-size: 13px;
    color: var(--ss-text-secondary);
    padding: 28px 12px;
    text-align: center;
}

.medrx-result.is-hovered {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 1px var(--ss-primary) inset;
}

/* Phone-only pieces: the radio on each result and the Expand map pill; desktop never shows them. */
.medrx-result-radio,
.medrx-map-expand,
.medrx-name-label {
    display: none;
}

@media (max-width: 768px) {
    .medrx-pickup {
        grid-template-columns: 1fr;
        --medrx-map-h: 150px;
    }

        .medrx-pickup.is-map-expanded {
            --medrx-map-h: 340px;
        }

    /* Map on top (compact until expanded), then the caption and the list. */
    .medrx-map-col {
        order: -1;
        position: relative;
    }

    .medrx-map {
        height: var(--medrx-map-h);
        border-radius: 12px;
        transition: height .2s ease;
    }

    .medrx-map-placeholder {
        height: var(--medrx-map-h);
    }

    /* Zoom buttons only once the map is opened up; the compact map is a preview. */
    .medrx-pickup:not(.is-map-expanded) .maplibregl-ctrl-top-right {
        display: none;
    }

    .medrx-map-expand {
        display: inline-flex;
        align-items: center;
        position: absolute;
        right: 10px;
        bottom: 10px;
        z-index: 2;
        min-height: 36px;
        padding: 0 16px;
        border: none;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(16, 24, 40, 0.3);
        font-size: 14px;
        font-weight: 600;
        color: var(--ss-text);
        cursor: pointer;
    }

    .medrx-map-note {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 10px;
        margin: 0;
        padding: 6px 8px;
        border-radius: 6px;
        background: #fff;
    }
}

/* ── Medications & Pharmacy on phones ────────────────────────────────── */
@media (max-width: 768px) {
    .medrx-heading {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.25;
        margin-bottom: 6px;
    }

    .medrx-subhead {
        font-size: 15px;
        margin-bottom: 16px;
    }

    .medrx-divider {
        margin: 28px 0 24px;
    }

    .medrx-seizure {
        padding: 14px 16px;
    }

    /* Medication cards */
    .medrx-med {
        padding: 16px;
        border-radius: 12px;
        margin-bottom: 14px;
    }

    .medrx-med-head {
        margin-bottom: 14px;
    }

    .medrx-med-title {
        font-size: 15px;
        font-weight: 700;
    }

    .medrx-med-remove {
        min-height: 44px;
        margin: -10px -8px -10px 0;
        padding: 0 8px;
        font-size: 14px;
        font-weight: 600;
    }

    .medrx-name-label {
        display: block;
    }

    .medrx-med .ss-npf-label {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--ss-text);
    }

    .medrx-med .ss-npf-input {
        width: 100%;
        border-radius: 8px;
    }

    .medrx-med-grid {
        gap: 14px;
    }

    .medrx-add {
        min-height: 52px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 600;
    }

    /* Pharmacy search: one row, ZIP field plus Search. Distance stays at its 10 mi default. */
    .medrx-search {
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 14px;
    }

    .medrx-search-zip {
        flex: 1 1 auto;
    }

    .medrx-search-radius {
        display: none;
    }

    .medrx-search-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .medrx-search-box {
        flex: 1 1 auto;
        border-radius: 8px;
        padding: 0 12px;
    }

    .medrx-search-input {
        height: 46px;
        font-size: 16px;   /* 16px keeps iOS from zooming the page on focus */
    }

    .medrx-search-go {
        height: auto;
        min-height: 48px;
        padding: 0 22px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
    }

    .medrx-caption {
        padding: 12px 0 10px;
        font-size: 13px;
    }

    /* Result cards: number badge, details, radio on the right. */
    .medrx-results,
    .medrx-results.is-scrollable {
        gap: 10px;
        max-height: none;
        overflow: visible;
    }

    .medrx-result {
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
        border-radius: 12px;
    }

        .medrx-result.is-selected {
            border: 2px solid var(--ss-header-navy);
            padding: 13px;
            background: color-mix(in srgb, var(--ss-header-navy) 8%, var(--ss-card-bg));
            box-shadow: none;
        }

    .medrx-result-num {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }

    .medrx-result-body {
        gap: 2px;
    }

    .medrx-result-name {
        font-size: 15px;
        font-weight: 700;
    }

    .medrx-result-dist,
    .medrx-result-store,
    .medrx-result-addr,
    .medrx-result-hours {
        font-size: 13px;
    }

    .medrx-result-picked {
        display: none;
    }

    .medrx-result-radio {
        display: block;
        flex: 0 0 auto;
        box-sizing: border-box;
        width: 22px;
        height: 22px;
        margin-top: 2px;
        border: 2px solid #98A2B3;
        border-radius: 50%;
        background: var(--ss-card-bg);
    }

    .medrx-result.is-selected .medrx-result-radio {
        border-color: var(--ss-header-navy);
        background: radial-gradient(circle, var(--ss-header-navy) 0 4px, var(--ss-card-bg) 5px);
    }

    .medrx-show-more {
        min-height: 48px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 600;
    }
}

/* ── Confirmation screen (TOS-34) ─────────────────────────────────────── */

/* The result layout keeps the two logos but has no stepper between them, so a spacer
   pushes the partner logo to the right edge the way the stepper otherwise would. */
.ss-header-result {
    justify-content: flex-start;
}

.ss-header-spacer {
    flex: 1 1 auto;
}

.ss-cf-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    padding: 32px 24px;
}

.ss-cf-inner {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ss-cf-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 4px;
}

.ss-cf-check {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #DCFCE7;
    color: var(--ss-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ss-cf-check-error {
    background: #FEE2E2;
    color: var(--ss-red);
}

.ss-cf-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--ss-text);
    margin: 0;
}

    .ss-cf-title:focus,
    .ss-cf-title:focus-visible {
        outline: none;
    }

.ss-cf-subtitle {
    font-size: 15px;
    color: var(--ss-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* "A confirmation has been sent to …" line on the success screen. */
.ss-cf-subtitle.ss-cf-sent {
    color: #000;
    font-weight: 500;
}

.ss-cf-card {
    background: var(--ss-card-bg);
    border: 1px solid var(--ss-border);
    border-radius: 10px;
    padding: 20px 22px;
}

/* Appointment details card */
.ss-cf-appt-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ss-cf-appt-provider {
    align-items: center;
}

.ss-cf-avatar,
.ss-cf-avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
}

.ss-cf-avatar {
    background: #D9DCE1;
}

.ss-cf-provider-info {
    flex: 1 1 auto;
    min-width: 0;
}

.ss-cf-provider-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ss-text);
    margin: 0;
}

.ss-cf-provider-specialty {
    font-size: 14px;
    color: var(--ss-text-secondary);
    margin: 2px 0 0;
}

.ss-cf-visit-type {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ss-text);
    white-space: nowrap;
}

.ss-cf-visit-icon {
    flex: 0 0 auto;
}

.ss-cf-divider {
    height: 1px;
    background: var(--ss-border);
    margin: 16px 0;
}

.ss-cf-appt-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--ss-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ss-cf-appt-detail {
    min-width: 0;
}

.ss-cf-appt-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ss-text-secondary);
    margin: 0 0 2px;
}

.ss-cf-appt-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--ss-text);
    margin: 0;
}

/* What happens next card */
.ss-cf-next-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ss-primary);
    margin: 0 0 16px;
}

.ss-cf-next-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .ss-cf-next-item + .ss-cf-next-item {
        margin-top: 14px;
    }

.ss-cf-next-icon {
    width: 20px;
    flex: 0 0 auto;
    color: var(--ss-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.ss-cf-next-text {
    font-size: 14px;
    color: var(--ss-text);
    line-height: 1.5;
    margin: 0;
}

    .ss-cf-next-text strong {
        font-weight: 600;
    }

/* Copay "Pay Now" card (Stripe, feature-flagged) */
.ss-cf-pay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ss-cf-pay-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--ss-text);
    margin: 0;
}

.ss-cf-pay-btn {
    background: var(--ss-primary);
    color: #fff;
    flex: 0 0 auto;
}

    .ss-cf-pay-btn:hover:not(:disabled) {
        background: var(--ss-primary-hover);
    }

    .ss-cf-pay-btn:disabled {
        background: var(--ss-disabled);
        cursor: default;
    }

.ss-cf-pay-element {
    margin-top: 16px;
}

.ss-cf-pay-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.ss-cf-pay-text {
    font-size: 14px;
    color: var(--ss-text-secondary);
    line-height: 1.5;
    margin: 10px 0 0;
}

.ss-cf-pay-error {
    font-size: 14px;
    color: #B91C1C;
    margin: 12px 0 0;
}

.ss-cf-pay-paid {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #14532D;
}

    .ss-cf-pay-paid svg {
        flex: 0 0 auto;
        color: var(--ss-green);
        margin-top: 1px;
    }

    .ss-cf-pay-paid .ss-cf-pay-text {
        margin-top: 2px;
    }

.ss-cf-pay-paid-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

@media (max-width: 480px) {
    .ss-cf-pay-actions .ss-btn {
        flex: 1 1 0;
    }
}

/* Reschedule / support note */
.ss-cf-help {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #EEF0FB;
    border-radius: 10px;
    padding: 14px 18px;
}

.ss-cf-help-icon {
    width: 20px;
    flex: 0 0 auto;
    color: var(--ss-step-active);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ss-cf-help-text {
    font-size: 14px;
    color: var(--ss-text);
    margin: 0;
    line-height: 1.5;
}

.ss-cf-help-phone {
    font-weight: 700;
    color: var(--ss-text);
    text-decoration: none;
    white-space: nowrap;
}

    .ss-cf-help-phone:hover {
        text-decoration: underline;
    }

/* Footer: single full-width Done action */
.ss-cf-footer {
    flex: 0 0 auto;
    padding: 16px 40px;
    background: transparent;
    display: flex;
    justify-content: center;
}

.ss-cf-done {
    width: 100%;
    max-width: 640px;
    background: var(--ss-green);
    color: #fff;
    text-decoration: none;
}

    .ss-cf-done:hover {
        filter: brightness(0.96);
    }

    .ss-cf-done:focus-visible {
        outline: 2px solid var(--ss-step-active);
        outline-offset: 2px;
    }

@media (max-width: 768px) {
    .ss-cf-main {
        padding: 24px 16px;
    }

    .ss-cf-title {
        font-size: 22px;
    }

    .ss-cf-visit-type {
        align-self: flex-start;
    }

    .ss-cf-footer {
        padding: 12px 16px;
    }
}

/* ── Language dropdown (sidebar on every step; header on the confirmation screen) ── */
.ss-card-language .ss-card-title {
    display: block;
}

.ss-language-select {
    position: relative;
}

.ss-language-select select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--ss-card-bg);
    border: 1px solid var(--ss-inactive);
    border-radius: 4px;
    padding: 8px 36px 8px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--ss-text);
    cursor: pointer;
}

.ss-language-select select:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 1px;
}

.ss-language-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ss-text-secondary);
    pointer-events: none;
}

/* Header variant: no card chrome, label hidden visually, sits before the partner logo. */
.ss-card-language-inline {
    background: none;
    border: 0;
    padding: 0;
    margin-right: 16px;
    min-width: 160px;
}

.ss-card-language-inline .ss-card-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Neurelis screening questions above the registration question (Step 1). */
.ss-screening {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #E5E7EB;
}

    .ss-screening .ss-content-title {
        font-size: 20px;
    }

    .ss-screening .ss-content-instructions {
        margin-bottom: 12px;
    }

.ss-screening-select {
    max-width: 520px;
    height: 44px;
}

.ss-screening-question .ss-npf-error {
    margin: 6px 0 0;
}

/* ── Coverage and Copay step: copay payment + "Copay paid" card ── */
.ss-cc-pay {
    margin-top: 20px;
    padding: 22px 24px;
}

/* Small caps-style label over a plain sentence, matching the "COPAY FOR THIS VISIT" card. */
.ss-cc-pay-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ss-text-secondary);
}

.ss-cc-pay-lead {
    margin: 6px 0 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ss-text);
}

.ss-cc-pay .ss-cf-pay-element {
    margin-top: 18px;
}

.ss-cc-pay .ss-cf-pay-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ss-copay-paid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ss-ci-section .ss-copay-paid {
    margin-top: 20px;
}

.ss-copay-paid-main {
    min-width: 0;
}

.ss-copay-paid-label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--ss-text-secondary);
}

.ss-copay-paid-amount {
    margin: 4px 0 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ss-text);
}

.ss-copay-paid-text {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--ss-text-secondary);
}

.ss-copay-paid-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    background: #DCF3DE;
    color: #14532D;
    font-size: 15px;
    font-weight: 600;
}

/* ── Mobile redesign (TOS-76) ──────────────────────────────────────────
   Under 768px the sidebar, logo bar and stepper give way to a slim call bar, a compact header with a
   language button and a progress block, so the question is on screen without scrolling. Everything
   that only exists for phones is hidden here first; desktop is unchanged. */
.ss-shell {
    /* Lime fails AA on white for text and icons; this darker green is used wherever green carries meaning. */
    --ss-green-text: #3b6e12;
}

.ss-mhead,
.ss-banner-m,
.ss-medinfo-mobile,
.ss-pc-next-m {
    display: none;
}

/* Bottom sheets (language, phase details). Rendered closed on every width; only phones open them. */
.ss-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(17, 24, 39, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}

    .ss-sheet-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity .2s ease;
    }

.ss-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1201;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--ss-card-bg);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 32px rgba(17, 24, 39, 0.18);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
    outline: none;
}

    .ss-sheet.is-open {
        transform: none;
        visibility: visible;
        transition: transform .25s ease;
    }

.ss-sheet-head {
    flex: 0 0 auto;
    padding: 8px 20px 0;
    touch-action: none;
}

.ss-sheet-handle {
    display: block;
    width: 40px;
    height: 5px;
    margin: 0 auto 8px;
    border-radius: 3px;
    background: var(--ss-gray-40);
}

.ss-sheet-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ss-sheet-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--ss-primary);
}

.ss-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--ss-text);
    cursor: pointer;
}

    .ss-sheet-close:focus-visible {
        outline: 2px solid var(--ss-focus-ring);
        outline-offset: 0;
    }

.ss-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 20px 24px;
}

html.ss-sheet-open body {
    overflow: hidden;
}

.ss-sheet-note {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ss-text-secondary);
}

.ss-sheet-section {
    margin: 16px 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ss-text-secondary);
}

    .ss-sheet-section:first-child {
        margin-top: 4px;
    }

.ss-lang-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ss-lang-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 18px;
    border: 1px solid var(--ss-border);
    border-radius: 12px;
    background: var(--ss-card-bg);
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    color: var(--ss-text);
    text-align: left;
    cursor: pointer;
}

    .ss-lang-opt.is-selected {
        padding: 0 17px;
        border: 2px solid var(--ss-primary);
        background: var(--ss-selected-bg);
        color: var(--ss-primary);
    }

    .ss-lang-opt:focus-visible {
        outline: 2px solid var(--ss-focus-ring);
        outline-offset: 2px;
    }

.ss-msteps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ss-mstep {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--ss-text);
}

.ss-mstep-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    border: 2px solid var(--ss-gray-text);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: var(--ss-text-secondary);
}

.ss-mstep.is-active .ss-mstep-dot {
    border-color: var(--ss-primary);
    color: var(--ss-primary);
}

.ss-mstep.is-complete .ss-mstep-dot {
    border-color: var(--ss-green-text);
    background: var(--ss-green-text);
    color: var(--ss-white);
}

.ss-mstep-label {
    flex: 1 1 auto;
    min-width: 0;
}

.ss-mstep.is-active .ss-mstep-label {
    font-weight: 700;
    color: var(--ss-primary);
}

.ss-mstep-status {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--ss-text-secondary);
}

.ss-msheet-time {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--ss-page);
    font-size: 15px;
    color: var(--ss-text);
}

    .ss-msheet-time svg {
        flex: 0 0 auto;
        color: var(--ss-primary);
    }

.ss-msheet-help {
    display: flex;
    gap: 10px;
}

.ss-msheet-help-btn {
    flex: 1 1 0;
    gap: 8px;
    height: 48px;
    padding: 0 12px;
    background: var(--ss-primary);
    color: var(--ss-white);
    text-decoration: none;
    white-space: nowrap;
}

    .ss-msheet-help-btn + .ss-msheet-help-btn {
        background: var(--ss-white);
        border: 2px solid var(--ss-primary);
        color: var(--ss-primary);
    }

@media (max-width: 768px) {
    /* The page scrolls as a whole; the call bar and the footer stay pinned. The viewport has to be the
       scroller for sticky to work, so html/body (overflow:auto under 900px in app.css) go back to visible. */
    html,
    body {
        overflow: visible;
    }

    .ss-shell {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    .ss-banner {
        position: sticky;
        top: 0;
        z-index: 50;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .ss-banner-left,
    .ss-banner-right,
    .ss-header,
    .ss-aside,
    .ss-step-eyebrow {
        display: none;
    }

    /* Each side may wrap to two lines (Spanish runs longer) rather than push the page sideways. */
    .ss-banner-m {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        min-height: 44px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        color: var(--ss-white);
        text-decoration: none;
    }

    .ss-banner-m-911 {
        color: var(--ss-yellow);
        text-align: right;
    }

    .ss-banner-m:focus-visible {
        outline: 2px solid var(--ss-white);
        outline-offset: -2px;
    }

    .ss-mhead {
        display: block;
        flex: 0 0 auto;
        background: var(--ss-card-bg);
        border-bottom: 1px solid var(--ss-border);
    }

    .ss-mhead-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 16px 4px;
    }

    .ss-mhead-brand {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    /* The logo artwork has wide empty margins; crop them so the mark sits flush with the gutter. */
    .ss-mhead-logo {
        display: block;
        width: 110px;
        height: 48px;
        margin-left: -8px;
        object-fit: cover;
    }

    .ss-mhead-sub {
        font-size: 12px;
        font-weight: 600;
        color: var(--ss-text-secondary);
    }

    .ss-mhead-lang {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 44px;
        min-height: 44px;
        margin-right: -6px;
        padding: 0 6px;
        border: none;
        border-radius: 8px;
        background: none;
        font: inherit;
        font-size: 16px;
        font-weight: 700;
        color: var(--ss-primary);
        cursor: pointer;
    }

        .ss-mhead-lang:focus-visible,
        .ss-mprog-line:focus-visible {
            outline: 2px solid var(--ss-focus-ring);
            outline-offset: 2px;
        }

    .ss-mprog {
        padding: 4px 16px 0;
    }

    .ss-mprog-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .ss-mprog-phase {
        font-size: 17px;
        font-weight: 700;
        color: var(--ss-primary);
    }

    .ss-mprog-step {
        flex: 0 0 auto;
        font-size: 13px;
        color: var(--ss-text-secondary);
    }

    .ss-mprog-bar {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 6px;
        margin-top: 8px;
    }

    .ss-mprog-seg {
        height: 5px;
        border-radius: 3px;
        background: var(--ss-gray-40);
    }

        .ss-mprog-seg.is-filled {
            background: var(--ss-primary);
        }

    .ss-mprog-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 0;
        border: none;
        background: none;
        font: inherit;
        font-size: 14px;
        color: var(--ss-text);
        text-align: left;
        cursor: pointer;
    }

    .ss-mprog-part {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .ss-mprog-part strong {
            font-weight: 700;
            color: var(--ss-green-text);
        }

    .ss-mprog-time {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex: 0 0 auto;
        font-size: 13px;
        color: var(--ss-text-secondary);
    }

    /* The question card follows the progress block directly. */
    .ss-main {
        display: block;
        flex: 1 0 auto;
        padding: 16px;
        overflow: visible;
    }

    .ss-content {
        padding: 20px 16px;
        border-radius: 16px;
        overflow: visible;
    }

    .ss-content-body {
        overflow: visible;
    }

    .ss-content-title {
        font-size: 22px;
        line-height: 1.25;
    }

    .ss-content-instructions {
        margin-bottom: 16px;
    }

    .ss-medinfo-mobile {
        display: block;
        margin-top: 16px;
    }

    /* Seen us before */
    .ss-screening {
        gap: 20px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

        .ss-screening .ss-content-title {
            font-size: 17px;
            line-height: 1.35;
        }

        .ss-screening .ss-content-instructions {
            margin-bottom: 8px;
        }

    .ss-screening-select {
        max-width: none;
        height: 48px;
    }

    .ss-options {
        max-width: none;
        gap: 12px;
    }

    .ss-option {
        min-height: 56px;
        box-sizing: border-box;
        font-size: 17px;
    }

    /* Sticky footer: Back and Continue stay in reach while the page scrolls. */
    .ss-footer-wrap {
        position: sticky;
        bottom: 0;
        z-index: 40;
        background: var(--ss-card-bg);
        border-top: 1px solid var(--ss-border);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .ss-footer {
        gap: 12px;
        padding: 12px 16px;
    }

        .ss-footer .ss-btn {
            height: 52px;
            font-size: 17px;
        }

        .ss-footer .ss-btn-back {
            flex: 0 0 34%;
        }

        .ss-footer .ss-btn-continue {
            flex: 1 1 auto;
            min-width: 0;
        }

    .ss-footer-error {
        padding: 10px 16px 0;
        text-align: left;
    }

    /* Provider and time */
    .ss-prov-filters {
        margin: 0 0 16px;
        padding: 0;
        background: none;
        border: none;
    }

    /* Three equal-width chips that always fit the card — no hidden overflow. */
    .ss-prov-range {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        width: 100%;
    }

    .ss-prov-range-btn {
        flex: 1 1 0;
        min-width: 0;
        height: 44px;
        padding: 0 6px;
        border-radius: 999px;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ss-pc-card {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
        border-radius: 16px;
    }

    .ss-pc-photo {
        align-self: start;
        width: 72px;
        height: 72px;
        min-height: 0;
        border-radius: 50%;
    }

    .ss-pc-name {
        font-size: 17px;
    }

    .ss-pc-bio,
    .ss-pc-info .ss-pc-link,
    .ss-pc-link-arrow,
    .ss-pc-avail-lead,
    .ss-pc-avail-date,
    .ss-pc-avail-none {
        display: none;
    }

    .ss-pc-next-m {
        display: block;
        margin: 2px 0 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--ss-green-text);
    }

    .ss-pc-avail {
        grid-column: 1 / -1;
        padding-left: 0;
        border-left: none;
    }

    .ss-pc-slots {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 4px;
    }

        .ss-pc-slots .ss-prov-slot {
            height: 48px;
            font-size: 15px;
        }

            /* Three across; a fourth only shows when it is the patient's pick. */
            .ss-pc-slots .ss-prov-slot:nth-child(n+4):not(.is-selected) {
                display: none;
            }

    .ss-pc-avail .ss-pc-link {
        min-height: 44px;
        font-size: 15px;
    }

    /* Confirmation */
    .ss-cf-main {
        overflow: visible;
        padding: 20px 16px;
    }

    .ss-cf-footer {
        position: sticky;
        bottom: 0;
        background: var(--ss-card-bg);
        border-top: 1px solid var(--ss-border);
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .ss-cf-done {
        height: 52px;
    }
}

/* ── "Complete your appointment details" wizard on phones (TOS-76) ─────
   Desktop keeps the two-column modal. Under 768px it fills the screen: call bar and stepper on top,
   the step scrolling in between, Back / Save and continue pinned at the bottom. */
.ss-appt-mhead,
.ss-appt-save-mobile {
    display: none;
}

.ss-appt-step-error {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #B91C1C;
}

@media (max-width: 768px) {
    html:has(.ss-appt-overlay) body {
        overflow: hidden;
    }

    .ss-appt-overlay {
        padding: 0;
        align-items: stretch;
        overflow: hidden;
    }

    .ss-appt-modal {
        max-width: none;
        max-height: none;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        box-shadow: none;
    }

    .ss-appt-grid {
        flex-direction: column;
        height: 100%;
    }

    .ss-appt-nav,
    .ss-appt-save-desktop {
        display: none;
    }

    .ss-appt-main {
        flex: 1 1 auto;
        min-height: 0;
    }

    .ss-appt-mhead {
        display: block;
        flex: 0 0 auto;
        background: var(--ss-card-bg);
        border-bottom: 1px solid var(--ss-border);
    }

    .ss-appt-mstep {
        padding: 6px 16px 12px;
    }

    .ss-appt-mstep-row {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .ss-appt-mback {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin-left: -12px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: none;
        color: var(--ss-text);
        cursor: pointer;
    }

        .ss-appt-mback:focus-visible {
            outline: 2px solid var(--ss-focus-ring);
            outline-offset: 0;
        }

    .ss-appt-mstep-text {
        min-width: 0;
    }

    .ss-appt-mstep-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--ss-primary);
    }

    .ss-appt-mstep-sub {
        margin: 2px 0 0;
        font-size: 13px;
        color: var(--ss-text-secondary);
    }

    .ss-appt-mstep-name {
        font-weight: 600;
        color: var(--ss-green-text);
    }

    .ss-appt-mbar {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 6px;
        margin-top: 8px;
    }

    .ss-appt-mbar-seg {
        height: 5px;
        border-radius: 3px;
        background: var(--ss-gray-40);
    }

        .ss-appt-mbar-seg.is-filled {
            background: var(--ss-primary);
        }

    /* The banner here sits inside the scroll-free header, so it doesn't need to be sticky. */
    .ss-appt-mhead .ss-banner {
        position: static;
    }

    .ss-appt-content {
        padding: 20px 16px 24px;
        scroll-padding-bottom: 24px;
    }

        .ss-appt-content .ss-content-title {
            font-size: 24px;
            line-height: 1.25;
        }

    .ss-appt-foot {
        gap: 12px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--ss-card-bg);
    }

        .ss-appt-foot .ss-btn {
            min-width: 0;
            height: 52px;
            font-size: 17px;
        }

        .ss-appt-foot .ss-btn-back {
            flex: 0 0 34%;
        }

        .ss-appt-foot .ss-appt-save-mobile {
            display: inline-flex;
            flex: 1 1 auto;
        }

    /* Step content */
    .ss-appt-content .ss-textarea-lg {
        max-width: 100%;
        min-height: 200px;
        box-sizing: border-box;
    }

    .ss-appt-content .ss-npf-input,
    .ss-appt-content .ss-npf-select {
        min-height: 48px;
        font-size: 16px; /* 16px keeps iOS from zooming the page when a field is focused */
        box-sizing: border-box;
    }
}

/* ── "Let's find your record" dialog on phones ─────────────────────────
   The dialog was clipped (overflow: hidden, fixed max-height) so on short screens the fields ran off
   the bottom and Back / Continue were unreachable. Now the dialog scrolls and the action bar stays
   pinned to its bottom edge. */
@media (max-width: 768px) {
    .ss-modal-overlay:has(.ss-rs-modal) {
        padding: 12px;
    }

    .ss-rs-modal {
        padding: 0;   /* the generic .ss-modal phone padding would double up with the section padding below */
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

        .ss-rs-modal .ss-modal-title {
            padding: 22px 52px 4px 16px;
        }

        .ss-rs-modal .ss-modal-subtitle {
            padding: 4px 16px 14px;
        }

        .ss-rs-modal .ss-npf-grid {
            padding: 0 16px;
            row-gap: 14px;
        }

        .ss-rs-modal .ss-npf-input {
            height: 48px;
            font-size: 16px;   /* 16px keeps iOS from zooming the page when a field is focused */
        }

    .ss-rs-note,
    .ss-rs-record,
    .ss-rs-reasons-title,
    .ss-rs-reasons {
        margin-left: 16px;
        margin-right: 16px;
    }

    .ss-rs-loading {
        padding: 32px 16px;
        min-height: 200px;
    }

    /* Pinned footer: short labels sit side by side, long ones ("Continue as a new patient") wrap to full width. */
    .ss-rs-modal .ss-modal-actions {
        position: sticky;
        bottom: 0;
        z-index: 1;
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    }

        .ss-rs-modal .ss-modal-actions .ss-btn {
            flex: 1 1 140px;
            height: auto;
            min-height: 48px;
            padding: 10px 14px;
            font-size: 15px;
            line-height: 1.2;
            white-space: normal;
            text-align: center;
        }
}

/* ── "Let's find your appointment" (new patient) dialog on phones ──────
   Already scrolls with a pinned footer; this tightens the padding, uses the dynamic viewport height so
   the mobile browser toolbar doesn't hide the footer, and gives fields a phone-sized tap target. */
@media (max-width: 768px) {
    .ss-modal-overlay:has(.ss-fa-modal) {
        padding: 12px;
    }

    .ss-fa-modal {
        height: calc(100vh - 24px);
        height: calc(100dvh - 24px);
        max-height: 680px;
    }

    .ss-fa-body {
        padding: 20px 16px 8px;
    }

    .ss-fa-actions {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    }

        .ss-fa-actions .ss-btn {
            flex: 1 1 140px;
            min-height: 48px;
            height: auto;
            line-height: 1.2;
            white-space: normal;
        }

    .ss-fa-modal .ss-modal-title {
        font-size: 22px;
        padding-right: 28px;
    }

    .ss-fa-modal .ss-npf-input {
        min-height: 48px;
        font-size: 16px;   /* 16px keeps iOS from zooming the page on focus */
    }

    .ss-fa-choice {
        min-height: 44px;
        flex: 1 1 auto;
    }
}

/* ── Care team step (existing patients) ───────────────────────────── */
.ss-ct-filters {
    justify-content: space-between;
}

.ss-ct-filters-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--ss-step-active);
}

/* One range is always chosen, so the active chip is filled rather than tinted. */
.ss-ct-filters .ss-prov-range-btn.is-active {
    border-color: var(--ss-primary);
    background: var(--ss-primary);
    color: #fff;
}

.ss-ct-list {
    gap: 16px;
}

/* Photo | name + "seen before" | times. */
.ss-pc-card.ss-ct-card {
    grid-template-columns: 124px minmax(0, 1fr) calc(50% - 24px);
    align-items: stretch;
}

.ss-ct-seen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--ss-text-secondary);
}

    .ss-ct-seen svg {
        flex: 0 0 auto;
        color: var(--ss-lime);
    }

.ss-ct-avail-idle {
    justify-content: center;
}

/* Past providers in other specialties: listed, not selectable. */
.ss-ct-other-title {
    margin: 32px 0 4px;
    font-size: 20px;
}

.ss-ct-other-text {
    margin: 0 0 16px;
    color: var(--ss-text-secondary);
}

.ss-pc-card.ss-ct-card.ss-ct-card-unavailable {
    grid-template-columns: 124px minmax(0, 1fr) calc(50% - 24px);
    cursor: default;
    opacity: .65;
}

    .ss-pc-card.ss-ct-card.ss-ct-card-unavailable:hover {
        box-shadow: none;
    }

.ss-ct-hint {
    margin: 0;
    font-size: 16px;
    color: var(--ss-text-secondary);
}

/* Left rail: why the care team is offered. */
.ss-card-careteam-why {
    background: var(--ss-ocean-20);
    border-color: var(--ss-ocean-40);
}

    .ss-card-careteam-why .ss-card-title {
        display: flex;
        align-items: center;
        gap: 8px;
    }

.ss-careteam-why-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ss-text);
}

@media (max-width: 900px) {
    .ss-pc-card.ss-ct-card {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .ss-pc-card.ss-ct-card.ss-ct-card-unavailable {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .ss-ct-avail-idle {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .ss-pc-card.ss-ct-card {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 12px 12px;
    }

    .ss-pc-card.ss-ct-card.ss-ct-card-unavailable {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .ss-ct-filters {
        justify-content: flex-start;
    }
}