/* Билет - форма записи. Макет: YjkCw (1440) и Z5I7Y1 (390).

   Вертикальный ритм секции (116/52) и сам .wrap (1440, паддинг 56/20)
   уже дают верную геометрию - здесь только своё: свечение за билетом,
   сам билет из трёх частей (форма / перфорация-css / корешок) и поля
   формы.

   Два цвета в макете не входят в палитру Хэллоуина из tokens.css: фон
   поля ввода #140E2B и фон корешка #241B45 (плейсхолдер поля #5E5684 -
   туда же). Для них нет токена ни здесь, ни в общих файлах - это раздел
   "что осталось расхождением" в отчёте, не моя правка. */

.hw-ticket {
  position: relative;
  overflow: hidden;
}

.hw-ticket__glow {
  position: absolute;
  left: 120px;
  top: -300px;
  width: 1200px;
  height: 760px;
  /* 33 в альфе макета ~= 20% - цвет токеном, альфа через color-mix, как
     велит комментарий в начале tokens.css. */
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 100%);
  pointer-events: none;
}

.hw-ticket__wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ─── Заголовок блока ────────────────────────────────────────────── */

.hw-ticket__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 860px;
  text-align: center;
}

.hw-ticket__title { text-align: center; }

@media (max-width: 860px) {
}

/* ─── Билет: карточка из трёх частей ─────────────────────────────── */

.hw-ticket__card {
  position: relative;
  display: flex;
  width: 1080px;
  max-width: 100%;
  margin-inline: auto;
  background: var(--card);
  /* Обводка в дампе strokeAlignment: inner - обычный border добавлял
     2px к высоте карточки (она без явного height, высота считается по
     содержимому). box-shadow внутрь не занимает места в потоке. */
  box-shadow: inset 0 0 0 1px var(--line-h);
  border-radius: var(--r-card-lg);
  overflow: hidden;
}

.hw-ticket__form {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
}

.hw-ticket__hp {
  /* Приём из zform.tpl/form.css: поле снято с потока, чтобы не плодить
     лишний gap в колонке формы. */
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hw-ticket__row {
  display: flex;
  gap: 14px;
}

.hw-ticket__row > .hw-ticket__field {
  flex: 1 1 0;
  min-width: 0;
}

/* ─── Поля формы ──────────────────────────────────────────────────── */

.hw-ticket__field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* .zfield у поля "Имя ребёнка"/"Телефон" - только крючок для form.js
   (is-bad через .closest('.zfield, .zform__consent')), общий вид поля
   form.css сюда не допускаем - перебиваем его своим. */
.hw-ticket .zfield {
  display: flex;
  flex-direction: column;
  /* form.css даёт этому классу свои align-items:center/justify-content:
     space-between (для горизонтальной раскладки поля на своей странице) -
     в колонку их не просили, оба свойства нужно сбросить явно, иначе
     подпись и инпут остаются прижаты к центру вместо левого края. */
  align-items: stretch;
  justify-content: flex-start;
  gap: 9px;
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  position: static;
  flex: 1 1 0;
  min-width: 0;
}

.hw-ticket__field-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  /* В макете у подписи нет своего lineHeight - значит натуральный интервал
     шрифта. Для Inter это x1.21 (конвенция проекта, см. form.css/footer.css).
     11 x 1.21 = 13.31 - пишем округлённым целым, как округляет pen, а не
     десятичным множителем, который Chrome не округляет. */
  line-height: 13px;   /* 11 x 1.21 */
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
}

.hw-ticket__field-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* Высота поля - из дампа ("Поле" 317x48), а не из догадки про предел
     Chrome: box-sizing: border-box плюс явный height дают ровно нужную
     высоту независимо от того, как браузер считает line-box у <input>. */
  height: 48px;
  margin: 0;
  /* Обводка "Поле" в дампе strokeAlignment: inner - обычный border всегда
     добавляет свою толщину к итоговой высоте, border-box здесь не
     помогает: он меняет смысл height/width, но height у поля именно
     border-box (строка выше), значит без этой замены пришлось бы
     компенсировать 2px border чем-то ещё, а не оставить формулу чистой. */
  box-shadow: inset 0 0 0 1px var(--line-h);
  border: 0;
  border-radius: var(--r-field);
  background: #140E2B;
  padding: 15px 17px;
  font-family: var(--font-body);
  font-size: 15px;
  /* У текста поля ("P") в дампе нет своего lineHeight - натуральный
     интервал Inter x1.21: 15 x 1.21 = 18.15, округляем как pen. */
  line-height: 18px;   /* 15 x 1.21 */
  color: var(--text);
}

