/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: Arial, sans-serif;
    font-size: 14px;
    overflow: hidden;
    /* Stop a drag that reaches the end of the results list from being handed to
       the browser as a page pull (rubber-banding on iOS, pull-to-refresh on
       Android) — both read to the user as "the whole page is scrolling". */
    overscroll-behavior: none;
}

/* ── Wrapper — full viewport column ──────────────────────────────────────── */
#wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow: hidden !important;

    /* 100vh on a mobile browser is the viewport with the address bar HIDDEN, so
       a 100vh app is taller than what is actually visible and the browser lets
       you drag to reveal the rest as the toolbar collapses. That is not the page
       scrolling — it is the viewport moving — but it is indistinguishable to the
       user, and invisible in emulation because there is no browser chrome.
       svh is the SMALLEST viewport height — the one with the toolbar showing —
       and unlike dvh it does not change as that toolbar hides and reappears.
       dvh tracked the live height, which fixed the overflow but reflowed the
       whole layout mid-gesture: the map visibly shifted while the list was being
       scrolled, which reads as the map scrolling with the results. svh trades a
       strip of unused space when the toolbar is hidden for a layout that never
       moves. vh stays first as the fallback for browsers without svh. */
    height: 100vh !important;
    height: 100svh !important;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
#header-container {
    flex-shrink: 0 !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
    z-index: 600 !important; /* above Leaflet controls (z-index 400-500) */
    width: 100% !important;
    position: relative !important;
}

.header-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 16px !important;
    min-height: 52px !important;
}

#logo img {
    max-height: 48px !important;
    width: auto !important;
    display: block !important;
}

/* ── Mobile toggle button — hidden on desktop ────────────────────────────── */
.filter-toggle-btn {
    display: none !important;
    background: #4a90e2 !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* ── Filter panel ─────────────────────────────────────────────────────────── */
.filter-panel {
    padding: 8px 16px 12px !important;
    border-top: 1px solid #eee !important;
    background: #fff !important;
    width: 100% !important;
}

/* Desktop: always visible */
.filter-panel {
    display: block !important;
}

.filter-row-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-end !important;
    width: 100% !important;
}

.filter-item {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 130px !important;
}

.filter-search {
    flex: 2 1 200px !important;
}

.filter-zip {
    flex: 0 1 100px !important;
    max-width: 120px !important;
}

.filter-item input,
.filter-item select {
    height: 34px !important;
    padding: 4px 8px !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    font-family: Arial, sans-serif !important;
    width: 100% !important;
    background: #fff !important;
}

.filter-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    align-items: flex-end !important;
}

.panel-apply {
    background: #4a90e2 !important;
    color: #fff !important;
    border: none !important;
    padding: 7px 18px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    height: 34px !important;
    white-space: nowrap !important;
}

    .panel-apply:hover {
        background: #357abd !important;
    }

.panel-cancel {
    background: #e0e0e0 !important;
    color: #333 !important;
    border: none !important;
    padding: 7px 18px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    height: 34px !important;
    white-space: nowrap !important;
}

    .panel-cancel:hover {
        background: #c8c8c8 !important;
    }

/* ── Upgrade banner ───────────────────────────────────────────────────────── */
.upgrade-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    background: #faeeda !important;
    border-bottom: 1px solid #f5c842 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    color: #854f0b !important;
    flex-shrink: 0 !important;
}

/* Informational "showing first N — refine search" notice (MaxRecords cap) */
.refine-banner {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #e6f1fb !important;
    border-bottom: 1px solid #9cc4ec !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    color: #185fa5 !important;
    flex-shrink: 0 !important;
}

