/* Стили страниц входа, регистрации и лид-квиза. */

/* Container */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--ui-s-5);
    padding-top: 40px;
}

/* Card */
.auth-card {
    background: var(--ui-surface);
    border-radius: var(--ui-r-lg);
    padding: var(--ui-s-6) var(--ui-s-5);
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.auth-card-wide {
    max-width: 480px;
}

.dark-theme .auth-card {
    background: var(--ui-surface);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Header */
.auth-header {
    text-align: center;
    margin-bottom: var(--ui-s-6);
}

.auth-title {
    font-size: var(--ui-t-2xl);
    font-weight: 700;
    color: var(--ui-text);
    margin: 0 0 var(--ui-s-2) 0;
}

.auth-subtitle {
    font-size: var(--ui-t-md);
    color: var(--ui-text-3);
    margin: 0;
}

/* Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--ui-s-5);
}

/* Ряд полей формы — `.ui-form-row` из слоя (перелом на 560px, gap --ui-s-3). */

.ui-field-label .required {
    color: var(--ui-danger);
}
.dark-theme .ui-input {
    background: var(--ui-surface-2);
    border-color: var(--ui-line);
}

/* Password input wrapper */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .ui-input {
    padding-right: var(--ui-s-7);
}

.password-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--ui-text-3);
    cursor: pointer;
    padding: var(--ui-s-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .password-toggle:hover {
        color: var(--ui-text);
    }
}

/* Свой шеврон у <select> убран: раскрытый список рисует слой
   (см. .ui-select в ui-primitives.css), а сам select невидим. */
/* Textarea */
textarea.ui-input {
    resize: vertical;
    min-height: var(--ui-area-lg);
}

/* Radio and Checkbox groups */
.radio-group,
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-s-3);
}

.radio-option,
.checkbox-option {
    display: flex;
    align-items: center;
    gap: var(--ui-s-2);
    cursor: pointer;
    padding: var(--ui-s-2) var(--ui-s-3);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);
    transition: all var(--ui-dur-2) var(--ui-ease);
}

@media (hover: hover) {
    .radio-option:hover,
    .checkbox-option:hover {
        background: var(--ui-surface-2);
    }
}

.radio-option input,
.checkbox-option input {
    margin: 0;
}

.radio-option input:checked + span,
.checkbox-option input:checked + span {
    color: var(--ui-accent);
    font-weight: 500;
}

.radio-option:has(input:checked),
.checkbox-option:has(input:checked) {
    border-color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
}

/* Lead survey — single-select option list (one per row) */
.option-list {
    display: flex;
    flex-direction: column;
    gap: var(--ui-s-3);
}

.option-list .radio-option {
    width: 100%;
}

/* Lead survey — physique photo picker */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--ui-s-3);
}

.photo-option {
    position: relative;
    border: 2px solid var(--ui-line);
    border-radius: var(--ui-r-md);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--ui-dur-2) var(--ui-ease);
    background: var(--ui-surface-2);
}

@media (hover: hover) {
    .photo-option:hover {
        border-color: var(--ui-accent);
    }
}

.photo-option.selected {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 30%, transparent);
}

