/* ═══ Заявка со страницы ═══════════════════════════════════════════
   Инлайновая форма на четырёх посадочных страницах рекламы: kotelnye,
   kotly, kotly/avtomaticheskie-ugolnye-kotly, bogatyr. Посетитель с
   рекламы отправляет заявку прямо здесь, а не уходит на форму главной.

   Ноль собственных цветов — всё через токены catalog.css (--bg/--card/
   --gold/--text/--border/...), поэтому тёмная и светлая тема работают
   без единой строки here. Разметка секции статична (см. HTML), этот
   файл только раскрашивает то, что уже стоит в потоке. */

.zayavka {
  position: relative;
  padding-block: 56px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.zayavka__head {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 28px;
}
.zayavka__eyebrow {
  font-family: var(--font-display);
  font-size: var(--h2);
  font-weight: 700;
  margin-bottom: 10px;
}
.zayavka__lede {
  font-size: 0.92rem;
  color: var(--muted-lt);
  line-height: 1.6;
}

/* ── Панель формы ─────────────────────────────────────────────── */
.zform {
  max-width: 620px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
}
.zform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.zform .fg { display: flex; flex-direction: column; gap: 0.35rem; }
.zform .fg label {
  font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
/* Пометка «необязательно», набрана иначе, чем сама подпись — тот же
   приём, что у формы на главной. */
.zform .fg-opt {
  text-transform: none; letter-spacing: 0.02em;
  color: var(--muted); opacity: 0.72; font-size: 0.92em;
}
.zform .fg input, .zform .fg textarea, .zform .fg select {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.8rem 1rem;
  min-height: var(--tap);
  color: var(--text); font-family: var(--font-body); font-size: 0.95rem;
  outline: none; transition: border-color var(--trans), box-shadow var(--trans);
  appearance: none;
  box-sizing: border-box; width: 100%; min-width: 0;
}
.zform .fg input:focus, .zform .fg textarea:focus, .zform .fg select:focus {
  border-color: var(--border-g);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.zform .fg input::placeholder, .zform .fg textarea::placeholder { color: var(--muted); opacity: 0.6; }
.zform .fg textarea { min-height: 120px; resize: vertical; }
.zform .fg select option { background: var(--card); }

.zform .ico {
  width: 16px; height: 16px; display: inline-block; vertical-align: -3px;
  flex: 0 0 auto;
}

/* ── Согласие на обработку персональных данных ───────────────────
   Флажок 20×20, зону нажатия даёт подпись: <label for="zfConsent">
   занимает всю ширину формы и переключает флажок кликом по тексту. */
.zform .consent-row {
  display: flex; align-items: flex-start; gap: 0.55rem;
  margin: 0.2rem 0;
}
.zform .consent-row input[type="checkbox"] {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  accent-color: var(--gold); cursor: pointer;
}
.zform .consent-row label {
  font-size: 0.82rem; line-height: 1.5; color: var(--muted-lt); cursor: pointer;
}
.zform .consent-row a { color: var(--gold-ink); text-decoration: underline; }

/* ── Раскрытие «Добавить детали» (email, категория, сообщение) ────
   Видимых полей три: имя, телефон, согласие — как на главной.
   Категория и сообщение уже стоят в разметке предзаполненными под
   раздел этой страницы, просто ждут своего раскрытия. */
.zform .form-disclosure-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: var(--tap); padding: 0.5rem 0;
  background: none; border: 0; border-top: 1px dashed var(--border);
  color: var(--gold-ink); font-family: var(--font-body);
  font-size: 0.82rem; letter-spacing: 0.04em; cursor: pointer;
}
.zform .form-disclosure-btn .ico { transition: transform var(--dur-base) var(--ease-smooth); }
.zform .form-disclosure-btn[aria-expanded="true"] .ico { transform: rotate(90deg); }
.zform .form-details { display: flex; flex-direction: column; gap: 1rem; }
.zform .form-details[hidden] { display: none; }

.zform__submit {
  width: 100%; justify-content: center;
  border-radius: 40px; gap: 0.5rem; letter-spacing: 0.06em;
}
.zform__submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Успех / отказ — те же классы и тот же смысл, что у формы на
   главной (index.html #contact), темизировано токенами catalog.css. ── */
.zform .lead-success { text-align: center; padding: 1.6rem 0.5rem; }
.zform .lead-success__text { font-size: 1.05rem; color: var(--text); margin: 0 0 0.9rem; }
.zform .lead-success__tel {
  display: inline-block; font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 600; color: var(--gold-ink);
  text-decoration: none;
}
.zform .lead-success__tel:hover { text-decoration: underline; }

.zform .lead-fail {
  margin-top: 1rem; padding: 1rem 1.1rem;
  border: 1px solid rgba(190, 90, 90, 0.45);
  border-left-width: 3px;
  border-radius: var(--r-lg);
  background: rgba(190, 90, 90, 0.07);
}
.zform .lead-fail__head {
  margin: 0 0 0.75rem; font-size: 0.87rem; line-height: 1.6;
  color: var(--text);
}
.zform .lead-fail__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem;
}
.zform .lead-fail__tel {
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 700;
  color: var(--gold-ink);
}
.zform .lead-fail__tel:hover { text-decoration: underline; }
.zform .lead-fail__mail, .zform .lead-fail__copy, .zform .lead-fail__retry {
  font-size: 0.83rem; color: var(--muted-lt);
  background: none; border: none; padding: 0; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.zform .lead-fail__mail:hover, .zform .lead-fail__copy:hover, .zform .lead-fail__retry:hover {
  color: var(--gold-ink); border-bottom-color: var(--gold-ink);
}
.zform .lead-fail__retry { color: var(--text); }

/* ── Видимый фокус — тот же приём, что и в остальном каталоге ────── */
.zform input:focus-visible,
.zform select:focus-visible,
.zform textarea:focus-visible,
.zform button:focus-visible,
.zform a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .zayavka { padding-block: 44px; }
  .zform { padding: 22px; }
  .zform__row { grid-template-columns: 1fr; gap: 0.75rem; }
  /* 16px, а не 0.95rem: iOS Safari открывает клавиатуру с зумом при
     размере шрифта поля меньше 16px, и после закрытия клавиатуры
     страница остаётся увеличенной. */
  .zform .fg input, .zform .fg textarea, .zform .fg select { font-size: 16px; }
}