/* ═══════════════════════════════════════════════════════════
   РЕГИСТРАЦИЯ — форма на двух поверхностях: окно и встроенная плашка.
   Одно тело формы (.cta-form__*) обслуживает обе; различаются оболочки.

   КУДА КЛАСТЬ: новый файл flang-io/css/reg-form.css, инжектор подключает
   его на все страницы — как nav.css и footer.css. Окно открывает кнопка
   «Регистрация» в закреплённой шапке, а шапка стоит на всех 63 страницах;
   landing.css подключён только на 6 (класс l-page), поэтому окно и общее
   тело формы в него класть нельзя.

   Сетка плашки лендинга — в отдельном файле handoff/cta-form-plaque.css,
   он идёт в landing.css. Зависимостей от landing.css здесь нет:
   всё держится на токенах tokens.css.

   Источник значений — design-system/blocks/cta-form.html
   + blocks/form-agree.html (v1.5).
   ═══════════════════════════════════════════════════════════ */

/* ═══ 1. ТЕЛО ФОРМЫ — общее для окна и плашки ═══ */

.cta-form__body { display: flex; flex-direction: column; gap: var(--gap-sm); }
.cta-form__field { display: flex; flex-direction: column; gap: var(--gap-xs); }

/* --text-secondary, НЕ --text-muted: на 12px muted даёт 3.95:1 — ниже AA. */
.cta-form__label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary); }

