/**
 * Dealer form — форма Find a Dealer (ТЗ V4, п. 3.2–3.3).
 *
 * Поля, кнопка и карточка — из стилей формы страницы Contact
 * (contact-form-info.css: .contact-fi__form-card, .contact-form__*),
 * подключаются вместе с этим файлом. Здесь только то, чего на форме Contact
 * нет: раскладка секции, select, галочка согласия, сообщение об успехе.
 *
 * @package AJ1MOTO.COM
 */

.dealer-form {
	padding-top: var(--space-60);
	padding-bottom: var(--space-60);
	background: var(--color-light);
	scroll-margin-top: var(--space-20);
}

.dealer-form__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}

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

.dealer-form__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	letter-spacing: calc(3 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent);
}

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

/* Замечания №1, п. 7: на ширину контейнера, как у формы Distributor. */
.dealer-form__card {
	width: 100%;
}

/* ===== Select (на форме Contact его нет) ===== */

/*
 * Стрелка — два градиента-треугольника: отдельной иконки в спрайте нет,
 * а системная стрелка выбивается из стиля полей.
 */
.dealer-form .contact-form__select {
	padding-right: var(--space-40);
	background-image: linear-gradient(45deg, transparent 50%, var(--color-grey-45) 50%), linear-gradient(135deg, var(--color-grey-45) 50%, transparent 50%);
	background-position: calc(100% - var(--space-20)) 50%, calc(100% - var(--space-15)) 50%;
	background-size: var(--space-5) var(--space-5), var(--space-5) var(--space-5);
	background-repeat: no-repeat;
	cursor: pointer;
	appearance: none;
}

/* ===== Согласие на обработку данных ===== */

.dealer-form .contact-form__consent {
	margin: var(--space-18) 0 0;
}

.dealer-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.dealer-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-10);
	font-size: var(--fs-13);
	line-height: var(--lh-150);
	color: var(--color-grey-31);
	cursor: pointer;
}

.dealer-form .wpcf7-acceptance input {
	flex-shrink: 0;
	width: var(--space-18);
	height: var(--space-18);
	margin-top: var(--space-2);
	accent-color: var(--color-accent);
	cursor: pointer;
}

.dealer-form .wpcf7-acceptance a {
	text-decoration: underline;
	color: var(--color-dark);
}

.dealer-form .wpcf7-acceptance a:hover {
	color: var(--color-accent);
}

.dealer-form .contact-form__consent + .contact-form__submit-wrap {
	margin-top: var(--space-18);
}

/* ===== Сообщение об успехе на месте формы ===== */

.dealer-form__success {
	display: flex;
	align-items: center;
	gap: var(--space-15);
	width: 100%;
	padding: var(--space-27) calc(28 / var(--vw-base) * 100vw);
	border: calc(1 / var(--vw-base) * 100vw) solid var(--color-grey-90);
	border-radius: var(--radius-14);
	font-size: var(--fs-18);
	color: var(--color-dark);
	background: var(--color-white);
}

/* display: flex перекрыл бы атрибут hidden (rules-tooling §31.4). */
.dealer-form__success[hidden] {
	display: none;
}

.dealer-form__success:focus {
	outline: none;
}

.dealer-form__success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: calc(48 / var(--vw-base) * 100vw);
	aspect-ratio: 1;
	border: calc(1 / var(--vw-base) * 100vw) solid var(--color-accent-30);
	border-radius: var(--radius-10);
	color: var(--color-accent);
	background: var(--color-accent-10);
}

.dealer-form__success-glyph {
	width: calc(24 / var(--vw-base) * 100vw);
	aspect-ratio: 1;
}

@media (max-width: 767px) {
	.dealer-form {
		padding-top: var(--space-40);
		padding-bottom: var(--space-40);
	}

	.dealer-form__inner {
		gap: var(--space-30);
	}

	.dealer-form__head {
		gap: var(--space-15);
	}

	.dealer-form__eyebrow {
		font-size: var(--fs-10);
		letter-spacing: calc(2 / var(--vw-base) * 100vw);
	}

	.dealer-form__title {
		font-size: var(--fs-30);
	}

	.dealer-form__card,
	.dealer-form__success {
		width: 100%;
	}

	.dealer-form__success {
		align-items: flex-start;
		padding: var(--space-20);
		font-size: var(--fs-16);
	}
}