.photo-option img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.photo-option .photo-number {
    position: absolute;
    top: 6px;
    left: 6px;
    min-width: 22px;
    height: 22px;
    padding: 0 var(--ui-s-2);
    border-radius: var(--ui-r-md);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: var(--ui-t-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-option.selected .photo-number {
    background: var(--ui-accent);
}

.photo-hint {
    margin: 0 0 var(--ui-s-3);
    font-size: var(--ui-t-sm);
    color: var(--ui-text-3);
}

/* Lead survey — progress bar */
.survey-progress {
    margin-top: var(--ui-s-5);
}

/* Сама полоса — `.ui-progress` из слоя: своя копия не глохла в prefers-reduced-motion. */

.survey-progress-label {
    margin-top: var(--ui-s-2);
    text-align: center;
    font-size: var(--ui-t-xs);
    color: var(--ui-text-3);
}

/* Lead survey — loading screen */
.lead-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px var(--ui-s-4);
    gap: var(--ui-s-4);
}

.lead-loading-spinner {
    font-size: 40px;
    color: var(--ui-accent);
}

.lead-loading-title {
    font-size: var(--ui-t-lg);
    font-weight: 600;
}

.lead-loading-sub {
    font-size: var(--ui-t-md);
    color: var(--ui-text-3);
    min-height: 20px;
    animation: leadLoadingFade 3.5s ease-in-out infinite;
}

@keyframes leadLoadingFade {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

/* Lead survey — result screen */
.lead-result-content {
    white-space: pre-wrap;
    line-height: 1.6;
    font-size: var(--ui-t-md);
}

.lead-result-trainer {
    margin-top: var(--ui-s-5);
    padding: var(--ui-s-4);
    border-radius: var(--ui-r-md);
    background: var(--ui-surface-2);
    font-size: var(--ui-t-md);
    line-height: 1.5;
}

.lead-result-trainer a {
    color: var(--ui-accent);
    font-weight: 600;
    text-decoration: none;
}

/* Вид кнопок даёт слой; здесь только высота — формы входа крупнее. */
.auth-card .ui-btn {
    min-height: var(--ui-h-lg);
    font-size: var(--ui-t-lg);
}
.btn-text {
    display: inline;
}

.btn-spinner {
    display: inline;
}

/* Form buttons row */
.form-buttons {
    display: flex;
    gap: var(--ui-s-3);
    margin-top: var(--ui-s-2);
}

.form-buttons .ui-btn {
    flex: 1;
}

/* Вид — .ui-alert .ui-alert--sm из слоя, цвет состояния — .ui-alert--success /
   --danger; здесь остаётся только отбивка от поля. */
.trainer-info { margin-top: var(--ui-s-1); }

/* Заметка «у вас уже есть аккаунт в боте»: подложка из токена акцента,
   а не своя синяя пара — та в тёмной теме была почти чёрной. */
.auth-bot-notice {
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 28%, transparent);
    border-radius: var(--ui-r-sm);
    padding: var(--ui-s-3) var(--ui-s-4);
    margin-bottom: var(--ui-s-5);
    font-size: var(--ui-t-sm);
    line-height: 1.45;
    color: var(--ui-text);
}

.auth-bot-notice strong {
    display: block;
    margin-bottom: var(--ui-s-1);
}

/* Links */
.auth-links {
    text-align: center;
    margin-top: var(--ui-s-5);
}

.auth-links p {
    color: var(--ui-text-3);
    font-size: var(--ui-t-md);
    margin: 0;
}

.auth-link {
    color: var(--ui-accent);
    text-decoration: none;
    font-weight: 500;
}

@media (hover: hover) {
    .auth-link:hover {
        text-decoration: underline;
    }
}

/* Step progress */
.step-progress {
    display: flex;
    justify-content: center;
    gap: var(--ui-s-2);
    margin-top: var(--ui-s-5);
}

.step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ui-text-3);
    transition: all var(--ui-dur-3) var(--ui-ease);
}

.step-dot.active {
    background: var(--ui-accent);
    transform: scale(1.2);
}

/* Step title */
.step-title {
    font-size: var(--ui-t-lg);
    font-weight: 600;
    color: var(--ui-text);
    margin: 0 0 var(--ui-s-5) 0;
    padding-bottom: var(--ui-s-3);
    border-bottom: 1px solid var(--ui-line);
}

/* Form step */
.form-step {
    animation: fadeIn var(--ui-dur-3) var(--ui-ease);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* .ui-hidden и .ui-text--center живут в слое. Своя копия .ui-hidden с !important
   ломала показ элементов через el.style.display, которым пользуются скрипты входа. */

/* Responsive adjustments */
@media (max-width: 480px) {
    .auth-container {
        padding: var(--ui-s-4);
        padding-top: var(--ui-s-5);
    }

    .auth-card {
        padding: var(--ui-s-5) var(--ui-s-5);
    }

    .auth-title {
        font-size: var(--ui-t-xl);
    }
}

/* ── Страницы приглашения: шапка «от тренера», интро теста, шаги ───────── */

/* Шапка «от тренера»: фото + имя над заголовком (регистрация и лид-квиз) */
.auth-trainer-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-s-2);
    margin-bottom: var(--ui-s-3);
}

.auth-trainer-hero__photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ui-accent);
}

.auth-trainer-hero__photo--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-surface-2);
    color: var(--ui-text-3);
    font-size: var(--ui-t-2xl);
}

.auth-trainer-hero__name {
    font-size: var(--ui-t-md);
    font-weight: 700;
    color: var(--ui-text-3);
}

/* Интро-шаг: «что тебя ждёт» тремя пунктами (по хендоффу IntroPoint) */
.intro-points {
    display: flex;
    flex-direction: column;
    gap: var(--ui-s-3);
    margin: var(--ui-s-2) 0 var(--ui-s-5);
}

.intro-points .ip {
    display: flex;
    align-items: center;
    gap: var(--ui-s-3);
}

.intro-points .ip-ico {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: var(--ui-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-t-xl);
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
}

