/* ================================================================
   FreshZone · style-v3.css — Readability & Polish Fix
   Loaded LAST — fixes contrast, X buttons, cards, all pages
   Safe overrides only — no broken functionality
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700;800&display=swap');

/* ── FONTS ─────────────────────────────────────────────────── */
body, input, select, textarea, button { font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif !important; }
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif !important; letter-spacing: -0.025em; }

/* ── BODY — cleaner, deeper gradient so cards pop ───────────── */
body {
    background: linear-gradient(145deg,
        #004e78 0%, #006fa3 20%, #0097c4 45%,
        #00b8d8 65%, #006fa3 80%, #004e78 100%
    ) !important;
    background-size: 300% 300% !important;
    animation: bodyPan 28s ease infinite !important;
}
@keyframes bodyPan {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
[data-theme="dark"] body {
    background: linear-gradient(145deg, #030810, #06101e, #08162a, #030810) !important;
    background-size: 200% 200% !important;
    animation: none !important;
}

/* Dot grid overlay for depth */
body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
[data-theme="dark"] body::before { opacity: 0.04 !important; }

/* ── NAV — dark navy glass, always readable ─────────────────── */
nav {
    background: rgba(0,40,68,0.90) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0,200,230,0.20) !important;
    box-shadow: 0 2px 20px rgba(0,20,50,0.30) !important;
}
[data-theme="dark"] nav { background: rgba(3,8,18,0.94) !important; }

/* Nav links readable on dark nav */
.nav-links a { color: rgba(200,236,255,0.88) !important; font-weight: 600 !important; }
.nav-links a:hover { color: #fff !important; background: rgba(255,255,255,0.12) !important; }
.nav-links a.active {
    background: linear-gradient(135deg, #00b4d8, #0ecfef) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 14px rgba(0,180,216,0.5) !important;
}

/* Nav user pill */
.nav-user {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: rgba(200,236,255,0.9) !important;
}
.dark-toggle { border-color: rgba(255,255,255,0.25) !important; color: rgba(200,236,255,0.8) !important; }
.dark-toggle:hover { border-color: #0ecfef !important; color: #fff !important; }
.hamburger span { background: rgba(200,236,255,0.9) !important; }

/* ── CARDS — brighter white, high contrast ──────────────────── */
.glass-card, .hero, .card {
    background: rgba(240,252,255,0.97) !important;
    border: 1px solid rgba(255,255,255,0.6) !important;
    box-shadow: 0 6px 28px rgba(0,40,100,0.14), 0 1px 4px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
[data-theme="dark"] .glass-card,
[data-theme="dark"] .hero,
[data-theme="dark"] .card {
    background: rgba(10,20,36,0.98) !important;
    border-color: rgba(34,211,238,0.1) !important;
}

/* ── HERO — readable text ───────────────────────────────────── */
.hero { text-align: center; }
.hero h1 { color: #002c4a !important; font-weight: 800 !important; font-size: 1.65rem !important; letter-spacing: -0.03em !important; }
.hero p, .hero > p { color: #3a6a85 !important; font-size: 0.95rem !important; }
[data-theme="dark"] .hero h1 { color: #e2f0f8 !important; }
[data-theme="dark"] .hero p { color: #94a3b8 !important; }

/* ── LOCATION / SENSOR CARDS ────────────────────────────────── */
.location-card {
    background: linear-gradient(155deg, rgba(228,248,255,0.99) 0%, rgba(210,240,255,0.97) 100%) !important;
    border: 1px solid rgba(0,120,180,0.14) !important;
    box-shadow: 0 3px 16px rgba(0,50,110,0.10) !important;
}
.location-card h3, .zone-card-header h3 { color: #002840 !important; font-weight: 700 !important; }
.location-card p, .location-card small { color: #4a7090 !important; }
[data-theme="dark"] .location-card { background: rgba(10,20,36,0.98) !important; border-color: rgba(34,211,238,0.1) !important; }
[data-theme="dark"] .location-card h3, [data-theme="dark"] .zone-card-header h3 { color: #e2f0f8 !important; }
[data-theme="dark"] .location-card p, [data-theme="dark"] .location-card small { color: #94a3b8 !important; }

/* ── STAT BOXES ─────────────────────────────────────────────── */
.stat-box {
    background: linear-gradient(145deg, rgba(220,246,255,0.99) 0%, rgba(200,236,255,0.97) 100%) !important;
    border: 1px solid rgba(0,120,180,0.12) !important;
    border-bottom: 3px solid #00b4d8 !important;
}
.stat-box h3 {
    background: linear-gradient(135deg, #003a5c, #00b4d8) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
}
.stat-box p { color: #4a7090 !important; font-weight: 700 !important; font-size: 0.7rem !important; letter-spacing: 0.07em !important; }
[data-theme="dark"] .stat-box { background: rgba(10,20,36,0.98) !important; border-color: rgba(34,211,238,0.1) !important; border-bottom-color: #22d3ee !important; }
[data-theme="dark"] .stat-box h3 { background: linear-gradient(135deg, #7dd3fc, #22d3ee) !important; -webkit-background-clip: text !important; background-clip: text !important; }
[data-theme="dark"] .stat-box p { color: #64748b !important; }

/* ── FILTER BAR — solid white, always readable ──────────────── */
.filter-bar {
    background: rgba(240,252,255,0.98) !important;
    border: 1px solid rgba(0,120,180,0.16) !important;
    box-shadow: 0 4px 18px rgba(0,50,100,0.10) !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
}
[data-theme="dark"] .filter-bar { background: rgba(10,20,36,0.98) !important; border-color: rgba(34,211,238,0.12) !important; }

.filter-bar label { color: #3a6a85 !important; font-weight: 700 !important; font-size: 0.7rem !important; letter-spacing: 0.06em !important; }
[data-theme="dark"] .filter-bar label { color: #64748b !important; }

/* Filter inputs — readable */
.filter-group input, .filter-group select {
    background: rgba(248,253,255,0.95) !important;
    border: 1.5px solid rgba(0,100,160,0.2) !important;
    color: #002840 !important;
    border-radius: 9px !important;
}
.filter-group input:focus, .filter-group select:focus {
    border-color: #00b4d8 !important;
    box-shadow: 0 0 0 3px rgba(0,180,216,0.16) !important;
    background: #fff !important;
}
[data-theme="dark"] .filter-group input,
[data-theme="dark"] .filter-group select {
    background: rgba(10,20,36,0.95) !important;
    border-color: rgba(34,211,238,0.16) !important;
    color: #e2f0f8 !important;
}

/* ── X BUTTON — perfect circle, always ─────────────────────── */
.filter-inline-clear {
    position: absolute !important;
    right: 7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    /* Force exact square dimensions = perfect circle */
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(100,116,139,0.72) !important;
    color: white !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
    transition: background 0.18s, transform 0.12s !important;
    overflow: hidden !important;
    line-height: 1 !important;
    aspect-ratio: 1 / 1 !important;
}
.filter-inline-clear:hover { background: rgba(51,65,85,0.92) !important; }
.filter-inline-clear:active { transform: translateY(-50%) scale(0.88) !important; }
.filter-inline-clear::after, .filter-inline-clear::before { display: none !important; }
/* SVG inside X button */
.filter-inline-clear svg,
.filter-inline-clear .btn-icon,
.filter-inline-clear .icon {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    max-width: 11px !important;
    flex-shrink: 0 !important;
    display: block !important;
    pointer-events: none !important;
    stroke: white !important;
    fill: none !important;
    stroke-width: 2.5 !important;
}

/* ── LOG CONTAINER / TABLE ──────────────────────────────────── */
.log-container {
    background: rgba(238,251,255,0.98) !important;
    border: 1px solid rgba(0,100,160,0.12) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}
[data-theme="dark"] .log-container { background: rgba(10,20,36,0.98) !important; border-color: rgba(34,211,238,0.1) !important; }

th {
    background: rgba(0,100,160,0.08) !important;
    color: #3a6a85 !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    border-bottom: 2px solid rgba(0,100,160,0.12) !important;
}
[data-theme="dark"] th { background: rgba(0,0,0,0.35) !important; color: #7dd3fc !important; border-bottom-color: rgba(34,211,238,0.12) !important; }
th:hover { color: #004e7a !important; }
[data-theme="dark"] th:hover { color: #22d3ee !important; }

td { color: #002840 !important; border-bottom-color: rgba(0,80,140,0.07) !important; font-size: 0.86rem !important; }
[data-theme="dark"] td { color: #e2f0f8 !important; border-bottom-color: rgba(34,211,238,0.07) !important; }
tbody tr:hover { background: rgba(0,130,200,0.05) !important; }
[data-theme="dark"] tbody tr:hover { background: rgba(34,211,238,0.04) !important; }

/* ── FORM INPUTS — all pages ────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea {
    background: rgba(242,252,255,0.94) !important;
    border: 1.5px solid rgba(0,100,160,0.20) !important;
    color: #002840 !important;
    border-radius: 10px !important;
}
input:focus, select:focus, textarea:focus {
    border-color: #00b4d8 !important;
    box-shadow: 0 0 0 3px rgba(0,180,216,0.16) !important;
    background: rgba(255,255,255,0.99) !important;
}
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: rgba(10,20,36,0.92) !important;
    border-color: rgba(34,211,238,0.16) !important;
    color: #e2f0f8 !important;
}
label { color: #003a5c !important; font-weight: 700 !important; font-size: 0.74rem !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; }
[data-theme="dark"] label { color: #94a3b8 !important; }

/* ── BUTTONS ────────────────────────────────────────────────── */
button {
    font-weight: 700 !important;
    border-radius: 11px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Filter action buttons */
.filter-action-btn {
    padding: 0.6rem 1.1rem !important;
    font-size: 0.84rem !important;
    width: auto !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 10px !important;
}
.filter-clear-btn  { background: linear-gradient(135deg, #5a7a8a, #475c6a) !important; }
.filter-export-btn { background: linear-gradient(135deg, #16a34a, #15803d) !important; }
.filter-danger-btn { background: linear-gradient(135deg, #dc2626, #b91c1c) !important; }

/* fab-icon fix — no size blowup */
.fab-icon { display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; }
.fab-icon svg, .fab-icon .icon {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    display: block !important;
}
.fab-text { font-size: 0.84rem !important; font-weight: 700 !important; }

/* ── MODAL CARDS ────────────────────────────────────────────── */
.modal-content-custom,
.staff-response-card,
.auth-card {
    background: rgba(238,251,255,0.98) !important;
    border: 1px solid rgba(255,255,255,0.65) !important;
}
[data-theme="dark"] .modal-content-custom,
[data-theme="dark"] .staff-response-card,
[data-theme="dark"] .auth-card {
    background: rgba(10,20,36,0.98) !important;
    border-color: rgba(34,211,238,0.1) !important;
}

/* ── AUTH CARD ──────────────────────────────────────────────── */
.auth-card {
    box-shadow: 0 28px 68px rgba(0,40,100,0.22), 0 4px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
    border-radius: 24px !important;
    padding: 2.25rem 2rem 2rem !important;
}
.auth-form-content input, .auth-form-content select {
    background: rgba(245,252,255,0.95) !important;
    border: 1.5px solid rgba(0,100,160,0.20) !important;
    color: #002840 !important;
    border-radius: 10px !important;
}
.auth-form-content input:focus, .auth-form-content select:focus {
    border-color: #00b4d8 !important;
    box-shadow: 0 0 0 3px rgba(0,180,216,0.16) !important;
    background: rgba(255,255,255,1) !important;
}
[data-theme="dark"] .auth-form-content input,
[data-theme="dark"] .auth-form-content select {
    background: rgba(10,22,38,0.92) !important;
    border-color: rgba(34,211,238,0.16) !important;
    color: #e2f0f8 !important;
}
.auth-form-content label {
    color: #003a5c !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}
[data-theme="dark"] .auth-form-content label { color: #94a3b8 !important; }
.auth-header h1 { color: white !important; -webkit-text-fill-color: white !important; font-weight: 900 !important; letter-spacing: -0.04em !important; }
.auth-header p { color: rgba(255,255,255,0.85) !important; }

/* ── TAGS ───────────────────────────────────────────────────── */
.tag { font-weight: 700 !important; font-size: 0.68rem !important; }
.tag-danger  { background: #fee2e2 !important; color: #991b1b !important; }
.tag-success { background: #dcfce7 !important; color: #14532d !important; }
.tag-warning { background: #fef3c7 !important; color: #78350f !important; }
.tag-info    { background: #dbeafe !important; color: #1e3a8a !important; }
[data-theme="dark"] .tag-danger  { background: rgba(239,68,68,0.14) !important;  color: #fca5a5 !important; }
[data-theme="dark"] .tag-success { background: rgba(34,197,94,0.14) !important;  color: #86efac !important; }
[data-theme="dark"] .tag-warning { background: rgba(245,158,11,0.14) !important; color: #fcd34d !important; }
[data-theme="dark"] .tag-info    { background: rgba(59,130,246,0.14) !important; color: #93c5fd !important; }

/* ── NOTIFICATION ───────────────────────────────────────────── */
.notification { border-radius: 14px !important; font-weight: 500 !important; }

/* ── PAGE HERO TEXT ─────────────────────────────────────────── */
.page-hero h1 { color: white !important; text-shadow: 0 2px 16px rgba(0,0,0,0.22) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; }
.page-hero p { color: rgba(255,255,255,0.82) !important; }

/* ── MOBILE DRAWER ──────────────────────────────────────────── */
.mobile-nav-drawer { background: rgba(0,35,60,0.97) !important; }
.mobile-nav-drawer a { color: rgba(185,228,255,0.88) !important; }
.mobile-nav-drawer a:hover, .mobile-nav-drawer a.active { background: rgba(0,180,216,0.22) !important; color: #fff !important; }
.mobile-nav-divider { background: rgba(0,180,216,0.18) !important; }
.mobile-nav-logout { color: #fca5a5 !important; }

/* ── BOTTOM NAV MOBILE ──────────────────────────────────────── */
@media (max-width: 768px) {
    #fz-bottom-nav {
        background: rgba(0,32,56,0.97) !important;
        border-top: 1px solid rgba(0,200,230,0.2) !important;
    }
    .fz-bn-tab { color: rgba(170,220,255,0.5) !important; }
    .fz-bn-tab.active { color: #0ecfef !important; }
    #fz-bn-more-menu { background: rgba(0,30,55,0.97) !important; border-color: rgba(0,200,230,0.18) !important; }
    .fz-bn-more-item { color: rgba(185,228,255,0.9) !important; }
    .fz-bn-more-item.danger { color: #fca5a5 !important; }
}

/* ── CONTACT FEATURE CARDS ──────────────────────────────────── */
.feature-card {
    background: rgba(238,251,255,0.97) !important;
    border: 1px solid rgba(255,255,255,0.6) !important;
}
[data-theme="dark"] .feature-card { background: rgba(10,20,36,0.98) !important; border-color: rgba(34,211,238,0.1) !important; }
.feature-card h4 { color: #002840 !important; }
[data-theme="dark"] .feature-card h4 { color: #e2f0f8 !important; }
.feature-card p { color: #4a7090 !important; }
[data-theme="dark"] .feature-card p { color: #94a3b8 !important; }

/* ── PROFILE ────────────────────────────────────────────────── */
.profile-name { color: #002840 !important; font-weight: 800 !important; }
[data-theme="dark"] .profile-name { color: #e2f0f8 !important; }
.profile-detail-label { color: #5a7a8a !important; }
.profile-detail-value { color: #002840 !important; }
[data-theme="dark"] .profile-detail-value { color: #e2f0f8 !important; }
.profile-access { background: rgba(0,78,122,0.08) !important; color: #004e7a !important; }
[data-theme="dark"] .profile-access { background: rgba(34,211,238,0.1) !important; color: #22d3ee !important; }

/* ── CONTACT TICKETS ────────────────────────────────────────── */
.ticket-item { background: rgba(238,251,255,0.98) !important; }
[data-theme="dark"] .ticket-item { background: rgba(10,20,36,0.98) !important; }
.ticket-item .ticket-subject { color: #004e7a !important; }
[data-theme="dark"] .ticket-item .ticket-subject { color: #7dd3fc !important; }

/* ── FOOTER ─────────────────────────────────────────────────── */
footer, .site-footer { color: rgba(255,255,255,0.84) !important; font-size: 0.82rem !important; }

/* ── HOTKEY BADGE ───────────────────────────────────────────── */
.hotkey-badge { background: rgba(0,100,160,0.14) !important; border-color: rgba(0,180,216,0.28) !important; color: #00b4d8 !important; }

/* ── CONTACT PAGE HEADER ────────────────────────────────────── */
.contact-page-header { background: rgba(238,251,255,0.98) !important; }
.contact-page-header h1 { color: #003a5c !important; }
[data-theme="dark"] .contact-page-header { background: rgba(10,20,36,0.98) !important; }
[data-theme="dark"] .contact-page-header h1 { color: #7dd3fc !important; }

/* ── HISTORY FILTER ACTIONS ROW ─────────────────────────────── */
.filter-actions-row {
    display: flex !important;
    gap: 0.6rem !important;
    margin-top: 0.75rem !important;
    flex-wrap: wrap !important;
}
.filter-inputs-row {
    display: flex !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}
.filter-inputs-row .filter-group { min-width: 160px !important; flex: 1 !important; }

@media (max-width: 600px) {
    .filter-inputs-row { flex-direction: column !important; }
    .filter-action-btn { flex: 1 !important; min-width: calc(50% - 0.3rem) !important; }
    .fab-text { font-size: 0.75rem !important; }
}
@media (max-width: 380px) {
    .filter-action-btn { min-width: 100% !important; }
}

/* ── SECTION LABELS / KICKERS ───────────────────────────────── */
.section-kicker {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,180,216,0.1); color: #00819a;
    border: 1px solid rgba(0,180,216,0.22);
    border-radius: 99px; padding: 4px 13px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; margin-bottom: 0.6rem;
}
[data-theme="dark"] .section-kicker { background: rgba(34,211,238,0.1); color: #22d3ee; border-color: rgba(34,211,238,0.22); }

/* ── INPUT GROUPS readability ───────────────────────────────── */
p, small { color: var(--gray, #5a7a8a); }
[data-theme="dark"] p, [data-theme="dark"] small { color: #94a3b8; }

/* Ensure body text on cards is readable */
.glass-card p, .card p, .hero p,
.stat-box p, .location-card p { color: inherit; }

/* ── LAST UPDATED BAR ───────────────────────────────────────── */
.last-updated-bar { color: rgba(255,255,255,0.78) !important; font-weight: 500 !important; font-size: 0.74rem !important; }
[data-theme="dark"] .last-updated-bar { color: #64748b !important; }

/* ── STAFF ALERT BAR ────────────────────────────────────────── */
.staff-alert-bar { background: #fffbeb !important; border-color: #fcd34d !important; color: #78350f !important; }
[data-theme="dark"] .staff-alert-bar { background: rgba(217,119,6,0.1) !important; color: #fbbf24 !important; border-color: rgba(217,119,6,0.3) !important; }

/* ── AQI BADGES ─────────────────────────────────────────────── */
.aqi-good     { background: #dcfce7 !important; color: #14532d !important; }
.aqi-moderate { background: #fef9c3 !important; color: #713f12 !important; }
.aqi-alert    { background: #fee2e2 !important; color: #7f1d1d !important; }
.aqi-offline  { background: #f1f5f9 !important; color: #475569 !important; }
[data-theme="dark"] .aqi-good     { background: rgba(34,197,94,0.14) !important;  color: #86efac !important; }
[data-theme="dark"] .aqi-moderate { background: rgba(245,158,11,0.14) !important; color: #fcd34d !important; }
[data-theme="dark"] .aqi-alert    { background: rgba(239,68,68,0.14) !important;  color: #fca5a5 !important; }
[data-theme="dark"] .aqi-offline  { background: rgba(148,163,184,0.1) !important; color: #94a3b8 !important; }

/* ── HISTORY HERO — readable text on white card ────────────── */
.page-hero.fz-masthead,
.page-hero {
    background: rgba(240,252,255,0.98) !important;
    border: 1.5px solid rgba(0,120,180,0.18) !important;
    border-radius: 20px !important;
    padding: 1.75rem 1.5rem !important;
    box-shadow: 0 8px 32px rgba(0,60,110,0.14) !important;
}
.page-hero h1,
.page-hero.fz-masthead h1 {
    color: #002840 !important;
    -webkit-text-fill-color: #002840 !important;
    font-weight: 800 !important;
    font-size: 1.55rem !important;
    letter-spacing: -0.025em !important;
    text-shadow: none !important;
}
.page-hero p,
.page-hero.fz-masthead p {
    color: #2e5a72 !important;
    -webkit-text-fill-color: #2e5a72 !important;
    font-size: 0.96rem !important;
    text-shadow: none !important;
    margin-top: 0.3rem !important;
    max-width: 580px !important;
    line-height: 1.6 !important;
}
[data-theme="dark"] .page-hero,
[data-theme="dark"] .page-hero.fz-masthead {
    background: rgba(10,20,36,0.98) !important;
    border-color: rgba(34,211,238,0.14) !important;
}
[data-theme="dark"] .page-hero h1,
[data-theme="dark"] .page-hero.fz-masthead h1 {
    color: #e2f0f8 !important;
    -webkit-text-fill-color: #e2f0f8 !important;
}
[data-theme="dark"] .page-hero p,
[data-theme="dark"] .page-hero.fz-masthead p {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

/* ── X BUTTON — enforce circle, override ALL inherited button rules ── */
button.filter-inline-clear {
    /* Exact square = perfect circle */
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    /* The key fix — override the 14px from button:not() rule */
    border-radius: 50% !important;
    border: none !important;
    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    /* Appearance */
    background: rgba(92,110,128,0.78) !important;
    color: white !important;
    box-shadow: none !important;
    /* Position */
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    /* Misc */
    cursor: pointer !important;
    z-index: 10 !important;
    overflow: hidden !important;
    outline: none !important;
    line-height: 22px !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    vertical-align: unset !important;
    aspect-ratio: 1 / 1 !important;
    transition: background 0.15s ease !important;
}
button.filter-inline-clear:hover {
    background: rgba(51,65,85,0.95) !important;
    transform: translateY(-50%) !important;
    box-shadow: none !important;
    filter: none !important;
}
button.filter-inline-clear:active {
    transform: translateY(-50%) scale(0.88) !important;
}
button.filter-inline-clear::after,
button.filter-inline-clear::before { display: none !important; }

/* SVG inside X button — locked 11x11 */
button.filter-inline-clear svg {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    max-width: 11px !important;
    min-height: 11px !important;
    max-height: 11px !important;
    flex-shrink: 0 !important;
    display: block !important;
    stroke: white !important;
    fill: none !important;
    stroke-width: 2.5 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Mobile — identical, no exceptions */
@media (max-width: 768px) {
    button.filter-inline-clear {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        border-radius: 50% !important;
        aspect-ratio: 1 / 1 !important;
    }
    button.filter-inline-clear svg {
        width: 11px !important;
        height: 11px !important;
        max-width: 11px !important;
        max-height: 11px !important;
    }
}