/* ===========================================================================
 * Registrazione nuovo cliente (customer/account/create)
 *
 * Caricato solo sull'handle customer_account_create, dopo styles_0030 /
 * digithera_0037 / responsive: a parita' di specificita' vince questo file.
 *
 * Tutte le regole sono agganciate a .registrazione, la classe del contenitore
 * di ogni step: fuori da questa pagina non hanno effetto.
 *
 * I molti !important non sono un vezzo: il tema dichiara !important su
 * border, background, height e box-shadow dei controlli di form, e senza
 * rilanciare non si riesce a ridisegnarli. Dove basta la specificita' (tutti
 * i controlli del form vivono dentro un .field) l'!important non c'e'.
 * ======================================================================== */


/* --- palette e misure della pagina --------------------------------------- */

.registrazione {
    --reg-verde:        #4C9D2A;
    --reg-verde-scuro:  #3d8021;
    --reg-testo:        #2f3437;
    --reg-testo-soft:   #6b7378;
    --reg-bordo:        #d3d9dd;
    --reg-bordo-soft:   #e6eae7;
    --reg-campo-bg:     #fff;
    --reg-campo-h:      46px;
    --reg-raggio:       6px;
    --reg-errore:       #d64228;

    /* l'ombra "di sito": lume interno in alto + appoggio morbido sotto */
    --reg-ombra:        inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(0, 0, 0, .07);
    --reg-ombra-hover:  inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 5px rgba(0, 0, 0, .10);
    --reg-ombra-focus:  0 0 0 3px rgba(76, 157, 42, .18);
}


/* --- struttura: icona a sinistra, form a destra --------------------------- */

/* Sopra i 980px il tema tiene l'icona (24%) affiancata al form: qui il form
   si prende qualche punto in piu' di larghezza, cosi' le due colonne interne
   restano affiancate finche' l'icona resta al suo posto. Sotto i 980px
   responsive.css porta l'icona sopra e il form a tutta larghezza. */
.registrazione--form .registration_pre_form {
    width: 73%;
    background: #fafafa;
    border-radius: 10px;
}

.registrazione--form .registration_icon {
    width: 23% !important;
}


/* --- struttura: i raggruppamenti del form -------------------------------- */

/* I fieldset raggruppano le sezioni al posto dei vecchi <div>; il titolo resta
   un heading (con aria-labelledby sul fieldset) e non un <legend>, cosi' il
   bordo del riquadro non viene interrotto e valgono le regole del tema su
   #contatti_form h2 e .col-main h3. */
.registrazione--form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}


/* --- testi introduttivi e titoli di sezione ------------------------------ */

/* il tema mette 45px di padding sotto ogni <p> di #contatti_form: qui si
   tocca solo il cappello introduttivo (figli diretti del form), per non
   rimangiarsi le regole su p.required e sul riquadro PEC */
.registrazione--form #contatti_form > form > p {
    font-size: 16px;
    line-height: 1.55;
    padding-bottom: 14px;
}

.registrazione--form #contatti_form h1 {
    font-size: 26px;
    margin-bottom: 18px;
}

.registrazione--form #contatti_form h2 {
    font-size: 19px;
    line-height: 1.3;
    margin: 6px 0 18px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--reg-bordo-soft);
}


/* --- etichette ----------------------------------------------------------- */

.registrazione .field {
    margin: 0 0 16px 0;
}

/* montserratbold e' una famiglia a se': si usa quella invece di font-weight,
   altrimenti il browser finto-grassetta montserratregular */
.registrazione .field label {
    display: block;
    margin: 0 0 6px 0;
    font-family: 'montserratbold', Arial, sans-serif !important;
    font-weight: normal;
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: .01em;
    color: var(--reg-testo);
}

/* il tema forza .content_form .field span a width:85% / font-size:14px:
   dentro le label deve tornare testo normale. .reg-hint resta fuori,
   e' l'icona FontAwesome e non deve cambiare famiglia. */
.registrazione .field label span:not(.reg-hint) {
    display: inline !important;
    width: auto !important;
    font-family: 'montserratregular', Arial, sans-serif !important;
    font-size: inherit !important;
    font-weight: normal;
    color: var(--reg-testo-soft) !important;
}

