/* ============================================================
   ФРЦ — форма заявки на финансовый паспорт. 25.08.2026

   Обычный CSS: без препроцессора, без сборки, без CDN и внешних
   шрифтов. Подключается одним <link>, порядок относительно стилей
   лендинга значения не имеет.

   ── Что этот файл описывает ────────────────────────────────────

   Только то, чего в стилях лендинга ещё не было:

   1. плитки выбора цели вместо выпадающего списка;
   2. подсказки и сообщения об ошибках под полями;
   3. ссылку «Добавить комментарий», разворачивающую поле;
   4. подпись .field-legend — для вопроса, у которого вместо одного
      поля ввода группа плиток, и обычный <label for> не подходит;
   5. ловушку для ботов.

   ── Что берётся из окружения ───────────────────────────────────

   Карточка модального окна, поля ввода, кнопка и галочки согласий
   оформлены стилями лендинга. Файл рассчитывает, что там объявлены
   классы: .modal-card, .modal-close, .btn, .field, .form-grid,
   .form-note, .muted, .lead-consents, .lead-consent, .lead-consent-box,
   .lead-consent-text.

   Дублировать их здесь намеренно не стали: два описания одной кнопки
   разъедутся при первой же правке лендинга. Если форма ставится вне
   лендинга — эти классы нужно описать в принимающем проекте.

   Цвета берутся из переменных лендинга, у каждой проставлено
   значение по умолчанию — файл не рассыпется, если переменных
   рядом не окажется. Значения сверены с боевым сайтом 25.08.2026.

   Рамки, фоны и свечения записаны значениями, а не переменными:
   всем им нужна прозрачность, а получить её из переменной можно
   только через color-mix(), который поддерживают не все браузеры
   в обиходе. Оттенки взяты из той же неоновой палитры лендинга.
   ============================================================ */

/* Красный ошибки. В переменных лендинга своего значения для ошибки
   нет — когда появится, эти две строки заменяет ссылка на него.
   Объявлено на :root, а не на .modal-card: форма может уехать
   из модального окна на отдельную страницу, и тогда объявление
   внутри .modal-card до неё не дойдёт, а текст ошибки молча
   станет цвета обычного текста. */
:root {
  --form-error-color: #ff9b9b;
  --form-error-border: rgba(255, 138, 138, .6);
}

/* ---------- Плитки целей ----------
   Вместо выпадающего списка из десяти пунктов — пять плиток.
   Список нужно открыть, прочитать целиком и попасть в строку;
   плитки видны сразу и кликаются всей площадью, что на телефоне
   заметно надёжнее. */

.goals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
  gap: 8px;
  /* Точка отсчёта для скрытых радиокнопок, иначе они спозиционируются
     относительно всей страницы */
  position: relative;
}

/* Радиокнопка скрыта визуально, но остаётся в потоке: работает
   стрелками на клавиатуре и читается скринридером. Подсветка
   выбранного и фокус идут через соседний элемент.

   left: 0 обязателен. Без него абсолютно позиционированный элемент
   встаёт туда, где он оказался бы в потоке, — то есть отдельной
   колонкой сетки, и её край выходит за пределы экрана. Правило clip
   делает кнопку невидимой, но ширину страницы она всё равно тянет.

   Селектор с тегом по той же причине, что и у плитки ниже: в лендинге
   есть .field input { width: 100%; padding: 0 14px; border: 1px solid … } —
   класс плюс тег против одного класса, и побеждает лендинг. Сейчас это
   незаметно, потому что элемент прячет clip, но держаться на одной
   страховке нельзя: уберут clip — по форме поедут пять невидимых полей
   во всю ширину контейнера. */
