/* Блок главной hm-zayavka: "Запись на пробное занятие".
   Макет: фреймы dwsje (1440x680) и jX4GO (390, высота по контенту).

   Десктоп - фото 620x680 слева и форма справа в ряд (нулевой gap между
   ними в дампе - отступ даёт padding-inline формы, 88px). Телефон - фото
   290 высотой сверху и форма под ним колонкой (gap между ними в дампе
   тоже 0, отступ сверху текста формы - 0, вертикальный паддинг формы в
   дампе действительно нулевой на обеих ширинах).

   Высота ряда на десктопе - 680px фиксированно, как у hm-hero (480/800):
   это декоративный кадр фото, не резиновая высота по контенту. */

[data-section="zayavka"] {
  background: var(--paper);
}

.hm-zayavka__row {
  display: flex;
  max-width: var(--page-w);
  height: 680px;
  margin-inline: auto;
}

.hm-zayavka__photo {
  flex: none;
  width: 620px;
  height: 100%;
  overflow: hidden;
}

.hm-zayavka__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hm-zayavka__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 22px;
  padding-inline: 88px;
}

/* ─── Текст над формой ──────────────────────────────────────────── */

.hm-zayavka__kicker {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;   /* 12 x 1.21, своего lineHeight в дампе нет */
  letter-spacing: 3px;
  color: var(--magenta-text);
}

.hm-zayavka__h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 46px;
  line-height: 52px; /* 46 x 1,14 = 52,44 - в макете строка целая */
  letter-spacing: -1.6px;
  color: var(--ink);
}

.hm-zayavka__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 31px; /* 17 x 1,85 = 31,45 */
  color: var(--muted);
}

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

.hm-zayavka__fields {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

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

.hm-zayavka__inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}

.hm-zayavka__row2 {
  display: flex;
  gap: 12px;
}

.hm-zayavka__row2 > .hm-zayavka__field { flex: 1 1 0; min-width: 0; }

.hm-zayavka__field {
  display: flex;
  flex-direction: column;
}

/* Белая рамка поля - общая для текстовых полей (на самом input) и для
   выпадающего списка (на обёртке label, см. .hm-zayavka__field--select:
   у списка рамка должна охватывать и текст, и значок стрелки вместе). */
.hm-zayavka__box {
  background: var(--white);
  /* Обводка 1.5px в макете нарисована по середине границы - половина линии
     снаружи, половина внутри. Одна inset-тень легла бы целиком внутрь и
     сдвинула бы видимую рамку на 0,75px. Поэтому две тени по 0,75px:
     наружу и внутрь (тот же приём, что у плашки видео в hm-hero.css). */
  box-shadow:
    0 0 0 0.75px color-mix(in srgb, var(--ink) 10%, transparent),
    inset 0 0 0 0.75px color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 4px;
  padding: 17px 20px;
}

.hm-zayavka__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  /* Фон - на .hm-zayavka__box (тот же элемент, второй класс input'а):
     свой background здесь не задаём, иначе он перебьёт белый фон рамки. */
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 18px;   /* 15 x 1.21, своего lineHeight в дампе нет */
  color: var(--ink);
}

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

.hm-zayavka__field-error {
  display: none;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px; /* 13 x 1,4 = 18,2 */
  color: var(--magenta-text);
}

/* .zfield на поле телефона - только крючок для form.js (is-bad, closest()),
   общий вид form.css (padding/фон/рамка на самом label) сюда не допускаем -
   тот же приём, что ea-form.css делает для .ea-form .zfield. */
.hm-zayavka__field.zfield {
  display: flex;
  flex-direction: column;
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  position: static;
  gap: 0;
}

.hm-zayavka__field.zfield.is-bad .hm-zayavka__box { box-shadow: 0 0 0 1.5px var(--magenta) inset; }
.hm-zayavka__field.zfield.is-bad .hm-zayavka__field-error { display: block; }

/* ─── Список направлений ────────────────────────────────────────── */

