/* Поля форм и короткая форма заявки.
 *
 * Эти правила лежали в quiz.css и sections.css, а те грузятся только на
 * главной. Попап «Перезвоните мне» при этом есть на каждой странице - и на
 * внутренних он выезжал сломанным: подпись «Телефон» вставала в строку рядом
 * с полем вместо строки над ним, а ловушка для ботов («Сайт») показывалась
 * как обычное видимое поле. Заполнив её, человек получил бы отказ, потому что
 * заявка с заполненной ловушкой отбрасывается как спам.
 *
 * Поэтому файл общий и подключается на всех страницах, до site.css - там
 * лежат правила, которые эти перекрывают (состояние ошибки поля, мессенджеры).
 */

/* --- Поле ввода ------------------------------------------------------------ */

.field {
	display: grid;
	gap: 4px;
}

.field__label {
	font-size: var(--fs-small);
	color: var(--c-text-muted);
}

.field__input {
	width: 100%;
	padding: clamp(8px, 0.7vw, 12px) clamp(14px, 1.25vw, 24px);
	border: 1.5px solid var(--c-gray-300);
	border-radius: var(--r-pill);
	background: var(--c-white);
	/* Не меньше 16px. Safari на iPhone принудительно увеличивает страницу,
	   когда человек ставит курсор в поле со шрифтом мельче 16px, и обратно
	   её не возвращает: попап оказывается шире экрана, появляется
	   горизонтальная прокрутка, крестик уходит за край. --fs-body на
	   телефоне даёт около 15px, поэтому берём максимум из двух. */
	font-size: max(16px, var(--fs-body));
}

.field__input:focus {
	border-color: var(--c-gold-deep);
	outline: none;
}

/* Ловушка для ботов: не показываем, но и не выкидываем из потока для скринридеров. */
.quiz__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Короткая форма заявки -------------------------------------------------- */

.form-short__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.form-short__field {
	flex: 1 1 240px;
}

.form-short .consent {
	margin-top: 12px;
	max-width: 620px;
}

.form-short--light .consent {
	color: rgba(255, 255, 255, 0.75);
}

.form-short__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-short__error {
	margin-top: 10px;
	color: #ffb4a8;
	font-size: var(--fs-small);
}