/* Revisione SEO: un h1 per pagina invece di uno per ogni sezione (vedi .private/pages/*.php) --
   le sezioni "degradate" a h2 devono restare visivamente identiche a prima, stesso stile di h1
   (shared.css) invece di duplicarne le proprietà qui. QUI (site.css, solo sito pubblico) e non in
   shared.css (sito pubblico + amministrazione) apposta: il pannello admin ha già propri h2 legittimi
   (es. le intestazioni di categoria nel dettaglio di un preventivo) che non devono ereditare questo
   stile -- ci era già finita per errore una volta (regola messa in shared.css), risultato: quegli
   h2 comparivano giganti e centrati come un h1 anche lì. Nessun h2 preesistente sul sito pubblico
   da questa modifica in poi (verificato prima di introdurla).
*/
h2 {
    font-size: 48pt;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-align: center;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------------
   05_header.css
   --------------------------------------------------------------------------------------------- */

.skip-header {
    display: block;
    width: 100%;
    height: var(--headerSize);
}


.header {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background-color: #fff;
    padding: 1.8em 0;
    font-size: 18px;
    color: var(--brand);

    opacity: .6;
    -webkit-transition: opacity 250ms ease-out;
    -moz-transition: opacity 250ms ease-out;
    -o-transition: opacity 250ms ease-out;
    transition: opacity 250ms ease-out;
}

.header:hover {
    opacity: 1;
}

.header a, .header a:hover, .header a:active, .header a:visited {
    position: relative;
    top: 0;
    font-size: 18px;
    color: var(--brand);
    text-decoration: none;
    -webkit-transition: top 250ms ease-out;
    -moz-transition: top 250ms ease-out;
    -o-transition: top 250ms ease-out;
    transition: top 250ms ease-out;
}

.header a:hover {
    top: -4px;
}

.header_logo a:hover {
    top: 0;
}

@media screen and (min-width: 451px) {
    /* position: absolute invece di float: left: un float restringe la riga dei fratelli che gli
       vengono dopo senza clear (qui .header_logo, che oltretutto stabilisce un proprio block
       formatting context con overflow-y: hidden qui sotto, quindi si restringe lui stesso invece
       di scorrergli semplicemente attorno) -- il logo veniva quindi centrato nello spazio rimasto
       DOPO il blocco telefono, non sull'intera larghezza della pagina. Tolto dal flusso con
       position: absolute il telefono non restringe più nulla, e .header_logo (invariato) può
       finalmente centrarsi sull'intera #header. top/translateY invece di un valore fisso perché
       #header cambia altezza durante lo scroll (05_header.js): resta comunque centrato verticalmente
       a ogni istante dell'animazione invece di scentrarsi quando l'altezza si restringe. */
    .header_phone {
        display: table;
        height: var(--headerSize);
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .header_phone div {
        display: table-cell;
        vertical-align: middle;
    }
}

@media screen and (max-width: 450px) {
    .header_phone {
        display: block;
    }

    .header_phone div {
        text-align: center;
        margin-bottom: .5em;
    }
}

.header_logo {
    height: var(--headerSize);
    overflow-y: hidden;
    text-align: center;
}

.header_logo img {
    height: var(--headerSize);
    width: calc(height * 100 / var(--headerSize));
    position: relative;
    top: 0;
    max-width: 100%;
}

/* Solo in home page il logo è avvolto in un <h1> (vedi {{logo_heading_start}}/{{logo_heading_end}}
   in templates/index.php e index.php per il perché) -- "display: contents" toglie all'elemento
   qualunque scatola/box propria (niente delle regole h1 di shared.css, font-size/padding/ecc.
   incluse) così il logo resta pixel-identico a come appare su ogni altra pagina, dove lo stesso
   <a><img> non è avvolto in nessun heading. L'h1 resta comunque nel DOM/albero di accessibilità: è
   solo la sua resa visiva a sparire. */
.header_logo_heading {
    display: contents;
}

/* ---------------------------------------------------------------------------------------------
   06_mobile_menu.css
   --------------------------------------------------------------------------------------------- */

/* Menu a comparsa "hamburger", pagine pubbliche (.private/templates/index.php): oggi l'unica navigazione
   del sito, che finora si limitava al numero di telefono e al logo in #header. Sia il bottone che
   il pannello vivono fuori da #header apposta (vedi il commento lì) -- #header ha un proprio
   stacking context (position: fixed, per lo shrink-on-scroll di 05_header.js), che impedirebbe a
   un suo figlio di comparire sopra #mobile-menu una volta aperto, indipendentemente dal proprio
   z-index: qui il bottone resta quindi a una posizione fissa (non legata all'altezza variabile di
   #header durante lo scroll), semplice ed efficace quanto una posizione sincronizzata. */

/* 40x40 invece di un font-size 48pt (64px) letterale: su un box così stretto allungava troppo lo
   "hamburger" in verticale (le tre barre distribuite su un'altezza doppia della larghezza) -- un
   box quadrato più contenuto dà un peso visivo paragonabile a quello delle icone social senza
   snaturarne la forma.
   Allineamento verticale: il bottone vive fuori da #header (vedi il commento qui sopra), quindi
   non può centrarsi sul suo contenuto semplicemente ereditandone il flusso -- top è calcolato
   sulle stesse variabili che #header usa per il logo (padding-top 1.8em + metà di --headerSize,
   00_root.css), così da restare centrato sul logo a ogni breakpoint invece di un valore fisso
   valido solo per uno dei due. */
.mobile-menu-toggle {
    position: fixed;
    /* Stesso font-size di #header (05_header.css): l'unità "em" del calc() qui sotto va risolta
       sullo stesso valore, altrimenti (* { font-size: 16pt } di 01_html.css è dichiarata su ogni
       elemento, non solo ereditata) 1.8em qui varrebbe una misura diversa da 1.8em su #header
       stesso, e il bottone non sarebbe più davvero centrato sul logo. */
    font-size: 18px;
    top: calc(1.8em + var(--headerSize) / 2);
    transform: translateY(-50%);
    right: 20px;
    z-index: 200;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-menu-toggle span {
    display: block;
    height: 4px;
    width: 100%;
    background-color: var(--brand);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease, background-color .25s ease;
}

/* Bianche invece che rosse a menu aperto, altrimenti si confonderebbero con lo sfondo (anch'esso
   rosso) di #mobile-menu qui sotto. */
.mobile-menu-toggle.open span {
    background-color: #fff;
}

/* Le tre barre diventano una "X": la prima e la terza ruotano di 45° convergendo al centro
   (dove si trovava la seconda, che nel frattempo sparisce). La distanza di traslazione è quella
   fra il centro di ciascuna barra esterna e quello della barra centrale, dati i 40px di altezza
   del bottone e i 4px di ogni barra distribuiti con justify-content: space-between. */
.mobile-menu-toggle.open span:nth-child(1) {
    transform: translateY(18px) rotate(45deg);
}

.mobile-menu-toggle.open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.open span:nth-child(3) {
    transform: translateY(-18px) rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 150;
    background-color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
}

.mobile-menu.open {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease, visibility 0s linear 0s;
}

/* Stessa posizione del logo di #header (.header_logo, css/05_header.css): stesso font-size (per
   risolvere l'unità "em" allo stesso modo, vedi il commento su .mobile-menu-toggle qui sopra) e
   la stessa formula per il centro verticale (padding-top 1.8em + metà di --headerSize) come
   valore iniziale, valido finché il menu non è ancora stato aperto/js/06_mobile_menu.js non ha
   ancora girato. Da lì in poi il "top" effettivo è quello impostato via style inline (sempre
   vincente su questo), ricalcolato a ogni scroll sulla posizione reale del logo di #header (che
   si sposta man mano che l'header si restringe) invece che su questo valore fisso. */
.mobile-menu-logo {
    position: absolute;
    top: calc(1.8em + var(--headerSize) / 2);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    height: var(--headerSize);
    width: auto;
}

.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.mobile-menu li {
    margin: 22px 0;
}

.mobile-menu a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: 22pt;
    font-weight: 600;
    text-decoration: none;
}

.mobile-menu a:hover {
    opacity: .8;
}

.mobile-menu i {
    font-size: 22pt;
}

/* Impedisce alla pagina sotto di scorrere mentre il menu a schermo intero è aperto (impostata da
   js/06_mobile_menu.js). */
body.mobile-menu-open {
    overflow: hidden;
}

@media screen and (max-width: 450px) {
    .mobile-menu a,
    .mobile-menu i {
        font-size: 18pt;
    }

    .mobile-menu li {
        margin: 16px 0;
    }
}

/* ---------------------------------------------------------------------------------------------
   10_slider.css
   --------------------------------------------------------------------------------------------- */

.slider
{
    position: relative;
    overflow: hidden;
    height: 100vh;
    /*    min-height: 100%;
        min-width: 100%;*/
}


.single-banner
{
    height: 100vh;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* Ogni slide (figlio diretto di .slider generato da generate_slider(), functions.php) impilato
   sugli altri invece che in fila: solo .active è visibile, il passaggio da uno slide al
   successivo è una dissolvenza incrociata sull'opacity (vedi js/10_slider.js) invece di uno
   scorrimento. :not(.slider-dots) esclude l'overlay dei punti di navigazione qui sotto, anch'esso
   un figlio diretto di .slider (aggiunto dallo stesso script): senza, ne erediterebbe posizione e
   opacity: 0 di base, restando invisibile perché mai promosso a .active. */
.slider > div:not(.slider-dots)
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    transition: opacity .6s linear;
    z-index: 0;
}

.slider > div.active
{
    opacity: 1;
    z-index: 1;
}

.slider div div
{
    width: 100%;
    height: 100vh;
}

/* Punti di navigazione: stesso aspetto di quelli di slick.js (cerchio pieno del rosso del
   brand, pallino bianco che si accende su quello attivo). */
.slider-dots
{
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
}

/* 24px, non più 20px: stessa dimensione del pulsante pausa/riproduci qui sotto, con cui
   condividono la riga (.slider-dots, già text-align:center). vertical-align: middle, non il
   default "baseline" -- senza, i due tipi di pulsante (questo e .slider-pause, che lo imposta
   già) si allineano secondo regole diverse sulla stessa riga e finiscono a altezze leggermente
   diverse. */
.slider-dot
{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin: 0 5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--brand);
    cursor: pointer;
}

.slider-dot:before
{
    content: '';
    position: absolute;
    /* (24 - 6) / 2 = 9: il pallino interno resta centrato nel cerchio più grande qui sopra,
       stessa dimensione di prima (6x6). */
    top: 9px;
    left: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #fff;
    opacity: .25;
}

.slider-dot.active:before
{
    opacity: 1;
}

/* Pulsante pausa/riproduci (js/10_slider.js): stesso cerchio pieno rosso dei punti sopra,
   affiancato a destra dello stesso .slider-dots (già text-align:center, li allinea entrambi
   insieme senza bisogno di un contenitore a parte). Il simbolo (icon-pause/icon-play, scambiate
   da JS a ogni click) è un'icona vera del sito come ogni altra -- color la colora (fill:
   currentColor, ereditato). NON il font-size qui sotto, però: "* { font-size: 16pt }"
   (css/shared.css) lo impone esplicitamente a OGNI elemento, <i> compreso, il che vince sempre
   sull'eredità dal genitore -- da qui .slider-pause i più sotto, che lo fissa di nuovo apposta
   sull'icona stessa, stesso schema già usato altrove per lo stesso motivo (es. .admin-row-btn i,
   css/admin.css). display: flex (non più inline-block + line-height/text-align, che centravano
   bene in orizzontale ma un paio di px troppo in basso -- vertical-align: -0.125em dell'<svg>,
   css/shared.css, pensato per allinearlo al testo circostante di un'icona in mezzo a una riga, non
   per un'icona sola dentro un cerchio come questa): align-items/justify-content centrano l'icona
   sui due assi senza risentire della metrica del testo. */
.slider-pause
{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin: 0 5px 0 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--brand);
    color: #fff;
    cursor: pointer;
}

