/*
 * meteo styles — estratto 1:1 da meteo.php. Fase 6.
 */
    /* ─── VIDEO BG ─── */
    .video-bg-wrap {
        position: fixed; inset: 0; z-index: 0; overflow: hidden;
        pointer-events: none; background: #000;
    }
    .video-bg-wrap iframe {
        width: 100vw; height: 56.25vw;
        min-height: 100vh; min-width: 177.77vh;
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%) scale(1.2);
        pointer-events: none;
    }
    .meteo-overlay {
        position: fixed; inset: 0; z-index: 1;
        background: linear-gradient(135deg, rgba(9,14,28,0.96) 0%, rgba(9,14,28,0.72) 100%);
        pointer-events: none;
    }

    /* ─── LAYOUT ─── */
    html:has(body.is-meteo-page),
    body.is-meteo-page {
        height: 100%;
        overflow: hidden !important;
    }
    body.is-meteo-page.has-bon-navigation {
        padding-bottom: 0 !important;
    }
    .meteo-page {
        position: relative; z-index: 2;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .meteo-inner {
        max-width: 1180px; width: 100%;
        max-height: 100%;
        margin: 0 auto; padding: 2rem 1.25rem calc(var(--bon-nav-bottom-h, 112px) + 2rem);
        display: flex; flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .meteo-header {
        text-align: center;
        width: 100%;
        margin-bottom: 1rem;
    }
    .meteo-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
        gap: 1.5rem;
        align-items: center;
        width: 100%;
    }
    @media (max-width: 900px) {
        .meteo-grid { grid-template-columns: 1fr; }
    }

    /* ─── GLASS CARD ─── */
    .glass-card {
        background: rgba(22, 32, 54, 0.55);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255,255,255,0.09);
        box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5);
    }

    /* ─── DAILY CARD ─── */
    .meteo-day-card {
        width: 100%;
        border-radius: 1.75rem;
        overflow: hidden;
    }
    .meteo-day-card__head {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: center;
        padding: 1.35rem 1.45rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .meteo-period-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        padding: 1rem;
    }
    .meteo-period-card {
        min-height: 280px;
        border-radius: 1.25rem;
        background: rgba(2, 6, 18, 0.36);
        border: 1px solid rgba(255,255,255,0.09);
        padding: 1rem;
    }
    body.is-meteo-page .meteo-day-card.bon-unified-card,
    body.is-meteo-page .meteo-period-card.bon-unified-card {
        background: rgba(255,255,255,0.98) !important;
        color: #0f172a !important;
        border-color: rgba(148,163,184,0.28) !important;
        box-shadow: 0 24px 70px rgba(15,23,42,0.16) !important;
    }
    body.is-meteo-page .meteo-day-card .text-white,
    body.is-meteo-page .meteo-period-card .text-white {
        color: #0f172a !important;
    }
    body.is-meteo-page .meteo-day-card .text-blue-200,
    body.is-meteo-page .meteo-period-card .text-blue-200 {
        color: #2563eb !important;
    }
    body.is-meteo-page .meteo-day-card .text-slate-300,
    body.is-meteo-page .meteo-period-card .text-slate-300 {
        color: #334155 !important;
    }
    body.is-meteo-page .meteo-day-card .text-slate-400,
    body.is-meteo-page .meteo-period-card .text-slate-400 {
        color: #64748b !important;
    }
    body.is-meteo-page .meteo-day-card .text-cyan-300,
    body.is-meteo-page .meteo-period-card .text-cyan-300 {
        color: #0891b2 !important;
    }
    body.is-meteo-page .meteo-day-card [class*="border-white"],
    body.is-meteo-page .meteo-period-card [class*="border-white"] {
        border-color: rgba(148,163,184,0.24) !important;
    }
    body.is-meteo-page .meteo-period-card .bg-white\/5 {
        background: #f8fafc !important;
        box-shadow: inset 0 0 0 1px rgba(148,163,184,0.16) !important;
    }
    .area-chip-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.65rem;
        width: 100%;
        max-width: 100%;
    }
    .area-chip {
        max-width: 100%;
        min-height: 42px;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }
    @media (max-width: 640px) {
        .meteo-inner { padding-inline: 0.75rem; }
        .meteo-period-grid { grid-template-columns: 1fr; }
        .meteo-day-card__head { align-items: flex-start; flex-direction: column; }
    }

    /* ─── LIVE DOT ─── */
    @keyframes pulse-ring {
        0%   { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(59,130,246,0.7); }
        70%  { transform: scale(1);   box-shadow: 0 0 0 10px rgba(59,130,246,0); }
        100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(59,130,246,0); }
    }
    .live-dot { animation: pulse-ring 2s infinite; }

    /* ─── MINI MAP CONTAINER (critical: isolation) ─── */
    .mini-map-wrap {
        position: relative;
        height: 260px;
        border-radius: 1rem;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.1);
        isolation: isolate;         /* create new stacking context */
        z-index: 0;
    }
    #meteo-mini-map {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
    }
    /* Override maplibre canvas z-index to make it visible */
    #meteo-mini-map .maplibregl-canvas-container,
    #meteo-mini-map canvas { z-index: 1 !important; }
    #meteo-mini-map .maplibregl-map { z-index: 1 !important; }

    #mini-map-loading {
        position: absolute; inset: 0; z-index: 5;
        display: flex; align-items: center; justify-content: center;
        background: rgba(9,14,28,0.85);
        border-radius: 1rem;
    }

    /* Maplibre marker needs pointer-events */
    .zone-label-marker { pointer-events: all !important; }