.upgrade-link {
    background: #f5a623 !important;
    color: #fff !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* ── Main split: map + list ───────────────────────────────────────────────── */
.fs-container {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

/* List panel — left on desktop */
.fs-inner-container.content {
    width: 40% !important;
    min-width: 300px !important;
    max-width: 600px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #f4f4f4 !important;
    padding: 8px !important;
    order: 1 !important;
    flex-shrink: 0 !important;
}

/* Map panel — right on desktop */
.fs-inner-container.map-fixed {
    flex: 1 !important;
    min-width: 0 !important;
    position: relative !important;
    order: 2 !important;
}

#map-container {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

#map {
    width: 100% !important;
    height: 100% !important;
}

/* ── Provider list items ──────────────────────────────────────────────────── */
.fs-content {
    padding: 4px !important;
}

.address-item {
    padding: 10px 12px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

    .address-item:hover,
    .address-item:active {
        background-color: #ddd !important;
    }

.rowBox {
    padding: 10px 12px !important;
    margin: 5px 0 !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
}

    .rowBox.alt {
        background: #f5f5f5 !important;
    }

.loading-msg {
    padding: 24px !important;
    text-align: center !important;
    color: #888 !important;
    font-size: 14px !important;
}

/* ── Copyright ────────────────────────────────────────────────────────────── */
.copyrights {
    font-size: 11px !important;
    color: #aaa !important;
    padding: 10px 4px !important;
    text-align: center !important;
}

.margin-top-0 {
    margin-top: 0 !important;
}

/* ── Version badge ────────────────────────────────────────────────────────── */
.version-badge {
    position: fixed !important;
    bottom: 10px !important;
    left: 12px !important;
    font-size: 11px !important;
    color: #aaa !important;
    z-index: 1000 !important;
    user-select: none !important;
    background: rgba(255,255,255,0.85) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #e0e0e0 !important;
    pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLET  ≤ 1024px
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .fs-inner-container.content {
        width: 45% !important;
        min-width: 260px !important;
    }

    .filter-item {
        min-width: 110px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE  ≤ 768px
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    html, body {
        overflow: hidden !important;
    }

    /* Show toggle button */
    .filter-toggle-btn {
        display: block !important;
    }

    /* Hide filter panel by default on mobile */
    .filter-panel {
        display: none !important;
        padding: 12px 16px !important;
    }

        /* Show when open */
        .filter-panel.filter-panel-open {
            display: block !important;
            max-height: 70vh !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
            background: #fff !important;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
        }

    /* Stack filters vertically */
    .filter-row-wrap {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .filter-item,
    .filter-search,
    .filter-zip {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
    }

        .filter-item input,
        .filter-item select {
            height: 44px !important;
            font-size: 16px !important; /* prevents iOS zoom */
            width: 100% !important;
        }

    .filter-buttons {
        flex-direction: row !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .panel-apply,
    .panel-cancel {
        flex: 1 !important;
        height: 44px !important;
        font-size: 15px !important;
    }

    /* Stack: map on top, list below — normal flow */
    /* Stack map over list, but do NOT let the stack itself scroll: the header,
       filter panel and map stay put and only the results list moves. Scrolling
       the container instead would carry the map off the top of the screen. */
    .fs-container {
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .fs-inner-container.map-fixed {
        width: 100% !important;
        height: 42vh !important;
        height: 42svh !important;
        min-height: 220px !important;
        max-height: 350px !important;
        flex-shrink: 0 !important;
        order: 1 !important;

        /* Sticky, not relative. The flex chain says this container cannot scroll,
           and it demonstrably does not on desktop or in emulation — but on a real
           touch device the map still drifts upward while the list is scrolled.
           Sticky makes that impossible to observe: if any ancestor scrolls for a
           reason not reproducible here, the map stays pinned to the top of the
           scrollport instead of travelling with it. Where nothing scrolls, this
           behaves exactly like position: relative, so it costs nothing. */
        position: sticky !important;
        top: 0 !important;
        z-index: 1 !important;
    }

    #map-container {
        position: absolute !important;
        inset: 0 !important;
    }

    #map {
        width: 100% !important;
        height: 100% !important;
    }

    /* The list takes whatever height is left under the map and scrolls inside
       itself. min-height:0 is load-bearing: without it a flex item refuses to
       shrink below its content, the panel grows to fit every row, and nothing
       scrolls no matter what overflow says. */
    .fs-inner-container.content {
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        order: 2 !important;
        padding: 8px !important;
        margin-top: 0 !important;
    }

    .rowBox, .address-item {
        padding: 12px !important;
        font-size: 14px !important;
    }

    .version-badge {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SMALL PHONE  ≤ 480px
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    #logo img {
        max-height: 36px !important;
    }

    .header-top {
        padding: 6px 10px !important;
    }

    .fs-inner-container.map-fixed {
        height: 35vh !important;
        height: 35svh !important;
    }

    /* Keep the actions group tight against the right edge instead of
       letting padding push the Filters button off-screen. */
    .header-actions {
        gap: 6px !important;
    }

    /* Narrower language selector — buys ~30px back for the button. */
    .app-lang-select {
        max-width: 78px !important;
        padding: 5px 22px 5px 7px !important;
    }

    /* Tighter Filters button so it fits fully on screen. */
    .filter-toggle-btn {
        padding: 8px 12px !important;
        white-space: nowrap !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PROVIDER CARD — styles the ShortDescription HTML from the DB view
   Targets the existing table structure without modifying the SQL view.
══════════════════════════════════════════════════════════════════════════ */

/* Card wrapper — each rowBox contains one provider */
.rowBox {
    border: 1px solid #e0e6ed !important;
    border-radius: 10px !important;
    padding: 0 !important;
    margin: 6px 0 !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    transition: box-shadow 0.15s !important;
}

    .rowBox:hover {
        box-shadow: 0 3px 10px rgba(0,0,0,0.12) !important;
        border-color: #4a90e2 !important;
    }

    .rowBox.alt {
        background: #f9fbfd !important;
    }

    /* Outer layout table — provider card root */
    .rowBox > table,
    .address-item > table {
        width: 100% !important;
        border-collapse: collapse !important;
        padding: 10px 12px !important;
        display: block !important;
    }

        /* Left column (org, name, address, phone) */
        .rowBox > table > tbody > tr > td:first-child,
        .address-item > table > tbody > tr > td:first-child {
            width: 55% !important;
            vertical-align: top !important;
            padding: 10px 6px 10px 12px !important;
        }

        /* Right column (type, specialty, accepting) */
        .rowBox > table > tbody > tr > td:last-child,
        .address-item > table > tbody > tr > td:last-child {
            width: 45% !important;
            vertical-align: top !important;
            padding: 10px 12px 10px 6px !important;
            border-left: 1px solid #f0f2f5 !important;
        }

    /* Inner detail tables */
    .rowBox table table,
    .address-item table table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

        .rowBox table table tr,
        .address-item table table tr {
            line-height: 1.6 !important;
        }

        .rowBox table table td,
        .address-item table table td {
            padding: 2px 4px !important;
            vertical-align: top !important;
            font-size: 13px !important;
            color: #333 !important;
        }

            /* Label column (Organization:, Provider Name:, etc.) */
            .rowBox table table td:first-child label,
            .address-item table table td:first-child label {
                color: #6b7c93 !important;
                font-weight: 600 !important;
                font-size: 11px !important;
                text-transform: uppercase !important;
                letter-spacing: 0.04em !important;
                white-space: nowrap !important;
            }

            /* Value column — normal text */
            .rowBox table table td:last-child label,
            .address-item table table td:last-child label {
                color: #1e2a3a !important;
                font-weight: 400 !important;
                font-size: 13px !important;
            }

        /* Organization name — bold and slightly larger */
        .rowBox table table tr:first-child td:last-child label,
        .address-item table table tr:first-child td:last-child label {
            font-weight: 700 !important;
            font-size: 14px !important;
            color: #1e2a3a !important;
        }

    /* Right panel bold values (Type, Specialty, Accepting) */
    .rowBox > table > tbody > tr > td:last-child table td:last-child label,
    .address-item > table > tbody > tr > td:last-child table td:last-child label {
        font-weight: 600 !important;
        color: #1e2a3a !important;
    }

    /* "Yes" accepting new patients — green highlight */
    .rowBox table label[style*="font-weight:bold"]:last-of-type,
    .address-item table label[style*="font-weight:bold"]:last-of-type {
        /* Fallback styling for accepting patients value */
    }

    /* Spacer td — hide the gap column */
    .rowBox > table > tbody > tr > td:nth-child(2),
    .address-item > table > tbody > tr > td:nth-child(2) {
        display: none !important;
    }

/* ── Mobile: stack left/right panels vertically ────────────────────────── */
@media (max-width: 768px) {

    .rowBox > table > tbody > tr,
    .address-item > table > tbody > tr {
        display: flex !important;
        flex-direction: column !important;
    }

        .rowBox > table > tbody > tr > td,
        .address-item > table > tbody > tr > td {
            width: 100% !important;
            border-left: none !important;
            padding: 8px 12px !important;
        }

            .rowBox > table > tbody > tr > td:last-child,
            .address-item > table > tbody > tr > td:last-child {
                border-top: 1px solid #f0f2f5 !important;
                border-left: none !important;
            }

    .rowBox table table td,
    .address-item table table td {
        font-size: 14px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PROVIDER CARD v2 — matches clean class-based HTML from SQL view
   No inline styles needed — all controlled here
══════════════════════════════════════════════════════════════════════════ */

/* Card wrapper */
.provider-card {
    display: flex;
    flex-direction: row;
    gap: 0;
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

/* Left panel — org, name, address, phone */
.pc-left {
    flex: 0 0 55%;
    padding: 2px 12px 2px 4px;
    border-right: 1px solid #edf0f4;
}

/* Right panel — type, specialty, accepting */
.pc-right {
    flex: 0 0 45%;
    padding: 2px 4px 2px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Organization name — prominent header */
.pc-org {
    font-size: 14px;
    font-weight: 700;
    color: #1e2a3a;
    margin-bottom: 6px;
    line-height: 1.3;
}

/* Each label/value row */
.pc-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

/* Label (Provider:, Address:, etc.) */
.pc-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a9bb0;
    white-space: nowrap;
    min-width: 58px;
    flex-shrink: 0;
}

/* Value text */
.pc-value {
    font-size: 13px;
    color: #2c3e50;
    font-weight: 400;
}

/* Type badge */
.pc-badge {
    display: inline-block;
    background: #e6f1fb;
    color: #185fa5;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Accepting New Patients — colour coded */
.pc-accepting-yes {
    display: inline-block;
    background: #eaf3de;
    color: #3b6d11;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.pc-accepting-no {
    display: inline-block;
    background: #fdecea;
    color: #a32d2d;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.pc-accepting-all {
    display: inline-block;
    background: #f0f2f5;
    color: #6b7c93;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

/* ── Mobile: stack panels vertically ─────────────────────────────────── */
@media (max-width: 768px) {
    .provider-card {
        flex-direction: column;
    }

    .pc-left {
        flex: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #edf0f4;
        padding: 2px 4px 10px 4px;
    }

    .pc-right {
        flex: none;
        width: 100%;
        padding: 10px 4px 2px 4px;
    }

    .pc-label {
        min-width: 70px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   VIEW DETAILS BUTTON + SLIDE-IN DETAIL PANEL
══════════════════════════════════════════════════════════════════════════ */

/* View Details button on each card */
.card-actions {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 6px 4px 2px !important;
    border-top: 1px solid #f0f2f5 !important;
    margin-top: 6px !important;
}

.btn-view-details {
    background: none !important;
    border: 1px solid #4a90e2 !important;
    color: #4a90e2 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    white-space: nowrap !important;
}

    .btn-view-details:hover {
        background: #4a90e2 !important;
        color: #fff !important;
    }

/* ── Dark overlay behind the panel ───────────────────────────────────── */
.detail-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.35) !important;
    z-index: 500 !important;
    cursor: pointer !important;
    animation: fadeIn 0.2s ease !important;
}

/* ── Slide-in panel ───────────────────────────────────────────────────── */
.detail-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 640px !important;
    max-width: 94vw !important;
    height: 100vh !important;
    background: #fff !important;
    z-index: 600 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: -4px 0 24px rgba(0,0,0,0.18) !important;
    animation: slideIn 0.25s ease !important;
}

.detail-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #edf0f4 !important;
    background: #f8f9fb !important;
    flex-shrink: 0 !important;
}

.detail-panel-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e2a3a !important;
}

.detail-close-btn {
    background: none !important;
    border: none !important;
    font-size: 18px !important;
    color: #6b7c93 !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
}

    .detail-close-btn:hover {
        background: #edf0f4 !important;
        color: #1e2a3a !important;
    }

.detail-panel-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px !important;
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

/* ── Animations ───────────────────────────────────────────────────────── */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── Mobile: full screen panel ────────────────────────────────────────── */
@media (max-width: 768px) {
    .detail-panel {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* ── Dropdown placeholder styling ─────────────────────────────────────────── */
.filter-item select {
    color: #333;
}

    /* Show placeholder text in grey when nothing real is selected */
    .filter-item select option[disabled] {
        color: #999 !important;
    }

    /* When the selected value is the placeholder, grey out the select itself */
    .filter-item select:has(option[disabled]:checked) {
        color: #999;
    }

/* ══════════════════════════════════════════════════════════════════════════
   ADVANCED FILTER POPUP
══════════════════════════════════════════════════════════════════════════ */

/* Overlay — sits ABOVE the map (z-index 200 on header) */
.adv-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.40) !important;
    z-index: 1100 !important;
    cursor: pointer !important;
    animation: fadeIn 0.2s ease !important;
}

.adv-popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1200 !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22) !important;
    width: min(520px, 96vw) !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    animation: popupIn 0.22s ease !important;
}

@keyframes popupIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.adv-popup-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px 14px !important;
    border-bottom: 1px solid #edf0f4 !important;
    flex-shrink: 0 !important;
}

.adv-popup-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e2a3a !important;
}

.adv-close-btn {
    background: none !important;
    border: none !important;
    font-size: 18px !important;
    color: #6b7c93 !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
}

    .adv-close-btn:hover {
        background: #edf0f4 !important;
        color: #1e2a3a !important;
    }

.adv-popup-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
}

    /* filter-item inside the popup — full width */
    .adv-popup .filter-item,
    .adv-popup-body .filter-item {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
    }

    /* MultiSelect inside adv popup — show as inline scrollable list, no floating panel */
    .adv-popup-body .filter-multiselect-item .ms-toggle {
        background: #fff !important;
    }

    .adv-popup-body .ms-panel {
        position: static !important;
        display: block !important;
        max-height: 160px !important;
        overflow-y: auto !important;
        border: 1px solid #ddd !important;
        border-top: none !important;
        border-radius: 0 0 5px 5px !important;
        box-shadow: none !important;
        min-width: unset !important;
        max-width: unset !important;
        width: 100% !important;
        z-index: auto !important;
    }

.adv-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #333 !important;
    cursor: pointer !important;
}

.adv-popup-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 14px 20px 16px !important;
    border-top: 1px solid #edf0f4 !important;
    flex-shrink: 0 !important;
}

/* Advanced button in header */
.btn-advanced-filters {
    background: #f0f4f8 !important;
    color: #1e2a3a !important;
    border: 1px solid #d2d6dc !important;
    padding: 7px 14px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

    .btn-advanced-filters:hover {
        background: #e2e8f0 !important;
    }

.btn-advanced-active {
    background: #fff3cd !important;
    border-color: #f0ad4e !important;
    color: #7a4f00 !important;
}

.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   COOKIE CONSENT BANNER
══════════════════════════════════════════════════════════════════════════ */

.cookie-banner {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2000 !important;
    background: #1e2a3a !important;
    color: #fff !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.25) !important;
    animation: slideUp 0.3s ease !important;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.cookie-banner-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
    flex: 1 !important;
    min-width: 200px !important;
}

.cookie-banner-actions {
    display: flex !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.cookie-btn-accept {
    background: #4a90e2 !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

    .cookie-btn-accept:hover {
        background: #357abd !important;
    }

.cookie-btn-decline {
    background: transparent !important;
    color: #cbd5e0 !important;
    border: 1px solid #4a5568 !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

    .cookie-btn-decline:hover {
        background: rgba(255,255,255,0.08) !important;
    }

/* Mobile: stack cookie banner */
@media (max-width: 600px) {
    .cookie-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .cookie-banner-actions {
        width: 100% !important;
        justify-content: flex-end !important;
    }

    /* Advanced button — hide text, show icon only on very small screens */
    .btn-advanced-filters {
        padding: 7px 10px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE FILTER PANEL — ADVANCED TOGGLE IN HEADER
   Both "Advanced" and "← Basic" live in header-top next to Close,
   so they're always at the same position regardless of which view is active.
══════════════════════════════════════════════════════════════════════════ */

/* Desktop: never show the mobile toggle */
.btn-mobile-adv-toggle {
    display: none !important;
}

/* Desktop: hide mobile-only panel elements (no longer used but keep safe) */
.filter-advanced-mobile-btn {
    display: none !important;
}

.mobile-advanced-header {
    display: none !important;
}

@media (max-width: 768px) {

    /* The Advanced / ← Basic toggle button in the header */
    .btn-mobile-adv-toggle {
        display: inline-flex !important;
        align-items: center !important;
        background: #4a90e2 !important;
        color: #fff !important;
        border: none !important;
        padding: 8px 14px !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
    }

        .btn-mobile-adv-toggle.btn-advanced-active {
            background: #f0ad4e !important;
            color: #7a4f00 !important;
        }

        /* ← Basic button — slightly different shade to distinguish direction */
        .btn-mobile-adv-toggle.btn-mobile-back {
            background: #6b7c93 !important;
            color: #fff !important;
        }
}

/* ══════════════════════════════════════════════════════════════════════════
   NAV MENU
══════════════════════════════════════════════════════════════════════════ */

.app-nav {
    border-top: 1px solid #edf0f4 !important;
}

.app-nav-bar {
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
}

.app-nav-items {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    flex: 1 !important;
}

.app-nav-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1e2a3a !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
    white-space: nowrap !important;
}

    .app-nav-item:hover {
        background: #edf0f4 !important;
        color: #1e2a3a !important;
    }

.app-nav-icon {
    font-size: 15px !important;
}

/* Desktop: hide toggle button */
.app-nav-toggle {
    display: none !important;
}

/* ── Mobile nav ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Collapsed: no visible bar at all — toggle lives in header-actions */
    .app-nav {
        border-top: none !important;
    }

    .app-nav-bar {
        padding: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Toggle button — sits inside header-actions (moved in Razor) */
    .app-nav-toggle {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        background: #f0f4f8 !important;
        color: #1e2a3a !important;
        border: 1px solid #d2d6dc !important;
        border-radius: 6px !important;
        padding: 7px 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
    }

    /* Menu items hidden by default */
    .app-nav-items {
        display: none !important;
        width: 100% !important;
        flex-direction: column !important;
        gap: 0 !important;
        background: #fff !important;
        border-top: 1px solid #edf0f4 !important;
        padding: 4px 0 !important;
    }

    .app-nav-open .app-nav-items {
        display: flex !important;
        z-index: 2147483647 !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
    }

    .app-nav-item {
        width: 100% !important;
        padding: 12px 16px !important;
        border-radius: 0 !important;
        font-size: 15px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

        .app-nav-item:last-child {
            border-bottom: none !important;
        }

        .app-nav-item:hover {
            background: #f0f4f8 !important;
        }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRE-FILTER POPUP
══════════════════════════════════════════════════════════════════════════ */

.prefilt-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    z-index: 2100 !important;
    backdrop-filter: blur(2px) !important;
}

.prefilt-popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2200 !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
    width: min(480px, 94vw) !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    animation: prefiltIn 0.25s ease !important;
}

@keyframes prefiltIn {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.prefilt-header {
    padding: 24px 24px 16px !important;
    border-bottom: 1px solid #edf0f4 !important;
}

.prefilt-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e2a3a !important;
    line-height: 1.3 !important;
}

.prefilt-subtitle {
    margin-top: 6px !important;
    font-size: 13px !important;
    color: #6b7c93 !important;
    line-height: 1.5 !important;
}

.prefilt-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.prefilt-filter-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.prefilt-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.prefilt-input,
.prefilt-select {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1.5px solid #d2d6dc !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #1e2a3a !important;
    background: #fff !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

    .prefilt-input:focus,
    .prefilt-select:focus {
        outline: none !important;
        border-color: #4a90e2 !important;
        box-shadow: 0 0 0 3px rgba(74,144,226,0.18) !important;
    }

.prefilt-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    color: #1e2a3a !important;
    cursor: pointer !important;
}

.prefilt-footer {
    padding: 16px 24px 20px !important;
    border-top: 1px solid #edf0f4 !important;
}

.prefilt-btn-search {
    width: 100% !important;
    padding: 12px !important;
    background: #4a90e2 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}

    .prefilt-btn-search:hover {
        background: #357abd !important;
    }

/* ══════════════════════════════════════════════════════════════════════════
   MULTISELECT FILTER
══════════════════════════════════════════════════════════════════════════ */

.filter-multiselect-item {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 130px !important;
}

.ms-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 34px !important;
    padding: 4px 8px !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    background: #fff !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-family: Arial, sans-serif !important;
    user-select: none !important;
    width: 100% !important;
}

    .ms-toggle:hover {
        border-color: #4a90e2 !important;
    }

.ms-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #333 !important;
    flex: 1 !important;
}

.ms-arrow {
    margin-left: 6px !important;
    color: #666 !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
}

/* Fixed positioning escapes overflow:hidden on all parent containers */
.ms-panel {
    position: fixed !important;
    min-width: 180px !important;
    max-width: 300px !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    padding: 4px 0 !important;
    /* Layer set once, below — see the stacking-context note there. */
}

.ms-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    font-family: Arial, sans-serif !important;
    color: #333 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

    .ms-option:hover {
        background: #f0f4f8 !important;
    }

    .ms-option input[type="checkbox"] {
        margin: 0 !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        width: 14px !important;
        height: 14px !important;
    }

@media (max-width: 768px) {
    .filter-multiselect-item {
        width: 100% !important;
    }

    .ms-panel {
        max-width: 90vw !important;
    }
}

/* ── Pre-filter multiselect list ─────────────────────────────────────────── */
.prefilt-ms-list {
    max-height: 200px !important;
    overflow-y: auto !important;
    border: 1px solid #d2d6dc !important;
    border-radius: 8px !important;
    padding: 4px 0 !important;
    background: #fff !important;
}

.prefilt-ms-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    color: #333 !important;
    cursor: pointer !important;
}

    .prefilt-ms-option:hover {
        background: #f0f4f8 !important;
    }

    .prefilt-ms-option input[type="checkbox"] {
        width: 15px !important;
        height: 15px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

/* ── Pre-filter multiselect toggle ──────────────────────────────────────── */
.prefilt-ms-wrap {
    width: 100% !important;
}

.prefilt-ms-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border: 1.5px solid #d2d6dc !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: #1e2a3a !important;
    user-select: none !important;
    transition: border-color 0.15s !important;
}

    .prefilt-ms-toggle:hover {
        border-color: #4a90e2 !important;
    }

.prefilt-ms-list {
    max-height: 200px !important;
    overflow-y: auto !important;
    border: 1.5px solid #d2d6dc !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    padding: 4px 0 !important;
    background: #fff !important;
}

/* ── Advanced popup inline multiselect ───────────────────────────────────── */
.adv-ms-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
}

.adv-ms-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.adv-ms-count {
    font-weight: 400 !important;
    color: #4a90e2 !important;
    text-transform: none !important;
}

.adv-ms-list {
    max-height: 180px !important;
    overflow-y: auto !important;
    border: 1px solid #d2d6dc !important;
    border-radius: 6px !important;
    background: #fff !important;
    padding: 4px 0 !important;
}

/* ── Advanced multiselect toggle button ─────────────────────────────────── */
.adv-ms-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 10px !important;
    border: 1px solid #d2d6dc !important;
    border-radius: 6px !important;
    background: #fff !important;
    cursor: pointer !important;
    user-select: none !important;
    font-size: 13px !important;
    color: #1e2a3a !important;
    transition: border-color 0.15s !important;
}

    .adv-ms-toggle:hover {
        border-color: #4a90e2 !important;
    }

    /* When open, square off the bottom corners to join with the list */
    .adv-ms-toggle + .adv-ms-list {
        border-top: none !important;
        border-radius: 0 0 6px 6px !important;
    }

    .adv-ms-toggle .adv-ms-label {
        text-transform: none !important;
        font-weight: 500 !important;
        letter-spacing: normal !important;
        font-size: 13px !important;
    }

/* ── Leaflet z-index — keeps map layers below our UI ─────────────────────── */
.leaflet-pane,
.leaflet-tile-pane {
    z-index: 100 !important;
}

.leaflet-overlay-pane {
    z-index: 200 !important;
}

.leaflet-shadow-pane {
    z-index: 300 !important;
}

.leaflet-marker-pane {
    z-index: 400 !important;
}

.leaflet-tooltip-pane {
    z-index: 500 !important;
}

.leaflet-popup-pane {
    z-index: 600 !important;
}

.leaflet-top,
.leaflet-bottom,
.leaflet-control {
    z-index: 700 !important;
}

#header-container {
    z-index: 800 !important;
    position: relative !important;
}

/* The multiselect panel is position:fixed, but it is a DESCENDANT of
   #header-container, which is position:relative with a z-index — and therefore a
   stacking context. That means this number only ranks the panel among the
   header's own children; against anything outside the header, the header's own
   z-index is what competes. So the panel needs a high value AND the header needs
   to be lifted while a panel is open (see #header-container.ms-open below).
   Without the second half, the version badge (1000) and the advanced-filter
   overlay (1100) both paint over the open dropdown. */
.ms-panel {
    z-index: 1500 !important;
}

/* Lifted only while a dropdown is open: a permanently raised header would sit
   above the detail panel and the advanced-filters popup. Those never coexist
   with an open dropdown, so scoping it to .ms-open keeps both correct. */
#header-container.ms-open {
    z-index: 1500 !important;
}

