/* ==========================================================================
   CT-63 — Login / Register / Forgot modal — FLAT brand reskin (scoped)
   ==========================================================================
   PROBLEM (user-visible):
   El modal de auth del tema (#loginmodal: login + registro + forgot) renderiza
   con el look default de WP Rentals, fuera del sistema flat (coral #fa4e24,
   cream, Outfit/Poppins, inputs cuadrados, pill, cero sombra).

   POR QUÉ SOLO CSS, SCOPED, IN-PLACE (decisión Chuy S45, auditoría S45):
   El auth del tema está bound DIRECTO (no delegado) en ajaxcalls.js/control.js,
   y las globales leen los valores desde los inputs del PROPIO #loginmodal + el
   reCAPTCHA vive dentro de él. Markup propio rompería el submit en silencio. Un
   reskin scoped es aditivo: no toca auth/nonces/reCAPTCHA. Cero `.modal*`
   genérico → no repetimos el leak que mató a CT-20 (S19).

   ROOT CAUSE DEL LAYOUT (auditado contra wprentals/style.css, S45 v2):
   El modal del padre NO es un flujo normal — es un lienzo de 2 columnas
   (formulario 60% + imagen 40%) construido con posicionamiento absoluto y
   dimensiones FIJAS:
     #loginmodal .modal-dialog { width:750px; min-height:550px; overflow:hidden }
                                + inline style="height:643px"
     #loginmodal .modal-content { position:absolute; width:100%; height:100% }
     #loginmodal .modal-body    { width:100%; height:100% }
     #ajax_login_div/#ajax_register_div { position:absolute/float; width:60%;
                                height:100%; display:flex; justify-content:center }
     .modal_login_image_wrapper { position:absolute; width:40%; right:0 }
   Al ocultar la imagen (abajo) sin resetear ese andamiaje, el contenido queda
   descuadrado, flotando en cajas de altura fija, y el contenido largo (registro)
   se CORTA por `overflow:hidden` + height fija. Este bloque NEUTRALIZA todo ese
   andamiaje y devuelve el modal a un flujo normal de una sola columna.

   ESPECIFICIDAD: el padre usa selectores ID+elemento (`#loginmodal h2.modal-title_big`,
   `#loginmodal button.close`). Para ganarles, aquí igualamos/superamos esa
   especificidad (incluimos el elemento), no solo `.clase`.

   SCOPE: exclusivamente #loginmodal y sus IDs internos. Inputs ya son flat
   globalmente (body input[type=...]); el resto (surface, layout, títulos,
   botones, nav) se estiliza aquí.

   Enqueue: inc/enqueue.php (pml-login-modal, site-wide), filemtime() cache-bust.
   NO toca el header Version del child (kill-switch S17/S43: Version = 1.0.x).
   Preserva CT-25 (centrado de TODOS los modales) y S31 (fullscreen móvil).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAYOUT RESET — neutralizar el andamiaje absoluto/fijo del padre.
   Aplica en TODOS los anchos (el andamiaje está roto en todos). En móvil S31
   (max-width:768px, !important, mayor especificidad) sigue ganando para el
   tamaño del dialog/content; estos resets de `position` son compatibles con él.
   -------------------------------------------------------------------------- */

/* Ocultar imagen lateral demo → una sola columna (mata el landmine absolute) */
#loginmodal .modal_login_image_wrapper,
#loginmodal .modal_login_image {
    display: none !important;
}

/* Content: de absolute a flujo normal, card flat (blanco + borde, sin sombra).
   position:relative → ancla del botón close + contexto de apilamiento. */
#loginmodal .modal-content {
    position: relative;
    width: 100%;
    height: auto;
    background-color: var(--pml-bg-card);
    border: 1px solid var(--pml-border);
    border-radius: var(--pml-radius-xl); /* 40px */
    box-shadow: none;
    overflow: visible;
}

/* Body: flujo normal, sin height fija */
#loginmodal .modal-body {
    position: static;
    width: 100%;
    height: auto;
}

/* Paneles login/registro/forgot: matar absolute/float/60%/height:100%/padding
   del padre. Conservamos el `display` que el JS del padre togglea (show/hide)
   — con height auto el flex-column simplemente apila natural y estira inputs. */
#loginmodal #ajax_login_div,
#loginmodal #ajax_register_div,
#loginmodal #forgot-pass-div_mod {
    position: static;
    float: none;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
}

/* Wrapper interno del registro */
#loginmodal #ajax_register_div .login_form {
    width: 100%;
    padding: 0;
}

/* --------------------------------------------------------------------------
   2. Header / títulos — Outfit, jerarquía flat, centrado.
   Selectores con elemento para ganar a `#loginmodal h2.modal-title_big`.
   -------------------------------------------------------------------------- */
#loginmodal .modal-header {
    background: none;
    border-bottom: none;
    padding: 0 0 18px;
    text-align: center;
    min-height: 0;
}

#loginmodal h2.modal-title_big {
    font-family: var(--pml-font-heading);
    font-size: var(--pml-fs-h2) !important; /* gana al 24px !important del padre */
    font-weight: var(--pml-fw-semibold);
    line-height: var(--pml-lh-heading-h2);
    color: var(--pml-text-heading);
    width: 100%;
    margin: 0;
}

#loginmodal h4.modal-title,
#loginmodal .modal-title {
    font-family: var(--pml-font-accent);
    font-size: var(--pml-fs-body-sm) !important;
    font-weight: var(--pml-fw-regular);
    color: var(--pml-text-secondary);
    margin: 6px 0 0;
}

/* Botón cerrar — X flat (mata el círculo gris #484848 del padre).
   Selector con elemento para ganar a `#loginmodal button.close`. */
