/*
 * Il vestito del form di domanda.
 *
 * ⚠️ NOMI DELLE CLASSI. Tutte prefissate `ecs-`. Sul tema di questo negozio i
 * nomi generici sono gia' occupati — `.cta` appartiene al tema — e una classe
 * che si sovrappone non da' errore: cambia silenziosamente qualcos'altro.
 *
 * ⚠️ BOX-SIZING. Il tema non dichiara `border-box`. Senza la riga qui sotto i
 * campi con padding escono dalla colonna. E' dichiarato solo dentro `#ecs-apply`
 * per non cambiare il resto della pagina, che non e' nostro.
 */

#ecs-apply,
#ecs-apply *,
#ecs-apply *::before,
#ecs-apply *::after { box-sizing: border-box; }

/* ⚠️ TOKEN (22/09/2026): i colori di marca si leggono dai token del tema
   hummingbird-ecs (--ecs-ink, --ecs-accent, --ecs-accent-600, --ecs-line) con
   il ripiego scritto accanto: su V12 valgono i ripieghi, su PS 9 quelli del
   tema. I nomi locali restano per non toccare il resto del file.
   Contrasto: il pieno dei bottoni e' --ecs-accent-600 (4,8:1 col bianco;
   #e64b38 fa 3,9:1), i bordi dei campi #8e8882 (3,5:1, WCAG 1.4.11). */
#ecs-apply {
    --ecs-arancio: var(--ecs-accent, #e64b38);
    --ecs-arancio-scuro: var(--ecs-accent-600, #d13a28);
    --ecs-arancio-testo: #c63b28;
    --ecs-testo: var(--ecs-ink, #32323f);
    --ecs-tenue: #5f5a54;
    --ecs-bordo: var(--ecs-line, #e3e1dd);
    --ecs-bordo-campo: #8e8882;
    --ecs-fondo-tenue: #faf9f7;
    --ecs-verde: #256b4d;
    --ecs-rosso: #b3261e;
    --ecs-ambra: #8f4e12;
    --ecs-raggio: 10px;
    color: var(--ecs-testo);
    font-size: 15px;
    line-height: 1.5;
}

/* ---------------------------------------------------------- i tre passi --- */

#ecs-apply .ecs-passi {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}
#ecs-apply .ecs-passo-voce {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 3px solid var(--ecs-bordo);
    color: var(--ecs-tenue);
    font-size: 13px;
    min-width: 0;
}
#ecs-apply .ecs-passo-voce.is-corrente {
    border-top-color: var(--ecs-arancio);
    color: var(--ecs-testo);
    font-weight: 600;
}
#ecs-apply .ecs-passo-voce.is-fatto { border-top-color: var(--ecs-verde); }
#ecs-apply .ecs-passo-n {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #6b655f;
    color: #fff;
    font-size: 12px; font-weight: 700;
}
/* Numero bianco a 12px: serve il pieno scuro (4,8:1); l'arancio di marca resta sulla linea. */
#ecs-apply .ecs-passo-voce.is-corrente .ecs-passo-n { background: var(--ecs-arancio-scuro); }
#ecs-apply .ecs-passo-voce.is-fatto .ecs-passo-n { background: var(--ecs-verde); }
#ecs-apply .ecs-passo-testo {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------- il passo --- */

#ecs-apply .ecs-passo-testata { margin-bottom: 20px; }
#ecs-apply .ecs-passo-testata h3 {
    margin: 0 0 4px;
    font-size: 22px; font-weight: 700; line-height: 1.2;
}
#ecs-apply .ecs-passo-testata p {
    margin: 0;
    color: var(--ecs-tenue);
    font-size: 14px;
}

/* ⚠️ Due colonne, ma solo dove c'e' spazio davvero: la colonna della
   registrazione e' larga circa 560px su desktop, quindi il punto di rottura
   si misura sul CONTENITORE, non sulla finestra. */