.detail-overlay,
.adv-overlay,
.prefilt-overlay {
    z-index: 1000 !important;
}

.detail-panel {
    z-index: 1100 !important;
}

.adv-popup {
    z-index: 1200 !important;
}

.prefilt-popup {
    z-index: 1300 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   LANGUAGE SELECTOR  (header)
   Shown only when <Localization enabled="true"> with more than one language.
══════════════════════════════════════════════════════════════════════════ */

.app-lang-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23667'/></svg>") no-repeat right 8px center !important;
    border: 1px solid #d4dae3 !important;
    border-radius: 6px !important;
    color: #1e2a3a !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 26px 6px 10px !important;
    height: 34px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

    .app-lang-select:hover {
        border-color: #4a90e2 !important;
    }

    .app-lang-select:focus {
        outline: none !important;
        border-color: #4a90e2 !important;
        box-shadow: 0 0 0 2px rgba(74,144,226,0.2) !important;
    }

@media (max-width: 768px) {
    .app-lang-select {
        font-size: 12px !important;
        height: 32px !important;
        padding: 5px 24px 5px 8px !important;
    }
}

/* ── Grid row highlight when its map pin is clicked ─────────────────────── */
.address-item--highlight {
    position: relative;
    box-shadow: inset 4px 0 0 0 #185fa5;
    background-color: #eaf3fb !important; /* overrides inline row bg */
    transition: background-color 0.2s ease;
}

    /* Blinking RED left-pointing arrow, overlaid on the row's right edge.
   Overlaid (not in reserved padding) so it never reshapes the row layout —
   important on mobile where .rowBox uses padding:0 and an inner table. */
    .address-item--highlight .row-pin-arrow {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2; /* sit above the row's inner table */
        color: #e02020; /* red, matching the reference arrow */
        font-size: 20px;
        line-height: 1;
        font-weight: bold;
        text-shadow: 0 1px 3px rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.25);
        pointer-events: none;
        animation: mapxerArrowBlink 1s ease-in-out infinite;
    }

