/**
 * youit-form.css — вёрстка своей формы записи ([youit_form], render.php).
 *
 * Переменные — слой дизайн-системы --yi-* (docs/design-system/tokens.json → yi-tokens.css),
 * НЕ --bricks-color-*: то, что реально генерирует Bricks в палитре цветов, — авто-хэши вида
 * --bricks-color-iheijm (проверено на живой странице курса), нечитаемые и потенциально
 * нестабильные при правке палитры руками в билдере. Слой --yi-* как раз и существует, чтобы
 * у ручного CSS были нормальные имена — тот же слой уже использует соседний компонент
 * youit-listing.css, здесь та же конвенция. Каждая переменная — с инлайн-фолбэком (реальным
 * hex из tokens.json), поэтому вёрстка не разваливается, даже если yi-tokens.css почему-то не
 * подключился раньше.
 *
 * Контролы (поля, кнопка, ссылка, звёздочка «обязательно», текст ошибки) — примитивы
 * yi-primitives.css (.yi-input/.yi-select/.yi-btn/.yi-link/.yi-field__*), без них форма
 * не грузится (youit_forms_register_assets() объявляет их зависимостью). Здесь — только
 * то, чего в примитивах нет: карточка формы, переключение шагов, чекбокс согласия,
 * honeypot, экран «спасибо».
 */

.yform {
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  background: var(--yi-color-white, #ffffff);
  border: 1px solid var(--yi-color-line, #e5e5ea);
  border-radius: var(--yi-radius-lg, 24px);
  padding: var(--yi-space-4, 32px);
  font-family: var(--yi-font-body, 'Nunito Sans', sans-serif);
  color: var(--yi-color-black, #0c0c0c);
}
.yform, .yform *, .yform *::before, .yform *::after { box-sizing: border-box; }

/* Переключение шагов одним атрибутом на корне — youit-form.js трогает только его. */
.yform__step { display: none; }
.yform[data-yform-active-step="1"] .yform__step--1,
.yform[data-yform-active-step="2"] .yform__step--2,
.yform[data-yform-active-step="done"] .yform__step--done {
  display: block;
}

.yform__title {
  font-family: var(--yi-font-heading, Nunito, sans-serif);
  font-weight: 800;
  font-size: 24px;
  line-height: 32px;
  margin: 0 0 var(--yi-space-3, 24px);
  color: var(--yi-color-black, #0c0c0c);
}

.yform__lede {
  font-size: 14px;
  line-height: 20px;
  color: var(--yi-color-gray, #8e8e93);
  margin: -12px 0 var(--yi-space-3, 24px);
}

.yform-field { margin-bottom: var(--yi-space-2, 16px); }
.yform-field:last-of-type { margin-bottom: 0; }
.yform-field__label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 6px;
  color: var(--yi-color-black, #0c0c0c);
}

/* ---------- Чекбокс согласия ---------- */
.yform-field--checkbox { margin-top: var(--yi-space-3, 24px); }
.yform-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 18px;
  color: var(--yi-color-gray, #8e8e93);
  cursor: pointer;
}
.yform-checkbox input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--yi-color-green, #00b259);
  cursor: pointer;
}
.yform-checkbox input:focus-visible {
  outline: 2px solid var(--yi-color-cyan, #39c2d7);
  outline-offset: 2px;
}
.yform-checkbox a { color: var(--yi-color-black, #0c0c0c); }

/* ---------- Honeypot ----------
   position:absolute;left:-9999px, НЕ display:none — часть ботов игнорирует скрытые через
   display:none поля именно потому, что это самая известная защита; смещение за пределы
   экрана ловит больше (докблок брифа задачи). */
.yform-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.yform__actions { margin-top: var(--yi-space-3, 24px); }

.yform__form-error {
  color: var(--yi-color-pink, #ee2e62);
  font-size: 13px;
  line-height: 18px;
  margin: 12px 0 0;
}
.yform__form-error:empty { display: none; margin: 0; }

.yform__step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yi-space-2, 16px);
  margin-top: var(--yi-space-3, 24px);
  flex-wrap: wrap;
}
.yform__skip {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--yi-color-gray, #8e8e93);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  text-decoration: underline;
  cursor: pointer;
}
.yform__skip:hover { color: var(--yi-color-black, #0c0c0c); }
.yform__skip:focus-visible {
  outline: 2px solid var(--yi-color-cyan, #39c2d7);
  outline-offset: 2px;
}

/* ---------- Экран «спасибо» ---------- */
.yform__done { text-align: center; padding: var(--yi-space-2, 16px) 0; }
.yform__done-icon { display: block; margin: 0 auto var(--yi-space-2, 16px); }
.yform__done-title {
  font-family: var(--yi-font-heading, Nunito, sans-serif);
  font-weight: 800;
  font-size: 24px;
  line-height: 32px;
  margin: 0 0 8px;
  color: var(--yi-color-black, #0c0c0c);
}
.yform__done-text {
  font-size: 16px;
  line-height: 24px;
  color: var(--yi-color-gray, #8e8e93);
  margin: 0;
}

@media (max-width: 478px) {
  .yform { padding: var(--yi-space-3, 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .yform-checkbox input { transition: none; }
}