/* ==========================================================================
   "Sono in spiaggia": l'app del cliente che e' GIA' dentro.
   Si apre col telefono in mano, sotto il sole, spesso con una mano sola e i
   piedi bagnati: caratteri grandi, bersagli larghi, una decisione per
   schermata. Le prime tre schermate portano dentro; la quarta E' l'app.
   ========================================================================== */
/* Il fondo e' di SABBIA, come il resto del prodotto: le cose da toccare sono
   bianche e ci stanno sopra. Con la pagina bianca e le schede bianche non si
   staccava niente, e l'app sembrava un foglio con dentro dei bordi. */
body { background: var(--sabbia); }
.q-schermo {
    min-height: 100dvh;
    padding: 1.4rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column;
}
.q-testa { margin-bottom: 1.2rem; }
.q-testa h1 { font-size: 1.5rem; margin: .2rem 0 .3rem; }
.q-testa p { color: var(--muto); font-size: .92rem; margin: 0; }
.q-dove {
    font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--blu-chiaro);
}

/* 1. sto cercando */
#s-cerco { color: #fff; }
.q-centro { margin: auto; text-align: center; }
.q-centro h1 { font-size: 1.6rem; margin: 1.2rem 0 .3rem; }
.q-centro p { opacity: .85; margin: 0; }
.q-radar {
    width: 84px; height: 84px; margin: 0 auto; border-radius: 50%;
    display: grid; place-items: center; font-size: 2rem;
    background: rgba(255, 255, 255, .12);
    animation: pulsa 1.6s ease-in-out infinite;
}
@keyframes pulsa {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); }
    50% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); }
}
.mt-3 { margin-top: 1.2rem; }

/* 2. scegli la spiaggia */
.q-elenco { display: grid; gap: .6rem; }
.q-voce, .q-posto, .q-servizio {
    display: flex; align-items: center; gap: .8rem; width: 100%;
    padding: .9rem 1rem; text-align: left; font: inherit;
    background: #fff; border: 1.5px solid var(--bordo); border-radius: 14px;
    color: var(--testo); text-decoration: none; cursor: pointer;
}
.q-voce:active, .q-posto:active, .q-servizio:active { transform: scale(.99); }
.q-voce span { flex: 1; }
.q-luogo { display: block; font-size: .82rem; color: var(--muto); }
.q-vuoto { text-align: center; color: var(--muto); padding: 2rem 1rem; font-size: .9rem; }

