/*
 * ==========================================================================
 * SIGNUP02 STYLES
 * ==========================================================================
 * Split-screen signup page — extends entydad-login02.css.
 * This file is intentionally minimal: the bulk of the split-screen layout,
 * form fields, logo, buttons, social providers, and carousel are all handled
 * by entydad-login02.css (.auth-* classes).
 *
 * Only signup-specific additions live here:
 *   - .signup-name-row — two-column name field grid
 *   - .password-strength — 4-bar strength meter
 *   - .signup-terms — small terms/privacy notice beneath the form
 * ==========================================================================
 */

/* --- Name Row (side-by-side first/last name fields) --- */
.signup-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

@media (max-width: 640px) {
    .signup-name-row {
        grid-template-columns: 1fr;
    }
}

/* --- Password Strength Meter --- */
.password-strength {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2xs);
    margin-top: var(--spacing-xs);
    height: 0.25rem;
}

.password-strength-bar {
    height: 100%;
    border-radius: var(--radius-sm, 9999px);
    background: var(--border);
    transition: background-color var(--transition-base);
}

.password-strength-bar.active.weak {
    background: var(--status-error);
}

.password-strength-bar.active.fair {
    background: var(--status-warning);
}

.password-strength-bar.active.good {
    background: var(--status-info);
}

.password-strength-bar.active.strong {
    background: var(--status-success);
}

/* --- Terms / Privacy Notice --- */
.signup-terms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2xs);
    font-size: var(--text-sm);
    color: var(--text-muted, var(--text-secondary));
    text-align: center;
    margin-bottom: var(--spacing-2xs);
}

.signup-terms a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-base);
}

.signup-terms a:hover {
    color: var(--accent-primary-dark, var(--accent-primary));
    text-decoration: underline;
}