/* Стили экранов Вход / Регистрация / Восстановление пароля — цвета/шрифты/
 * размеры/отступы/скругления только из ../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); }

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

/* ===== Вход через Яндекс (кнопка-заглушка рядом с обычной формой, docs/ui-map.md) —
 * не «карточка Яндекса», а тот же .btn-secondary, что уже есть в форме, плюс
 * разделитель «или» между формой и кнопкой, тем же приёмом, что 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); }

.btn-yandex { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); }
.btn-yandex-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--radius-pill);
  background: var(--color-button-bg); color: var(--color-button-text);
  font-family: var(--font-body); font-weight: var(--font-weight-extrabold); font-size: 12px; flex: none;
}

.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; }