.slider-pause i
{
    font-size: 12px;
}

/* Galleria fotografica decorativa a piena altezza (100vh, generate_slider() in functions.php):
   niente di tutto questo è contenuto -- su carta sarebbe solo una pagina vuota (le foto di sfondo
   non passano comunque quasi mai alla stampa: "grafica di sfondo" è disattivata di default nella
   maggior parte dei browser) seguita da un pallino/pulsante pausa senza alcun senso da fermo.
   Stesso "manca @media print" già corretto in css/shared.css per header/nav/footer/dialog. */
@media print
{
    .slider,
    .slider-dots
    {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------------------------------
   20_bands.css
   --------------------------------------------------------------------------------------------- */

/* ========================================================== COMMON */

.left2right, .right2left {
    color: #fff;
    width: 100%;
}

.left2right.big-icons > div > div > a > i {
    font-size: 72pt;
}

/* Nota facoltativa sotto il riassunto orari in home page (impostabile in amministrazione,
   Impostazioni -> Nota orari): stesso testo bianco della sezione (.right2left, qui sopra), solo
   più piccola e leggermente attenuata per leggersi come un'annotazione, non come parte della
   frase principale degli orari. */
/* opacity:0.85 tolta apposta: questo testo (nota facoltativa impostabile in amministrazione,
   home.hoursnote -- tipicamente un'eccezione importante come una chiusura per ferie) è già bianco
   su sfondo rosso qui (stesso banda di generate_opening_hours_summary(), functions.php), un
   contrasto di per sé già al limite -- l'opacità ridotta lo spingerebbe sotto qualunque soglia
   leggibile invece di limitarsi a "smorzarlo" visivamente come probabilmente voleva fare. */
.home-hours-note {
    font-size: 0.85em;
    margin-top: 0.5em;
}

/* ===== MOBILE  ===== */
@media screen and (max-width: 450px) {
    .left2right > div, .right2left > div {
        width: 100%;
    }

    .left2right > div > div, .right2left > div > div {
        padding-bottom: 2em;
    }
}

/* ===== DESKTOP ===== */
@media screen and (min-width: 451px) {
    .left2right, .right2left {
        display: flex;
    }

    /* :first-of-type/:nth-last-of-type(2) invece del generico "> div": non deve toccare il bump
       centrale (shared.css, [class^="bump-"]) né il div ".float_clear hidden" di chiusura -- solo
       i due contenuti veri e propri. js/site.js ridimensiona il bump in px per restare sempre
       1:2 rispetto alla sua altezza (altrimenti si stira su un monitor/finestra larga -- i raggi
       in percentuale di .bump-left/.bump-right > div presuppongono quel rapporto): la sua
       larghezza quindi non è più un 10% fisso, e questi due qui non possono più essere un 45%
       fisso -- flex: 1 1 0 assorbe qualunque spazio il bump lasci libero, così la riga resta
       sempre piena. */
    .left2right > div:first-of-type, .left2right > div:nth-last-of-type(2),
    .right2left > div:first-of-type, .right2left > div:nth-last-of-type(2) {
        flex: 1 1 0;
    }
}

/* ========================================================== LEFT-TO-RIGHT */

/* ===== MOBILE  ===== */
@media screen and (max-width: 450px) {
    .left2right>div:first-of-type {
        background-color: var(--brand);
    }

    .left2right>div:nth-last-of-type(2) h1,
    .left2right>div:nth-last-of-type(2) h2 {
        color: var(--brand);
    }
}

/* ===== DESKTOP ===== */
@media screen and (min-width: 451px) {
    .left2right > div:first-of-type {
        background-color: #fff;
    }

    .left2right > div:first-of-type h1,
    .left2right > div:first-of-type h2 {
        color: var(--brand);
    }

    .left2right > div:nth-last-of-type(2) {
        background-color: var(--brand);
    }
}

/* ========================================================== RIGHT-TO-LEFT */

.right2left>div:first-of-type {
    background-color: var(--brand);
}

.right2left>div:nth-last-of-type(2) h1,
.right2left>div:nth-last-of-type(2) h2 {
    color: var(--brand);
}

/* ---------------------------------------------------------------------------------------------
   30_reservation.css
   --------------------------------------------------------------------------------------------- */

.reservation {
    background-color: #ffffff;
    margin: 100px auto;
    padding: 40px;
    width: 70%;
    min-width: 300px;
}

/* Scoperto al solo wizard (non anche footer.html, che riusa le stesse classi .terms_of_service/
   .privacy_policy su sfondo scuro con un colore proprio): qui su sfondo bianco vanno nel rosso
   del brand invece del colore link di default. */
.reservation .terms_of_service, .reservation .privacy_policy {
    color: var(--brand);
}

/* Colore "acceso" del solo switch dei termini, non del componente .switch condiviso (verde
   #bada55 in css/manage.css, usato anche dagli switch online/offline dell'amministrazione): un
   selettore per id scelto apposta per non toccare quella regola più generale. */
#reservation_checkbox:checked + .switch-label {
    background: var(--brand);
}

/* Paragrafo introduttivo del primo passo del wizard: era uno style="text-align: justify;
   margin-bottom: 2em" inline in reserve.php, tolto per poter fare a meno di 'unsafe-inline' in
   style-src sul sito pubblico (vedi il commento sul relativo header in .private/index.php). */
.reservation-intro-text {
    text-align: justify;
    margin-bottom: 2em;
}

/* Etichette introduttive dei passi "Come ti chiami?"/"Come ti ricontattiamo?" e del paragrafo di
   spiegazione del passo di verifica SMS: stesso style="margin-bottom: 1em" inline in reserve.php
   su tutt'e tre, tolto per lo stesso motivo di .reservation-intro-text qui sopra. */
.reservation-lead-text {
    margin-bottom: 1em;
}

/* Nome del mittente SMS ("MAVA") nel paragrafo di spiegazione del passo di verifica: era uno
   style="font-weight: bold" inline, stesso motivo delle regole qui sopra. */
.reservation-otp-sender {
    font-weight: bold;
}

/* Margine sopra e sotto la riga dello switch: * { margin: 0 } (01_html.css) la farebbe
   altrimenti affiancare senza respiro sia al paragrafo introduttivo sopra che all'etichetta
   d'errore sotto (quest'ultima ha già un proprio margin-top, ma resta a visibility: hidden
   quando non in errore -- vedi .reservation-error-label -- quindi va comunque contata come riga
   presente anche a switch attivato). */
.reservation-terms-row {
    margin: 2em 0;
}

/* Etichetta d'errore sotto la riga dello switch (js/30_reservation.js): al posto del popup di
   prima quando si tenta "Avanti" senza aver accettato i termini. Stessa dimensione del testo
   dell'etichetta accanto allo switch (".switch-label + label", nessun font-size proprio né qui né
   in css/manage.css: resta quello di default, * { font-size: 16pt } in 01_html.css). * { margin: 0 }
   (01_html.css) azzera anche il margine di questo <p>, da qui il margin-top esplicito invece di
   farlo affiancare senza respiro alla riga dello switch appena sopra.
   Nascosta di default con visibility (non display: none, impostato prima via style inline nel
   markup): lo spazio resta comunque riservato, cosí quando compare non spinge in giù il resto del
   contenuto del passo. */
.reservation-error-label {
    color: var(--brand);
    font-size: 16pt;
    margin-top: 12px;
    visibility: hidden;
}

.reservation-error-label.visible {
    visibility: visible;
}

/* Passo "Quando?": 2em sopra, 1em sotto (le altre etichette d'errore condivise qui sopra hanno
   solo 12px di margine superiore, niente inferiore) -- selettore per id apposta per non toccare
   le altre, che vanno bene così come sono. */
#reservation-calendar-error {
    margin: 2em 0 1em;
}