/* asterisco dei campi obbligatori */
.registrazione em {
    color: var(--reg-errore);
    font-style: normal;
    font-weight: 700;
    padding-left: 3px;
}

/* icona informativa accanto alla label della password: sta dentro la label,
   quindi deve rilanciare sulla regola generica qui sopra */
.registrazione .field label span.reg-hint {
    display: inline-block !important;
    width: auto !important;
    margin-left: 6px;
    font-size: 14px !important;
    color: var(--reg-verde) !important;
    cursor: help;
    vertical-align: baseline;
}

.registrazione .reg-nowrap {
    white-space: nowrap;
}

.registrazione label[readonly] {
    color: var(--reg-testo-soft) !important;
}


/* --- campi di testo e select: aspetto comune ----------------------------- */

.registrazione .field input[type="text"],
.registrazione .field input[type="password"],
.registrazione .field input[type="email"],
.registrazione .field input[type="tel"],
.registrazione .field input[type="number"],
.registrazione .field select {
    box-sizing: border-box;
    width: 100% !important;
    height: var(--reg-campo-h) !important;
    margin: 0;
    padding: 0 14px !important;
    font-family: 'montserratregular', Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.4;
    color: var(--reg-testo) !important;
    background: var(--reg-campo-bg) !important;
    border: 1px solid var(--reg-bordo) !important;
    border-radius: var(--reg-raggio) !important;
    box-shadow: var(--reg-ombra) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.registrazione .field input[type="text"]:hover,
.registrazione .field input[type="password"]:hover,
.registrazione .field select:hover {
    border-color: #b9c1c6 !important;
    box-shadow: var(--reg-ombra-hover) !important;
}

.registrazione .field input[type="text"]:focus,
.registrazione .field input[type="password"]:focus,
.registrazione .field input[type="email"]:focus,
.registrazione .field input[type="tel"]:focus,
.registrazione .field input[type="number"]:focus,
.registrazione .field select:focus {
    outline: 0 !important;
    border: 1px solid var(--reg-verde) !important;
    background-color: #fff !important;
    font-weight: normal !important;
    box-shadow: var(--reg-ombra-focus) !important;
}

.registrazione .field input::-webkit-input-placeholder { color: #a7aeb3; }
.registrazione .field input::placeholder                { color: #a7aeb3; }


/* --- select: freccia disegnata, non piu' la PNG posizionata in vw -------- */

.registrazione .field select {
    padding-right: 40px !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234C9D2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
    background-color: var(--reg-campo-bg) !important;
    text-overflow: ellipsis;
}

.registrazione .field select:focus {
    background-position: right 14px center !important;
}

.registrazione .field select option {
    color: var(--reg-testo);
    background: #fff;
}

/* multiselect: niente freccia, altezza libera */
.registrazione .field select[multiple] {
    height: auto !important;
    min-height: 150px;
    padding: 8px !important;
    background-image: none !important;
    cursor: default;
}

.registrazione .field select[multiple] option {
    padding: 5px 8px;
    border-radius: 4px;
}

.registrazione .reg-multiselect {
    width: 100% !important;
}


/* --- stati: sola lettura, disabilitato, errore --------------------------- */

.registrazione .field input[readonly],
.registrazione .field input:disabled,
.registrazione .field select:disabled {
    color: var(--reg-testo-soft) !important;
    background-color: #f1f3f5 !important;
    border-color: #dfe3e6 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* campo codice destinatario disabilitato da fatteleSetup() */
.registrazione input[name^="dh_fattele"][readonly] {
    background-color: #f1f3f5 !important;
}

/* il tema dipinge i campi in errore con padding e bordo tratteggiato,
   che qui sballerebbero l'altezza */
.registrazione .field .validation-failed {
    padding: 0 14px !important;
    border: 1px solid var(--reg-errore) !important;
    border-radius: var(--reg-raggio) !important;
    background: #fdf5f3 !important;
    box-shadow: 0 0 0 3px rgba(214, 66, 40, .12) !important;
}

.registrazione .field select.validation-failed {
    padding: 0 40px 0 14px !important;
}

.registrazione .field .validation-advice {
    width: auto !important;
    min-height: 0;
    margin: 6px 0 0 0;
    padding: 0 0 0 18px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--reg-errore);
    background-position: 0 1px;
}


/* --- credenziali: riquadro dedicato --------------------------------------- */

.registrazione .reg-credentials {
    width: auto;
    margin: 34px 0 0 0;
    padding: 24px 26px 20px 26px;
    border: 1px solid var(--reg-bordo-soft);
    border-top: 3px solid var(--reg-verde);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

.registrazione .reg-credentials h3 {
    margin: 0 0 18px 0;
    font-family: 'montserratbold', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.3;
    color: var(--reg-verde);
}

/* stessa regola delle colonne: due campi affiancati finche' ci stanno */
.registrazione .reg-credentials .reg-credentials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 0 44px;
}

.registrazione .reg-credentials .field {
    min-width: 0;
}

/* campo con label lunga: si prende tutta la riga della griglia */
.registrazione .reg-credentials .reg-field--wide {
    grid-column: 1 / -1;
}

/* il tema stringe le password al 75% */
.registrazione .reg-credentials input[type="password"] {
    width: 100% !important;
}

.registrazione .reg-credentials .input-box {
    display: block;
}


/* --- misuratore di robustezza della password ----------------------------- */

/* ancora per il popover del misuratore */
.registrazione .hover {
    position: relative;
}

.registrazione .reg-credentials #pwindicator,
.registrazione .reg-credentials #pwchecker {
    width: 100%;
    margin-top: 8px;
}

.registrazione .reg-credentials #pwindicator .bar {
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

.registrazione .reg-credentials #pwindicator .label,
.registrazione .reg-credentials #pwchecker .label {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--reg-testo-soft);
}


/* --- popover del suggerimento password ------------------------------------
 * Lo costruisce digithera/popover.js (widget metro.popover) e lo appende a
 * <body>: sta fuori da .registrazione, quindi non lo si puo' agganciare alla
 * classe di pagina. Non e' un problema di isolamento perche' questo foglio
 * viene caricato solo sull'handle customer_account_create; il selettore parte
 * comunque da body> per non dipendere dall'ordine di caricamento nel battere
 * il blocco .popover di digithera_0037.css.
 *
 * Stesso vestito del tooltip del title (.ui-tooltip, digithera_0037.css), ma con
 * fondo opaco: qui il marker sporge per meta' dal riquadro e con un fondo
 * semitrasparente la parte sovrapposta verrebbe piu' scura. #252f38 e' la
 * resa su bianco del rgba(28,38,48,.96) del tooltip.
 * ------------------------------------------------------------------------ */

body > .popover {
    min-width: 0;
    /* il tetto vale anche sui telefoni piu' stretti, dove 320px pieni
       sborderebbero comunque */
    max-width: min(320px, calc(100vw - 20px));
    padding: 14px 16px;
    background: #252f38 !important;
    border: 0;
    border-radius: 8px;
    color: #f2f5f7;
    font-family: 'montserratregular', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: .01em;
    text-align: left;
    z-index: 9999;
}

body > .popover.popover-shadow {
    box-shadow: 0 10px 24px rgba(0, 0, 0, .20), 0 2px 6px rgba(0, 0, 0, .14);
}

/* il marker riprende il fondo del riquadro con background-color: inherit,
   quindi segue da solo il nuovo colore: qui si arrotonda appena lo spigolo */
body > .popover:before {
    border-radius: 2px;
}

/* Quando registrazione_0001.js ripiega il popover sotto l'icona (schermo
   stretto, vedi vincolaPopoverAlViewport) il marker passa sopra, dove il
   tema lo centrerebbe sul riquadro: --reg-marker-x, scritta dallo stesso
   JS, lo riporta sotto l'icona. Senza la variabile vale il 50% di prima. */
body > .popover.marker-on-top:before {
    left: var(--reg-marker-x, 50%);
}

/* elenco dei requisiti della password */
body > .popover ul {
    margin: 9px 0 0 0;
    padding: 0;
    list-style: none;
}

body > .popover ul li {
    position: relative;
    display: block;
    margin: 0 0 4px 0;
    padding-left: 15px;
    line-height: 1.5;
}

body > .popover ul li:before {
    content: "";
    position: absolute;
    left: 2px;
    top: .62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7bc45a;
}

/* gli esempi fra parentesi: il rosso di .registrazione em non arriva fin
   qui, e su fondo scuro starebbe male comunque */
body > .popover em {
    font-style: normal;
    color: #9fb0bd;
}


/* --- riquadro promozionale PEC ------------------------------------------- */

/* prima veniva spinto in fondo con margin-top:100px: ora la colonna e' flex
   e il riquadro si appoggia da solo alla base */
.registrazione .reg-promo-pec {
    margin: auto 0 0 0 !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    line-height: 1.5;
    color: var(--reg-testo) !important;
    background: #f2f8ee;
    border-left: 3px solid var(--reg-verde);
    border-radius: 0 var(--reg-raggio) var(--reg-raggio) 0;
}

.registrazione .reg-promo-pec a {
    color: var(--reg-verde-scuro);
    font-weight: 700;
    text-decoration: underline;
}


/* --- campi tecnici -------------------------------------------------------- */

/* campi riservati all'uso interno: restano nel POST, non a video */
.registrazione .reg-hidden {
    display: none;
}


/* --- step 1: scelta del tipo di cliente ---------------------------------- */

.registrazione__benvenuto {
    text-align: center;
    margin-bottom: 20px;
}


/* --- schermi stretti ------------------------------------------------------ */

/* Sotto i 980px responsive.css porta l'icona sopra al form: da li' in giu' le
   due colonne se la vedono con la griglia, che le tiene affiancate finche'
   c'e' spazio per due campi leggibili. Qui si sistema solo il contorno. */
@media screen and (max-width: 980px) {
    /* l'id serve per battere #contatti_form{padding:30px} del tema */
    .registrazione--form #contatti_form {
        width: 94% !important;
        padding: 24px 20px;
    }

    .registrazione--form .registration_icon {
        width: 250px !important;
    }
}