.hw-ticket__field-input::placeholder {
  /* Плейсхолдер из макета - свой приглушённый оттенок, в токенах праздника
     такого нет (см. комментарий в начале файла). */
  color: #5E5684;
  opacity: 1;
}

.hw-ticket__field-input--area {
  resize: vertical;
}

.hw-ticket__field-error {
  display: none;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--magenta-text);
}

.hw-ticket .zfield.is-bad .hw-ticket__field-input { box-shadow: 0 0 0 1px var(--magenta) inset; }
.hw-ticket .zfield.is-bad .hw-ticket__field-error { display: block; }

/* ─── Согласие ────────────────────────────────────────────────────── */

.hw-ticket .zform__consent {
  gap: 11px;
  padding: 4px 0;
}

.hw-ticket .zform__box-face {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #140E2B;
  /* Обводка "Чекбокс" в дампе тоже strokeAlignment: inner - здесь border
     не портит размер (ширина/высота заданы явно), но для единообразия
     с остальными полями билета и той же инструкции - box-shadow. */
  box-shadow: inset 0 0 0 1px var(--line-h);
  border: 0;
}

.hw-ticket .zform__box:checked + .zform__box-face {
  background: var(--magenta);
  box-shadow: inset 0 0 0 1px var(--magenta);
}

.hw-ticket .zform__box-face svg {
  width: 11px;
  height: 11px;
}

.hw-ticket__consent-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 21px;   /* 13 x 1.6, lineHeight в дампе */
  color: var(--text-3);
}

.hw-ticket__consent-text a {
  /* В макете ссылка не подчёркнута и того же цвета, что остальной текст -
     отличить её можно только по курсору/фокусу. */
  color: inherit;
  text-decoration: none;
}

.hw-ticket__consent-text a:hover,
.hw-ticket__consent-text a:focus-visible { text-decoration: underline; }

.hw-ticket__consent-error {
  display: none;
  margin-top: -5px;
  margin-bottom: 1px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--magenta-text);
}

.hw-ticket .zform__consent.is-bad .hw-ticket__box-face { box-shadow: 0 0 0 1px var(--magenta) inset; }
.hw-ticket .zform__consent.is-bad + .hw-ticket__consent-error { display: block; }

/* ─── Форма ожидания (межсезонье) ─────────────────────────────────── */

.hw-ticket__wait-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hw-ticket__wait-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 21px;
  color: var(--text);
}

.hw-ticket__wait-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}

/* ─── Кнопка отправки ─────────────────────────────────────────────── */

.hw-ticket__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: var(--magenta);
  padding: 19px 32px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  /* У надписи кнопки в дампе нет своего lineHeight - натуральный интервал
     Inter x1.21. Было line-height:1 (придуманное, без основания в дампе) -
     кнопка выходила на 3px ниже макета (54px вместо 57). */
  line-height: 19px;   /* 16 x 1.21 */
  color: #FFFFFF;
  cursor: pointer;
}

.hw-ticket__submit:hover { filter: brightness(1.07); }
.hw-ticket__submit:disabled { opacity: .6; cursor: not-allowed; }

/* Строка ответа формы: сюда попадает и "заявка отправлена", и причина,
   по которой не ушла. В макете её нет - макет рисует только пустую форму,
   а ответ человеку всё равно нужен. Пустая строка не занимает места,
   поэтому на сверку с макетом она не влияет. */
.hw-ticket__msg {
  display: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--magenta-text);
}

.hw-ticket__msg:not(:empty) { display: block; }

/* ─── Перфорация: css, без двадцати пяти кружков в разметке ──────── */

.hw-ticket__perf {
  flex: none;
  align-self: stretch;
  width: 22px;
  background-image: radial-gradient(circle at 11px 2.5px, var(--bg-deep) 2.5px, transparent 2.6px);
  background-repeat: repeat-y;
  background-size: 22px 14px;   /* дырка 5px + промежуток 9px */
  background-position: 0 26px;
}

/* ─── Корешок ─────────────────────────────────────────────────────── */

.hw-ticket__stub {
  flex: none;
  width: 330px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 40px 32px;
  background: #241B45;
}

.hw-ticket__stub-kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  /* Натуральный интервал Inter без явного lineHeight в макете - x1.21,
     см. комментарий у .hw-ticket__field-label. 10 x 1.21 = 12.1 -> 12. */
  line-height: 12px;   /* 10 x 1.21 */
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent-text);
}

.hw-ticket__stub-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hw-ticket__stub-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  line-height: 12px;   /* 10 x 1.21, та же конвенция, что у kicker */
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-3);
}

.hw-ticket__stub-value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;   /* 15 x 1.45, lineHeight в дампе (1.45) */
  color: var(--text);
  /* Адрес приходит из общего поля kSet (две строки: улица и дом на
     одной, ТЦ на другой) - перевод строки в содержимом должен стать
     переводом строки на экране, как везде, где используется этот kSet.

     В самом дампе демо-значение адреса - только "ТЦ «Метромолл», офис
     415" (одна строка), а в реальном kSet - полный адрес с улицей, то
     есть две. Поэтому строка "АДРЕС" в корешке у настоящего билета
     ровно на одну строку (22px) выше, чем в макете - это разница в
     контенте демо/прода, а не ошибка вёрстки, и чинить её нечем: kSet -
     общее поле, не моё. См. отчёт по qa-задаче. */
  white-space: pre-line;
}

.hw-ticket__stub-line {
  height: 1px;
  background: var(--line-h);
}

.hw-ticket__stub-includes {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 22px;   /* 13 x 1.7, lineHeight в дампе (1.7) */
  color: var(--text-2);
}

/* ─── Мобильная версия (390) ──────────────────────────────────────── */

@media (max-width: 860px) {
  .hw-ticket__card {
    width: 100%;
    flex-direction: column;
    gap: 16px;
  }

  .hw-ticket__row {
    flex-direction: column;
    gap: 12px;
  }

  .hw-ticket__field-input {
    font-size: 14px;
    /* 14 x 1.21 = 16.94 -> 17. Высота поля на телефоне из дампа (47px =
       15 паддинга + 17 строки + 15 паддинга), не десктопные 48. */
    line-height: 17px;   /* 14 x 1.21 */
    height: 47px;
  }

  .hw-ticket__field-input--area {
    /* textarea не умеет сама расти под текст (в отличие от auto-layout
       рамки в макете) - при узкой колонке плейсхолдер "Записываем двоих..."
       переносится на три строки. Высота - по той же формуле, что у
       однострочных полей: 15 паддинг + 3 строки по 17px + 15 паддинг = 81,
       это и есть высота "Поле" из дампа на телефоне, а не число с экрана. */
    line-height: 17px;   /* 14 x 1.21 */
    height: auto;
    min-height: 81px;
  }

  .hw-ticket__consent-text {
    font-size: 12px;
    line-height: 19px;   /* 12 x 1.6 = 19.2 -> 19 */
  }

  /* Кнопка на телефоне: в макете рамка 270 при padding 32 по бокам и
     надписи 212 - сумма 276, то есть сам макет себе противоречит, надпись
     в свои же поля не влезает. Видимая правда макета - рамка 270x56 и
     надпись в одну строку по центру; поля - величина производная, её и
     уменьшаем до 26 (270 - 218 надписи в браузере, пополам). Без этого
     браузер честно переносит надпись на вторую строку и карточка растёт
     на 18px. */
  .hw-ticket__submit {
    padding-inline: 26px;
    white-space: nowrap;
    font-size: 15px;
    line-height: 18px;   /* 15 x 1.21 = 18.15 -> 18 */
  }

  .hw-ticket__perf {
    width: 100%;
    height: 22px;
    align-self: auto;
    background-image: radial-gradient(circle at 2.5px 11px, var(--bg-deep) 2.5px, transparent 2.6px);
    background-repeat: repeat-x;
    background-size: 14px 22px;
    background-position: 26px 0;
  }

  .hw-ticket__stub {
    width: 100%;
  }

  .hw-ticket__stub-value {
    font-size: 14px;
    line-height: 20px;   /* 14 x 1.45 = 20.3 -> 20 */
  }

  .hw-ticket__stub-includes {
    font-size: 12px;
    line-height: 20px;   /* 12 x 1.7 = 20.4 -> 20 */
  }
}