/**
 * Signup Form Password Validation Styling
 * Fixes the issue where all password requirements show at once
 */

/* Hide password help text initially */
#div_id_password1 .form-text,
#div_id_password2 .form-text,
#hint_id_password1,
#hint_id_password2,
[id*="hint_id_password"],
.mb-3:has(#id_password1) .form-text,
.mb-3:has(#id_password2) .form-text,
.mb-3:has(#id_password1) small,
.mb-3:has(#id_password2) small,
.mb-3:has(#id_password1) .help-text,
.mb-3:has(#id_password2) .help-text,
/* Additional selectors for allauth generated help text */
#id_password1 + .form-text,
#id_password2 + .form-text,
#id_password1 ~ .form-text,
#id_password2 ~ .form-text,
/* Hide any text nodes after password inputs */
.textinput[type="password"] + *:not(input):not(.password-requirements):not(.password-strength):not(.invalid-feedback),
/* Target password help text by content */
*:has-text("Your password can't be too similar"),
*:has-text("Your password must contain at least"),
/* Django auth password validators help text */
.helptext,
#id_password1 + .helptext,
#id_password2 + .helptext,
/* All password-related help text */
[id*="password"] + .form-text,
[id*="password"] + small,
[id*="password"] + .help-text,
[id*="password"] + .helptext {
 display: none !important;
}

/* Password requirements list styling */
.password-requirements {
 background-color: #f8f9fa;
 border: 1px solid #dee2e6;
 border-radius: 0.375rem;
 padding: 1rem;
 margin-top: 0.5rem;
 font-size: 0.875rem;
 display: none;
}

.password-requirements.show {
 display: block;
}

.password-requirement {
 color: #6c757d;
 padding: 0.25rem 0;
 display: flex;
 align-items: center;
}

.password-requirement:before {
 content: "○";
 margin-right: 0.5rem;
 font-weight: bold;
}

.password-requirement.valid {
 color: #198754;
}

.password-requirement.valid:before {
 content: "✓";
 color: #198754;
}

.password-requirement.invalid {
 color: #dc3545;
}

.password-requirement.invalid:before {
 content: "✗";
 color: #dc3545;
}

/* Password strength indicator */
.password-strength {
 height: 4px;
 border-radius: 2px;
 margin-top: 0.5rem;
 background-color: #e9ecef;
 overflow: hidden;
 display: none;
}

.password-strength.show {
 display: block;
}

.password-strength-bar {
 height: 100%;
 transition: width 0.3s ease, background-color 0.3s ease;
 width: 0%;
}

.password-strength-bar.weak {
 width: 33%;
 background-color: #dc3545;
}

.password-strength-bar.medium {
 width: 66%;
 background-color: #ffc107;
}

.password-strength-bar.strong {
 width: 100%;
 background-color: #198754;
}

/* Form field error styling */
.form-control.is-invalid + .password-requirements {
 display: block;
}

/* Responsive adjustments */
@media (max-width: 576px) {
 .password-requirements {
 font-size: 0.8125rem;
 padding: 0.75rem;
 }
}

/* Hide default help text that shows all requirements */
#hint_id_password1 {
 display: none !important;
}