/* Cobiz — страница регистрации (welcome_autoservice/signup_v2.html).
   Верстается по Figma (файл kjcnN2Gxb4Bp6FtAjiQTtM):
   "02 · Регистрация" (node 2968:1027) — пустое состояние,
   "03 · Регистрация · ошибки" (node 2971:2205) — состояние с ошибками.

   Переиспользует токены и общие классы из landing.css (--ll-*, .ll-header,
   .ll-footer, .cobiz-landing__container/__title/__btn) — та же схема, что
   у служебных страниц (см. codex/landing_page_rebuild.md §9). Тут только
   то, что специфично для этой страницы: узкая шапка (лого + "Войти", без
   nav/lang-switch/CTA — эта страница сама и есть точка входа), блок
   заголовка+буллетов слева, карточка формы регистрации справа, состояния
   ошибок.

   Пока только десктоп (1440px), мобильная версия — отдельным шагом (как и
   с остальными страницами). */

/* Компактная шапка при скролле (.ll-header.is-scrolled) — на лендинге
   12px сверху/снизу смотрятся нормально, потому что там ещё primary-кнопка
   CTA держит высоту строки. На узкой шапке (лого + один текстовый линк, без
   кнопки) с теми же 12px шапка визуально куда ниже лендинговой — добавлено
   +8px (12→20), по прямому указанию владельца 2026-09-24. Только десктоп
   (min-width:768px) — мобиль не трогаем — там высота уже фиксирована (16px) независимо от скролла. */
@media (min-width: 768px) {
  .ll-header.is-scrolled .ll-header__inner {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* ---------- Секция формы регистрации ---------- */

.ll-signup-section {
  /* 88.67px высота fixed-шапки + 80px зазор из Figma */
  padding: 169px 0 0;
}

/* Шапка — position:fixed (88.67px, безусловно из landing.css). Любой
   программный скролл к полю (native reportValidity() при невалидном вводе,
   иногда и обычный focus()/Tab) может подвести элемент вплотную к верху
   окна — там его перекрывает шапка и он становится некликабельным
   (поймано на прогоне: Playwright не смог поставить чекбокс галочкой,
   "header intercepts pointer events"). scroll-margin-top — та же защита,
   что уже стоит у якорных ссылок лендинга/служебных страниц. */
.ll-signup-field input,
.ll-signup-consent__row {
  scroll-margin-top: 108px;
}

.ll-signup-layout {
  display: flex;
  align-items: flex-start;
  gap: 103px;
}

/* ---------- Левая колонка: заголовок + буллеты ---------- */

.ll-signup-copy {
  flex: 0 0 596px;
  max-width: 596px;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Экран успеха (sent=True) короче формы — без него карточка "плавает"
   заметно выше десктопного заголовка, десктопный отступ-компенсатор 80px
   тут не нужен (в макете этого состояния всё равно нет, ориентир — сама
   компоновка, а не пиксель Figma). */
.ll-signup-layout--success .ll-signup-copy {
  padding-top: 0;
}

.ll-signup-copy__title {
  font-family: var(--ui-font-display, 'Manrope');
  font-weight: 800;
  font-size: 60px;
  line-height: 1.14;
  color: var(--ll-text);
  margin: 0;
}

/* Оборачивает буллеты и блок "Открыть без регистрации" — в Figma это общий
   auto-layout с gap:24 между ними (2968:1042), отдельный от gap:16 между
   заголовком и этим блоком (.ll-signup-copy). */
.ll-signup-copy__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ll-signup-copy__points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ll-text-2);
}

.ll-signup-copy__points p {
  font-size: 16px;
  line-height: 1.48;
  max-width: 493px;
  margin: 0;
}

.ll-signup-copy__points strong {
  display: block;
  font-weight: 600;
  color: var(--ll-text-2);
}

/* ---------- "Не хотите оставлять номер?" — демо без регистрации (3123:2058, добавлено владельцем позже) ---------- */

.ll-signup-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ll-signup-demo__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ll-signup-demo__title {
  font-family: var(--ui-font-display, 'Manrope');
  font-weight: 800;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ll-text);
  max-width: 493px;
  margin: 0;
}

.ll-signup-demo__lead {
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-text-2);
  max-width: 493px;
  margin: 0;
}

