/* static/css/health_cost_estimator.css — NEW FILE */

/* Match AI Chat font scoping */
.hce-shell,
.hce-shell input,
.hce-shell select,
.hce-shell textarea,
.hce-shell button,
.hce-shell .hce-left,
.hce-shell .hce-right {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* HCE activation without :has() – we toggle .hce-active on <main> via a tiny script */
main.site-main.hce-active {
    margin: 0 !important;
    /* neutralize global `main { margin:20px; }` */
    padding-top: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

main.site-main.hce-active>.hce-shell {
    /* Match AI Chat behavior: page height is fixed to viewport minus header,
       content inside becomes scrollable instead of growing the page */
    height: calc(100dvh - var(--site-header-h, 56px));
    min-height: 0;
}


/* ── HCE page: kill global gaps exactly like Policy Center, but scoped ── */
body.hce-page .homepage-nav,
body.hce-page .homepage-header,
body.hce-page .site-header {
    margin-bottom: 0 !important;
    /* header flush to panels */
}

body.hce-page main.site-main {
    margin: 0 !important;
    /* neutralize global `main { margin:20px; }` */
    padding: 0 !important;
    /* avoid residual inner spacing */
}

/* NEW: lock horizontal overflow (prevents sideways scroll on HCE) */
body.hce-page,
body.hce-page main.site-main,
.hce-shell,
.hce-left,
.hce-right {
    overflow-x: hidden;
}

/* NEW: site header height token used by the mobile drawer & dim overlay */
body.hce-page {
    --site-header-h: 56px;
}



body.hce-page .homepage-footer {
    margin-top: 0 !important;
    /* pull footer tight against panels */
}


/* Make both grid columns stretch fully inside the filled shell */
.hce-left,
.hce-right {
    height: 100%;
}


.hce-shell {
    --bg: #f7f8fa;
    --panel: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    --border: #e5e7eb;
    --brand: #0056b3;
    --brand-ink: #ffffff;
    --chip: #eef2ff;
    --chip-ink: #1f2937;
    /* NEW: shared icon size for banner & mobile button */
    --hce-title-icon: 24px;


    display: grid;
    /* widen left rail (was 360px) */
    grid-template-columns: 460px 1fr;
    gap: 0;
    padding: 0;

    /* full-bleed and full-height inside <main> */
    margin: 0;
    max-width: none;
    width: 100%;
    min-height: 100%;

    align-items: stretch;

    /* remove card chrome so gray/white meet header & footer flush */
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;

    /* still clip internal overflow if needed */
    overflow: hidden;
}



@media (max-width: 980px) {
    .hce-shell {
        grid-template-columns: 1fr
    }
}

/* Left panel: natural page background (matches AI Chat left rail) */
.hce-left {
    /* DESKTOP: in-flow grid column, not a fixed drawer */
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    transform: none;
    z-index: auto;

    /* match AI Chat left rail visuals */
    background: #e6f2ff;

    border-right: 1px solid rgba(0, 0, 0, 0.06);

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    /* keep the panel off the bottom edge */
    padding: 18px 18px 18px 18px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overscroll-behavior: contain;
    touch-action: pan-y;


}


/* Right panel: full-height column with flexible map + estimates */
.hce-right {
    background: #ffffff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* was 100% — this allows inner scrollers to size */
    align-self: stretch;
}

/* Make the estimates area the scroller below the map */
.hce-estimates {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}




/* Modern embedded rail banner */
.hce-title {
    --hce-title-icon: 24px;
    /* desktop default icon size */

    display: flex;
    align-items: center;
    justify-content: center;
    /* center icon + text inside the banner */
    gap: 12px;

    width: 100%;
    margin: 2px 0 14px;

    /* Slightly taller and comfortable touch target */
    padding: 16px 16px;

    /* Professional/concise type */
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .01em;
    line-height: 1;
    text-align: center;

    /* Embedded look on the blue rail */
    background: linear-gradient(180deg, #0a64c6 0%, #0056b3 100%);
    border: 1px solid #004a99;
    border-radius: 14px;

    /* Subtle lift while still feeling “part of” the panel */
    box-shadow:
        0 4px 12px rgba(0, 86, 179, .18),
        inset 0 0 0 1px rgba(255, 255, 255, .06);
}


/* Filters icon inside the rail banner */
.hce-title-icon {
    width: var(--hce-title-icon);
    height: var(--hce-title-icon);
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    /* crisper scaling on some engines */
    /* If your PNG isn’t pure white, you may enforce contrast:
       filter: brightness(0) invert(1);
    */
}

/* Responsive tweak: keep header balanced on small screens */
@media (max-width: 520px) {
    .hce-title {
        --hce-title-icon: 20px;
        padding: 14px;
        gap: 10px;
    }
}

@media (max-width: 520px) {

    /* NEW: make the token available to the mobile button too */
    .hce-shell {
        --hce-title-icon: 20px;
    }
}




.hce-form .hce-label,
.hce-subhead {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 8px;
    font-weight: 900;
    color: #0f172a;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: none;
    /* unify casing */
}

.hce-form .hce-label::before,
.hce-subhead::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, .15);
}



.hce-input {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 14px;
    background: #ffffff;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: border-color .15s ease, outline-color .15s ease, background .15s ease, box-shadow .15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
}

.hce-input:hover:not(:disabled) {
    border-color: #d8dee7;
}

.hce-input:focus,
.hce-input:focus-visible {
    border-color: #0056b3;
    outline-color: rgba(0, 86, 179, .28);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, .10);
}