/* Passo "A che ora?": stesso trattamento di #reservation-calendar-error qui sopra. */
#reservation-mealtime-error {
    margin: 2em 0 1em;
}

/* Passo "Come ti ricontattiamo?": stesso trattamento di #reservation-calendar-error qui sopra. */
#reservation-phone-error {
    margin: 2em 0 1em;
}

/* Passo di verifica del codice via SMS: stesso trattamento di #reservation-phone-error qui sopra. */
#reservation-otp-error {
    margin: 2em 0 1em;
}

/* Le 6 caselle del codice via SMS (una cifra ciascuna, vedi js/30_reservation.js) al posto del
   vecchio campo singolo: stesso bordo/padding di base di "input, select" qui sotto, ma più strette
   e appaiate, col testo centrato invece che allineato a sinistra com'è normale per un campo largo
   tutta la riga. */
.reservation-otp-digits {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.reservation-otp-digit {
    width: 2.2em;
    padding: 10px 0;
    text-align: center;
    font-size: 20pt;
}

/* "Re-invia codice" (passo di verifica del codice via SMS): stesso ridimensionamento compatto di
   .prev-next-button più sopra, stesso motivo ([class^="bottone-"] in 03_common.css è pensata per
   un grande pulsante da invito all'azione altrove nel sito, sproporzionato qui nel wizard) --
   selezionato per id invece che per classe però, quindi qui non serve la stessa attenzione
   sull'hover: la specificità di un id batte comunque sia la regola di base che la sua variante
   :hover, che nell'altro caso invece competevano alla pari (due classi). */
/* Il bottone è "inline-block" (vedi sopra), quindi un text-align sul <p> che lo contiene basta a
   centrarlo orizzontalmente senza dover toccare il bottone stesso. */
.reservation-otp-resend-row {
    text-align: center;
}

#reservation-otp-resend {
    position: static;
    display: inline-block;
    overflow: visible;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 8px;
    background: none;
    border-color: #999;
    color: #999;
}

/* Bordo/testo blu invece del grigio di base non appena il bottone torna cliccabile (attesa
   finita): grigio disabilitato e grigio abilitato sarebbero altrimenti indistinguibili a colpo
   d'occhio, l'utente non si accorgerebbe che può premerlo di nuovo. Specificità di ":not()"
   (1,1,0) sufficiente a battere la regola di base qui sopra (1,0,0) senza bisogno di !important. */
#reservation-otp-resend:not(:disabled) {
    border-color: #2563eb;
    color: #2563eb;
}

#reservation-otp-resend:hover:not(:disabled) {
    opacity: .8;
}

#reservation-otp-resend:disabled {
    opacity: .4;
    cursor: default;
}

/* Style the input fields */
input, select {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: 'Inter';
    border: 1px solid #aaaaaa;
    /* Senza, "width: 100%" copre solo il contenuto: padding e bordo si sommano sopra, il campo
       finisce quindi più largo del 100% del genitore (22px in più: 10px di padding e 1px di
       bordo per lato) e il suo bordo destro supera quello dei fratelli non allargati a piena
       larghezza (es. i bottoni Indietro/Avanti sotto), che invece restano dentro i margini
       corretti -- da cui il disallineamento a destra. */
    box-sizing: border-box;
}

/* ===== Prefisso internazionale (passo "Come ti ricontattiamo?") =====
   Combo disegnata a mano (js/31_phone_prefix.js) invece di un <select> nativo, per poterci
   mettere la bandiera SVG (img/flags/) accanto a ogni prefisso: un pulsante che apre un pannello
   assoluto con un campo di ricerca e la lista filtrabile, accanto al campo del numero vero e
   proprio nella stessa riga. */
.reservation-phone-row {
    display: flex;
    gap: 8px;
}

/* min-width:0 -- di default un flex item non si restringe mai sotto la larghezza del proprio
   contenuto, cosa che qui basterebbe a far traboccare la riga oltre al genitore: serve per far
   valere davvero "flex: 1" quando il campo dovrebbe restringersi. */
.reservation-phone-row .reservation-phone-number {
    flex: 1;
    min-width: 0;
}

