/**
 * Il pannello dei nominativi.
 *
 * ⚠️ EREDITA DAL TEMA, non impone una grafica. Il pannello deve sembrare parte
 * del sito: su un altro negozio una palette nostra lo renderebbe un pezzo
 * incollato — ed è la §0, il plugin deve stare bene su un tema qualsiasi.
 *
 * Quindi: `font: inherit` e `color: inherit` ovunque, nessun colore di marca,
 * e il pulsante di conferma prende la classe del tema (`button` /
 * `wp-element-button`) invece di uno stile suo. La palette ETix è del
 * biglietto, non del negozio.
 *
 * ⚠️ MOBILE PRIMA DI TUTTO, misurato a 360 px: pannello a tutta larghezza,
 * campi alti da toccare col pollice, e altezza limitata con scorrimento
 * INTERNO — senza, la tastiera del telefono copre il campo attivo e il cliente
 * scrive alla cieca.
 *
 * Nessuna dipendenza esterna, nessun font remoto.
 */

/* ⚠️ IL MODELLO DI BOX, dichiarato da noi e per il nostro sottoalbero soltanto.
 *
 * Senza, un `width: 100%` piu' il padding del tema fa un campo largo 100% + 24px
 * che SBORDA dal pannello e viene tagliato — che e' esattamente il guasto visto
 * sul sito vero. `height: 46px` sistemava l'altezza e lasciava intatta la
 * larghezza, che era il problema.
 *
 * Non e' una regola globale: e' limitata a `.etix-modale`, quindi non tocca il
 * tema. Dipendere dal fatto che il tema dichiari border-box e' la stessa
 * scommessa di dipendere da `.htaccess` (§0.1): funziona finche' funziona. */
.etix-modale,
.etix-modale *,
.etix-modale *::before,
.etix-modale *::after { box-sizing: border-box; }

/* ⚠️ `hidden` NASCONDE SOLO FINCHE' IL TEMA NON DICE ALTRO.
 *
 * Il browser lo rende con `[hidden] { display: none }` a specificita' minima:
 * basta un `h3 { display: block }` del tema — regola banale — e il titolo
 * interno torna visibile, «Chi partecipa» due volte una sopra l'altra. Visto
 * su un'installazione vera.
 *
 * `!important` e' voluto, ed e' l'unico posto del file in cui lo e': qui non
 * stiamo proponendo uno stile che il tema puo' cambiare, stiamo dicendo che
 * cio' che il nostro JS nasconde e' nascosto. Limitato ai nostri contenitori,
 * quindi non tocca niente del tema.
 *
 * `.etix-limite-avviso` e' a parte perche' vive accanto al campo quantità,
 * FUORI dal blocco. */
.etix-nominativi[hidden],
.etix-nominativi [hidden],
.etix-modale [hidden],
.etix-limite-avviso[hidden] { display: none !important; }

.etix-modale {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-end;          /* dal basso: è dove arriva il pollice */
    justify-content: center;
    background: rgba(0, 0, 0, .45);
}

.etix-modale__p {
    background: #fff;
    color: inherit;
    font: inherit;
    width: 100%;
    max-width: 520px;
    /* ⚠️ Dentro un flex la larghezza minima predefinita e' `auto`: un figlio
     * non si restringe MAI sotto il proprio contenuto, e sfonda il contenitore
     * qualunque `width` gli si metta. `min-width: 0` e' cio' che di solito
     * manca davvero. */
    min-width: 0;
    /* 100dvh tiene conto della barra del browser mobile, che 100vh ignora.
       Il valore in vh resta come ripiego per i browser che non conoscono dvh. */
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px 14px 0 0;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    position: relative;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .18);
}

.etix-modale__t {
    font: inherit;
    font-size: 1.25em;
    font-weight: 700;
    margin: 0 34px 12px 0;
    line-height: 1.25;
}

/* 44 px: la misura minima per un tocco affidabile col pollice. */
.etix-modale__x {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: inherit;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    opacity: .6;
}
.etix-modale__x:hover,
.etix-modale__x:focus { opacity: 1; }

/* ── Nome e Cognome ─────────────────────────────────────────────────────────
 *
 * ⚠️ `fieldset` porta di suo bordo, margini e padding del browser: senza
 * questo azzeramento comparirebbe una cornice attorno a ogni partecipante che
 * nessuno ha chiesto, e a 360 px mangerebbe larghezza ai campi.
 *
 * ⚠️ E i due campi SI IMPILANO sotto i 480 px. Affiancarli a 360 lascerebbe
 * ~150 px per campo: un cognome lungo diventa illeggibile mentre lo si scrive,
 * che è il momento in cui serve rileggerlo. */