.hce-token-input:focus-within {
    border-color: #0056b3;
    outline: 2px solid rgba(0, 86, 179, .22);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, .08);
}


.hce-input::placeholder {
    color: #98a2b3;
}

.hce-input:disabled {
    background: #f7f8fa;
    color: #9aa3af;
    cursor: not-allowed;
}

.hce-token-input {
    background: #ffffff;
    transition: box-shadow .15s ease, border-color .15s ease;
}


/* prevent duplicate rings: the wrapper shows the focus, the inner input stays quiet */
.hce-token-input .hce-input:focus,
.hce-token-input .hce-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


.hce-hint {
    margin: 6px 0 14px;
    color: var(--muted);
    font-size: 12px
}

/* NEW: row that holds the count and the selected chips */
.hce-picked-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 2px 0 6px;
}

.hce-picked-row .hce-count-hint {
    margin: 0;
    /* keep the line compact */
}

/* the inline chip rail (wraps nicely if long) */
.hce-chipline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-height: 26px;
}


.hce-token-input {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px
}

.hce-token-input .hce-input {
    border: none;
    padding: 8px 6px;
    flex: 1;
    min-width: 180px
}

.hce-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--chip);
    color: var(--chip-ink);
    border: 1px solid #dbeafe;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px
}

.hce-chip button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1
}

.hce-chip button:hover {
    opacity: .75
}

.hce-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px
}

@media (max-width: 980px) {
    .hce-row {
        grid-template-columns: 1fr
    }
}



/* Subtext placed under the "Hospitals" header (block) */
.hce-subtext {
    display: block;
    margin: 4px 0 6px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}

.hce-subtext-below {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 10px;
}


/* Small caption above selected chips on the right column */
.hce-selected-head {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
    letter-spacing: .02em;
}

/* New compact label above the hospitals table */
.hce-count-hint {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    margin: 0 0 6px;
    letter-spacing: .02em;
}

/* Clean header above selected chips (right column) */
.hce-picked-head {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
    letter-spacing: .02em;
}


.hce-list {
    height: 280px;
    /* a bit taller, still tidy */
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    position: relative;
    padding: 6px
}

/* Single-column variant for the hospitals section (after removing the right column) */
.hce-row.hce-hospitals {
    grid-template-columns: 1fr;
}

.hce-list .hce-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    margin: 6px 4px;
    background: #fff
}

.hce-item .hce-name {
    font-size: 14px;
    font-weight: 600
}

.hce-item .hce-addr {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px
}

.hce-item .hce-pick {
    border: 1px solid var(--brand);
    color: var(--brand);
    background: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 12px;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}

.hce-item .hce-pick:hover {
    background: rgba(0, 86, 179, .06);
}

