/* Окно записи на пробное занятие.
   Вёрстка 1 в 1 по дампам prototype.pen:
     modal.json (uhMlt, десктоп 1440) - диалог формы N455YN 800 шириной
     Uh7s9.json (мобильная 390)       - шторка KtNco
     NEiLN.json (десктоп)             - диалог "заявка отправлена" k6uHx 560 шириной
     x4vzic.json (десктоп)            - диалог "заявка не ушла" J55sn 560 шириной
   Для мобильного "заявка отправлена" отдельного дампа нет - паддинги подобраны
   по итоговому эталону (390x349) на тех же числах, что у мобильной формы.

   Line-height там, где макет не задаёт множитель явно, считаем по метрикам
   шрифта (Inter x1.21, Manrope x1.36) и округляем как обычно - тот же приём,
   что уже применён в base.css и strip.css. */

/* ─── Окно: подложка, кнопка закрытия, скролл ─────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;   /* выше .mobile-menu (80) и .cookie (70) */
}

/* display вешаем только на открытое состояние: js снимает атрибут hidden
   и добавляет is-open одновременно, поэтому авторский display здесь не
   конфликтует с нативным [hidden] у закрытого окна.
   Плавность - тем же приёмом, что у шторки меню и cookie-баннера
   (allow-discrete и @starting-style, см. комментарий у .mmenu в
   mobile-menu.css): затемнение проявляется, карточка подъезжает снизу. */
.modal {
  opacity: 0;
  transition: opacity .2s ease, display .2s allow-discrete;
}

.modal.is-open {
  display: flex;
  opacity: 1;
}

@starting-style {
  .modal.is-open { opacity: 0; }
}

.modal__dialog {
  transform: translateY(18px);
  transition: transform .26s cubic-bezier(.2, .7, .3, 1);
}

.modal.is-open .modal__dialog { transform: none; }

@starting-style {
  .modal.is-open .modal__dialog { transform: translateY(18px); }
}

.modal__back {
  position: absolute;
  inset: 0;
  background: #16233DE0;
}

.modal__close {
  position: fixed;
  top: 40px;
  right: 48px;   /* 1440 - 1340 - 52 из дампа */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid #FFFFFF4D;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.modal__close .ico {
  width: 22px;
  height: 22px;
  color: var(--white);
}

.modal__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Ручка шторки - пустой span, рисуем сам span полоской.
   На десктопе не нужна - вместо неё модалка закрывается крестиком. */
.modal__handle {
  display: none;
}

.modal__dialog {
  background: var(--white);
  border-radius: 10px;
}

/* У панелей, которые js прячет атрибутом hidden, он же оставляет класс
   modal__dialog--form/--done/--fail. Без этого правила display:flex ниже
   перебивает нативный [hidden], и при переключении панелей старая остаётся
   видимой под новой. */
.modal__dialog[hidden] {
  display: none !important;
}

.modal__dialog--form {
  width: 800px;
  display: flex;
  flex-direction: column;
  padding: 40px;
  margin-block: 48px;
}

/* Сама форма - следующий уровень вертикального стека (шапка, поля,
   согласие, низ, линия, мессенджеры), ровно тот же отступ 22px. */
.zform {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.modal__dialog--done,
.modal__dialog--fail {
  width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 48px;
  margin-block: 48px;
}

/* ─── Шапка формы ──────────────────────────────────────────────────── */

.zform__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.zform__kicker {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;   /* 11 x 1.21 */
  letter-spacing: 2.4px;
  color: var(--magenta-text);
}

.zform__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 34px;
  line-height: 39px;   /* 34 x 1.14 из дампа */
  letter-spacing: -1px;
  color: var(--ink);
}

.zform__lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--muted);
}

.zform__lead--d {
  font-size: 16px;
  line-height: 27px;   /* 16 x 1.7 из дампа */
}

.zform__lead--m {
  display: none;
}

/* ─── Поля ─────────────────────────────────────────────────────────── */