@media screen and (max-width: 712px) {
    .registrazione--form #contatti_form {
        padding: 18px 14px;
    }
}

@media screen and (max-width: 600px) {
    .registrazione--form #contatti_form h1 {
        font-size: 22px;
    }

    .registrazione .reg-credentials {
        padding: 20px 16px 16px 16px;
    }
}


/* ===========================================================================
 * WIZARD A PASSI
 *
 * Il form degli step 7 e 8 resta un <form> unico che fa una sola POST su
 * /customer/account/createpost/: i "passi" sono <section class="reg-panel">
 * mostrati uno alla volta da registrazione_0001.js. I pannelli chiusi
 * restano nel DOM, quindi tutti i campi finiscono comunque nel POST e il
 * backend non cambia di una riga.
 *
 * Nota: Validation.isVisible() di prototype/validation.js considera valido
 * ogni campo non visibile, per cui al submit la validazione dei pannelli
 * chiusi non scatta: e' il JS che valida un pannello alla volta prima di
 * lasciar passare avanti.
 * ======================================================================== */


/* --- indicatore di avanzamento -------------------------------------------- */

.registrazione .reg-stepper {
    margin: 0 0 30px 0;
}

.registrazione .reg-stepper__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.registrazione .reg-stepper__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
}

/* La linea di collegamento: due mezze linee per ogni voce, cosi' i tratti
   restano agganciati al centro dei pallini anche cambiando il numero di passi. */
