/* ===========================================================================
 * Accesso all'Area Riservata (customer/account/login)
 *
 * Caricato solo sull'handle customer_account_login, dopo styles_0031 /
 * cvs_0001 / responsive: a parita' di specificita' vince questo file.
 *
 * Tutte le regole sono agganciate a .cvs-signin, il contenitore della pagina:
 * fuori da qui non hanno effetto. La palette e' la stessa della top bar, del
 * mega menu e del footer (navy + teal), quindi la pagina si legge come la
 * continuazione dell'header invece che come un modulo a se'. Le variabili
 * sono ridichiarate qui con valori espliciti e non ereditate dal :root di
 * page/html/header.phtml, 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 --------------------------------------- */

.cvs-signin {
    --sg-navy:        #1a2c6b;
    --sg-navy-scuro:  #0f1a45;
    --sg-teal:        #2dbdba;
    --sg-teal-chiaro: #3dd4d1;
    --sg-testo:       #26304a;
    --sg-testo-soft:  #6b7a9e;
    --sg-bordo:       #e2e7f2;
    --sg-bordo-forte: #ccd5e8;
    --sg-sfondo:      #f7f9fd;
    --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(26, 44, 107, .08);
    --sg-ombra-hover:  inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 5px rgba(26, 44, 107, .12);
    --sg-ombra-focus:  0 0 0 3px rgba(45, 189, 186, .20);
    --sg-ombra-scheda: 0 24px 60px rgba(26, 44, 107, .16), 0 2px 8px rgba(26, 44, 107, .06);
    --sg-ombra-cta:    0 6px 18px rgba(45, 189, 186, .35);
    --sg-ombra-cta-h:  0 10px 26px rgba(45, 189, 186, .45);
}

.cvs-signin,
.cvs-signin *,
.cvs-signin *::before,
.cvs-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 */
.cvs-signin a {
    transition: color var(--sg-transizione), background-color var(--sg-transizione);
}

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


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

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

.cvs-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) ----------------------------------------- */

.cvs-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 */
.cvs-signin__aside::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
        radial-gradient(520px 320px at 8% -12%, rgba(45, 189, 186, .30), transparent 62%),
        radial-gradient(420px 300px at 112% 108%, rgba(45, 189, 186, .18), transparent 58%);
    pointer-events: none;
}

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

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

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

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

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

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

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

.cvs-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 */
.cvs-signin__join {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

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

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

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

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

.cvs-signin .cvs-signin__join-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid rgba(45, 189, 186, .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;
}

.cvs-signin .cvs-signin__join-btn:hover {
    background: rgba(45, 189, 186, .12);
    border-color: var(--sg-teal);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
}

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


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

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

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

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


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

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

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

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

.cvs-signin__control {
    position: relative;
}

.cvs-signin .cvs-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);
}

.cvs-signin .cvs-signin__input:hover {
    border-color: #b9c4dd !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 */
.cvs-signin .cvs-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;
}

.cvs-signin__input::-webkit-input-placeholder { color: #a9b3c9; }
.cvs-signin__input::placeholder             { color: #a9b3c9; }

/* l'autofill di Chrome dipinge il campo di giallo e si mangia il bordo */
.cvs-signin .cvs-signin__input:-webkit-autofill,
.cvs-signin .cvs-signin__input:-webkit-autofill:hover,
.cvs-signin .cvs-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" */
.cvs-signin__control--password .cvs-signin__input {
    padding-right: 46px;
}

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

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

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

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


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

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

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

.cvs-signin__remember input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--sg-teal);
    cursor: pointer;
}

/* 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. */
.cvs-signin .cvs-signin__forgot {
    /* con Ricordami disattivato il link resta figlio unico della riga:
       margin-left:auto lo tiene comunque a destra */
    margin-left: auto;
    color: var(--sg-teal) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

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


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

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

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

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

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

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


/* --- bottone Google ------------------------------------------------------- */

/* Il markup e il grosso del CSS arrivano da customer/googlelogin/button.phtml,
   lo stesso blocco del popup in home page: qui si allineano solo altezza,
   raggio e ombra a quelli del bottone "Accedi", per non avere due forme
   diverse una sopra l'altra. */
.cvs-signin .cvs-gbtn__sep {
    margin: 22px 0 16px;
    color: var(--sg-testo-soft);
    font-family: inherit;
    font-size: 11.5px;
}

.cvs-signin .cvs-gbtn__sep::before,
.cvs-signin .cvs-gbtn__sep::after {
    background: var(--sg-bordo);
}

.cvs-signin .cvs-gbtn {
    min-height: var(--sg-campo-h);
    border-radius: 100px;
    border-color: var(--sg-bordo-forte);
    box-shadow: var(--sg-ombra-campo);
    font-size: 14.5px;
}

.cvs-signin .cvs-gbtn:hover {
    border-color: #b9c4dd;
    box-shadow: var(--sg-ombra-hover);
    font-weight: 600;
}

.cvs-signin .cvs-gbtn:focus-visible {
    outline-color: var(--sg-teal);
}


/* --- 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 */
.cvs-signin .messages {
    margin: 0 0 20px;
}

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

.cvs-signin .messages .error-msg,
.cvs-signin .messages .success-msg,
.cvs-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;
}

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

.cvs-signin .cvs-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" -------------------------------------- */

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

.cvs-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: cvsSigninSpin .9s linear infinite;
    animation: cvsSigninSpin .9s linear infinite;
}

@-webkit-keyframes cvsSigninSpin { to { -webkit-transform: rotate(360deg); } }
@keyframes cvsSigninSpin { 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) {
    .cvs-signin {
        padding: 18px 0 40px;
    }

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

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

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

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

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

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

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

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

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