.phone-prefix-picker {
    position: relative;
    flex: 0 0 auto;
}

/* Stessi padding/font-size/bordo di "input, select" più sopra, per apparire come un unico campo
   insieme al numero accanto invece che come un controllo a sé stante. */
.phone-prefix-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 10px 12px;
    font-size: 17px;
    font-family: 'Inter';
    border: 1px solid #aaaaaa;
    background-color: #fff;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}

.phone-prefix-toggle:hover {
    background-color: #f7f7f7;
}

/* * { font-size: 16pt } (01_html.css) si applica direttamente ad ogni elemento: senza questo,
   il testo del prefisso (uno <span> dentro al pulsante) tornerebbe al corpo di default invece
   di ereditare i 17px impostati qui sopra sul pulsante che lo contiene. */
.phone-prefix-toggle span {
    font-size: inherit;
}

.phone-prefix-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    flex: 0 0 auto;
}

/* SVG inline (reserve.php) invece di <i class="icon-dropdown"> (img/icons/, js/icons.js): dentro
   a .tab, ".tab i" più sotto in questo stesso file (pensata per il grande cuore della pagina
   finale, 72pt) vincerebbe a parità di specificità su qualunque regola qui provasse a
   rimpicciolire un <i>, ingrandendolo a dismisura -- un SVG non passa da quella regola (mira solo
   a elementi <i>), quindi la sua dimensione dipende solo da qui. */
.phone-prefix-caret {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    color: #999;
}

.phone-prefix-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 500;
    width: 280px;
    max-width: 80vw;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
    padding: 8px;
    box-sizing: border-box;
}

.phone-prefix-filter {
    margin-bottom: 8px;
    font-size: 14px;
}

.phone-prefix-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}

.phone-prefix-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
}

.phone-prefix-item:hover {
    background-color: #f4f4f4;
}

.phone-prefix-item-flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex: 0 0 auto;
}

/* font-size: inherit -- stesso motivo di ".phone-prefix-toggle span" più sopra: sono <span>
   dentro a un <li>, colpiti anche loro singolarmente da * { font-size: 16pt }. */
.phone-prefix-item-country {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
}

.phone-prefix-item-prefix {
    color: #999;
    flex: 0 0 auto;
    font-size: inherit;
}

.phone-prefix-item-selected {
    background-color: #f4f4f4;
    font-weight: bold;
}

/* "Focus virtuale" della voce corrente durante la navigazione da tastiera (Frecce, 31_phone_prefix.js):
   il focus vero resta sul campo di filtro (pattern combobox+listbox standard), quindi senza un
   riscontro visivo qui chi vede lo schermo ma naviga da tastiera non saprebbe mai quale voce
   Invio sceglierebbe. */
.phone-prefix-item-active {
    background-color: #f4f4f4;
    outline: 2px solid #1a73e8;
    outline-offset: -2px;
}

/* Voce presente in elenco ma non ancora selezionabile (fPrefixes.json, "enabled": false -- oggi
   il caso di ogni prefisso diverso da +39, il backend valida solo numeri italiani): visibile per
   consultazione ma sbiadita, senza risposta al passaggio del mouse né al click. */
.phone-prefix-item-disabled {
    opacity: .4;
    cursor: default;
}

.phone-prefix-item-disabled:hover {
    background-color: transparent;
}

.phone-prefix-divider {
    margin: 6px 0;
    border-top: 1px solid #eee;
}

.phone-prefix-empty {
    padding: 8px 6px;
    color: #999;
    font-size: 14px;
}

select option:disabled {
    color: rgba(110, 120, 129, 0.34);
}

.separa option:disabled {
    color: var(--brand);
    text-align: center;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
    background-color: #ffdddd;
}

/* Riga "Indietro"/"Avanti": era uno style="overflow: auto" inline in reserve.php, tolto per poter
   fare a meno di 'unsafe-inline' in style-src sul sito pubblico (vedi il commento sul relativo
   header in .private/index.php) -- serve comunque a contenere i due bottoni sotto, entrambi
   float. */
.reservation-nav-row {
    overflow: auto;
}

/* "Indietro"/"Avanti" ai due lati della riga: erano due style="float: left"/"float: right" inline
   in reserve.php, stesso motivo di .reservation-nav-row qui sopra -- selezionati per
   data-move (già presente in markup per js/30_reservation.js, niente classi in più da aggiungere
   lì) invece che per classe dedicata. */
.prev-next-button[data-move="-1"] {
    float: left;
}

.prev-next-button[data-move="1"] {
    float: right;
}

/* .bottone-rosso/.bottone-bianco ([class^="bottone-"] in 03_common.css) sono pensate per grandi
   pulsanti di invito all'azione altrove nel sito (24pt, 20px di padding, angoli molto arrotondati
   da 25px): qui, dentro al wizard, stonano accanto ai controlli più compatti introdotti per
   calendario/pasto-orario/persone (angoli da 8px, testo 14-16px) -- stessi colori, dimensioni
   scalate per intonarsi al resto del wizard invece che al resto del sito. */
.prev-next-button {
    /* La regola base ([class^="bottone-"] in 03_common.css) è pensata per un grande pulsante da
       solo, centrato via position: relative; left: 50% (poi annullato qui da .no-widths) e
       sollevato al passaggio del mouse (position: relative; top: -4px, vedi sotto): da statica e
       inline-block invece, un piccolo salto verticale/laterale non ha più modo di manifestarsi. */
    position: static;
    display: inline-block;
    overflow: visible;
    padding: 12px 28px;
    font-size: 16px;
    border-radius: 8px;
    transition: opacity .15s ease;
}

.prev-next-button i {
    font-size: 16px;
}

/* "Indietro" (.bottone-bianco): niente più sfondo grigiastro (di default del <button>, mai
   sovrascritto da .bottone-bianco in 03_common.css) e bordo/testo grigi invece del rosso del
   brand, per non competere visivamente con "Avanti". */
.prev-next-button.bottone-bianco {
    background: none;
    border-color: #999;
    color: #999;
}

/* La regola base ([class^="bottone-"] in 03_common.css) elenca la propria variante :hover nella
   STESSA lista di selettori della regola normale, quindi durante l'hover la sua specificità
   sale a quella di un selettore con pseudo-classe -- pari a quella di ".prev-next-button" preso
   da solo, che quindi durante l'hover smette di vincere: senza ripetere qui gli stessi valori con
   una specificità che rivinca anche in questo stato, al passaggio del mouse il pulsante tornava
   per un istante alle dimensioni originarie (24pt, 20px di padding, angoli da 25px) invece di
   restare piccolo -- da cui il "diventano più grandi" notato al passaggio del mouse. Va tenuta
   valida ANCHE da disabilitato (niente :not(:disabled) qui): il passo "Quando?" parte proprio con
   "Avanti" disabilitato finché non si sceglie un giorno, ed è lì che il problema si notava --
   :hover può risultare comunque abbinato su un pulsante disabled a seconda del browser, pur senza
   ricevere il click. */
.prev-next-button:hover {
    position: static;
    display: inline-block;
    overflow: visible;
    padding: 12px 28px;
    font-size: 16px;
    border-radius: 8px;
    top: auto;
}

/* La schiarita al passaggio del mouse invece resta solo per lo stato abilitato, altrimenti un
   pulsante disabled si illuminerebbe come se rispondesse al click. */
.prev-next-button:hover:not(:disabled) {
    opacity: .8;
}

/* Stessa identica ragione di .prev-next-button:hover qui sopra, ma per :active: la regola base
   include anche quella pseudo-classe nella stessa lista di selettori (vedi 03_common.css), quindi
   a pulsante premuto -- es. proprio il gesto di mousedown+trascinamento che fa scattare
   "dragstart" (vedi js/00_no_drag.js) -- la specificità risale e senza questo override il
   pulsante tornava per un istante alle dimensioni originarie (24pt, 20px di padding, angoli da
   25px), dando l'impressione che il trascinamento lo "ingrandisse". */
