/*
 * ==========================================================================
 * RESET-PASSWORD02 STYLES
 * ==========================================================================
 * Augments entydad-login02.css for the split-screen reset password flow.
 * Adds password strength meter, success icon, error block, and step tweaks.
 * All base .auth-* layout is inherited from entydad-login02.css.
 * ==========================================================================
 */

/* --- Password Strength Meter --- */
.password-strength {
    margin-bottom: var(--spacing-2xs);
}

.password-strength-bars {
    display: flex;
    gap: var(--spacing-xs);
}

.password-strength-bar {
    flex: 1;
    height: 0.25rem;
    background: var(--border);
    border-radius: var(--radius-full, 9999px);
    transition: background-color var(--transition-base);
}

/* Strength levels applied via data-strength on .password-strength */
.password-strength[data-strength="1"] .password-strength-bar:nth-child(1) {
    background: var(--status-error);
}

.password-strength[data-strength="2"] .password-strength-bar:nth-child(-n+2) {
    background: var(--status-warning);
}

.password-strength[data-strength="3"] .password-strength-bar:nth-child(-n+3) {
    background: var(--status-info);
}

.password-strength[data-strength="4"] .password-strength-bar {
    background: var(--status-success);
}

/* --- Error Block --- */
.reset02-error {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    background: color-mix(in srgb, var(--status-error) 8%, transparent);
    border: var(--border-width) solid color-mix(in srgb, var(--status-error) 25%, transparent);
    border-radius: var(--radius-md);
    color: var(--status-error);
    font-size: var(--text-md);
}

.reset02-error svg {
    width: var(--icon-xs);
    height: var(--icon-xs);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* --- Success State --- */
.reset02-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg) 0;
}

.reset02-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: var(--spacing-3xl);
    background: color-mix(in srgb, var(--status-success) 12%, transparent);
    border-radius: var(--radius-full, 9999px);
    color: var(--status-success);
    animation: reset02-successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.reset02-success-icon svg {
    width: var(--icon-2xl);
    height: var(--icon-2xl);
}

@keyframes reset02-successPop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    70% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

.reset02-back-btn {
    display: inline-block;
    margin-top: var(--spacing-sm);
    text-decoration: none;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .reset02-success-icon {
        animation: none;
    }
}