@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   elm-barra-preventivo.css  (12/10/2026, richiesta di Andrea)
   Barra fissa in basso su telefono e tablet (<992px):
     - a destra il bottone "Preventivo Vacanza", sempre raggiungibile,
       stesso colore e stessa icona del bottone dell'header desktop;
     - a sinistra, SOLO nelle pagine dei comuni, il bottone "Sezioni"
       che apre dal basso il pannello con le sezioni della pagina
       (stesse voci del riquadro "In questa pagina" della colonna laterale).
   La barra la costruisce App_Script/elm-barra-preventivo.js.
   Compare dopo la prima schermata (hero) e sparisce quando arriva il
   footer, col menu mobile aperto, col banner cookie e mentre si scrive
   in un campo (la tastiera la porterebbe sopra il campo).
   NON c'e' nelle pagine che hanno gia' una loro barra in basso: schede
   attivita' (.elm-mbar), landing promo, liste con Filtri / Lista-Mappa
   (da valutare dopo, decisione di Andrea), pagina del preventivo,
   landing B2B e Portoferraio (pagina congelata).
   Stessa resa delle pillole galleggianti delle liste (#filterbar .fb-right):
   stessa distanza dal fondo, stessa ombra, stesso livello (z-index 790).
   Classi senza prefisso .elm-: le regole .elm-* stanno solo in
   elm-mobile-nav.css (isolamento dell'header mobile).
   ═══════════════════════════════════════════════════════════════ */

/* Sopra i 992px non esiste: c'e' il bottone nell'header desktop */
.barra-prev,
.pannello-sez,
.pannello-sez-fondo { display: none; }

@media (max-width: 991.98px) {

    /* ── Contenitore: occupa la larghezza ma non blocca i tocchi sulla pagina ── */
    .barra-prev {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 790;
        display: flex;
        justify-content: space-between;   /* Sezioni a sinistra, preventivo a destra */
        align-items: center;
        gap: 8px;
        padding: 0 .8rem;
        pointer-events: none;
        /* nascosta: scesa sotto il bordo dello schermo */
        transform: translateY(calc(100% + 24px));
        opacity: 0;
        visibility: hidden;
        transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease, visibility 0s linear .35s;
    }
    .barra-prev.is-visibile {
        transform: none;
        opacity: 1;
        visibility: visible;
        transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease, visibility 0s;
    }

    /* ── Pillola (base comune ai due bottoni) ──
       Reset espliciti: il tema GoodLayers da' stile ai <button> (sfondo,
       maiuscolo, padding) e ai link (colore, hover). */
    .barra-prev .barra-prev-btn {
        pointer-events: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;            /* area di tocco minima */
        margin: 0;
        padding: 0 18px;
        border-radius: 999px;
        font-family: var(--font-body, 'Jost', sans-serif);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .01em;
        text-transform: none;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        box-shadow: 0 6px 20px rgba(24,20,15,.18), 0 1px 3px rgba(24,20,15,.10);
        transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
    }
    .barra-prev .barra-prev-btn:active { transform: translateY(1px); }
    .barra-prev .barra-prev-btn:focus-visible { outline: 2px solid var(--dark, #1a1a2e); outline-offset: 3px; }
    .barra-prev .barra-prev-btn i { line-height: 1; display: inline-flex; flex-shrink: 0; }

    /* Sezioni: pillola bianca come "Filtri" delle liste */
    .barra-prev .barra-prev-sez {
        background: #fff;
        color: var(--dark, #1a1a2e);
        border: 1px solid #e5e0d6;
    }
    .barra-prev .barra-prev-sez i { font-size: 1rem; }

    /* Preventivo: stesso colore del bottone dell'header (.btn-inside-red) */
    .barra-prev .barra-prev-cta {
        margin-left: auto;           /* resta a destra anche quando e' da solo */
        background: #C4501D;
        color: #fff;
        border: 1px solid #C4501D;
    }
    .barra-prev .barra-prev-cta:hover,
    .barra-prev .barra-prev-cta:focus { color: #fff; text-decoration: none; }
    .barra-prev .barra-prev-cta i { font-size: 1.15rem; }
    @media (hover: hover) {
        /* come l'header: al passaggio del mouse diventa blu */
        .barra-prev .barra-prev-cta:hover { background: #1272a0; border-color: #1272a0; }
    }

    /* ── Pannello sezioni (dal basso) ── */
    .pannello-sez-fondo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 100000;             /* sopra header mobile e logo (99999) */
        background: rgba(26,26,46,.38);
        opacity: 0;
        transition: opacity .25s ease;
        touch-action: none;          /* trascinando sul fondo la pagina non scorre */
    }
    .pannello-sez-fondo.is-aperto { opacity: 1; }

    .pannello-sez {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100000;
        max-height: 78vh;
        max-height: 78dvh;
        background: #fff;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 30px rgba(26,26,46,.18);
        padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%);
        transition: transform .35s cubic-bezier(.16,1,.3,1);
        overscroll-behavior: contain;
    }
    .pannello-sez.is-aperto { transform: none; }
    .pannello-sez-fondo[hidden],
    .pannello-sez[hidden] { display: none; }

    .pannello-sez-maniglia {
        width: 36px;
        height: 4px;
        border-radius: 4px;
        background: #e5e0d6;
        margin: 4px auto 8px;
        flex-shrink: 0;
    }
    .pannello-sez-testa {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 4px 10px;
        flex-shrink: 0;
    }
    .pannello-sez .pannello-sez-titolo {
        margin: 0;
        font-family: var(--font-display, 'Lora', serif);
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0;
        text-transform: none;
        color: var(--dark, #1a1a2e);
    }
    .pannello-sez .pannello-sez-chiudi {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        border: 1px solid #e5e0d6;
        background: #fff;
        color: var(--dark, #1a1a2e);
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        flex-shrink: 0;
    }
    .pannello-sez .pannello-sez-chiudi:focus-visible { outline: 2px solid var(--dark, #1a1a2e); outline-offset: 2px; }

    .pannello-sez-elenco {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        margin: 0 -4px;
        padding: 0 4px;
    }
    .pannello-sez .pannello-sez-voce {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 48px;
        padding: 0 14px;
        border-radius: 10px;
        font-family: var(--font-body, 'Jost', sans-serif);
        font-size: .95rem;
        font-weight: 400;
        color: var(--dark, #1a1a2e);
        text-decoration: none;
    }
    .pannello-sez .pannello-sez-voce:hover,
    .pannello-sez .pannello-sez-voce:focus { color: var(--dark, #1a1a2e); text-decoration: none; }
    /* sezione in cui ci si trova: fondo sabbia + pallino oro */
    .pannello-sez .pannello-sez-voce.active { background: var(--sand, #f4efe6); font-weight: 600; }
    .pannello-sez .pannello-sez-voce.active::after {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--gold, #c9a96b);
        flex-shrink: 0;
    }
    .pannello-sez .pannello-sez-voce:focus-visible { outline: 2px solid var(--dark, #1a1a2e); outline-offset: -2px; }

    /* Pannello aperto: la pagina sotto non scorre.
       SOLO sul body (la classe sta su html): l'overflow del body passa alla
       finestra. Se si blocca anche html, il body (che ha gia' overflow-x:hidden
       dal tema) diventa lui il contenitore di scorrimento e le barre sticky
       come #cnav saltano via (verificato in Chrome il 12/10/2026). */
    html.pannello-sez-bloccato body { overflow: hidden; }
}

/* Movimento ridotto: niente scorrimenti, solo comparsa */
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .barra-prev,
    .barra-prev.is-visibile { transform: none; transition: opacity .01s, visibility 0s; }
    .pannello-sez,
    .pannello-sez-fondo { transition: none; }
}