.prev-next-button:active {
    position: static;
    display: inline-block;
    overflow: visible;
    padding: 12px 28px;
    font-size: 16px;
    border-radius: 8px;
    top: auto;
}

/* Il pulsante "Avanti" resta disabilitato finché data e pasto/orario non sono stati scelti (vedi
   updateNextButtonState() in 30_reservation.js): nessuno stile :disabled esisteva già per
   .bottone-rosso/.bottone-bianco altrove, da qui uno scoped al solo wizard di prenotazione. */
.prev-next-button:disabled {
    opacity: .4;
    cursor: default;
}

/* Hide all steps by default: */
.tab {
    display: none;
}

.tab .center {
    text-align: center;
}

.tab i {
    color: var(--brand);
    font-size: 72pt;
}

.tab p {
    margin-top: .5em;
}

/* Riga dei pallini che indicano l'avanzamento: era uno style="text-align: center; margin-top:
   40px" inline in reserve.php, tolto per poter fare a meno di 'unsafe-inline' in style-src sul
   sito pubblico (vedi il commento sul relativo header in .private/index.php). */
.reservation-steps-row {
    text-align: center;
    margin-top: 40px;
}

/* Make circles that indicate the steps of the form: */
.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

/* Mark the active step: */
.step.active {
    opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
    background-color: #04AA6D;
}

/* ===== Calendario (passo "Quando?") =====
   Stessa impostazione visiva del calendario di amministrazione (.admin-calendar in
   60_amministrazione.css: griglia 7 colonne, stessi colori per chiusura/periodo di chiusura/
   apertura straordinaria), qui sul sito pubblico e ristretta alla sola finestra di prenotazione
   (vedi reservation-calendar.php). */

/* "Quando?" e il pulsante "?" della legenda sulla stessa riga, il primo a sinistra e il secondo
   ancorato a destra. */
.reservation-calendar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reservation-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 16px 0 12px;
}

/* position: relative (non più absolute/top/right come quando viveva ancorato all'angolo della
   riga del mese) solo per restare il riferimento di posizionamento della legenda a comparsa
   qui sotto (.reservation-calendar-legend, position: absolute), ora che il pulsante "?" segue il
   flusso normale della riga del titolo invece di essere sganciato da essa. */
.reservation-calendar-help {
    position: relative;
}

.reservation-cal-help-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: none;
    color: #777;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.reservation-cal-help-btn:hover {
    background-color: #f4f4f4;
}

/* Stessa impostazione "cerchio cliccabile" di .reservation-people-btn (passo "In quanti?"), ma
   senza bordo e con l'icona a riempire il pulsante invece di un bordo con un'icona piccola al
   centro. */
.reservation-cal-nav {
    background: none;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    cursor: pointer;
}

/* .tab i (qui sopra) è pensata per l'icona grande e centrata dei passi termini/grazie (72pt):
   senza questa, l'icona delle frecce eredita quella dimensione invece di riempire il pulsante,
   dato che anche questi pulsanti stanno dentro un .tab. */
.reservation-cal-nav i {
    font-size: 32px;
}

.reservation-cal-nav:hover:not(:disabled) {
    background-color: #f4f4f4;
}

.reservation-cal-nav:disabled {
    opacity: .3;
    cursor: default;
}

#reservation-cal-label {
    font-weight: bold;
    font-size: 16px;
    min-width: 170px;
    text-align: center;
}

/* container-type: inline-size -- le tre varianti del nome di ogni giorno
   (.reservation-calendar-weekday, js/site.js) rispondono allo spazio davvero disponibile QUI
   (.reservation ha width: 70%/min-width: 300px, non un valore fisso: cambia con la finestra) via
   @container più sotto, non a un @media legato alla sola larghezza della finestra -- vedi il
   commento su .day-full in css/shared.css. */
.reservation-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    container-type: inline-size;
    container-name: reservation-calendar;
}

.reservation-calendar-weekday {
    text-align: center;
    font-weight: bold;
    color: var(--brand);
    font-size: 13px;
    padding: 4px 0;
}

@container reservation-calendar (max-width: 380px) {
    .reservation-calendar-weekday .day-full {
        display: none;
    }

    .reservation-calendar-weekday .day-short {
        display: inline;
    }
}

@container reservation-calendar (max-width: 230px) {
    .reservation-calendar-weekday .day-short {
        display: none;
    }

    .reservation-calendar-weekday .day-initial {
        display: inline;
    }
}

/* Ora un vero <button> (js/site.js, renderCalendar) invece di un <div> cliccabile, per essere
   raggiungibile e attivabile da tastiera -- appearance/font/width tolgono il "cromo" nativo che i
   browser altrimenti aggiungono ai bottoni (bordo/sfondo del sistema operativo, famiglia di
   caratteri diversa da quella del sito), che le proprietà esplicite qui sotto (background-color,
   border, ecc.) da sole non sempre bastano a sovrascrivere del tutto. */
.reservation-calendar-day {
    appearance: none;
    width: 100%;
    font: inherit;
    background-color: #fff;
    min-height: 44px;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}

.reservation-calendar-day.outside {
    background: transparent;
    border: none;
    cursor: default;
}

.reservation-calendar-day.disabled {
    cursor: default;
    color: #aaa;
}

.reservation-calendar-day.today {
    border-color: var(--brand);
    border-width: 2px;
}

.reservation-calendar-day.closing-day,
.reservation-calendar-day.closure-period {
    background-color: #eeeeee;
}