.registrazione .reg-stepper__item::before,
.registrazione .reg-stepper__item::after {
    content: "";
    position: absolute;
    top: 17px;
    width: 50%;
    height: 2px;
    background: var(--reg-bordo);
}

.registrazione .reg-stepper__item::before { left: 0; }
.registrazione .reg-stepper__item::after  { right: 0; }

/* i due tratti esterni non servono */
.registrazione .reg-stepper__item:first-child::before,
.registrazione .reg-stepper__item:last-child::after {
    display: none;
}

/* il tratto a monte di un passo raggiunto e' verde */
.registrazione .reg-stepper__item.is-done::before,
.registrazione .reg-stepper__item.is-done::after,
.registrazione .reg-stepper__item.is-current::before {
    background: var(--reg-verde);
}

/* Il passo e' un <button>: nessun <div onclick>, quindi tastiera e lettori
   di schermo lo trovano da soli. */
.registrazione .reg-stepper__btn {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none !important;
    border: 0;
    box-shadow: none;
    font-family: 'montserratregular', Arial, sans-serif;
    color: var(--reg-testo-soft);
    cursor: default;
    text-align: center;
}

/* si possono riaprire solo i passi gia' completati */
.registrazione .reg-stepper__item.is-done .reg-stepper__btn {
    cursor: pointer;
}

