.avtogates-form-panel {
  max-width: 620px;
  padding: clamp(24px, 5vw, 46px);
  color: var(--ink, #1c2b24);
  background: var(--cream, #f6f2e9);
  border: 1px solid color-mix(in srgb, var(--pine, #203b2d) 18%, transparent);
}
.avtogates-form-panel form { display: grid; gap: 17px; }
.avtogates-form-title h3 { margin: 0; color: var(--pine, #203b2d); font-family: inherit; }
.avtogates-form-title p, .avtogates-form-note { margin: 10px 0 0; color: var(--muted, #59645d); line-height: 1.55; }
.avtogates-form-panel label { display: grid; gap: 7px; color: var(--pine, #203b2d); font-weight: 700; }
.avtogates-form-panel label > span em { font-style: normal; font-weight: 400; color: var(--muted, #59645d); }
.avtogates-form-panel input:not([type="checkbox"]), .avtogates-form-panel select, .avtogates-form-panel textarea {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 13px; color: inherit; background: #fff;
  border: 1px solid #b8c1b8; border-radius: 0; font: inherit;
  /* Не меньше 16px: иначе iOS Safari приближает страницу при фокусе в поле. */
  font-size: max(16px, 1em);
}
.avtogates-form-panel textarea { min-height: 100px; resize: vertical; }
.avtogates-form-panel input:focus, .avtogates-form-panel select:focus, .avtogates-form-panel textarea:focus { outline: 3px solid color-mix(in srgb, var(--accent, #d89b40) 45%, transparent); outline-offset: 1px; border-color: var(--pine, #203b2d); }
.avtogates-form-consent { grid-template-columns: auto 1fr; align-items: start; gap: 10px !important; font-size: 14px; line-height: 1.45; }
.avtogates-form-consent input { margin-top: 4px; accent-color: var(--pine, #203b2d); }
.avtogates-form-consent a { color: inherit; }
.avtogates-form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.avtogates-form-panel [data-form-error] { margin: 0; color: #9f2020; font-weight: 700; }
.avtogates-form-panel .button { justify-self: start; }

/* Необязательные поля (тип ворот, район, комментарий) свёрнуты в один блок: на телефоне имя,
   телефон, согласие и кнопка отправки видны без прокрутки (WEB-2026-10-03-01). Зона касания
   заголовка — не меньше 48px. */
.avtogates-form-more { border-top: 1px solid #d7ddd5; border-bottom: 1px solid #d7ddd5; }
.avtogates-form-more > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; color: var(--pine, #203b2d); font-weight: 700; list-style: none; }
.avtogates-form-more > summary::-webkit-details-marker { display: none; }
.avtogates-form-more > summary::before { content: "+"; font-weight: 700; }
.avtogates-form-more[open] > summary::before { content: "–"; }
.avtogates-form-more > summary em { font-style: normal; font-weight: 400; color: var(--muted, #59645d); }
.avtogates-form-more > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent, #d89b40) 45%, transparent); outline-offset: 1px; }
/* Отступы — полям, а не display:grid самому <details>: у раскрывающегося блока своя внутренняя раскладка. */
.avtogates-form-more > label { margin-top: 14px; }
.avtogates-form-more > label:last-child { margin-bottom: 17px; }

/* Кнопка отправки — это <div class="wp-block-button"> со ссылкой-кнопкой внутри, а не .button, поэтому
   прежнее правило .button на неё не действовало: на телефоне она оставалась узкой. */
@media (max-width: 700px) {
  .avtogates-form-panel { padding: 25px 20px; }
  .avtogates-form-panel .button { width: 100%; }
  .avtogates-form-panel form { gap: 14px; }
  .avtogates-form-panel .wp-block-button { width: 100%; }
  .avtogates-form-panel .wp-block-button__link { box-sizing: border-box; width: 100%; min-height: 52px; text-align: center; }
}

/* Подтверждение отправки. Раньше это была строка обычного текста на месте скрытой формы:
   при высокой форме она оказывалась за пределами экрана, и посетитель не понимал, ушла ли
   заявка. Панель занимает заметную высоту, чтобы страница не схлопывалась, и видна сразу. */
.avtogates-form-success {
  display: grid; align-content: center; gap: 10px; min-height: 240px;
  padding: clamp(24px, 4vw, 34px); color: var(--ink, #1c2b24); background: #fff;
  border: 1px solid color-mix(in srgb, var(--pine, #203b2d) 18%, transparent);
}
.avtogates-form-success:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent, #d89b40) 45%, transparent); outline-offset: 2px; }
.avtogates-form-success__title { margin: 0; color: var(--pine, #203b2d); font-size: clamp(22px, 3.4vw, 28px); font-weight: 700; line-height: 1.15; }
.avtogates-form-success__title::before { content: "✓"; margin-right: 10px; color: var(--accent, #d89b40); }
.avtogates-form-success__number { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.avtogates-form-success__number:empty { display: none; }
.avtogates-form-success__text { margin: 0; max-width: 42ch; color: var(--muted, #59645d); line-height: 1.55; }

/* Атрибут hidden должен побеждать display: grid выше. Без этого правила панель «Заявка принята»
   была видна посетителю до отправки, а форма не пряталась после неё: .avtogates-form-panel form и
   .avtogates-form-success задают display, и оно перебивает браузерное [hidden]{display:none}
   (дефект, найден 29.09.2026 на dev и production). */
.avtogates-form-panel [hidden] { display: none !important; }

/* Выбранная комплектация из адреса (плагин 1.4.1): строка под полем «Что вас интересует». */
.avtogates-form-selected { margin: -6px 0 0; color: var(--pine, #203b2d); font-size: 14px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }