/* ==========================================================================
   Acceso compartido: Mi Cuenta + Checkout
   Este archivo solo se encola cuando existe un formulario de acceso visible.
   ========================================================================== */

.rsp-auth-ui,
.rsp-auth-ui * {
    box-sizing: border-box;
}

.rsp-auth-ui {
    color: var(--rsp-text);
}

/* Elementos compartidos de los formularios nativos de WooCommerce. */
.rsp-auth-ui :is(.woocommerce-form-login, .woocommerce-form-register) {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.rsp-auth-ui .rs-social-login-box {
    width: 100%;
    margin: 0 0 18px;
    text-align: center;
}

.rsp-auth-ui .rs-social-login-box .nsl-container,
.rsp-auth-ui .rs-social-login-box .nsl-container-buttons {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.rsp-auth-ui .rs-social-login-box .nsl-button {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

.rsp-auth-ui .rs-social-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 20px 0 5px;
    color: var(--rsp-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1;
}

.rsp-auth-ui .rs-social-divider::before,
.rsp-auth-ui .rs-social-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rsp-border);
}

.rsp-auth-ui .rs-social-divider span { white-space: nowrap; }

.rsp-auth-ui :is(.woocommerce-form-login, .woocommerce-form-register) .form-row {
    float: none !important;
    width: 100% !important;
    margin: 0 0 15px !important;
    padding: 0 !important;
}

.rsp-auth-ui :is(.woocommerce-form-login, .woocommerce-form-register) label {
    display: block;
    margin: 0 0 7px !important;
    color: var(--rsp-text) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
}

.rsp-auth-ui :is(.woocommerce-form-login, .woocommerce-form-register) .required {
    color: var(--rsp-accent) !important;
}

.rsp-auth-ui :is(.woocommerce-form-login, .woocommerce-form-register) :is(input.input-text, input[type='text'], input[type='email'], input[type='password']) {
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 10px 13px !important;
    background-color: color-mix(in srgb, var(--rsp-panel-bg) 72%, #000 28%) !important;
    border: 1px solid var(--rsp-border) !important;
    border-radius: 9px !important;
    outline: 0 !important;
    color: var(--rsp-text) !important;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.rsp-auth-ui :is(.woocommerce-form-login, .woocommerce-form-register) :is(#username, #reg_full_name, #reg_email, #password, #reg_password) {
    padding-left: 40px !important;
    background-repeat: no-repeat !important;
    background-position: 13px center !important;
    background-size: 16px 16px !important;
}

.rsp-auth-ui :is(.woocommerce-form-login, .woocommerce-form-register) :is(#username, #reg_full_name) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322c55e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

.rsp-auth-ui .woocommerce-form-register #reg_email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322c55e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' ry='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") !important;
}

.rsp-auth-ui :is(.woocommerce-form-login, .woocommerce-form-register) :is(#password, #reg_password) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322c55e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
}

.rsp-auth-ui :is(.woocommerce-form-login, .woocommerce-form-register) :is(input.input-text, input[type='text'], input[type='email'], input[type='password']):focus {
    border-color: color-mix(in srgb, var(--rsp-accent) 72%, var(--rsp-border)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rsp-accent) 12%, transparent) !important;
}

.rsp-auth-ui :is(.woocommerce-form-login, .woocommerce-form-register) .show-password-input {
    color: var(--rsp-muted) !important;
}

.rsp-auth-ui .woocommerce-form-login__rememberme {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin: 1px 0 12px !important;
    color: var(--rsp-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.rsp-auth-ui input[type='checkbox'] { accent-color: var(--rsp-accent); }

.rsp-auth-ui .lost_password {
    margin: 9px 0 0 !important;
    font-size: 12px !important;
}

.rsp-auth-ui :is(.lost_password a, .woocommerce-form-login a, .woocommerce-form-register a) {
    color: var(--rsp-accent) !important;
    text-decoration: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .rsp-auth-ui :is(.lost_password a, .woocommerce-form-login a, .woocommerce-form-register a):hover {
        text-decoration: underline !important;
    }
}

.rsp-auth-ui :is(.woocommerce-form-login, .woocommerce-form-register) :is(button.button, .woocommerce-button, input.button) {
    width: 100% !important;
    min-height: 44px !important;
    margin: 2px 0 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--rsp-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 44px !important;
    text-decoration: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .rsp-auth-ui :is(.woocommerce-form-login, .woocommerce-form-register) :is(button.button, .woocommerce-button, input.button):hover {
        filter: brightness(1.06);
    }
}

/* ==========================================================================
   Mi Cuenta: Acceder + Registrarse
   ========================================================================== */

.rs-auth-area {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.rs-auth-area .rs-account-tabs {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--rsp-border);
}

.rs-auth-area .rs-account-tab {
    position: relative;
    min-height: 44px;
    padding: 10px 8px !important;
    color: var(--rsp-muted) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    cursor: pointer;
}

.rs-auth-area .rs-account-tab.is-active { color: var(--rsp-text) !important; }

.rs-auth-area .rs-account-tab.is-active::after {
    content: '';
    position: absolute;
    right: 12px;
    bottom: -1px;
    left: 12px;
    height: 2px;
    border-radius: 999px;
    background: var(--rsp-accent);
}


.rs-auth-area #customer_login {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center;
    gap: 24px;
    width: 100% !important;
    margin: 0 !important;
}

.rs-auth-area #customer_login :is(.u-column1, .u-column2) {
    float: none !important;
    clear: none !important;
    display: block !important;
    flex: 1 1 0;
    align-self: stretch !important;
    min-width: 0;
    width: 50% !important;
    max-width: 548px !important;
    margin: 0 !important;
    padding: 24px !important;
    overflow: hidden;
    background: var(--rsp-card-bg) !important;
    border: 1px solid var(--rsp-border) !important;
    border-radius: max(14px, var(--rsp-radius)) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
}

.rs-auth-area #customer_login h2 {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 22px !important;
    padding: 0 0 10px 30px !important;
    color: var(--rsp-text) !important;
    border: 0 !important;
    font-size: 22px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    background-repeat: no-repeat;
    background-position: left 2px;
    background-size: 18px 18px;
}

.rs-auth-area #customer_login h2::after {
    content: '';
    display: block;
    width: calc(100% - 30px);
    height: 2px;
    margin-top: 10px;
    margin-left: 30px;
    border-radius: 999px;
    background: var(--rsp-accent);
}