.zform__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.zform__row {
  display: flex;
  gap: 12px;
}

.zfield {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  background: var(--white);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px #16233D1A;
  padding: 17px 20px;
}

.zfield__label {
  /* тот же приём, что .visually-hidden в base.css: в разметке класса нет,
     поэтому дублируем свойства прямо здесь */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.zfield__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 18px;   /* 15 x 1.21 */
  color: var(--ink);
}

/* Поле ввода - это белая коробка с серой рамкой, а сам input внутри неё
   без рамки и с отступом. Общая рамка фокуса из base.css рисовалась
   вокруг самого input, то есть розовым прямоугольником ВНУТРИ коробки,
   рядом с её серой рамкой - две рамки одна в другой. Поэтому здесь
   рамку фокуса у input снимаем, а подсвечиваем саму коробку: её
   собственная рамка становится розовой. Видно так же хорошо, а лишней
   линии нет. */
.zfield__input:focus-visible {
  outline: none;
}

.zfield:has(.zfield__input:focus-visible) {
  box-shadow: inset 0 0 0 1.5px var(--magenta);
}

.zfield__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.zfield__error {
  display: none;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: var(--small);
  line-height: var(--small-lh);
  color: var(--magenta-text);
}

.zfield.is-bad .zfield__error {
  display: block;
}

.zform__consent.is-bad + .zform__error--consent {
  display: block;
}

/* ─── Группы чипов ─────────────────────────────────────────────────── */

.zform__group {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Fieldset/legend в хроме не берёт расстояние ни от padding-top родителя,
   ни от flex gap соседней пары "legend-chips" - сам <legend> в раскладке
   fieldset'а особый: он не двигается от padding-top контейнера (тот уходит
   не перед legend, а после него), и flex gap между legend и следующим
   элементом не применяется совсем (проверено - 0px без этого правила).
   Поэтому верхний отступ блока и отступ после подписи задаём margin-ами на
   обычных элементах, а не на fieldset/legend - тогда оба куска идут через
   обычный блочный margin, который эту особенность не задевает.
   Отступ сверху блока - из дампа (6 у "Направления", 14 у "Формата" на
   1440, разные блоки с разным верхним отступом). */
.zform__group--napr {
  margin-top: 6px;
}

.zform__group--format {
  margin-top: 14px;
}

/* Ряды кнопок приходят из контента (kChips делит поле по пустой строке
   на .zform__chips-row) - вёрстка больше не привязана к числу и порядку
   кнопок, ряды просто рисуются так, как их отдал контент. .zform__chips -
   колонка рядов с отступом между ними из дампа (12 у "Направления" и
   "Формата" на 1440), .zform__chips-row - сама строка кнопок с отступом
   между кнопками из дампа (10). Отступ от подписи до первого ряда (те же
   12) задан margin-top, а не gap фиделдсета - см. комментарий выше про
   legend. */