/* Тег в селекторе (a.ll-signup-demo__link), не голый класс: у общего
   .cobiz-landing a{color:inherit} специфичность 0,1,1 — выше одиночного
   класса 0,1,0, и цвет молча перебивался на тёмный (тот же баг уже был
   у a.ll-demo-btn-secondary, см. Правку №16). align-self:flex-start —
   без него ссылка как flex-item .ll-signup-demo (column, align-items по
   умолчанию stretch) растягивалась на всю ширину блока, и подчёркивание
   при наведении шло на всю строку, а не по длине текста. */
a.ll-signup-demo__link {
  display: inline-block;
  align-self: flex-start;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-primary);
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease-out;
}

a.ll-signup-demo__link:hover {
  border-bottom-color: var(--ll-primary);
}

/* ---------- Правая колонка: карточка формы ---------- */

.ll-signup-card {
  flex: 0 0 517px;
  width: 517px;
  background: var(--ll-panel);
  border: 1px solid var(--ll-border);
  border-radius: 32px;
  padding: 32px 32px 24px;
  display: flex;
  flex-direction: column;
  /* зазор между формой (кнопка "Начать бесплатно") и блоком "Уже есть
     аккаунт? Войти" — 24px по Figma, а не общие 32px карточки */
  gap: 24px;
}

.ll-signup-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.ll-signup-card__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.ll-signup-card__title {
  font-family: var(--ui-font-display, 'Manrope');
  font-weight: 800;
  font-size: 32px;
  line-height: 1.24;
  color: var(--ll-text);
  margin: 0;
}

.ll-signup-local-workspace {
  width: 100%;
  border: 1px solid var(--ll-border);
  background: var(--ll-white);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--ll-text-2);
  font-size: 14px;
  line-height: 1.45;
}

.ll-signup-local-workspace strong {
  display: block;
  color: var(--ll-text);
  margin-bottom: 4px;
}

/* Баннер общей ошибки (server-side: form.non_field_errors / captcha_error) —
   тот же визуал, что и у поля с ошибкой, просто на уровне всей формы. */
.ll-signup-error-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(224, 38, 38, 0.12);
}

.ll-signup-error-banner svg {
  flex-shrink: 0;
}

.ll-signup-error-banner p {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-error, #e02626);
  margin: 0;
}

.ll-signup-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.ll-signup-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.ll-signup-field label {
  /* без этого Bootstrap-reboot вешает на любой <label> свой
     margin-bottom:.5rem, который складывается с gap:8px у
     .ll-signup-field и даёт лишние 8px между лейблом и полем */
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ll-text);
}

.ll-signup-field input {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--ll-border);
  border-radius: 8px;
  background: var(--ll-white);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-text);
  outline: none;
  transition: border-color 150ms ease-out;
}

.ll-signup-field input::placeholder {
  color: var(--ll-text-3);
}

.ll-signup-field input:focus {
  border-color: var(--ll-primary);
}

