/* ===========================================================================
 * Accesso all'Area Riservata (customer/account/login)
 *
 * Caricato solo sull'handle customer_account_login, dopo styles_0030 /
 * digithera_0037 / responsive: a parita' di specificita' vince questo file.
 *
 * PORTATO DA CV STUDIO (login_0001.css). Impianto identico - scheda unica a
 * due pannelli, campi alti 48px, bottoni a pillola - con due differenze:
 *
 *   1. la palette. L'originale e' navy #1a2c6b + teal #2dbdba, i colori di
 *      CV Studio. Qui sono quelli Digithera dello skin (styles_0030.css):
 *      --primary-blue #024787 e --primary-green #4C9D2A.
 *   2. niente accesso con Google: la sezione .cvs-gbtn dell'originale non e'
 *      stata portata, e nel template non c'e' il blocco che la produce.
 *
 * Tutte le regole sono agganciate a .dgt-signin, il contenitore della pagina:
 * fuori da qui non hanno effetto. Le variabili sono ridichiarate qui con
 * valori espliciti invece che ereditate dal :root dello skin, cosi' la pagina
 * regge anche se quel blocco cambia.
 *
 * I pochi !important non sono un vezzo: il tema dichiara !important sul focus
 * di input[type=text] / input[type=password] e sulla dimensione degli svg, e
 * senza rilanciare non si riesce a ridisegnare il campo attivo ne' le icone.
 * ======================================================================== */


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

.dgt-signin {
    /* blu Digithera: --primary-blue dello skin, con una discesa piu' scura
       per il gradiente del pannello e --primary-hover per gli stati */
    --sg-navy:        #024787;
    --sg-navy-scuro:  #012f5c;
    --sg-navy-hover:  #092C74;

    /* verde Digithera: --primary-green dello skin, con una schiaritura che
       regge la lettura sul fondo blu del pannello di sinistra */
    --sg-teal:        #4C9D2A;
    --sg-teal-chiaro: #7CC24F;

    --sg-testo:       #373737;   /* --text-color dello skin */
    --sg-testo-soft:  #6b7378;
    --sg-bordo:       #e3e8ef;
    --sg-bordo-forte: #cdd7e3;
    --sg-sfondo:      #f7f9fb;
    --sg-errore:      #d64228;

    --sg-campo-h:     48px;
    --sg-raggio:      18px;
    --sg-raggio-sm:   10px;
    --sg-transizione: .25s cubic-bezier(.4, 0, .2, 1);

    /* l'ombra "di sito": lume interno in alto + appoggio morbido sotto.
       E' la stessa grammatica della pagina di registrazione, qui virata
       sul navy per stare con la scheda. */
    --sg-ombra-campo:  inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(2, 71, 135, .08);
    --sg-ombra-hover:  inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 5px rgba(2, 71, 135, .12);
    --sg-ombra-focus:  0 0 0 3px rgba(76, 157, 42, .20);
    --sg-ombra-scheda: 0 24px 60px rgba(2, 71, 135, .16), 0 2px 8px rgba(2, 71, 135, .06);
    --sg-ombra-cta:    0 6px 18px rgba(76, 157, 42, .35);
    --sg-ombra-cta-h:  0 10px 26px rgba(76, 157, 42, .45);
}

.dgt-signin,
.dgt-signin *,
.dgt-signin *::before,
.dgt-signin *::after {
    box-sizing: border-box;
}

/* il tema mette una transizione di 1s sul colore dei link: qui i link devono
   rispondere subito come il resto della scheda */
.dgt-signin a {
    transition: color var(--sg-transizione), background-color var(--sg-transizione);
}

/* il tema forza svg{width:100%} in piu' punti del layout responsive */
.dgt-signin svg {
    max-width: none !important;
}


/* --- la scheda: pannello di benvenuto + form ----------------------------- */

.dgt-signin {
    padding: 28px 0 56px;
}

.dgt-signin__card {
    display: flex;
    align-items: stretch;
    max-width: 980px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--sg-raggio);
    box-shadow: var(--sg-ombra-scheda);
    overflow: hidden;
}


/* --- pannello di sinistra (navy) ----------------------------------------- */

.dgt-signin__aside {
    position: relative;
    flex: 0 0 42%;
    padding: 44px 38px;
    background: linear-gradient(155deg, var(--sg-navy) 0%, var(--sg-navy-scuro) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
}

/* due aloni teal appena accennati: danno profondita' al fondo pieno senza
   bisogno di immagini */
.dgt-signin__aside::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
        radial-gradient(520px 320px at 8% -12%, rgba(76, 157, 42, .30), transparent 62%),
        radial-gradient(420px 300px at 112% 108%, rgba(76, 157, 42, .18), transparent 58%);
    pointer-events: none;
}

.dgt-signin__aside > * {
    position: relative;
}

.dgt-signin__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 5px 12px;
    margin-bottom: 22px;
    border: 1px solid rgba(76, 157, 42, .40);
    border-radius: 100px;
    background: rgba(76, 157, 42, .10);
    color: var(--sg-teal-chiaro);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
}