/* Blink + nudge leftward (toward the row content) */
@keyframes mapxerArrowBlink {
    0%, 100% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

    50% {
        opacity: 0.2;
        transform: translateY(-50%) translateX(-4px);
    }
}

/* Mobile: keep the arrow clear of the row's rounded corner + card shadow,
   and slightly smaller so it doesn't crowd narrow rows. */
@media (max-width: 768px) {
    .address-item--highlight .row-pin-arrow {
        right: 6px;
        font-size: 17px;
    }
}

/* Respect users who prefer reduced motion — show a steady arrow instead */
@media (prefers-reduced-motion: reduce) {
    .address-item--highlight .row-pin-arrow {
        animation: none;
        opacity: 1;
    }
}

/* ── Header disclaimer (AppConfig <HeaderText>) ───────────────────────────── */
/* Deliberately a LAYOUT-ONLY wrapper: it positions the block between #logo and
   .header-actions and nothing more. No background, border, padding, colour or
   font — those belong to the markup authored in Insights, so a <div style="…">
   in the template paints exactly what the operator asked for.
 
   Note on !important: the rest of this stylesheet leans on it heavily, and a
   class rule with !important beats an INLINE style that lacks it. So the layout
   properties keep !important (they must win against the shell), while every
   paint property is either absent or declared WITHOUT it — otherwise the
   template's own style="background:…" would silently lose. */