#ecs-apply .ecs-griglia {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px 20px;
}
/* ⚠️ `minmax(0, 1fr)` e NON `1fr`. La forma breve vale `minmax(auto, 1fr)`, e
   `auto` non scende sotto il contenuto minimo della colonna: una tendina con
   una voce lunga («Office or hospitality — for our own use») allarga la sua
   colonna e il form esce dal riquadro. Visto qui il 16/09/2026. */
@media (min-width: 992px) {
    #ecs-apply .ecs-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #ecs-apply .ecs-campo--ampio { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------- i campi --- */

#ecs-apply .ecs-campo { min-width: 0; }

#ecs-apply .ecs-etichetta {
    display: block;
    text-align: left;
    margin: 0 0 6px;
    font-size: 14px; font-weight: 600;
    /* Le etichette dell'originale andavano a capo dentro una colonna da 90px:
       «Describe your / business and what / services or goods / you sell». */
    line-height: 1.35;
}
#ecs-apply .ecs-obb { color: var(--ecs-arancio); margin-left: 2px; }

#ecs-apply .ecs-input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--ecs-bordo-campo);
    border-radius: var(--ecs-raggio);
    background: #fff;
    font-size: 15px;
    font-family: inherit;
    color: var(--ecs-testo);
    transition: border-color .15s ease, box-shadow .15s ease;
}
#ecs-apply .ecs-input:focus {
    outline: 2px solid var(--ecs-arancio-testo);
    outline-offset: 0;
    border-color: var(--ecs-arancio-testo);
    box-shadow: none;
}
#ecs-apply :focus-visible { outline: 2px solid var(--ecs-arancio-testo); outline-offset: 2px; }
/* ⚠️ `!important` a malincuore, ma serve: la textarea finisce a
   `width: fit-content` — cioe' larga quanto i suoi 20 `cols`, circa 200px —
   nonostante sia `.form-control` sia `.ecs-input` dicano `width: 100%`.
   E' la domanda piu' importante del form: una casella da due righe larga un
   quinto della colonna e' il motivo per cui 126 risposte su 634 stanno sotto
   i 15 caratteri. La misura della casella e' la lunghezza della risposta. */
#ecs-apply textarea.ecs-input {
    width: 100% !important;
    min-width: 100%;
    min-height: 140px;
    resize: vertical;
}
/* ⚠️ Stessa contesa del padding e delle caselle: il tema lascia le tendine a
   `width: auto`, cosi' ognuna e' larga quanto la sua voce piu' lunga e due
   campi affiancati non si allineano mai. */
#ecs-apply select.ecs-input {
    width: 100% !important;
    max-width: 100%;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235f5a54' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 34px;
}

#ecs-apply .ecs-aiuto {
    margin: 6px 0 0;
    color: var(--ecs-tenue);
    font-size: 13px;
    line-height: 1.4;
}
/* aiuto vuoto (tolto dalla revisione testi del 25/09, o svuotato da apply.js per i paesi UE/extra UE): niente spazio */
#ecs-apply .ecs-aiuto:empty { display: none; }

#ecs-apply .ecs-campo--errore .ecs-input { border-color: var(--ecs-rosso); }
#ecs-apply .ecs-campo--errore .ecs-etichetta { color: var(--ecs-rosso); }

/* telefono: prefisso stretto + numero largo */
#ecs-apply .ecs-telefono { display: flex; gap: 8px; }
#ecs-apply .ecs-telefono .ecs-prefisso { flex: 0 0 104px; width: 104px !important; }
#ecs-apply .ecs-telefono input { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------- esito della partita IVA --- */

