/* Стили экранов Вход / Регистрация / Восстановление пароля — цвета/шрифты/
 * размеры/отступы/скругления только из ../tokens.css (docs/frontend-rules.md,
 * правило 4). Хедер и кнопки — те же классы, что на лендинге (../css/landing.css),
 * подключён вместе с этим файлом, чтобы все экраны были в одном стиле.
 * Здесь — то, чего в landing.css нет: карточка формы, поля, ошибки поля, спиннер.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body-size-mobile);
  line-height: var(--text-body-line-height-mobile);
}

a { color: var(--color-button-bg); text-decoration: none; }
a:hover { color: var(--color-button-bg-hover); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ===== Хедер (упрощённый — как в образце Auth-экранов: логотип + «На главную») ===== */

.site-header { border-bottom: 1px solid var(--color-border); }
.header-row { height: 72px; display: flex; align-items: center; gap: var(--space-24); }
.logo { display: flex; align-items: center; gap: var(--space-8); color: var(--color-text); }
.logo-badge {
  width: 34px; height: 34px; border-radius: var(--radius-card);
  background: var(--color-button-bg); color: var(--color-button-text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: var(--font-weight-extrabold); font-size: var(--text-label-size);
}
.logo-word { font-family: var(--font-body); font-weight: var(--font-weight-semibold); font-size: var(--text-body-size); letter-spacing: .02em; }
.accent-text { color: var(--color-button-bg); }
.header-spacer { flex: 1; }
.header-back {
  display: flex; align-items: center; gap: var(--space-8); height: 44px; padding: 0 16px;
  border-radius: var(--radius-control); font-family: var(--font-body); font-weight: var(--font-weight-semibold);
  font-size: var(--text-label-size); color: var(--color-text-muted);
}
.header-back:hover { background: var(--color-surface); color: var(--color-text); }
.header-back svg { stroke: currentColor; }

/* ===== Кнопки (как на лендинге) ===== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px; border-radius: var(--radius-control);
  font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--text-label-size);
  line-height: 1; white-space: nowrap; border: none; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--color-button-bg); color: var(--color-button-text); }
/* color повторён здесь же (найдено 05.09.2026, К11): базовое правило `a:hover`
   выше (строка 20) специфичнее, чем `.btn-primary` само по себе (0,1,1 против
   0,1,0), и без этой строки перебивало бы текст кнопки-ссылки на цвет фона при
   наведении — тот же золотой, что и сам фон, буквы становились не видны. */
.btn-primary:hover:not(:disabled) { background: var(--color-button-bg-hover); color: var(--color-button-text); }
.btn-primary:active:not(:disabled) { background: var(--color-button-bg-active); }
.btn-primary:disabled { background: var(--color-button-bg-disabled); color: var(--color-button-text-disabled); cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--color-text); font-weight: var(--font-weight-semibold); border: 1px solid var(--color-border); }
.btn-secondary:hover { border-color: var(--color-button-bg-active); background: var(--color-surface); }
.btn-block { width: 100%; }

.btn-spinner {
  width: 18px; height: 18px; border-radius: var(--radius-pill);
  border: 2px solid color-mix(in srgb, var(--color-button-text) 30%, transparent);
  border-top-color: var(--color-button-text);
  animation: tb-spin .7s linear infinite; display: inline-block; margin-right: var(--space-8);
}
@keyframes tb-spin { to { transform: rotate(360deg); } }

/* ===== Каркас формы ===== */

.auth-main { max-width: 520px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) 20px clamp(48px, 6vw, 88px); }

.auth-head { text-align: center; margin-bottom: var(--space-24); }
.auth-head h1 {
  margin: 0 0 var(--space-12); font-family: var(--font-display); font-weight: var(--font-weight-medium);
  font-size: clamp(var(--text-h2-size-mobile), 5vw, var(--text-h1-size-mobile));
  line-height: 1.1;
}
.auth-head p { margin: 0; font-family: var(--font-body); font-size: var(--text-body-size-mobile); line-height: 1.6; color: var(--color-text-muted); }