.hce-item .hce-pick:active {
    transform: translateY(1px);
}

.hce-list .hce-item:hover {
    background: #fbfdff;
}



.hce-item .hce-pick[disabled] {
    opacity: .45;
    cursor: not-allowed
}

.hce-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--chip);
    color: var(--chip-ink);
    border: 1px solid #dbeafe;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
}

.hce-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 14px;
    /* NEW: space below the buttons */
    justify-content: center;
    flex-wrap: wrap;
    /* play nicely on narrow widths */
}

.hce-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    font-weight: 800;
    border: 1px solid var(--border);
    background: #ffffff;
    transition: transform .08s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease;
    text-decoration: none;
    line-height: 1;
}

.hce-btn:hover:not([disabled]) {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 6px 16px rgba(0, 86, 179, 0.12);
    border-color: #dbe7ff;
}

.hce-btn:active:not([disabled]) {
    transform: translateY(0);
}

.hce-btn.primary {
    background: linear-gradient(180deg, #0a64c6 0%, #0056b3 100%);
    color: var(--brand-ink);
    border-color: var(--brand);
    box-shadow: 0 6px 16px rgba(0, 86, 179, 0.18);
}

.hce-btn.ghost {
    background: #fff;
    color: #0f172a;
}

/* NEW: modern Reset look (outlined, subtle gradient fill) */
.hce-btn.reset {
    border-color: #cfe0ff;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    color: #0f172a;
    font-weight: 800;
}

.hce-btn.reset:hover {
    border-color: #dbe7ff;
    box-shadow: 0 6px 16px rgba(0, 86, 179, 0.12);
}


.hce-btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
}

/* Lock background scroll when HCE drawer is open (like AI Chat) */
body.hce-drawer-open {
    overflow: hidden;
    height: 100dvh;
}

@supports (-webkit-touch-callout: none) {
    body.hce-drawer-open {
        position: fixed;
        width: 100%;
    }
}


/* Mobile: allow buttons to stretch nicely */
@media (max-width: 520px) {
    .hce-actions {
        flex-wrap: wrap;
    }

    .hce-btn {
        flex: 1 1 46%;
        min-width: 140px;
    }
}


.hce-map {
    flex: 0 0 auto;
    /* do NOT overtake the panel */
    height: var(--map-h, clamp(300px, 38vh, 420px));

    /* right-sized on most screens */
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

/* optional: keep a slightly larger min on very wide screens */
@media (min-width:1100px) {
    .hce-map {
        height: clamp(320px, 36vh, 440px);
    }
}


.hce-estimates {
    margin-top: 16px;
    position: relative;
    /* harmless to keep; not required anymore */
    padding-bottom: 0;
    /* no reserved space needed now that clipart is in flow */
}

.hce-right {
    position: relative;
}

.hce-estimates {
    position: relative;
    z-index: 2;
    /* stay above the map */
    background: #fff;
    border-radius: 12px;
}

.hce-estimates.over-map {
    /* Pull the estimates up over the map by a JS-controlled amount */
    margin-top: calc(var(--est-overlap, 0px) * -1);
    box-shadow: 0 12px 28px rgba(16, 38, 70, .14);
    border: 1px solid var(--border);
}



.hce-grip {
    display: none;
    position: sticky;
    /* pin within the scrollable .hce-estimates */
    top: 0;
    z-index: 4;
    /* above card content */
    height: 16px;
    margin: 0 0 8px 0;
    /* no negative overlap */
    cursor: ns-resize;
    background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .75));
    backdrop-filter: saturate(1.2);
}

.hce-grip.show {
    display: block;
}

.hce-grip::before {
    content: "";
    display: block;
    width: 72px;
    height: 8px;
    margin: 4px auto 0;
    border-radius: 999px;
    background: #dbe7ff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

@media (max-width:520px) {
    .hce-grip::before {
        width: 96px;
        height: 10px;
    }
}


.hce-estimates-head {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-weight: 900;
    font-size: 16px;
    letter-spacing: .02em;
    color: #0f172a;

    padding: 10px 12px;
    margin-bottom: 12px;

    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);

    position: relative;
}

