/* ФОРМА ЗАЯВКИ - СВОЙ ФАЙЛ, И ЭТО ПОЧИНКА ГОЛОЙ ФОРМЫ У ПОСЕТИТЕЛЯ (14.09.2026).

   ЧТО БЫЛО. Правила формы лежали в `main.css`, а он к странице дела не подключается ни у
   посетителя, ни на холсте редактора - и подключаться не может: в нём 33 селектора вида `*`,
   `html`, `body`, то есть он красит документ целиком и перекрасил бы кабинет. Запрет записан
   замками в двух наборах и верен.

   ЧЕМ ЭТО ВЫХОДИЛО НАРУЖУ. Замерено владельцем и подтверждено замером на живой странице
   контактов: у поля браузерная рамка `2px inset` и радиус 0 - форма стояла голой; а ЛОВУШКА
   для роботов (`.sc-form__hp`) была ВИДНА человеку вместе с подписью «Do not fill in this field».
   Второе хуже первого: человек её заполняет, и его заявка молча отбрасывается как спам.

   ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ПОДКЛЮЧЕНИЕ `main.css` У ПОСЕТИТЕЛЯ. Здесь нет ни одного
   правила без префикса слоя - только `.sc-form*`, `.sc-field*`, - поэтому файл
   безопасен и для ХОЛСТА редактора: на нём та же форма стояла такой же голой. Подключение
   `main.css` починило бы одну сторону из двух и держалось бы на том, что никто не перенесёт
   его в общую цепочку.

   ХОЗЯИН У ПРАВИЛ ОДИН: из `main.css` они СНЯТЫ, а не скопированы. Витрина темы получает их
   тем же файлом - он подключается рядом с `main.css`.
*/

/* --- Формы --- */

.sc-form {
	display: grid;
	gap: 1rem;
	padding: clamp(1.25rem, 1rem + 1.25vw, 2rem);
	background: var(--sc-color-surface-1);
	border: 1px solid var(--sc-color-line);
	border-radius: calc(22px * var(--ls-r-k,1));
}

.sc-form__title { margin-block-end: 0; }

.sc-form__note,
.sc-form__privacy {
	margin: 0;
	font-size: 0.9rem;
	opacity: 0.8;
}

.sc-field {
	display: grid;
	gap: 0.35rem;
	/* Радиус поля объявлен ПЕРЕМЕННОЙ, потому что читателей у него два: само поле и обёртка
	   `.iti` у поля телефона (`phone.css`), на которой стоит кольцо фокуса. Число в двух
	   местах разошлось бы при первой правке. */
	--sc-field-r: calc(12px * var(--ls-r-k,1));
}

.sc-field__label {
	font-size: 0.9rem;
	font-weight: 600;
}

.sc-field__req { color: var(--sc-color-primary); margin-inline-start: 0.15em; }

.sc-field__input {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	background: var(--sc-color-base);
	color: var(--sc-color-contrast);
	/* Рамка поля - орган управления, а не разделитель: у неё свой порог видимости (3:1) и
	   своя роль. Запас на `line` оставлен для установки, где палитру печатает старый код. */
	border: 1px solid var(--sc-color-edge, var(--sc-color-line));
	border-radius: var(--sc-field-r);
	font: inherit;
}

/* Поле телефона - то же поле: рамка загорается и тогда, когда фокус ушёл на флаг страны
   внутри неё (`.iti` - обёртка библиотеки, `phone.css`). Одно правило на все поля формы. */
.sc-field__input:focus-visible,
.sc-field .iti:focus-within .sc-field__input {
	border-color: var(--sc-color-primary);
}

textarea.sc-field__input { min-height: 96px; resize: vertical; }

/* Ошибка сообщается текстом, а не только цветом рамки. */
.sc-field__error:empty { display: none; }

.sc-field__error {
	margin: 0;
	color: var(--sc-color-primary);
	font-size: 0.85rem;
	font-weight: 600;
}

.sc-field.has-error .sc-field__input {
	border-color: var(--sc-color-primary);
	border-width: 2px;
}

.sc-form__status:empty { display: none; }
.sc-form__status { margin: 0; font-weight: 600; }

/* Ловушка для ботов: скрыта визуально, но не display:none - часть ботов
   игнорирует полностью скрытые поля.

   ИМЯ ПОД ФОРМОЙ, А НЕ ОБЩЕЕ `.sc-hp` (30.09.2026). Общее занято окном Help кабинета, а этот файл
   грузится и на холсте редактора сайта: правило уносило окно помощи на -9999px, и пункт Help
   в редакторе не открывался вовсе. */
.sc-form__hp {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}