/* ── Contact Us — скин CF7-формы поддержки (порт с marcjoutlet) ───────────────
   Классы (.vale-cf__*) оставлены как в исходном шаблоне формы, чтобы
   перенесённый в CF7 шаблон работал без правок разметки. Раскладка самой
   страницы сюда НЕ переносится: на marc-2 страница контактов собрана контентом
   со своими стилями, поэтому здесь только сама форма.

   Цвета — токены темы (--vlt-*), с запасными значениями на случай, если скин
   почему-то не загрузился. Подключается с приоритетом 100, после скина (99). */

/* Второй селектор — на случай, когда форма вставлена шорткодом без обёртки
   .vale-cf (на marcjoutlet её давал шаблон страницы): опознаём форму по её
   собственным строкам. */
.vale-cf,
.wpcf7:has(.vale-cf__row) {
	--vale-cf-accent: var(--vlt-olive, #8A6526);
	--vale-cf-ink: var(--vlt-ink, #221D18);
	--vale-cf-line: var(--vlt-line-strong, #D2C8B8);
	--vale-cf-muted: var(--vlt-dim, #857B70);
	--vale-cf-paper: var(--vlt-bg, #FBF9F5);
	--vale-cf-err: #b3261e;

	font-family: var(--vlt-font-body, system-ui, sans-serif);
	color: var(--vale-cf-ink);
}

/* ── строки и группы ──────────────────────────────────────────────────────── */

.vale-cf__row + .vale-cf__row,
.vale-cf__group + .vale-cf__row,
.vale-cf__row + .vale-cf__group,
.vale-cf__group + .vale-cf__group {
	margin-top: 18px;
}
.vale-cf__group[hidden] {
	display: none;
}
.vale-cf__group .vale-cf__row + .vale-cf__row {
	margin-top: 18px;
}

.vale-cf__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vale-cf-ink);
	margin-bottom: 8px;
}
.vale-cf__req {
	color: var(--vale-cf-accent);
}
.vale-cf__hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--vale-cf-muted);
}

/* CF7 оборачивает каждый контрол в <span class="wpcf7-form-control-wrap">;
   без этого инпут не растягивается на всю ширину строки. */
.vale-cf .wpcf7-form-control-wrap,
.wpcf7:has(.vale-cf__row) .wpcf7-form-control-wrap {
	display: block;
}

/* Подстраховка от autop: inc/contact-form.php выключает его на этой странице,
   но если он вернётся — у строк уже есть свои отступы, и абзацы CF7 их удвоят. */
.vale-cf__row > p,
.vale-cf__row > p:last-child {
	margin: 0;
}
.vale-cf__row br {
	display: none;
}

/* ── поля ─────────────────────────────────────────────────────────────────── */

.vale-cf__input,
.vale-cf__select,
.vale-cf__textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 14px;
	background: var(--vale-cf-paper);
	border: 1px solid var(--vale-cf-line);
	border-radius: var(--vlt-radius, 3px);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--vale-cf-ink);
	transition: border-color 0.2s;
}
.vale-cf__input::placeholder,
.vale-cf__textarea::placeholder {
	color: var(--vlt-text-mute-2, #A79C90);
}
.vale-cf__input:focus,
.vale-cf__select:focus,
.vale-cf__textarea:focus {
	outline: none;
	border-color: var(--vale-cf-accent);
}
.vale-cf__textarea {
	resize: vertical;
	min-height: 140px;
}

/* Системная стрелка селекта выглядит по-разному на каждой платформе — рисуем
   свою, чтобы контрол читался как часть набора. */
.vale-cf__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23221D18' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	padding-right: 38px;
	cursor: pointer;
}

/* Yes / No — переключатель, вокруг которого крутится вся форма, поэтому он
   читается как две кнопки.

   Рамку вешаем на <label>, а не на .wpcf7-list-item-label: CF7 строит
   <label><input><span class="wpcf7-list-item-label">Yes</span></label>, и этот
   span держит только текст — рамка вокруг него оставляет радио снаружи. */