.zform__chips {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.zform__chips-row {
  display: flex;
  gap: 10px;
}

.zform__legend,
.zform__legend-d,
.zform__legend-m {
  margin: 0;
  padding: 0;
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;   /* 11 x 1.21 */
  letter-spacing: 2px;
  color: var(--muted);
}

.zform__legend-m {
  display: none;
}

.chip {
  position: relative;
  min-width: 0;
}

.chip__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.chip__face {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  padding: 11px 16px;
  box-shadow: inset 0 0 0 1.5px #16233D26;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;   /* 14 x 1.21 */
  color: var(--ink);
}

.chip__input:checked + .chip__face {
  background: var(--ink);
  box-shadow: none;
  color: var(--white);
  font-weight: 700;
}

.chip__input:focus-visible + .chip__face {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

.chip__text--m {
  display: none;
}

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

.zform__consent {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.zform__box {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.zform__box-face {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px #16233D26;
}

.zform__box:checked + .zform__box-face {
  background: var(--magenta);
  box-shadow: none;
}

.zform__box:focus-visible + .zform__box-face {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

.zform__box-face svg {
  width: 13px;
  height: 13px;
  color: var(--white);
  visibility: hidden;
}

.zform__box:checked + .zform__box-face svg {
  visibility: visible;
}

.zform__consent-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;   /* 13 x 1.5 из дампа; снимает лишний интервал обёртки */
  color: var(--muted);
}

.zform__consent-d {
  font-size: 13px;
  line-height: 20px;   /* 13 x 1.5 из дампа */
}

.zform__consent-d a {
  color: inherit;
}

.zform__consent-m {
  display: none;
}

/* ─── Низ формы ────────────────────────────────────────────────────── */

.zform__bottom {
  display: flex;
  align-items: center;
  gap: 20px;
}

.zform__submit {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;   /* 15 x 1.21 */
  padding: 17px 34px;
}

.zform__guarantee {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;   /* 13 x 1.5 из дампа */
  color: var(--ink);
}

.zform__guarantee .ico {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--magenta-text);
}

.zform__fail {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--magenta-text);
}

.zform__line {
  border: 0;
  margin: 0;
  width: 100%;
  height: 1px;
  background: #16233D14;
}

/* ─── Ловушка для роботов ──────────────────────────────────────────── */

.zform__hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── Строка мессенджеров (форма, "отправлено", "не ушло") ─────────── */

.soc-line {
  display: flex;
  align-items: center;
  gap: 18px;
}

.soc-line__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;   /* 14 x 1.21 */
  color: var(--muted);
}

.soc-line__item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.soc-line__item .ico {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--magenta-text);
}

.soc-line__item span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;   /* 14 x 1.21 */
  color: var(--ink);
}

/* ─── "Отправлено" / "не ушло" - общие элементы ────────────────────── */

.modal__mark {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__mark--done {
  background: var(--sun);
}

.modal__mark--done .ico {
  width: 32px;
  height: 32px;
  color: var(--ink);
}

.modal__mark--fail {
  background: #FFE7F1;
}

.modal__mark--fail .ico {
  width: 32px;
  height: 32px;
  color: var(--magenta-text);
}

.modal__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 32px;
  line-height: 36px;   /* 32 x 1.14 из дампа */
  letter-spacing: -1px;
  color: var(--ink);
  text-align: center;
}

.modal__text {
  margin: 0;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 27px;   /* 16 x 1.7 из дампа */
  color: var(--muted);
  text-align: center;
}

/* Короткий мобильный вариант текста "отправлено" - та же пара -d/-m, что
   и .zform__lead--d/--m. Модификатор используется только там, где в
   разметке реально есть оба варианта (сейчас - только modal.tpl, панель
   "done"); у "fail" своего -m нет, там остаётся один .modal__text на все
   ширины. */
.modal__text--m {
  display: none;
}

.modal__phone {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 26px;
  line-height: 36px;   /* 26 x 1.36 = 35.36. В дампе нет точного межстрочного
                           интервала для этого текста (только для шрифта
                           Manrope по конвенции), поэтому 35 и 36 - оба в
                           пределах погрешности конвенции. Берём 36: при 35
                           высота диалога "не ушло" получается на 1px меньше
                           эталона (482 вместо 483), при 36 - совпадает
                           ровно. .modal__phone используется только в этом
                           диалоге, на "отправлено" (без номера телефона)
                           это не влияет. */
  letter-spacing: -0.6px;
  color: var(--ink);
}

.modal__row {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.modal__btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;   /* 15 x 1.21 */
  padding: 17px 34px;
}

.btn--line.modal__btn {
  padding: 17px 30px;
}

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

