/**
 * Rider Apply — окно с заявкой Rider Project (21.10).
 *
 * Значения — из разметки rider-project-страница.html (пакет 21.10).
 * Поля и кнопка — стили формы Contact (contact-form-info.css), согласие
 * и сообщение об успехе — dealer-form.css: оба файла подключаются раньше
 * этого, поэтому здесь переопределяются отступы и фон .dealer-form у карточки окна.
 *
 * @package AJ1MOTO.COM
 */

/*
 * Окно прокручивается целиком: карточка в потоке с margin: auto — по центру,
 * пока помещается, и без обрезки сверху, когда выше экрана.
 */
.rider-apply {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	display: flex;
	padding: var(--space-24);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.rider-apply[hidden] {
	display: none;
}

/*
 * Без JS ссылка #apply открывает окно (закрытие — кнопкой «Назад»). Со скриптом
 * (класс -ready) видимостью управляет только hidden: смена адреса через
 * history.replaceState не снимает :target.
 */
.rider-apply:target:not(.-ready) {
	display: flex;
}

.rider-apply__backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--color-black-85);
}

.rider-apply__box {
	position: relative;
	width: calc(720 / var(--vw-base) * 100vw);
	max-width: 100%;
	margin: auto;
	padding: calc(40 / var(--vw-base) * 100vw);
	border-radius: var(--radius-14);
	color: var(--color-dark);
	background: var(--color-white);
	scroll-margin-top: 0;
}

.rider-apply__close {
	position: absolute;
	top: var(--space-16);
	right: var(--space-16);
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(40 / var(--vw-base) * 100vw);
	height: calc(40 / var(--vw-base) * 100vw);
	padding: 0;
	border: 0;
	border-radius: 50%;
	font-size: var(--fs-26);
	line-height: var(--lh-100);
	color: var(--color-dark);
	background: var(--color-grey-95);
	cursor: pointer;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.rider-apply__close:hover {
	color: var(--color-white);
	background: var(--color-accent);
}

.rider-apply__eyebrow {
	margin-bottom: var(--space-12);
	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);
}

/* Справа — место под крестик. */
.rider-apply__title {
	margin-bottom: var(--space-10);
	padding-right: var(--space-48);
	font-family: var(--font-display);
	font-size: var(--fs-42);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	color: var(--color-dark);
}

.rider-apply__lead {
	margin-bottom: var(--space-24);
	font-size: var(--fs-16);
	line-height: var(--lh-150);
	color: var(--color-grey-31);
}

/* Карточка формы Contact без своей рамки и фона: окно уже белое. */
.rider-apply__card.contact-fi__form-card {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

@media (max-width: 767px) {
	.rider-apply {
		padding: var(--space-12);
	}

	.rider-apply__box {
		padding: var(--space-24) var(--space-16);
	}

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

	.rider-apply__title {
		font-size: var(--fs-30);
	}

	.rider-apply .contact-form__submit {
		justify-content: center;
		width: 100%;
	}
}