/* 3. quale postazione */
.q-candidati { display: grid; gap: .5rem; margin-bottom: 1.6rem; }
.q-posto.occupato { background: #fbf7f2; }
.qp-num {
    min-width: 3rem; height: 3rem; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--sabbia); border: 1px solid var(--sabbia-scura);
    font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.qp-mid { flex: 1; display: grid; gap: .15rem; }
.qp-tipo { display: flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 600; }
.qp-tipo .bi { color: var(--blu-chiaro); }
.qp-libero { font-size: .78rem; color: var(--verde); font-weight: 600; }
/* CL-07: le iniziali, mai il nome. */
.qp-chi {
    font-size: .78rem; color: var(--muto); background: var(--sabbia);
    border-radius: 999px; padding: 0 .45rem; justify-self: start;
}
.qp-dist { font-size: .8rem; color: var(--muto); white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-manuale { margin-top: auto; padding-top: 1.2rem; border-top: 1px dashed var(--bordo); }
.q-manuale label { display: block; font-size: .82rem; color: var(--muto); margin-bottom: .4rem; }
.q-manuale-riga { display: flex; gap: .5rem; }
.q-manuale-riga input {
    flex: 1; font: inherit; font-size: 1.1rem; padding: .7rem .8rem;
    border: 1.5px solid var(--bordo); border-radius: 12px;
    text-align: center; font-variant-numeric: tabular-nums;
}
.q-errore { margin-top: .5rem; font-size: .85rem; font-weight: 600; color: #c0392b; }

/* ==========================================================================
   4. L'APP: la spiaggia, i servizi, la mappa
   ========================================================================== */
.q-app { min-height: 100dvh; background: var(--sabbia); padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
.q-barra {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: .8rem;
    /* IL BLU SCENDE, come in tutto il resto del sito: parte esattamente dal
       colore con cui finisce la riga del marchio qui sopra — cosi' fra le due
       bande non c'e' scalino, e' una discesa sola — e schiarisce verso il
       mare. Era una diagonale a 135 gradi, piu' chiara a SINISTRA: contro la
       riga scura sopra faceva un gradino netto, ed era l'unico posto del sito
       dove il blu andava di traverso invece che dall'alto in basso. */
    background: linear-gradient(180deg, var(--testata) 0%, #1b6489 100%);
    color: #fff; padding: .85rem 1rem;
    box-shadow: 0 2px 14px rgba(6, 26, 38, .22);
}
.q-barra-testo { flex: 1; display: grid; line-height: 1.25; min-width: 0; }
.q-barra .q-dove { color: rgba(255,255,255,.7); }
.q-barra strong { font-size: 1.05rem; }
.q-barra-btn {
    width: 40px; height: 40px; border-radius: 10px; border: 0;
    background: rgba(255,255,255,.14); color: #fff; font-size: 1.15rem; cursor: pointer;
}
/* Il proprio ombrellone, facoltativo (CL-14, G4): una pastiglia con la
   parola, non un'icona sola — "indica l'ombrellone" deve leggersi come un
   invito, e un'icona di frecce circolari sembrava "ricarica la pagina". */
.q-barra-posto {
    display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
    background: rgba(255,255,255,.14); color: #fff;
    padding: .45rem .85rem; font: inherit; font-size: .84rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.q-barra-posto:hover { background: rgba(255,255,255,.24); }
.q-barra-posto .bi { color: #f2913f; }

/* Il testo della barra si accorcia, non va a capo: sul telefono accanto ci
   sono l'icona degli ordini e la pastiglia dell'ombrellone. */
.q-barra-testo > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── gli ordini di oggi (G4, rivisti il 24/09) ───────────────────────────
   Erano una striscia in cima alla home che spingeva giu' la mappa. Ora
   stanno in un pannello: a sinistra sugli schermi larghi, dal basso sui
   telefoni. Chiuso, dice quanti sono e diventa verde quando uno e' pronto. */
.q-ordini { display: grid; gap: .5rem; }
.q-ordine {
    display: flex; align-items: center; gap: .8rem; width: 100%;
    padding: .7rem .9rem; text-align: left; font: inherit; color: var(--testo);
    background: #fff; border: 1px solid var(--sabbia-scura); border-radius: 14px;
    box-shadow: 0 2px 8px rgba(20, 65, 94, .07); cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* si tocca: al passaggio si alza e prende il colore, come i servizi */
.q-ordine:hover {
    border-color: var(--blu-chiaro); transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(20, 65, 94, .14);
}
.q-ordine:active { transform: scale(.99); }
.q-ordine:focus-visible { outline: 3px solid rgba(46, 134, 193, .45); outline-offset: 2px; }
.q-ordine > .bi { color: var(--blu-chiaro); transition: transform .15s ease; }
.q-ordine:hover > .bi { transform: translateX(3px); }
.q-ordine-num {
    min-width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center;
    background: var(--blu); color: #fff; font-weight: 700; font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}
.q-ordine-testo { flex: 1; display: grid; gap: .1rem; line-height: 1.3; min-width: 0; }
.q-ordine-testo span { font-size: .82rem; color: var(--muto); }
.q-ordine.pronto { border-color: var(--verde); }
.q-ordine.pronto .q-ordine-num { background: var(--verde); }
.q-ordine.pronto .q-ordine-testo span { color: var(--verde); font-weight: 600; }

/* il numero degli ordini, sulla maniglia e sull'icona in barra */
.q-conta {
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    display: inline-grid; place-items: center;
    background: var(--blu); color: #fff; font-size: .76rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pronto .q-conta { background: var(--verde); animation: q-pronto 1.6s ease-out infinite; }
@keyframes q-pronto {
    0% { box-shadow: 0 0 0 0 rgba(30, 132, 73, .55); }
    100% { box-shadow: 0 0 0 10px rgba(30, 132, 73, 0); }
}

/* l'icona in barra (schermi stretti) */
.q-barra-ordini {
    position: relative; flex-shrink: 0;
    width: 42px; height: 40px; border-radius: 12px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.14);
    color: #fff; font-size: 1.15rem;
}
.q-barra-ordini:hover { background: rgba(255,255,255,.24); }
.q-barra-ordini .q-conta {
    position: absolute; top: -7px; right: -7px;
    border: 2px solid #1b5f84;
}
.q-barra-ordini.pronto { border-color: #7fe0a7; }

/* i pannelli */
.q-lato { display: none; }
.q-lato-pannello {
    background: #fff; border: 1px solid var(--sabbia-scura);
    box-shadow: 0 14px 36px rgba(20, 65, 94, .2);
}
.q-lato-testa {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .7rem;
}
.q-lato-testa h2 {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--muto); margin: 0; font-weight: 700;
}
.q-lato-chiudi {
    border: 0; background: none; font-size: 1.7rem; line-height: 1;
    color: var(--muto); cursor: pointer; padding: 0 .2rem;
}
.q-lato-chiudi:hover { color: var(--testo); }
.q-lato .q-link:first-of-type { border-top: 0; }
/* dentro il pannello le notifiche sono una riga di sabbia, non una scheda */
.q-lato .q-notifiche {
    margin: .8rem 0 0; padding: .8rem .9rem;
    background: var(--sabbia); border-color: transparent; box-shadow: none;
}
.q-velo { position: fixed; inset: 0; z-index: 44; background: rgba(15, 30, 40, .45); }

/* l'avviso "e' pronto": in alto, per qualche secondo, e si tocca */
.q-avviso {
    position: fixed; z-index: 60; left: 50%; top: 84px; transform: translateX(-50%);
    display: flex; align-items: center; gap: .6rem;
    /* senza max-content, con left:50% la larghezza disponibile e' meta'
       schermo e anche una frase corta va a capo */
    width: max-content; max-width: calc(100vw - 32px); padding: .7rem 1.1rem;
    background: var(--verde); color: #fff; border: 0; border-radius: 999px;
    font: inherit; font-weight: 600; cursor: pointer;
    box-shadow: 0 12px 30px rgba(20, 65, 94, .3);
    animation: q-avviso-entra var(--f-cambio) var(--f-esce);
}
@keyframes q-avviso-entra {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* SCHERMI STRETTI: gli ordini salgono dal basso, come il carrello */
@media (max-width: 1359.98px) {
    .q-lato.sinistra {
        display: block; position: fixed; z-index: 46; left: 50%; bottom: 0;
        width: min(520px, 100%);
        transform: translate(-50%, 105%); visibility: hidden;
        transition: transform .25s ease, visibility .25s;
    }
    .q-lato.sinistra.aperto { transform: translate(-50%, 0); visibility: visible; }
    .q-lato.sinistra .q-lato-pannello {
        border-radius: 20px 20px 0 0; max-height: 80vh; overflow-y: auto;
        padding: 1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    }
    .q-lato-maniglia { display: none; }
}

/* SCHERMI LARGHI: ai lati, nei margini della colonna (1240px). Le maniglie
   restano sempre in vista; il pannello esce e rientra scorrendo, sopra il
   margine, senza spostare il centro. */
@media (min-width: 1360px) {
    body.in-app .q-lato {
        display: flex; align-items: flex-start;
        position: fixed; top: 150px; z-index: 35;
        transition: transform .25s ease;
    }
    body.in-app .q-lato.sinistra:not(.ha-ordini) { display: none; }
    .q-lato.sinistra { left: 0; transform: translateX(-320px); }
    .q-lato.destra { right: 0; transform: translateX(300px); }
    .q-lato.aperto { transform: none; }
    .q-lato-pannello {
        max-height: calc(100vh - 180px); overflow-y: auto; padding: 1rem;
        transition: visibility .25s;
    }
    /* chiuso non c'e': ne' la sua ombra lungo il bordo, ne' i suoi tasti
       raggiungibili col tabulatore */
    .q-lato:not(.aperto) .q-lato-pannello { visibility: hidden; }
    .q-lato.sinistra .q-lato-pannello { width: 320px; border-radius: 0 16px 16px 0; border-left: 0; }
    .q-lato.destra .q-lato-pannello { width: 300px; border-radius: 16px 0 0 16px; border-right: 0; }
    .q-lato-maniglia {
        display: grid; justify-items: center; gap: .45rem;
        width: 56px; padding: .85rem .3rem; margin-top: .9rem;
        background: #fff; border: 1px solid var(--sabbia-scura); color: var(--blu);
        box-shadow: 0 8px 20px rgba(20, 65, 94, .16);
        font: inherit; cursor: pointer;
        transition: background-color .15s, border-color .15s;
    }
    .q-lato.sinistra .q-lato-maniglia { border-radius: 0 14px 14px 0; border-left: 0; }
    .q-lato.destra .q-lato-maniglia { border-radius: 14px 0 0 14px; border-right: 0; }
    .q-lato-maniglia:hover { background: #f2f8fb; border-color: var(--blu-chiaro); }
    .q-lato-maniglia .bi { font-size: 1.3rem; }
    .q-maniglia-eti {
        writing-mode: vertical-rl; transform: rotate(180deg);
        font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    }
    .q-lato.pronto .q-lato-maniglia { border-color: var(--verde); color: var(--verde); }
    /* sugli schermi larghi l'icona in barra e i link in fondo non servono:
       ci sono i pannelli */
    .q-barra-ordini { display: none !important; }
    .q-piede { display: none; }
}

/* La riva sotto la barra: il mare finisce sulla sabbia con la battigia, come
   sui risultati e sulle copertine. Il disegno e' .riva in spiaggia.css — qui
   si dice solo che e' piu' bassa (in un'app che si usa in piedi sotto il sole
   lo spazio in verticale e' quello che serve ai servizi) e da che blu parte:
   quello con cui finisce la barra. */
.q-app > .riva {
    --riva-h: 44px;
    --riva-cima: #1b6489;
    --riva-bagnasciuga: 13px;
    --riva-schiuma: 5px;
    --riva-sabbia: var(--sabbia);
}

/* la mappa: i servizi sono i bottoni, gli ombrelloni il contesto */
/* UNA CORNICE BIANCA VERA, non un bordo da un pixel: il disegno della
   spiaggia e' di sabbia e sta su una pagina di sabbia, e finche' il vetro
   arrivava fino al bordo della cornice non si capiva dove finisse la mappa e
   cominciasse il fondo. Gli 8px di bianco intorno sono quello che separa —
   come il passe-partout di una stampa. */
.q-mappa-fuori {
    background: #fff; border: 1px solid rgba(20, 65, 94, .16);
    border-radius: 16px; padding: 8px;
    box-shadow: 0 6px 20px rgba(20, 65, 94, .1);
}
.q-mappa-viewport {
    position: relative; height: 46vh; min-height: 260px; max-height: 420px;
    overflow: hidden; background: #f4efe3; touch-action: none; cursor: grab;
    border: 1px solid #e3d7bd; border-radius: 10px;
    /* Senza, trascinando si selezionava il testo delle etichette e restava
       l'evidenziazione azzurra sugli oggetti. */
    user-select: none; -webkit-user-select: none;
}
.q-mappa-viewport.in-movimento { cursor: grabbing; }
/* Mentre si sposta la mappa gli oggetti non ricevono clic: altrimenti il
   servizio sotto il cursore si apriva alla fine del trascinamento. */
.q-mappa-viewport.in-movimento .q-item { pointer-events: none; }
.q-mappa { position: absolute; left: 0; top: 0; }
.q-item { position: absolute; pointer-events: none; }
.q-item img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    /* un'immagine e' trascinabile di suo: e' da li' che partiva il drag&drop
       del browser, che poi si mangiava il rilascio del pulsante */
    -webkit-user-drag: none; user-drag: none; pointer-events: none;
}
/* Gli ombrelloni sono il contesto, i servizi i bottoni: si spengono un po'
   perche' l'occhio vada sui secondi. Erano spenti troppo (.55 e saturazione
   a .6) e la mappa sembrava scolorita — ora che i locali hanno l'etichetta
   scura e il contorno, basta molto meno. */
.q-item:not(.servizio):not(.mio) img { opacity: .82; }
.q-item.servizio { pointer-events: auto; cursor: pointer; }
/* Il cartellino col nome e' piu' grande dello sprite ed e' quello che si
   legge: chi vuole la gelateria punta la parola "Gelateria", non il tetto.
   Vale come l'oggetto — sta dentro di lui, quindi apre lo stesso servizio. */
.q-item.servizio .q-item-eti { pointer-events: auto; cursor: pointer; }
.q-item.servizio img { filter: drop-shadow(0 2px 6px rgba(20,65,94,.45)); }
.q-item-eti {
    position: absolute; left: 50%; top: 100%; transform: translate(-50%, 2px);
    background: var(--blu); color: #fff; font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap; pointer-events: none;
}
.q-item.mio img { opacity: 1; filter: none; }
.q-item.mio::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 3px solid var(--arancio); animation: q-tu 1.8s ease-out infinite;
}
@keyframes q-tu {
    0% { box-shadow: 0 0 0 0 rgba(217,72,15,.45); }
    100% { box-shadow: 0 0 0 14px rgba(217,72,15,0); }
}
.q-item-tu {
    position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px);
    background: var(--arancio); color: #fff; font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 999px; pointer-events: none;
}
.q-mappa-nota {
    display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem;
    font-size: .8rem; color: var(--muto);
    /* Niente riga di separazione: il bianco della cornice separa gia', e due
       segni per la stessa cosa fanno un doppio filetto. */
    background: #fff;
}

.q-sezione { padding: 1.1rem 1rem .2rem; }
.q-sezione h2 {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--muto); margin: 0 0 .6rem; font-weight: 700;
}
.q-servizi { display: grid; gap: .6rem; }
/* Le stesse schede dei locali sulla vetrina pubblica: sabbia sfumata,
   bordo, e un sollevamento al passaggio. Erano riquadri bianchi col bordo
   grigio, cioe' la forma di un campo da compilare. */
.q-servizio {
    padding: .8rem .9rem;
    background: linear-gradient(160deg, #fdfaf3 0%, var(--sabbia) 100%);
    border-color: var(--sabbia-scura); border-width: 1px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.q-servizio:hover {
    border-color: var(--blu-chiaro); transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(20, 65, 94, .12);
}
.q-serv-icona {
    width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.3rem; color: var(--blu-chiaro);
    background: #fff; border: 1px solid var(--sabbia-scura);
    box-shadow: 0 2px 6px rgba(20, 65, 94, .08);
    background-size: cover; background-position: center;
}
.q-servizio.con-foto .q-serv-icona { background-color: var(--sabbia-scura); }
.q-serv-testo { flex: 1; display: grid; gap: .1rem; line-height: 1.3; min-width: 0; }
.q-serv-testo strong { font-size: 1rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.q-serv-testo span { font-size: .82rem; color: var(--muto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-tag {
    font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: .15rem .45rem; border-radius: 999px;
}
.q-tag.aperto { background: #d5f5e3; color: #14663a; }
.q-tag.chiuso { background: #eceff1; color: #607d8b; }

.q-notifiche {
    display: flex; align-items: center; gap: .9rem; margin: 1rem;
    padding: .95rem 1rem; background: #fff;
    border: 1px solid var(--sabbia-scura); border-radius: 16px;
    box-shadow: 0 2px 10px rgba(20, 65, 94, .06);
}
.qn-testo { flex: 1; display: grid; gap: .15rem; }
.qn-testo span { font-size: .8rem; color: var(--muto); }
.qn-testo span:empty { display: none; }
.q-notifiche .pub-btn { white-space: nowrap; }

.q-piede { display: grid; gap: .4rem; padding: .4rem 1rem 1rem; }
.q-link {
    display: flex; align-items: center; gap: .6rem; padding: .7rem .2rem;
    color: var(--blu); font-weight: 600; text-decoration: none; font-size: .92rem;
    border-top: 1px dashed var(--sabbia-scura);
}

/* ==========================================================================
   5. IL SERVIZIO: copertina, informazioni, menu' (ordinabile), tavoli
   ========================================================================== */
.q-cover {
    position: relative; height: 200px;
    /* IL BLU SCENDE, come la barra della home e come tutto il resto del sito:
       parte dal colore con cui finisce la riga del marchio qui sopra — quindi
       fra le due bande non c'e' scalino — si apre sul mare a meta' e torna
       scuro in fondo, dove ci va sopra il nome del locale in bianco.
       Era una diagonale a 135 gradi, piu' chiara a SINISTRA: contro la riga
       scura sopra saltava all'occhio proprio dal lato da cui si legge.
       Con una foto del locale questa sfumatura non si vede: la sostituisce
       l'immagine, e al testo ci pensa il velo. */
    background: linear-gradient(180deg, var(--testata) 0%, #2b7ea8 52%, #16506f 100%);
    background-size: cover; background-position: center; color: #fff;
}
.q-cover.con-foto::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.6) 100%);
}
.q-indietro {
    position: absolute; left: .8rem; top: .8rem; z-index: 2;
    width: 40px; height: 40px; border-radius: 12px; border: 0;
    background: rgba(255,255,255,.92); color: var(--blu); font-size: 1.15rem; cursor: pointer;
}
.q-aperto {
    position: absolute; right: .8rem; top: .9rem; z-index: 2;
    background: rgba(255,255,255,.92); color: #14663a; font-size: .68rem; font-weight: 700;
    padding: .3rem .55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.q-cover-nome { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2; }
.q-cover-nome h1 { margin: 0; font-size: 1.7rem; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.q-cover-nome span { font-size: .9rem; opacity: .95; text-shadow: 0 1px 4px rgba(0,0,0,.4); }

.q-servizio-corpo { background: #fff; padding: 1rem 1rem 1.5rem; min-height: 60vh; }
.q-desc { margin: 0 0 .8rem; font-size: .92rem; line-height: 1.5; }
.q-info { display: grid; gap: .35rem; margin-bottom: .6rem; font-size: .86rem; }
.q-info > span { display: flex; align-items: center; gap: .5rem; }
.q-info i { color: var(--muto); }
.q-info a { color: var(--blu); text-decoration: none; font-weight: 600; }

.q-chiuso {
    background: var(--sabbia); border-radius: 12px; padding: .7rem .9rem;
    font-size: .86rem; color: var(--muto); margin: .6rem 0 .9rem;
}
.q-eti { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muto); font-weight: 700; margin: .9rem 0 .5rem; }
.q-evid-carte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.q-evid-carta {
    border: 1px solid var(--sabbia-scura); border-radius: 14px; background: #fff;
    padding: 0; overflow: hidden; text-align: left; font: inherit; cursor: pointer;
    display: grid; line-height: 1.25;
}
.q-evid-carta:disabled { cursor: default; }
.q-evid-carta:active:not(:disabled) { transform: scale(.98); }
.q-evid-img {
    height: 74px; display: block;
    background: linear-gradient(135deg, #d6eaf8, #fdebd0); background-size: cover; background-position: center;
}
.q-evid-carta strong { font-size: .8rem; padding: .4rem .5rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-evid-carta span { font-size: .78rem; color: var(--blu); font-weight: 700; padding: 0 .5rem .45rem; }

.q-capitoli {
    display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
    position: sticky; top: 0; background: #fff; padding: .7rem 0; z-index: 5; margin: .3rem 0;
}
.q-capitoli::-webkit-scrollbar { display: none; }
.q-cap {
    border: 0; border-radius: 999px; padding: .45rem .85rem; font: inherit; font-size: .84rem;
    font-weight: 600; background: var(--sabbia); color: var(--blu); white-space: nowrap; cursor: pointer;
}
.q-cap.on { background: var(--blu); color: #fff; }

/* le voci del menu' riusano gli stili della vetrina (men-sezione, men-piu) */
.men-sezione { margin-top: 1rem; }
.men-piu.fatto { background: var(--verde); border-color: var(--verde); color: #fff; transform: scale(1.12); }

/* ==========================================================================
   SCHERMI LARGHI
   Questa pagina era scritta SOLO per il telefono: 236 righe senza un
   max-width e senza una media query. Aperta su un computer le righe dei
   servizi si stiravano da un bordo all'altro e i prezzi della carta
   finivano a mezzo metro dal nome del piatto. Non e' mal disegnata, e' che
   non aveva un layout per il caso in cui lo schermo e' grande.
   La colonna e' quella del resto del sito (base.css), non una sua.
   ========================================================================== */
@media (min-width: 760px) {
    /* LE SCHERMATE D'INGRESSO SONO STRETTE.
       "In quale spiaggia sei?" e "Dove sei seduto?" fanno UNA domanda: su un
       monitor da 1920 il campo di ricerca diventava un nastro lungo due
       metri sopra una colonnina di bagni, e le due cose non erano nemmeno
       larghe uguali. Una colonna da 560 e' quella delle altre porte
       d'ingresso del prodotto, e ci sta tutto allineato.
       L'app vera (#s-home, #s-servizio) usa invece la colonna larga del
       sito: li' c'e' una mappa e un menu', non una domanda. */
    #s-cerco > *, #s-scegli > *, #s-postazione > * {
        max-width: 560px; margin-inline: auto; width: 100%;
    }
    .q-schermo { padding-left: var(--fianco); padding-right: var(--fianco); }
    .q-app > *:not(.q-barra):not(.riva),
    .q-barra,
    .q-mappa-nota,
    .q-servizio-corpo {
        max-width: var(--colonna); margin-inline: auto;
    }
    /* La barra sta nella colonna ma il suo fondo blu arriva ai bordi: e' la
       testata, non un riquadro. */
    .q-barra { width: 100%; }
    .q-app > .q-barra { max-width: none; }
    .q-barra > * { }
    .q-barra { padding-inline: calc((100vw - min(100vw, var(--colonna))) / 2 + var(--fianco)); }
    .q-mappa-viewport { height: 54vh; max-height: 540px; }
    /* i servizi a due colonne: a tutta larghezza una riga sola per un bar
       era un nastro con tre parole in mezzo */
    .q-servizi { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
}

/* Senza GPS non ci sono postazioni da proporre: si dice cosa fare, invece di
   lasciare mezza schermata bianca che sembra un caricamento mai finito. */
.q-niente-vicino {
    display: grid; justify-items: center; gap: .35rem; text-align: center;
    padding: 2rem 1rem; color: var(--muto);
    background: var(--sabbia); border: 1px dashed var(--sabbia-scura);
    border-radius: 16px;
}
.q-niente-vicino .bi { font-size: 1.8rem; color: var(--blu-chiaro); }
.q-niente-vicino strong { color: var(--testo); font-size: 1rem; }
.q-niente-vicino span { font-size: .88rem; line-height: 1.45; max-width: 30ch; }

/* I comandi della mappa, sopra di lei come su una mappa vera. Servono a dire
   che e' una mappa ingrandita e navigabile: senza, la vista centrata sulla
   propria postazione sembrava un'immagine tagliata male. */
.q-mappa-comandi {
    position: absolute; right: 10px; top: 10px; z-index: 5;
    display: grid; gap: 6px;
}
.q-zoom {
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center; font-size: 1rem;
    background: rgba(255, 255, 255, .94); color: var(--blu);
    border: 1px solid var(--sabbia-scura); cursor: pointer;
    box-shadow: 0 2px 8px rgba(20, 65, 94, .16);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.q-zoom:hover { background: #fff; border-color: var(--blu-chiaro); }
.q-zoom-io { color: var(--arancio); }

/* ─── scegliere la spiaggia: cercare, non scorrere ─── */
.q-cerca {
    display: flex; align-items: center; gap: .6rem;
    background: #fff; border: 1.5px solid var(--bordo); border-radius: 14px;
    padding: .2rem .9rem; margin-bottom: .9rem;
}
.q-cerca .bi { color: var(--muto); font-size: .95rem; }
.q-cerca input {
    flex: 1; border: 0; outline: none; font: inherit; font-size: 1rem;
    padding: .7rem 0; background: transparent; color: var(--testo);
    min-width: 0;
}
.q-cerca input::placeholder { color: var(--muto); }
.q-cerca:focus-within {
    border-color: var(--arancio);
    box-shadow: 0 0 0 .2rem rgba(232, 98, 30, .18);
}

/* Raggruppate per localita': un elenco alfabetico di bagni e' una lista di
   nomi che si somigliano tutti, e la localita' e' l'unica cosa che chi e'
   in spiaggia sa per certo. */
.q-gruppo + .q-gruppo { margin-top: 1.1rem; }
.q-gruppo h3 {
    display: flex; align-items: center; gap: .45rem;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--muto); font-weight: 700; margin: 0 0 .5rem;
}
.q-gruppo h3 .bi { color: var(--blu-chiaro); font-size: .85rem; }
.q-gruppo h3 span {
    margin-left: auto; letter-spacing: 0; font-size: .7rem;
    background: #fff; border: 1px solid var(--sabbia-scura);
    border-radius: 999px; padding: .05rem .45rem;
}
.q-gruppo .q-voce + .q-voce { margin-top: .45rem; }


/* ─── la scena dietro le schermate d'ingresso ───
   Sta in fondo alla PAGINA, non in fondo allo schermo. Fissa era sbagliato:
   l'elenco dei bagni e' lungo e scorre, e la striscia di sabbia restava
   piantata a meta' schermata tagliando le voci in due — il titolo di un
   gruppo ci finiva sopra, bianco su sabbia, illeggibile.
   Per lo stesso motivo il gradiente del corpo non e' piu' "fixed": cosi' si
   misura sull'altezza del documento e la sabbia cade dove finisce. */
body.scena-corpo { background-attachment: scroll; position: relative; }
.scena-fissa { position: absolute; inset: 0; z-index: 0; }
.q-schermo { position: relative; z-index: 1; }

/* Sul mare il testo e' bianco: il titolo e il sottotitolo erano scuri
   perche' il fondo era di sabbia. */
body.scena-corpo .q-testa h1,
body.scena-corpo .q-testa .q-dove { color: #fff; }
body.scena-corpo .q-testa p { color: rgba(255, 255, 255, .88); }
body.scena-corpo .q-vuoto { color: rgba(255, 255, 255, .85); }
/* L'elenco e il campo restano bianchi e si staccano dal mare da soli: un
   bordo grigio sul blu sarebbe sporco. */
body.scena-corpo .q-voce,
body.scena-corpo .q-posto,
body.scena-corpo .q-cerca {
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(6, 26, 38, .18);
}
body.scena-corpo .q-gruppo h3 { color: rgba(255, 255, 255, .8); }
body.scena-corpo .q-gruppo h3 .bi { color: #f2913f; }
body.scena-corpo .q-gruppo h3 span {
    background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28);
    color: #fff;
}
body.scena-corpo .q-manuale label { color: rgba(255, 255, 255, .88); }
body.scena-corpo .q-niente-vicino {
    background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3);
    color: rgba(255, 255, 255, .85);
}
body.scena-corpo .q-niente-vicino strong { color: #fff; }
body.scena-corpo .q-niente-vicino .bi { color: #f2913f; }
/* Sotto c'e' la sabbia della scena: le schermate le lasciano spazio. */
body.scena-corpo .q-schermo { padding-bottom: 7rem; }

/* ─── il fondo dell'app ───
   Qui NON va la scena di mare delle schermate d'ingresso: al centro c'e' la
   mappa, che e' gia' una spiaggia vista dall'alto, e una seconda spiaggia
   disegnata sotto sarebbero due spiagge sovrapposte.
   Va invece il mare della barra che scende nella sabbia: la pagina comincia
   dall'acqua e si posa sull'arenile, come la home del portale, e la scheda
   della mappa ci galleggia sopra. Sotto resta sabbia piana, perche' da li'
   in giu' comandano le schede bianche. */
/* La sfumatura sta sul CORPO, non sulla sezione: la testata col marchio e'
   sopra la sezione, e con il mare che partiva da li' in giu' il marchio
   bianco finiva sulla sabbia, illeggibile. Cosi' invece l'acqua comincia da
   sopra la testata e ci scorre dentro. */
body.app-corpo {
    background:
        linear-gradient(180deg,
            var(--testata) 0%, #1d6690 26%, #2b7fa8 50%, #74bde4 77%, var(--sabbia) 100%)
            no-repeat top / 100% 275px,
        var(--sabbia);
}
/* Il titolo della prima sezione resta scuro: ora l'acqua finisce sopra di
   lui, e bianco su azzurro chiaro non si legge. L'avevo fatto bianco quando
   la sfumatura scendeva piu' in basso. */

/* ─── la ricerca della spiaggia: e' LEI la schermata ───
   Il campo sta al centro, grande, e sotto compaiono i suggerimenti mentre si
   scrive. Prima c'era l'elenco di tutti i bagni: con quindici si sfoglia,
   con duecento e' una pagina lunghissima in cui il proprio bagno e' una riga
   fra le altre. */
/* NON centrata verticalmente: la tendina si apre verso il basso, e da un
   blocco in mezzo allo schermo lo spazio sotto non basta — finiva sulla
   striscia di ombrelloni. Ancorata in alto, sotto ha tutto il resto. */
#s-scegli { justify-content: flex-start; padding-top: 7vh; }
#s-scegli .q-testa { text-align: center; margin-bottom: 1.4rem; }
#s-scegli .q-cerca {
    padding: .3rem 1.1rem; border-radius: 16px; border-width: 0;
    box-shadow: 0 10px 30px rgba(6, 26, 38, .25);
}
#s-scegli .q-cerca .bi { font-size: 1.15rem; }
#s-scegli .q-cerca input { padding: .95rem 0; font-size: 1.05rem; }
#s-scegli .q-elenco { margin-top: .7rem; }

/* L'invito, prima che si scriva: non e' un elenco, e' un esempio. */
.q-suggerimento {
    display: flex; align-items: center; gap: .6rem; justify-content: center;
    flex-wrap: wrap; text-align: center;
    padding: 1.1rem .8rem; font-size: .9rem;
    color: rgba(255, 255, 255, .8);
}
.q-suggerimento .bi { font-size: 1.05rem; color: #f2913f; }
.q-suggerimento strong { color: #fff; font-weight: 600; }

.q-sugg .q-luogo { margin-top: .1rem; }

/* Riprovare col GPS: magari il permesso era stato negato per sbaglio. */
.q-riprova {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    margin: 1.4rem auto 0; padding: .7rem 1.2rem;
    background: rgba(255, 255, 255, .12); color: #fff;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
    font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.q-riprova:hover { background: rgba(255, 255, 255, .22); }
.q-riprova .bi { color: #f2913f; }

/* ─── i suggerimenti sono una TENDINA ───
   Appesa al campo e fuori dal flusso: nel flusso il blocco e' centrato, e
   un risultato o otto ne cambiano l'altezza — il campo saliva e scendeva a
   ogni lettera, e il bersaglio si spostava sotto le dita mentre si scriveva.
   Cosi' invece il campo e il tasto della posizione non si muovono mai, e
   quando i bagni sono tanti scorre la tendina, non la pagina. */
#s-scegli .q-ricerca { position: relative; z-index: 5; }
#s-scegli .q-tendina {
    position: absolute; top: calc(100% + .55rem); left: 0; right: 0;
    /* Si ferma prima della sabbia invece di stendercisi sopra: la striscia
       di ombrelloni e' alta 96px in fondo alla pagina, e una tendina che ci
       finiva dentro sembrava scesa troppo. */
    /* il tetto vero lo mette altezzaTendina() in qui.js, misurando: qui c'e'
       solo il valore di partenza, per il primo istante */
    max-height: 50vh; overflow-y: auto;
    /* UN PANNELLO, non schede che galleggiano. Senza un fondo opaco fra una
       scheda e l'altra si vedeva in trasparenza il tasto della posizione,
       che sta sotto: si leggeva "Trova la mia posizione" in mezzo ai
       risultati. */
    background: rgba(8, 38, 56, .86);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px; padding: 8px;
    box-shadow: 0 18px 40px rgba(4, 20, 30, .35);
    overscroll-behavior: contain;
}
/* Vuota, la tendina sparisce. Col fondo del pannello sempre acceso restava
   una banda scura sotto il campo, in attesa che qualcuno scrivesse. */
#s-scegli .q-tendina:empty { display: none; }
/* Dentro il pannello le schede non hanno bisogno della loro ombra: ce l'ha
   il pannello, e sommate facevano fango. */
#s-scegli .q-tendina .q-voce { box-shadow: none; }
#s-scegli .q-tendina .q-voce + .q-voce { margin-top: 6px; }
/* La barra di scorrimento della tendina, discreta sul bianco delle voci. */
#s-scegli .q-tendina::-webkit-scrollbar { width: 9px; }
#s-scegli .q-tendina::-webkit-scrollbar-track { background: transparent; }
#s-scegli .q-tendina::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .42); border-radius: 999px;
    border: 2px solid transparent; background-clip: padding-box;
}
#s-scegli .q-tendina::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .6); }
/* Firefox non ha gli pseudo-elementi: la barra si dichiara cosi'. */
#s-scegli .q-tendina { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.42) transparent; }
/* L'INVITO. Nel flusso, con un'altezza riservata una volta per tutte: cosi'
   il tasto della posizione non si sposta quando l'invito sparisce alla prima
   lettera, e soprattutto non se lo ritrova stampato sopra — che e' cosa
   succedeva mettendolo dentro la tendina, che e' assoluta. */
#s-scegli .q-invito {
    min-height: 3rem; display: flex; align-items: center; justify-content: center;
    gap: .5rem; flex-wrap: wrap; text-align: center;
    font-size: .88rem; color: rgba(255, 255, 255, .78);
    padding: .8rem .4rem 0;
}
#s-scegli .q-invito .bi { font-size: 1rem; color: #f2913f; }
#s-scegli .q-invito strong { color: #fff; font-weight: 600; }

/* Il tasto della posizione non ha piu' bisogno del margine grande: sopra di
   lui c'e' gia' l'invito, che lo spazio ce l'ha. */
#s-scegli .q-riprova { margin-top: .4rem; }

/* ─── il marchio in cima ───
   Trasparente: il fondo ce l'ha gia' la scena (o, nell'app, il mare che
   scende dalla barra). Non e' appiccicata: sulla schermata dell'app la barra
   blu con il nome della spiaggia e' quella che resta in cima scorrendo, e
   due righe appiccicate una sull'altra sarebbero una cornice, non una
   testata. */
/* IL MARCHIO E' BIANCO: la sua riga deve stare sul blu, SEMPRE.
   Sulle schermate d'ingresso e sulla home dell'app il blu ce l'ha gia' il
   fondo della pagina (scena-corpo, app-corpo) e la riga resta trasparente,
   o si vedrebbe uno scalino a 62px dove finisce la fascia e continua la
   sfumatura. Sulla scheda di un locale invece il fondo e' chiaro, e li' il
   marchio spariva: bianco su sabbia non si legge. */
.q-testata { position: relative; z-index: 6; background: var(--testata); }
/* Solo sulle tre schermate d'ingresso sparisce: li' il mare occupa tutta la
   finestra e una fascia sopra sarebbe una riga di troppo. Sulla home dell'app
   NO: la sua sfumatura partiva da un azzurro tutto suo, e quella riga era
   l'unico punto del sito con un blu diverso da tutti gli altri. */
body.scena-corpo .q-testata { background: transparent; }
.q-testata .area-testa-inner { justify-content: flex-start; }
/* Le schermate d'ingresso erano alte quanto la finestra: con una riga sopra
   diventavano piu' alte, e compariva una barra di scorrimento per 62px. */
.q-schermo { min-height: calc(100dvh - 62px); }

/* ─── tornare indietro ───
   Dalla scelta dell'ombrellone si puo' essere arrivati sul bagno sbagliato:
   senza questo l'unica via era ricaricare la pagina.
   NON si chiama .q-indietro: quel nome e' gia' della freccia tonda sulla
   scheda del locale, che e' posizionata in modo assoluto sulla copertina —
   riusandolo questo tasto si prendeva il suo "position: absolute" e finiva
   stampato sopra il nome della spiaggia. */
/* Lo stesso .btn-back del resto del prodotto: pastiglia bianca, testo blu,
   in cima al contenuto e sopra il titolo. Cambia solo che qui e' un <button>
   e non un <a>, perche' non porta a un indirizzo — rimostra l'elenco. */
.q-torna {
    display: inline-flex; align-items: center; gap: .4rem;
    margin: 0 0 .85rem;
    padding: .4rem .95rem .4rem .8rem;
    background: #fff; color: var(--blu);
    border: 1px solid rgba(20, 45, 70, .12); border-radius: 999px;
    box-shadow: 0 2px 6px rgba(20, 45, 70, .18);
    font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
    transition: transform .15s ease, box-shadow .18s ease;
}
.q-torna:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(20, 45, 70, .26); }
/* Due uscite dalla scelta della postazione (G4): tornare ai servizi senza
   sceglierne una, o cambiare spiaggia. */
.q-torna-riga { display: flex; flex-wrap: wrap; gap: .5rem; }

/* La schermata della postazione non e' piu' stirata fino in fondo: il campo
   del numero stava incollato al bordo inferiore con mezzo schermo di vuoto
   in mezzo, e su un monitor quel vuoto era la meta' della pagina. */
#s-postazione { justify-content: flex-start; padding-top: 6vh; }
#s-postazione .q-manuale { margin-top: 1.4rem; }

/* ─── le richieste di tavolo nel pannello (G6) ─── */
.q-lato-gruppo { margin-top: .8rem; }
.q-lato-gruppo h3 {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--muto); margin: 0 0 .45rem; font-weight: 700;
}
.q-richiesta .q-ordine-num { background: var(--blu-chiaro); font-size: 1.1rem; }
.q-richiesta.accepted .q-ordine-num { background: var(--verde); }
.q-richiesta.accepted .q-ordine-testo b { color: var(--verde); }
.q-richiesta.declined .q-ordine-num { background: #c0392b; }
.q-richiesta.declined .q-ordine-testo b { color: #c0392b; }
.q-ordine-testo b { font-weight: 700; color: var(--testo); }
.q-avviso.no { background: #c0392b; }
/* il tavolo si chiede dalla pagina del locale */
.q-tavolo { margin: .9rem 0 .2rem; gap: .45rem; }

/* ==========================================================================
   IL MENU' ALL'OMBRELLONE (proposta B, tavola "B · Cliente · Menù
   all'ombrellone"). Si ordina da qui: righe col "+" tondo che diventa
   "− 1 +", il prezzo della consegna scelta in grande e l'altro sotto col
   suo nome, i capitoli come i segmenti di Faro, in cima a che punto e'
   l'ordine fatto qui, e "Il tuo ordine" in arancio in fondo. Da scrivania
   due colonne: il locale a sinistra, il menu' a destra.
   ========================================================================== */
#s-servizio .q-cover { height: 180px; }
#s-servizio .q-cover-nome h1 {
    font-family: var(--f-titoli); font-weight: 800; font-size: 30px; letter-spacing: -.02em;
}
#s-servizio .q-indietro { width: 44px; height: 44px; border-radius: 10px; color: var(--f-notte); }
#s-servizio .q-aperto {
    padding: 4px 10px; border-radius: 8px; background: var(--f-verde-chiaro); color: var(--f-verde);
    font-size: 13px; font-weight: 800; letter-spacing: 0; text-transform: none;
}
/* sotto c'e' la barra dell'ordine, che sta ferma in fondo */
#s-servizio .q-servizio-corpo { padding-bottom: 104px; }
#s-servizio .q-desc { font-size: 16px; color: var(--f-inchiostro); }
#s-servizio .q-info { font-size: 15px; gap: 6px; }
#s-servizio .q-info i { color: var(--f-mare); }
#s-servizio .q-info a { color: var(--f-mare); }

/* l'ordine fatto qui: a che punto e' */
.q-mio-ordine {
    position: relative; display: block; width: 100%; margin: 4px 0 16px; padding: 16px 18px 14px;
    border: 0; border-radius: 12px; background: var(--f-notte); color: #fff;
    text-align: left; font: inherit; cursor: pointer;
    transition: background-color .6s ease;       /* diventa verde piano, quando e' pronto */
}
.q-mio-ordine:hover { background: var(--f-notte-2); }
.q-mio-ordine.pronto, .q-mio-ordine.pronto:hover { background: var(--f-verde); }
.q-mo-eti {
    display: block; padding-right: 28px; font-size: 12px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.q-mo-stato {
    display: block; margin-top: 4px; font-family: var(--f-titoli); font-weight: 800;
    font-size: 22px; line-height: 1.15;
}
.q-mo-apri { position: absolute; right: 16px; top: 16px; font-size: 16px; opacity: .8; }
.q-mo-tappe {
    position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px; padding-top: 28px;
}
/* la linea da un pallino all'ultimo, piena fin dove si e' arrivati: un
   elemento vero (e non uno sfondo) perche' si allunga dalla tappa di prima
   alla nuova (qui.js). Sta dopo le tappe, sotto i pallini. */
.q-mo-linea {
    position: absolute; left: 9px; right: 9px; top: 8px; height: 3px; border-radius: 2px;
    background: rgba(255, 255, 255, .28); overflow: hidden;
}
.q-mo-linea i { position: absolute; inset: 0 auto 0 0; background: var(--f-sole); }
.q-mo-tappa { position: relative; font-size: 13px; line-height: 1.25; color: rgba(255, 255, 255, .72); }
.q-mo-tappa:nth-child(2) { text-align: center; }
.q-mo-tappa:nth-child(3) { text-align: right; }
.q-mo-tappa i {
    position: absolute; top: -28px; width: 19px; height: 19px; box-sizing: border-box; z-index: 1;
    border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); background: var(--f-notte);
    transition: background-color .6s ease;
}
.q-mio-ordine.pronto .q-mo-tappa i { background: var(--f-verde); }
.q-mo-tappa:nth-child(1) i { left: 0; }
.q-mo-tappa:nth-child(2) i { left: calc(50% - 9.5px); }
.q-mo-tappa:nth-child(3) i { right: 0; }
.q-mo-tappa.fatta i, .q-mo-tappa.ora i,
.q-mio-ordine.pronto .q-mo-tappa.fatta i, .q-mio-ordine.pronto .q-mo-tappa.ora i {
    background: var(--f-sole); border-color: var(--f-sole);
}
.q-mo-tappa.ora { color: #fff; font-weight: 800; }
.q-mo-tappa.ora i { box-shadow: 0 0 0 4px rgba(242, 193, 78, .3); }

/* in evidenza */
#s-servizio .q-eti { font-size: 12px; font-weight: 800; color: var(--f-grigio); }
#s-servizio .q-evid-carta { border-radius: 12px; border-color: var(--f-linea); transition: border-color .15s, box-shadow .15s; }
#s-servizio .q-evid-carta strong { font-size: 14px; color: var(--f-inchiostro); }
#s-servizio .q-evid-carta .q-evid-eur { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--f-inchiostro); }
#s-servizio .q-evid-carta.fatto { border-color: var(--f-verde); box-shadow: 0 0 0 2px var(--f-verde-chiaro); }

/* i capitoli: i segmenti di Faro, non pillole */
#s-servizio .q-capitoli { gap: 8px; padding: 10px 0; }
#s-servizio .q-cap {
    min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--f-linea);
    background: #fff; color: var(--f-notte); font-size: 15px; font-weight: 700;
}
#s-servizio .q-cap.on { background: var(--f-notte); border-color: var(--f-notte); color: #fff; }

/* le sezioni e le righe */
#s-servizio .men-sezione h4 { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--f-grigio); }
#s-servizio .men-sezione h4 .bi { color: var(--f-grigio); }
#s-servizio .men-sezione h4::after { background: var(--f-linea-2); }
/* il nome, il "+" (o "− 1 +"), il prezzo: la colonna del prezzo e' fissa,
   cosi' i prezzi e i "+" stanno in colonna da una riga all'altra */
#s-servizio .men-sezione ul.con-piu li,
#s-servizio .men-sezione ul.con-piu.due-prezzi li {
    grid-template-columns: minmax(0, 1fr) auto 86px;
    align-items: center; column-gap: 12px; padding: 12px 0;
}
#s-servizio .men-sezione ul.con-piu li + li { border-top-color: var(--f-linea-2); }
#s-servizio .con-piu .men-nome { align-items: center; gap: 12px; }
#s-servizio .con-piu .men-nome::after { content: none; }
#s-servizio .con-piu .men-nome img { width: 44px; height: 44px; border-radius: 8px; border-color: var(--f-linea); }
#s-servizio .con-piu .men-testo { gap: 2px; }
#s-servizio .con-piu .men-testo strong { font-size: 16px; font-weight: 700; color: var(--f-inchiostro); }
#s-servizio .con-piu .men-desc { font-size: 14px; color: var(--f-grigio); }
#s-servizio .con-piu .men-allergeni { font-size: 13px; }
#s-servizio .con-piu .men-quanti { order: 2; display: flex; justify-content: flex-end; }
#s-servizio .con-piu .men-prezzi { order: 3; }
.men-prezzi { display: grid; justify-items: end; text-align: right; line-height: 1.2; }
#s-servizio .men-prezzi .men-eur { font-family: var(--f-mono); font-size: 16px; font-weight: 700; color: var(--f-inchiostro); }
#s-servizio .men-prezzi .men-eur-no { font-family: var(--f-testo); font-size: 13px; color: var(--f-grigio); white-space: nowrap; }
.men-eur-altro { margin-top: 2px; font-size: 12px; line-height: 1.25; color: var(--f-mare); white-space: nowrap; }
#s-servizio .men-piu {
    width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--f-notte);
    background: #fff; color: var(--f-notte); font-size: 22px; line-height: 1;
}
#s-servizio .men-piu:hover { background: var(--f-notte); color: #fff; }
.men-passo {
    display: inline-flex; align-items: center; height: 44px; border-radius: 999px;
    background: var(--f-notte); color: #fff; overflow: hidden;
}
.men-passo button {
    width: 42px; height: 44px; border: 0; background: none; color: #fff;
    font-size: 20px; line-height: 1; cursor: pointer;
}
.men-passo button:focus-visible { outline: 2px solid var(--f-sole); outline-offset: -4px; border-radius: 999px; }
.men-passo span { min-width: 18px; text-align: center; font-family: var(--f-mono); font-size: 16px; font-weight: 700; }

/* la barra dell'ordine: arancio, perche' da qui si paga */
body .ord-barra {
    padding: 12px var(--fianco) calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .92) 45%);
}
body .ord-apri {
    max-width: 560px; min-height: 56px; gap: 12px; padding: 0 18px; border-radius: 12px;
    background: var(--f-arancio); font-size: 16px; font-weight: 700;
    box-shadow: 0 10px 26px rgba(156, 58, 12, .3);
}
body .ord-apri:hover { background: var(--f-arancio-2); }
body .ord-conta { min-width: 28px; height: 28px; background: #fff; color: var(--f-arancio-ink); font-size: 15px; font-weight: 800; }
.ord-apri-testo { display: grid; line-height: 1.2; }
.ord-apri-testo small { font-size: 13px; font-weight: 600; opacity: .92; }
/* il totale nei caratteri dei titoli, come i totali del resto del sito: in
   quelli a spaziatura fissa "4,20 €" si leggeva "4 , 2 0  €" */
body #ord-totale { font-family: var(--f-titoli); font-weight: 800; font-size: 20px; }

/* da scrivania: il locale a sinistra, il menu' a destra. Le righe lunghe
   un metro mettevano il prezzo lontano dal piatto. */
@media (min-width: 1000px) {
    #s-servizio .q-servizio-corpo {
        display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 40px; align-items: start;
        padding-top: 24px;
    }
    .q-sv-locale { position: sticky; top: 16px; }
    .q-sv-menu { min-width: 0; max-width: 760px; }
    #s-servizio .q-cover { height: 220px; }
}