.hce-estimates-head::before {
    content: "";
    position: absolute;
    left: 16px;
    bottom: -6px;
    width: 56px;
    height: 3px;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 2px 10px rgba(0, 86, 179, .25);
}

.hce-estimate-body {
    display: grid;
    gap: 12px
}

.hce-empty {
    display: inline-block;
    margin: 8px 0 0;
    padding: 10px 12px;
    border: 1px dashed #cfe0ff;
    background: #f6faff;
    color: #0f172a;
    font-weight: 800;
    letter-spacing: .01em;
    border-radius: 12px;
}


.hce-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.hce-card .hce-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px
}

.hce-card .hce-card-title {
    font-weight: 700
}


/* --- Normalize AI card body rows to match themed sub-sections --- */
.hce-card-body .hce-subsec h4 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .02em;
    color: var(--brand);
}

/* Narrative (4 micro-sections) — consistent spacing between headings */
.hce-card-body .hce-subsec-narrative h4 {
    /* add space BEFORE each new narrative heading */
    margin: 14px 0 6px;
    padding-top: 8px;
    border-top: 1px dashed #cfe0ff;
}

/* the very first narrative heading should sit tight (no extra border/gap) */
.hce-card-body .hce-subsec-narrative h4:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* readable body copy under each heading, even if AI emits bare text or <p> */
.hce-card-body .hce-subsec-narrative p {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #334155;
}


.hce-card-body .hce-subsec h4::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 2px 10px rgba(0, 86, 179, .25);
    margin-top: 6px;
}

.hce-card-body h2,
.hce-card-body h3,
.hce-card-body h4 {
    color: var(--brand);
}


.hce-card-body .hce-subsec .hce-subdesc {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #334155;
}

.hce-card-body .row.two-col {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 6px 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid #e8eef8;
    border-radius: 10px;
    background: #fff;
    margin: 6px 0 0;
}

.hce-card-body .row.two-col .label {
    font-weight: 700;
    color: #1f2937;
}

.hce-card-body .row.two-col .value {
    color: #334155;
    word-break: break-word;
}


.hce-best {
    display: inline-block;
    font-size: 11px;
    border-radius: 999px;
    padding: 4px 8px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0
}

.hce-price {
    font-size: 20px;
    font-weight: 800
}

.hce-meta {
    display: flex;
    gap: 12px;
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
    flex-wrap: wrap
}

.hce-desc {
    font-size: 12px;
    color: var(--muted);
    margin-top: 8px
}

.hce-card ul {
    margin: 8px 0 0 16px
}

.hce-card li {
    font-size: 13px;
    margin: 4px 0
}

.hce-disclaimer {
    margin-top: 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 10px;
    align-items: start;
    border: 1px solid #e5e7eb;
    background: #f8fbff;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.hce-disc-tag {
    display: inline-block;
    align-self: start;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #0f172a;
    background: #e8f0ff;
    border: 1px solid #d7e6ff;
    border-radius: 999px;
    padding: 4px 8px;
    line-height: 1;
}

.hce-disclaimer p {
    margin: 0;
    color: #334155;
    font-size: 12px;
    line-height: 1.45;
}

