/* ==========================================================================
   ESTILOS PARA FORMULARIOS (REGISTRO, INICIO DE SESIÓN Y RECUPERACIÓN)
   ==========================================================================
   Descripción: Define la estructura visual de los formularios, implementando un diseño de tarjeta, sistema de columnas flexbox y estados de interacción.

   1. Reseteo de contenedores envolventes principales.
   2. Configuración de tarjeta flotante unificada (dimensiones, sombras, bordes).
   3. Sobrescritura de visualización y centrado para formulario de recuperación.
   4. Estilos tipográficos de encabezados y párrafos de instrucción.
   5. Configuración de columnas flexibles para fila de nombres.
   6. Estilos base y focus para controles de entrada.
   7. Gestión de espaciado estructural y tipografía de etiquetas.
*/

#rtcl-user-registration-wrapper,
#rtcl-user-login-wrapper {
    margin: 0 !important;
    padding: 25px !important;
}

#rtcl-user-registration-wrapper .rtcl-registration-form-wrap,
#rtcl-user-login-wrapper .rtcl-login-form-wrap {
    background-color: #ffffff;
    max-width: 600px;
    margin: 20px auto 60px auto;
    padding: 40px;
    border-radius: 25px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

form#rtcl-lost-password-form {
    background-color: #ffffff;
    max-width: 600px;
    margin: 40px auto 60px auto !important;
    padding: 40px;
    border-radius: 25px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    display: block !important;
    float: none !important;
}

#rtcl-user-registration-wrapper h2,
#rtcl-user-login-wrapper h2 {
    text-align: center !important;
    color: var(--mr-text-dark) !important;
    margin-bottom: 30px !important;
    font-size: 24px !important;
    font-weight: 600 !important;
}

#rtcl-lost-password-form p {
    color: var(--mr-text-dark);
    font-size: 15px;
    font-weight: 700 !important;
    text-align: center;
    margin-bottom: 25px;
    line-height: 1.5;
}

#rtcl-user-registration-wrapper .name-row {
    display: flex;
    gap: 15px;
}

#rtcl-user-registration-wrapper .first-name-column,
#rtcl-user-registration-wrapper .second-name-column {
    flex: 1;
}

#rtcl-user-registration-wrapper .rtcl-form-control,
#rtcl-user-login-wrapper .rtcl-form-control,
#rtcl-lost-password-form .rtcl-form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #ffffff;
    color: var(--mr-text-dark);
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

#rtcl-user-registration-wrapper .rtcl-form-control:focus,
#rtcl-user-login-wrapper .rtcl-form-control:focus,
#rtcl-lost-password-form .rtcl-form-control:focus {
    border-color: var(--mr-red);
    outline: none;
    box-shadow: 0 0 0 2px rgba(195, 0, 47, 0.1);
}

#rtcl-user-registration-wrapper .rtcl-form-group,
#rtcl-user-login-wrapper .rtcl-form-group,
#rtcl-lost-password-form .rtcl-form-group {
    margin-bottom: 25px !important;
}

#rtcl-user-registration-wrapper .rtcl-field-label,
#rtcl-user-login-wrapper .rtcl-field-label,
#rtcl-lost-password-form .rtcl-field-label {
    display: block;
    margin-bottom: 8px;
    color: var(--mr-text-ligh);
    font-size: 14px;
}

#rtcl-user-registration-wrapper .rtcl-required,
#rtcl-user-login-wrapper .rtcl-required,
#rtcl-lost-password-form .rtcl-required {
    color: var(--mr-red);
}

/* ==========================================================================
   MANEJO DE ERRORES, TEXTOS DE AYUDA Y OJO DE CONTRASEÑA
   ==========================================================================
   Descripción: Normaliza la presentación de mensajes de validación y elementos auxiliares de input.

   1. Ajuste de márgenes y tipografía para bloques de ayuda base.
   2. Prevención de colisión de márgenes en textos consecutivos.
   3. Asignación de variables de color semántico.
   4. Estilización de contenedores de input en estado de error.
   5. Posicionamiento absoluto de control de visibilidad de contraseña.
*/

