/* Pagina del cliente (views/layouts/app.php, views/site/prenota.php): impaginazione intorno ai componenti del
   design system. Solo struttura: colori, misure, raggi, ombre e caratteri arrivano dai token (tokens.css), come
   in bundle.css. Le variabili --pp-* le scrive public/js/prenota.js (altezza della barra in basso e dell'avviso sopra la barra).
   Su telefono una colonna, la pianta a tutta altezza e la barra della scelta fissa in basso, con le zone sicure
   (notch, barra di sistema); da 960px la pianta a sinistra e calendario e scelta fissi a destra. */

.pp-app { min-height: 100vh; min-height: 100dvh; }
/* La barra fissa in basso copre la pagina, e su telefono anche l'avviso che galleggia sopra la barra (--pp-avvisi):
   quello che prende il fuoco (Tab, frecce sulla pianta) il browser e il motore della mappa (bundle.js, mostra) lo portano
   in vista sopra tutti e due, staccato quanto basta perché l'anello del fuoco non finisca sotto. Su computer sono 0 */
html { scroll-padding-bottom: calc(var(--pp-barra, 0px) + var(--pp-avvisi, 0px) + var(--space-2)); }
/* Un componente nascosto (barra del tempo prima del primo posto) resta nascosto anche se il suo stile ha display */
.pp-app [hidden] { display: none !important; }

/* Testata: il logo dell'impianto su fascia accent, come nelle mail */
.pp-app__top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px))
             var(--space-3) max(var(--space-4), env(safe-area-inset-left, 0px));
    background: var(--accent);
    color: var(--on-accent);
}
.pp-app__logo { display: block; height: 52px; width: auto; max-width: 100%; }
.pp-app__tondo { display: block; height: 48px; width: auto; flex: none; }
.pp-app__nome { margin: 0; min-width: 0; }

.pp-app__main {
    display: grid;
    gap: var(--space-6);
    width: 100%;
    max-width: var(--sheet-max);
    margin: 0 auto;
    padding: var(--space-5) max(var(--space-4), env(safe-area-inset-right, 0px))
             calc(var(--space-6) + var(--pp-barra, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px));
}
.pp-app__giorno, .pp-app__posto { display: grid; gap: var(--space-3); min-width: 0; align-content: start; }
.pp-app__titolo { margin: 0; }
.pp-app__testa { display: grid; gap: var(--space-1); }
.pp-app__info { margin: 0; color: var(--ink-muted); }
.pp-app .pp-cal { width: 100%; }
.pp-app .pp-notice { width: 100%; }

/* Legenda del calendario: gli stessi segni dei giorni */
.pp-app__segno--pochi { background: var(--warn); }
.pp-app__segno--pieno { box-shadow: inset 0 0 0 2px var(--danger); }
.pp-app__festivo { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.pp-app__barrato { text-decoration: line-through; }

/* Filtri per area in una fila che scorre col dito */
.pp-app__aree { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--space-1); }
.pp-app__aree::-webkit-scrollbar { display: none; }
.pp-app__aree .pp-chip { flex: none; }
/* "Scegli per me" sotto la pianta, largo quanto il suo testo */
.pp-app__per-me { justify-self: start; }

/* La pianta a tutta altezza, mai più alta dello schermo che resta sopra la barra: sotto e sopra resta sempre
   un pezzo di pagina da toccare per scorrere */
.pp-app__mappa { width: 100%; max-height: calc(100vh - var(--pp-barra, 0px) - var(--space-7)); max-height: calc(100dvh - var(--pp-barra, 0px) - var(--space-7)); }

/* Barra della scelta: fissa in basso su telefono */
.pp-app__barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    padding: var(--space-3) max(var(--space-4), env(safe-area-inset-right, 0px))
             calc(var(--space-3) + env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px));
    background: var(--surface-raised);
    box-shadow: var(--shadow-2);
}
.pp-app__barra-dentro { display: grid; gap: var(--space-3); width: 100%; max-width: var(--sheet-max); margin: 0 auto; }
.pp-app__barra .pp-hold { width: 100%; padding: 0; box-shadow: none; background: transparent; }
.pp-app__barra .pp-hold--late { padding: var(--space-3); background: var(--warn-soft); }
.pp-app__avvisi:empty { display: none; }
/* Su telefono (barra fissa) l'avviso galleggia sopra la barra, sulla pianta: la barra non si alza, quindi la pianta non
   rimpicciolisce sotto il dito a ogni avviso che compare o se ne va (a 320 × 568 la barra arrivava a metà schermo).
   Il margine laterale e quello sotto non fermano i tocchi sulla pianta. */
