/* ============================================================
   Scrollcamper — public/css/mobile.css
   ------------------------------------------------------------
   Correzioni bloccanti mobile. File ADDITIVO: non tocca
   style.css né css/archivio.css.
   Caricato per ULTIMO in layouts/default.php, quindi vince a
   parità di specificità senza bisogno di !important.

   1. Filtri archivio in pannello          -> archivio_view
   2. Barra azioni sticky                  -> camper_dettaglio

   Il menu mobile NON e' qui: sta in public/style.css, perche'
   l'header e' su ogni pagina e non deve dipendere da questo
   foglio secondario.

   Fuori dalle media query ci sono solo le classi nuove, che
   partono da display:none. Il desktop resta identico.

   Colori migrati ai token di brand (revisione v3): #fff, #333,
   #555, #6d7779, #ddd, #d8d8d8, #f2f2f2 sostituiti dai --sc-*
   dichiarati in style.css. Unica eccezione voluta: il #000 delle
   mask-image, dove non e' un colore ma il valore "opaco" del
   canale alfa.
   ============================================================ */

:root {
    /* Agganciate ai token di brand definiti in style.css. */
    --mb-teal: var(--sc-teal);
    --mb-orange: var(--sc-senape);
    --mb-dark: var(--sc-notte);
    --mb-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
    --mb-ease: cubic-bezier(.32, .72, 0, 1);
    --mb-bar-h: 72px;
}

/* Elementi nuovi: invisibili finché non si entra nel range mobile */
.sheet-handle,
.sheet-close,
.mobile-filterbar,
.pd-actionbar {
    display: none;
}

/* .mb-backdrop e body.mb-locked sono definiti in style.css insieme al
   menu: li usa anche il pannello filtri qui sotto. */

/* Focus da tastiera: mancava su tutti i controlli custom */
.sheet-close:focus-visible,
.mobile-filterbar-btn:focus-visible,
.pd-actionbar-cta:focus-visible {
    outline: 3px solid var(--mb-teal);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .mb-backdrop,
    .filters-sidebar,
    .pd-actionbar {
        transition: none !important;
    }
}

/* ============================================================
   1. ARCHIVIO — filtri in pannello  (< 992px)
   Prima la sidebar diventava statica e finiva SOPRA i risultati.
   ============================================================ */

