/**
 * Общая раскладка формы заявки.
 *
 * Одна и та же форма Contact Form 7 выводится в трёх местах: в модалке,
 * в блоке расчёта и в блоке CTA на главной. Раньше эти правила лежали
 * в cta.css, и на страницах без блока CTA форма разъезжалась — согласия
 * наезжали друг на друга, кнопка уходила влево.
 *
 * Здесь только раскладка, общая для всех мест. Внешний вид полей
 * (цвет, размер, фон) задаёт секция, в которой форма стоит: в модалке
 * она на белом, в блоке расчёта — на тёмном.
 */

/*
 * Contact Form 7 оборачивает поля в общий <p>. Без display: contents
 * сетка видит один элемент — поля вставали друг под друга, а согласия
 * наезжали. Абзац исключаем из раскладки, элементами сетки становятся поля.
 */
.sm-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.sm-form__grid > p,
.sm-form__consents > p {
	display: contents;
}

/*
 * Каждое согласие — отдельной строкой на всю ширину, а не в две колонки.
 * Блок сдвинут правее, чтобы не прижимался к краю формы.
 */
.sm-form__consents {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	align-items: start;
	margin-top: 18px;
	padding-left: 22px;
}

.sm-form__consents .wpcf7-list-item {
	display: block;
	margin: 0;
}

.sm-form__consents .wpcf7-list-item label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

/*
 * Размер увеличен по просьбе заказчика (KOY-1664): 8px из макета читались
 * с трудом, особенно на тёмной подложке формы расчёта. 17.08 добавили ещё
 * пункт — мелкий текст согласий заказчик просил поправить отдельно.
 *
 * text-transform обязателен: на страницах старого дизайна Shopkeeper вешает
 * uppercase на <p> внутри форм, а согласие лежит именно в нём и наследует капс
 * (на /print/ текст занимал 92px вместо 62px и раздувал модалку). Своё
 * объявление на самом тексте перебивает наследование при любой специфичности.
 */
.sm-form__consents .wpcf7-list-item-label {
	font-size: 12px;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
	color: #b9b9c4;
}

/*
 * Названия документов в согласиях — ссылки. Подчёркивание обязательно:
 * текст мелкий и светлый, без него ссылка неотличима от остального.
 */
.sm-consent-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.sm-consent-link:hover {
	color: var(--sm-purple);
}

/* Галочка растёт вместе с текстом, иначе теряется рядом с ним. */
.sm-form__consents input[type="checkbox"] {
	flex-shrink: 0;
	width: 13px;
	height: 13px;
	margin-top: 2px;
}

/* ---------- Кнопка ---------- */

.sm-form__actions {
	margin-top: 26px;
	text-align: center;
}

.sm-form__actions p {
	margin: 0;
}

.sm-form__submit {
	position: relative;
	display: inline-block;
	color: var(--sm-black);
}

/* Спиннер Contact Form 7 в потоке смещал бы кнопку влево. */
.sm-form__submit .wpcf7-spinner {
	position: absolute;
	top: 50%;
	left: 100%;
	margin: 0 0 0 12px;
	transform: translateY(-50%);
}

/*
 * KOY-1850: обязательный e-mail. Имя и телефон стоят в двух колонках,
 * e-mail — третьим полем, поэтому растягиваем его на всю ширину сетки,
 * иначе рядом с ним оставалась бы пустая ячейка.
 */
.sm-form__grid .wpcf7-form-control-wrap[data-name="sm-email"] {
	grid-column: 1 / -1;
}

/* ---------- Подпись под полем e-mail (KOY-1850) ---------- */

/*
 * «Мелко, но читаемо»: 12px — нижняя граница читаемости на этом сайте,
 * ниже уходят только согласия. Цвет по умолчанию тёмный приглушённый —
 * формы стоят на светлом (модалка, попапы, карточка конструкции);
 * для тёмных блоков главной цвет переопределён ниже.
 */
.sm-email-note {
	display: block;
	margin: 0 0 12px;
	font-family: var(--sm-font, inherit);
	/*
	 * 12px на десктопе; на узких экранах текст в 12px переносился на вторую
	 * строку, поэтому кегль привязан к ширине окна — строка остаётся одна
	 * вплоть до 320px (заказчик просил именно одну строку).
	 */
	font-size: clamp(9px, 2.9vw, 11px);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	color: #6b6b76;
}

/*
 * Форма в хиро на /print/: тема не прячет <br> внутри формы, поэтому подпись
 * отбивало на строку ниже поля. Перенос убран в самой форме, здесь только
 * прижимаем подпись к полю (у инпута свой margin-bottom 14px).
 */
.prhero__form .sm-email-note {
	margin: -10px 0 12px;
	padding-left: 16px;
}

/*
 * В модалке и блоке расчёта у полей свой нижний отступ (19px и 7px),
 * поэтому подпись подтягиваем к полю отрицательным margin.
 */
/*
 * В модалке колонка формы узкая (~285px на десктопе), а подпись в одну строку
 * занимает ~270px — выравнивание по тексту поля съедало последние пиксели
 * и строка ломалась пополам. Здесь подпись идёт по левому краю поля.
 */
.sm-modal__form .sm-email-note {
	margin: -14px 0 19px;
	padding-left: 0;
}

.sm-calc__form .sm-email-note {
	margin: 1px 0 9px;
	padding-left: 21px;
	color: #b9b9c4;
}

.sm-cta__form .sm-email-note {
	padding-left: 20px;
	color: #b9b9c4;
}

/*
 * В блоке CTA имя и телефон стоят в две колонки: подпись, как и само поле
 * e-mail, занимает всю ширину сетки и прижата к полю (gap сетки — 14px).
 */
.sm-form__grid .sm-email-note {
	grid-column: 1 / -1;
	margin: -8px 0 0;
}

/* Форма на карточке конструкции и попапы Popup Maker — светлый фон. */
.address-cta-form .sm-email-note {
	margin: -6px 0 14px;
}

.pum-container .sm-email-note {
	margin: 2px 0 10px;
}

/*
 * На узких экранах выравнивание подписи по тексту поля съедает 20px ширины,
 * и строка ломается пополам. Ниже 480px отступ снимаем — подпись идёт
 * по левому краю формы, зато остаётся в одну строку (просьба заказчика).
 */
@media (max-width: 480px) {
	.sm-modal__form .sm-email-note,
	.sm-calc__form .sm-email-note,
	.sm-cta__form .sm-email-note,
	.prhero__form .sm-email-note {
		padding-left: 0;
	}
}