.header-disclaimer {
    flex: 1 1 auto !important;
    min-width: 0 !important;          /* wrap long text instead of shoving the
                                         controls off the right edge */
    margin: 0 16px !important;
    padding: 0 !important;            /* the template's own box reaches the edges */
    background: transparent !important;
    border: none !important;

    /* Sensible defaults only — no !important, so the template overrides them. */
    font-size: 12px;
    line-height: 1.4;
    color: inherit;

}

/* The clamped box. Kept separate from .header-disclaimer so the header's flex
   layout and the template's own styling are untouched by the clamping. */
.header-disclaimer-body {
    /* Safety rail: a long disclaimer scrolls rather than growing the header. */
    max-height: 4.2em;
    overflow-y: auto;
}

/* Desktop has the room, so there is nothing to expand. */
.disclaimer-toggle { display: none; }

/* Narrow screens: the row is already tight with the logo, language picker and
   Filters button, so the disclaimer drops to its own full-width line below. */
@media (max-width: 900px) {
    .header-top { flex-wrap: wrap !important; }
    .header-disclaimer {
        order: 3 !important;
        flex: 1 0 100% !important;
        margin: 6px 0 0 !important;
    }

    /* Collapsed: two whole lines. The cap is a MULTIPLE of line-height on purpose —
       a fractional cap slices the last line through the middle of the glyphs, which
       reads as a rendering fault rather than as "there is more text".
       Six lines of legal text was still most of a phone screen, and because the app
       locks html/body scrolling below 768px the header cannot simply grow: whatever
       it occupies is taken from the map and results. */
    .header-disclaimer-body {
        max-height: 2.8em !important;
        overflow: hidden !important;
    }

    /* Expanded on tap. Capped at 40vh so it can never swallow the screen again;
       past that it scrolls inside itself, and overscroll-behavior stops that
       scroll from chaining out to the page behind it. */
    .header-disclaimer.is-open .header-disclaimer-body {
        max-height: 40vh !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .disclaimer-toggle {
        display: inline-block;
        margin-top: 2px;
        padding: 2px 8px;
        border: 1px solid rgba(0, 0, 0, 0.18);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.75);
        color: inherit;
        font: inherit;
        font-size: 11px;
        line-height: 1.6;
        cursor: pointer;
        /* Comfortable tap target without adding height to the collapsed header. */
        min-height: 24px;
    }
}