@media (max-width: 860px) {
  .modal__close {
    display: none;
  }

  .modal__handle {
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: #16233D26;
    margin-inline: auto;
  }

  .modal__dialog--form,
  .modal__dialog--done,
  .modal__dialog--fail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    margin: 0;
  }

  .modal__dialog--form {
    padding: 16px 20px 24px 20px;
    gap: 18px;
  }

  .modal__dialog--done,
  .modal__dialog--fail {
    padding: 16px 20px 24px 20px;
    gap: 18px;
  }


  /* Мобильный "Заявка отправлена" (G7F6j) выглядит заметно иначе
     десктопной версии - не по центру, а по левому краю, и со значком/
     заголовком/текстом заметно мельче. Для этого экрана нет JSON-дампа
     (только скриншот из прототипа), поэтому значения подобраны по
     эталонному изображению, а не выгружены из дампа. Правим только
     .modal__dialog--done - для "не ушло" мобильного макета нет ни дампа,
     ни эталонного скриншота в задаче, трогать её вслепую нельзя. */
  .modal__dialog--done {
    align-items: flex-start;
    text-align: left;
  }

  .modal__dialog--done .modal__mark {
    width: 60px;
    height: 60px;
  }

  .modal__dialog--done .modal__mark .ico {
    width: 24px;
    height: 24px;
  }

  .modal__dialog--done .modal__title {
    text-align: left;
    font-size: 26px;
    line-height: 25px;
    letter-spacing: -0.8px;
  }

  .modal__dialog--done .modal__text {
    text-align: left;
  }

  .modal__text--d {
    display: none;
  }

  .modal__text--m {
    display: block;
    font-size: 14px;
    line-height: 23px;   /* подобрано по эталонному скриншоту, дампа нет */
    margin-top: 1px;
    margin-bottom: -4px;   /* без дампа высота блока от строк 23px даёт
                               итог на 3px больше эталонного скриншота (349) */
  }

  .modal__dialog--done .soc-line {
    margin-top: 2px;
    margin-bottom: -2px;   /* без дампа - подобрано по эталонному скриншоту */
  }

  .modal__dialog--done .modal__btn {
    width: 100%;
    padding: 15px 24px;
  }

  .zform {
    gap: 18px;
  }

  .zform__head {
    gap: 10px;
  }

  .zform__kicker {
    font-size: 10px;
    line-height: 12px;   /* 10 x 1.21 */
    letter-spacing: 2px;
  }

  .zform__title {
    font-size: 25px;
    line-height: 29px;   /* 25 x 1.15 из дампа */
    letter-spacing: -0.8px;
  }

  .zform__lead--d {
    display: none;
  }

  .zform__lead--m {
    display: block;
    font-size: 13px;
    line-height: 21px;   /* 13 x 1.6 из дампа */
  }

  .zform__fields {
    gap: 10px;
  }

  /* В мобильном дампе "Направление" и "Формат" - не вложенные в "Поля"
     элементы, а отдельные блоки на том же уровне, что и "Поля", с тем же
     отступом 18px, что и между остальными блоками шторки. В разметке же
     все четыре (два ряда полей и два fieldset-а) - дети одного
     .zform__fields, поэтому единый gap:10px (как в "Поля") делает отступ
     перед группами чипов и между ними вдвое меньше нужного. Добавляем
     недостающие 8px (18 - 10) отдельно на сами группы. */
  .zform__group {
    margin-top: 8px;
  }

  .zform__row {
    gap: 10px;
  }

  .zfield {
    padding: 15px 16px;
  }

  .zfield__input {
    font-size: 14px;
    line-height: 17px;   /* 14 x 1.21 */
  }

  .zfield--parent {
    display: none;   /* в мобильном макете этого поля нет */
  }

  .zform__group {
    gap: 9px;
  }

  .zform__legend,
  .zform__legend-d,
  .zform__legend-m {
    font-size: 10px;
    line-height: 12px;   /* 10 x 1.21 */
    letter-spacing: 1.8px;
  }

  .zform__legend-d {
    display: none;
  }

  .zform__legend-m {
    display: block;
  }

  /* На мобильной ширине рядов из контента больше нет: .zform__chips-row
     становится "невидимым" (display:contents убирает сам контейнер ряда
     из раскладки, но его кнопки остаются в DOM), и все кнопки группы
     становятся прямыми flex-элементами .zform__chips - тогда перенос
     строк работает по ширине, как в мобильном кадре макета (2+2+3+2 у
     "Направления"), без привязки к тому, сколько кнопок и в каком
     порядке пришло из админки. */
  .zform__chips-row {
    display: contents;
  }

  .zform__chips {
    display: flex;
    flex-direction: row;   /* перебивает column из десктопной базовой */
    flex-wrap: wrap;
    gap: 9px 8px;
    margin-top: 9px;   /* перебивает десктопные 12 - свой мобильный gap:9 группы */
  }

  .chip__face {
    padding: 9px 12px;
    font-size: 12.5px;
    line-height: 15px;   /* 12.5 x 1.21 */
  }

  .chip__text--d {
    display: none;
  }

  .chip__text--m {
    display: block;
  }

  .zform__consent {
    gap: 10px;
  }

  .zform__box-face {
    width: 18px;
    height: 18px;
  }

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

  .zform__consent-d {
    display: none;
  }

  .zform__consent-m {
    display: block;
    font-size: 12px;
    line-height: 17px;   /* 12 x 1.45 из дампа */
  }

  .zform__submit {
    width: 100%;
    padding: 16px 24px;
  }

  .zform__guarantee {
    display: none;   /* в мобильном дампе этого блока нет */
  }

  .zform__line {
    display: none;   /* в мобильном дампе линии перед мессенджерами нет */
  }

  .soc-line {
    gap: 16px;
  }

  .soc-line__label {
    display: none;   /* в мобильном дампе этого текста нет */
  }

  .soc-line__item {
    gap: 6px;
  }

  .soc-line__item .ico {
    width: 16px;
    height: 16px;
  }

  .soc-line__item span {
    font-size: 13px;
    line-height: 16px;   /* 13 x 1.21 */
  }
}

