/* Login / Registro / Recuperar contraseña — diseño "Login y Registro" (Claude
   Design, proyecto bebelli). Card centrada sobre lavanda, tabs pill, inputs
   redondeados y CTA coral. Tokens con fallback hex del design system. */

.bb-auth {
    min-height: calc(100vh - 220px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 16px;
    font-family: 'Nunito', sans-serif;
    color: var(--bb-ink, #3D3A5C);
    box-sizing: border-box;
}

/* El fondo lavanda cubre el main completo de la página de cuenta */
.woocommerce-account:not(.logged-in) .site-main,
.woocommerce-lost-password .site-main {
    background: var(--bb-purple-50, #F0F1FD);
}

.bb-auth__logo { height: 44px; width: auto; }

.bb-auth__card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow-card, 0 4px 14px rgba(61, 58, 92, .08));
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-sizing: border-box;
}

/* ── Tabs pill ── */

.bb-auth__tabs {
    display: flex;
    background: var(--bb-purple-50, #F0F1FD);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}

.bb-auth__tab {
    flex: 1;
    border: none;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 999px;
    background: transparent;
    color: var(--bb-ink-soft, #6B678C);
    transition: background 150ms, color 150ms;
}

.bb-auth__tab:hover {
    background: transparent;
    color: var(--bb-ink, #3D3A5C);
}

.bb-auth__tab[aria-selected="true"],
.bb-auth__tab[aria-selected="true"]:hover {
    background: #fff;
    color: var(--bb-purple, #7579E7);
    box-shadow: 0 2px 8px rgba(117, 121, 231, .18);
}

/* Con JS activo, solo el panel de la vista actual */
.bb-auth[data-js] [data-auth-panel] { display: none; }
.bb-auth[data-js][data-view="login"] [data-auth-panel="login"],
.bb-auth[data-js][data-view="register"] [data-auth-panel="register"] { display: flex; }

.bb-auth__panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Cabecera de vista ── */

.bb-auth__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.bb-auth__head h1 {
    margin: 0;
    font-family: var(--font-display, 'Fredoka'), sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: var(--bb-ink, #3D3A5C);
}

.bb-auth__head p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bb-ink-soft, #6B678C);
    text-wrap: pretty;
}

.bb-auth__head--icon { gap: 6px; }

.bb-auth__badge {
    align-self: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--bb-purple-50, #F0F1FD);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.bb-auth__badge--ok {
    width: 64px;
    height: 64px;
    background: #E8F7EE;
}

/* ── Formularios ── */

.bb-auth__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.bb-auth__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}

.bb-auth__field input {
    border: 1.5px solid var(--bb-line, #E8E7F4);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--bb-ink, #3D3A5C);
    outline: none;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 150ms;
}

.bb-auth__field input:focus {
    border-color: var(--bb-purple, #7579E7);
    box-shadow: none;
}

.bb-auth__field input::placeholder { color: var(--bb-ink-faint, #8B88A8); font-weight: 400; }

.bb-auth__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.bb-auth__check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
}

.bb-auth__check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--bb-purple, #7579E7);
    margin: 0;
    flex: none;
}

.bb-auth__check--terms {
    align-items: flex-start;
    color: var(--bb-ink-soft, #6B678C);
}

.bb-auth__check--terms input[type="checkbox"] { margin-top: 1px; }

.bb-auth__link {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--bb-purple, #7579E7);
    text-decoration: none;
}

.bb-auth__link:hover {
    color: var(--bb-purple-deep, #5A5ED1);
    text-decoration: underline;
}

.bb-auth__link--center { align-self: center; }

.bb-auth__cta {
    border: none;
    cursor: pointer;
    background: var(--bb-coral, #F87E6D);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 15px;
    padding: 13px 16px;
    border-radius: 999px;
    box-shadow: var(--shadow-cta, 0 10px 24px rgba(248, 126, 109, .35));
    transition: background 150ms, transform 150ms ease-out;
    width: 100%;
}

.bb-auth__cta:hover { background: var(--bb-coral-deep, #E5654F); color: #fff; }
.bb-auth__cta:active { transform: scale(.97); }

/* ── Vista "enlace enviado" ── */

.bb-auth__sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 8px 0;
}

.bb-auth__sent h1 {
    margin: 0;
    font-family: var(--font-display, 'Fredoka'), sans-serif;
    font-weight: 600;
    font-size: 24px;
}

.bb-auth__sent p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bb-ink-soft, #6B678C);
    text-wrap: pretty;
}

.bb-auth__sent-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.bb-auth__btn-soft {
    border: none;
    background: var(--bb-purple-50, #F0F1FD);
    color: var(--bb-purple, #7579E7);
    border-radius: 999px;
    padding: 11px 22px;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background 150ms;
}

.bb-auth__btn-soft:hover {
    background: var(--bb-purple-100, #E4E5FB);
    color: var(--bb-purple, #7579E7);
}

/* ── Piezas que otros plugins/Woo inyectan en los hooks ── */

.bb-auth__form .woocommerce-privacy-policy-text p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--bb-ink-faint, #8B88A8);
}

/* Los notices de Woo (errores de login/registro) arriba de la card, angostos */
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper,
.woocommerce-account:not(.logged-in) ul.woocommerce-error,
.woocommerce-account:not(.logged-in) .woocommerce-message,
.woocommerce-account:not(.logged-in) .woocommerce-info {
    max-width: 452px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 480px) {
    .bb-auth { padding: 28px 14px; min-height: calc(100vh - 160px); }
    .bb-auth__card { padding: 22px 18px; }
}

/* ── Alertas (mockup: pill rosa con ícono, dentro de la card) ── */

.bb-auth__alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--bb-danger-bg, #FDECF0);
    border-radius: 14px;
    padding: 12px 14px;
}

.bb-auth__alert-icon {
    color: var(--bb-danger, #E85D75);
    display: flex;
    flex: none;
    margin-top: 1px;
}

.bb-auth__alert-text {
    font-size: 13px;
    line-height: 1.5;
    color: #A3374F;
    font-weight: 700;
}

.bb-auth__alert-text a { color: inherit; text-decoration: underline; }

.bb-auth__alert--success { background: #E8F7EE; }
.bb-auth__alert--success .bb-auth__alert-icon { color: var(--bb-success, #4CB782); }
.bb-auth__alert--success .bb-auth__alert-text { color: #1F7A46; }

.bb-auth__alert--notice { background: var(--bb-purple-50, #F0F1FD); }
.bb-auth__alert--notice .bb-auth__alert-icon { color: var(--bb-purple, #7579E7); }
.bb-auth__alert--notice .bb-auth__alert-text { color: var(--bb-purple-deep, #5A5ED1); }

/* ── Medidor de contraseña (mockup: 3 barras + nivel con consejo) ── */

.bb-auth__meter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

.bb-auth__meter[hidden] { display: none; }

.bb-auth__meter-bars { display: flex; gap: 5px; }

.bb-auth__meter-bars i {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: var(--bb-line, #E8E7F4);
    transition: background 200ms;
}

.bb-auth__meter-text {
    font-size: 12px;
    font-weight: 700;
}

.bb-auth__meter--weak   { --bb-meter-color: var(--bb-danger, #E85D75); }
.bb-auth__meter--mid    { --bb-meter-color: var(--bb-warning, #F5A623); }
.bb-auth__meter--strong { --bb-meter-color: var(--bb-success, #4CB782); }

.bb-auth__meter--weak   .bb-auth__meter-bars i:nth-child(1),
.bb-auth__meter--mid    .bb-auth__meter-bars i:nth-child(-n+2),
.bb-auth__meter--strong .bb-auth__meter-bars i { background: var(--bb-meter-color); }

.bb-auth__meter-text { color: var(--bb-meter-color, var(--bb-ink-soft, #6B678C)); }