#loginmodal button.close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    z-index: 10;
    font-family: var(--pml-font-accent);
    font-size: 24px;
    font-weight: var(--pml-fw-regular);
    color: var(--pml-text-secondary);
    opacity: 1;
    text-shadow: none;
    background-color: transparent;
    border: none;
    border-radius: var(--pml-radius-circle);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

#loginmodal button.close:hover,
#loginmodal button.close:focus {
    color: var(--pml-action);
    background-color: var(--pml-bg-hover);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   3. Inputs dentro del modal — reforzar flat (contrato global cuadrado).
   -------------------------------------------------------------------------- */
#loginmodal .form-control {
    width: 100%;
    height: auto;
    font-family: var(--pml-font-body);
    font-size: var(--pml-fs-body-sm);
    font-weight: var(--pml-fw-regular);
    line-height: var(--pml-lh-body);
    color: var(--pml-text-body);
    background-color: var(--pml-bg-card);
    border: 1px solid var(--pml-border);
    border-radius: var(--pml-radius-md); /* 0 — cuadrado */
    padding: 10px 14px;
    box-shadow: none;
    transition: border-color 0.15s ease;
}

#loginmodal .form-control:focus {
    outline: 2px solid var(--pml-coral);
    outline-offset: 1px;
    border-color: var(--pml-action);
    box-shadow: none;
}

#loginmodal .loginrow {
    margin-bottom: 14px;
}

/* Password con ojo (el padre ya posiciona .show_hide_password; ajustar color) */
#loginmodal .password_holder {
    position: relative;
}

#loginmodal .show_hide_password {
    color: var(--pml-text-tertiary);
}

/* --------------------------------------------------------------------------
   4. Botones submit — pill coral. Selectores con elemento + !important para
   ganar a `.modal-content #wp-login-but` (vc_button con degradado) del padre.
   -------------------------------------------------------------------------- */
#loginmodal button#wp-login-but,
#loginmodal button#wp-submit-register,
#loginmodal button#wp-forgot-but_mod {
    display: inline-block;
    width: 100%;
    margin-top: 6px;
    font-family: var(--pml-font-accent);
    font-size: var(--pml-fs-button);
    font-weight: var(--pml-fw-semibold);
    letter-spacing: var(--pml-ls-wide);
    line-height: var(--pml-lh-tight-body);
    text-align: center;
    text-transform: none;
    color: var(--pml-action-text) !important;
    background: var(--pml-action) !important;
    border: 1px solid transparent !important;
    border-radius: var(--pml-radius-pill) !important; /* 100px pill */
    padding: 13px 24px;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.18s ease;
}

#loginmodal button#wp-login-but:hover,
#loginmodal button#wp-submit-register:hover,
#loginmodal button#wp-forgot-but_mod:hover {
    background: var(--pml-action-hover) !important;
}

/* --------------------------------------------------------------------------
   5. Navigation links
   -------------------------------------------------------------------------- */
#loginmodal .navigation_links {
    margin-top: 18px;
    text-align: center;
    font-family: var(--pml-font-accent);
    font-size: var(--pml-fs-body-sm);
    color: var(--pml-text-secondary);
}

#loginmodal .navigation_links a {
    color: var(--pml-text-link); /* coral-dark AA */
    font-weight: var(--pml-fw-medium);
    text-decoration: none;
    transition: color 0.15s ease;
}

#loginmodal .navigation_links a:hover {
    color: var(--pml-action);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. Registro — radios de tipo de cuenta + terms + reCAPTCHA + helper
   -------------------------------------------------------------------------- */
#loginmodal .acc_radio {
    margin: 4px 0 16px;
    font-family: var(--pml-font-accent);
    font-size: var(--pml-fs-body-sm);
    color: var(--pml-text-body);
    text-align: left;
}

#loginmodal .acc_radio .radiolabel {
    display: inline-block;
    margin: 0 0 8px 8px;
    vertical-align: middle;
}

#loginmodal #user_terms_register_sh_label,
#loginmodal label[for="user_terms_register_sh"] {
    font-family: var(--pml-font-accent);
    font-size: var(--pml-fs-label);
    color: var(--pml-text-body);
    margin-left: 8px;
    vertical-align: middle;
}

#loginmodal #user_terms_register_topbar_link {
    color: var(--pml-text-link);
}

/* reCAPTCHA — solo separación; NO tocar su render */
#loginmodal #capthca_register {
    margin: 14px 0;
}

#loginmodal #reg_passmail {
    font-family: var(--pml-font-accent);
    font-size: var(--pml-fs-helper);
    color: var(--pml-text-tertiary);
    margin-top: 12px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   7. Áreas de alerta (login/register/forgot) — tipografía + espaciado
   -------------------------------------------------------------------------- */
#loginmodal .loginalert {
    font-family: var(--pml-font-accent);
    font-size: var(--pml-fs-body-sm);
    line-height: var(--pml-lh-body);
    margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   8. Sizing del dialog — solo desktop (min-width:769px). En móvil manda S31
   (fullscreen, !important). Aquí: ancho angosto de una columna + matar el
   height:643px inline + min-height:550px + overflow:hidden del padre.
   CT-25 ya centra (.modal .modal-dialog left/margin auto !important).
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    #loginmodal .modal-dialog {
        width: 440px !important;
        max-width: calc(100vw - 40px) !important;
        min-height: 0 !important;
        height: auto !important;     /* mata el inline style="height:643px" */
        overflow: visible !important; /* el padre tiene overflow:hidden → cortaba */
    }

    #loginmodal .modal-body {
        padding: 36px 40px !important;
    }
}