/* ─── Окно просмотра фото и видео ───────────────────────────────────── */
/* Разметка - okno-media.tpl. Подложка, крестик и плавность берутся у окна
   записи как есть (те же .modal, .modal__back, .modal__close выше), здесь
   только содержимое: само фото или проигрыватель и подпись под ним.

   Своего дампа у этого окна в макете нет - его там не было вовсе. Поэтому
   размеры здесь не "из макета", а от окна: запись занимает всю доступную
   ширину до 1100px и не выше экрана за вычетом полей, остальное решает
   пропорция самого файла. */

.modal--media .modal__scroll {
  justify-content: center;
  padding: 88px 20px 40px;
}

.modal__media {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1100px;
}

.modal__media-box {
  display: flex;
}

.modal__media-box video,
.modal__media-box img {
  display: block;
  width: 100%;
  height: auto;
  /* Поля окна: 88 сверху, 40 снизу, подпись с отступом - примерно 180. */
  max-height: calc(100vh - 180px);
  object-fit: contain;
  border-radius: 10px;
  /* Пока первый кадр не пришёл, место под запись - чёрное, а не белое:
     белый прямоугольник на тёмной подложке моргает в глаза. */
  background: #000;
}

.modal__media-caption {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 22px;
  color: #FFFFFFD9;
  text-align: center;
}

/* Подписи может не быть (фото без описания) - тогда и отступа под ней
   быть не должно. */
.modal__media-caption:empty {
  display: none;
}

@media (max-width: 860px) {
  /* У окна записи крестик на телефоне убран: та шторка закрывается
     свайпом и кнопкой внутри. У окна просмотра внутри кнопок нет вовсе,
     поэтому крестик здесь нужен - иначе закрыть можно только нажатием
     мимо, а мимо фотографии во весь экран ещё надо попасть. */
  .modal--media .modal__close {
    display: flex;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }

  .modal--media .modal__scroll {
    padding: 72px 16px 24px;
  }

  .modal__media-box video,
  .modal__media-box img {
    max-height: calc(100vh - 140px);
  }
}