.hm-zayavka__field--select {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.hm-zayavka__select {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  background: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 18px;   /* 15 x 1.21, своего lineHeight в дампе нет */
  color: var(--muted);
  cursor: pointer;
}

.hm-zayavka__select::-ms-expand { display: none; }

.hm-zayavka__chevron {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

/* ─── Кнопка ─────────────────────────────────────────────────────── */

.hm-zayavka__submit {
  flex: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;   /* 15 x 1.21, своего lineHeight в дампе нет */
  padding: 17px 34px;
  border: 0;
}

/* ─── Мессенджеры ────────────────────────────────────────────────── */

.hm-zayavka__soc {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 2px;   /* в дампе padding:[2,0,0,0] на обеих ширинах */
}

.hm-zayavka__soc-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;   /* 14 x 1.21, своего lineHeight в дампе нет */
  color: var(--muted);
}

/* .soc-line__item - общий класс чанка soc-line-item.tpl, вид form.css сюда
   не допускаем, весь вид - здесь, как ea-form.css делает для тех же
   классов (см. комментарий в начале hm-zayavka.tpl). */
.hm-zayavka__soc .soc-line__item {
  display: flex;
  align-items: center;
  gap: 7px;
}

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

.hm-zayavka__soc .soc-line__item span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;   /* 14 x 1.21, своего lineHeight в дампе нет */
  color: var(--ink);
}

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

/* .zform__consent - крючок для form.js (is-bad, закрытие соседнего поля),
   общий вид form.css сюда не допускаем, см. комментарий у .zfield выше. */
.hm-zayavka__consent.zform__consent {
  position: static;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}

.hm-zayavka__box-face {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 3px;
  background: var(--magenta);
}

.hm-zayavka__box-face svg {
  width: 12px;
  height: 12px;
  color: var(--white);
  visibility: hidden;
}

.hm-zayavka .zform__box:checked + .hm-zayavka__box-face svg { visibility: visible; }
.hm-zayavka .zform__box:not(:checked) + .hm-zayavka__box-face { background: var(--white); box-shadow: 0 0 0 0.75px color-mix(in srgb, var(--ink) 10%, transparent), inset 0 0 0 0.75px color-mix(in srgb, var(--ink) 10%, transparent); }
.hm-zayavka .zform__box:focus-visible + .hm-zayavka__box-face { outline: 2px solid var(--magenta); outline-offset: 2px; }

.hm-zayavka__consent-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 20px; /* 13 x 1,5 = 19,5 */
  color: var(--muted);
}

.hm-zayavka__consent-text a { color: inherit; }

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

.hm-zayavka .zform__consent.is-bad + .hm-zayavka__consent-error { display: block; }

/* ─── Гарантия ───────────────────────────────────────────────────── */

.hm-zayavka__guarantee {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 17px;   /* 14 x 1.21, своего lineHeight в дампе нет */
  color: var(--ink);
}

.hm-zayavka__guarantee .ico {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--magenta-text);
}

/* ─── Сообщение формы ────────────────────────────────────────────── */

.hm-zayavka__msg {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--magenta-text);
}

/* ─── Телефон (≤860) ─────────────────────────────────────────────── */

@media (max-width: 860px) {
  .hm-zayavka__row {
    flex-direction: column;
    height: auto;
    max-width: none;
  }

  .hm-zayavka__photo {
    width: 100%;
    height: 290px;
  }

  .hm-zayavka__form {
    gap: 22px;
    padding: 0 20px;
    justify-content: flex-start;
  }

  .hm-zayavka__kicker { font-size: 11px; line-height: 14px; }   /* normal Inter 11px в Chrome - 14px, не 11 x 1.21 */

  .hm-zayavka__h2 {
    font-size: 29px;
    /* Множитель, а не целые пиксели: проверено прогоном, 33px делают блок
       на 1px выше макета, а дробные 33,06 дают ровно 1119. Макет в этом
       месте считает высоту строки не так, как в остальных блоках.
       Записать обязательно: в настольном правиле строка задана в px и
       без этого унаследуется она. */
    line-height: 1.14;
    letter-spacing: -0.9px;
  }

  .hm-zayavka__text { font-size: 15px; line-height: 1.85; }   /* 15 x 1,85 = 27,75 - дробная строка совпала с макетом */

  .hm-zayavka__row2--names { flex-direction: column; }

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

  .hm-zayavka__field--select { flex-direction: column; align-items: flex-start; }

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

  .hm-zayavka__submit { font-size: 14px; line-height: 17px; padding: 17px 18px; }   /* 14 x 1.21 */

  .hm-zayavka__soc { flex-direction: column; align-items: flex-start; gap: 12px; }

  .hm-zayavka__soc-label { font-size: 13px; line-height: 16px; }   /* 13 x 1.21 */

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

  .hm-zayavka__consent-text { font-size: 12px; line-height: 18px; }   /* 12 x 1,5 = 18 */

  .hm-zayavka__guarantee { font-size: 13px; line-height: 16px; }   /* 13 x 1.21 */
}