.dgt-signin__eyebrow svg {
    width: 13px !important;
    height: 13px !important;
    fill: currentColor;
    flex: 0 0 13px;
}

.dgt-signin__aside h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.4px;
}

.dgt-signin__aside-sub {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, .62);
    font-size: 14px;
    line-height: 1.6;
}

.dgt-signin__list {
    list-style: none;
    margin: 0 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dgt-signin__list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 13.5px;
    line-height: 1.5;
    list-style: none;
}

.dgt-signin__list svg {
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    margin-top: 1px;
    fill: var(--sg-teal);
}

/* riquadro "non hai un account": e' la vecchia colonna new-users, ridotta a
   invito invece che a mezza pagina */
.dgt-signin__join {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.dgt-signin__join-title {
    margin: 0 0 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.dgt-signin__join-text {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .58);
    font-size: 13px;
    line-height: 1.55;
}

.dgt-signin__pec {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 18px;
    color: var(--sg-teal-chiaro);
    font-size: 12.5px;
    line-height: 1.45;
}

.dgt-signin__pec svg {
    flex: 0 0 15px;
    width: 15px !important;
    height: 15px !important;
    margin-top: 1px;
    fill: currentColor;
}

.dgt-signin .dgt-signin__join-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid rgba(76, 157, 42, .55);
    border-radius: 100px;
    background: transparent;
    color: var(--sg-teal-chiaro) !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
}

.dgt-signin .dgt-signin__join-btn:hover {
    background: rgba(76, 157, 42, .12);
    border-color: var(--sg-teal);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
}

.dgt-signin .dgt-signin__join-btn svg {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor;
    flex: 0 0 14px;
}


/* --- pannello di destra (form) ------------------------------------------- */

.dgt-signin__main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 44px 44px 38px;
    display: flex;
    flex-direction: column;
}

.dgt-signin__title {
    margin: 0 0 6px;
    color: var(--sg-navy);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.3px;
}

.dgt-signin__lead {
    margin: 0 0 26px;
    color: var(--sg-testo-soft);
    font-size: 14px;
    line-height: 1.55;
}


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

.dgt-signin__field {
    margin: 0 0 18px;
}

.dgt-signin__field label {
    display: block;
    margin: 0 0 7px;
    color: var(--sg-navy);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2px;
}

.dgt-signin__field label em {
    color: var(--sg-teal);
    font-style: normal;
    margin-left: 2px;
}

.dgt-signin__control {
    position: relative;
}

.dgt-signin .dgt-signin__input {
    width: 100%;
    height: var(--sg-campo-h);
    padding: 0 14px;
    border: 1px solid var(--sg-bordo-forte) !important;
    border-radius: var(--sg-raggio-sm);
    background: #fff !important;
    box-shadow: var(--sg-ombra-campo) !important;
    color: var(--sg-testo);
    font-family: inherit;
    font-size: 15px;
    line-height: normal;
    transition: border-color var(--sg-transizione), box-shadow var(--sg-transizione);
}

.dgt-signin .dgt-signin__input:hover {
    border-color: #b3bfcc !important;
    box-shadow: var(--sg-ombra-hover) !important;
}

/* il tema dichiara !important su border-color, border-bottom, outline e
   box-shadow del focus dei campi di testo: qui va rilanciato tutto */
.dgt-signin .dgt-signin__input:focus {
    border: 1px solid var(--sg-teal) !important;
    border-bottom-width: 1px !important;
    outline: 0 !important;
    box-shadow: var(--sg-ombra-focus) !important;
}

.dgt-signin__input::-webkit-input-placeholder { color: #a6aeb8; }
.dgt-signin__input::placeholder             { color: #a6aeb8; }

/* l'autofill di Chrome dipinge il campo di giallo e si mangia il bordo */
.dgt-signin .dgt-signin__input:-webkit-autofill,
.dgt-signin .dgt-signin__input:-webkit-autofill:hover,
.dgt-signin .dgt-signin__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: var(--sg-testo) !important;
}

/* spazio per il pulsante "mostra password" */
.dgt-signin__control--password .dgt-signin__input {
    padding-right: 46px;
}

.dgt-signin__reveal {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: var(--sg-campo-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sg-testo-soft);
    cursor: pointer;
    transition: color var(--sg-transizione);
}

.dgt-signin__reveal:hover { color: var(--sg-navy-hover); }

.dgt-signin__reveal svg {
    width: 19px !important;
    height: 19px !important;
    fill: currentColor;
    pointer-events: none;
}

.dgt-signin__reveal .dgt-signin__eye--off { display: none; }
.dgt-signin__reveal.is-on .dgt-signin__eye--on  { display: none; }
.dgt-signin__reveal.is-on .dgt-signin__eye--off { display: block; }


/* --- riga "ricordami" + password dimenticata ----------------------------- */

.dgt-signin__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 4px 0 22px;
}