.ll-signup-field input.is-invalid {
  border-color: var(--ll-error, #e02626);
}

.ll-signup-field__error {
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-error, #e02626);
  margin: 0;
}

/* ---------- Чекбокс согласия ---------- */

.ll-signup-consent {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.ll-signup-consent__row {
  /* обязательно position:relative — соседний input у него position:absolute
     (спрятан визуально, span рисует видимый квадрат), без этого он бы
     позиционировался от ближайшего позиционированного ПРЕДКА где-то выше
     по дереву вместо своей строки. Поймано на прогоне Playwright: чекбокс
     утаскивало в координаты около (0,0) — Chromium пытался проскроллить к
     нему и попадал под fixed-шапку, "header intercepts pointer events". */
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.ll-signup-consent__row input {
  /* сам чекбокс спрятан, но остаётся в таб-порядке и доступен читалкам —
     визуальный квадрат рисует соседний span */
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ll-signup-consent__box {
  /* сам квадрат идёт в DOM ПОСЛЕ input и рисуется поверх него — без
     pointer-events:none он (и его svg) перехватывает клики/hit-test
     Playwright, хотя input визуально под ним же и находится (совпадающие
     rect). Поймано на прогоне: .check('#id_consent') падал с "intercepts
     pointer events", хотя фактическая позиция input была верна. */
  pointer-events: none;
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--ll-border);
  background: var(--ll-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.ll-signup-consent__row input:checked ~ .ll-signup-consent__box {
  background: var(--ll-primary);
  border-color: var(--ll-primary);
}

.ll-signup-consent__box svg {
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: opacity 100ms ease-out;
}

.ll-signup-consent__row input:checked ~ .ll-signup-consent__box svg {
  opacity: 1;
}

.ll-signup-consent__row input.is-invalid ~ .ll-signup-consent__box {
  border-color: var(--ll-error, #e02626);
}

.ll-signup-consent__text {
  font-size: 12px;
  line-height: 1.36;
  color: var(--ll-text-2);
}

.ll-signup-consent__error {
  font-size: 12px;
  line-height: 1.36;
  color: var(--ll-error, #e02626);
  margin: 0;
}

/* ---------- Кнопка отправки, "уже есть аккаунт", доверие ---------- */

.ll-signup-submit {
  width: 100%;
  height: 56px;
}

.ll-signup-footer-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.ll-signup-login-link {
  /* это <p> — гасим дефолтный margin браузера, интервал задаёт
     gap:24px у родителя .ll-signup-footer-block */
  margin: 0;
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-text);
}

.ll-signup-login-link a {
  color: var(--ll-primary);
}

.ll-signup-trust-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.ll-signup-divider {
  height: 1px;
  width: 100%;
  background: var(--ll-border);
}

.ll-signup-trust-line {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}

.ll-signup-trust-line svg {
  flex-shrink: 0;
}

.ll-signup-trust-line span {
  font-size: 12px;
  line-height: 1.36;
  color: var(--ll-text-3);
  white-space: nowrap;
}

.ll-signup-recaptcha-note {
  /* лежит ВНУТРИ .ll-signup-trust-block (последним ребёнком) — интервал
     16px до строки "Без карты..." даёт gap самого trust-block, а не
     отдельный отступ здесь */
  width: 100%;
  font-size: 12px;
  line-height: 1.36;
  color: var(--ll-text-3);
  text-align: center;
  margin: 0;
}

.ll-signup-recaptcha-note a {
  color: var(--ll-text-2);
}

/* грecaptcha-бейдж визуально не нужен — в футере уже есть текстовое
   упоминание reCAPTCHA (та же логика, что была в старой вёрстке) */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* ---------- Экран успеха (sent=True) — своей вёрстки в Figma нет
   (мокап показывает только форму и её ошибки), стилизовано в том же
   визуальном языке: белая карточка, галочка, кнопка WhatsApp тем же
   классом, что и в блоке "Остались вопросы?" на лендинге. ---------- */

.ll-signup-success {
  text-align: center;
  padding: 16px 0 8px;
}

.ll-signup-success__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  /* своего "успех"-токена в системе нет — переиспользуем WhatsApp-зелёный
     (--ll-whatsapp), он уже несёт смысл "дружелюбное позитивное действие"
     на этом сайте (кнопки WhatsApp) */
  background: var(--ll-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ll-signup-success__icon svg {
  width: 28px;
  height: 28px;
}

.ll-signup-success h2 {
  font-family: var(--ui-font-display, 'Manrope');
  font-weight: 800;
  font-size: 24px;
  line-height: 1.32;
  color: var(--ll-text);
  margin: 0 0 12px;
}

.ll-signup-success p {
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-text-2);
  margin: 0 0 24px;
}

/* Кнопка WhatsApp экрана успеха — на всю ширину карточки, тем же паттерном,
   что и .ll-signup-submit (кнопка "Начать бесплатно"): .cobiz-landing__btn
   сама по себе inline-flex по ширине контента, ширину нужно задавать явно. */
.ll-signup-success .cobiz-landing__btn {
  width: 100%;
}

/* ==========================================================================
   Мобильная версия (M03 · Регистрация, node 3003:3150 — дефолт;
   M04 · Регистрация · ошибки, node 3003:4103 — состояние ошибок).
   Один брейкпоинт, как и на всех остальных публичных страницах (см.
   codex/landing_page_rebuild.md §8) — 360px, без планшетных промежутков.
   Шапка/подвал — тот же .ll-header/.ll-footer из landing.css, их мобильный
   адаптив уже общий и применяется сам. Экран успеха (sent=True) и
   local_workspace-блок своей вёрстки в Figma не имеют ни на десктопе, ни на
   мобиле — наследуют .ll-signup-card и остаются на 100% ширины сами.
   ========================================================================== */

/* ---------- Планшетный диапазон (768–1279.98px) — тот же приём, что и в
   landing.css: строка остаётся строкой (стек в колонку — только мобильный
   приём ниже, с 767.98px), просто .ll-signup-copy получает возможность
   сжиматься (была flex-shrink:0 - жёсткая заготовка под 596px). Карточка
   формы (.ll-signup-card, 517px) НЕ сжимается — под неё рассчитаны поля
   ввода. Весь дефицит гасят левая колонка и зазор: gap 103px (десктопный)
   сжимается только до пола 40px, дальше вся оставшаяся нехватка идёт в
   .ll-signup-copy. */
@media (max-width: 1279.98px) {
  .ll-signup-layout {
    gap: 40px;
  }
  .ll-signup-copy {
    flex-shrink: 1;
    min-width: 0;
  }
}

/* Заголовок (.ll-signup-copy__title, 60px) — та же грабля и тот же приём,
   что и .ll-login-title/.ll-demo-title (см. подробный комментарий и замеры
   реальной ширины слов в local_workspace_intro.css): при сжатии .ll-signup-copy
   до 171px на 768px длинное слово ("Начните"/"работать") иначе наезжает на
   карточку. Три ступени вместо plavnogo clamp, с запасом ~15-20px на каждой
   границе. */
@media (max-width: 1279.98px) and (min-width: 1000px) {
  .ll-signup-copy__title {
    font-size: 48px;
  }
}
@media (max-width: 999.98px) and (min-width: 850px) {
  .ll-signup-copy__title {
    font-size: 36px;
  }
}
@media (max-width: 849.98px) and (min-width: 768px) {
  .ll-signup-copy__title {
    font-size: 24px;
  }
}

@media (max-width: 767.98px) {

  /* Узкая шапка (лого + "Войти") на мобиле раньше показывала только
     lang-switch (общее правило landing.css прячет .ll-header__login на
     мобиле — рассчитано на лендинг, где вместо него бургер). Lang-switch
     убрали (Правка №19) — без переопределения мобильная шапка осталась бы
     пустой справа, кроме лого. Возвращаем ссылку, тем же размером 16px,
     что и на десктопе. */
  .ll-header__login {
    display: inline-block;
    font-size: 16px;
  }

  /* Высота мобильной шапки (лого 28px + паддинг 16/16, см. landing.css) +
     зазор до заголовка — по замеру Figma (162px от верха фрейма минус 62px
     статус-бара iPhone-мокапа = 100px от реального верха страницы). Как и
     на остальных страницах — считать не самоочевидным, проверять через
     getBoundingClientRect() после document.fonts.status === 'loaded'. */
  .ll-signup-section {
    padding: 100px 0 0;
  }

  /* Меньше десктопных 108px — мобильная шапка ниже (та же логика, что у
     #features/#review/#pricing/#faq в landing.css). */
  .ll-signup-field input,
  .ll-signup-consent__row {
    scroll-margin-top: 80px;
  }

  .ll-signup-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 73px;
  }

  /* Экран успеха короче формы (меньше текста в карточке) — 73px были
     подогнаны под высоту формы (см. Правку №10/№11 в
     codex/landing_page_rebuild.md), для success это слишком много. */
  .ll-signup-layout--success {
    gap: 40px;
    align-items: center;
  }

  .ll-signup-copy {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding-top: 0;
  }

  .ll-signup-copy__title {
    font-size: 32px;
  }

  .ll-signup-card {
    flex: none;
    width: 100%;
    border-radius: 16px;
    padding: 20px 16px 16px;
  }

  .ll-signup-card__head {
    gap: 20px;
  }

  .ll-signup-card__title {
    font-size: 24px;
  }

  .ll-signup-field {
    gap: 4px;
  }

  .ll-signup-error-banner {
    gap: 8px;
  }

  /* Мобильный лейбл меньше десктопного (3003:3272: 16px, не 20px) */
  .ll-signup-field label {
    font-size: 16px;
  }

  /* На мобиле строка не помещается в одну "nowrap"-строку (288px контента) —
     в Figma текст сам занимает 2 строки (node 3003:3297, textbox 268×32).
     Десктопного nowrap тут не нужен: там строка целиком влезает по ширине
     карточки, здесь — нет, и без переопределения текст вылезал за карточку. */
  .ll-signup-trust-line span {
    white-space: normal;
    text-align: center;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Зазор форма → футер (80px, снято метаданными Figma: card
     y=478+height=621=1099, footer y=1179, 1179-1099=80) — на десктопе его
     даёт .ll-footer{margin-top:112px} из landing.css, но общее мобильное
     правило .ll-footer{margin-top:0} (рассчитано на лендинг, где перед
     подвалом всегда есть тонированная секция "Контакты" вплотную) обнуляет
     его и для этой страницы, где перед подвалом обычная секция без тинта. */
  .ll-signup-section {
    padding-bottom: 80px;
  }
}

.ll-signup-success strong {
  color: var(--ll-text);
}