/* Il tema veste OGNI <span> di questa pagina, e lo stepper e' fatto di span
   dentro un <button>. Due regole si mettono di mezzo:

     .account-login button span { padding: 8px 10px; font-size: 16px }
     #contatti_form span        { font-size: 18px; color: var(--primary-green) }

   Il padding spingeva la cifra in basso a destra dentro il cerchio (e la
   spunta del passo completato in basso a sinistra). Il colore verde, che
   arriva da un selettore con ID e quindi batte qualunque nostra classe,
   rendeva la cifra del passo corrente verde su fondo verde: invisibile.

   Qui si azzera tutto in un punto solo. Gli !important servono per il
   selettore con ID: senza, non c'e' specificita' di classi che lo superi. */
.registrazione .reg-stepper__num,
.registrazione .reg-stepper__cifra,
.registrazione .reg-stepper__label {
    padding: 0;
    font-size: inherit !important;
    color: inherit !important;
    transition: none;
}

/* La cifra e' solo testo: eredita misura e colore dal cerchio che la
   contiene, cosi' basta vestire il cerchio. */
.registrazione .reg-stepper__cifra {
    display: block;
    margin: 0;
    line-height: 1;
}

/* Centratura geometrica invece che con line-height: il posizionamento non
   dipende piu' dalle metriche del font, quindi cifra e spunta cadono al
   centro del cerchio qualunque glifo sia. */
.registrazione .reg-stepper__num {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 8px auto;
    border: 2px solid var(--reg-bordo);
    border-radius: 50%;
    background: #fff;
    font-family: 'montserratbold', Arial, sans-serif;
    font-size: 15px !important;
    line-height: 1;
    color: var(--reg-testo-soft) !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.registrazione .reg-stepper__label {
    display: block;
    padding: 0 4px;
    font-size: 12px !important;
    line-height: 1.3;
    color: var(--reg-testo-soft) !important;
}

/* Passo corrente. Il colore porta !important perche' deve superare il reset
   qui sopra, che a sua volta ce l'ha per battere #contatti_form span. */
.registrazione .reg-stepper__item.is-current .reg-stepper__num {
    border-color: var(--reg-verde);
    background: var(--reg-verde);
    color: #fff !important;
    box-shadow: 0 0 0 4px rgba(76, 157, 42, .16);
}

.registrazione .reg-stepper__item.is-current .reg-stepper__label {
    font-family: 'montserratbold', Arial, sans-serif;
    color: var(--reg-verde-scuro) !important;
}

/* Passo completato: spunta al posto della cifra, cosi' lo stato non e'
   affidato al solo colore. */
.registrazione .reg-stepper__item.is-done .reg-stepper__num {
    border-color: var(--reg-verde);
    background: #eaf5e4;
    color: var(--reg-verde-scuro) !important;
}

/* La spunta e' uno pseudo-elemento, quindi nessuna regola del tema sugli
   span la raggiunge: le basta cadere nella cella della griglia. */
.registrazione .reg-stepper__item.is-done .reg-stepper__num::after {
    content: "\2713";
    font-size: 16px;
    line-height: 1;
}

.registrazione .reg-stepper__item.is-done .reg-stepper__cifra {
    display: none;
}

.registrazione .reg-stepper__btn:focus-visible .reg-stepper__num {
    outline: 2px solid var(--reg-verde-scuro);
    outline-offset: 3px;
}


/* --- contatore testuale e barra: l'unica forma su schermo stretto --------- */

.registrazione .reg-stepper__conteggio {
    display: none;
    margin: 0 0 10px 0;
    font-family: 'montserratbold', Arial, sans-serif;
    font-size: 13px;
    color: var(--reg-verde-scuro);
}

.registrazione .reg-stepper__barra {
    display: none;
    height: 6px;
    margin: 0;
    border-radius: 3px;
    background: var(--reg-bordo-soft);
    overflow: hidden;
}

.registrazione .reg-stepper__barra span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--reg-verde);
    transition: width .2s ease;
}


