/* ============================================================
   Formulario de Login / Registro / Contraseña olvidada — WooCommerce / PuroOmega
   hello-elementor-child/assets/css/woo-login.css
   Página: /mi-cuenta/ cuando el usuario no está autenticado

   Las 3 vistas (login, registro, contraseña olvidada) viven en el DOM y
   comparten la misma tarjeta visual; woo-login.js decide cuál se muestra
   con la clase .beps-auth-hidden (ver funciones woocommerce_register_form_*
   y woocommerce_after_customer_login_form en functions.php).
   ============================================================ */

/* ── 1. FONDO DE PÁGINA ─────────────────────────────────── */
/* El fondo #F4F4F4 viene de una sección de Elementor (correcto
   para la vista de Mi Cuenta logueado). Este archivo solo se
   carga cuando NO está logueado, así que lo sobreescribimos. */
.elementor-20 .elementor-element.elementor-element-208085b0:not(.elementor-motion-effects-element-type-background),
.elementor-20 .elementor-element.elementor-element-208085b0 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #ffffff !important;
}

/* Contenedor de la página "Mi cuenta" — fondo blanco y sin el título "Mi cuenta"
   SOLO cuando no está logueado (logueado sí debe verse, no tocar ahí). */
body.woocommerce-account:not(.logged-in) .elementor-element-62d1791 {
    background-color: #ffffff !important;
}

body.woocommerce-account:not(.logged-in) .elementor-element-85967fc {
    display: none !important;
}

.beps-auth-hidden {
    display: none !important;
}

/* ── 2. LAYOUT — colapsar dos columnas a una centrada ───── */
#customer_login.col2-set {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 789px !important;
    margin: 24px auto !important;
    padding: 0 16px !important;
    width: 100% !important;
}

#customer_login .u-column1.col-1,
#customer_login .u-column2.col-2 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Registro oculto por defecto (incluso sin JS) — se revela con .beps-auth-active */
#customer_login .u-column2.col-2 {
    display: none !important;
}

#customer_login .u-column2.col-2.beps-auth-active {
    display: block !important;
}

/* Ocultar los h2 originales que WooCommerce renderiza FUERA de cada form
   (usamos el título inyectado por PHP dentro del form, ver bloque 4) */
#customer_login .u-column1.col-1 > h2,
#customer_login .u-column2.col-2 > h2 {
    display: none !important;
}

/* Caja del "he olvidado mi contraseña" — sibling de #customer_login,
   misma posición/ancho para que ocupe el mismo sitio al alternar vistas. */
#beps-lost-password-box {
    max-width: 789px !important;
    margin: 24px auto !important;
    padding: 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── 3. CARD DEL FORMULARIO (login, registro y contraseña olvidada) ── */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword.lost_reset_password {
    background: #F8F8FA !important;
    border: 1px solid #E8E8E8 !important;
    border-radius: 18px !important;
    min-height: 560px !important;
    width: 100% !important;
    /* Sin padding-bottom: el footer maneja su propio espaciado */
    padding: 36px 96px 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;

    /* Flex column para reordenar elementos y pegar footer al fondo */
    display: flex !important;
    flex-direction: column !important;
}

/* El form de "contraseña olvidada" es mucho más corto (1 campo) y no tiene footer
   propio pinneado al fondo (su link "Vuelve al inicio de sesión" vive fuera de la
   tarjeta, en #beps-lost-password-box) — con la misma min-height que login/registro
   quedaba con un hueco vacío enorme debajo del botón. Se le da una altura menor y
   se centra el contenido en vertical, con padding-bottom propio para el botón. */
.woocommerce-ResetPassword.lost_reset_password {
    min-height: 320px !important;
    justify-content: center !important;
    padding-bottom: 40px !important;
}

/* ── 4. TÍTULO (inyectado via PHP dentro de cada form) ──── */
.beps-login-title {
    order: 0 !important;
    text-align: center !important;
    font-size: 40px !important;
    font-weight: 600 !important;
    color: #141436 !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* Mensaje introductorio del form de contraseña olvidada */
.woocommerce-ResetPassword.lost_reset_password > p:first-of-type {
    order: 0 !important;
    text-align: center !important;
    font-size: 15px !important;
    color: #141436 !important;
    max-width: 335px !important;
    width: 100% !important;
    margin: 0 auto 20px !important;
}

/* ── 5. CAMPOS (username/password/email) ─────────────────── */
.woocommerce-form-login > .woocommerce-form-row--wide,
.woocommerce-form-register > .woocommerce-form-row--wide,
.woocommerce-ResetPassword.lost_reset_password > .woocommerce-form-row--wide,
.woocommerce-ResetPassword.lost_reset_password > .woocommerce-form-row--first,
.woocommerce-form-register .form-row:has(.woocommerce-input-wrapper) {
    order: 1 !important;
    /* .form-row-first/.form-row-last son del sistema legacy 2-columnas de WooCommerce
       (width:47%; float:left/right) — se anulan explícitamente porque tienen prioridad
       sobre el centrado por margin:auto. align-self fuerza el centrado en flex sin
       depender de los márgenes automáticos. */
    float: none !important;
    align-self: center !important;
    max-width: 335px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 16px !important;
}

.woocommerce-form-login label,
.woocommerce-form-register label,
.woocommerce-ResetPassword.lost_reset_password label {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #141436 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Link a "política de privacidad" dentro del aviso de datos del registro —
   heredaba un color blanco de algún estilo general de enlaces; se iguala al
   color del texto y se subraya. */
.woocommerce-form-register .woocommerce-privacy-policy-link {
    color: #141436 !important;
    text-decoration: underline !important;
}

.woocommerce-form-login .woocommerce-Input--text,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-register .woocommerce-Input--text,
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="password"],
.woocommerce-ResetPassword.lost_reset_password .woocommerce-Input--text,
.woocommerce-ResetPassword.lost_reset_password input[type="text"] {
    width: 100% !important;
    height: 48px !important;
    padding: 12px 16px !important;
    border: 1.5px solid #E5E5E5 !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    color: #141436 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
    outline: none !important;
}

.woocommerce-form-login .woocommerce-Input--text:focus,
.woocommerce-form-login input[type="text"]:focus,
.woocommerce-form-login input[type="password"]:focus,
.woocommerce-form-register .woocommerce-Input--text:focus,
.woocommerce-form-register input[type="text"]:focus,
.woocommerce-form-register input[type="email"]:focus,
.woocommerce-form-register input[type="password"]:focus,
.woocommerce-ResetPassword.lost_reset_password .woocommerce-Input--text:focus,
.woocommerce-ResetPassword.lost_reset_password input[type="text"]:focus {
    border-color: #141436 !important;
}

/* ── 6. LINK "¿Has olvidado tu contraseña?" (dentro del form de login) ── */
/* Orden: segundo (entre campos y botón) */
.woocommerce-form-login > .lost_password {
    order: 2 !important;
    text-align: center !important;
    margin: 4px auto 20px !important;
    padding: 0 !important;
    max-width: 335px !important;
    width: 100% !important;
}

.woocommerce-form-login .lost_password a {
    font-size: 16px !important;
    color: #130F32 !important;
    text-decoration: underline !important;
    transition: opacity 0.15s ease !important;
}

.woocommerce-form-login .lost_password a:hover {
    opacity: 0.7 !important;
}

/* ── 7. ROW DEL SUBMIT ───────────────────────────────────── */
/* Orden: tercero. margin-bottom da aire antes del footer/borde de abajo
   (Registrarse / Restablecer contraseña se veían pegados a lo siguiente). */
.woocommerce-form-login > .form-row:not(.woocommerce-form-row--wide),
.woocommerce-form-register > .woocommerce-form-row:not(.woocommerce-form-row--wide),
.woocommerce-ResetPassword.lost_reset_password > .form-row:not(.woocommerce-form-row--wide) {
    order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

/* Ocultar checkbox "Recuérdame" */
.woocommerce-form-login .woocommerce-form__label-for-checkbox {
    display: none !important;
}

/* Botón Acceder / Registrarse / Restablecer contraseña */
.woocommerce-form-login__submit,
button.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
button.woocommerce-form-register__submit,
.woocommerce-ResetPassword.lost_reset_password button[type="submit"] {
    max-width: 220px !important;
    width: 100% !important;
    height: 50px !important;
    background-color: #F9D777 !important;
    color: #130F32 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    border: none !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    box-shadow: none !important;
    letter-spacing: 0.3px !important;
}

.woocommerce-form-login__submit:hover,
button.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
button.woocommerce-form-register__submit:hover,
.woocommerce-ResetPassword.lost_reset_password button[type="submit"]:hover {
    background-color: #f0c83e !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.woocommerce-form-login__submit:active,
button.woocommerce-form-login__submit:active,
.woocommerce-form-register__submit:active,
button.woocommerce-form-register__submit:active,
.woocommerce-ResetPassword.lost_reset_password button[type="submit"]:active {
    transform: translateY(0) !important;
}

/* ── 8. FOOTER (link para alternar entre vistas) ─────────── */
/* Orden: último. margin-top: auto lo pega al fondo del card.
   Los márgenes negativos hacen que el border-top cruce el padding
   del card de lado a lado (efecto de footer completo). */
.woocommerce-form-login > .beps-login-register-link,
.woocommerce-form-register > .beps-login-register-link,
#beps-lost-password-box > .beps-login-register-link {
    order: 4 !important;
    margin-top: auto !important;
    text-align: center !important;
    line-height: 1.5 !important;
}

.woocommerce-form-login > .beps-login-register-link,
.woocommerce-form-register > .beps-login-register-link {
    margin-left: -96px !important;
    margin-right: -96px !important;
    padding: 28px 0px 15px 32px !important;
    border-top: 1px solid #E8E8E8 !important;
}

/* El footer de "olvidé mi contraseña" vive fuera de la tarjeta (ver #beps-lost-password-box) */
#beps-lost-password-box > .beps-login-register-link {
    margin: 20px 0 0 !important;
    padding: 0 !important;
}

/* "¿Todavía no tienes tu cuenta?" */
.beps-login-register-link .beps-login-register-text {
    color: #130F32 !important;
    font-weight: 600 !important;
    font-size: 20px !important;
}

/* "Regístrate" / "Vuelve al inicio de sesión" */
.beps-login-register-link .beps-login-register-cta {
    color: #130F32 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-decoration: underline !important;
    transition: opacity 0.15s ease !important;
    margin-left: 4px !important;
}

.beps-login-register-link .beps-login-register-cta:hover {
    opacity: 0.7 !important;
}

/* ── 9. RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 840px) {
    #customer_login.col2-set,
    #beps-lost-password-box {
        margin: 16px auto !important;
    }

    .woocommerce-form-login,
    .woocommerce-form-register,
    .woocommerce-ResetPassword.lost_reset_password {
        padding: 32px 40px 0 !important;
        min-height: unset !important;
        border-radius: 14px !important;
    }

    .woocommerce-form-login > .beps-login-register-link,
    .woocommerce-form-register > .beps-login-register-link {
        margin-left: -40px !important;
        margin-right: -40px !important;
        padding: 24px 40px 28px !important;
    }

    .beps-login-register-link .beps-login-register-text {
        font-size: 17px !important;
    }

    .beps-login-register-link .beps-login-register-cta {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .woocommerce-form-login,
    .woocommerce-form-register,
    .woocommerce-ResetPassword.lost_reset_password {
        padding: 24px 24px 0 !important;
    }

    .woocommerce-form-login > .beps-login-register-link,
    .woocommerce-form-register > .beps-login-register-link {
        margin-left: -24px !important;
        margin-right: -24px !important;
        padding: 20px 24px 24px !important;
    }
}