/**
 * Модальное окно «Сделаем расчет за 2 часа». Макет: Figma 39:1220.
 *
 * Координаты макета (канвас 1440):
 *   подложка   rgba(0,0,0,.12)
 *   окно       680x585, радиус 28, белое
 *   картинка   230x490, радиус 24, отступ 30 слева и сверху
 *   уголки     18x18 (4px) на картинке, отступ 25
 *   колонка    300 шириной, слева отступ 50 от картинки
 *   заголовок  +42  Bebas 34
 *   текст      +92  Benzin 16
 *   поля       44 высотой, textarea 107, радиус 8
 *   кнопка     300x50, чёрная, радиус 10
 */

/*
 * align-items: flex-start + margin: auto у окна, а НЕ align-items: center:
 * при центрировании окно, которое выше экрана, вылезает за верхнюю границу
 * контейнера, и до его верха (а там крестик) нельзя доскроллить — классическая
 * ловушка флексбокса. Автоотступы центрируют окно, пока место есть, и
 * схлопываются в ноль, когда его не хватает (KOY-1664).
 */
.sm-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
}

.sm-modal[hidden] {
	display: none;
}

.sm-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.12);
	backdrop-filter: blur(2px);
}

.sm-modal__window {
	position: relative;
	display: flex;
	gap: 50px;
	width: 680px;
	max-width: 100%;
	min-height: 585px;
	margin: auto;
	padding: 30px 70px 30px 30px;
	background: var(--sm-white);
	border-radius: 28px;
}

.sm-modal__close {
	position: absolute;
	top: 12px;
	right: 18px;
	padding: 4px 8px;
	font-size: 26px;
	line-height: 1;
	color: var(--sm-ink-soft);
	transition: color 0.2s ease;
}

.sm-modal__close:hover {
	color: var(--sm-ink);
}

/* --- визуал --- */

.sm-modal__visual {
	position: relative;
	flex-shrink: 0;
	width: 230px;
	height: 490px;
}

.sm-modal__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 24px;
}

.sm-modal__corner {
	--sm-corner-size: 18px;
}

.sm-modal__corner--tl {
	top: 25px;
	left: 25px;
}

.sm-modal__corner--tr {
	top: 25px;
	right: 25px;
}

.sm-modal__corner--bl {
	bottom: 25px;
	left: 25px;
}

.sm-modal__corner--br {
	right: 25px;
	bottom: 25px;
}

/* --- текст и форма --- */

.sm-modal__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding-top: 12px;
}

.sm-modal__title {
	font-family: var(--sm-font-accent);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--sm-ink);
}

.sm-modal__text {
	margin-top: 9px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--sm-ink-soft);
}

.sm-modal__form {
	margin-top: 25px;
}

.sm-modal__form .wpcf7-form p {
	margin: 0;
}

.sm-modal__form .wpcf7-form br {
	display: none;
}

.sm-modal__form input[type="text"],
.sm-modal__form input[type="tel"],
.sm-modal__form input[type="email"],
.sm-modal__form textarea {
	width: 100%;
	margin-bottom: 19px;
	padding: 12px 15px;
	font-family: var(--sm-font);
	font-size: 12px;
	line-height: 1.2;
	color: var(--sm-ink);
	background: #f6f6f6;
	border: 1px solid #c7c7c7;
	border-radius: 8px;
}

.sm-modal__form input[type="text"],
.sm-modal__form input[type="tel"],
.sm-modal__form input[type="email"] {
	height: 44px;
}

.sm-modal__form textarea {
	height: 107px;
	resize: vertical;
}

.sm-modal__form ::placeholder {
	color: var(--sm-ink-soft);
}

/* Ссылка-прикрепление: сам input прячем, кликом служит подпись. */
.sm-modal__attach {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	/* Тот же капс от Shopkeeper, что и у согласий: подпись лежит в <p> формы. */
	text-transform: none;
	letter-spacing: normal;
	color: var(--sm-purple);
	cursor: pointer;
}

