/*
 * @module auth_modal
 * @version 1.0.1
 * @since 2026-10-05
 * Назначение: стили интерфейса, перенесённые из macros/auth_modal.html.
 * Связи: исходный HTML, PageRuntime и docs/modules/TEMPLATE_ASSETS.md.
 * Причина: HTML хранит разметку/серверные данные, JS — поведение, CSS — оформление.
 * История 1.0.0: исходные функции и комментарии сохранены при выделении файла.
 * История 1.0.1: проверены подключения, JSON и состояния после SPA-переходов.
 * Проверки: tests/test_template_assets.py и tests/template-assets.test.cjs.
 */
#authModal .btn-close svg {
    width: 24px;
    height: 24px;
}

#authModal .input-field.register-mode .input-password-toggle {
    display: none !important;
}

#authModal .input-field.password-mismatch input {
    color: #dc2626 !important;
}

#authModal .input-field.password-mismatch::after {
    background: #dc2626;
}

#authModal .modal-content--auth.register-mode .input-validation {
    display: none !important;
}

#authModal .modal-content--auth.register-mode .error-message {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   🔴 ПОДСКАЗКИ ВАЛИДАЦИИ
   ───────────────────────────────────────────────────────────── */

#authModal .validation-hint {
    display: none;
    position: absolute;
    bottom: -22px;
    left: 0;
    font-size: 12px;
    font-weight: 600;
    color: #dc2626;
    letter-spacing: 0.02em;
    pointer-events: none;
    z-index: 1;
    transition: color 0.2s ease;
}

#authModal .modal-content--auth.register-mode .validation-hint {
    display: block;
}

#authModal .validation-hint.valid {
    color: #16a34a;
}

#authModal .validation-hint.invalid {
    color: #dc2626;
}

#authModal .validation-hint.neutral {
    color: #6b7280;
}

/* Индикатор загрузки при проверке логина */
#authModal .validation-hint.loading {
    color: #f59e0b;
}

#authModal .btn-primary.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

#authModal .btn-primary.submitting {
    opacity: 0.7;
    pointer-events: none;
}

#authModal .modal-content--auth.register-mode .input-field {
    margin-bottom: 28px;
}

@media (max-width: 400px) {
    #authModal .btn-primary {
        height: 48px !important;
        font-size: 15px;
    }
    
    #authModal .btn-close--round-large {
        width: 48px !important;
        height: 48px !important;
    }
    
    #authModal .validation-hint {
        font-size: 11px;
        bottom: -20px;
    }
}