/* ── Results sort bar ─────────────────────────────────────────────────────── */
.sort-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 12px !important;
    border-bottom: 1px solid #e8edf3 !important;
    background: #fbfcfe !important;
    font-size: 12px !important;
    color: #6b7c93 !important;
}
.sort-bar label { font-weight: 600 !important; white-space: nowrap !important; }
.sort-bar select {
    flex: 0 1 auto !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    border: 1px solid #d5e0ea !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #2c3e50 !important;
}

/* ── Nav dropdowns (one level) ─────────────────────────────────────────────── */
.app-nav-group {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}
.app-nav-parent { display: inline-flex !important; align-items: center !important; gap: 4px !important; }
button.app-nav-item {
    border: none !important;
    background: none !important;
    font: inherit !important;
    cursor: pointer !important;
}
.app-nav-caret { font-size: 9px !important; opacity: 0.7 !important; }
/* A parent that is ALSO a link gets a separate caret button, so the label still
   navigates and the caret still opens the dropdown. */
.app-nav-caret-btn {
    border: none !important;
    background: none !important;
    color: inherit !important;
    font-size: 9px !important;
    opacity: 0.7 !important;
    cursor: pointer !important;
    padding: 0 6px 0 0 !important;
}
.app-nav-sub {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 180px !important;
    background: #fff !important;
    border: 1px solid #dbe4ed !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 6px 18px rgba(20, 34, 51, 0.14) !important;
    padding: 4px 0 !important;
    z-index: 1200 !important;
}
/* The -open class is the ONLY opener that works everywhere: ToggleMenu sets it on
   tap, click or Enter. */