.reservation-calendar-day.closure-period {
    background-image: repeating-linear-gradient(45deg, #eeeeee, #eeeeee 6px, #fff 6px, #fff 12px);
}

.reservation-calendar-day.special-opening {
    background-color: #dcf0dc;
}

/* Oltre la finestra di prenotazione (reservation.daysbefore): dopo le altre regole di stato così
   da vincere sempre sullo sfondo (es. un giorno "aperto" secondo l'orario settimanale ma fuori
   finestra deve comunque apparire così, non bianco). */
.reservation-calendar-day.not-bookable-yet {
    background-color: #eef2fa;
}

.reservation-calendar-day.selected {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: bold;
}

/* Non più una riga sempre visibile sotto il calendario: un popup ancorato al pulsante "?"
   (.reservation-calendar-help, position: relative), nascosto finché non si aggiunge .open (vedi
   il toggle in 30_reservation.js). */
.reservation-calendar-legend {
    display: none;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    /* Larga quanto la riga più lunga (es. "Apertura straordinaria") invece di un min-width fisso,
       così nessuna riga va mai a capo indipendentemente dal testo. */
    width: max-content;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    padding: 12px 16px;
    font-size: 14px;
    color: #555;
    text-align: left;
    z-index: 20;
}

.reservation-calendar-legend.open {
    display: flex;
}

.reservation-calendar-legend span {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.reservation-calendar-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #ddd;
    margin-right: 6px;
}

.reservation-calendar-legend-swatch.open {
    background-color: #fff;
}

.reservation-calendar-legend-swatch.closing-day {
    background-color: #eeeeee;
}

.reservation-calendar-legend-swatch.closure-period {
    background-color: #eeeeee;
    background-image: repeating-linear-gradient(45deg, #eeeeee, #eeeeee 4px, #fff 4px, #fff 8px);
}

.reservation-calendar-legend-swatch.special-opening {
    background-color: #dcf0dc;
}

.reservation-calendar-legend-swatch.not-bookable-yet {
    background-color: #eef2fa;
}

/* ===== Pasto e orario (passo "A che ora?") =====
   Blocchi grandi e cliccabili invece delle vecchie <select>/<optgroup>: .reservation-block-small
   è lo stesso blocco ma più compatto, per gli orari (di solito molti di più dei pasti). */
.reservation-block-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;
}

/* Ora un vero <button> (js/site.js: loadMeals/loadTimes) invece di un <div> cliccabile -- stesso
   motivo/stessa appearance:none dei giorni del calendario, css/30_reservation.css più sopra. */
.reservation-block {
    appearance: none;
    flex: 1 1 140px;
    min-width: 100px;
    min-height: 58px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    text-align: center;
    font: inherit;
    font-size: 16px;
    font-weight: bold;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    color: #333;
}

.reservation-block:hover {
    border-color: var(--brand);
}

.reservation-block.selected {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.reservation-block-small {
    flex: 0 1 90px;
    min-width: 70px;
    padding: 8px;
    font-size: 14px;
}

.reservation-block-empty {
    color: #999;
    font-size: 14px;
    text-align: center;
    width: 100%;
}

/* Blocchi di suggerimento nome/cognome (passo "Come ti chiami?", js/32_name_suggestions.js):
   scoped a .reservation-name-suggestions per non toccare i blocchi di pasto/orario, che
   riusano la stessa .reservation-block-small di base. "flex: 0 0 auto" + "width: auto" al posto
   della base fissa a 90px: quest'ultima è pensata per un elenco di poche voci di lunghezza simile
   (orari), qui invece i nomi hanno lunghezze molto varie -- con la base fissa, un nome più lungo
   di 90px veniva tagliato/andava a capo invece di allargare il proprio riquadro. */
.reservation-name-suggestions .reservation-block {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    white-space: nowrap;
    font-weight: normal;
    background-color: var(--brand);
    border: none;
    color: #fff;
}

/* Anche questi ora bottoni veri (js/32_name_suggestions.js) come .reservation-block di base più
   sopra -- appearance:none lì si applica già per ereditarietà di classe, ma "border: none" qui
   sopra va oltre il semplice colore del bordo di quella regola di base: alcuni browser
   disegnano comunque un bordo di sistema residuo sui <button> anche con border:none esplicito a
   meno di appearance:none, già coperto da .reservation-block ma ripetuto qui per chiarezza. */

/* .reservation-block:hover (più sopra in questo file) schiarisce il bordo di quello grigio di
   base -- qui non c'è più alcun bordo da schiarire (rimosso sopra), da qui un riscontro diverso
   al passaggio del mouse: la stessa attenuazione già usata per #reservation-otp-resend più in
   alto in questo file. Specificità 0,3,0 contro 0,2,0 di ".reservation-block:hover": vince
   comunque a prescindere dall'ordine, ma il riscontro visivo va comunque ridefinito da capo. */
.reservation-name-suggestions .reservation-block:hover {
    opacity: .85;
}

/* Come altrove in questo file, il testo del nome/cognome (uno <span> figlio del blocco) va
   riportato esplicitamente ai 14px di .reservation-block-small invece di ereditarli: * { font-size:
   16pt } (01_html.css) lo colpirebbe altrimenti direttamente, essendo un elemento a sé. */
.reservation-name-suggestion-label {
    font-size: inherit;
}

/* Icona di genere davanti al nome suggerito (assente per i cognomi, tabella gender-neutral).
   font-size esplicito (non "inherit" come per le altre etichette di questo file): qui va reso
   volutamente più grande del testo accanto, non semplicemente allineato alla sua stessa
   dimensione -- comunque necessario esplicitarlo, perché * { font-size: 16pt } (01_html.css) si
   applica direttamente a questo <span>, non per sola ereditarietà dal blocco che lo contiene. */
.reservation-name-suggestion-gender {
    margin-right: 4px;
    color: #fff;
    font-size: 20px;
}

/* ===== Numero di persone (passo "In quanti?") =====
   Pulsanti -/+ grandi attorno al numero, sincronizzati con uno slider nativo sotto (accent-color
   invece di uno slider disegnato a mano -- "semplificato" è proprio quello che chiede il nome). */
.reservation-people-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 24px 0 0;
}

.reservation-people-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--brand);
    background-color: #fff;
    color: var(--brand);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.reservation-people-btn:hover:not(:disabled) {
    background-color: var(--brand);
    color: #fff;
}

.reservation-people-btn:disabled {
    opacity: .3;
    cursor: default;
}

#reservation-people-display {
    font-size: 48px;
    font-weight: bold;
    min-width: 70px;
    text-align: center;
}

/* Slider completamente ridisegnato invece di affidarsi ad accent-color: fra "input, select" più
   sopra (che gli passava comunque padding/bordo pensati per i campi di testo, mai esclusi finora
   -- da cui il riquadro grigio visto in Firefox) e le differenze di resa fra Chrome/Firefox di
   accent-color stesso (che smette pure di funzionare non appena si tocca anche un solo pixel
   della track con ::-webkit-slider-runnable-track/::-moz-range-track, tornando al solco spoglio
   di default), provare a limitarsi a ingrandire solo il pin sopra a un aspetto "di serie" non è
   mai risultato affidabile fra i due browser. Qui track e pin hanno invece un proprio colore
   esplicito, uguale ovunque: nessuna dipendenza da come il browser disegna un <input type="range">
   di suo. */
#reservation-people-slider {
    display: block;
    width: 100%;
    margin: 1em 0; /* stessa distanza sopra (dalla riga -/+) e sotto (dai pulsanti Indietro/Avanti) */
    padding: 0;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

#reservation-people-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background-color: #ddd;
}

#reservation-people-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background-color: #ddd;
}

/* Nessuna sintassi condivisa fra webkit/Firefox per il pin, da qui la ripetizione della stessa
   regola: -webkit-appearance:none è indispensabile in Chrome/Safari/Edge per poterne cambiare
   dimensione/forma, Firefox la accetta già di suo. margin-top centra verticalmente il pin (26px)
   sulla track (6px), ora un valore noto perché impostato esplicitamente qui sopra: (26-6)/2. */
#reservation-people-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--brand);
    cursor: pointer;
    margin-top: -10px;
}

#reservation-people-slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--brand);
    border: none;
    cursor: pointer;
}

/*
.reservation {
    padding-top: 1em;
    padding-bottom: 1em;
    color: var(--brand);
}

.reservation > div {
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 1em;
}

.reservation > div:first-of-type {
    padding-top: 0;
}

.reservation input
{
    margin-top: 0.5em;
    padding: 0.3em;
    font-size: 18pt;
    border: 1px solid var(--separator);
    border-radius: 10px;
    color: #000;
    width: 90%;
}

/*.reservation input::placeholder, .reservation input::-ms-input-placeholder, .reservation input:-ms-input-placeholder {
    color: var(--brand);
    opacity: 1;
}*/

/* ===== MOBILE  ===== */
/*@media screen and (max-width: 450px) {
}


*/
/* ===== DESKTOP ===== */
/*@media screen and (min-width: 451px) {

    .diviso2 > div {
        float: left;
        width: 50%;
    }

    .diviso3 > div {
        float: left;
        width: 33%;
    }
}
*/


/* Il passo dei termini usa ora lo switch condiviso (.switch/.switch-label, css/manage.css) al
   posto di questa checkbox personalizzata -- rimossa perché non più usata da nessuna pagina. */

/* ---------------------------------------------------------------------------------------------
   41_food.css
   --------------------------------------------------------------------------------------------- */

.food_warning, .freeze_warning {
    /* Niente più "color: var(--brand)" (rosso del brand): dentro al <dialog> informativo
       condiviso (js/41_food.js, css/99_footer.css) eredita il colore neutro #444 già impostato lì
       per il testo, invece di un colore proprio. */
    margin: .7em 5%;
}

.food_warning *, .freeze_warning * {
    font-size: 10pt;
    text-align: justify;
}

.food_warning h1,
.food_warning h2 {
    font-size: 12pt;
    white-space: revert;
}

.food_warning_list {
    /* Nota: PhpStorm dice che è sbagliato, ma la soluzione proposta corrompe la visualizzazione. */
    padding: revert;
    padding-left: 0;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-top: .3em;
    /* Il pallino di default di un <ul> qui non serve: ogni voce ha già la propria icona
       (.food_warning_list_icon) come indicatore. */
    list-style: none;
}