/* --- Modern selects --- */
.hce-select {
    -webkit-appearance: none;
    appearance: none;
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, transparent 50%, #9aa3af 50%),
        linear-gradient(135deg, #9aa3af 50%, transparent 50%),
        linear-gradient(to right, #e5e7eb, #e5e7eb);
    background-position:
        calc(100% - 18px) 52%,
        calc(100% - 12px) 52%,
        calc(100% - 2.2rem) 50%;
    background-size: 6px 6px, 6px 6px, 1px 1.8rem;
    background-repeat: no-repeat;
}

.hce-select:hover:not(:disabled) {
    border-color: #d8dee7;
}

.hce-select:focus,
.hce-select:focus-visible {
    border-color: #0056b3;
    outline: 2px solid rgba(0, 86, 179, .28);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, .10);
}



/* Icon inside the Estimate header */
.hce-estimates-icon {
    width: 26px;
    /* was 22px */
    height: 26px;
    /* was 22px */
    display: block;
}


/* Clipart sits IN-FLOW under the disclaimer (no overlay, no absolute positioning) */
.hce-clip {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 6px auto 6px;
    pointer-events: none;
    max-width: 100%;
    transition: opacity .2s ease, transform .2s ease;
    will-change: opacity, transform;

}

.hce-clip img {
    display: block;
    width: clamp(220px, 36%, 420px);
    /* slightly smaller for watermark vibe */
    max-width: 100%;
    height: auto;
    filter: saturate(.9) brightness(1.03) contrast(1.02);
    opacity: .85;
    /* subtle watermark feel */
}

.hce-clip.is-hidden {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
    padding: 0 !important;
}




/* Keep Estimate content visually above the watermark */
.hce-estimates-head,
.hce-estimate-body,
.hce-disclaimer {
    position: relative;
    z-index: 1;
}


/* --- “Excel-like” hospital rows with checkboxes --- */
.hce-item.hce-item-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

.hce-check {
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
}

.hce-leftwrap {
    display: flex;
    flex-direction: column;
}

.hce-name {
    font-size: 14px;
    font-weight: 700;
}

.hce-citystate {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

/* Sleek in-panel loading card for estimates */
.hce-loading {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e8eefc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
    max-width: 720px;
}

.hce-loading-title {
    font-weight: 700;
    color: #0f172a;
    font-size: .98rem;
}

.hce-loading-beam {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 86, 179, 0) 0%, rgba(0, 86, 179, .85) 50%, rgba(0, 86, 179, 0) 100%);
    background-size: 200% 100%;
    animation: hce-beam-move 1.4s linear infinite;
    box-shadow: 0 0 10px rgba(0, 86, 179, .18);
}

@keyframes hce-beam-move {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}


/* --- Hospitals list spinner (centered within the table) --- */
.hce-spinner {
    display: grid;
    place-items: center;
    height: 100%;
    /* fill the .hce-list height */
    min-height: 220px;
    /* ensures good centering even if container shrinks */
}

.hce-spinner::after {
    content: "";
    width: 36px;
    /* slightly bigger */
    height: 36px;
    /* slightly bigger */
    border-radius: 50%;
    border: 4px solid #dbe7ff;
    border-top-color: #0056b3;
    animation: hceSpin .9s linear infinite;
}


@keyframes hceSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Visually-hidden text for screen readers */
.hce-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* Friendly message if Maps auth fails */
.hce-map-error {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: 13px;
    color: #b91c1c;
    background: #fff7f7;
    border-top: 1px solid #fecaca;
}

/* Desktop defaults — hide mobile-only UI */
.hce-mobile-bar,
.hce-close,
.hce-dim {
    display: none;
}

/* ——— Tabs for two-hospital compare ——— */
.hce-tabs {
    display: grid;
    gap: 10px;
}

.hce-tablist {
    display: grid;
    grid-auto-flow: column;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    padding: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.hce-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;

}

.hce-tab[aria-selected="false"] {
    background: transparent;
    border-color: transparent;
    color: #0f172a;
    opacity: .92;
}

.hce-tab[aria-selected="false"]:hover {
    background: rgba(10, 100, 198, .05);
    border-color: #dbe7ff;
    box-shadow: 0 6px 16px rgba(0, 86, 179, .08);
}


.hce-tab[aria-selected="true"] {
    background: #fff;
    border-color: #dbe7ff;
    box-shadow: 0 6px 16px rgba(0, 86, 179, .12);
}

.hce-tab .hce-tab-price {
    font-weight: 900;
}

.hce-tab .hce-best {
    margin-left: 2px;
}

.hce-tabpanel {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    background: #fff;
}

/* ——— Badges ——— */
.hce-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    line-height: 1;
    border: 1px solid transparent;
}

.hce-badge.verified {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}

.hce-badge.unverified {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fed7aa;
}

.hce-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    opacity: .9;
}

/* ——— Badge tooltip ——— */
.hce-tip {
    position: fixed;
    z-index: 30;
    max-width: 360px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #dbe7ff;
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 38, 70, .12);
    font-size: 12.5px;
    color: #0f172a;
}