.vale-cf__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.vale-cf__radios .wpcf7-list-item {
	margin: 0;
}
.vale-cf__radios .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 96px;
	padding: 12px 18px;
	border: 1px solid var(--vale-cf-line);
	border-radius: var(--vlt-radius, 3px);
	font-size: 14px;
	color: var(--vale-cf-ink);
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.vale-cf__radios .wpcf7-list-item label:hover {
	border-color: var(--vale-cf-accent);
}
/* :has — потому что выбранный вариант CF7 ничем не помечает, а альтернатива
   была бы JS ради одной рамки. */
.vale-cf__radios .wpcf7-list-item label:has(input:checked) {
	border-color: var(--vale-cf-accent);
	box-shadow: inset 0 0 0 1px var(--vale-cf-accent);
}
.vale-cf__radios input[type="radio"] {
	accent-color: var(--vale-cf-accent);
	width: 15px;
	height: 15px;
	margin: 0;
	flex-shrink: 0;
	cursor: pointer;
}

.vale-cf__checks .wpcf7-list-item {
	margin: 0;
}
.vale-cf__checks .wpcf7-list-item label {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--vale-cf-ink);
	cursor: pointer;
}
.vale-cf__checks input[type="checkbox"] {
	accent-color: var(--vale-cf-accent);
	width: 16px;
	height: 16px;
	margin: 1px 0 0;
	flex-shrink: 0;
	cursor: pointer;
}

/* ── отправка ─────────────────────────────────────────────────────────────── */

.vale-cf__actions {
	margin-top: 28px;
}
.vale-cf__submit {
	background: var(--vale-cf-ink);
	border: 1px solid var(--vale-cf-ink);
	color: var(--vlt-bg, #FBF9F5);
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 16px 48px;
	border-radius: var(--vlt-radius, 3px);
	cursor: pointer;
	line-height: 1;
	transition: background 0.2s, border-color 0.2s;
}
.vale-cf__submit:hover:not(:disabled) {
	background: var(--vale-cf-accent);
	border-color: var(--vale-cf-accent);
}
.vale-cf__submit:disabled {
	opacity: 0.5;
	cursor: default;
}

/* ── обратная связь CF7 ───────────────────────────────────────────────────── */

.vale-cf .wpcf7-not-valid,
.wpcf7:has(.vale-cf__row) .wpcf7-not-valid {
	border-color: var(--vale-cf-err);
}
.vale-cf .wpcf7-not-valid-tip,
.wpcf7:has(.vale-cf__row) .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--vale-cf-err);
}
.vale-cf .wpcf7-response-output,
.wpcf7:has(.vale-cf__row) .wpcf7-response-output {
	margin: 24px 0 0 !important;
	padding: 14px 16px !important;
	border: 1px solid var(--vale-cf-line) !important;
	border-radius: var(--vlt-radius, 3px);
	font-size: 13px;
	line-height: 1.5;
}
.vale-cf .wpcf7-form.invalid .wpcf7-response-output,
.vale-cf .wpcf7-form.failed .wpcf7-response-output,
.wpcf7:has(.vale-cf__row) .wpcf7-form.invalid .wpcf7-response-output,
.wpcf7:has(.vale-cf__row) .wpcf7-form.failed .wpcf7-response-output {
	border-color: var(--vale-cf-err) !important;
	color: var(--vale-cf-err);
}
.vale-cf .wpcf7-form.sent .wpcf7-response-output,
.wpcf7:has(.vale-cf__row) .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--vale-cf-accent) !important;
	color: var(--vale-cf-accent);
}
.vale-cf .wpcf7-spinner,
.wpcf7:has(.vale-cf__row) .wpcf7-spinner {
	margin: 0 0 0 12px;
}

/* ── мобильные ────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	.vale-cf__input,
	.vale-cf__select,
	.vale-cf__textarea {
		font-size: 16px; /* меньше 16px — iOS зумит страницу при фокусе */
	}
	.vale-cf__submit {
		width: 100%;
		padding: 15px 20px;
	}
}