/* =========================================================================
   form.css — блок заявки и форма внутри него.

   Отдельный файл, потому что форма стоит в двух разных местах: в карточке
   товара (там подключён product.css) и на странице контактов (там его нет).
   Держать её стили в product.css значило бы тащить четыреста строк вёрстки
   товара на страницу, где никакого товара нет.

   Подключается: страницами модели вместе с product.css и страницей контактов.
   ========================================================================= */

/* ---------- 1. Блок вокруг формы ----------------------------------------- */

/*
   Кнопки «Оставить заявку» со всего сайта ведут сюда, на якорь #request.
   Место под шапку и липкую панель оставляет scroll-padding-top у html
   (base.css); scroll-margin-top добавляет к нему 16px воздуха над блоком.
*/
.request {
    padding-block: 40px;
    scroll-margin-top: 16px;
}

.request__box {
    max-width: 640px;
    padding: 28px 24px;
    border: 1px solid var(--c-border);
    border-radius: 12px;
}

/*
   Блок с рамкой и классом container: container растягивает его на всю
   ширину экрана, и на телефоне рамка ложилась прямо на края экрана.
   Ширина за вычетом полей сайта возвращает блоку отступы по бокам, как у
   всего остального содержимого (проверка 07.10).
*/
.request__box.container {
    width: calc(100% - 2 * var(--gutter));
}

.request__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-heading);
}

.request__text {
    margin-top: 8px;
    font-size: 15px;
    color: var(--c-muted);
}

/* Выбранная модель и вариант: «HUAWEI nova 14 Pro · Голубой, 512 ГБ». */
.request__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    font-size: 15px;
}

.request__model {
    font-weight: 700;
    color: var(--c-heading);
}

.request__variant {
    color: var(--c-muted);
}

/* «Другая модель» на странице контактов (модель пришла из ?model=, 14.10):
   неброская ссылка рядом с названием — вторичное действие, не кнопка. */
.request__change {
    color: var(--c-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.request__change:hover {
    color: var(--c-heading);
}

.request__actions {
    margin-top: 20px;
}

/* ---------- 2. Форма ------------------------------------------------------ */

.lead-form {
    margin-top: 20px;
}

.lead-form__row + .lead-form__row {
    margin-top: 16px;
}

.lead-form__label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-heading);
}

/*
   width: 100% плюс box-sizing из base.css: поле занимает всю ширину блока
   и не вылезает за него из-за padding.

   font-size: 16px на телефоне обязателен — при меньшем размере Safari на iOS
   приближает страницу, как только палец попадает в поле, и обратно уже
   не отдаляет.
*/
.lead-form__input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    transition: border-color 0.15s var(--ease);
}

.lead-form__input:hover {
    border-color: rgba(0, 0, 0, 0.28);
}

/* Видимая рамка фокуса обязательна: по форме ходят и с клавиатуры. */
.lead-form__input:focus-visible {
    outline: 2px solid var(--c-heading);
    outline-offset: 1px;
    border-color: var(--c-heading);
}

.lead-form__hint {
    margin-top: 6px;
    font-size: 13px;
    color: var(--c-muted);
}

/* ---------- 3. Согласие --------------------------------------------------- */

/*
   Галочка и текст — сетка из двух колонок, а не флекс: при переносе текста
   на вторую строку флекс прижал бы галочку к центру, а grid держит её
   на первой строке, напротив начала текста.
*/
.lead-form__consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-muted);
}

/* 24×24 — минимальная зона касания по WCAG 2.2 (критерий 2.5.8). Было 18px:
   единственная обязательная галочка формы, и в неё промахивались пальцем. */
.lead-form__consent input {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--c-heading);
}

/* Поле, в котором сервер нашёл ошибку. Цвет не единственный признак:
   aria-invalid в разметке сообщает то же скринридеру, а текст ошибки
   написан словами под формой. */
.lead-form__input[aria-invalid="true"] {
    border-color: #a02020;
}

/* У галочки рамку не перекрасить — обводим её контуром того же цвета.
   Без этого ошибка «дайте согласие» видна только текстом под кнопкой. */
.lead-form input[type="checkbox"][aria-invalid="true"] {
    outline: 2px solid #a02020;
    outline-offset: 2px;
}

.lead-form__consent a {
    color: var(--c-heading);
    text-decoration: underline;
}

/* ---------- 4. Кнопка и сообщения ----------------------------------------- */

.lead-form__submit {
    margin-top: 20px;
    width: 100%;
}

@media (min-width: 768px) {
    .lead-form__submit {
        width: auto;
        min-width: 220px;
    }
}

/* Пока запрос в пути кнопка гаснет: два нажатия подряд — две одинаковые
   заявки у менеджера. */
.lead-form__submit[disabled] {
    opacity: 0.5;
    cursor: default;
}

.lead-form__message:empty {
    display: none;
}

.lead-form__message {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.5;
}

.lead-form__ok {
    padding: 12px 16px;
    border-radius: 8px;
    background: #eef7f0;
    color: #1c6b34;
}

.lead-form__errors {
    margin: 0;
    padding: 12px 16px 12px 32px;
    border-radius: 8px;
    background: #fdeeee;
    color: #a02020;
}

/*
   Приём заявок выключен в админке — вместо формы плашка с объяснением
   и кнопкой звонка. Серая подложка (--c-surface), как у карточек: это
   не ошибка посетителя, а состояние сайта, поэтому не красная.
*/
.lead-closed {
    padding: 20px;
    border-radius: 12px;
    background: var(--c-surface);
}

.lead-closed__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.lead-closed__actions {
    margin: 16px 0 0;
}

.lead-closed__more {
    margin: 12px 0 0;
    font-size: 15px;
}

/* ---------- 5. Ловушка ---------------------------------------------------- */

/*
   Поле-приманка для ботов. Прячем позиционированием, а не display: none
   и не атрибутом hidden: часть ботов такие поля пропускает, а нам нужно
   ровно обратное — чтобы бот его нашёл и заполнил.

   Человеку оно недоступно всеми способами сразу: клип в один пиксель,
   aria-hidden в разметке, tabindex="-1" на самом поле.

   Приём тот же, что у .visually-hidden в base.css, и по той же причине
   не через left: -9999px: вынесенный за левый край элемент внутри блока
   с горизонтальной прокруткой однажды уже растянул страницу вбок (этап 4).
   clip: rect(0 0 0 0) не растягивает ничего никогда.
*/
.lead-form__trap {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}