/* =========================================================
   ESPAGLOBAL
   MEMBER AUTH - FORGOT PASSWORD / REGISTER EXTENSIONS
   Requires: themes/EspaGlobal/css/member/login.css
========================================================= */

/* =========================================================
   SHARED VARIANTS
========================================================= */

.espa-auth__shell--compact {
    min-height: 620px;
}

.espa-auth__shell--register {
    grid-template-columns: minmax(0, .78fr) minmax(570px, 1fr);
    max-width: 1260px;
    min-height: 720px;
}

.espa-auth__shell--register .espa-auth__intro {
    padding-right: 46px;
    padding-left: 46px;
}

.espa-auth__shell--register .espa-auth__intro-copy {
    margin-top: 58px;
}

.espa-auth__shell--register .espa-auth__panel {
    padding: 42px 52px;
}

.espa-auth__panel-inner--register {
    max-width: 620px;
}

.espa-auth__alert--success {
    border-color: color-mix(in srgb, #16a34a 18%, transparent);
    background: color-mix(in srgb, #16a34a 6%, #fff);
    color: #15803d;
}

.espa-auth__alert--list strong {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
}

.espa-auth__alert--list ul {
    margin: 0;
    padding-left: 17px;
}

.espa-auth__alert--list li + li {
    margin-top: 2px;
}

/* =========================================================
   REGISTER FORM GRID
========================================================= */

.espa-auth__form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 16px;
}

.espa-auth__form-grid .espa-auth__field {
    min-width: 0;
}

.espa-auth--register .espa-auth__form {
    gap: 19px;
}

.espa-auth--register .espa-auth__back-link {
    margin-bottom: 30px;
}

.espa-auth--register .espa-auth__header {
    margin-bottom: 25px;
}

.espa-auth--register .espa-auth__input-wrap .form-control {
    height: 51px;
}

/* =========================================================
   TERMS
========================================================= */

.espa-auth__terms {
    position: relative;
    padding: 14px 15px;
    border: 1px solid var(--espa-border, #e5e7eb);
    border-radius: 12px;
    background: #f8fafc;
}

.espa-auth__remember--terms {
    align-items: flex-start;
    width: 100%;
    color: var(--espa-text, #334155);
    font-size: 11px;
    line-height: 1.6;
}

.espa-auth__remember--terms .espa-auth__checkbox {
    flex: 0 0 18px;
    margin-top: 1px;
}

.espa-auth__remember--terms a {
    color: var(--espa-primary, #ed1c24);
    font-weight: 700;
    text-decoration: none;
}

.espa-auth__remember--terms a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.espa-auth__remember--terms input:focus-visible ~ span:last-child {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--espa-primary, #ed1c24) 45%, transparent);
    text-underline-offset: 3px;
}

.espa-auth__terms .invalid-feedback {
    margin: 8px 0 0 26px;
    color: var(--espa-danger, #ef4444);
    font-size: 10px;
}

.espa-auth__terms:has(input:invalid):has(input:focus),
.was-validated .espa-auth__terms:has(input:invalid) {
    border-color: color-mix(in srgb, var(--espa-danger, #ef4444) 52%, #fff);
    background: color-mix(in srgb, var(--espa-danger, #ef4444) 4%, #fff);
}

/* =========================================================
   FORGOT PASSWORD
========================================================= */

.espa-auth--forgot .espa-auth__panel-inner {
    max-width: 440px;
}

.espa-auth--forgot .espa-auth__form {
    gap: 20px;
}

.espa-auth--forgot .espa-auth__submit {
    margin-top: 2px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199.98px) {
    .espa-auth__shell--register {
        grid-template-columns: minmax(0, .7fr) minmax(540px, 1fr);
    }

    .espa-auth__shell--register .espa-auth__intro {
        padding: 42px 36px;
    }

    .espa-auth__shell--register .espa-auth__panel {
        padding: 38px 40px;
    }
}

@media (max-width: 991.98px) {
    .espa-auth__shell--compact,
    .espa-auth__shell--register {
        max-width: 700px;
        min-height: 0;
    }

    .espa-auth__shell--register .espa-auth__panel {
        padding: 38px 46px 42px;
    }
}

@media (max-width: 767.98px) {
    .espa-auth__form-grid {
        grid-template-columns: 1fr;
    }

    .espa-auth--register .espa-auth__input-wrap .form-control {
        height: 54px;
    }
}

@media (max-width: 575.98px) {
    .espa-auth__shell--compact,
    .espa-auth__shell--register {
        max-width: none;
    }

    .espa-auth__shell--register .espa-auth__panel {
        padding: 26px 20px 36px;
    }

    .espa-auth--register .espa-auth__back-link {
        margin-bottom: 22px;
    }

    .espa-auth--register .espa-auth__header {
        margin-bottom: 24px;
    }

    .espa-auth__form-grid {
        gap: 16px;
    }

    .espa-auth__terms {
        padding: 13px 14px;
    }

    .espa-auth__remember--terms {
        font-size: 11px;
    }
}
.espa-auth iconify-icon {
    display: block;
    flex: 0 0 auto;
    line-height: 1;
    vertical-align: middle;
}

.espa-auth__benefit-icon,
.espa-auth__brand-mark,
.espa-auth__visual-card-icon,
.espa-auth__header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.espa-auth__benefit-icon iconify-icon,
.espa-auth__brand-mark iconify-icon,
.espa-auth__visual-card-icon iconify-icon,
.espa-auth__header-icon iconify-icon {
    width: 1em;
    height: 1em;
    margin: 0;
    transform: none;
}