#ecs-apply .ecs-esito {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--ecs-raggio);
    border-left: 3px solid var(--ecs-bordo);
    background: var(--ecs-fondo-tenue);
    font-size: 13.5px;
}
#ecs-apply .ecs-esito strong { font-weight: 600; }
#ecs-apply .ecs-esito--valida { border-left-color: var(--ecs-verde); }
#ecs-apply .ecs-esito--valida strong { color: var(--ecs-verde); }
#ecs-apply .ecs-esito--non-valida { border-left-color: var(--ecs-rosso); }
#ecs-apply .ecs-esito--non-valida strong { color: var(--ecs-rosso); }
#ecs-apply .ecs-esito--ignota { border-left-color: var(--ecs-ambra); }
#ecs-apply .ecs-esito--ignota strong { color: var(--ecs-ambra); }
#ecs-apply .ecs-esito--attesa { border-left-color: var(--ecs-tenue); }
#ecs-apply .ecs-esito .ecs-nota { color: var(--ecs-tenue); font-style: italic; }

/* ------------------------------------------------------ caselle a scheda --- */

#ecs-apply .ecs-schede {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
/* ⚠️ Il tema allinea a destra OGNI etichetta (`.label, label { text-align:
   right }`). Queste schede sono `<label>`, e senza la riga qui sotto il testo
   si incolla al bordo destro e va a capo male («Barista / tools»). */
#ecs-apply .ecs-scheda {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 10px;
    margin: 0;
    /* ⚠️ `!important` perche' il tema azzera il padding di ogni `label` con la
       stessa arma. Contesa su due sole proprieta', non a tappeto. */
    padding: 12px 14px !important;
    border: 1px solid var(--ecs-bordo);
    border-radius: var(--ecs-raggio);
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: border-color .15s ease, background .15s ease;
}
#ecs-apply .ecs-scheda:hover { border-color: var(--ecs-bordo-campo); }
/* ⚠️ Idem: il tema stira ogni `input` a tutta larghezza, e la casella si
   mangiava la scheda (168px su 170) spingendo l'etichetta fuori dal riquadro. */
#ecs-apply .ecs-scheda input[type="checkbox"] {
    flex: 0 0 17px;
    width: 17px !important;
    height: 17px !important;
    min-width: 0 !important;
    margin: 0 !important;
    accent-color: var(--ecs-arancio);
}
#ecs-apply .ecs-scheda > span { flex: 1 1 auto; text-align: left; }
#ecs-apply .ecs-scheda:has(input:checked) {
    border-color: var(--ecs-arancio);
    background: rgba(230, 75, 56, .05);
}

/* ------------------------------------------------------------- i bottoni --- */

#ecs-apply .ecs-azioni {
    display: flex;
    gap: 10px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--ecs-bordo);
}
#ecs-apply .ecs-btn {
    min-height: 44px;
    padding: 11px 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 15px; font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease;
}
#ecs-apply .ecs-btn--pieno { background: var(--ecs-arancio-scuro); color: #fff; margin-left: auto; }
#ecs-apply .ecs-btn--pieno:hover { background: #b93a28; }
/* ⚠️ `!important` perche' il CSS di privateshop colora TUTTI i bottoni della
   pagina con `#privatebox button { background:#E64B38 !important }`: col
   bianco sopra fa 3,9:1, sotto la soglia AA. Solo i nostri due bottoni pieni. */
#privatebox #ecs-apply .ecs-btn--pieno { background: var(--ecs-arancio-scuro) !important; }
#privatebox #ecs-apply .ecs-btn--pieno:hover { background: #b93a28 !important; }
#privatebox #ecs-apply .ecs-btn--piano { background: #fff !important; }
#ecs-apply .ecs-btn--piano { background: #fff; border-color: var(--ecs-bordo-campo); color: var(--ecs-testo); }
#ecs-apply .ecs-btn--piano:hover { background: var(--ecs-fondo-tenue); }

/* -------------------------------------------------------------- telefono --- */