/* --- pannelli ------------------------------------------------------------- */

.registrazione .reg-panel {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.registrazione .reg-panel[hidden] {
    display: none;
}

/* Titolo e occhiello del passo vivono dentro #contatti_form, dove il tema
   detta legge con selettori a ID:

     #contatti_form h2 { font-size: 30px; margin: 29px 0 52px 0 }
     #contatti_form p  { font-size: 18px; margin: 0; color: #000 }

   Nessuna specificita' di sole classi li supera, da cui gli !important:
   senza, il titolo di ogni passo veniva 30px con 52px di stacco e
   l'occhiello perdeva colore e respiro. */
.registrazione .reg-panel__titolo {
    margin: 0 0 6px 0 !important;
    font-family: 'montserratbold', Arial, sans-serif;
    font-size: 21px !important;
    line-height: 1.3;
    color: var(--reg-verde-scuro) !important;
}

.registrazione .reg-panel__intro {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.55;
    color: var(--reg-testo-soft) !important;
}

/* Comparsa breve del pannello che entra, disattivata per chi chiede di
   ridurre le animazioni. */
.registrazione .reg-panel.is-entrato {
    animation: reg-entra .18s ease-out;
}

@keyframes reg-entra {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .registrazione .reg-panel.is-entrato { animation: none; }
    .registrazione .reg-stepper__barra span { transition: none; }
}


/* --- riepilogo dell'ultimo passo ------------------------------------------ */

.registrazione .reg-riepilogo {
    margin: 6px 0 0 0;
    padding: 18px 20px;
    border: 1px solid var(--reg-bordo-soft);
    border-radius: 10px;
    background: #f7f9f6;
}

.registrazione .reg-riepilogo__titolo {
    margin: 0 0 12px 0;
    font-family: 'montserratbold', Arial, sans-serif;
    font-size: 15px;
    color: var(--reg-testo);
}

.registrazione .reg-riepilogo dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 10px 28px;
    margin: 0;
}

.registrazione .reg-riepilogo dt {
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--reg-testo-soft);
}

.registrazione .reg-riepilogo dd {
    margin: 2px 0 0 0;
    font-family: 'montserratbold', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: var(--reg-testo);
    word-break: break-word;
}

/* campo lasciato vuoto: un trattino, non uno spazio bianco ambiguo */
.registrazione .reg-riepilogo dd.is-vuoto::after {
    content: "\2014";
    color: var(--reg-testo-soft);
}


/* --- barra di navigazione dei passi --------------------------------------- */

.registrazione .reg-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 26px 0 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--reg-bordo-soft);
}

.registrazione .reg-nav__spazio {
    flex: 1 1 auto;
}

/* Indietro e Avanti sono una coppia sola: stanno all'estrema sinistra e non si
   separano quando la barra va a capo. Nessun "order": in flex l'order di
   default e' 0, quindi il gruppo resta primo perche' e' primo nel markup. */
.registrazione .reg-nav__passi {
    display: flex;
    align-items: center;
    gap: 8px;
}

.registrazione .reg-btn {
    display: inline-block;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 12px 26px !important;
    border-radius: var(--reg-raggio);
    font-family: 'montserratbold', Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease;
}

.registrazione .reg-btn--primario {
    color: #fff !important;
    background: var(--reg-verde) !important;
    border: 1px solid var(--reg-verde) !important;
    box-shadow: 0 2px 6px rgba(76, 157, 42, .30);
}

.registrazione .reg-btn--primario:hover:not([disabled]) {
    background: var(--reg-verde-scuro) !important;
    border-color: var(--reg-verde-scuro) !important;
    box-shadow: 0 3px 10px rgba(76, 157, 42, .40);
}

.registrazione .reg-btn[disabled] {
    opacity: .55;
    cursor: progress;
    box-shadow: none;
}