@media (max-width: 959px) {
    .pp-app__avvisi {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        padding: 0 max(var(--space-4), env(safe-area-inset-right, 0px)) var(--space-2) max(var(--space-4), env(safe-area-inset-left, 0px));
        pointer-events: none;
    }
    .pp-app__avvisi .pp-notice { max-width: min(100%, var(--sheet-max)); margin: 0 auto; box-shadow: var(--shadow-2); pointer-events: auto; }
}
.pp-app__scelta { display: flex; align-items: center; gap: var(--space-3); }
.pp-app__scelta-testo { flex: 1; min-width: 0; }
.pp-app__scelta-testo p { margin: 0; }
.pp-app__scelta .pp-btn { flex: none; }

/* I passi della pagina (public/js/acquisto.js scrive data-passo sul body: posto, quantita, dati). Al passo del posto calendario,
   pianta, la scelta e Continua (pp-app__del-posto); agli altri la sezione del passo con il riepilogo (CartSummary) e, nella
   barra, il totale del server con Continua o Paga. La barra del tempo (HoldTimer) resta in tutti i passi. Paga è spento mentre
   il pagamento parte e finché il modulo della carta non è pronto (o senza pagamento online) */
.pp-app__passo, .pp-app__riepilogo, .pp-app__conto, .pp-app__conto-nota, .pp-app__avanti, .pp-app__paga { display: none; }
.pp-app[data-passo="quantita"] .pp-app__giorno, .pp-app[data-passo="quantita"] .pp-app__posto, .pp-app[data-passo="quantita"] .pp-app__del-posto,
.pp-app[data-passo="dati"] .pp-app__giorno, .pp-app[data-passo="dati"] .pp-app__posto, .pp-app[data-passo="dati"] .pp-app__del-posto { display: none; }
.pp-app[data-passo="quantita"] .pp-app__quantita, .pp-app[data-passo="dati"] .pp-app__dati,
.pp-app[data-passo="quantita"] .pp-app__riepilogo, .pp-app[data-passo="dati"] .pp-app__riepilogo { display: grid; }
.pp-app[data-passo="quantita"] .pp-app__conto, .pp-app[data-passo="dati"] .pp-app__conto { display: flex; }
.pp-app[data-passo="quantita"] .pp-app__conto-nota:not(:empty) { display: block; }
.pp-app[data-passo="quantita"] .pp-app__avanti, .pp-app[data-passo="dati"] .pp-app__paga { display: inline-flex; }
.pp-app__passo { gap: var(--space-3); min-width: 0; align-content: start; }
.pp-app__passo > p:empty, .pp-app__contatori:empty { display: none; }
.pp-app__contatori { display: grid; gap: var(--space-3); }
.pp-app__contatori .pp-stepper, .pp-app .pp-app__riepilogo { width: 100%; }
.pp-app__limite { margin: 0; }
/* Il totale nella barra: l'importo è un'unità (Preventivo::euro con lo spazio che non va a capo); se accanto a «Paga 25,50 €»
   non c'è posto per «Totale» e l'importo su una riga (telefono di 320 px), l'importo va sotto «Totale», mai sotto il pulsante */
.pp-app__conto { flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }

/* Modifica dell'ordine (richiesta di Marco del 25/10). Dopo il passo del posto, nella barra, Indietro (come il tasto indietro del
   telefono): tondo, solo la freccia, con aria-label. I «Modifica» (Button, pp-btn--ghost) in cima alle quantità accanto alla
   scelta, e nel riepilogo dei dati accanto ai gruppi «Giorno e posti» e «Ingressi e lettini» (con «Solo ingressi» senza posti):
   meno spazio ai lati, la scritta allineata agli importi, alti tap-min */