.field input.goal__input {
  position: absolute;
  left: 0;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Селектор с тегом обязателен. Плитка — это <label> внутри .field,
   а в лендинге объявлено .field label { display: block; margin-bottom: 7px }.
   Там класс плюс тег, у одного .goal — только класс, поэтому побеждает
   block: заголовок и пояснение встают в одну строку, а к gap сетки
   добавляется лишний отступ снизу. .field label.goal перебивает оба. */
.field label.goal {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  gap: 2px;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid rgba(92, 236, 255, .22);
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease,
              box-shadow .18s ease, transform .18s ease;
}

/* Наведение. Меняем сразу три вещи — рамку, фон и свечение: одной
   рамки не хватает, разница между .22 и .45 прозрачности на тёмном
   фоне почти не различается.

   Подъём здесь добавка, а не основной эффект: на фоне #03070d тень
   не видна, и карточка без свечения будет казаться дёрнувшейся,
   а не поднявшейся.

   @media (hover: hover) отсекает тач-устройства. Без него подсветка
   залипает на плитке после тапа, и клиент видит две выделенные
   одновременно — ту, что нажал, и ту, что выбрал. */
@media (hover: hover) {
  .goal:hover {
    border-color: rgba(125, 245, 255, .55);
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 0 0 3px rgba(49, 228, 255, .06), 0 8px 22px rgba(49, 228, 255, .10);
    transform: translateY(-1px);
  }
}

/* Выбранная плитка остаётся самой яркой: иерархия
   обычная → наведение → выбранная не должна ломаться,
   иначе клиент не поймёт, что он уже выбрал. */
.goal__input:checked + .goal {
  border-color: rgba(112, 244, 255, .82);
  background: linear-gradient(145deg, rgba(34, 199, 225, .22), rgba(9, 91, 121, .30));
  box-shadow: 0 0 0 3px rgba(49, 228, 255, .10), 0 0 26px rgba(49, 228, 255, .20);
}
.goal__input:checked + .goal .goal__note { color: rgba(229, 243, 250, .78); }

/* Нажатие — плитка возвращается на место: подтверждение,
   что клик прошёл, без отдельной анимации */
.goal:active { transform: translateY(0); }
.goal__input:focus-visible + .goal {
  border-color: rgba(125, 245, 255, .6);
  box-shadow: 0 0 0 4px rgba(49, 228, 255, .12);
}

.goal__title {
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text, #f3fbff);
}
.goal__note {
  font-size: .74rem;
  line-height: 1.4;
  color: var(--muted2, rgba(229, 243, 250, .52));
}

/* ---------- Подсказки и ошибки под полями ---------- */

/* Подпись группы плиток. В лендинге оформлен только <label>, а здесь
   подписывается не поле, а группа, — тег другой, и правило .field label
   на него не распространяется. Значения повторяют лендинговый label,
   чтобы третий вопрос выглядел так же, как два первых. */
.field .field-legend {
  display: block;
  font-size: .82rem;
  color: var(--muted, rgba(229, 243, 250, .72));
  margin-bottom: 7px;
}

.field-hint {
  display: block;
  margin-top: 6px;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--muted2, rgba(229, 243, 250, .52));
}

.field-error {
  display: block;
  margin-top: 6px;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--form-error-color);
}

/* Поле с ошибкой подсвечивается рамкой: одного текста снизу мало,
   при нескольких ошибках сразу непонятно, какое поле чинить */
.field input.is-error,
.field textarea.is-error {
  border-color: var(--form-error-border);
}

/* Сбой отправки. Стоит под кнопкой, поэтому отступ сверху больше,
   чем у ошибок полей, — иначе читается как подпись к кнопке.
   Ошибки полей объясняют, что исправить в форме; эта говорит,
   что с формой всё в порядке, а не дошло до сервера. */
.form-error {
  margin: 10px 0 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--form-error-color);
}

/* ---------- Ловушка для ботов ----------
   Поле уводится за левый край экрана, а не прячется display:none:
   скрытое привычным способом поле бот пропускает, уведённое —
   заполняет. Ширина страницы от этого не едет: элемент вынут
   из потока, схлопнут по высоте и не ловит курсор. */
.lead-trap {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Свёрнутый комментарий ---------- */

/* Вертикальные отступы дают площадь для пальца: текстовая ссылка
   высотой 21 px на телефоне промахивается. Отрицательный внешний
   отступ гасит их влияние на вёрстку. */
.field-toggle {
  padding: 8px 0;
  margin: -8px 0;
  border: none;
  background: none;
  color: var(--cyan2, #7cf4ff);
  font: inherit;
  font-size: .82rem;
  text-decoration: underline;
  cursor: pointer;
}
.field-toggle:hover { color: var(--cyan, #31e4ff); }

/* ---------- Присоединение к соглашениям под кнопкой ---------- */

/* Договорные документы принимаются нажатием кнопки, без галочки,
   поэтому строка стоит сразу под ней. Кегль мельче основного текста,
   но ссылки остаются цветными и подчёркнутыми: скрытая ссылка
   на документ, который человек принимает, — это уже недобросовестно. */
.form-agreements {
  margin: 10px 0 0;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--muted2, rgba(229, 243, 250, .52));
}
.form-agreements a {
  color: var(--cyan2, #7cf4ff);
  text-decoration: underline;
}
.form-agreements a:hover { color: var(--cyan, #31e4ff); }

/* ---------- Состояние отправки ---------- */

.btn:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 520px) {
  .goals { grid-template-columns: 1fr; }
}

/* ---------- hidden должен ПОБЕЖДАТЬ ----------
   Атрибут hidden — это всего лишь `display: none` из стилей браузера, и любой
   явный display его перебивает. У формы класс .form-grid с `display: grid`
   из лендинга: после отправки форма получала hidden и оставалась на экране
   ВМЕСТЕ с экраном «Заявка принята». Правило ограничено блоком заявки,
   чтобы не менять поведение hidden на остальной странице. */
#lead [hidden] { display: none !important; }