.registrazione .reg-btn:focus-visible {
    outline: 2px solid var(--reg-verde-scuro);
    outline-offset: 2px;
}

/* --- Indietro / Avanti ----------------------------------------------------
 * Piu' piccoli e stretti degli altri due bottoni, ma pieni: acceso e' verde,
 * spento e' grigio, e il passaggio fra i due stati e' l'unica cosa che si
 * muove nella barra. Il verde non litiga con l'invio perche' i due non sono
 * mai accesi insieme: l'invio compare solo all'ultimo passo, dove Avanti e'
 * per definizione spento.
 * La freccia e' uno pseudo-elemento e non testo, cosi' attendiControlli() puo'
 * continuare a scrivere "Verifica in corso..." con .text() senza perderla.
 * ---------------------------------------------------------------------- */

.registrazione .reg-btn--passo {
    padding: 9px 16px !important;
    font-size: 12px !important;
    letter-spacing: .04em;
    color: #fff !important;
    background: var(--reg-verde) !important;
    border: 1px solid var(--reg-verde) !important;
    box-shadow: 0 1px 3px rgba(76, 157, 42, .25);
}

.registrazione .reg-btn--indietro::before,
.registrazione .reg-btn--avanti::after {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1;
    transition: transform .15s ease;
}

.registrazione .reg-btn--indietro::before {
    content: "\2190";           /* freccia sinistra */
    margin-right: 7px;
}

.registrazione .reg-btn--avanti::after {
    content: "\2192";           /* freccia destra */
    margin-left: 7px;
}

.registrazione .reg-btn--passo:hover:not([disabled]) {
    background: var(--reg-verde-scuro) !important;
    border-color: var(--reg-verde-scuro) !important;
    box-shadow: 0 2px 6px rgba(76, 157, 42, .35);
}

/* la freccia accompagna il passaggio del mouse nella sua direzione */
.registrazione .reg-btn--indietro:hover:not([disabled])::before {
    transform: translateX(-2px);
}

.registrazione .reg-btn--avanti:hover:not([disabled])::after {
    transform: translateX(2px);
}

/* Spento = non c'e' un passo in quella direzione: da verde diventa grigio
   pieno, quindi resta leggibile e continua a occupare il suo posto. Tre classi
   + attributo per battere .reg-btn[disabled], che vale per l'invio in corso e
   mette opacity .55 e cursor: progress. */
.registrazione .reg-btn.reg-btn--passo[disabled] {
    opacity: 1;
    /* 4,6:1 sul grigio: gli stati spenti sono esentati da WCAG 1.4.3, ma qui
       l'etichetta va comunque letta */
    color: #5c656a !important;
    background: #dfe4e6 !important;
    border-color: #d2d8da !important;
    box-shadow: none;
    cursor: default;
}

/* Anche l'invio parte spento: resta grigio finche' ci sono campi obbligatori
   vuoti. Stesso grigio dei passi, cosi' "spento" si legge allo stesso modo su
   tutta la barra. Tre classi + attributo per battere il verde !important di
   .reg-btn--primario. */
.registrazione .reg-btn.reg-btn--primario[disabled] {
    opacity: 1;
    color: #5c656a !important;
    background: #dfe4e6 !important;
    border-color: #d2d8da !important;
    box-shadow: none;
    cursor: default;
}

/* Il reset resta l'azione secondaria e distruttiva: in coda, smorzata, e con
   la conferma chiesta dal JS. */
.registrazione .reg-nav .reg-reset {
    padding: 12px 20px !important;
    font-size: 13px !important;
    color: var(--reg-errore) !important;
    background: #fff !important;
    border: 1px solid #f0c7bd !important;
    border-radius: var(--reg-raggio);
    box-shadow: var(--reg-ombra);
    cursor: pointer;
}

.registrazione .reg-nav .reg-reset:hover {
    color: #fff !important;
    background: var(--reg-errore) !important;
    border-color: var(--reg-errore) !important;
}

/* "* Campi obbligatori" su una riga sua, sotto ai bottoni */
.registrazione .reg-nav .required {
    flex: 1 0 100%;
    order: 9;
    margin: 4px 0 0 0;
    padding: 0;
    font-size: 11px;
    text-align: right;
}

