/**
 * Місток між розміткою Contact Form 7 і класами-контрактами верстки
 * (.form-field/.input/.btn/.check-item), які ми проставляємо в шаблоні
 * форми через class:xxx/id:xxx (Налаштування → Форми сайту → сама форма
 * в CF7). Theme-only — цього плагіна нема в статичній верстці.
 *
 * ⚠️ CF7 завжди огортає поле в <span class="wpcf7-form-control-wrap"> —
 * прибрати це не можна, тому просто робимо цей span "прозорим" для флексу
 * .form-field (display:contents), інакше .input втрачає gap/flex-поведінку.
 *
 * ⚠️ КРИТИЧНО: CF7 виводить шорткод у ТРИ вкладені обгортки —
 * .kzd-cf7-form (наша) > .wpcf7 > form.wpcf7-form — тому .form-field і
 * кнопка-сабміт НЕ є прямими дітьми .dialog-form/.content-form, як у
 * версткового фолбека, і flex-gap (--s-4) цих контейнерів на них не діє
 * (gap рахує тільки прямих flex-дітей). Тому й розбіжність із версткою —
 * ідентичний CSS, але інша глибина DOM. Схлопуємо всі три обгортки
 * (display:contents), щоб .form-field/кнопка знову опинились "прямими"
 * дітьми .dialog-form/.content-form — так само, як у верстці.
 */
.kzd-cf7-form,
.kzd-cf7-form .wpcf7,
.kzd-cf7-form form.wpcf7-form {
  display: contents;
}

.form-field .wpcf7-form-control-wrap { display: contents; }

/* ⚠️ Кнопка сабміту CF7 — це <input type="submit">, а не <button>.
   Глобальний ресет `button { font: inherit; background: none; border: none; }`
   (style.css) написаний на тег button і на input не діє — тому без цього
   .btn.btn-gold зверху лишався нативний UA-бордер інпута й системний
   шрифт кнопки замість DM Sans/кольору з .btn.
   ⚠️ НЕ чіпати background тут — селектор тег+клас специфічніший за
   .btn-gold (0,0,1,1 проти 0,0,1,0) і забиває золотий фон.
   ⚠️ НЕ `font: inherit` — той самий специфічний селектор перебив би і
   font-size/font-weight самого .btn (16px/600), лишивши тонкий текст
   успадкованого розміру. Дублюємо значення .btn явно, а не покладаємось
   на каскад. */
input.btn {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  border: none;
  appearance: none;
}

/* Текст помилки під конкретним полем (CF7 сам додає його після інпута). */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--war, #8B1A1A);
}

/* Банер над формою після відправлення (успіх/помилка) — CF7 сам показує/
   ховає через aria-live, стиль лише кольору статусу. */
.wpcf7-response-output {
  margin-top: var(--s-3);
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
}
.wpcf7-form.sent .wpcf7-response-output { background: var(--gold-bg); color: var(--navy); }
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output { background: rgba(139, 26, 26, .08); color: var(--war, #8B1A1A); }
.wpcf7-form.invalid .wpcf7-response-output { background: rgba(139, 26, 26, .08); color: var(--war, #8B1A1A); }

/* [radio class:check-item use_label_element] — CF7 огортає кожен варіант
   у <span class="wpcf7-list-item">, а сам .check-item лягає на <label>
   усередині (use_label_element) — рахунок і відступи через сам список. */
.wpcf7-form fieldset .wpcf7-form-control.wpcf7-radio {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.wpcf7-list-item { margin: 0; }

/* Поки триває AJAX-відправлення — той самий "in-flight" стан, що й кнопки
   сайту (.btn), без стрибка розмітки. */
.wpcf7-form.submitting .btn[type="submit"] { opacity: .7; pointer-events: none; }

/* Спінер CF7 (іконка біля кнопки під час відправлення). CF7 сам ставить
   `visibility:hidden` (лишається в потоці!) — після display:contents-
   схлопування обгорток спінер стає прямим flex-елементом .dialog-form і
   додає порожній gap знизу навіть коли невидимий. display:none — тоді
   зовсім не бере участі в layout, поки форма не в стані .submitting. */
.wpcf7-spinner {
  display: none;
  margin: 0 0 0 10px;
  vertical-align: middle;
}
.wpcf7-form.submitting .wpcf7-spinner { display: inline-block; }