/* display: flex qui (non solo sull'icona) e non list-style/margin da soli: con l'icona ingrandita
   (.food_warning_list_icon sotto) il testo di una voce lunga va a capo su più righe -- da inline
   (comportamento di default), la riga andata a capo tornerebbe sotto l'icona invece di restare
   allineata a destra di essa. align-items: center (non flex-start, che ancorava l'icona in cima al
   blocco di testo): con una voce di una riga sola -- molto più bassa dell'icona -- il testo
   restava allineato in alto invece che centrato verticalmente su di lei, visibilmente sfalsato.
   center resta corretto anche quando il testo va su più righe (l'icona si centra sull'intero
   blocco, non più ancorata alla prima riga, ma resta comunque alla sua destra). Stessa cosa su
   .freeze_warning p qui sotto, che condivide la stessa icona/stesso problema. */
.food_warning_list li,
.freeze_warning p {
    display: flex;
    align-items: center;
    gap: .5em;
    margin-bottom: .35em;
}

/* Icona di richiamo prima di ciascuna voce della legenda (dentro al popup #food-warning-dialog) e
   prima dell'avviso surgelati: puramente decorativa, aria-hidden -- il testo della voce comunica
   già da solo il significato, l'icona qui è solo un rimando visivo alle stesse icone che
   compaiono accanto ai piatti nel menu. 3.3em, circa 300% dei precedenti 1.1em. */
.food_warning_list_icon {
    width: 3.3em;
    height: 3.3em;
    flex-shrink: 0;
}

/* Icone allergeni/surgelato di un piatto (food.php): colonna centrale a larghezza fissa di
   .food_div (grid, vedi css/shared.css) fra la descrizione e il prezzo -- non più appese in coda
   al testo della descrizione. justify-content: flex-end (non la larghezza della colonna, sempre
   la stessa su ogni riga) allinea le icone a destra AL SUO INTERNO, subito prima del prezzo, sia
   che il piatto ne abbia una sola sia parecchie. A differenza di quelle nella legenda del popup più
   sopra, queste SONO l'informazione (nessun testo equivalente accanto), quindi alt/title portano
   la descrizione -- vedi allergen_icons_html() in .private/includes/functions.php. */
.food-allergen-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .2em;
}

.food-allergen-icon {
    width: 1em;
    height: 1em;
    /* Grigio a riposo (via opacità, non un filtro colore: le icone sono file .svg esterni, di cui
       non conosciamo/controlliamo il fill da qui) per non affollare visivamente la riga del
       piatto -- tornano nere solo al passaggio del mouse, per chi vuole guardarle da vicino.
       :hover soltanto, non :focus-visible: sono immagini informative ma non interattive (niente
       da attivare, l'informazione è già nell'alt per chi naviga da tastiera/screen reader), quindi
       non fanno parte dell'ordine di tabulazione. transition rispetta già prefers-reduced-motion
       (css/shared.css, 00_a11y.css, riduce automaticamente ogni transition-duration del sito). */
    opacity: .45;
    transition: opacity .2s ease;
}

.food-allergen-icon:hover {
    opacity: 1;
}

/* Le due rappresentazioni di ogni allergene (icona/numero in apice) sono SEMPRE entrambe presenti
   in markup -- accanto al piatto (allergen_icons_html()/allergen_numbers_html() in
   .private/includes/functions.php: l'icona resta nella striscia accanto al prezzo, il numero vive
   invece subito dopo la descrizione, come nei menu stampati) e nella legenda del popup "Allergeni
   e prodotti surgelati" (food.php). È il CSS qui sotto a mostrarne una sola ovunque: l'icona di
   default, il numero quando .lists porta la classe .menu-allergens-numbers (preferenza "Numeri in
   apice" di Impostazioni, riflessa da food.php), e comunque sempre il numero sotto la soglia
   mobile qui sotto, a prescindere da quella preferenza -- le icone lascerebbero lì troppo poco
   spazio al prezzo. Grigio, non il rosso del brand: è un rimando discreto, non un'informazione da
   far risaltare quanto la descrizione del piatto. */
.allergen-repr-number {
    display: none;
    font-size: .85em;
    color: #999;
}

/* Un po' di distacco dalla descrizione che lo precede subito (food.php): senza, le cifre in apice
   risulterebbero appiccicate all'ultima lettera del nome del piatto. */
.food_div > div:first-of-type > .allergen-repr-number {
    margin-left: .3em;
}

/* Nella legenda il numero prende il posto dell'icona come indicatore di riga (stessa larghezza
   fissa, 3.3em, di .food_warning_list_icon: cambiare formato non deve spostare il testo legale che
   segue) -- ben più leggibile qui della stessa taglia usata in apice accanto a un piatto, quindi
   sovrascrive font-size/display della regola generica qui sopra invece di riusarla. */
.food_warning_list .allergen-repr-number {
    width: 3.3em;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
}

/* Il surgelato non ha un numero di legge (allergen_numbers_html() in functions.php non gli scrive
   mai un <sup>), ma segue comunque il piatto fin qui come icona propria -- stessa .allergen-repr-
   icon di quella "vera" nella striscia accanto al prezzo (stessa src/dimensione/hover), ma con la
   visibilità AL CONTRARIO: qui va mostrata solo in formato "numeri"/sotto la soglia mobile, quando
   la sua gemella nella striscia (senza questa classe in più) è invece quella nascosta. Le tre
   regole sotto vincono sulle tre regole gemelle qui sopra/sotto per specificità (due classi in più
   invece di una), non per ordine nel foglio di stile. */
.allergen-repr-icon.allergen-numbers-frozen {
    display: none;
    /* Porta anche .food-allergen-icon (allergen_numbers_html() in functions.php): stessa
       larghezza/altezza (1em) già in uso per l'icona surgelato "vera" nella striscia accanto al
       prezzo, non una regola di dimensionamento scritta apposta qui -- niente su cui poter
       sbagliare una seconda volta la stessa cosa. */
    margin-left: .3em;
}

.menu-allergens-numbers .allergen-repr-icon {
    display: none;
}

.menu-allergens-numbers .allergen-repr-icon.allergen-numbers-frozen {
    display: inline;
}

.menu-allergens-numbers .allergen-repr-number {
    display: inline;
}

@media screen and (max-width: 450px) {
    .allergen-repr-icon {
        display: none !important;
    }

    .allergen-repr-icon.allergen-numbers-frozen {
        display: inline !important;
    }

    .allergen-repr-number {
        display: inline !important;
    }

    /* Sotto questa soglia i numeri sono sempre forzati (qui sopra): .food-allergen-icons (la
       colonna centrale da 6em di .food_div, definito in css/shared.css) resta quindi SEMPRE
       vuota -- ogni suo contenuto porta .allergen-repr-icon, appena nascosto qui sopra -- eppure,
       senza queste due regole, .food_div continuerebbe comunque a riservarle 6em, sottraendoli
       alla prima colonna (1fr, la descrizione del piatto): con poco spazio in più (il numero in
       apice, e per un piatto surgelato anche la sua icona) quella colonna già stretta non ce la
       fa più a starci sulla stessa riga della descrizione e va a capo DA SOLA, sotto di essa,
       invece di restarle accanto. Nascondere del tutto la colonna (inutile qui) e restituire il
       suo spazio alla descrizione risolve entrambe le cose. */
    .food-allergen-icons {
        display: none;
    }

    .food_div {
        grid-template-columns: 1fr 4.5em;
    }
}

/* "Mostra i prezzi" spento in Impostazioni: food.php non scrive più affatto la terza colonna
   (4.5em, sempre la stessa impostazione per l'intero menu, non per singolo piatto -- a differenza
   della colonna icone/numeri qui sopra, che resta comunque presente riga per riga anche vuota
   perché varia piatto per piatto) -- .food_div deve quindi ririservarle lo spazio, non lasciarglielo
   comunque vuoto a destra. */
.no-prices .food_div {
    grid-template-columns: 1fr 6em;
}