.dgt-signin__remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--sg-testo);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* display esplicito: altrove nel tema la casella nativa viene nascosta e
   sostituita da una <label> vuota adiacente. Qui la label avvolge la casella,
   quindi serve che la casella vera resti visibile. */
.dgt-signin__remember input {
    display: inline-block !important;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--sg-teal);
    cursor: pointer;
}

/* il tema forza .label_Class a width:85% e display:block */
.dgt-signin__remember .label_Class {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 13px !important;
    color: inherit !important;
}

/* Dentro .col-main il tema colora di verde tutti i link, li sottolinea e li
   passa in grassetto sull'hover: i link della scheda vanno quindi dichiarati
   con due classi, altrimenti perdono il confronto con .col-main a. */
.dgt-signin .dgt-signin__forgot {
    color: var(--sg-teal) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.dgt-signin .dgt-signin__forgot:hover {
    color: var(--sg-navy-hover) !important;
    font-weight: 700;
    text-decoration: underline;
}


/* --- azioni --------------------------------------------------------------- */

.dgt-signin__submit {
    display: block;
    width: 100%;
    min-height: var(--sg-campo-h);
    padding: 13px 20px;
    border: 0;
    border-radius: 100px;
    background: var(--sg-teal);
    box-shadow: var(--sg-ombra-cta);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    transition: background-color var(--sg-transizione), box-shadow var(--sg-transizione), transform var(--sg-transizione);
}

.dgt-signin__submit:hover {
    background: var(--sg-teal-chiaro);
    box-shadow: var(--sg-ombra-cta-h);
    transform: translateY(-1px);
}

.dgt-signin__submit:active {
    transform: translateY(0);
    box-shadow: var(--sg-ombra-cta);
}

.dgt-signin__required {
    margin: 18px 0 0;
    color: var(--sg-testo-soft);
    font-size: 11.5px;
    text-align: center;
}

.dgt-signin__required em {
    color: var(--sg-errore);
    font-style: normal;
}


/* --- messaggi di Magento e avvisi di validazione -------------------------- */

/* i .messages del tema sono larghi 97% e con la gif di sfondo: dentro la
   scheda devono comportarsi da riquadro pieno */
.dgt-signin .messages {
    margin: 0 0 20px;
}

.dgt-signin .messages li {
    margin: 0 0 10px !important;
}

.dgt-signin .messages .error-msg,
.dgt-signin .messages .success-msg,
.dgt-signin .messages .notice-msg {
    width: 100% !important;
    min-height: 0;
    padding: 12px 14px 12px 40px;
    border-radius: var(--sg-raggio-sm);
    font-size: 13px !important;
    line-height: 1.45;
    background-position: 14px 14px;
}

.dgt-signin .validation-advice {
    width: auto;
    margin: 7px 0 0;
    padding-left: 17px;
    font-size: 11.5px;
    color: var(--sg-errore);
}

.dgt-signin .dgt-signin__input.validation-failed {
    border-color: var(--sg-errore) !important;
    box-shadow: 0 0 0 3px rgba(214, 66, 40, .14) !important;
}


/* --- schermata "sei gia' collegato" -------------------------------------- */

.dgt-signin--redirect .dgt-signin__card {
    max-width: 520px;
    flex-direction: column;
    align-items: center;
    padding: 44px 36px;
    text-align: center;
}

.dgt-signin__spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 18px;
    border: 3px solid var(--sg-bordo);
    border-top-color: var(--sg-teal);
    border-radius: 50%;
    -webkit-animation: dgtSigninSpin .9s linear infinite;
    animation: dgtSigninSpin .9s linear infinite;
}

@-webkit-keyframes dgtSigninSpin { to { -webkit-transform: rotate(360deg); } }
@keyframes dgtSigninSpin { to { transform: rotate(360deg); } }


/* --- responsive ----------------------------------------------------------- */

/* Sotto i 900px le due colonne si impilano, ma con column-reverse: su
   telefono si arriva quasi sempre per accedere, quindi il form sta in cima e
   il pannello di benvenuto (con l'invito a registrarsi) scorre sotto. */
@media (max-width: 900px) {
    .dgt-signin {
        padding: 18px 0 40px;
    }

    .dgt-signin__card {
        flex-direction: column-reverse;
        max-width: 520px;
        border-radius: 14px;
    }

    .dgt-signin__aside,
    .dgt-signin__main {
        flex: 1 1 auto;
        padding: 32px 26px;
    }

    .dgt-signin__aside h2 {
        font-size: 22px;
    }

    .dgt-signin__aside-sub {
        margin-bottom: 22px;
    }

    .dgt-signin__join {
        margin-top: 24px;
    }
}

@media (max-width: 480px) {
    .dgt-signin__card {
        border-radius: 12px;
    }

    .dgt-signin__aside,
    .dgt-signin__main {
        padding: 26px 18px;
    }

    .dgt-signin__title {
        font-size: 22px;
    }

    .dgt-signin__row {
        gap: 10px;
    }
}