/* ============================================================================
   SIGNUP PAGE ENHANCEMENTS
   ============================================================================ */

.field-hint {
    margin-top: 8px;
    margin-left: 2px;
    font-size: 10px;
    font-weight: 700;
    color: hsl(215, 16%, 47%);
}

.field-warning {
    margin-top: 8px;
    margin-left: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #b45309;
}

.signup-msg {
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    margin: 12px 0 18px;
    border: 1px solid transparent;
}

.signup-msg--error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
    color: #b91c1c;
}

.signup-msg--success {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
    color: #047857;
}

.signup-msg--info {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
    color: #1d4ed8;
}

.input-field.is-invalid {
    border-color: rgba(220, 38, 38, 0.55) !important;
    background: rgba(254, 242, 242, 0.85) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.terms-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 2px 0;
    color: hsl(215, 16%, 47%);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.terms-row input {
    width: 16px;
    height: 16px;
    accent-color: #6C63FF;
    cursor: pointer;
}

.terms-row input.is-invalid {
    outline: 2px solid rgba(239, 68, 68, 0.35);
    outline-offset: 2px;
}

.pass-toggle {
    position: absolute;
    right: 18px;
    top: 42px;
    color: hsl(215, 16%, 47%);
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.25s ease;
    background: none;
    border: none;
    padding: 0;
}

.pass-toggle:hover {
    color: #6C63FF;
}

.pass-toggle:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.auth-btn:disabled,
.google-btn:disabled {
    opacity: 0.72;
    cursor: not-allowed;
    transform: none !important;
}

.pass-toggle:focus-visible,
.auth-btn:focus-visible,
.google-btn:focus-visible,
.terms-row input:focus-visible {
    outline: 2px solid rgba(108, 99, 255, 0.45);
    outline-offset: 2px;
}

@media (max-width: 700px) {
    #signupFormElement {
        max-height: none !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
    }

    .terms-row {
        align-items: flex-start;
    }
}