@media (max-width: 992px) {

    .mobile-filterbar {
        position: sticky;
        /* Sotto l'header sticky. z-index inferiore al suo (1000). */
        top: var(--sc-header-h);
        z-index: 900;
        display: flex;
        gap: 10px;
        align-items: center;
        margin: 0 0 16px;
        padding: 10px 0;
        /* Deve coincidere col fondo pagina: e' sticky, e quando scorre
           ci passano sotto le schede. */
        background: var(--sc-bianco);
        box-shadow: 0 1px 0 rgba(22, 42, 48, 0.1);
    }

    .mobile-filterbar-btn {
        display: inline-flex;
        gap: 8px;
        align-items: center;
        height: 44px;
        padding: 0 18px;
        border: 2px solid var(--mb-teal);
        border-radius: 24px;
        background: var(--sc-bianco);
        color: var(--mb-teal);
        font-size: 15px;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }

    .mobile-filterbar-btn svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
    }

    .mobile-filterbar-count {
        display: none;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 11px;
        background: var(--mb-orange);
        color: var(--sc-bianco);
        font-size: 12px;
        line-height: 22px;
        text-align: center;
    }

    .mobile-filterbar-count.is-active {
        display: inline-block;
    }

    .mobile-filterbar select {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        height: 44px;
        padding: 0 16px;
        border: 1px solid var(--sc-filo);
        border-radius: 24px;
        background: var(--sc-bianco);
        color: var(--sc-notte);
        font-size: 16px;
    }

    /* La sidebar diventa pannello che sale dal basso */
    .archive-container .filters-sidebar {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10001;
        max-height: 85vh;
        padding: 0 20px;

        /* Colonna: intestazione ferma, corpo che scorre, pulsante fermo
           in fondo. Lo scorrimento e' passato a .filters-body, quindi qui
           overflow e' hidden: se restasse auto, scorrerebbero due
           contenitori annidati e il pulsante tornerebbe a scappare. */
        display: flex;
        flex-direction: column;
        overflow: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px 16px 0 0;
        box-shadow: var(--mb-shadow);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .32s var(--mb-ease), visibility .32s;
    }

    .archive-container .filters-sidebar.is-open {
        transform: translateY(0);
        visibility: visible;
    }

    /* La form eredita la colonna, altrimenti il corpo non saprebbe
       quanta altezza puo' occupare. min-height:0 e' indispensabile: senza,
       un figlio flex non scende sotto la propria altezza naturale e
       l'overflow non scatta mai. E' la riga che di solito manca. */
    .archive-container .filters-sidebar form {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .archive-container .filters-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .sheet-handle {
        flex: 0 0 auto;
        z-index: 2;
        display: block;
        padding: 12px 0 6px;
        background: var(--sc-bianco);
    }

    .sheet-handle::before {
        content: "";
        display: block;
        width: 44px;
        height: 5px;
        margin: 0 auto;
        border-radius: 3px;
        background: var(--sc-filo);
    }

    /* Non piu' sticky: e' un elemento fermo della colonna, sopra il
       corpo che scorre. */
    .archive-container .filters-header {
        flex: 0 0 auto;
        z-index: 2;
        gap: 12px;
        padding-top: 6px;
        background: var(--sc-bianco);
    }

    .sheet-close {
        display: flex;
        flex: 0 0 36px;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        background: var(--sc-sabbia);
        color: var(--sc-testo-tenue);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

    /* "Applica filtri" e' il piede della colonna: non scorre perche' sta
       fuori da .filters-body, non perche' sia posizionato.

       Sono state provate e scartate due strade, entrambe sembrano giuste
       e non funzionano:
       - position:sticky: un elemento sticky si muove dentro il box del
         proprio genitore, e il pulsante e' l'ultimo figlio della form.
         Sotto di lui non c'e' spazio, quindi l'intervallo e' lungo zero.
       - position:fixed: il pannello ha una transform, e una transform su
         un antenato toglie a fixed l'ancoraggio alla finestra. Il
         pulsante finiva in fondo al contenuto scorrevole, invisibile.
       La struttura risolve quello che il posizionamento non poteva.

       E IL COLPEVOLE VERO ERA UN ALTRO. Questa regola conteneva
       "background: var(--sc-bianco)". Era pensato per una barra dietro
       il pulsante, ma l'elemento E' il pulsante: diventava bianco, con
       il testo bianco sopra. Invisibile, non fuori schermo.
       Qui NON si tocca piu' ne' il colore ne' la forma: il pulsante li
       prende da archivio.css, dov'e' giusto che stiano. Restano solo
       due cose, il non-scorrere (flex-shrink 0) e lo spazio dalla barra
       di sistema di iPhone. */
    .archive-container .filters-apply {
        flex: 0 0 auto;
        margin: 14px 0 calc(14px + env(safe-area-inset-bottom));
    }

    /* 16px: sotto questa soglia iOS Safari zooma al focus */
    .archive-container .filters-sidebar select,
    .archive-container .filters-sidebar input[type="number"],
    .archive-container .filters-sidebar input[type="text"] {
        height: 44px;
        font-size: 16px;
    }

    /* Sotto i 992px l'ordinamento vive nella barra sticky: quello nella
       riga dei filtri attivi sarebbe un doppione.
       NB il selettore era .results-header .results-sort: l'ordinamento
       si e' spostato in .filtri-riga, quindi la regola non agganciava
       piu' niente. */
    .filtri-riga .results-sort {
        display: none;
    }

    .results-header {
        margin-bottom: 4px;
    }

    /* Target touch dei preset e sfumatura che segnala lo scroll orizzontale */
    .preset-tag {
        min-height: 40px;
    }

    .quick-presets {
        /* Qui #000 NON e' un colore: in una maschera conta solo il canale
           alfa, e nero pieno significa "opaco". Va lasciato hardcoded,
           tokenizzarlo lo rende incomprensibile a chi legge dopo. */
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
        mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    }
}

/* ============================================================
   2. PRODOTTO — barra azioni sticky  (< 1100px)
   Sotto i 1100px .pd-purchase-panel esce dalla colonna sticky.
   ============================================================ */

@media (max-width: 1100px) {

    body.has-actionbar {
        padding-bottom: calc(var(--mb-bar-h) + env(safe-area-inset-bottom));
    }

    .pd-actionbar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 900;
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: var(--sc-bianco);
        box-shadow: var(--mb-shadow);
        transform: translateY(110%);
        transition: transform .3s var(--mb-ease);
    }

    .pd-actionbar.is-visible {
        transform: translateY(0);
    }

    .pd-actionbar-price {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .pd-actionbar-amount {
        color: var(--mb-dark);
        font-size: 19px;
        font-weight: 700;
        line-height: 1.1;
        white-space: nowrap;
    }

    /* Era un link "Vedi costi totali": il totale stimato non esiste piu',
       ora e' solo una riga di contesto sotto il prezzo. */
    .pd-actionbar-hint {
        color: var(--sc-testo-tenue);
        font-size: 12px;
    }

    .pd-actionbar-cta {
        display: flex;
        flex: 1 1 auto;
        gap: 8px;
        align-items: center;
        justify-content: center;
        height: 48px;
        padding: 0 14px;
        border-radius: 24px;
        background: var(--mb-teal);
        color: var(--sc-bianco);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }

    /* Il marchio WhatsApp resta verde su bianco anche qui: e' il
       riferimento visivo che rende ovvio dove porta il pulsante. */
    .pd-actionbar-cta .icona-whatsapp {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 380px) {
    .pd-actionbar-cta {
        padding: 0 10px;
        font-size: 14px;
    }
}

/* ============================================================
   3. CEROTTO — colore del pulsante "Applica filtri"
   Aggiunto il 2 settembre 2026.

   Il pulsante compariva bianco su bianco: illeggibile. La causa
   era una regola qui sopra che gli imponeva
   "background: var(--sc-bianco)", pensata per una barra dietro il
   pulsante ma applicata al pulsante stesso. Quella riga e' stata
   tolta, e il colore dovrebbe tornare da .filters-apply in
   css/archivio.css, che lo dichiara senape.

   Questa regola sta qui perche' in produzione il bianco e'
   ricomparso comunque. Due id valgono (2,0,0) e vincono su
   qualunque selettore di sole classi, indipendentemente
   dall'ordine dei fogli.

   E' UN CEROTTO, non la correzione. Copre il sintomo senza dire
   quale foglio stia ancora sbiancando il pulsante, e quel foglio
   continuera' a farlo altrove. Va tolta quando la causa e' stata
   trovata: se togliendola il pulsante resta arancione, il
   problema era davvero solo la regola qui sopra.

   Fuori da ogni media query di proposito: il colore del pulsante
   non dipende dalla larghezza dello schermo.
   ============================================================ */

#filters-sidebar #apply-filters-btn {
    background: var(--sc-senape);
    color: var(--sc-bianco);
}