/* Кегль поля — --text-md (18px). Ниже 16px iOS зумит страницу на фокусе. */
.cta-form__input { font-family: var(--font-body); font-size: var(--text-md); color: var(--text-primary); height: var(--control-h); padding: 0 16px; background: var(--bg-white); border: 1px solid var(--border-strong); border-radius: var(--radius-field); outline: none; width: 100%; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.cta-form__input:focus { border-color: var(--navy); box-shadow: var(--focus-ring); }
.cta-form__input:disabled { color: var(--text-secondary); background: var(--bg-input); }
.cta-form__field.has-error .cta-form__input { border-color: var(--coral); background: var(--danger-tint); }
.cta-form__hint { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; line-height: 1.4; color: var(--coral-ink); display: none; }
.cta-form__field.has-error .cta-form__hint { display: block; }

/* Submit берёт радиус поля, а не пилюлю: кнопка читается парой к полю.
   Поле и кнопка друг под другом на всех ширинах — в карточке 412px строка
   «поле + кнопка» не помещается ни при какой ширине кнопки. */
.cta-form__submit { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; color: #fff; background: var(--navy); border: none; border-radius: var(--radius-field); height: var(--control-h); width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--gap-xs); transition: background var(--dur) var(--ease); }
.cta-form__submit:hover { background: var(--brand-blue); }
.cta-form__submit:disabled { cursor: default; background: var(--navy); opacity: 0.75; }
.cta-form__spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: cta-form-spin 0.7s linear infinite; display: none; }
.is-sending .cta-form__spinner { display: block; }
@keyframes cta-form-spin { to { transform: rotate(360deg); } }

/* ── строка согласия ── */
/* Согласие идёт --text-base: то, что заявляет пользователь, набирается
   body-кеглем; ошибка под ним — служебный --text-sm. */
.cta-form__agree { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap-xs); min-height: var(--tap-min); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; color: var(--text-secondary); cursor: pointer; user-select: none; }
.cta-form__agree.is-disabled { opacity: 0.55; cursor: default; }
.cta-form__box-wrap { position: relative; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
.cta-form__checkbox { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cta-form__box { width: 22px; height: 22px; box-sizing: border-box; background: var(--bg-white); border: 1px solid var(--border-strong); border-radius: var(--radius-btn); display: flex; align-items: center; justify-content: center; color: #fff; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.cta-form__check { opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); display: flex; }

/* ⚠ РАСХОЖДЕНИЕ С КАНОНОМ (design-system v1.5, blocks/form-agree.html).
   Канон заливает выбранную галочку кораллом. Здесь в покое navy, коралл
   только при наведении: согласие предвыбрано — это подтверждение
   юридического дефолта, а не действие, и коралл на нём конкурирует
   с кнопкой отправки. Решение согласовано; занести в дизайн-систему. */
.cta-form__checkbox:checked ~ .cta-form__box { background: var(--navy); border-color: var(--navy); }
.cta-form__checkbox:checked ~ .cta-form__box .cta-form__check { opacity: 1; transform: scale(1); }
.cta-form__agree:hover .cta-form__box { border-color: var(--coral); }
.cta-form__agree:hover .cta-form__checkbox:checked ~ .cta-form__box { background: var(--coral); border-color: var(--coral); }
.cta-form__checkbox:focus-visible ~ .cta-form__box { border-color: var(--navy); box-shadow: var(--focus-ring); }
.cta-form__agree.is-error .cta-form__box { border-color: var(--coral); box-shadow: var(--danger-ring); }

.cta-form__agree-text { flex: 1 1 0; min-width: 0; }
/* Служебная ссылка берёт цвет текста, коралл приходит только на ховере. */
.cta-form__agree-text a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(10,58,77,0.3); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.cta-form__agree-text a:hover { color: var(--coral-ink); border-bottom-color: var(--coral-ink); }
.cta-form__agree-error { display: none; flex-basis: 100%; width: 100%; font-size: var(--text-sm); font-weight: 500; line-height: 1.4; color: var(--coral-ink); }
.cta-form__agree.is-error .cta-form__agree-error { display: block; }

/* Ловушка для ботов. Не display:none — часть ботов такие поля пропускает. */
.cta-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── плашка сообщения (блок form-notice) ── */
.form-notice { display: flex; align-items: flex-start; gap: var(--gap-xs); background: var(--danger-plate); border-radius: var(--radius-field); padding: 14px 16px; font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: var(--coral-ink); }
.form-notice__icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.form-notice__text { flex: 1 1 auto; margin: 0; }
.cta-form__notice { display: none; }
.has-notice .cta-form__notice { display: flex; }

/* ── экран успеха ──
   По левому краю, как в макетах (канон центрирует). */
.cta-form__success { display: none; flex-direction: column; align-items: flex-start; gap: var(--gap-xs); }
.is-done .cta-form__success { display: flex; }
.is-done .cta-form__body { display: none; }
.is-done .reg-popup__sub { display: none; }
/* Градиентная метка — разрешённое каноном исключение для регистрации. */
.cta-form__success-mark { width: var(--icon-chip); height: var(--icon-chip); border-radius: 50%; background: var(--bg-page); color: var(--navy); display: flex; align-items: center; justify-content: center; }
.cta-form__success-mark--gradient { background: var(--gradient); color: #fff; }
.cta-form__success-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; text-transform: uppercase; letter-spacing: -0.3px; color: var(--text-primary); margin: 0; }
.cta-form__success-text { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; color: var(--text-secondary); margin: 0; }
/* ⚠ Этого правила в каноне нет — ghost-CTA на экране успеха.
   Стоит забрать в дизайн-систему как часть блока cta-form. */
.cta-form__success-btn { width: 100%; box-sizing: border-box; margin-top: var(--gap-xs); height: var(--control-h); border: 1.5px solid var(--navy); border-radius: var(--radius-field); background: transparent; color: var(--navy); font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background var(--dur) var(--ease); }
.cta-form__success-btn:hover { background: var(--bg-page); }


/* ═══ 2. ОБОЛОЧКА ОКНА ═══ */

.reg-popup { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: var(--gap-md); background: var(--scrim); /* блюр законен: подложка модалки — интерфейсная обвязка, не контент */ backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.reg-popup.is-open { opacity: 1; }
/* display:flex выше перебивает атрибут hidden: без этого правила скрытое
   окно растянуто на весь экран и перехватывает клики на всех страницах. */
.reg-popup[hidden] { display: none; }
/* Cookie-баннер живёт на z-index 9999 и на телефоне перекрывает поле и кнопку
   окна. Поднимаем окно над ним и прячем баннер, пока окно открыто. */
html.reg-popup-open .flang-cookie-consent { display: none !important; }
.reg-popup__card { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - var(--gap-md) * 2); overflow: auto; background: var(--bg-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transform: translateY(12px); transition: transform var(--dur-slow) var(--ease-out); }
.reg-popup.is-open .reg-popup__card { transform: translateY(0); }

.reg-popup__close { position: absolute; top: 14px; right: 14px; width: var(--tap-min); height: var(--tap-min); border: none; border-radius: 50%; background: rgba(10,58,77,0.07); color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur) var(--ease); }
.reg-popup__close:hover { background: rgba(10,58,77,0.14); }
.reg-popup__close:focus-visible { box-shadow: var(--focus-ring); }

/* Бежевая шапка сжимается под логотип — вариант 2a. */
.reg-popup__head { background: var(--beige); border-bottom: 1px solid var(--border-warm); padding: 26px var(--space-card); }
.reg-popup__logo { display: block; height: 28px; width: auto; }

/* Оболочка формы внутри окна. Своя, а не .cta-form__card: тот класс живёт
   в landing.css, которого нет на большинстве страниц. Тень и радиус не нужны —
   оболочка уже внутри белой карточки окна. */
.reg-popup__body { display: flex; flex-direction: column; gap: var(--gap-sm); padding: var(--space-card); }
.reg-popup__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; text-transform: uppercase; letter-spacing: -0.3px; line-height: 1.12; color: var(--text-primary); margin: 0; }
.reg-popup__sub { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; color: var(--text-secondary); margin: 0; }


/* ═══ доложить в СУЩЕСТВУЮЩИЕ медиа-блоки landing.css ═══ */

@media (max-width: 640px) {
  /* Окно ниже 640 — лист снизу: до края экрана, скругление только сверху. */
  .reg-popup { align-items: flex-end; padding: 0; }
  .reg-popup__card { max-width: none; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(100%); }
  .reg-popup__head { padding: 22px var(--gap-md); }
  .reg-popup__body { padding: var(--gap-md); }
}