/* =============================================================================
   BANNER DEI COOKIE — stesso linguaggio del resto del sito.

   Legge i token FooLab (`--fl-*`) e ha un fallback per ognuno: il banner esce
   anche sulle pagine che i token non li caricano, e un banner che non si vede
   perché mancava una variabile sarebbe il peggiore dei difetti possibili.

   La regola che conta è la PRIMA: questo non deve mai coprire la navigazione.
   Quello di prima era alto 295px dall'alto e sedeva sopra la barra dei menu —
   dieci link su dieci non ricevevano il tocco. Da qui `bottom`, il tetto di
   altezza e lo scorrimento interno.
   ========================================================================== */

.fooc {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483000;   /* sopra tutto il nostro, sotto i dialoghi di sistema */
    padding: 12px;
    display: flex;
    justify-content: center;
    /* Il contenitore è largo quanto lo schermo per centrare il riquadro, ma
       non deve prendersi i tocchi nella fascia vuota ai lati: là sotto c'è la
       pagina, e deve restare cliccabile. */
    pointer-events: none;
}

.fooc[hidden] { display: none; }

.fooc__box {
    pointer-events: auto;
    width: 100%;
    max-width: 640px;
    /* Mai più di metà schermo. Sopra resta sempre la pagina, navigazione
       compresa. */
    max-height: 50vh;
    overflow-y: auto;
    background: var(--fl-paper, #fffdf7);
    color: var(--fl-ink, #141414);
    border: var(--fl-border-w, 3px) solid var(--fl-line, #1a1a1a);
    border-radius: var(--fl-radius-sm, 12px);
    box-shadow: var(--fl-shadow-lg, 0 6px 0 #1a1a1a);
    padding: 16px 18px;
    font-family: var(--fl-font-body, system-ui, sans-serif);
    font-size: var(--fl-fs-sm, .92rem);
    line-height: 1.5;
}

.fooc__titolo {
    font-family: var(--fl-font-display, inherit);
    font-size: var(--fl-fs-lg, 1.2rem);
    font-weight: 800;
    margin: 0 0 6px;
}

.fooc__testo { margin: 0 0 12px; }

.fooc__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- Le voci ------------------------------------------------------------ */

.fooc__voce {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    border-top: var(--fl-border-w-xs, 1px) solid var(--fl-line, #1a1a1a);
    cursor: pointer;
}

.fooc__voce--fissa { cursor: default; opacity: .72; }

.fooc__voce input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: none;
    accent-color: var(--fl-blue, #1f6feb);
}

.fooc__dettaglio { margin-bottom: 12px; }

/* ---- I pulsanti --------------------------------------------------------- */

.fooc__azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fooc__btn {
    flex: 1 1 auto;
    min-width: 120px;
    /* 44px è la misura sotto la quale un bersaglio diventa difficile da
       centrare col pollice: vale per tutti, e per chi ha meno fermezza nel
       gesto è la differenza fra premere e non riuscire. */
    min-height: 44px;
    padding: 10px 16px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    border: var(--fl-border-w-sm, 2px) solid var(--fl-line, #1a1a1a);
    border-radius: var(--fl-radius-sm, 12px);
    box-shadow: var(--fl-shadow-sm, 0 2px 0 #1a1a1a);
    background: var(--fl-paper, #fffdf7);
    color: var(--fl-ink, #141414);
    transition: transform .08s ease, box-shadow .08s ease;
}

.fooc__btn:active {
    transform: translateY(2px);
    box-shadow: var(--fl-shadow-pressed, 0 1px 0 #1a1a1a);
}

/* «Accetta» e «Rifiuta» hanno la STESSA forma e la stessa dimensione: cambia
   solo il colore, perché uno dei due è l'azione che il sito preferisce e
   fingere il contrario sarebbe falso. Quello che non deve succedere è che
   rifiutare costi più fatica. */
.fooc__btn--si {
    background: var(--fl-blue, #1f6feb);
    color: #fff;
    border-color: var(--fl-line, #1a1a1a);
}

.fooc__btn--no { background: #fff; }

.fooc__btn--ghost {
    background: transparent;
    box-shadow: none;
    border-style: dashed;
    flex: 0 1 auto;
}

.fooc__btn:focus-visible {
    outline: 3px solid var(--fl-yellow, #f5b921);
    outline-offset: 2px;
}

/* ---- Quando la registrazione non riesce --------------------------------- */

.fooc--errore .fooc__box {
    border-color: #b42318;
}

.fooc--errore .fooc__box::after {
    content: "Non sono riuscito a registrare la scelta. Controlla la connessione e riprova.";
    display: block;
    margin-top: 10px;
    color: #b42318;
    font-weight: 700;
}

/* ---- Schermi stretti ---------------------------------------------------- */

@media (max-width: 480px) {
    .fooc { padding: 8px; }
    .fooc__box { max-height: 62vh; padding: 14px; }
    /* In colonna: tre pulsanti affiancati su 390px diventano tre francobolli. */
    .fooc__btn { flex: 1 1 100%; }
}