.intro-points .ip b {
    display: block;
    font-size: var(--ui-t-md);
    font-weight: 800;
}

.intro-points .ip small {
    display: block;
    font-size: var(--ui-t-xs);
    font-weight: 600;
    color: var(--ui-text-3);
    margin-top: 2px;
}

/* Пол — две плитки в ряд */
.sex-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ui-s-3);
}

.sex-tiles .radio-option {
    justify-content: center;
    padding: var(--ui-s-4) var(--ui-s-3);
    border-radius: var(--ui-r-md);
    font-weight: 700;
}

/* Кнопки шага: «Назад» компактная, основная — во всю ширину.
   wrap: на 360 «Зарегистрироваться» не делит строку с «Назад» — берёт свою. */
.form-buttons {
    gap: var(--ui-s-3);
    flex-wrap: wrap;
}

.form-buttons .ui-btn--secondary {
    flex: 0 0 auto;
    min-width: 96px;
}

.form-buttons .ui-btn--primary {
    flex: 1;
}

/* Кнопка под основной (второй способ продолжить, ссылка-кнопка) */
.ui-btn--block.btn-stacked {
    margin-top: var(--ui-s-3);
    text-decoration: none;
}

/* Подсказка-реакция под вопросом */
.step-hint {
    margin-top: var(--ui-s-3);
}

/* ── Экран «после регистрации» ─────────────────────────────────────────── */
.auth-success {
    text-align: center;
}

.auth-success__emoji {
    font-size: 44px;
    margin-bottom: var(--ui-s-2);
}

.auth-success__title {
    font-size: var(--ui-t-xl);
    font-weight: 800;
    margin: 0 0 var(--ui-s-2);
}

.auth-success__text {
    font-size: var(--ui-t-md);
    color: var(--ui-text-3);
    margin: 0 0 var(--ui-s-4);
}

.auth-success__note {
    font-size: var(--ui-t-xs);
    color: var(--ui-text-3);
    margin: var(--ui-s-4) 0 0;
}

/* Виджеты опросника (ob-widgets.js) по умолчанию белые — на светлой карточке auth
   их не видно. Класс dark-theme висит на <html>, не на body; селектор длиннее :root. */
html:not(.dark-theme) .form-step {
    --obw-text: #1f2329;
    --obw-muted: rgba(31, 35, 41, .55);
    --obw-tick: rgba(31, 35, 41, .20);
    --obw-tick-major: rgba(31, 35, 41, .45);
    --obw-green-bg: color-mix(in srgb, var(--ui-success) 10%, transparent);
    --obw-green-bd: color-mix(in srgb, var(--ui-success) 32%, transparent);
    --obw-amber-bg: rgba(214, 140, 0, .10);
    --obw-amber-bd: rgba(214, 140, 0, .34);
    --obw-neutral-bg: rgba(31, 35, 41, .04);
    --obw-neutral-bd: rgba(31, 35, 41, .10);
}

/* ── Служебные страницы входа: «добавить email и пароль», «привязать Telegram» ─ */

/* Экран ожидания данных: спиннер и подпись под ним */
.auth-loading {
    padding: var(--ui-s-6) var(--ui-s-4);
}

.auth-loading__spinner {
    color: var(--ui-accent);
}

.auth-loading__text {
    margin-top: var(--ui-s-5);
    color: var(--ui-text-3);
}

/* Панель «данные аккаунта»: заголовок + строки «подпись — значение» */
.auth-info-panel {
    background: var(--ui-surface-2);
    border-radius: var(--ui-r-md);
    padding: var(--ui-s-5);
    margin: var(--ui-s-5) 0;
}

/* Полоса слева отмечает главную панель экрана среди нескольких одинаковых */
.auth-info-panel--accent {
    border-left: 3px solid var(--ui-accent);
}

.auth-info-panel--success {
    background: color-mix(in srgb, var(--ui-success) 12%, transparent);
}

.auth-info-panel__title {
    margin: 0 0 var(--ui-s-3);
    font-size: var(--ui-t-md);
    font-weight: 700;
    color: var(--ui-text);
}

.auth-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ui-s-3);
    margin: var(--ui-s-2) 0;
}

/* Разделители — только там, где строки читаются как список */
.auth-info-panel--divided .auth-info-row {
    padding: var(--ui-s-2) 0;
    border-bottom: 1px solid var(--ui-line);
}

.auth-info-panel--divided .auth-info-row:last-child {
    border-bottom: none;
}

.auth-info-label {
    font-weight: 600;
    color: var(--ui-text-2);
}