@media (max-width: 480px) {
    #ecs-apply .ecs-passo-testo { display: none; }
    #ecs-apply .ecs-passo-voce { justify-content: center; padding: 10px 4px; }
    #ecs-apply .ecs-passo-testata h3 { font-size: 20px; }
    #ecs-apply .ecs-azioni { flex-direction: column-reverse; }
    #ecs-apply .ecs-btn { width: 100%; margin-left: 0; }
}

/* I campi di accesso arrivano qui dentro spostati da apply.js e portano con
   se' il vestito del tema: si riallineano a quello del form nuovo. */
#ecs-apply [data-ruolo="culla-accesso"] { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 992px) {
    #ecs-apply [data-ruolo="culla-accesso"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
#ecs-apply [data-ruolo="culla-accesso"] .form-group { margin: 0; }
#ecs-apply [data-ruolo="culla-accesso"] .form-group > label,
#ecs-apply [data-ruolo="culla-accesso"] .col-md-3,
#ecs-apply [data-ruolo="culla-accesso"] .form-control-comment { display: none; }
#ecs-apply [data-ruolo="culla-accesso"] .rf_input_label {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 0 6px !important;
    font-size: 14px; font-weight: 600;
}
#ecs-apply [data-ruolo="culla-accesso"] .col-md-6 {
    display: block; width: 100%; max-width: none; padding: 0; flex: none;
}
#ecs-apply [data-ruolo="culla-accesso"] .form-control {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--ecs-bordo-campo);
    border-radius: var(--ecs-raggio);
    font-size: 15px;
}

/* ------------------------------------------- intro e via d'uscita -------- */

.ecs-intro {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ecs-ink, #32323f);
}
.ecs-intro--tempi { color: #5f5a54; font-size: 14px; }

/*
 * La deviazione verso il negozio per privati.
 * ⚠️ Deve essere VISIBILE, non una nota a pie' di pagina: e' l'unica parte
 * del form che agisce prima che qualcuno decida di mentire. Un privato che
 * legge «le stesse macchine, a prezzo al pubblico, qui» in genere clicca.
 */
.ecs-deviazione {
    margin: 0 0 26px;
    padding: 14px 16px;
    border: 1px solid var(--ecs-line, #e3e1dd);
    border-left: 3px solid var(--ecs-accent, #e64b38);
    border-radius: 10px;
    background: #fff;
}
.ecs-deviazione p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.ecs-deviazione a {
    font-size: 14px; font-weight: 600;
    color: #c63b28; text-decoration: none;
}
.ecs-deviazione a:hover { text-decoration: underline; }

/* ------------------------------------------------ la pagina, non il form --- */
/* ⚠️ Il blocco del logo (markup di ECM) era largo 1.450px in una finestra da
   1.440: la pagina scorreva di lato di 5px su desktop. */
#logo_basic { box-sizing: border-box; max-width: 100%; }

/* ------------------------------ «Dati aziendali» in «I tuoi dati personali» --- */
/* Sola lettura: sono i dati verificati alla domanda (vedi ecs_dealerapply::schedaAzienda
   e il ramo `identity` di privateshopfields.tpl nel tema 9.2). */
.ecs-scheda-azienda {
    box-sizing: border-box;
    margin: 24px 0;
    padding: 18px 20px;
    border: 1px solid var(--ecs-line, #e3e1dd);
    border-radius: 10px;
    background: #faf9f7;
    color: var(--ecs-ink, #32323f);
}
.ecs-scheda-azienda * { box-sizing: border-box; }
.ecs-scheda-azienda__titolo { margin: 0 0 12px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.ecs-scheda-azienda__dati {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 24px;
    margin: 0;
}
.ecs-scheda-azienda__riga { min-width: 0; }
.ecs-scheda-azienda__riga--ampia { grid-column: 1 / -1; }
.ecs-scheda-azienda dt { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: #5f5a54; }
.ecs-scheda-azienda dd { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.ecs-scheda-azienda__nota { margin: 14px 0 0; font-size: 13.5px; color: #5f5a54; }