/* ================================================================
   Evergreen Family Center — Login / Password Reset Page
   ================================================================ */

/* ---------- page layout — centrado vertical ---------- */
body.login {
    background:  #F0FAF5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display:     flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height:  100dvh;
    padding:     32px 16px;
    box-sizing:  border-box;
}

/* Gradientes decorativos de fondo */
body.login::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(59, 183, 126, .09) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(42, 157, 100, .07) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* WP envuelve todo en #login — hacerlo relativo y visible encima del ::before */
#login {
    background:    #ffffff;
    border-radius: 16px;
    box-shadow:    0 4px 32px rgba(0, 0, 0, .09), 0 1px 4px rgba(0, 0, 0, .04);
    padding:       40px 40px 32px;
    width:         340px;
    max-width:     100%;
    position:      relative;
    z-index:       1;
    /* WP fuerza margin: auto — lo sobreescribimos */
    margin:        0 !important;
}

/* ---------- logo ---------- */
.login h1 {
    margin: 0 0 4px;
}

.login h1 a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none'%3E%3Ccircle cx='40' cy='40' r='36' fill='%233BB77E'/%3E%3Cpath d='M26 52 C30 36, 44 28, 56 40' stroke='white' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M40 52 L40 32' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size:     contain;
    background-repeat:   no-repeat;
    background-position: center;
    display:     block;
    width:       250px;
    height:      72px;
    margin:      0 auto 8px;
}

/* ---------- subtítulo contextual ---------- */
.efc-login-subtitle {
    text-align:  center;
    color:       #6B7280;
    font-size:   .875rem;
    margin:      0 0 20px;
    line-height: 1.5;
}

/* ---------- labels ---------- */
.login label {
    font-size:   .8125rem;
    font-weight: 600;
    color:       #374151;
}

/* ---------- inputs ---------- */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    border:        1.5px solid #D1D5DB;
    border-radius: 8px;
    box-shadow:    none;
    font-size:     .9rem;
    padding:       9px 12px;
    width:         100%;
    transition:    border-color .15s, box-shadow .15s;
    color:         #111827;
    background:    #FAFAFA;
    box-sizing:    border-box;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-color: #3BB77E;
    box-shadow:   0 0 0 3px rgba(59, 183, 126, .18);
    background:   #fff;
    outline:      none;
}

/* ---------- "Remember me" ---------- */
.login .forgetmenot label {
    font-weight: 400;
    color:       #6B7280;
    font-size:   .8125rem;
}

.login .forgetmenot {
    margin-bottom: 16px;
}

/* ---------- botón submit PRINCIPAL (solo dentro de #loginform, etc.) ---------- */
#loginform input[type="submit"],
#lostpasswordform input[type="submit"],
#resetpassform input[type="submit"] {
    background:    #3BB77E !important;
    border-color:  #2A9D64 !important;
    border-radius: 8px     !important;
    box-shadow:    none    !important;
    color:         #fff    !important;
    font-size:     .9375rem !important;
    font-weight:   600     !important;
    height:        auto    !important;
    line-height:   1       !important;
    padding:       11px 18px !important;
    text-shadow:   none    !important;
    transition:    background .15s, transform .1s !important;
    width:         100%    !important;
}

#loginform input[type="submit"]:hover,
#lostpasswordform input[type="submit"]:hover,
#resetpassform input[type="submit"]:hover {
    background: #2A9D64 !important;
    transform:  translateY(-1px);
}

#loginform input[type="submit"]:active,
#lostpasswordform input[type="submit"]:active,
#resetpassform input[type="submit"]:active {
    transform: translateY(0);
}

/* ---------- selector de idioma ---------- */
#language-switcher {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    margin-top:      20px;
    position:        relative;
    z-index:         1;
}

#language-switcher select {
    font-size:     .8rem;
    border:        1.5px solid #D1D5DB;
    border-radius: 6px;
    padding:       5px 8px;
    background:    #fff;
    color:         #374151;
    cursor:        pointer;
}

#language-switcher input[type="submit"] {
    background:    #fff          !important;
    border:        1.5px solid #D1D5DB !important;
    border-radius: 6px           !important;
    box-shadow:    none          !important;
    color:         #374151       !important;
    font-size:     .8rem         !important;
    font-weight:   500           !important;
    height:        auto          !important;
    line-height:   1             !important;
    padding:       5px 12px      !important;
    text-shadow:   none          !important;
    width:         auto          !important;
    cursor:        pointer        !important;
    transition:    border-color .15s !important;
}

#language-switcher input[type="submit"]:hover {
    border-color: #3BB77E !important;
    color:        #3BB77E !important;
    transform:    none    !important;
}

/* ---------- links ---------- */
.login #nav a,
.login #backtoblog a {
    color:           #3BB77E;
    font-size:       .8rem;
    text-decoration: none;
}

.login #nav a:hover,
.login #backtoblog a:hover {
    color:           #2A9D64;
    text-decoration: underline;
}

.login #nav,
.login #backtoblog {
    text-align: center;
    padding:    8px 0 0;
}

/* ---------- alertas de error / éxito ---------- */
.login .message,
.login .success {
    border-left:   3px solid #3BB77E;
    border-radius: 6px;
    background:    #F0FDF4;
    color:         #14532D;
    padding:       10px 14px;
    font-size:     .84rem;
    margin-bottom: 18px;
}

#login_error,
.efc-login-error {
    border-left:   3px solid #EF4444;
    border-radius: 6px;
    background:    #FEF2F2;
    color:         #7F1D1D;
    padding:       10px 14px;
    font-size:     .84rem;
    margin-bottom: 18px;
    box-shadow:    none;
}

#login_error a,
.efc-login-error a {
    color: #B91C1C;
}

/* ---------- medidor de fortaleza de contraseña ---------- */
#pass-strength-result {
    border-radius: 6px;
    font-size:     .8rem;
    font-weight:   600;
    margin-top:    6px;
    padding:       6px 10px;
}

/* ---------- footer copyright ---------- */
.efc-login-footer {
    text-align: center;
    color:      #9CA3AF;
    font-size:  .78rem;
    margin-top: 16px;
    position:   relative;
    z-index:    1;
}

/* ---------- ocultar "← Ir a [sitio]" de WP ---------- */
.login #backtoblog {
    display: none;
}

/* ---------- responsive ---------- */
@media (max-width: 480px) {
    body.login {
        padding:         0;
        justify-content: flex-start;
        /* El body ocupa toda la altura y distribuye card + footer */
        min-height:      100dvh;
    }

    /* Wrapper que WP genera alrededor de #login */
    body.login > #login,
    body.login > #language-switcher,
    body.login > .efc-login-footer {
        position: relative;
        z-index:  1;
    }

    #login {
        border-radius: 0;
        box-shadow:    none;
        /* Ocupa todo el ancho con márgenes laterales */
        width:         calc(100% - 40px);
        margin:        40px 20px 0 !important;
        padding:       32px 24px 28px;
        /* La card crece para empujar el footer hacia abajo */
        flex:          1 0 auto;
    }

    /* El footer se pega al fondo */
    .efc-login-footer {
        margin-top:    auto;
        padding:       16px 0 20px;
        width:         100%;
    }

    /* El language switcher se mantiene justo debajo de la card */
    #language-switcher {
        margin-top: 16px;
    }
}