.auth-card { border-radius: var(--radius-surface); background: var(--color-surface); border: 1px solid var(--color-border); padding: clamp(20px, 4vw, 32px); }

.auth-form { display: grid; gap: var(--space-16); }

/* ===== Поля ===== */

.field { display: grid; gap: var(--space-8); }
.field-label { font-family: var(--font-body); font-weight: var(--font-weight-semibold); font-size: var(--text-caption-size); color: var(--color-text-muted); }
.field-input {
  width: 100%; height: 48px; padding: 0 16px; border-radius: var(--radius-control);
  background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--text-body-size-mobile); outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.field-input::placeholder { color: var(--color-text-muted); }
.field-input:focus { border-color: var(--color-button-bg); }
.field-input:read-only { color: var(--color-text-muted); cursor: not-allowed; }
.field-input-error { border-color: var(--color-error) !important; background: color-mix(in srgb, var(--color-error) 6%, var(--color-bg)); }
.field-hint { font-family: var(--font-body); font-size: var(--text-caption-size-mobile); color: var(--color-text-muted); }
.field-error { font-family: var(--font-body); font-weight: var(--font-weight-medium); font-size: var(--text-caption-size-mobile); color: var(--color-error); }
.field-error[hidden] { display: none; }
.field-error-link { margin-left: 6px; }

/* ===== Баннер ошибки формы (правило 7 — ошибка показывается текстом) ===== */

.form-error-banner {
  padding: var(--space-16); border-radius: var(--radius-card); border: 1px solid var(--color-error);
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  font-family: var(--font-body); font-size: var(--text-caption-size); color: var(--color-text);
}
.form-error-banner[hidden] { display: none; }

.form-success-banner {
  padding: var(--space-16); border-radius: var(--radius-card); border: 1px solid var(--color-success);
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  font-family: var(--font-body); font-size: var(--text-caption-size); color: var(--color-text);
}
.form-success-banner[hidden] { display: none; }

/* ===== Чекбокс согласия (Регистрация) ===== */

.checkbox-row { display: flex; align-items: flex-start; gap: var(--space-12); cursor: pointer; }
.checkbox-row input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--color-button-bg); flex: none; }
.checkbox-row span { font-family: var(--font-body); font-size: var(--text-caption-size); line-height: 1.6; color: var(--color-text-muted); }

/* ===== Бейдж «взято из записи» (Регистрация, ?from=booking) ===== */

.field-badge {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body);
  font-weight: var(--font-weight-semibold); font-size: var(--text-caption-size-mobile); color: var(--color-success);
}
.field-badge[hidden] { display: none; }
.field-badge svg { stroke: var(--color-success); }

/* ===== Чек-лист правил пароля (Восстановление, шаг «новый пароль») ===== */

.password-rules { display: grid; gap: 6px; margin-top: var(--space-8); }
.password-rule { font-family: var(--font-body); font-weight: var(--font-weight-medium); font-size: var(--text-caption-size-mobile); color: var(--color-text-muted); }
.password-rule-ok { color: var(--color-success); }

/* ===== Ссылки под формой ===== */

/* ===== Вход через Яндекс — разделитель «или» между формой и кнопкой, тем же
 * приёмом, что divider-классы на других экранах (booking-flow.css,
 * booking-details.css): линия из --color-border, а не выдуманный новый стиль. */