.auth-info-value {
    color: var(--ui-text);
}

/* Моноширина для значений, которые пользователь будет вводить руками */
.auth-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Бейдж Telegram-аккаунта. Стоит после .auth-info-value: оба класса висят
   на одном узле, и цвет должен давать бейдж, а не строка значения. */
.auth-tg-badge { background: var(--ui-accent);
 color: var(--ui-on-accent); }

.auth-tg-icon {
    color: var(--ui-accent);
    margin-right: var(--ui-s-1);
}

/* Своя плашка-пояснение, а не .ui-alert: в flex-строке примитива заголовок
   и список встали бы в ряд. */
.auth-note {
    margin: var(--ui-s-5) 0;
    padding: var(--ui-s-4);
    border-radius: var(--ui-r-md);
    background: var(--ui-surface-2);
    color: var(--ui-text-2);
    font-size: var(--ui-t-sm);
    text-align: left;
}

.auth-note--warn {
    border-left: 3px solid var(--ui-warning);
    background: color-mix(in srgb, var(--ui-warning) 14%, transparent);
    color: var(--ui-warning);
}

.auth-note--success {
    background: color-mix(in srgb, var(--ui-success) 12%, transparent);
    color: var(--ui-success);
}

.auth-note__title {
    margin: 0 0 var(--ui-s-2);
    font-size: var(--ui-t-md);
    font-weight: 700;
    color: inherit;
}

.auth-note__text {
    margin: 0;
}

.auth-note__list {
    margin: 0;
    padding-left: var(--ui-s-5);
}

.auth-note__list li {
    margin: var(--ui-s-1) 0;
}

/* Готовые логин и пароль на подложке внутри плашки «успех» */
.auth-creds-box {
    margin: var(--ui-s-4) 0 0;
    padding: var(--ui-s-4);
    border-radius: var(--ui-r-md);
    /* именно surface-2: на карточке (surface) подложка того же тона не видна */
    background: var(--ui-surface-2);
    color: var(--ui-text);
}

.auth-creds-box p {
    margin: var(--ui-s-1) 0;
}

/* Требования к паролю под полями формы */
.auth-password-req {
    margin: var(--ui-s-4) 0;
    padding: var(--ui-s-4);
    border-radius: var(--ui-r-md);
    background: var(--ui-surface-2);
    font-size: var(--ui-t-xs);
    color: var(--ui-text-2);
}

.auth-password-req ul {
    margin: var(--ui-s-1) 0 0;
    padding-left: var(--ui-s-5);
}

.auth-password-req li {
    margin: var(--ui-s-1) 0;
}

/* Список выгод: галочка вместо маркера */
.auth-benefits {
    list-style: none;
    margin: var(--ui-s-4) 0 0;
    padding: 0;
}

.auth-benefits li {
    position: relative;
    padding: var(--ui-s-2) 0 var(--ui-s-2) var(--ui-s-6);
}

.auth-benefits li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--ui-success);
    font-weight: 700;
    font-size: var(--ui-t-lg);
}

/* Итоговый экран «успех / ошибка» */
.auth-state__icon {
    font-size: 64px;
    line-height: 1;
    margin-bottom: var(--ui-s-5);
}

.auth-state__title {
    margin: 0 0 var(--ui-s-4);
    font-size: var(--ui-t-xl);
    font-weight: 700;
}

.auth-state__title--success {
    color: var(--ui-success);
}

.auth-state__title--error {
    color: var(--ui-danger);
}

.auth-state__text {
    margin: 0 0 var(--ui-s-4);
    font-size: var(--ui-t-md);
    color: var(--ui-text-2);
}

.auth-state__details {
    margin: 0 0 var(--ui-s-6);
    font-size: var(--ui-t-sm);
    color: var(--ui-text-3);
}

/* Ряд кнопок итогового экрана */
.auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-s-3);
    justify-content: center;
}

/* Тот же ряд, но под формой — отбит от последнего блока формы */
.auth-actions--form {
    margin-top: var(--ui-s-5);
}


/* ── Состояния и модификаторы, приехавшие с новыми экранами мастера ── */
.form-buttons .btn {
    flex: 1;
}
.trainer-info.success {
    background: #f0fdf4;
    color: #16a34a;
}
.trainer-info.error {
    background: #fef2f2;
    color: #dc2626;
}
.dark-theme .trainer-info.success {
    background: #14532d;
}
.dark-theme .trainer-info.error {
    background: #3b1515;
}
.dark-theme .auth-bot-notice {
    background: #172554;
    border-color: #1e40af;
}