/**
 * Distributor form — заявка дистрибьютора (ТЗ V4, п. 7.2).
 *
 * Надстройка над dealer-form.css и contact-form-info.css (подключаются
 * раньше этого файла): поля, select, согласие и кнопка — оттуда. Здесь —
 * шапка с пометкой справа, вводный текст, шесть блоков полей (номер,
 * заголовок, подпись слева; поля справа), группы галочек и успех с кнопками.
 * Макет 05 — только состав и группировка полей (ТЗ), оформление — формы Contact.
 *
 * @package AJ1MOTO.COM
 */

/* Секция белая: соседи (чек-лист и блок Contact) — светлые. */
.distributor-form {
	background: var(--color-white);
}

/* ===== Шапка ===== */

.distributor-form__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.distributor-form__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-20);
}

.distributor-form__note {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-12);
	letter-spacing: calc(1 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-grey-31);
}

.distributor-form__note-glyph {
	--icon-cutout: var(--color-white);

	flex-shrink: 0;
	width: calc(16 / var(--vw-base) * 100vw);
	aspect-ratio: 1;
	color: var(--color-accent);
}

.distributor-form__intro {
	width: calc(900 / var(--vw-base) * 100vw);
	max-width: 100%;
	font-size: var(--fs-16);
	line-height: var(--lh-156);
	color: var(--color-grey-31);
}

/* ===== Карточка и блоки полей ===== */

.distributor-form .distributor-form__card {
	width: 100%;
}

/* Блок: слева номер, заголовок и подпись; справа поля. */
.distributor-form__group {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 9fr);
	gap: var(--space-40);
}

.distributor-form__group + .distributor-form__group {
	margin-top: var(--space-30);
	padding-top: var(--space-30);
	border-top: calc(1 / var(--vw-base) * 100vw) solid var(--color-grey-90);
}

.distributor-form__group-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.distributor-form__group-num {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	letter-spacing: calc(2 / var(--vw-base) * 100vw);
	color: var(--color-accent);
}

.distributor-form__group-title {
	font-family: var(--font-display);
	font-size: var(--fs-26);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	color: var(--color-dark);
}

.distributor-form__group-lead {
	font-size: var(--fs-14);
	line-height: var(--lh-150);
	color: var(--color-grey-31);
}

/*
 * Интервалы между рядами и полями внутри блока: в стилях формы Contact
 * пары соседей заданы только на уровне формы (rules-tooling §34.5).
 */
.distributor-form__fields > * + * {
	margin-top: var(--space-18);
}

/* Подпись в две строки у соседа не сдвигает поля ряда: подписи прижаты к полям снизу. */
.distributor-form .contact-form__row .contact-form__field {
	justify-content: flex-end;
}

/* Отказ от звёздочек макета: необязательные поля помечены в подписи. */
.distributor-form__optional {
	text-transform: none;
	color: var(--color-grey-67);
}

/* ===== Группы галочек (multiselect и Yes / No) ===== */

.distributor-form .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-10);
}

.distributor-form .wpcf7-checkbox .wpcf7-list-item {
	margin: 0;
}

.distributor-form .wpcf7-checkbox label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	min-height: calc(44 / var(--vw-base) * 100vw);
	padding: 0 var(--space-15);
	border: calc(1 / var(--vw-base) * 100vw) solid var(--color-grey-90);
	border-radius: var(--radius-7);
	font-size: var(--fs-14);
	color: var(--color-dark);
	background: var(--color-light);
	cursor: pointer;
	transition: border-color var(--transition-base);
}

.distributor-form .wpcf7-checkbox label:hover,
.distributor-form .wpcf7-checkbox label:has(input:checked) {
	border-color: var(--color-accent);
}

.distributor-form .wpcf7-checkbox input {
	flex-shrink: 0;
	width: var(--space-16);
	height: var(--space-16);
	margin: 0;
	accent-color: var(--color-accent);
	cursor: pointer;
}

/* Согласие — отдельной полосой под блоками. */
.distributor-form .contact-form__consent {
	margin-top: var(--space-30);
	padding-top: var(--space-30);
	border-top: calc(1 / var(--vw-base) * 100vw) solid var(--color-grey-90);
}

/* ===== Успех ===== */

.distributor-form .distributor-form__success {
	align-items: flex-start;
	width: 100%;
	padding: var(--space-40);
}

.distributor-form__success-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-15);
}

.distributor-form__success-title {
	font-family: var(--font-display);
	font-size: var(--fs-30);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	color: var(--color-dark);
}

.distributor-form__success-text {
	width: calc(760 / var(--vw-base) * 100vw);
	max-width: 100%;
	font-size: var(--fs-16);
	line-height: var(--lh-156);
	color: var(--color-grey-31);
}

.distributor-form__success-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-15);
	margin-top: var(--space-10);
}

@media (max-width: 767px) {
	.distributor-form__header {
		gap: var(--space-15);
	}

	.distributor-form__top {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-15);
	}

	.distributor-form__note {
		font-size: var(--fs-10);
	}

	.distributor-form__intro {
		width: 100%;
		font-size: var(--fs-15);
	}

	.distributor-form__group {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-20);
	}

	.distributor-form__group + .distributor-form__group {
		margin-top: var(--space-25);
		padding-top: var(--space-25);
	}

	.distributor-form__group-title {
		font-size: var(--fs-24);
	}

	.distributor-form__fields > * + * {
		margin-top: var(--space-14);
	}

	.distributor-form .wpcf7-checkbox label {
		font-size: var(--fs-13);
	}

	.distributor-form .contact-form__consent {
		margin-top: var(--space-25);
		padding-top: var(--space-25);
	}

	/* Иконка над текстом: в ряд она отнимала 70px, и надписи кнопок переносились. */
	.distributor-form .distributor-form__success {
		flex-direction: column;
		padding: var(--space-20);
	}

	/* Колонка с align-items: flex-start сжала бы тело по содержимому (rules-tooling §34.3). */
	.distributor-form__success-body {
		width: 100%;
	}

	.distributor-form__success-title {
		font-size: var(--fs-26);
	}

	.distributor-form__success-text {
		width: 100%;
		font-size: var(--fs-15);
	}

	.distributor-form__success-actions {
		flex-direction: column;
		align-self: stretch;
		gap: var(--space-10);
	}

	/* Поля 32 у -dark/-outline переносили стрелку «→» на вторую строку при ширине 293. */
	.distributor-form__success-actions .btn {
		padding-left: var(--space-15);
		padding-right: var(--space-15);
		text-align: center;
	}
}