#rtcl-user-registration-wrapper .help-block,
#rtcl-user-login-wrapper .help-block,
#rtcl-lost-password-form .help-block {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 6px;
    margin-bottom: 0 !important;
}

#rtcl-user-registration-wrapper .help-block + .help-block,
#rtcl-user-login-wrapper .help-block + .help-block,
#rtcl-lost-password-form .help-block + .help-block {
    margin-top: 4px !important;
}

#rtcl-user-registration-wrapper span.help-block,
#rtcl-user-login-wrapper span.help-block,
#rtcl-lost-password-form span.help-block {
    color: var(--mr-text-light);
}

#rtcl-user-registration-wrapper .with-errors.help-block,
#rtcl-user-login-wrapper .with-errors.help-block,
#rtcl-lost-password-form .with-errors.help-block {
    color: var(--mr-red);
    font-weight: 500;
}

#rtcl-user-registration-wrapper .has-error .rtcl-form-control,
#rtcl-user-login-wrapper .has-error .rtcl-form-control,
#rtcl-lost-password-form .has-error .rtcl-form-control {
    border-color: var(--mr-red) !important;
    background-color: #fffafb;
}

#rtcl-user-registration-wrapper .rtcl-user-pass-wrap,
#rtcl-user-login-wrapper .rtcl-user-pass-wrap {
    position: relative;
}

#rtcl-user-registration-wrapper .rtcl-toggle-pass,
#rtcl-user-login-wrapper .rtcl-toggle-pass {
    position: absolute;
    right: 15px;
    top: 23px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--mr-text-light);
    z-index: 10;
}

/* ==========================================================================
   INTERFAZ DE USUARIO: TÉRMINOS, BOTONES Y ACCIONES
   ==========================================================================
   Descripción: Establece la apariencia de elementos interactivos y llamadas a la acción principales.

   1. Estilos y alineación flexbox para controles de términos.
   2. Configuración unificada de botones de envío (dimensiones, colores, transiciones).
   3. Formato y alineación de enlaces de navegación inferior.
*/

#rtcl-user-registration-wrapper .rtcl-registration-terms-conditions .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

#rtcl-user-registration-wrapper .rtcl-registration-terms-conditions input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

#rtcl-user-registration-wrapper .rtcl-terms-and-conditions-link {
    color: var(--mr-red);
    text-decoration: none;
}

#rtcl-user-registration-wrapper .rtcl-btn-primary,
#rtcl-user-login-wrapper .rtcl-btn,
#rtcl-lost-password-form .rtcl-btn {
    background-color: var(--mr-red) !important;
    color: #ffffff;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

#rtcl-user-registration-wrapper .rtcl-btn-primary:hover,
#rtcl-user-login-wrapper .rtcl-btn:hover,
#rtcl-lost-password-form .rtcl-btn:hover {
    background-color: var(--mr-red-hover) !important;
}

#rtcl-user-registration-wrapper .login-link,
#rtcl-user-login-wrapper .rtcl-forgot-password {
    text-align: center;
    margin-top: 25px;
    color: var(--mr-text-light);
    font-size: 14px;
}

#rtcl-user-registration-wrapper .login-link a,
#rtcl-user-login-wrapper .rtcl-forgot-password a {
    color: var(--mr-red);
    font-weight: 600;
    text-decoration: none;
}

#rtcl-user-registration-wrapper .login-link a:hover,
#rtcl-user-login-wrapper .rtcl-forgot-password a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   ELEMENTOS EXCLUSIVOS: INICIO DE SESIÓN
   ==========================================================================
   Descripción: Reglas aplicables únicamente a la vista de autenticación.

   1. Centrado de lista de selección.
   2. Estilos flexbox para control de retención de sesión.
   3. Estilos de separador en enlaces secundarios.
   4. Posicionamiento de bloque de inicio de sesión social.
*/

#rtcl-user-login-wrapper .rtcl-checkbox-list {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

#rtcl-user-login-wrapper .rtcl-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--mr-text-light);
    font-size: 14px;
    font-weight: normal;
}

#rtcl-user-login-wrapper .rtcl-check input[type="checkbox"] {
    margin: 0;
}

#rtcl-user-login-wrapper .rtcl-forgot-password span {
    color: #e0e0e0;
    margin: 0 10px;
}

