/* Бланк отправителя - форма записи. Макет: dIWLh (1440) и jRewo (390).

   Вертикальный ритм секции (116/52) и сам .wrap уже даёт верную геометрию
   по горизонтали - здесь только своё: карточка-бланк, шапка с маркой,
   поля, пилюли "кому ещё подпишем" и кнопка. Паддинг секции в макете
   110px (не общие 116) - только десктопная поправка, мобильный 52 уже
   совпадает с общим значением prazdnik.css.

   Строки заголовка (.hw-kicker/.hw-h2) и размер поля (var(--r-field)) и
   карточки (var(--r-card)) - общие, подключены как есть: совпадают с
   макетом (кегль/радиус один в один, межстрочный - в пределах 1px).

   Высота/паддинг полей, чекбокс согласия, кнопка отправки, ловушка email2 -
   та же формула, что в hw-ticket.css (билет Хэллоуина): inset box-shadow
   вместо border под обводку inner, line-height считается из натурального
   множителя шрифта там, где в дампе нет своего lineHeight (Inter x1.21,
   Manrope x1.36 - конвенция проекта). */

.vl-form {
  /* В макете вертикальный паддинг секции 110px, а не общие 116. */
  padding-block: 110px;
  /* Заливка в дампе - розовая подложка #FFE7F1 (dIWLh и jRewo), то есть
     --bg-soft, а не фон страницы --bg. Бланк на ней должен читаться
     отдельным листом. */
  background: var(--bg-soft);
}

.vl-form__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.vl-form__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 820px;
  text-align: center;
}

/* ─── Карточка бланка ─────────────────────────────────────────────── */

.vl-form__card {
  position: relative;
  width: 920px;
  max-width: 100%;
  margin-inline: auto;
  background: var(--paper-h);
  /* В дампе (kfolB/q03GF) у бланка strokeWidth:2, не 1. */
  box-shadow: inset 0 0 0 2px var(--line-h);
  border-radius: var(--r-card);
  overflow: hidden;
}

.vl-form__form {
  display: flex;
  flex-direction: column;
}

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

/* ─── Шапка бланка: название + марка ──────────────────────────────── */

.vl-form__blank-head {
  display: flex;
  /* В дампе (opaw3/L6w73) колонка "Слева" стоит не по верху, а по
     центру высоты марки: на телефоне разница 47px против 26px у
     flex-start - 21px съезда и наезд на поле под шапкой. */
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 36px;
}

.vl-form__blank-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vl-form__org {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  line-height: 27px;   /* 20 x 1.36, натуральный интервал Manrope */
  letter-spacing: -0.2px;
  color: var(--text);
}

.vl-form__sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 16px;   /* 13 x 1.21, натуральный интервал Inter */
  color: var(--text-2);
}

.vl-form__stamp {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 72px;
  height: 86px;
  background: var(--bg-soft);
  /* В дампе (BEdPM/WTMSu) у марки strokeWidth:2. */
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: 4px;
  padding: 10px 8px;
}

.vl-form__stamp-icon {
  display: block;
  width: 22px;
  height: 22px;
}

.vl-form__stamp-v {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 12px;
  line-height: 16px;   /* 12 x 1.36 */
  color: var(--accent-2);
}

.vl-form__line {
  flex: none;
  height: 2px;
  background: var(--line-h);
}

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

.vl-form__fields {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 34px 36px;
}

.vl-form__row {
  display: flex;
  gap: 16px;
}

.vl-form__row > .vl-form__field { flex: 1 1 0; min-width: 0; }

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

.vl-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vl-form__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;   /* 11 x 1.21 */
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Подпись "кому ещё подпишем" у дампа разная по тексту и длине на
   десктопе и телефоне - два поля, переключение видимости
   брейкпоинтом, тот же приём, что у vl_form_cc_label/_m. */
.vl-form__label--m { display: none; }

.vl-form__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  margin: 0;
  box-shadow: inset 0 0 0 1px var(--line-h);
  border: 0;
  border-radius: var(--r-field);
  background: var(--card);
  padding: 15px 17px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 18px;   /* 15 x 1.21 */
  color: var(--text);
}

.vl-form__input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.vl-form__input--area {
  resize: vertical;
}

.vl-form__error {
  display: none;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--accent-text);
}

.vl-form .zfield.is-bad .vl-form__input { box-shadow: 0 0 0 1px var(--accent) inset; }
.vl-form .zfield.is-bad .vl-form__error { display: block; }

/* ─── Кому ещё подпишем открытку ──────────────────────────────────── */

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

.vl-form__cc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vl-form__cc-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-h);
  background: var(--card);
  padding: 11px 16px;
  cursor: pointer;
}

