/**
 * 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; }

.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; }