.app-nav-group-open .app-nav-sub { display: block !important; }

/* Hover and focus-within are additionally allowed on devices that actually have a
   pointer. They must NOT apply to touch: tapping the parent button focuses it, so
   :focus-within would hold the menu open and the second tap — which correctly
   clears -open — would appear to do nothing. Gating on (hover: hover) keeps the
   mouse behaviour (and keyboard tabbing, which only exists where there is a
   pointer) without breaking the toggle on a phone or tablet. */
@media (hover: hover) and (pointer: fine) {
    .app-nav-group:hover .app-nav-sub,
    .app-nav-group:focus-within .app-nav-sub { display: block !important; }
}

.app-nav-subitem {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 14px !important;
    color: #2c3e50 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}
.app-nav-subitem:hover { background: #eef4fb !important; color: #185fa5 !important; }

/* Phones and small tablets: the sort control needs the same treatment the filter
   inputs already get. 16px is not cosmetic — iOS Safari zooms the whole page when
   a select smaller than 16px receives focus, and the visitor lands zoomed into the
   results list with no obvious way back. 44px is the minimum comfortable tap
   target. */
@media (max-width: 768px) {
    .sort-bar { padding: 9px 12px !important; gap: 10px !important; }
    .sort-bar select {
        height: 44px !important;
        font-size: 16px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

@media (max-width: 768px) {
    /* Stacked nav: the submenu becomes an indented block rather than a floating
       panel — a dropdown positioned absolutely inside a vertical menu would cover
       the items beneath it. */
    /* Flex row, not block+float. A parent that is also a link renders as
       <a> + separate caret <button>; with float:right the caret escaped the flow and
       landed on a row of its own well below its label, leaving a tall empty band in
       the menu. As a wrapping flex row the label takes the free space, the caret sits
       at the right edge of the SAME row, and the submenu wraps to the next line. */
    .app-nav-group {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100% !important;
    }
    .app-nav-group > .app-nav-item,
    .app-nav-group > .app-nav-parent {
        flex: 1 1 auto !important;
        /* The stacked-nav rule above gives every .app-nav-item width:100%, which is
           right for a plain link but makes a parent claim the whole row and pushes
           its caret button onto the next line. Inside a group the label sizes to its
           content instead, leaving the caret beside it. */
        width: auto !important;
        min-height: 44px !important;
        border-bottom: none !important;
    }
    .app-nav-sub {
        flex: 1 0 100% !important;      /* full-width row under the parent */
        position: static !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
    .app-nav-subitem { padding-left: 30px !important; min-height: 44px !important; }
    /* The caret is a 9px glyph; without a padded box around it the only way to open
       a dropdown on a phone is to hit a target smaller than a fingertip. */
    .app-nav-caret-btn {
        float: none !important;
        flex: 0 0 auto !important;
        padding: 0 16px !important;
        min-height: 44px !important;
        font-size: 12px !important;
    }
}

/* ── Touch devices of ANY width ───────────────────────────────────────────────
   The 768px breakpoint above catches phones, but a tablet in landscape reports a
   1024px viewport and still has no mouse: it takes the desktop rules, which means
   a 12px sort dropdown (iOS zooms the page when a control under 16px is focused)
   and 9px caret targets. Keying these off the pointer instead of the width covers
   both. Layout stays width-driven; only hit area and text size change here. */
@media (hover: none) and (pointer: coarse) {
    .sort-bar select {
        min-height: 44px !important;
        font-size: 16px !important;
    }
    .app-nav-item,
    .app-nav-parent,
    .app-nav-subitem { min-height: 44px !important; }
    .app-nav-caret-btn {
        padding: 0 14px !important;
        min-height: 44px !important;
        font-size: 12px !important;
    }
    .app-nav-caret { font-size: 11px !important; }
}