.vl-form__cc-box {
  /* Нативный чекбокс скрыт общим .zform__box (form.css) - здесь только
     собственное отображение пилюли. */
}

.vl-form__cc-face {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-h);
}

.vl-form__cc-face svg {
  width: 10px;
  height: 10px;
  color: #FFFFFF;
  visibility: hidden;
}

.vl-form__cc-box:checked + .vl-form__cc-face {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.vl-form__cc-box:checked + .vl-form__cc-face svg { visibility: visible; }

.vl-form__cc-box:checked ~ .vl-form__cc-text { color: var(--text); }

.vl-form__cc-pill:has(.vl-form__cc-box:checked) {
  /* В дампе отмеченные пилюли ("маме"/"папе" - демо-состояние) идут с
     strokeWidth:2, а не 1, как у обычной (box-shadow выше). */
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.vl-form__cc-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;   /* 14 x 1.21 */
  color: var(--text);
}

.vl-form__cc-note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.65;   /* lineHeight в дампе */
  color: var(--text-2);
}

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

.vl-form .zform__consent {
  /* У билета Хэллоуина (hw-ticket.css) тут ещё padding:4px 0 - у
     бланка валентинки вертикальный ритм держит единый gap:22 на
     .vl-form__fields, и в дампе (dIWLh/jRewo) строка согласия ровно
     21px высотой, без внутреннего отступа - лишние 4+4px дали расхождение
     высоты секции на эти самые 8px. */
  gap: 11px;
}

.vl-form__box-face {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-h);
  border: 0;
}

.vl-form .zform__box:checked + .vl-form__box-face {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

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

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

.vl-form__consent-text a {
  color: inherit;
  text-decoration: none;
}

.vl-form__consent-text a:hover,
.vl-form__consent-text a:focus-visible { text-decoration: underline; }

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

.vl-form .zform__consent.is-bad .vl-form__box-face { box-shadow: 0 0 0 1px var(--accent) inset; }
.vl-form .zform__consent.is-bad + .vl-form__consent-error { display: block; }

/* ─── Форма ожидания (межсезонье, своего макета нет) ──────────────── */

.vl-form__wait-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

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

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

.vl-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  padding: 19px 32px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;   /* 16 x 1.21 */
  color: #FFFFFF;
  cursor: pointer;
}

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

.vl-form__msg {
  display: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--accent-text);
}

.vl-form__msg:not(:empty) { display: block; }

.vl-form__footer {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 22px;   /* 13 x 1.7, lineHeight в дампе */
  text-align: center;
  color: var(--text-2);
}

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

@media (max-width: 860px) {
  /* Десктопные 110px выше не внутри медиа-запроса - без явного сброса
     протекли бы и на телефон, а в макете (jRewo) здесь общие 52px из
     .hw-sec. Та же утечка, что чинили в "Правиле дня", "Не про
     романтику" и "Что пишут дети". */
  .vl-form { padding-block: 52px; }

  /* Общий .hw-h2 даёт на телефоне line-height:31px, а в дампе этого
     блока у "H" высота ровно 30px - та же нестыковка общего класса,
     что в остальных секциях страницы. */
  .vl-form__head .hw-h2 { line-height: 30px; }

  .vl-form__label--d { display: none; }
  .vl-form__label--m { display: inline; }

  .vl-form__org { font-size: 18px; line-height: 24px; }   /* 18 x 1.36 */
  .vl-form__sub { font-size: 12px; line-height: 15px; }    /* 12 x 1.21 */
  .vl-form__stamp-v { font-size: 11px; line-height: 15px; } /* 11 x 1.36 */

  .vl-form__row {
    flex-direction: column;
    gap: 16px;
  }

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

  .vl-form__input--area {
    /* textarea не растёт сама под текст - в дампе (jRewo) у поля
       "Аллергии..." на телефоне плейсхолдер переносится на 2 строки, и
       высота "Поле" там 64px: 15 паддинг + 2 строки по 17px + 15
       паддинг, не десктопные 47/48 в один ряд. Тот же приём, что в
       hw-ticket.css. */
    height: auto;
    min-height: 64px;
  }

  .vl-form__cc-list {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .vl-form__cc-pill { width: 100%; }

  .vl-form__cc-text { font-size: 13px; line-height: 16px; }   /* 13 x 1.21 */
  .vl-form__cc-note { font-size: 12px; line-height: 20px; }   /* 12 x 1.65 = 19.8, в макете строка целая - 20 */

  .vl-form__consent-text { font-size: 12px; line-height: 19px; }   /* 12 x 1.6 */

  .vl-form__submit { font-size: 15px; line-height: 18px; }   /* 15 x 1.21 */

  .vl-form__footer { font-size: 12px; line-height: 20px; }   /* 12 x 1.7 */
}