/* ===========================================================================
 * Registrazione nuovo cliente (customer/account/create)
 *
 * Caricato solo sull'handle customer_account_create, dopo styles_0031 /
 * cvs_0001 / 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: le due colonne 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;
}

/* Le colonne non sono piu' float ma celle di griglia: restano affiancate
   finche' ci stanno due colonne da 260px, poi passano da sole a colonna
   unica. Cosi' il punto di rottura lo decide lo spazio davvero disponibile
   (che sopra i 980px e' quello lasciato libero dall'icona) e non un
   breakpoint fisso. Essendo celle di griglia, i float del tema - compresi
   quelli con !important di responsive.css - non hanno piu' effetto. */
.registrazione--form .reg-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 0 44px;
    margin-top: 10px;
}

.registrazione--form .reg-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: auto !important;
    margin: 0 !important;
}

/* .contatti_left nel tema e' largo 285px fissi e float: dentro la griglia
   deve invece riempire la propria colonna. */
.registrazione--form .reg-column .contatti_left {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* il contenitore delle azioni si richiude da solo, al posto dei vecchi
   <div style="clear:both"> */
.registrazione--form .reg-actions::after {
    content: "";
    display: table;
    clear: both;
}


/* --- 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 cvs_0001.css.
 *
 * Stesso vestito del tooltip del title (.ui-tooltip, cvs_0001.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;
}


/* --- pulsanti di chiusura ------------------------------------------------- */

/* .reg-actions porta ancora la classe .right_registration_col del tema:
   il margin va riscritto per intero, per togliere il margin-right:-20px */
.registrazione .reg-actions {
    float: none !important;
    width: auto !important;
    margin: 30px 0 0 0 !important;
    padding-top: 22px;
    border-top: 1px solid var(--reg-bordo-soft);
}

.registrazione .reg-actions .RegBlock,
.registrazione .reg-actions .contatti_send {
    float: none !important;
    width: auto !important;
}

.registrazione .reg-actions .buttons-set {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: auto !important;
    margin: 0 !important;
    text-align: left;
}

.registrazione .reg-actions .reg-reset,
.registrazione .reg-actions .reg-submit {
    float: none !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    line-height: normal;
}

.registrazione .reg-actions .reg-reset {
    order: 1;
    padding: 12px 22px !important;
    font-size: 14px !important;
    color: var(--reg-errore) !important;
    background: #fff;
    border: 1px solid #f0c7bd;
    border-radius: var(--reg-raggio);
    box-shadow: var(--reg-ombra);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

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

.registrazione .reg-actions .reg-submit {
    order: 2;
    padding: 0 !important;
    background: none;
    border: 0;
}

.registrazione .reg-actions .reg-submit .aClick {
    padding: 12px 34px !important;
    background: var(--reg-verde) !important;
    border-radius: var(--reg-raggio);
    box-shadow: 0 2px 6px rgba(76, 157, 42, .30);
    margin: 0 !important;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.registrazione .reg-actions .reg-submit:hover .aClick {
    color: #fff !important;
    background: var(--reg-verde-scuro) !important;
    box-shadow: 0 3px 10px rgba(76, 157, 42, .40);
}

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


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

    .registrazione .reg-actions .buttons-set {
        justify-content: flex-start;
    }

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

    .registrazione .reg-actions .reg-submit .aClick {
        display: block !important;
        padding: 12px 10px !important;
    }
}