/* ——— Associated charges section (perforated; matches card sub-sections) ——— */
.hce-subsec {
    margin-top: 18px;
    border-top: 1px dashed #cfe0ff;
    padding-top: 14px;
}

.hce-card-body .hce-subsec+.hce-subsec {
    margin-top: 20px;
}


.hce-subsec-others h4 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .02em;
    color: #0f172a;
}

.hce-subsec-others .hce-subdesc {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #334155;
}

.hce-subsec-others ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

@media (min-width: 720px) {
    .hce-subsec-others ul {
        grid-template-columns: 1fr 1fr;
    }
}

.hce-subsec-others li {
    font-size: 12.5px;
    color: #334155;
}

/* Totals block under associated services */
.hce-allin {
    margin-top: 10px;
    display: grid;
    gap: 6px;
}

.hce-allin .line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 800;
    color: #0f172a;
}

.hce-allin .line.total {
    font-size: 14px;
}

/* Subtle emphasis for the primary service row */
.hce-subsec-others li.primary {
    background: #f7fbff;
    border-color: #bfd3ff;
}

.hce-subsec-others li.primary .addon-label {
    font-weight: 800;
}


/* Old-look list rows (label left + price pill right), but scoped to HCE */
.hce-subsec-others li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid #e8eef8;
    border-radius: 10px;
    background: #fff;
}

.hce-subsec-others .addon-label {
    font-weight: 600;
    color: #1f2937;
}

.hce-subsec-others .price-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef5ff;
    border: 1px solid #d7e6ff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Mini skeleton used while charges are fetched (non-blocking) */
.charges.is-loading .hce-subdesc {
    opacity: .8
}

.charges.is-loading .hce-skel-lines {
    margin-top: 6px;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(0, 86, 179, .06) 0%, rgba(0, 86, 179, .15) 50%, rgba(0, 86, 179, .06) 100%);
    background-size: 200% 100%;
    animation: hce-beam-move 1.2s linear infinite;
}

/* Toast: bottom-center positioning & styling (HCE page only) */
body.hce-page .notification-modern.toast {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 2147483640;
    max-width: min(92vw, 720px);
    padding: 12px 16px;
    border-radius: 12px;
    background: #111;
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);

    /* Ensure visibility even if a global style hides notification-modern by default */
    display: block;
    opacity: 1;
    pointer-events: auto;
}


body.hce-page .notification-modern.toast a {
    color: #fff;
    text-decoration: underline;
}

body.hce-page .notification-modern.toast.error {
    background: #b00020;
    /* accessible red; keeps brand vibe */
}