.etix-nominativo {
    border: 0;
    margin: 0 0 14px;
    padding: 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.etix-nominativo__n {
    flex: 0 0 100%;
    padding: 0;
    margin: 0 0 2px;
    font-size: .85em;
    font-weight: 600;
    opacity: .7;
}

.etix-campo {
    flex: 1 1 100%;     /* impilati: è il caso stretto, e viene prima */
    min-width: 0;
    display: block;
}

@media (min-width: 480px) {
    .etix-campo { flex: 1 1 calc(50% - 5px); }
}

.etix-modale .etix-nominativo { margin: 0 0 14px; min-width: 0; }

.etix-nominativo label,
.etix-modale .etix-nominativo label {
    display: block;
    font-size: .9em;
    margin-bottom: 4px;
    opacity: .85;
}

/* 16 px sul campo NON è estetica: sotto i 16 px iOS ingrandisce la pagina al
   focus, e il cliente si ritrova il modulo fuori schermo. */
/* ⚠️ `height` FISSA, non solo `min-height`: sul sito vero il campo occupava
   mezzo pannello, perché il tema imponeva un'altezza propria e min-height non
   la contrasta — la alza soltanto. 46 px è l'altezza di un campo normale, e
   basta al tocco col pollice. */
/* Il campo fuori dal pannello — sulla scheda prodotto in linea — eredita dal
 * tema: qui si dichiara solo ciò che il tema non può indovinare. */
.etix-nominativo input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.etix-modale .etix-nominativo input[type="text"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font: inherit;
    font-size: 16px;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    line-height: normal;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 8px;
    background: #fff;
    color: inherit;
}

.etix-modale__e {
    margin: 4px 0 12px;
    font-size: .9em;
    color: #b32d2e;
    min-height: 1.2em;      /* niente salto quando l'errore compare */
}
.etix-modale__e:empty { margin: 0; min-height: 0; }

/* Il pulsante prende la classe del tema: qui solo larghezza e altezza del
   tocco, senza toccare colori o bordi. */
.etix-modale__ok {
    display: block;
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    cursor: pointer;
}

@media (min-width: 600px) {
    .etix-modale { align-items: center; padding: 20px; }
    .etix-modale__p { border-radius: 14px; max-height: 84vh; }
    .etix-modale__ok { width: auto; min-width: 220px; padding-left: 28px; padding-right: 28px; }
}

/* Chi ha chiesto meno animazioni non deve subirne. */
@media (prefers-reduced-motion: no-preference) {
    .etix-modale__p { animation: etix-su .18s ease-out; }
    @keyframes etix-su { from { transform: translateY(14px); opacity: .6 } }
}

/* ── La nota informativa ────────────────────────────────────────────────────
 *
 * ♻️ STAVA IN BASSO, `position: fixed`. Provata sul sito: su desktop la pagina
 * carrello è corta e la nota finiva sotto il fondo del contenuto, dove nessuno
 * guarda dopo aver chiuso un modale che stava al centro. Ora sta nel FLUSSO,
 * in cima, accanto agli avvisi del carrello — dove l'occhio torna.
 *
 * ⚠️ AMBRA, e le due alternative sono entrambe sbagliate: il grigio si perde
 * fra il resto della pagina e il cliente non si accorge che è successo
 * qualcosa; il rosso dice che ha sbagliato lui, e non è vero — il biglietto è
 * stato tolto come conseguenza di una sua scelta.
 *
 * ⚠️ E QUI IL COLORE DEL TESTO SI DICHIARA, contro la regola generale del
 * file. `color: inherit` funziona finché lo sfondo è quello del tema: dipinto
 * un fondo chiaro nostro, su un tema scuro il testo resterebbe chiaro e la
 * nota sarebbe illeggibile. Chi dipinge lo sfondo deve dipingere anche il
 * testo. */
.etix-nota {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin: 0 0 16px;
    padding: 13px 14px;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: #4a3200;
    background: #fcf3e3;
    border: 1px solid #e0a944;
    border-left: 4px solid #d4881f;
    border-radius: 6px;
}

.etix-nota__t { flex: 1 1 auto; min-width: 0; }

.etix-nota__x {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: -3px -4px 0 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: .6;
}
.etix-nota__x:hover,
.etix-nota__x:focus { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
 *  «manca un nominativo», nel mini-carrello e nel carrello classico
 *
 *  Sono le superfici dove il pannello NON puo' aprirsi — nessun data store dei
 *  blocchi da guardare — quindi questa riga e' l'unica cosa che il cliente ha
 *  per accorgersene prima del pagamento. Deve vedersi, senza gridare: e' una
 *  cosa da completare, non un errore che ha commesso.
 *
 *  ⚠️ Lo stile sta QUI e non in un attributo `style=`: nel mini-carrello il
 *  markup lo compone il tema, e un colore cablato nell'HTML non si puo'
 *  sovrascrivere senza toccare il PHP.
 * ══════════════════════════════════════════════════════════════════════════ */

.etix-manca {
    display: inline-block;
    font-size: .9em;
    line-height: 1.3;
    color: #8a5a00;
}

.etix-modifica {
    font-size: .9em;
    margin-left: 6px;
    white-space: nowrap;
}

/* Dentro `.etix-manca` il link e' gia' in contesto: il margine lo staccherebbe
 * dal trattino che lo introduce. */
.etix-manca .etix-modifica { margin-left: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
 *  IL CAMPO IN LINEA NEL CASSETTO
 *
 *  ⚠️ Vive DENTRO l'albero di React, quindi non puo' contare su niente del
 *  contorno: si porta il proprio modello di box e le proprie misure. E resta
 *  stretto — un cassetto e' largo 350-400 px, non 520 come un modale.
 *
 *  Nessun `position` e nessuno `z-index`: e' esattamente il motivo per cui il
 *  committente ha scelto il campo in linea invece del modale sopra la sidebar.
 * ══════════════════════════════════════════════════════════════════════════ */

.etix-inline,
.etix-inline *,
.etix-inline *::before,
.etix-inline *::after { box-sizing: border-box; }

.etix-inline {
    margin: 8px 0 12px;
    padding: 10px 12px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #4a3200;
    background: #fcf3e3;
    border: 1px solid #e0a944;
    border-left: 4px solid #d4881f;
    border-radius: 6px;
}

.etix-inline__t {
    margin: 0 0 8px;
    font-weight: 600;
}

.etix-inline__n { margin: 0 0 8px; min-width: 0; }

.etix-inline__n .etix-nominativo__n {
    display: block;
    margin: 0 0 4px;
    font-size: .85em;
    opacity: .75;
}

.etix-inline .etix-campo { display: block; margin: 0 0 6px; min-width: 0; }

.etix-inline label {
    display: block;
    margin: 0 0 2px;
    font-size: .85em;
}

.etix-inline input[type="text"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 6px 8px;
    font-size: 16px;   /* sotto i 16px iOS ingrandisce la pagina al fuoco */
    line-height: 1.3;
    border: 1px solid #b9945a;
    border-radius: 4px;
    background: #fff;
    color: #2b2b2b;
}

.etix-inline__e {
    margin: 0 0 6px;
    min-height: 0;
    font-size: .85em;
    color: #8a1f11;
}
.etix-inline__e:empty { margin: 0; }

.etix-inline__ok {
    display: inline-block;
    padding: 6px 14px;
    font-size: .9em;
    cursor: pointer;
}
.etix-inline__ok[disabled] { opacity: .6; cursor: default; }

/* Dove la riga del carrello e' una riga di tabella, il campo viaggia in una
 * riga sua, con lo stesso tag: un <div> dentro un <tr> il browser lo sposta. */
.etix-inline-invol > td { padding: 0; border: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
 *  IL TETTO, DETTO SULLA SCHEDA PRODOTTO
 *
 *  Sta accanto al pulsante che non funzionera': e' l'unico posto dove chi ha
 *  cliccato lo sta guardando. Vedi limite-prodotto.js.
 * ══════════════════════════════════════════════════════════════════════════ */
.etix-limite {
    margin: 0 0 12px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #4a3200;
    background: #fcf3e3;
    border: 1px solid #e0a944;
    border-left: 4px solid #d4881f;
    border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  LA RICHIESTA — la spunta facoltativa, dentro il pannello
 *
 *  ⚠️ Sta in questo foglio, non in uno suo, perché vive DENTRO il pannello dei
 *  nominativi: è quel nodo che il JS sposta nella finestra. Un secondo foglio
 *  sarebbe un secondo file da caricare per tre regole, e uno da ricordarsi di
 *  accodare il giorno in cui questo cambia nome.
 *
 *  Nessun colore di marca, come tutto il resto: è una scelta, non un avviso.
 * ══════════════════════════════════════════════════════════════════════════ */
.etix-richiesta {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 6px;
    background: rgba(0, 0, 0, .03);
}

.etix-richiesta__scelta {
    display: flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    /* Tutta la riga è cliccabile: su un telefono la casella da sola è un
       bersaglio da 13 px, e mancarla è la norma, non l'eccezione. */
    cursor: pointer;
}

.etix-richiesta__scelta input {
    /* La casella nativa del sistema: si vede spuntata a colpo d'occhio, e su
       ogni piattaforma ha l'aspetto che l'utente riconosce. */
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
}

/* La spiegazione: piccola, allineata al testo della casella e non alla
   casella. ⚠️ Non ha un `:empty` da gestire — quando non c'è, il <p> non viene
   proprio emesso: una riga vuota sotto una spunta si legge come un difetto. */
.etix-richiesta__nota {
    margin: 6px 0 0 26px;
    font-size: .85em;
    line-height: 1.4;
    opacity: .75;
}