/* Avviso mostrato quando la validazione del passo non passa: e' un
   aria-live, quindi viene anche annunciato. */
.registrazione .reg-nav__avviso {
    flex: 1 0 100%;
    order: 8;
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--reg-raggio);
    background: #fdf5f3;
    border-left: 3px solid var(--reg-errore);
    font-size: 13px;
    line-height: 1.45;
    color: #8a2a17;
}

.registrazione .reg-nav__avviso[hidden] {
    display: none;
}

/* Riga che conta i campi obbligatori ancora vuoti: sta sotto ai bottoni,
   allineata all'invio a cui si riferisce. */
.registrazione .reg-nav__nota {
    flex: 1 0 100%;
    order: 8;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--reg-testo-soft);
    text-align: right;
}

.registrazione .reg-nav__nota[hidden] {
    display: none;
}


/* --- schermi stretti: lo stepper diventa contatore + barra ---------------- */

@media screen and (max-width: 600px) {
    .registrazione .reg-stepper__list {
        display: none;
    }

    .registrazione .reg-stepper__conteggio,
    .registrazione .reg-stepper__barra {
        display: block;
    }

    /* !important come nella regola base: deve battere #contatti_form h2 */
    .registrazione .reg-panel__titolo {
        font-size: 18px !important;
    }

    .registrazione .reg-nav {
        gap: 10px;
    }

    .registrazione .reg-nav__spazio {
        display: none;
    }

    .registrazione .reg-btn,
    .registrazione .reg-nav .reg-reset {
        flex: 1 1 auto;
        text-align: center;
    }

    /* i due passi si prendono una riga tutta loro, mezza per uno */
    .registrazione .reg-nav__passi {
        flex: 1 0 100%;
        gap: 10px;
    }

    .registrazione .reg-nav__passi .reg-btn {
        flex: 1 1 0;
    }

    /* il reset va a capo: non deve finire accanto ad Avanti */
    .registrazione .reg-nav .reg-reset {
        order: 7;
        flex: 1 0 100%;
    }
}


/* --- griglia dei campi dentro un pannello --------------------------------
 * Nei pannelli i campi non sono piu' divisi nelle due colonne del vecchio
 * form monopagina: stanno in una griglia che ne affianca due finche' c'e'
 * spazio per due campi leggibili, e passa a colonna unica da sola. Prende il
 * posto di .contatti_left del tema, larga 285px fissi e float.
 * --------------------------------------------------------------------- */

.registrazione .reg-panel .reg-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 0 44px;
}

.registrazione .reg-panel .reg-griglia .field {
    min-width: 0;
}

/* campo con etichetta lunga o valore lungo: si prende tutta la riga */
.registrazione .reg-panel .reg-griglia .reg-field--wide {
    grid-column: 1 / -1;
}

/* Il riquadro promozionale PEC chiude il pannello, a tutta larghezza: nel
   form monopagina si appoggiava alla base della colonna. */
.registrazione .reg-panel .reg-promo-pec {
    grid-column: 1 / -1;
    margin: 8px 0 0 0 !important;
}


/* --- avviso informativo sotto un campo -----------------------------------
 * Non e' un errore e non deve sembrarlo: la registrazione prosegue. Lo usa la
 * P.IVA quando il soggetto risulta gia' in anagrafica, per dire quale codice
 * identificativo verra' assegnato. Colori e icona sono quelli
 * dell'informazione, non quelli di .validation-advice.
 * --------------------------------------------------------------------- */

.registrazione .field .reg-nota {
    position: relative;
    margin: 6px 0 0 0;
    padding: 8px 12px 8px 30px;
    border-radius: var(--reg-raggio);
    border-left: 3px solid var(--reg-verde);
    background: #f2f8ee;
    font-size: 12px !important;
    line-height: 1.45;
    color: #2f4a1f;
}

.registrazione .field .reg-nota::before {
    content: "i";
    position: absolute;
    left: 10px;
    top: 9px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--reg-verde);
    color: #fff;
    font-family: 'montserratbold', Arial, sans-serif;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
}

.registrazione .field .reg-nota[hidden] {
    display: none;
}