/* ============================================================
   auth-glow.css — модалка входа/регистрации (#authModal, index.html).
   Стекло, бегущие лучи по кромке, 3D-наклон за курсором (js/main.js),
   свечение фона оверлея. Все цвета — токены палитры (var()/color-mix),
   поэтому все 6 тем из theme-boot.js подхватываются сами.
   Классы форм (.form-input, .form-select, .btn-primary, .auth-tab …)
   сохранены: их переиспользуют forgotForm и 2FA-шаг (show2FALoginStep).
   Селекторы с #authModal — чтобы перекрыть .night-mode-правила dark-mode.css.
   Подключается ПОСЛЕ layout.css / dark-mode.css / responsive.css.
   ============================================================ */

#authModal {
    /* Производные токены */
    --ag-glow: var(--emerald-light);
    --ag-beam: color-mix(in srgb, #fff 82%, var(--emerald-light));
    --ag-card-bg: color-mix(in srgb, var(--white) 80%, transparent);
    --ag-card-border: color-mix(in srgb, var(--dark-gray) 10%, transparent);
    --ag-field-bg: color-mix(in srgb, var(--dark-gray) 5%, transparent);
    --ag-field-bg-focus: color-mix(in srgb, var(--emerald) 7%, transparent);
    --ag-field-border: color-mix(in srgb, var(--dark-gray) 10%, transparent);
    --ag-text-2: color-mix(in srgb, var(--dark-gray) 72%, var(--white));
    --ag-text-3: color-mix(in srgb, var(--dark-gray) 52%, var(--white));
}
html.night-mode #authModal {
    --ag-card-bg: color-mix(in srgb, var(--white) 55%, transparent);
    --ag-card-border: color-mix(in srgb, #fff 8%, transparent);
    --ag-field-bg: color-mix(in srgb, #fff 6%, transparent);
    --ag-field-bg-focus: color-mix(in srgb, #fff 10%, transparent);
    --ag-field-border: color-mix(in srgb, #fff 8%, transparent);
}

/* ───────── Оверлей = сцена: полупрозрачный градиент акцента поверх размытой страницы + дышащие свечения.
   Страница просвечивает (решение владельца 12.10); шум убран — непрозрачный слой закрыл бы просвет. ───────── */
#authOverlay {
    --ag-scene-mid: color-mix(in srgb, var(--emerald) 45%, black);
    --ag-scene-deep: color-mix(in srgb, var(--emerald-dark) 55%, black);
    --ag-scene-alpha: 30%;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ag-scene-mid) var(--ag-scene-alpha), transparent) 0%,
        color-mix(in srgb, var(--ag-scene-deep) var(--ag-scene-alpha), transparent) 55%,
        color-mix(in srgb, #050806 var(--ag-scene-alpha), transparent) 100%);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
    overflow: hidden;
}
html.night-mode #authOverlay {
    --ag-scene-mid: color-mix(in srgb, var(--emerald) 28%, black);
    --ag-scene-deep: color-mix(in srgb, var(--emerald-dark) 35%, black);
    --ag-scene-alpha: 40%;
}
#authOverlay::before,
#authOverlay::after {
    content: '';
    position: absolute;
    left: 50%;
    translate: -50% 0;
    pointer-events: none;
    filter: blur(70px);
    animation: ag-breathe 8s ease-in-out infinite alternate;
}
#authOverlay::before {
    top: -10vh; width: 110vh; height: 60vh;
    border-radius: 0 0 50% 50%;
    background: color-mix(in srgb, var(--emerald-light) 20%, transparent);
}
#authOverlay::after {
    bottom: -30vh; width: 90vh; height: 90vh;
    border-radius: 50%;
    background: color-mix(in srgb, var(--emerald-light) 16%, transparent);
    animation-duration: 6s;
    animation-delay: 1s;
}
#authOverlay:not(.open)::before,
#authOverlay:not(.open)::after { animation-play-state: paused; }
@keyframes ag-breathe { from { opacity: .55; transform: scale(.97); } to { opacity: 1; transform: scale(1.04); } }

