/* Sign-up page: the three form steps, field states and the terms row.
   Shared field, button, link and modal styles live in base_auth.css. */

.form-step {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-step:not(:first-child) {
    animation: step-in 0.25s ease-out;
}

@keyframes step-in {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: none; }
}

.auth-card .input-container input.valid {
    border-color: var(--success-text);
}

.auth-card .input-container input.error {
    border-color: var(--error-text);
}

.date-input input {
    cursor: pointer;
}

.password-container input {
    padding-right: 3.25rem;
}

.auth-card .toggle-password {
    position: absolute;
    right: 0.375rem;
    top: 1.95rem;
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
}

.auth-card .toggle-password:hover:not([disabled]) {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.toggle-password::before {
    content: "\f06e";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 15px;
}

.toggle-password.visible::before {
    content: "\f070";
}

.checkbox-container label {
    align-items: flex-start;
}

.checkbox-container input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.terms-container #terms-error {
    margin-left: 1.625rem;
}

.auth-card .button-group {
    margin-top: 0.5rem;
}

.auth-card .button-group button {
    flex: 1;
}

.shake {
    animation: shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {
    20%, 80% { transform: translateX(2px); }
    40%, 60% { transform: translateX(-3px); }
}

.auth-card .register-text {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
}

.accept-terms-btn {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .form-step:not(:first-child),
    .shake {
        animation: none;
    }
}