/* || Registration Styles */

/* Password help section */
#form #password-help {
    margin-top: var(--gap-small);
    padding: var(--gap-small);
    background-color: var(--auth-colour-bg-accent-1);
    border-radius: 15px;
    border: 1px solid var(--form-input-border);
    width: 100%;
}

/* Password requirements list */
#form #password-requirements {
    margin: 0;
    padding-left: var(--gap-small);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Individual requirement items */
#form #password-requirements li {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--state-danger);
    list-style: none;
    position: relative;
    padding-left: 1.5rem;
    transition: color 0.5s ease, font-size 0.5s ease, content 0.5s ease;
}

/* Requirement checkmark - default invalid state */
#form #password-requirements li::before {
    content: "✗";
    position: absolute;
    left: 0;
    color: var(--state-danger);
    font-weight: bold;
    transition: color 0.5s ease, content 0.5s ease;
}

#form #password-requirements li.valid {
    color: var(--state-success-strong);
    font-size: 0.95rem;
}

/* Requirement checkmark - valid state */
#form #password-requirements li.valid::before {
    content: "✓";
    color: var(--state-success);
}

/* Button groups */
#form .next-btn {
    width: 100%;
    display: flex;
    justify-content: center;
}

#form .presubmit-options {
    display: flex;
    gap: var(--gap-small);
    justify-content: center;
    margin-top: var(--gap-small);
    flex-wrap: wrap;
}

#form .presubmit-options button {
    flex: 1;
    max-width: 250px;
}