/* ───────── Контейнер: только позиционирование + перспектива ───────── */
#authModal {
    background: transparent;
    box-shadow: none;
    border-radius: var(--radius-xl);
    max-width: 440px;
    max-height: none;
    overflow: visible;
    perspective: 1500px;
}
.auth-tilt {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .25s var(--ease-out);
    will-change: transform;
}
.auth-tilt.is-moving { transition: transform .08s linear; }

/* ───────── Эффекты кромки ───────── */
.auth-fx { position: absolute; inset: -1px; border-radius: var(--radius-xl); pointer-events: none; }
.auth-halo {
    position: absolute; inset: 0; border-radius: inherit;
    box-shadow: 0 0 14px 4px color-mix(in srgb, var(--ag-glow) 25%, transparent);
    animation: ag-halo 4s ease-in-out infinite alternate;
}
@keyframes ag-halo { from { opacity: .25; } to { opacity: .6; } }
.auth-beams { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.auth-beams i { position: absolute; display: block; }
.auth-beams .beam { opacity: .7; filter: blur(1.5px); animation: 3.5s ease-in-out infinite; }
.beam--top    { top: 0; height: 3px; width: 50%; left: -50%;   background: linear-gradient(90deg, transparent, var(--ag-beam), transparent); animation-name: ag-beam-x; }
.beam--right  { right: 0; width: 3px; height: 50%; top: -50%;  background: linear-gradient(180deg, transparent, var(--ag-beam), transparent); animation-name: ag-beam-y; animation-delay: .9s; }
.beam--bottom { bottom: 0; height: 3px; width: 50%; right: -50%; background: linear-gradient(90deg, transparent, var(--ag-beam), transparent); animation-name: ag-beam-xr; animation-delay: 1.8s; }
.beam--left   { left: 0; width: 3px; height: 50%; bottom: -50%; background: linear-gradient(180deg, transparent, var(--ag-beam), transparent); animation-name: ag-beam-yr; animation-delay: 2.7s; }
@keyframes ag-beam-x  { 0% { left: -50%; opacity: .3; }   35% { opacity: .8; } 70%, 100% { left: 100%; opacity: .3; } }
@keyframes ag-beam-y  { 0% { top: -50%; opacity: .3; }    35% { opacity: .8; } 70%, 100% { top: 100%; opacity: .3; } }
@keyframes ag-beam-xr { 0% { right: -50%; opacity: .3; }  35% { opacity: .8; } 70%, 100% { right: 100%; opacity: .3; } }
@keyframes ag-beam-yr { 0% { bottom: -50%; opacity: .3; } 35% { opacity: .8; } 70%, 100% { bottom: 100%; opacity: .3; } }
.auth-beams .dot { border-radius: 50%; background: var(--ag-beam); filter: blur(1.5px); animation: ag-dot 2.2s ease-in-out infinite alternate; }
.dot--tl { top: 0; left: 0; width: 5px; height: 5px; }
.dot--tr { top: 0; right: 0; width: 8px; height: 8px; animation-delay: .5s; }
.dot--br { bottom: 0; right: 0; width: 8px; height: 8px; animation-delay: 1s; }
.dot--bl { bottom: 0; left: 0; width: 5px; height: 5px; animation-delay: 1.5s; }
@keyframes ag-dot { from { opacity: .2; } to { opacity: .55; } }
/* Закрытая модалка не крутит анимации */
#authModal:not(.open) .auth-fx * { animation-play-state: paused; }

/* ───────── Стеклянная карточка (скроллится она, не контейнер) ───────── */
.auth-card {
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--ag-card-bg);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid var(--ag-card-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 80px rgba(0, 0, 0, .35);
    scrollbar-width: thin;
}
.auth-card::before { /* тонкая диагональная сетка */
    content: '';
    position: absolute; inset: 0; pointer-events: none; opacity: .04;
    background-image:
        linear-gradient(135deg, var(--dark-gray) .5px, transparent .5px),
        linear-gradient(45deg, var(--dark-gray) .5px, transparent .5px);
    background-size: 30px 30px;
}

/* ───────── Шапка ───────── */
#authModal .modal-header { padding: 28px 28px 0; }
#authModal .modal-logo { font-size: 34px; line-height: 1.2; margin-bottom: 4px; }
#authModal .modal-title { font-size: 20px; }
#authModal .modal-subtitle { font-size: 13px; color: var(--ag-text-2); }
#authModal.open .modal-logo { animation: ag-spring .8s var(--ease-spring) both; }
#authModal.open .modal-title { animation: ag-rise .6s .15s var(--ease-out) both; }
#authModal.open .modal-subtitle { animation: ag-rise .6s .25s var(--ease-out) both; }
@keyframes ag-spring { from { opacity: 0; transform: scale(.6); } }
@keyframes ag-rise { from { opacity: 0; transform: translateY(12px); } }
#authModal .modal-close { color: var(--ag-text-3); z-index: 2; }
#authModal .modal-close:hover { background: var(--ag-field-bg); color: var(--dark-gray); }

/* ───────── Вкладки — сегмент с «таблеткой» ───────── */
#authModal .auth-tabs {
    display: flex; gap: 4px; padding: 4px;
    margin: 18px 28px 0;
    border: 0; border-radius: 10px;
    background: var(--ag-field-bg);
}
#authModal .auth-tab {
    padding: 8px; border-radius: 8px; font-size: 14px;
    color: var(--ag-text-2);
    transition: color .2s, background .25s var(--ease-out), box-shadow .25s;
}
#authModal .auth-tab::after { display: none; }
#authModal .auth-tab.active {
    color: var(--dark-gray);
    background: var(--white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
#authModal .auth-tab:hover:not(.active) { color: var(--dark-gray); }

/* ───────── Формы ───────── */
#authModal .auth-form { padding: 18px 28px 24px; }
#authModal .form-group { margin-bottom: 12px; }
#authModal .form-label { font-size: 12px; color: var(--ag-text-2); margin-bottom: 5px; }
#authModal .form-label .optional { color: var(--ag-text-3); }

/* Обёртка поля с иконкой; .password-wrap — та же обёртка + глаз */
#authModal .input-wrap,
#authModal .password-wrap {
    position: relative; display: flex; align-items: center;
    border-radius: 10px;
    transition: transform .25s var(--ease-spring);
}
#authModal .input-wrap:hover,
#authModal .password-wrap:hover { transform: scale(1.01); }
#authModal .input-wrap:focus-within,
#authModal .password-wrap:focus-within { transform: scale(1.02); }
#authModal .input-icon {
    position: absolute; inset-inline-start: 12px;
    width: 16px; height: 16px;
    color: var(--ag-text-3); pointer-events: none;
    transition: color .25s;
}
#authModal .input-wrap:focus-within .input-icon,
#authModal .password-wrap:focus-within .input-icon { color: var(--emerald); }

