/* Пасха: "Заявка на охоту" - форма записи. Макет: C6JH2 (1440) и M7Tpr (390).

   В отличие от hw-ticket.css (тёмный билет с корешком), здесь светлая
   карточка: зелёная полоска с датой/ценой сверху, дальше поля. Общий вид
   классов zfield/zform__consent/zform__box(-face) из form.css сюда не
   допускаем - весь вид свой, в скобке .ea-form, тем же приёмом, что и в
   hw-ticket.css.

   Два цвета макета не входили в палитру Пасхи из tokens.css: подпись в
   зелёной полоске и плейсхолдер поля. Заведены токенами --on-accent-lead
   и --placeholder в блоке [data-holiday="easter"] (своём, правка в нём
   разрешена) - по образцу --placeholder у Дня святого Валентина. */

/* Вертикальный отступ секции в макете - 110px на десктопе (на телефоне
   совпадает с общими 52px), данные C6JH2. */
.ea-form { background: var(--bg-soft); }

@media (min-width: 861px) {
  .ea-form { padding-block: 110px; }
}

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

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

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

.ea-form__title { text-align: center; }
.ea-form__kicker { color: var(--magenta-text); }

@media (max-width: 860px) {
  /* Заголовок на телефоне в этом блоке нарисован 27px, не общие 28
     (--m-h2) - тот же размер, что и в остальных блоках праздника
     (tracks/eggs/shops/home). Переопределения здесь не было, заголовок
     падал на общий размер и выходил на 1px выше макета. */
  .ea-form__title {
    font-size: 27px;
    line-height: 30px;   /* 27 x 1.1 = 29,7 */
    letter-spacing: -.8px;
  }
}

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

.ea-form__card {
  width: 920px;
  max-width: 100%;
  background: var(--card);
  /* Обводка в дампе strokeAlignment: inner - обычный border добавил бы
     2px к высоте карточки (высота по содержимому, явного height нет). */
  box-shadow: inset 0 0 0 1px var(--line-h);
  border-radius: var(--r-card-lg);
  overflow: hidden;
}

.ea-form__banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 36px;
  background: var(--accent);
}

/* Притемнение полоски ради читаемости. Полоска бланка - единственное
   место, где белый текст лежит на мяте --accent. Мята светлая (#3F9B7F,
   яркость 0,26), и белая строка на ней даёт 3,4 при норме 4,5 из
   docs/tech-spec.md (раздел 9). Красить текст некуда: белее белого не
   бывает, значит темнеть должна заливка.
   Чёрный на 26 процентов оставляет 74 процента мяты: тон остаётся
   мятным, белая строка выходит на 5,6, а подпись цветом макета
   (#D6EEE5) - на 4,6. При 17 процентах прошла бы только белая строка, и
   подпись пришлось бы тоже делать белой, то есть потерять в полоске два
   уровня текста из макета. Темнее не берём: мята перестаёт читаться
   мятой. Отдельным слоем - чтобы сверка мерила заливку макета. */
.ea-form__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 26%);
}

.ea-form__banner-main,
.ea-form__banner-note { position: relative; }

.ea-form__banner-main {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;   /* 15 x 1.21 = 18,15, своего lineHeight в дампе нет */
  color: #FFFFFF;
}

.ea-form__banner-note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 16px;   /* 13 x 1.21 = 15,73 */
  color: var(--on-accent-lead);
}

@media (max-width: 860px) {
  .ea-form__banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px 20px;
  }

  .ea-form__banner-main { font-size: 14px; line-height: 17px; }  /* 14 x 1.21 = 16,94 */
  .ea-form__banner-note { font-size: 12px; line-height: 15px; }  /* 12 x 1.21 = 14,52 */
}

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

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

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

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

@media (max-width: 860px) {
  .ea-form__row { flex-direction: column; }
}

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

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

/* .zfield у полей "Имя ребёнка"/"Телефон" - только крючок для form.js,
   общий вид form.css сюда не допускаем. */
.ea-form .zfield {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  position: static;
}

.ea-form__field-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;   /* 11 x 1.21 = 13,31, своего lineHeight в дампе нет */
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
}

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

.ea-form__field-input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.ea-form__field-input--area {
  resize: vertical;
  /* В дампе "Поле" комментария (HtVtL/BbPSF) на обеих ширинах - не ровно
     одна строка ввода: на телефоне (M7Tpr) оно выше обычного поля на
     17px (две строки), на десктопе (C6JH2) - такой же высоты, как
     остальные однострочные поля. rows у textarea сам по себе на это не
     влияет одинаково в обоих брейкпоинтах - высоту задаём явно. */
  height: 48px;
}

@media (max-width: 860px) {
  .ea-form__field-input--area { height: 64px; }
}

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

.ea-form .zfield.is-bad .ea-form__field-input { box-shadow: 0 0 0 1px var(--magenta) inset; }
.ea-form .zfield.is-bad .ea-form__field-error { display: block; }

@media (max-width: 860px) {
  .ea-form__field-input { font-size: 14px; line-height: 17px; }  /* 14 x 1.21 = 16,94 */
}

/* ─── Выбор мастерской ────────────────────────────────────────────── */

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

.ea-form__opts {
  display: flex;
  gap: 12px;
}

@media (max-width: 860px) {
  .ea-form__opts { flex-direction: column; gap: 14px; }
}

.ea-form__opt {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  gap: 11px;
  padding: 16px 18px;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--line-h);
  cursor: pointer;
}

/* Выбранный вариант - заливка мятой и цветная обводка потолще. :has()
   избавляет от JS: радиокнопка меняет состояние, рамка перекрашивается
   сама. */
.ea-form__opt:has(.ea-form__opt-input:checked) {
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.ea-form__opt-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ea-form__opt-dot {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--line-h);
}

.ea-form__opt-input:checked + .ea-form__opt-dot {
  box-shadow: inset 0 0 0 5px var(--accent);
}

.ea-form__opt-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;   /* 14 x 1.21 = 16,94, своего lineHeight в дампе нет */
  color: var(--text);
}

@media (max-width: 860px) {
  .ea-form__opt-text { font-size: 13px; line-height: 16px; }   /* 13 x 1.21 = 15,73 */
}

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

.ea-form .zform__consent {
  gap: 11px;
}

.ea-form .zform__box-face {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-h);
  border: 0;
}

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

.ea-form .zform__box-face svg {
  width: 11px;
  height: 11px;
  color: #FFFFFF;
}

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

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

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

.ea-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(--magenta-text);
}

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

@media (max-width: 860px) {
  .ea-form__consent-text { font-size: 12px; line-height: 19px; }   /* 12 x 1.6 = 19,2 */
}

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

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

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

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

/* ─── Кнопка и низ формы ──────────────────────────────────────────── */

.ea-form__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;
  line-height: 19px;   /* 16 x 1.21 = 19,36, своего lineHeight в дампе нет */
  color: #FFFFFF;
  cursor: pointer;
}

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

@media (max-width: 860px) {
  .ea-form__submit { font-size: 15px; line-height: 18px; }   /* 15 x 1.21 = 18,15 */
}

.ea-form__footer {
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 22px;   /* 13 x 1.7 = 22,1 */
  color: var(--text-3);
}

@media (max-width: 860px) {
  .ea-form__footer { font-size: 12px; line-height: 20px; }   /* 12 x 1.7 = 20,4 */
}

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

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

@media (max-width: 860px) {
  .ea-form__card { width: 100%; }
}