/* ============================================================
   WEATHER & AQI — frontend styles
   Used by: home_sections/weather_aqi.php, weather/index.php,
            aqi/index.php, admin/weather_locations.php (badges)
   Colours fall back to sensible blues when the theme has no vars.
   ============================================================ */

.hn-quick-items {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-left: 4px;

    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;

    color: #222 !important;
    text-decoration: none !important;

    font-size: 12px;
    font-weight: 600;

    transition: all .2s ease;
}

.hn-quick-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    color: #e31b23;
    background: #fff0f0;
    border-radius: 50%;

    font-size: 12px;
}

.hn-quick-labeln {
    color: #222;
}

 

.hn-quick-items:hover .hn-quick-icon {
    background: #fff;
    color: #e31b23;
} 


:root {
    --wx-blue: #0ea5e9;
    --wx-blue-dark: #0369a1;
    --wx-card: #ffffff;
    --wx-ink: #0f172a;
    --wx-muted: #64748b;
    --wx-line: rgba(15, 23, 42, .09);
    --wx-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}
[data-bs-theme="dark"] {
    --wx-card: #131a26;
    --wx-ink: #e2e8f0;
    --wx-muted: #94a3b8;
    --wx-line: rgba(255, 255, 255, .12);
    --wx-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

/* ---------- Shared shell ---------- */
.wx-wrap { color: var(--wx-ink); }
.wx-card {
    background: var(--wx-card);
    border: 1px solid var(--wx-line);
    border-radius: 16px;
    box-shadow: var(--wx-shadow);
}
.wx-hero {
    background: linear-gradient(135deg, var(--wx-blue) 0%, var(--wx-blue-dark) 100%);
    border-radius: 18px;
    color: #fff;
    padding: 20px;
    overflow: hidden;
    position: relative;
}
.wx-hero::after {
    content: "";
    position: absolute;
    right: -40px; top: -40px;
    width: 180px; height: 180px;
    background: rgba(255, 255, 255, .12);
    border-radius: 50%;
}
.wx-hero-temp { font-size: 3.2rem; font-weight: 700; line-height: 1; }
.wx-hero-icon { font-size: 3.4rem; opacity: .95; }
.wx-hero-city { font-size: 1.15rem; font-weight: 600; }
.wx-hero-sub { opacity: .9; font-size: .9rem; }
.wx-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255, 255, 255, .18);
    border-radius: 999px; padding: .25rem .7rem;
    font-size: .8rem; color: #fff; text-decoration: none;
}
.wx-chip:hover { background: rgba(255, 255, 255, .3); color: #fff; }

/* ---------- Metric tiles ---------- */
.wx-metric {
    background: var(--wx-card);
    border: 1px solid var(--wx-line);
    border-radius: 14px;
    padding: 12px;
    height: 100%;
}
.wx-metric i { font-size: 1.15rem; color: var(--wx-blue); }
.wx-metric .wx-metric-label { color: var(--wx-muted); font-size: .78rem; }
.wx-metric .wx-metric-value { font-weight: 700; font-size: 1.05rem; }

/* ---------- Hourly + daily strips ---------- */
.wx-strip {
    display: flex; gap: .6rem; overflow-x: auto;
    padding-bottom: .35rem; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.wx-strip::-webkit-scrollbar { height: 6px; }
.wx-strip::-webkit-scrollbar-thumb { background: var(--wx-line); border-radius: 99px; }
.wx-hour {
    flex: 0 0 auto; min-width: 76px; text-align: center;
    scroll-snap-align: start;
    background: var(--wx-card); border: 1px solid var(--wx-line);
    border-radius: 12px; padding: .5rem .35rem;
}
.wx-hour.is-now { border-color: var(--wx-blue); box-shadow: 0 0 0 2px rgba(14, 165, 233, .18); }
.wx-hour .wx-hour-time { font-size: .74rem; color: var(--wx-muted); }
.wx-hour .wx-hour-icon { font-size: 1.2rem; color: var(--wx-blue); }
.wx-hour .wx-hour-temp { font-weight: 600; font-size: .95rem; }
.wx-day {
    background: var(--wx-card); border: 1px solid var(--wx-line);
    border-radius: 14px; padding: .7rem; text-align: center; height: 100%;
}
.wx-day-name { font-weight: 600; font-size: .9rem; }
.wx-day-icon { font-size: 1.5rem; color: var(--wx-blue); }
.wx-day-temp { font-size: .85rem; color: var(--wx-muted); }
.wx-day-temp b { color: var(--wx-ink); }

/* ---------- AQI gauge ---------- */
.wx-gauge { position: relative; width: 100%; max-width: 260px; margin: 0 auto; }
.wx-gauge-value { font-size: 2.1rem; font-weight: 700; line-height: 1; }
.wx-gauge-label { font-size: .85rem; color: var(--wx-muted); }
.wx-legend { display: flex; flex-wrap: wrap; gap: .4rem; }
.wx-legend span {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .74rem; color: var(--wx-muted);
}
.wx-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ---------- Pollutant table + ranking ---------- */
.wx-table { width: 100%; margin: 0; }
.wx-table th { font-size: .78rem; color: var(--wx-muted); font-weight: 600; }
.wx-table td, .wx-table th { padding: .55rem .6rem; border-color: var(--wx-line); }
.wx-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.wx-badge {
    display: inline-block; border-radius: 999px;
    padding: .15rem .6rem; font-size: .75rem; font-weight: 600; color: #fff;
}

/* ---------- City picker ---------- */
.wx-picker { background: var(--wx-card); border: 1px solid var(--wx-line); border-radius: 14px; padding: 12px; }
.wx-picker .form-select { border-radius: 10px; }
.wx-city-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.wx-city-links a {
    background: var(--wx-card); border: 1px solid var(--wx-line);
    border-radius: 999px; padding: .25rem .7rem;
    font-size: .82rem; color: var(--wx-ink); text-decoration: none;
}
.wx-city-links a:hover, .wx-city-links a.active { background: var(--wx-blue); border-color: var(--wx-blue); color: #fff; }

/* ---------- Status / freshness notes ---------- */
.wx-note { font-size: .78rem; color: var(--wx-muted); }
.wx-offline { background: rgba(234, 179, 8, .14); border: 1px solid rgba(234, 179, 8, .4); }

/* ---------- FAQ ---------- */
.wx-faq .accordion-button { font-weight: 600; font-size: .95rem; }

@media (max-width: 575.98px) {
    .wx-hero-temp { font-size: 2.5rem; }
    .wx-hero-icon { font-size: 2.6rem; }
}

/* ---------- Tabs (weather page) ---------- */
.wx-tabs {
    display: flex;
    gap: .3rem;
    padding: .35rem;
    margin-bottom: .9rem;
    background: var(--wx-card);
    border: 1px solid var(--wx-line);
    border-radius: 15px;
    overflow-x: auto;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
    scrollbar-width: none;
}
.wx-tabs::-webkit-scrollbar { display: none; }
.wx-tab {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem .95rem;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--wx-muted);
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.wx-tab i { font-size: 1rem; opacity: .85; }
.wx-tab:hover { color: var(--wx-blue); background: rgba(14, 165, 233, .1); }
.wx-tab:focus-visible { outline: 2px solid var(--wx-blue); outline-offset: 1px; }
.wx-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--wx-blue) 0%, var(--wx-blue-dark) 100%);
    box-shadow: 0 6px 16px rgba(14, 165, 233, .35);
}
.wx-tab.is-active i { opacity: 1; }
.wx-tabs-panels { position: relative; }
.wx-tab-panel { display: none; }
.wx-tab-panel.is-active { display: block; animation: wxPanelIn .28s ease both; }
@keyframes wxPanelIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Charts (24h + 7day) ---------- */
.wx-graph-card { padding: 1rem; }
.wx-graph-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}
.wx-graph-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; }
.wx-graph-scroll::-webkit-scrollbar { height: 6px; }
.wx-graph-scroll::-webkit-scrollbar-thumb { background: var(--wx-line); border-radius: 99px; }
.wx-graph { display: block; width: 100%; min-width: 640px; height: auto; }
.wx-graph-legend { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .55rem; }
.wx-graph-legend span { display: inline-flex; align-items: center; gap: .32rem; font-size: .75rem; color: var(--wx-muted); }
.wx-graph-legend i { width: 16px; height: 4px; border-radius: 99px; display: inline-block; }
.wx-graph-legend i.wx-bar { width: 9px; height: 12px; border-radius: 3px; }
.wx-axis-label { fill: var(--wx-muted); font-size: 11px; font-weight: 600; }
.wx-day-label { fill: var(--wx-ink); font-size: 13px; font-weight: 700; }
.wx-val-label { fill: var(--wx-ink); font-size: 12px; font-weight: 700; }
.wx-grid { stroke: var(--wx-line); stroke-width: 1; }
.wx-axis-line { stroke: var(--wx-line); stroke-width: 1.4; }
.wx-line-temp, .wx-line-min { fill: none; stroke: #0ea5e9; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wx-line-max { fill: none; stroke: #f97316; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wx-band { fill: #0ea5e9; opacity: .12; }
.wx-rain-bar { fill: #0ea5e9; opacity: .4; }
.wx-pt { fill: var(--wx-card); stroke: #0ea5e9; stroke-width: 2.5; }
.wx-pt-max { stroke: #f97316; }

/* ---------- Empty panel state ---------- */
.wx-empty {
    text-align: center;
    padding: 2.2rem 1rem;
    background: var(--wx-card);
    border: 1px dashed var(--wx-line);
    border-radius: 16px;
    color: var(--wx-muted);
}
.wx-empty i { font-size: 1.9rem; color: var(--wx-blue); opacity: .75; }
.wx-empty p { margin: .55rem 0 0; font-size: .9rem; }

/* ---------- AQI gauge (upgraded: six-band scale + progress arc) ---------- */
.wx-gauge { max-width: 330px; }
.wx-gauge-svg { display: block; width: 100%; height: auto; }
.wx-gauge-num { font-size: 36px; font-weight: 700; }
.wx-gauge-status { fill: var(--wx-muted); font-size: 13.5px; font-weight: 600; }
.wx-gauge-halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: wxHalo 2.6s ease-out infinite;
}
@keyframes wxHalo {
    0% { opacity: .5; transform: scale(.65); }
    70% { opacity: 0; transform: scale(1.35); }
    100% { opacity: 0; transform: scale(1.35); }
}
.wx-gauge-legend { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin-top: .5rem; }
.wx-gauge-legend span {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    font-size: .68rem;
    line-height: 1.6;
    padding: .16rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--wx-line);
    background: var(--wx-card);
    color: var(--wx-muted);
    white-space: nowrap;
}
.wx-gauge-legend span i { width: 8px; height: 8px; border-radius: 50%; background: var(--chip-color); }
.wx-gauge-legend span.is-active {
    background: var(--chip-color);
    border-color: var(--chip-color);
    color: #fff;
    font-weight: 700;
}
.wx-gauge-legend span.is-active i { background: rgba(255, 255, 255, .95); }
@media (prefers-reduced-motion: reduce) {
    .wx-gauge-halo { animation: none; opacity: .3; }
}

/* ---------- Cards / tiles / controls — polish ---------- */
.wx-card { transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.wx-card:hover { box-shadow: 0 12px 28px rgba(15, 23, 42, .1); }
.wx-metric { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.wx-metric:hover {
    border-color: rgba(14, 165, 233, .45);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}
.wx-hour, .wx-day { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.wx-hour:hover, .wx-day:hover {
    border-color: rgba(14, 165, 233, .45);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}
.wx-picker { box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.wx-picker .form-select:focus { border-color: var(--wx-blue); box-shadow: 0 0 0 .18rem rgba(14, 165, 233, .18); }
.wx-select-ready {
    border-color: var(--wx-blue) !important;
    box-shadow: 0 0 0 .18rem rgba(14, 165, 233, .18) !important;
}
.wx-city-links a { transition: background .2s ease, color .2s ease, border-color .2s ease; }

/* ---------- Weather responsive tweaks ---------- */
@media (max-width: 575.98px) {
    .wx-tabs { gap: .25rem; padding: .3rem; border-radius: 13px; }
    .wx-tab { flex: 0 0 auto; padding: .5rem .72rem; font-size: .82rem; border-radius: 10px; }
    .wx-tab i { font-size: .92rem; }
    .wx-graph-card { padding: .8rem; }
    .wx-graph-legend { gap: .55rem; }
    .wx-gauge { max-width: 290px; }
    .wx-gauge-num { font-size: 32px; }
    .wx-picker { padding: 10px; border-radius: 12px; }
    .wx-empty { padding: 1.6rem .9rem; }
}

/* ---------- Homepage city tabs (top, below the section heading) ---------- */
.wx-city-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
}
.wx-city-tab {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .42rem .9rem;
    border: 1px solid var(--wx-line);
    border-radius: 999px;
    background: var(--wx-card);
    color: var(--wx-muted);
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wx-city-tab i { font-size: .85rem; opacity: .8; }
.wx-city-tab:hover {
    color: var(--wx-blue);
    border-color: rgba(14, 165, 233, .5);
    transform: translateY(-1px);
}
.wx-city-tab:focus-visible { outline: 2px solid var(--wx-blue); outline-offset: 1px; }
.wx-city-tab.is-active {
    background: linear-gradient(135deg, var(--wx-blue) 0%, var(--wx-blue-dark) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px rgba(14, 165, 233, .32);
}
.wx-city-tab.is-active i { opacity: 1; }
.wx-city-panels { position: relative; }
.wx-city-panel { display: none; }
.wx-city-panel.is-active { display: block; animation: wxPanelIn .26s ease both; }
@media (prefers-reduced-motion: reduce) {
    .wx-city-panel.is-active { animation: none; }
    .wx-city-tab:hover { transform: none; }
}
@media (max-width: 575.98px) {
    .wx-city-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .25rem;
        scrollbar-width: none;
    }
    .wx-city-tabs::-webkit-scrollbar { display: none; }
    .wx-city-tab { flex: 0 0 auto; padding: .38rem .78rem; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .wx-tab-panel.is-active { animation: none; }
}

/* ============================================================
   WEATHER/AQI PAGE REBUILD (tv9-style) — scoped .wxf- / .wxa-
   Added for /weather-forecast and /aqi layouts. The homepage
   widget styles above are untouched.
   ============================================================ */
.wxf-h1 { font-size: 1.35rem; font-weight: 800; margin: 0 0 .9rem; color: var(--wx-ink); }

/* ---------- Dual tab bar + search ---------- */
.wxf-tabrow {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: .6rem; position: relative; z-index: 3;
}
.wxf-tabs { display: flex; gap: .35rem; }
.wxf-tab {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .72rem 1.7rem; font-weight: 700; font-size: .98rem;
    color: #fff; background: #0f172a; text-decoration: none;
    border: 1px solid #0f172a; border-bottom: none;
    border-radius: 14px 14px 0 0;
    transition: background .18s ease, color .18s ease;
}
.wxf-tab i { font-size: 1.02rem; }
.wxf-tab:hover { background: #1e293b; color: #fff; }
.wxf-tab.is-active { background: var(--wx-card); color: #0f172a; border-color: var(--wx-line); }
.wxf-tab.is-active:hover { background: var(--wx-card); color: #0f172a; }
.wxf-search {
    position: relative; display: flex; align-items: center;
    background: var(--wx-card); border: 1px solid var(--wx-line);
    border-radius: 999px; padding: .1rem .9rem; min-width: 250px;
    margin-bottom: .35rem; box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}
.wxf-search i { color: var(--wx-muted); font-size: .9rem; }
.wxf-search input,
.wxf-search select {
    border: none; outline: none; background: transparent;
    padding: .55rem .5rem; width: 100%; font-size: .9rem; color: var(--wx-ink);
}
.wxf-search select { cursor: pointer; font-weight: 600; }
@media (max-width: 575.98px) {
    .wxf-tab { padding: .6rem 1.1rem; font-size: .9rem; }
    .wxf-search { min-width: 0; width: 100%; }
    .wxf-tabrow { flex-direction: column; align-items: stretch; }
}

/* ---------- Weather hero (sky) ---------- */
.wxf-hero {
    background: linear-gradient(180deg, #7cc4f5 0%, #a5d8f8 45%, #cfeafc 100%);
    border-radius: 0 18px 18px 18px;
    padding: 1.4rem 1.5rem 1rem; color: #0b3350; overflow: hidden; position: relative;
}
.wxf-hero::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 74px;
    background:
        radial-gradient(46px 26px at 8% 100%, rgba(255,255,255,.9) 50%, transparent 55%),
        radial-gradient(70px 34px at 24% 100%, rgba(255,255,255,.85) 50%, transparent 55%),
        radial-gradient(52px 26px at 47% 100%, rgba(255,255,255,.9) 50%, transparent 55%),
        radial-gradient(80px 36px at 72% 100%, rgba(255,255,255,.85) 50%, transparent 55%),
        radial-gradient(56px 28px at 95% 100%, rgba(255,255,255,.9) 50%, transparent 55%);
    pointer-events: none;
}
.wxf-hero-main {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.4fr auto 1fr; gap: 1rem; align-items: center;
}
.wxf-hero-city { font-size: 1.25rem; font-weight: 800; }
.wxf-hero-sub { font-size: .82rem; opacity: .75; margin-bottom: .5rem; }
.wxf-hero-row { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.wxf-hero-tempbox { text-align: center; }
.wxf-hero-temp { display: flex; align-items: baseline; justify-content: center; gap: .3rem; font-weight: 800; }
.wxf-hero-temp i { font-size: 2rem; color: #f59e0b; align-self: center; }
.wxf-hero-deg { font-size: 3rem; line-height: 1; }
.wxf-hero-temp sup { font-size: 1.1rem; font-weight: 700; }
.wxf-hero-pill {
    display: inline-block; color: #fff; font-size: .78rem; font-weight: 700;
    padding: .22rem 1.3rem; border-radius: 999px; margin-top: .35rem;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
}
.wxf-hero-cond {
    display: flex; flex-direction: column; gap: .18rem; font-size: .92rem;
    border-left: 2px solid rgba(11, 51, 80, .25); padding-left: .9rem;
}
.wxf-hero-cond strong { font-size: 1.02rem; }
.wxf-hero-cond i { opacity: .7; }
.wxf-hero-mascot { font-size: 4.4rem; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.15)); }



.wxf-hero-foot {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center;
    margin-top: .9rem; font-size: .78rem; color: rgba(11, 51, 80, .8);
}
.wxf-powered { letter-spacing: .04em; font-size: .7rem; opacity: .75; }
.wxf-powered b { color: #0b3350; }
.wxf-aqicard {
    background: #fff; border: 2px solid #ef4444; border-radius: 16px;
    overflow: hidden; box-shadow: 0 10px 26px rgba(239, 68, 68, .22);
}
.wxf-aqicard-head {
    display: flex; align-items: center; justify-content: space-between;
    background: #ef4444; color: #fff; font-weight: 700; font-size: .88rem;
    padding: .5rem .9rem;
}
.wxf-aqicard-head i { font-size: 1.1rem; opacity: .9; }
.wxf-aqicard-body { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem .6rem; }
.wxf-aqicard-num { font-size: 2rem; font-weight: 800; color: #0f172a; line-height: 1; }
.wxf-aqicard-num small { display: block; font-size: .72rem; font-weight: 700; color: var(--wx-muted); letter-spacing: .08em; }
.wxf-aqicard-pm { border-left: 1px solid var(--wx-line); padding-left: 1rem; font-size: .85rem; color: var(--wx-muted); line-height: 1.7; }
.wxf-aqicard-status {
    margin: 0 .8rem .8rem; background: #fef2f2; border: 1px solid #fecaca;
    color: #b91c1c; font-size: .78rem; font-weight: 600; text-align: center;
    border-radius: 8px; padding: .4rem .5rem;
}
@media (max-width: 991.98px) {
    .wxf-hero-main { grid-template-columns: 1fr; text-align: center; }
    .wxf-hero-cond { border-left: none; border-top: 2px solid rgba(11,51,80,.2); padding: .6rem 0 0; }
    .wxf-hero-row { justify-content: center; }
    .wxf-hero-mascot { order: -1; }
}

/* ---------- Sections / panels ---------- */
.wxf-sec { margin-top: 1.9rem; }
.wxf-sec-head { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: space-between; }
.wxf-sec-title { font-size: 1.18rem; font-weight: 800; text-align: center; margin: 0 0 1rem; color: var(--wx-ink); }
.wxf-sec-title i { color: var(--wx-blue); }
.wxf-sec-title--left { text-align: left; margin-bottom: 0; }
.wxf-sec-title--sm { font-size: 1.02rem; }
.wxf-panel {
    background: var(--wx-card); border: 1px solid var(--wx-line);
    border-radius: 18px; padding: 1.1rem; box-shadow: var(--wx-shadow);
}

/* ---------- Popular city cards ---------- */
.wxf-city {
    display: block; position: relative; text-decoration: none;
    background: linear-gradient(160deg, #f4faff 0%, #e8f4ff 100%);
    border: 1px solid #d9ecfb; border-radius: 14px;
    padding: .95rem .8rem .85rem; text-align: center; height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wxf-city:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(14, 165, 233, .18); border-color: #a9d8f5; color: inherit; }
.wxf-city-go { position: absolute; top: .45rem; right: .5rem; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; border: 1px solid #d9ecfb; display: grid; place-items: center; font-size: .7rem; color: var(--wx-blue); }
.wxf-city-name { font-weight: 700; font-size: .92rem; color: var(--wx-ink); }
.wxf-city-temp { font-size: 1.65rem; font-weight: 800; color: var(--wx-blue-dark); margin: .15rem 0 .45rem; }
.wxf-city-meta { font-size: .76rem; color: var(--wx-muted); display: flex; align-items: center; justify-content: center; gap: .3rem; }
.wxf-city-meta i { color: var(--wx-blue); }


/* ---------- Segmented toggle (सबसे गर्म / सबसे ठंडा) ---------- */
.wxf-seg {
    display: inline-flex; background: var(--wx-card); border: 1px solid var(--wx-line);
    border-radius: 999px; padding: .22rem; gap: .2rem; box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
.wxf-seg-btn {
    border: none; background: transparent; color: var(--wx-muted);
    font-size: .82rem; font-weight: 700; padding: .38rem 1rem; border-radius: 999px;
    cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.wxf-seg-btn:hover { color: var(--wx-blue); }
.wxf-seg-btn.is-active {
    background: linear-gradient(135deg, var(--wx-blue) 0%, var(--wx-blue-dark) 100%);
    color: #fff; box-shadow: 0 4px 10px rgba(14, 165, 233, .32);
}

/* ---------- Ranking tables ---------- */
.wxf-rank { display: none; }
.wxf-rank.is-active { display: block; animation: wxPanelIn .24s ease both; }
.wxf-panel--table { padding: .5rem .8rem .8rem; }
.wxf-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.wxf-table thead th {
    background: #f1f6fb; color: var(--wx-muted); font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; text-align: center;
    padding: .7rem .6rem; border-bottom: 1px solid var(--wx-line);
}
.wxf-table thead th:first-child { border-radius: 10px 0 0 0; }
.wxf-table thead th:last-child { border-radius: 0 10px 0 0; }
.wxf-table tbody td { padding: .62rem .6rem; text-align: center; border-bottom: 1px solid var(--wx-line); vertical-align: middle; }
.wxf-table tbody tr:last-child td { border-bottom: none; }
.wxf-table tbody tr:hover { background: rgba(14, 165, 233, .05); }
.wxf-table td a { color: var(--wx-ink); font-weight: 700; text-decoration: none; }
.wxf-table td a:hover { color: var(--wx-blue); }
.wxf-rank-no { font-weight: 800; color: var(--wx-muted); width: 3.2rem; }
.wxf-tpill {
    display: inline-block; color: #fff; font-size: .8rem; font-weight: 700;
    padding: .2rem .7rem; border-radius: 999px; min-width: 4rem;
}
.wxf-cond { color: var(--wx-muted); font-size: .84rem; }
.wxf-cond i { color: var(--wx-blue); }
.wxf-aqi-cell { font-weight: 800; font-size: .98rem; }
.wxf-table--aqi thead th:nth-child(2),
.wxf-table--aqi tbody td:nth-child(2) { text-align: left; }
.wxf-upd { font-size: .74rem; color: var(--wx-muted); text-align: right; padding: .55rem .2rem 0; }

/* ---------- Related news ---------- */
.wxf-news {
    display: block; text-decoration: none; background: var(--wx-card);
    border: 1px solid var(--wx-line); border-radius: 14px; overflow: hidden;
    height: 100%; transition: transform .18s ease, box-shadow .18s ease;
}
.wxf-news:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(15,23,42,.12); color: inherit; }
.wxf-news-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #e2e8f0; }
.wxf-news-title {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    padding: .65rem .75rem .8rem; font-size: .88rem; font-weight: 700; line-height: 1.45; color: var(--wx-ink);
}
.wxf-loadmore {
    border: 1px solid var(--wx-line); background: var(--wx-card); color: var(--wx-ink);
    font-weight: 700; font-size: .86rem; padding: .5rem 1.5rem; border-radius: 999px; cursor: pointer;
    transition: border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.wxf-loadmore:hover { border-color: var(--wx-blue); color: var(--wx-blue); box-shadow: 0 6px 14px rgba(14,165,233,.18); }

/* ---------- FAQ ---------- */
.wxf-faq .accordion-item { border: 1px solid var(--wx-line); border-radius: 14px !important; overflow: hidden; margin-bottom: .6rem; }
.wxf-faq .accordion-button { font-weight: 700; font-size: .95rem; color: var(--wx-ink); background: var(--wx-card); padding: .95rem 1.1rem; }
.wxf-faq .accordion-button:not(.collapsed) { background: var(--wx-card); color: var(--wx-blue-dark); box-shadow: none; }
.wxf-faq .accordion-body { font-size: .9rem; color: var(--wx-muted); background: var(--wx-card); padding: .9rem 1.1rem 1.1rem; }
.wxf-faq-no { color: var(--wx-blue); font-weight: 800; margin-right: .45rem; }


/* ============================================================
   AQI PAGE (wxa-) — gauge hero, city cards, scale band
   ============================================================ */
.wxa-sec-band { background: #f2f7fb; border-radius: 20px; padding: 1.4rem 1.1rem; }

.wxa-hero {
    position: relative; background: linear-gradient(180deg, #f6fbff 0%, #eaf5fd 100%);
    border: 1px solid #dcecf8; border-radius: 0 18px 18px 18px;
    padding: 1.2rem 1.5rem 1rem; color: #0b3350; overflow: hidden;
}
.wxa-hero::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 60px;
    background:
        radial-gradient(44px 24px at 10% 100%, rgba(255,255,255,.95) 50%, transparent 55%),
        radial-gradient(66px 32px at 30% 100%, rgba(255,255,255,.9) 50%, transparent 55%),
        radial-gradient(50px 26px at 55% 100%, rgba(255,255,255,.95) 50%, transparent 55%),
        radial-gradient(76px 34px at 80% 100%, rgba(255,255,255,.9) 50%, transparent 55%);
    pointer-events: none;
}
.wxa-legend { position: relative; z-index: 1; max-width: 560px; margin-left: auto; font-size: .66rem; }
.wxa-legend-labels { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: .25rem; }
.wxa-legend-bar {
    height: 8px; border-radius: 999px;
    background: linear-gradient(90deg, #16a34a 0%, #84cc16 20%, #eab308 40%, #f97316 60%, #dc2626 78%, #7c3aed 100%);
}
.wxa-legend-nums { display: flex; justify-content: space-between; margin-top: .2rem; color: var(--wx-muted); font-weight: 700; }
.wxa-hero-main {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.4rem; align-items: center;
    margin-top: .6rem;
}
.wxa-gaugebox { text-align: center; }
.wxa-gauge-city { font-size: 1.5rem; font-weight: 800; margin-bottom: .2rem; }
.wxa-gauge { position: relative; max-width: 300px; margin: 0 auto; }
.wxa-gauge svg { display: block; width: 100%; height: auto; }
.wxa-gauge-center {
    position: absolute; left: 0; right: 0; bottom: 4px;
    display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.wxa-gauge-num { font-size: 3rem; font-weight: 800; color: #0f172a; }
.wxa-gauge-unit { font-size: .95rem; font-weight: 700; color: var(--wx-muted); letter-spacing: .06em; margin-top: .1rem; }
.wxa-gauge-range { font-size: .92rem; font-weight: 700; color: var(--wx-ink); margin-top: .1rem; }
.wxa-side-label { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin-bottom: .5rem; }
.wxa-status {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 800; font-size: 1rem; border: 1px solid;
    border-radius: 12px; padding: .5rem 1.1rem; margin-bottom: .9rem;
}
.wxa-pm { display: flex; gap: .8rem; flex-wrap: wrap; }
.wxa-pm-card {
    background: #fff; border: 1px solid #dcecf8; border-radius: 12px;
    min-width: 128px; text-align: center; overflow: hidden;
    box-shadow: 0 6px 16px rgba(14, 165, 233, .1);
}
.wxa-pm-head { background: #e8f4fe; color: var(--wx-blue-dark); font-weight: 800; font-size: .82rem; padding: .4rem; }
.wxa-pm-val { font-size: 1.85rem; font-weight: 800; color: #0f172a; padding: .5rem .8rem .65rem; }
.wxa-advice { font-size: .8rem; color: var(--wx-muted); margin-top: .9rem; line-height: 1.55; max-width: 430px; }
.wxa-advice i { color: var(--wx-blue); }
.wxa-hero-foot {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center;
    margin-top: .9rem; font-size: .76rem; color: rgba(11, 51, 80, .8);
}
.wxa-upd i { opacity: .7; }
@media (max-width: 767.98px) {
    .wxa-hero-main { grid-template-columns: 1fr; }
    .wxa-legend { max-width: 100%; }
    .wxa-gauge-num { font-size: 2.5rem; }
    .wxa-side { text-align: center; }
    .wxa-advice { margin-inline: auto; }
}

/* ---------- Popular AQI city cards ---------- */
.wxa-city {
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    text-decoration: none; background: var(--wx-card); border: 1px solid var(--wx-line);
    border-radius: 14px; padding: 1rem .6rem .9rem; height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wxa-city:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(15,23,42,.12); border-color: rgba(14,165,233,.45); color: inherit; }
.wxa-city-ic {
    width: 58px; height: 58px; border-radius: 50%;
    background: #e8f4fe; color: var(--wx-blue-dark);
    display: grid; place-items: center; font-size: 1.55rem;
}
.wxa-city-name { font-weight: 700; font-size: .9rem; color: var(--wx-ink); text-align: center; }
.wxa-city-val { font-size: .76rem; font-weight: 700; }

/* ---------- Scale band mini gauges ---------- */
.wxa-scale {
    background: var(--wx-card); border: 1px solid var(--wx-line); border-radius: 14px;
    padding: .8rem .6rem .7rem; text-align: center; height: 100%;
    box-shadow: var(--wx-shadow);
}
.wxa-scale-gauge { position: relative; max-width: 140px; margin: 0 auto; }
.wxa-scale-gauge svg { display: block; width: 100%; height: auto; }
.wxa-scale-center { position: absolute; left: 0; right: 0; bottom: 2px; line-height: 1.15; }
.wxa-scale-center b { display: block; font-size: .95rem; color: var(--wx-ink); }
.wxa-scale-center small { font-size: .66rem; color: var(--wx-muted); font-weight: 700; }
.wxa-scale-name {
    display: inline-block; font-weight: 800; font-size: .82rem;
    border-bottom: 3px solid; padding-bottom: .1rem; margin-top: .35rem;
}

@media (prefers-reduced-motion: reduce) {
    .wxf-city:hover, .wxf-news:hover, .wxa-city:hover, .wxf-loadmore:hover { transform: none; }
    .wxf-rank.is-active { animation: none; }
}