.rs-auth-area #customer_login .u-column1 h2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322c55e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2h-6'/%3E%3C/svg%3E");
}

.rs-auth-area #customer_login .u-column2 h2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322c55e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9.5' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M16 11h6'/%3E%3C/svg%3E");
}

.rs-auth-area .woocommerce-privacy-policy-text,
.rs-auth-area .woocommerce-privacy-policy-text p,
.rs-auth-area .woocommerce-form-register p:not(.form-row) {
    color: var(--rsp-muted) !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

.rs-auth-area .rs-account-tab,
.rs-auth-area .rs-account-tab:hover,
.rs-auth-area .rs-account-tab:focus,
.rs-auth-area .rs-account-tab:focus-visible,
.rs-auth-area .rs-account-tab:active {
    outline: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Checkout: mismo lenguaje visual, estructura nativa intacta
   ========================================================================== */

.rsp-checkout-auth {
    width: 100%;
    margin: 0 0 26px;
}

.rsp-checkout-auth .woocommerce-form-login-toggle {
    margin: 0 0 14px;
}

.rsp-checkout-auth .woocommerce-form-login-toggle .woocommerce-info {
    margin: 0 !important;
    padding: 14px 16px !important;
    color: var(--rsp-text) !important;
    background: var(--rsp-card-bg) !important;
    border: 1px solid var(--rsp-border) !important;
    border-left: 3px solid var(--rsp-accent) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.rsp-checkout-auth .woocommerce-form-login-toggle .woocommerce-info::before { display: none !important; }

.rsp-checkout-auth .woocommerce-form-login-toggle a {
    color: var(--rsp-accent) !important;
    font-weight: 650;
}

.rsp-checkout-auth form.woocommerce-form-login {
    width: 100% !important;
    margin: 0 !important;
    padding: 22px !important;
    background: var(--rsp-card-bg) !important;
    border: 1px solid var(--rsp-border) !important;
    border-radius: max(14px, var(--rsp-radius)) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
}

/* El texto explicativo nativo queda redundante: el toggle ya explica la acción. */
.rsp-checkout-auth form.woocommerce-form-login > p:first-child { display: none !important; }

.rsp-auth-checkout-heading {
    margin: 0 0 20px;
}

.rsp-auth-checkout-heading span {
    display: inline-block;
    padding: 0 0 10px 30px;
    color: var(--rsp-text);
    font-size: 22px;
    font-weight: 750;
    line-height: 1.2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322c55e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2h-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 2px;
    background-size: 18px 18px;
}

.rsp-auth-checkout-heading span::after {
    content: '';
    display: block;
    width: calc(100% - 30px);
    height: 2px;
    margin: 10px 0 0 30px;
    border-radius: 999px;
    background: var(--rsp-accent);
}

/* El checkout nativo usa dos columnas para usuario/contraseña: las mantenemos limpias. */
.rsp-checkout-auth form.woocommerce-form-login .form-row-first,
.rsp-checkout-auth form.woocommerce-form-login .form-row-last {
    width: calc(50% - 8px) !important;
}

.rsp-checkout-auth form.woocommerce-form-login .form-row-first { float: left !important; }
.rsp-checkout-auth form.woocommerce-form-login .form-row-last { float: right !important; }

.rsp-checkout-auth form.woocommerce-form-login .form-row:not(.form-row-first):not(.form-row-last) {
    clear: both !important;
}

/* ==========================================================================
   Contraseña perdida / crear nueva contraseña
   Mismo lenguaje visual compartido, sin reemplazar la lógica de WooCommerce.
   ========================================================================== */

.rsp-password-card {
    width: calc(100% - 32px);
    max-width: 520px;
    margin: 0 auto !important;
    padding: 26px;
    overflow: hidden;
    background: var(--rsp-card-bg) !important;
    border: 1px solid var(--rsp-border) !important;
    border-radius: max(14px, var(--rsp-radius)) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
    color: var(--rsp-text);
}

.rsp-password-head {
    margin: 0 0 21px;
}

.rsp-password-head h2 {
    position: relative;
    margin: 0 0 8px !important;
    padding-left: 29px;
    color: var(--rsp-text) !important;
    font-size: 22px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
}

.rsp-password-head h2::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322c55e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.rsp-password-head p {
    margin: 0 !important;
    color: var(--rsp-muted) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.rsp-password-card form.lost_reset_password {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* El encabezado propio de la tarjeta sustituye únicamente el texto introductorio nativo. */
.rsp-password-card form.lost_reset_password > p:first-child {
    display: none !important;
}

.rsp-password-card form.lost_reset_password .form-row,
.rsp-password-card form.lost_reset_password .form-row-first,
.rsp-password-card form.lost_reset_password .form-row-last {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    margin: 0 0 15px !important;
    padding: 0 !important;
}

.rsp-password-card form.lost_reset_password label {
    display: block;
    margin: 0 0 7px !important;
    color: var(--rsp-text) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
}

.rsp-password-card form.lost_reset_password .required {
    color: var(--rsp-accent) !important;
}

.rsp-password-card form.lost_reset_password :is(#user_login, #password_1, #password_2) {
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 10px 42px 10px 40px !important;
    color: var(--rsp-text) !important;
    background-color: color-mix(in srgb, var(--rsp-panel-bg) 72%, #000 28%) !important;
    background-repeat: no-repeat !important;
    background-position: 13px center !important;
    background-size: 16px 16px !important;
    border: 1px solid var(--rsp-border) !important;
    border-radius: 9px !important;
    outline: 0 !important;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.rsp-password-card form.lost_reset_password #user_login {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322c55e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

.rsp-password-card form.lost_reset_password :is(#password_1, #password_2) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322c55e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
}

.rsp-password-card form.lost_reset_password :is(#user_login, #password_1, #password_2):focus {
    border-color: color-mix(in srgb, var(--rsp-accent) 72%, var(--rsp-border)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rsp-accent) 12%, transparent) !important;
}

.rsp-password-card .show-password-input {
    color: var(--rsp-muted) !important;
}

.rsp-password-card form.lost_reset_password button.button {
    width: 100% !important;
    min-height: 44px !important;
    margin: 2px 0 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--rsp-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 44px !important;
}

.rsp-password-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: var(--rsp-accent) !important;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .rsp-password-card form.lost_reset_password button.button:hover {
        filter: brightness(1.06);
    }

    .rsp-password-back:hover {
        text-decoration: underline !important;
    }
}

@media (max-width: 768px) {
    .rs-auth-area { max-width: 560px; }

    .rs-auth-area .rs-account-tabs { display: grid; }

    .rs-auth-area #customer_login {
        display: block !important;
        width: 100% !important;
    }

    .rs-auth-area #customer_login :is(.u-column1, .u-column2) {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        padding: 20px !important;
        border-radius: 14px !important;
        box-shadow: none;
    }

    .rs-auth-area.rsp-auth-tabs-ready #customer_login .u-column2 { display: none !important; }
    .rs-auth-area #customer_login .u-column1 { display: block !important; }
    .rs-auth-area.rsp-auth-tabs-ready #customer_login.rs-show-register .u-column1 { display: none !important; }
    .rs-auth-area.rsp-auth-tabs-ready #customer_login.rs-show-register .u-column2 { display: block !important; }

    .rs-auth-area #customer_login h2 {
        margin-bottom: 16px !important;
        padding-bottom: 0 !important;
        border-bottom: 0;
        font-size: 21px !important;
    }

    .rs-auth-area #customer_login h2::after { display: none; }

    .rsp-checkout-auth form.woocommerce-form-login {
        padding: 18px !important;
        border-radius: 14px !important;
        box-shadow: none;
    }

    .rsp-auth-checkout-heading span { font-size: 20px; }

    .rsp-checkout-auth form.woocommerce-form-login .form-row-first,
    .rsp-checkout-auth form.woocommerce-form-login .form-row-last {
        float: none !important;
        width: 100% !important;
    }

    .rsp-password-card {
        width: calc(100% - 24px);
        padding: 20px;
        border-radius: 14px !important;
        box-shadow: none;
    }

    .rsp-password-head h2 {
        font-size: 20px !important;
    }
}

@media (max-width: 430px) {
    .rs-auth-area #customer_login :is(.u-column1, .u-column2) { padding: 17px !important; }
    .rs-auth-area #customer_login h2 { font-size: 19px !important; }
    .rsp-auth-ui .rs-social-login-box .nsl-button { min-height: 44px !important; }
    .rsp-checkout-auth form.woocommerce-form-login { padding: 16px !important; }
    .rsp-password-card { width: calc(100% - 20px); padding: 17px; }
}

/* Checkout obligatorio: las mismas tarjetas, en una sola columna en PC y móvil. */
.rsp-checkout-gate {
    width: 100%;
    max-width: 560px;
    margin: 20px auto 30px;
}
.rsp-checkout-gate-head { margin: 0 0 22px; }
.rsp-checkout-gate-head h2 {
    margin: 0 0 8px !important;
    color: var(--rsp-text) !important;
    font-size: clamp(21px, 5vw, 27px) !important;
    line-height: 1.2;
}
.rsp-checkout-gate-head p {
    margin: 0 !important;
    color: var(--rsp-muted) !important;
    font-size: 13px;
    line-height: 1.5;
}
.rsp-checkout-gate .rs-account-tabs { display: grid; }
.rsp-checkout-gate #customer_login { display: block !important; }
.rsp-checkout-gate #customer_login :is(.u-column1, .u-column2) {
    width: 100% !important;
    max-width: none !important;
}
.rsp-checkout-gate .rsp-auth-tabs-ready #customer_login .u-column2 { display: none !important; }
.rsp-checkout-gate .rsp-auth-tabs-ready #customer_login.rs-show-register .u-column1 { display: none !important; }
.rsp-checkout-gate .rsp-auth-tabs-ready #customer_login.rs-show-register .u-column2 { display: block !important; }
/* Safari: evita el zoom automático al enfocar correo o contraseña. */
@media (max-width: 768px) {
    .rsp-checkout-gate :is(.woocommerce-form-login, .woocommerce-form-register) input.input-text {
        font-size: 16px !important;
    }
}