/* Contact Form 7 — совместимость с вёрсткой темы */

/*
 * CF7 оборачивает <form> в <div class="wpcf7">.
 * display: contents убирает обёртку из раскладки — <form> встаёт на место.
 */
.wpcf7 {
	display: contents;
}

/*
 * Каждое поле CF7 обёрнуто в <span class="wpcf7-form-control-wrap">.
 * Делаем его блочным, чтобы он корректно участвовал в flex/grid родителей.
 */
.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	min-width: 0;
}

/*
 * В flex-строках обёртка должна расти наравне с соседними полями.
 * Contacts: два поля имя + телефон в ряд.
 * form-step__result-inputs: имя + телефон в последнем шаге калькулятора.
 * foto-step__inputs: имя + телефон в форме фото.
 */
.contacts__form-inputs .wpcf7-form-control-wrap,
.form-step__result-inputs .wpcf7-form-control-wrap {
	flex: 1 1 0;
}

/*
 * foto-step__inputs — display: grid (repeat(2, 1fr)).
 * CF7 оборачивает каждый input в span.wpcf7-form-control-wrap.
 * Span растягивается на всю ячейку сетки, но input внутри без явного
 * width остаётся встроенного размера. Задаём width: 100% явно.
 */
.foto-step__inputs input {
	width: 100%;
}

/*
 * form-step__info-inputs: сетка 6 колонок с nth-child на <input>.
 * Теперь прямые потомки — обёртки, переносим grid-column на них.
 */
.form-step__info-inputs .wpcf7-form-control-wrap:nth-child(1),
.form-step__info-inputs .wpcf7-form-control-wrap:nth-child(2) {
	grid-column: span 3;
}

.form-step__info-inputs .wpcf7-form-control-wrap:nth-child(n+3) {
	grid-column: span 2;
}

/* ─── Радио-кнопки CF7 ──────────────────────────────────────────────────── */

/*
 * CF7 рендерит [radio] как:
 *   span.wpcf7-form-control-wrap
 *     span.wpcf7-form-control.wpcf7-radio
 *       span.wpcf7-list-item
 *         label
 *           input[type=radio]
 *           span.wpcf7-list-item-label   ← текст варианта
 *
 * Нам нужно, чтобы <label> стали прямыми потомками grid/flex-контейнера
 * (.form-step__state-labels, .form-step__documents-labels).
 * display: contents убирает промежуточные обёртки из раскладки.
 */
.form-step__state-labels .wpcf7-form-control-wrap,
.form-step__documents-labels .wpcf7-form-control-wrap,
.wpcf7-form-control.wpcf7-radio,
.wpcf7-list-item {
	display: contents;
}

/*
 * Оригинальный CSS применяет к span внутри label стили кастомного кружка:
 *   position: absolute; left: 0.9375rem; width/height: 1.125rem; border-radius: 50%;
 * Теперь этот «span» — .wpcf7-list-item-label с текстом внутри.
 * Отменяем позиционирование, чтобы текст оставался в потоке.
 */
.form-step__state label .wpcf7-list-item-label,
.form-step__documents label .wpcf7-list-item-label {
	position: static !important;
	width: auto !important;
	height: auto !important;
	border: none !important;
	border-radius: 0 !important;
	-webkit-transform: none !important;
	transform: none !important;
	-webkit-transition: none !important;
	transition: none !important;
	left: auto !important;
}

/*
 * Воссоздаём внешний кружок через ::before на .wpcf7-list-item-label.
 * Свойства взяты из .form-step__state label span (style.min.css, ~3412).
 */
.form-step__state label .wpcf7-list-item-label::before,
.form-step__documents label .wpcf7-list-item-label::before {
	content: '';
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0.9375rem;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	border: 0.0625rem solid transparent;
	-webkit-transition: border-color 0.4s ease;
	transition: border-color 0.4s ease;
	box-sizing: border-box;
}

/* Активное состояние: красная граница кружка */
.form-step__state label input:checked + .wpcf7-list-item-label::before,
.form-step__documents label input:checked + .wpcf7-list-item-label::before {
	border-color: #E52421;
}

/*
 * Внутренняя точка: оригинальный .form-step__state label span::after уже
 * применится к .wpcf7-list-item-label::after (input + span::after работает).
 * Но left: 50% позиционирует точку по центру текстового span, а нужно —
 * по центру кружка ::before (left: 0.9375rem + 0.5625rem = 1.5rem).
 */
.form-step__state label .wpcf7-list-item-label::after,
.form-step__documents label .wpcf7-list-item-label::after {
	left: 1.5rem;
}

/* ─── Кнопка «Далее» — заблокированное состояние ───────────────────────── */

.form-step__next:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ─── Сообщения CF7 ─────────────────────────────────────────────────────── */

.wpcf7 form .wpcf7-response-output {
	margin: 1.25rem 0 0 !important;
	padding: 0.625rem 0.9375rem !important;
	border-radius: 0.5rem;
	border-width: 1px;
	font-size: 0.875rem;
	line-height: 1.4;
}

.wpcf7-not-valid-tip {
	font-size: 0.8125rem;
	margin-top: 0.25rem;
}