/**
 * Drunel Acceso — Formulario de acceso
 *
 * Posicionamiento y estructura del formulario de login, registro y
 * recuperación de contraseña. Se carga solo donde se pinta el shortcode.
 */

/* Formulario de Login/Registro */
.mw-login-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    box-sizing: border-box;
}

.mw-login-form *,
.mw-login-form *::before,
.mw-login-form *::after {
    box-sizing: border-box;
}

.mw-login-tabs {
    display: flex;
    width: 100%;
}

.mw-login-tab-btn {
    flex: 1;
    text-align: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 10px;
    font-size: inherit;
}

.mw-login-form__panel {
    display: none;
    width: 100%;
    flex-direction: column;
}

.mw-login-form__panel.is-active {
    display: flex;
}

.mw-login-msg {
    display: none;
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
}

/* Colores de los mensajes. Hasta la 1.3.7 solo existían en el CSS que cada
   sitio pegaba en los ajustes, así que un sitio sin CSS propio mostraba los
   errores sin ningún color. Son suaves y cualquier CSS del sitio los pisa. */
.mw-login-msg.mw-msg--success,
.mw-wc-msg.mw-msg--success {
    color: #065F46;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
}

.mw-login-msg.mw-msg--error,
.mw-wc-msg.mw-msg--error {
    color: #991B1B;
    background: #FEF2F2;
    border: 1px solid #FECACA;
}

.mw-login-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    width: 100%;
}

.mw-login-field__label {
    margin-bottom: 5px;
    font-weight: bold;
}

.mw-login-field__input {
    width: 100%;
    padding: 10px;
    font-size: inherit;
}

input[type="email"], 
.mw-login-field__input[type="email"],
#account_email {
    text-transform: lowercase !important;
}

.mw-login-form__toggle {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.mw-login-link--lost-password {
    display: block !important;
    text-align: right !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #64748B !important;
    text-decoration: none !important;
    margin-top: 4px !important;
    margin-bottom: 24px !important; /* Espacio limpio antes del botón */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}

.mw-login-link--lost-password:hover {
    color: #334155 !important;
    text-decoration: underline !important;
}

/* Transmutación de enlace flotante a Botón de Contorno Premium (Outline) */
.mw-login-link--otp {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #2563EB !important; /* Azul Real */
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB !important; /* Borde sutil */
    padding: 14px 32px !important;
    border-radius: 99px !important; /* Estilo Pill idéntico al principal */
    cursor: pointer !important;
    margin-top: 12px !important; /* Separación perfecta del botón azul */
    margin-bottom: 0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.mw-login-link--otp:hover {
    background-color: #F9FAFB !important;
    border-color: #CBD5E1 !important;
    color: #1D4ED8 !important;
}

.mw-login-btn--submit,
.mw-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    cursor: pointer;
    font-size: inherit;
    border: none;
    text-align: center;
}

.mw-login-btn--submit {
    display: block !important;
    margin-top: 16px !important;
}

.mw-login-form__divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 15px 0;
}

.mw-login-form__divider::before,
.mw-login-form__divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid currentColor;
    opacity: 0.2;
}

.mw-login-form__divider:not(:empty)::before {
    margin-right: .25em;
}

.mw-login-form__divider:not(:empty)::after {
    margin-left: .25em;
}

.mw-google-btn__icon {
    margin-right: 8px;
}

/* Divulgación Progresiva — Animación fluida para campos OTP */
.mw-field--progressive {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-bottom: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease,
                margin-bottom 0.4s ease;
}

.mw-field--progressive.mw-field--revealed {
    max-height: 120px; /* Suficiente para label + input + padding */
    opacity: 1;
    margin-bottom: 15px;
}

/* Password toggle button and wrapper */
.mw-password-wrapper {
    position: relative;
    width: 100%;
}

.mw-password-wrapper .mw-login-field__input {
    padding-right: 45px !important; /* Space for the toggle button */
}

.mw-password-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: #64748B !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.15s ease !important;
    width: 24px !important;
    height: 24px !important;
}

.mw-password-toggle:hover {
    color: #1E293B !important;
}