.pp-app__indietro, .pp-app__gruppo, .pp-app__soli { display: none; }
.pp-app[data-passo="quantita"] .pp-app__indietro, .pp-app[data-passo="dati"] .pp-app__indietro { display: inline-flex; }
.pp-app[data-passo="dati"] .pp-app__gruppo { display: flex; }
.pp-app[data-passo="dati"] .pp-app__soli { display: block; }
.pp-app__indietro { width: var(--tap-min); padding: 0; }
.pp-app__scelto, .pp-app__gruppo { align-items: center; justify-content: space-between; gap: var(--space-3); }
.pp-app__scelto { display: flex; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.pp-app__scelto > div { min-width: 0; }
.pp-app__scelto p, .pp-app__gruppo p, .pp-app__soli { margin: 0; }
.pp-app__gruppo p { color: var(--ink-muted); }
.pp-app__modifica { flex: none; padding: 0 var(--space-3); margin-right: calc(var(--space-3) * -1); }
.pp-app__riepilogo .pp-cart__lines:empty { display: none; }
/* Nella barra stretta (telefono di 320 px, «Paga 122,50 €») il pulsante del passo va sotto, a destra, e Indietro e il totale
   restano sopra: il totale non si stringe sotto la sua cifra (min-content) e niente finisce sopra qualcos'altro */
.pp-app[data-passo="quantita"] .pp-app__scelta, .pp-app[data-passo="dati"] .pp-app__scelta { flex-wrap: wrap; }
.pp-app[data-passo="quantita"] .pp-app__scelta-testo, .pp-app[data-passo="dati"] .pp-app__scelta-testo { min-width: min-content; }
.pp-app__avanti, .pp-app__paga { margin-left: auto; }

/* Il passo dei dati: i campi del cliente (Field) uno sotto l'altro, la casella del consenso con i suoi link (tutta la riga
   la tocca), il modulo della carta di Stripe (Payment Element, disegnato da Stripe nella sua cornice). Le condizioni in breve
   sotto il riepilogo e la riga della modalità prova nella barra solo a questo passo */
.pp-app__campi { display: grid; gap: var(--space-4); }
.pp-app__consenso { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--ink); cursor: pointer; }
.pp-app__consenso input { flex: none; width: var(--icon); height: var(--icon); margin: 3px 0 0; accent-color: var(--brand-ink); }
.pp-app__link { padding: 0; border: 0; background: none; color: var(--brand-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pp-app__carta:empty { display: none; }
.pp-app__riepilogo .pp-cart__terms, .pp-app__prova { display: none; }
.pp-app[data-passo="dati"] .pp-app__riepilogo .pp-cart__terms, .pp-app[data-passo="dati"] .pp-app__prova { display: block; }
.pp-app__prova { margin: 0; }

/* Il foglio delle condizioni di vendita (<dialog>): su telefono sale dal basso a tutta larghezza, su computer al centro */
.pp-app__foglio {
    width: 100%;
    max-width: var(--sheet-max);
    max-height: 85vh;
    max-height: 85dvh;
    margin: auto auto 0;
    padding: var(--space-5) max(var(--space-4), env(safe-area-inset-right, 0px)) calc(var(--space-5) + env(safe-area-inset-bottom, 0px))
             max(var(--space-4), env(safe-area-inset-left, 0px));
    border: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--shadow-2);
}
.pp-app__foglio[open] { display: grid; gap: var(--space-4); }
.pp-app__foglio::backdrop { background: var(--scrim); }
.pp-app__foglio-testo { display: grid; gap: var(--space-3); overflow-wrap: anywhere; }
.pp-app__foglio-testo p { margin: 0; }
.pp-app__foglio form { display: grid; }
@media (min-width: 960px) {
    .pp-app__foglio { margin: auto; padding: var(--space-6); border-radius: var(--radius-lg); }
    .pp-app__foglio form { justify-items: end; }
}

/* Testo solo per chi usa un lettore di schermo (passaggio agli ultimi minuti, tempo scaduto) */
.pp-app__annuncio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Computer: pianta a sinistra, calendario e scelta a destra */
@media (min-width: 960px) {
    .pp-app__main {
        max-width: var(--content-max);
        grid-template-columns: minmax(0, 1fr) 380px;
        grid-template-areas: "posto giorno" "posto barra";
        grid-template-rows: auto 1fr;
        align-items: start;
        padding-bottom: var(--space-7);
    }
    .pp-app__giorno { grid-area: giorno; }
    .pp-app__posto { grid-area: posto; }
    .pp-app__barra {
        grid-area: barra;
        position: sticky;
        top: var(--space-4);
        padding: var(--space-4);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-1);
    }
    .pp-app__mappa.pp-map--tall { aspect-ratio: 16 / 10; max-height: none; }
    /* Quantità e dati nella colonna larga al posto della pianta, il riepilogo a destra sopra la barra */
    .pp-app__passo { grid-area: posto; }
    .pp-app__dati { max-width: var(--sheet-max); }   /* i campi non più larghi di un foglio */
    .pp-app__riepilogo { grid-area: giorno; }
}

/* Pagine del sito senza pianta (views/site/biglietto.php, views/site/informativa.php): una colonna al centro, larga come un
   foglio, con le zone sicure del telefono. Il biglietto (pp-pass, TicketPass) e gli avvisi restano larghi quanto vogliono i
   loro componenti, ma mai più della colonna: la colonna è minmax(0, 1fr), così su un telefono di 320 px il max-width: 100% della
   scheda (larga 340 px nel design system) vale per la colonna e la pagina non scorre di lato; l'informativa è testo da leggere,
   con la sua misura di riga. */
.pp-pagina {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    justify-items: center;
    align-content: start;
    width: 100%;
    max-width: var(--sheet-max);
    margin: 0 auto;
    padding: var(--space-5) max(var(--space-4), env(safe-area-inset-right, 0px))
             calc(var(--space-7) + env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px));
}
.pp-pagina__titolo { margin: 0; }
.pp-pagina__testa { display: grid; gap: var(--space-1); justify-items: center; text-align: center; }
.pp-pagina__info { margin: 0; color: var(--ink-muted); }
.pp-informativa { display: grid; gap: var(--space-4); width: 100%; }
.pp-informativa__titolo { margin: 0; }
.pp-informativa__paragrafo { margin: 0; overflow-wrap: anywhere; }