#rtcl-user-login-wrapper .rtcl-social-login-wrap {
    text-align: center;
    margin-top: 15px;
}

/* ==========================================================================
   AJUSTE ESPECÍFICO: BOTÓN DE RECUPERAR CONTRASEÑA
   ==========================================================================
   Descripción: Sobrescribe el comportamiento del botón global para el flujo de recuperación.

   1. Centrado del contenedor de envío.
   2. Anulación del ancho completo y aplicación de dimensiones mínimas.
*/

#rtcl-lost-password-form .rtcl-form-submit-wrap {
    text-align: center; 
    margin-top: 30px;
}

#rtcl-lost-password-form .rtcl-btn {
    width: auto !important;
    min-width: 280px;
    padding-left: 40px;
    padding-right: 40px;
}

/* ==========================================================================
   FONDO GENERAL
   ==========================================================================
   Descripción: Establece la visualización de fondo para las vistas de cuenta.

   1. Inyección de variable de color global en contenedores principales.
   2. Eliminación de herencia de color en envolturas de plugin.
*/

body, 
#page {
    background-color: var(--mr-gray-bg) !important;
}

main#content, 
.site-main,
.page-content,
.rtcl,
#rtcl-user-registration-wrapper,
#rtcl-user-login-wrapper {
    background-color: transparent !important;
}

/* ==========================================================================
   ESTRUCTURA PRINCIPAL DEL PANEL (LAYOUT)
   ==========================================================================
   Descripción: Define la estructura del contenedor principal del panel de usuario, ocultando elementos nativos e implementando un diseño de tarjeta flexible.
   
   1. Ocultamiento de título de página nativo.
   2. Configuración de contenedor flexbox principal.
   3. Asignación de ancho dinámico al contenido.
   4. Estilización de tarjeta principal (fondo, bordes, sombra y padding).
*/

.page-header h1.entry-title {
    display: none !important;
}

.rtcl-MyAccount-wrap {
    max-width: 1200px;
    margin: 40px auto;
    display: flex;
    gap: 30px;
    padding: 0 15px;
    align-items: flex-start;
}

.rtcl-MyAccount-content {
    width: 100% !important;
    flex: 1; 
}