.auth-divider { display: flex; align-items: center; gap: var(--space-12); margin: var(--space-16) 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.auth-divider span { font-family: var(--font-body); font-size: var(--text-caption-size-mobile); color: var(--color-text-muted); }

/* ===== Кнопка «Войти с Яндекс ID» — оформление по требованиям Яндекса, НЕ по
 * токенам проекта (docs/engineering-log.md, 10.09.2026; правила —
 * yandex.ru/dev/id/doc/ru/codes/buttons-design). Цвет фона/текста, толщина
 * обводки (её нет), текст, иконка и отступы между логотипом и текстом внутри
 * кнопки — зафиксированы Яндексом, менять нельзя ни в каком виде, поэтому ниже
 * буквальные HEX (#000000/#FFFFFF/#FC3F1D), а не var(--color-*). Разрешено
 * менять только тип/тему/скругление/размер — здесь это использовано, чтобы
 * кнопка не выбивалась из ряда остальных элементов формы:
 *   - высота 48px — та же, что у .btn на этой форме (не один из
 *     предустановленных Яндексом размеров сам по себе, а совпадение с уже
 *     принятым в проекте размером контролов);
 *   - border-radius — var(--radius-control), тот же, что у .btn-primary/
 *     .btn-secondary рядом, чтобы скругление не «спорило» само с собой в
 *     одной форме;
 *   - justify-content: center и width: 100% — тоже наше решение (иначе
 *     логотип с текстом жались бы к левому краю широкой кнопки, как в
 *     примере Яндекса, а все остальные кнопки на этой форме отцентрованы).
 * Ширина колонки формы, отступы до соседних элементов — как и раньше, из
 * токенов, тут ничего не менялось. */
.btn-yandex-official {
  display: flex; align-items: center; justify-content: center; width: 100%;
  height: 48px; padding: 11px 13px; border-radius: var(--radius-control); box-sizing: border-box;
  background: #000000; color: #FFFFFF; text-decoration: none; white-space: nowrap;
  font-family: "YS Text", "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1;
  transition: filter .15s ease;
}
.btn-yandex-official:hover { filter: brightness(1.12); color: #FFFFFF; }
.btn-yandex-official-logo {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='44' height='44' fill='%23FC3F1D'/%3E%3Cpath d='M24.7407 33.9778H29.0889V9.04443H22.7592C16.3929 9.04443 13.0538 12.303 13.0538 17.1176C13.0538 21.2731 15.2187 23.6163 19.0532 26.1609L21.3832 27.6987L18.3927 25.1907L12.4667 33.9778H17.1818L23.5115 24.5317L21.3098 23.0671C18.6496 21.2731 17.3469 19.8818 17.3469 16.8613C17.3469 14.2068 19.2183 12.4128 22.7776 12.4128H24.7223V33.9778H24.7407Z' fill='white'/%3E%3C/svg%3E");
  background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;
}
.btn-yandex-official-text { margin-left: 16px; font-size: 14px; font-weight: 500; color: #FFFFFF; }

.auth-links { margin-top: var(--space-16); display: grid; gap: var(--space-12); text-align: center; }
.auth-links-row { display: flex; justify-content: center; gap: var(--space-8); flex-wrap: wrap; font-family: var(--font-body); font-size: var(--text-caption-size); color: var(--color-text-muted); }
.auth-links-row a { font-weight: var(--font-weight-semibold); }
.auth-secondary-link { font-family: var(--font-body); font-weight: var(--font-weight-medium); font-size: var(--text-caption-size); color: var(--color-text-muted); }
.auth-footer { margin-top: var(--space-32); text-align: center; font-family: var(--font-body); font-size: var(--text-caption-size); color: var(--color-text-muted); }

/* ===== Успех (иконка в кружке — «Проверьте почту» / «Готово» и т.п.) ===== */

.status-icon {
  width: 52px; height: 52px; margin: 0 auto var(--space-16); border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
}
.status-icon-success { background: color-mix(in srgb, var(--color-success) 16%, transparent); }
.status-icon-success svg { stroke: var(--color-success); }
.status-icon-error { background: color-mix(in srgb, var(--color-error) 14%, transparent); }
.status-icon-error svg { stroke: var(--color-error); }
.status-icon-accent { background: color-mix(in srgb, var(--color-button-bg) 16%, transparent); }
.status-icon-accent svg { stroke: var(--color-button-bg); }

.status-block { text-align: center; display: grid; gap: var(--space-16); }
.status-title { font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--text-h3-size-mobile); }
.status-text { font-family: var(--font-body); font-size: var(--text-body-size-mobile); line-height: 1.6; color: var(--color-text-muted); }

[hidden] { display: none !important; }