@media screen and (max-width: 450px) {
    /* Stessa soglia/stesso ragionamento della regola gemella qui sopra (senza .no-prices): sotto
       i 450px la colonna icone è già stata tolta essa stessa (nessuna delle due colonne fisse
       resta), un'unica colonna piena larghezza per la sola descrizione. */
    .no-prices .food_div {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------------------------
   50_directions.css
   --------------------------------------------------------------------------------------------- */

:root {
    --map_width: 1497px;
    --map_height: 696px;
}

.fullsize-band {
    color: #fff;
    background-color: var(--brand);
    display: block;
    width: 100%;
    padding-bottom: 2em;
}

.fullsize-band > div {
    position: relative;
    display: block;
    overflow: auto;
    width: 90%;
    max-width: var(--map_width);
    max-height: var(--map_height);
    height: 500px;
    left: 50%;

    margin-left: calc(max(0px - 90% / 2, 0px - var(--map_width) / 2));
    margin-top: 2em;
    border: 1px solid var(--brand);
    outline: 1px solid #fff;

    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
}

.fullsize-band > div::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.fullsize-band > div > a {
    display: block;
    background: url("/img/map.jpg") no-repeat top left;
    width: var(--map_width);
    height: var(--map_height);
}

/* ---------------------------------------------------------------------------------------------
   99_footer.css
   --------------------------------------------------------------------------------------------- */

/* Footer "sticky" in fondo alla pagina anche quando il contenuto è troppo corto per riempire lo
   schermo (es. una pagina con poco testo): body come colonna flex a tutta altezza, con solo tre
   figli diretti (header, .page-content, footer -- vedi templates/index.php) invece del body
   stesso, per non perdere il collasso dei margini fra gli elementi DENTRO ogni pagina (i figli
   flex non collassano mai i margini fra loro, cosa che avrebbe cambiato la spaziatura interna di
   ogni pagina del sito, non solo la posizione del footer). .page-content assorbe lo spazio
   avanzato (flex: 1 0 auto), spingendo il footer in fondo. Escluso .amministrazione, che gestisce
   già la propria altezza a sé con .admin-shell (60_amministrazione.css) e non include comunque
   questo footer. */
body:not(.amministrazione) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body:not(.amministrazione) > .page-content {
    flex: 1 0 auto;
}

.footer {
    padding: 2em;
    padding-bottom: 2px;
    font-weight: 600;
    color: #fff;
    background-color: var(--brand);
}

.footer a, .footer a:hover, .footer a:active, .footer a:visited
{
    position: relative;
    top: 0;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    -webkit-transition: top 250ms ease-out;
    -moz-transition: top 250ms ease-out;
    -o-transition: top 250ms ease-out;
    transition: top 250ms ease-out;
}

.footer a:hover
{
    top: -4px;
}

.footer .social div
{
    text-align: center;
    padding-bottom: 1em;
}

.footer .social a, .footer .social a:hover, .footer .social a:active, .footer .social a:visited,
.footer .social a i, .footer .social a:hover i, .footer .social a:active i, .footer .social a:visited i
{
    font-size: 48pt;
}

.footer .social div a
{
    padding-right: 20px;
}

.footer .social div a:last-of-type
{
    padding: 0;
}

/* Sostituisce .header_social (rimossa da 05_header.css): stessa dimensione delle icone, ma qui
   .footer_top_row affianca .link_utils e .footer_social in una riga flex, centrata verticalmente
   sull'altezza reale della riga (le icone, più alte del testo dei link, sporgono simmetricamente
   sopra/sotto grazie ad align-items: center) invece che su un'altezza fissa come nell'header. */
@media screen and (min-width: 451px) {
    .footer_top_row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .footer_social a, .footer_social a:hover, .footer_social a:active, .footer_social a:visited,
    .footer_social a i, .footer_social a:hover i, .footer_social a:active i, .footer_social a:visited i {
        font-size: 48pt;
        padding-right: 10px;
    }

    .footer_social a i:before, .footer_social a:hover i:before, .footer_social a:active i:before, .footer_social a:visited i:before {
        margin: 0;
        display: inline;
    }

    .footer_social a:last-of-type {
        padding-right: 0;
    }
}

.footer ul
{
    list-style-type: none;
    padding-bottom: 1em;
}

@media screen and (max-width: 450px)
{
    .footer ul li
    {
        line-height: 2em;
    }
}

@media screen and (min-width: 451px)
{
    .footer ul li
    {
        margin: 0 auto;
    }

    .footer ul li
    {
        float: left;
        padding-right: 5em;
    }

    .footer ul li:last-of-type
    {
        padding-right: 0;
    }
}


.footer_separator
{
    display: block;
    height: 1px;
    background-color: var(--separator);
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Popup di Privacy Policy/Cookie Policy/Termini di servizio (js/99_footer.js): <dialog> nativo,
   look & feel ricalcato da .modal-box (65_modal.css) ma senza tutto ciò che qui non serve
   (bottoni, timer, ecc. -- sono popup di sola lettura con un solo bottone di chiusura). */
.info-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    width: 800px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    color: #444;
    font-weight: normal;
}

.info-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.55);
}

.info-dialog .dialog-body {
    padding: 28px;
    font-size: 11pt;
    line-height: 1.5;
    max-height: calc(100vh - 32px - 56px);
    overflow-y: auto;
}

.info-dialog .dialog-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    padding: 4px;
}

.info-dialog .dialog-close:hover {
    color: #666;
}

/* #privacy-dialog/#terms-dialog (.private/templates/index.php): stesse regole prima nel <style>
   proprio di static/privacy.php/terms.php, ora semplici <dialog class="info-dialog"> come
   #food-warning-dialog (css/site.css più sopra ne eredita già larghezza/scroll/bottone di
   chiusura). Selettori raggruppati: le due sezioni condividono lo stesso trattamento di titoli e
   paragrafi, solo terms-of-service ha in più gli elenchi puntati dei paragrafi "Utilizzo non
   consentito"/"Limitazioni di responsabilità". */
.privacy-detail a,
.terms-of-service a {
    color: var(--brand);
}

.privacy-detail h1,
.terms-of-service h1,
.privacy-detail h2,
.terms-of-service h2 {
    font-size: 20pt;
    white-space: break-spaces;
    text-align: justify;
    margin-right: 1em;
}

.privacy-detail p,
.terms-of-service p {
    text-align: justify;
    margin-bottom: .7em;
    margin-right: 1em;
}

.terms-of-service ul {
    list-style: circle;
    list-style-position: inside;
}

.terms-of-service ul li {
    margin-bottom: .2em;
}

/* ---------------------------------------------------------------------------------------------
   100_maintenance.css
   --------------------------------------------------------------------------------------------- */

/* "Sito in manutenzione" (.private/pages/maintenance.php, mostrata da index.php al posto di
   qualunque pagina quando site_maintenance = 'Y' per chi non ha una sessione amministratore
   attiva -- vedi il commento lì): stessa idea a piena altezza di .error-404 (shared.css), contenuto
   diverso. */
.maintenance-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 32px 16px;
    text-align: center;
}

/* work-in-progress.svg è un file esterno referenziato via mask-image, non un <img>: i suoi path
   hanno un fill fisso (nero) che un <img src> non lascerebbe ricolorare da CSS, mentre una maschera
   permette di "ritagliarla" da un elemento colorato con background-color -- var(--brand), come il
   resto del sito. -webkit-mask ripetuto per Safari, che non supporta ancora "mask" senza prefisso
   per questo caso d'uso. aspect-ratio (le stesse proporzioni del viewBox dell'SVG, 404x359) invece
   di un'altezza fissa: si scala con la larghezza qui sotto senza deformarsi.
   */
.maintenance-illustration {
    width: min(280px, 60vw);
    aspect-ratio: 404 / 359;
    margin: 0 auto 24px;
    background-color: var(--brand);
    -webkit-mask: url("/img/work-in-progress.svg") no-repeat center / contain;
    mask: url("/img/work-in-progress.svg") no-repeat center / contain;
}

.maintenance-title {
    font-size: 20pt;
    font-weight: bold;
    color: var(--brand);
    margin-bottom: 8px;
}

.maintenance-subtitle {
    font-size: 12pt;
    color: #666;
}