/* Contact Form 7 — подгонка под вёрстку формы .form-section.
   Без display:contents (для предсказуемости во всех браузерах): обёртки CF7
   ведут себя как полноширинные блоки, поля наследуют стили вёрстки. */

/* Обёртка шорткода не добавляет отступов; отступ формы даёт .form-section__form */
.form-section__card .wpcf7 { margin: 0; }

/* Обёртки полей CF7 — полноширинные блоки: инпуты (.input/.textarea, width:100%)
   выглядят и располагаются как прямые поля вёрстки внутри flex-контейнеров. */
.form-section__form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	position: relative;
}

/* Адаптивная textarea (дубль для мобилки): скрыта на десктопе вместе с обёрткой,
   показывается ≤768px — точно как в вёрстке (.form-section__fields .textarea). */
.form-section__fields .wpcf7-form-control-wrap[data-name="comment-m"] { display: none; }
@media (max-width: 768px) {
	.form-section__fields .wpcf7-form-control-wrap[data-name="comment-m"] { display: block; }
}

/* ---- Калькулятор стоимости (.form-calc): 12-колоночный CSS-грид вёрстки.
   CF7 оборачивает каждое поле в .wpcf7-form-control-wrap — грид-элементом становится
   ОБЁРТКА, а не сам <input>. Поэтому span задаём обёрткам по data-name (порядок и
   размеры 1-в-1 с вёрсткой: email/phone/города = half, вес/габариты = quarter).
   Обёртка остаётся обычным боксом-ячейкой, поэтому подсказка валидации
   (.wpcf7-not-valid-tip) рендерится ВНУТРИ ячейки под полем и НЕ ломает сетку и пары
   полей (при display:contents подсказка становилась грид-элементом и «роняла» раскладку).
   Span — только на десктопе (≥769px); на ≤768px вёрстка делает .form-calc одноколоночным
   (grid-template-columns:1fr), и обёртки без span-правил сами встают в столбец. */
.form-section__form .form-calc .wpcf7-form-control-wrap { min-width: 0; }
.form-section__form .form-calc .input { width: 100%; }
@media (min-width: 769px) {
	.form-section__form .form-calc .wpcf7-form-control-wrap[data-name="email"],
	.form-section__form .form-calc .wpcf7-form-control-wrap[data-name="phone"],
	.form-section__form .form-calc .wpcf7-form-control-wrap[data-name="departure"],
	.form-section__form .form-calc .wpcf7-form-control-wrap[data-name="destination"] {
		grid-column: span 6;
	}
	.form-section__form .form-calc .wpcf7-form-control-wrap[data-name="weight"],
	.form-section__form .form-calc .wpcf7-form-control-wrap[data-name="length"],
	.form-section__form .form-calc .wpcf7-form-control-wrap[data-name="width"],
	.form-section__form .form-calc .wpcf7-form-control-wrap[data-name="height"] {
		grid-column: span 3;
	}
}

/* Правая textarea (инфо-блок). В вёрстке textarea — прямой ребёнок .form-section__right,
   и её высоту диктует левая колонка (min-height:100%). CF7 добавляет обёртку
   .wpcf7-form-control-wrap, из-за которой rows=10 навязывает высоту ~268px и растягивает
   строку грида. display:contents убирает обёртку из потока — textarea становится прямым
   ребёнком, раскладка полностью совпадает с вёрсткой. */
.form-section__right .wpcf7-form-control-wrap { display: contents; }

/* Кнопка submit. В вёрстке это был <button class="button form-section__submit">,
   а CF7 отдаёт <input type="submit">. У .button стоит display:inline-flex — на
   <input> flex-раскладка прячет и текст, и фон (кнопка занимает место, но невидима).
   Поэтому здесь ПОЛНОСТЬЮ переопределяем вид кнопки на display:block, не завися от
   inline-flex из .button. Значения повторяют .button + .form-section__submit вёрстки. */
.form-section__form input.wpcf7-submit,
.modal__form input.wpcf7-submit {
	display: block;
	width: 100%;
	min-height: 6.5rem;
	padding: 1.6rem 3rem;
	background-color: var(--akcent);
	color: var(--belyy);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	border: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
	.form-section__form input.wpcf7-submit:hover,
	.modal__form input.wpcf7-submit:hover { background-color: #c92e29; }
}
.form-section__form input.wpcf7-submit:active,
.modal__form input.wpcf7-submit:active { transform: translateY(0.1rem); }
.form-section__form .wpcf7-form-control:focus,
.modal__form .wpcf7-form-control:focus { outline: none; box-shadow: none; }

/* CF7 через JS вставляет спиннер загрузки сразу после submit. Он visibility:hidden,
   но display:inline-block — занимает ~24px + отступы и раздвигает flex/grid, отрывая
   согласие/поля от кнопки (в вёрстке спиннера нет). Убираем из потока во всех формах.
   Отправка не страдает: CF7 блокирует кнопку и показывает ответное сообщение. */
.form-section__form .wpcf7-spinner,
.modal__form .wpcf7-spinner { display: none; }

/* ---- Форма-ряд «Получить КП» / «Записаться на консультацию» (.form-section__row):
   email, телефон, кнопка в один ряд. Обёртки CF7 делаем flex-элементами как .input. ---- */
.form-section__row .wpcf7-form-control-wrap {
	display: block;
	flex: 1 1 0;
	min-width: 0;
}
/* Кнопка в ряду — своя ширина (переопределяем width:100% базового правила submit) */
.form-section__row input.wpcf7-submit {
	width: auto;
	flex-shrink: 0;
}

/* ---- Модалки (.modal__form → .modal__fields grid): обёртки — ячейки грида ---- */
.modal__fields .wpcf7-form-control-wrap { display: block; }
.modal__form input.wpcf7-submit { min-width: 0; }
.modal__form input.input { min-height: 6rem; }
/* модалка «Перезвоните мне» — форма без нижнего отступа (в вёрстке style="margin-bottom:0") */
.modal--callback .wpcf7 { margin-bottom: 0; }
.modal__agreement { margin-top: 0.5rem; }

/* Согласие: приводим CF7 acceptance к виду .form-section__agreement */
.form-section__agreement--cf7 .wpcf7-form-control-wrap { display: block; width: auto; }
.form-section__agreement--cf7 .wpcf7-acceptance,
.form-section__agreement--cf7 .wpcf7-list-item { display: block; margin: 0; }
.form-section__agreement--cf7 .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	cursor: pointer;
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.4;
	color: rgba(16, 22, 26, 0.5);
}
.form-section__agreement--cf7 input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	margin: 0.3rem 0 0 0;
	border: 0.1rem solid #10161A;
	background-color: var(--belyy);
	cursor: pointer;
	position: relative;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.form-section__agreement--cf7 input[type="checkbox"]:checked {
	background-color: var(--akcent);
	border-color: var(--akcent);
}
.form-section__agreement--cf7 input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 0.4rem;
	top: 0.05rem;
	width: 0.5rem;
	height: 0.9rem;
	border: solid var(--belyy);
	border-width: 0 0.2rem 0.2rem 0;
	transform: rotate(45deg);
}
.form-section__agreement--cf7 .wpcf7-list-item-label { flex: 1; }
.form-section__agreement--cf7 .wpcf7-list-item-label a {
	color: var(--chernyy);
	text-decoration: underline;
	text-decoration-color: rgba(16, 22, 26, 0.3);
}

/* Сообщения и подсказки валидации */
.form-section__form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	font-size: 1.2rem;
	color: var(--akcent);
}
.wpcf7-response-output { font-size: 1.4rem; line-height: 1.4; }