#authModal .form-input,
#authModal .form-select {
    height: 42px; padding: 0 12px; font-size: 14px;
    border: 1px solid var(--ag-field-border);
    border-radius: 10px;
    background: var(--ag-field-bg);
    color: var(--dark-gray);
    transition: background .25s, border-color .25s, box-shadow .25s;
}
#authModal .form-select { padding-inline-end: 36px; background-position: right 10px center; }
[dir="rtl"] #authModal .form-select { background-position: left 10px center; }
#authModal .has-icon .form-input { padding-inline-start: 38px; }
#authModal .password-wrap .form-input { padding-inline-end: 40px; }
#authModal .form-input::placeholder { color: var(--ag-text-3); }
#authModal .form-input:focus,
#authModal .form-select:focus {
    background: var(--ag-field-bg-focus);
    border-color: var(--emerald);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald) 18%, transparent);
}
#authModal .form-input.error { border-color: var(--danger); }
/* Пункты нативного <select> в тёмных темах — на тёмной подложке */
html.night-mode #authModal .form-select option { background: var(--white); color: var(--dark-gray); }

#authModal .password-toggle {
    right: auto; inset-inline-end: 8px;
    width: 28px; height: 28px; padding: 0;
    display: grid; place-items: center;
    border-radius: 6px; color: var(--ag-text-3);
    transition: color .25s;
}
#authModal .password-toggle:hover { color: var(--dark-gray); }
#authModal .password-toggle svg { width: 16px; height: 16px; }
#authModal .password-toggle .ico-eye-off { display: none; }
#authModal .password-toggle.is-shown .ico-eye { display: none; }
#authModal .password-toggle.is-shown .ico-eye-off { display: block; }

#authModal .form-hint { color: var(--ag-text-3) !important; font-size: 11.5px !important; }
#authModal .form-error { font-size: 12px; margin-top: 5px; }
#authModal .form-row { gap: 10px; }

/* Пол — сегмент вместо радиокнопок */
#authModal .gender-radios { display: flex; gap: 6px; }
#authModal .radio-label { flex: 1; position: relative; display: block; cursor: pointer; }
#authModal .radio-label input { position: absolute; opacity: 0; pointer-events: none; }
#authModal .radio-label span {
    display: block; text-align: center;
    height: 42px; line-height: 40px; padding: 0 8px;
    border-radius: 10px;
    background: var(--ag-field-bg);
    border: 1px solid var(--ag-field-border);
    font-size: 13px; color: var(--ag-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: all .2s;
}
#authModal .radio-label:hover span { transform: scale(1.01); }
#authModal .radio-label input:checked + span {
    background: var(--ag-field-bg-focus);
    border-color: var(--emerald);
    color: var(--emerald);
    font-weight: 600;
}
#authModal .radio-label input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald) 18%, transparent); }

/* «Забыли пароль?» */
#authModal .forgot-link { font-size: 12px; color: var(--ag-text-2); margin: -4px 0 12px; transition: color .2s; }
#authModal .forgot-link:hover { color: var(--emerald); text-decoration: none; }

/* ───────── Кнопка: свечение, стрелка-ховер нет (текст меняет i18n), шиммер при загрузке ───────── */
#authModal .btn-primary {
    position: relative; overflow: hidden;
    height: 44px; padding: 0 16px;
    border-radius: 10px; font-size: 15px;
    transition: transform .2s var(--ease-spring), box-shadow .3s;
}
#authModal .btn-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--emerald) 45%, transparent);
}
#authModal .btn-primary:active { transform: scale(.98); }
#authModal .btn-primary::after { /* шиммер — виден только пока кнопка заблокирована (_lockSubmit) */
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: translateX(-100%); opacity: 0;
}
#authModal .btn-primary:disabled { opacity: .85; transform: none; }
#authModal .btn-primary:disabled::after { opacity: 1; animation: ag-shimmer 1.5s ease-in-out infinite; }
@keyframes ag-shimmer { to { transform: translateX(100%); } }

#authModal .auth-email-only-note { color: var(--ag-text-3) !important; font-size: 11.5px !important; margin-top: 12px !important; }

/* ───────── Адаптив ───────── */
@media (max-width: 768px) {
    #authModal { width: 95%; max-width: none; border-radius: var(--radius-lg); }
    .auth-fx, .auth-card { border-radius: var(--radius-lg); }
    #authModal .modal-header { padding: 22px 18px 0; }
    #authModal .auth-tabs { margin: 16px 18px 0; }
    #authModal .auth-form { padding: 16px 18px 20px; }
    /* backdrop-filter на слабых телефонах дорог — плотный фон вместо стекла */
    .auth-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--white) 96%, transparent); }
    #authOverlay::before, #authOverlay::after { filter: blur(50px); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-fx *, #authOverlay::before, #authOverlay::after, #authModal .btn-primary:disabled::after,
    #authModal .modal-logo, #authModal .modal-title, #authModal .modal-subtitle { animation: none !important; }
    .auth-tilt { transform: none !important; transition: none; }
}


/* Согласия при регистрации: Условия/продажа/возврат и обработка персональных данных (две отдельные обязательные галочки) */
#authModal .reg-consents { margin-top: 4px; }
#authModal .reg-consent {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 10px; font-size: 13px; line-height: 1.45; cursor: pointer;
    color: var(--medium-gray, #6b7280);
}
#authModal .reg-consent input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--emerald, #059669); cursor: pointer; }
#authModal .reg-consent a { color: var(--emerald-dark, #047857); text-decoration: underline; text-underline-offset: 2px; }