/* === Mobile drawer for left panel (HCE) === */
@media (max-width: 980px) {
    .hce-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        /* center the control */
        gap: 0;
        position: sticky;
        top: 0;
        z-index: 5;
        background: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, .06);
        padding: 0;
        /* let the button span full width */
        margin: 0 0 8px 0;
    }

    .hce-nav-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* center icon + text */
        gap: 12px;
        width: 100%;
        height: 48px;
        padding: 0 16px;
        border-radius: 14px;
        /* match .hce-title */
        border: 1px solid #004a99;
        background: linear-gradient(180deg, #0a64c6 0%, #0056b3 100%);
        color: #fff;
        font-weight: 900;
        font-size: 16px;
        line-height: 1;
        box-shadow: 0 6px 16px rgba(0, 86, 179, .24);
    }

    /* UPDATED: lock size, prevent global img stretching, keep square */
    .hce-nav-icon {
        flex: 0 0 auto;
        width: var(--hce-title-icon, 24px);
        height: var(--hce-title-icon, 24px);
        max-width: none;
        max-height: 100%;
        aspect-ratio: 1 / 1;
        display: block;
        object-fit: contain;
        image-rendering: -webkit-optimize-contrast;
    }



    /* Edge-to-edge map on mobile */
    .hce-right {
        padding-left: 0;
        padding-right: 0;
    }

    .hce-map {
        border-left: none;
        border-right: none;
        border-radius: 0;
        width: 100%;
        max-width: 100vw;
        /* ensure no gutter */
    }

    .hce-nav-btn:active {
        transform: translateY(1px);
    }

    .hce-left {
        /* MOBILE: slide-in drawer below the site header (like AI Chat) */
        position: fixed;
        left: 0;
        top: calc(var(--site-header-h, 56px) + env(safe-area-inset-top, 0px));
        bottom: 0;
        width: min(86vw, 420px);
        max-width: 90vw;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 5000;

        /* ensure the drawer isn't transparent */
        background: #e6f2ff;
        border-right: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 12px 28px rgba(16, 38, 70, .18);

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(env(safe-area-inset-bottom, 0px)) 14px;
        /* make the drawer match the live viewport height to avoid cropping the top */
        height: calc(100svh - var(--site-header-h, 56px) - env(safe-area-inset-top, 0px));
        max-height: calc(100dvh - var(--site-header-h, 56px) - env(safe-area-inset-top, 0px));


    }


    body.hce-drawer-open .hce-left {
        transform: translateX(0);
    }

    .hce-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 28px;
        width: 28px;
        border-radius: 12px;
        border: 1px solid rgba(15, 23, 42, .08);
        background: #fff;
        position: sticky;
        top: 6px;
        margin: 0 4px 8px auto;
        /* pushes to the RIGHT like AI Chat */
        z-index: 3;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
        transition: transform .1s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
        opacity: .96;
        right: 6px;
        left: auto;

    }

    .hce-close:hover {
        transform: translateY(-1px);
        opacity: 1;
    }

    .hce-close:focus-visible {
        outline: 2px solid #bfd3ff;
        outline-offset: 2px;
        border-color: #bfd3ff;
    }

    .hce-close svg {
        display: block;
        opacity: .95;
    }


    .hce-dim {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: calc(var(--site-header-h, 56px) + env(safe-area-inset-top, 0px));
        background: rgba(12, 18, 28, .45);
        z-index: 4990;
    }

    body.hce-drawer-open .hce-dim {
        display: block;
    }

    /* give the right column a touch of breathing room under the sticky bar */
    .hce-right {
        padding-top: 10px;
    }

    /* NEW: friendlier sizing on small screens */
    .hce-right {
        padding-top: 10px;
    }

    /* already present is fine; harmless if duplicated */

    .hce-clip img {
        width: clamp(220px, 72vw, 420px);
        /* scale smoothly, avoid cut-offs */
        max-width: 100%;
    }

    /* Prevent any map overflow causing horizontal scroll on tiny devices */
    .hce-map {
        max-width: 100%;
    }


}

/* === Mobile estimate UX improvements (sticky, scrollable tabs; tighter cards) === */
@media (max-width: 980px) {

    /* Keep the compare tabs visible and usable on narrow screens */
    .hce-tablist {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        position: sticky;
        top: 0;
        z-index: 7;
    }

    .hce-tablist::-webkit-scrollbar {
        display: none;
    }

    .hce-tab {
        flex: 0 0 auto;
        /* prevent squish */
        scroll-snap-align: start;
        max-width: 88vw;
        /* cap each tab width */
    }

    /* Truncate long hospital names inside the tab neatly */
    .hce-tab span:first-child {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 52vw;
        white-space: nowrap;
    }

    .hce-tab .hce-tab-price {
        font-size: 12.5px;
        opacity: .9;
    }

    /* Slightly tighter estimate body and card spacing on mobile */
    .hce-estimate-body {
        gap: 10px;
    }

    .hce-card {
        padding: 12px;
    }
}

/* Ultra-compact tweaks for very small screens */
@media (max-width: 520px) {
    .hce-price {
        font-size: 18px;
    }

    .hce-card {
        padding: 10px;
    }

    /* Stack label/value rows for readability */
    .hce-card-body .row.two-col {
        grid-template-columns: 1fr;
    }

    .hce-card-body .row.two-col .label,
    .hce-card-body .row.two-col .value {
        font-size: 13px;
    }

    .hce-estimates-head {
        font-size: 14px;
        padding: 8px 10px;
    }

    .hce-subsec-others .price-pill {
        padding: 3px 8px;
    }
}