.rtcl-MyAccount-content {
    width: 100% !important;
    flex: 1; 
    background-color: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    padding: 40px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   NAVEGACIÓN LATERAL (SIDEBAR)
   ==========================================================================
   Descripción: Configura el panel de navegación lateral como una tarjeta independiente unificada, normalizando enlaces y aplicando estados interactivos.

   1. Normalización del contenedor padre.
   2. Estilización del contenedor de lista como tarjeta base.
   3. Limpieza de bordes y fondos de los elementos de lista.
   4. Configuración flexbox y tipografía de los enlaces.
   5. Definición de transiciones y color base para íconos.
   6. Reglas de interacción para estado hover.
   7. Reglas de interacción para estado activo.
*/

.rtcl-MyAccount-navigation {
    width: 280px;
    flex-shrink: 0;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.rtcl-MyAccount-navigation ul {
    background-color: #ffffff !important;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 15px !important;
    list-style: none;
    margin: 0;
}

.rtcl-MyAccount-navigation-link {
    background: transparent !important;
    border: none !important;
    margin-bottom: 2px !important;
}

.rtcl-MyAccount-navigation-link a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: transparent !important;
    color: var(--mr-text-dark) !important;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.rtcl-MyAccount-navigation-link a svg,
.rtcl-MyAccount-navigation-link a i {
    color: var(--mr-text-light);
    transition: color 0.2s ease;
}

.rtcl-MyAccount-navigation-link a:hover {
    background-color: var(--mr-gray-bg) !important;
    color: var(--mr-green) !important;
    transform: translateX(4px);
}

.rtcl-MyAccount-navigation-link a:hover svg,
.rtcl-MyAccount-navigation-link a:hover i {
    color: var(--mr-green);
}

.rtcl-MyAccount-navigation-link.is-active a {
    background-color: rgba(18, 91, 41, 0.08) !important;
    color: var(--mr-green) !important;
}

.rtcl-MyAccount-navigation-link.is-active a svg,
.rtcl-MyAccount-navigation-link.is-active a i {
    color: var(--mr-green);
}

/* ==========================================================================
   BOTÓN DE LLAMADO A LA ACCIÓN (CALL TO ACTION)
   ==========================================================================
   Descripción: Sobrescribe la apariencia del enlace principal del menú para destacarlo como un botón, solucionando conflictos de alineación con pseudo-elementos.

   1. Espaciado y separación del contenedor respecto al resto del menú.
   2. Configuración estructural y estética del botón (píldora, colores).
   3. Imposición de color para íconos internos.
   4. Comportamiento de elevación y sombra en estado hover.
   5. Corrección de superposición flexbox (alineación ícono-texto).
   6. Reseteo de posicionamiento absoluto heredado en el ícono y prevención de contracción flex.
*/

.rtcl-MyAccount-navigation-link--add-listing {
    margin-top: 25px !important;
    border-top: 1px solid #f0f0f0 !important; 
    padding-top: 25px !important;
}

.rtcl-MyAccount-navigation-link--add-listing a {
    background-color: var(--mr-green) !important;
    color: #ffffff !important;
    justify-content: center;
    border-radius: 25px;
    padding-left: 25px !important;
}

.rtcl-MyAccount-navigation-link--add-listing a svg,
.rtcl-MyAccount-navigation-link--add-listing a i {
    color: #ffffff !important;
}

.rtcl-MyAccount-navigation-link--add-listing a:hover {
    background-color: var(--mr-green-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(18, 91, 41, 0.2);
}

.rtcl-MyAccount-navigation-link--add-listing a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    gap: 8px !important;
}

.rtcl-MyAccount-navigation-link--add-listing a::before,
.rtcl-MyAccount-navigation-link--add-listing a i,
.rtcl-MyAccount-navigation-link--add-listing a svg {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: translateY(0) !important; 
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important; 
    flex-shrink: 0 !important; 
}

/* ==========================================================================
   DISEÑO RESPONSIVO (DISPOSITIVOS MÓVILES)
   ==========================================================================
   Descripción: Adapta la visualización estructural y la navegación para pantallas menores a 768px, implementando el comportamiento off-canvas para el menú.

   1. Modificación de márgenes y radios de borde para formularios de autenticación.
   2. Reestructuración de la vista general abandonando flexbox.
   3. Ajuste estricto de ancho de navegación lateral para compatibilidad con JS nativo.
   4. Transformación de navegación lateral a formato flex-column vertical.
   5. Anclaje inferior del botón CTA.
   6. Prevención de saltos de línea y ajuste de fuente en CTA.
   7. Reducción de espaciado interno del lienzo de contenido.
*/

@media (max-width: 768px) {
    #rtcl-user-registration-wrapper .rtcl-registration-form-wrap,
    #rtcl-user-login-wrapper .rtcl-login-form-wrap {
        margin: 0 !important;
        padding: 40px;
        border-radius: 15px;
    }
    
    form#rtcl-lost-password-form {
        margin: 30px 15px 20px 15px !important; 
        width: auto !important;
        padding: 30px 20px;
        border-radius: 15px;
    }

    .rtcl-MyAccount-wrap {
        display: block !important;
        margin: 20px auto !important;
        padding: 0 15px !important;
    }

    .rtcl-MyAccount-navigation {
        width: 225px !important; 
    }

    .rtcl-MyAccount-navigation ul {
        border-radius: 0 !important; 
        height: 100dvh !important; 
        padding: 30px 10px 20px 10px !important;
        margin: 0 !important;
        box-shadow: none !important; 
        border-right: 1px solid #e0e0e0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .rtcl-MyAccount-navigation-link--add-listing {
        margin-top: 10px !important;
        border-top: none !important;
        padding-top: 10px !important;
        margin-bottom: 20px !important;
    }

    .rtcl-MyAccount-navigation-link--add-listing a {
        white-space: nowrap !important;
        font-size: 14px !important;
        padding: 12px 10px !important;
        justify-content: center !important;
    }

    .rtcl-MyAccount-content {
        padding: 20px !important;
        border-radius: 15px !important; 
    }
}