/*
 * Системный «Choose file» скрыт: в макете есть только подпись.
 * Поле остаётся в потоке фокуса — клик по подписи открывает выбор файла.
 */
.sm-modal__attach input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sm-modal__attach:focus-within {
	text-decoration: underline;
}

/* Имя выбранного файла показываем сами. */
.sm-modal__attach-name {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	color: var(--sm-ink-soft);
}

.sm-modal__actions {
	margin-top: 28px;
}

.sm-modal__form input[type="submit"] {
	width: 100%;
	height: 50px;
	/*
	 * padding: 0 обязателен. На страницах старого дизайна тема задаёт кнопке
	 * padding: 18px 16px 15px; при box-sizing: border-box и заданной высоте
	 * от содержимого остаётся 7-17px, и подпись уезжает вниз — заказчик
	 * увидел «текст прижат к низу». Без полей строка центрируется сама.
	 */
	padding: 0 !important;
	font-family: var(--sm-font);
	font-size: 15px;
	/* Тема задаёт кнопке line-height: 21px — с ним подпись стоит на 2px ниже центра. */
	font-weight: 500;
	line-height: normal;
	color: var(--sm-white);
	background: var(--sm-black);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.sm-modal__form input[type="submit"]:hover {
	background: #2a2a2a;
}

/* Ловушка антиспама: стили плагина на этом шаблоне сняты. */
.sm-modal__form .maspik-field,
.sm-modal__form [class*="honeypot"] {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

@media (max-width: 700px) {
	.sm-modal__window {
		flex-direction: column;
		padding: 24px;
	}

	.sm-modal__visual {
		width: 100%;
		height: 220px;
	}

	/*
	 * На узких экранах вертикальный кадр обрезается в широкую полосу, и по
	 * центру оказалась бы дорога, а не сам баннер. Сдвигаем видимую полосу
	 * к верхней трети — туда, где на снимке щит с собачкой (KOY-1664).
	 */
	.sm-modal__visual img {
		object-position: 50% 22.5%;
	}
}

/*
 * Ноутбучные экраны: форма выше 900px, и на 1366×768 окно не помещалось
 * целиком — крестик оказывался над верхней кромкой экрана (KOY-1664).
 * Окно ограничиваем высотой экрана, а прокручиваем только колонку с формой:
 * так крестик и картинка остаются на месте, а не уезжают вместе с текстом.
 * На телефонах (до 700px) раскладка колоночная — там прокручивается всё окно
 * целиком, это привычнее, чем полоса прокрутки внутри узкого экрана.
 */
@media (min-width: 701px) {
	.sm-modal__window {
		/* Процент считается от контейнера: он на весь экран минус свои поля. */
		max-height: 100%;
		/* Иначе min-height перебил бы max-height на совсем низких экранах. */
		min-height: min(585px, 100%);
	}

	.sm-modal__visual {
		max-height: 100%;
	}

	.sm-modal__body {
		/* Без min-height: 0 флекс-элемент не даёт себя сжать и не прокручивается. */
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-gutter: stable;
	}
}

/*
 * ---------- Окно подстраивается под высоту экрана (KOY-1664, 17.08) ----------
 *
 * Заказчик: «не нравится, что форма с прокруткой». Прокрутка появлялась потому,
 * что форма выше 900px, а типовой ноутбук даёт 768px. Поэтому размеры внутри
 * окна заданы через clamp(min, N×vh, макет): на высоком экране берётся значение
 * из макета, на низком всё пропорционально ужимается. Прокрутка из блока выше
 * остаётся страховкой на совсем экзотические экраны и в обычной жизни не
 * срабатывает.
 *
 * Правила ниже — только для десктопа: на телефонах раскладка колоночная,
 * там окно листается целиком, и это привычно.
 */
@media (min-width: 701px) {
	.sm-modal__window {
		gap: clamp(22px, 4.4vh, 50px);
		min-height: min(clamp(340px, 52vh, 585px), 100%);
		padding:
			clamp(16px, 2.6vh, 30px)
			clamp(46px, 6.2vh, 70px)
			clamp(16px, 2.6vh, 30px)
			clamp(16px, 2.6vh, 30px);
	}

	/* Картинка ужимается вместе с формой, иначе она задавала бы высоту окна. */
	.sm-modal__visual {
		height: clamp(220px, 44vh, 490px);
	}

	.sm-modal__body {
		padding-top: clamp(0px, 1.1vh, 12px);
	}

	.sm-modal__title {
		font-size: clamp(23px, 3.1vh, 34px);
	}

	.sm-modal__text {
		margin-top: clamp(3px, 0.9vh, 9px);
		font-size: clamp(12px, 1.5vh, 16px);
	}

	.sm-modal__form {
		margin-top: clamp(8px, 2.3vh, 25px);
	}

	.sm-modal__form input[type="text"],
	.sm-modal__form input[type="tel"],
	.sm-modal__form input[type="email"],
	.sm-modal__form textarea {
		margin-bottom: clamp(7px, 1.8vh, 19px);
	}

	.sm-modal__form input[type="text"],
	.sm-modal__form input[type="tel"],
	.sm-modal__form input[type="email"] {
		height: clamp(34px, 4.1vh, 44px);
	}

	/*
	 * !important: на страницах старого дизайна Shopkeeper перебивает высоту
	 * поля своим правилом, и textarea разворачивалась по rows="10" — 170px
	 * вместо 107px из макета. Внутри модалки чужая высота не нужна.
	 */
	.sm-modal__form textarea {
		height: clamp(48px, 9.5vh, 107px) !important;
	}

	.sm-modal .sm-form__consents {
		margin-top: clamp(6px, 1.7vh, 18px);
		gap: clamp(6px, 1vh, 10px);
	}

	.sm-modal .sm-form__actions {
		margin-top: clamp(8px, 2.4vh, 26px);
	}

	.sm-modal__form input[type="submit"] {
		height: clamp(40px, 4.7vh, 50px);
	}
}

/*
 * Совсем низкие экраны (нетбуки, окно браузера в половину экрана). Пропорций
 * из блока выше уже не хватает: самый крупный несжимаемый кусок — текст
 * согласий, две штуки по четыре строки. Ужимаем именно его окружение:
 * убираем отступ слева (строка становится шире и укладывается плотнее),
 * кегль на пункт меньше, поля между элементами фиксированно узкие.
 */
@media (min-width: 701px) and (max-height: 700px) {
	.sm-modal .sm-form__consents {
		margin-top: 6px;
		padding-left: 8px;
	}

	.sm-modal .sm-form__consents .wpcf7-list-item-label {
		font-size: 11px;
	}

	.sm-modal__form input[type="text"],
	.sm-modal__form input[type="tel"],
	.sm-modal__form input[type="email"],
	.sm-modal__form textarea {
		margin-bottom: 8px;
	}

	.sm-modal__form textarea {
		height: clamp(40px, 6.2vh, 62px) !important;
	}

	.sm-modal__form .sm-email-note {
		margin-bottom: 8px;
	}

	.sm-modal .sm-form__actions {
		margin-top: 8px;
	}

	/* На старых страницах тема добавляет кнопке нижний отступ — он тут лишний. */
	.sm-modal__form input[type="submit"] {
		margin-bottom: 0;
	}
}

/*
 * Тот же капс-сюрприз от Shopkeeper, что и с text-transform: на старых
 * страницах текст согласий приходил полужирным (700), Benzin в этом
 * начертании шире и переносился на лишнюю строку — блок согласий занимал
 * 197px против 133px на редизайне.
 */
.sm-modal .sm-form__consents .wpcf7-list-item-label {
	font-weight: 400;
}