/* Cobiz — страница входа (templates/registration/login.html).
   Верстается по Figma (файл kjcnN2Gxb4Bp6FtAjiQTtM):
   "04 · Вход · WhatsApp" (node 2968:1106) — дефолт,
   "05 · Вход · WhatsApp · аккаунт найден" (node 2969:1992),
   "06 · Вход · WhatsApp · ссылка отправлена" (node 2971:2109),
   "07 · Вход · пароль" (node 2968:1075).

   Переиспользует токены и общие классы из landing.css (--ll-*, .ll-header,
   .ll-footer, .cobiz-landing__container/__btn) И классы из signup_page.css
   (.ll-signup-card__head, .ll-signup-fields, .ll-signup-field(__error),
   .ll-signup-submit, .ll-signup-footer-block, .ll-signup-login-link,
   .ll-signup-trust-block, .ll-signup-divider, .ll-signup-trust-line,
   .ll-signup-recaptcha-note) — числа по Figma у карточки входа совпадают
   с карточкой регистрации ВНУТРИ этих блоков 1-в-1 (label/input/ошибка,
   кнопка, "Нет аккаунта?", divider, recaptcha-заметка); отличается только
   сама карточка снаружи (gap:32, не 24, у входа) и то, чего у регистрации
   вообще нет (переключатель WhatsApp/Пароль, инфо-блоки слева, зелёные
   success-сообщения). Именно это и только это — здесь.

   Узкая шапка (лого + "Регистрация", без nav/lang-switch/CTA — по всем 4
   Figma-фреймам, то же решение, что и на узкой шапке signup_v2.html, но в
   зеркальную сторону) — стили самой шапки уже в landing.css, здесь не
   дублируются. */

/* ---------- Секция ---------- */

.ll-login-section {
  /* Figma: содержимое ("Форма входа") на y=228 при той же шапке (py-28,
     логотип 32 — Figma-нативная высота 88, почти совпадает с реальной
     88.67px), поэтому берём y напрямую, как и на карточке регистрации. */
  padding: 228px 0 0;
}

/* .ll-signup-field input уже получает scroll-margin-top:108px из
   signup_page.css (класс переиспользуется на этой странице для полей
   телефона/пароля) — здесь только то, чего там нет: обёртка с кнопкой-глазом. */
.ll-login-password-wrap input {
  scroll-margin-top: 108px;
}

/* Не .ll-signup-layout: у той же на вид раскладки (flex row gap 103) на
   signup_page.css свой мобильный override (gap:73px, подогнан под высоту
   ЕЁ текстового блока) — если переиспользовать класс один в один, это
   значение протекло бы и сюда. Числа на десктопе совпадают, поэтому здесь
   отдельный класс с теми же значениями, без пересечения на мобиле. */
.ll-login-layout {
  display: flex;
  align-items: flex-start;
  gap: 103px;
}

/* ---------- Левая колонка: заголовок + способы входа ---------- */

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

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

.ll-login-method {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

.ll-login-method__badge {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ll-login-method__badge--whatsapp {
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.16);
}

.ll-login-method__badge--password {
  background: rgba(16, 114, 239, 0.08);
  border: 1px solid rgba(16, 114, 239, 0.16);
}

.ll-login-method__title {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ll-text);
  margin: 0;
}

.ll-login-method__desc {
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-text-2);
  margin: 0;
}

/* ---------- Правая колонка: карточка входа ----------
   Снаружи отличается от .ll-signup-card только gap (32, не 24) — остальные
   свойства (фон/бордер/радиус/паддинг) идентичны, но не наследуем через
   каскад (страницы разные), а повторяем явно — так проще ревизовать. */

.ll-login-card {
  flex: 0 0 517px;
  width: 517px;
  background: var(--ll-panel);
  border: 1px solid var(--ll-border);
  border-radius: 32px;
  padding: 32px 32px 24px;
}

.ll-login-card__form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

/* ---------- Переключатель WhatsApp / Пароль — та же механика (абсолютная
   пилюля + translateX + смена цвета активной кнопки), что и .ll-lang-switch
   в landing.css, просто на всю ширину и с двумя равными половинами вместо
   двух узких RU/KZ. По прямой просьбе владельца: "работает так же, как
   смена языка, такая же анимация". ---------- */

.ll-login-switch {
  position: relative;
  display: flex;
  width: 100%;
  padding: 4px;
  border: 1px solid var(--ll-border);
  border-radius: 16px;
  background: var(--ll-white);
}

.ll-login-switch__pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: 48px;
  border-radius: 12px;
  background: var(--ll-primary-12);
  transition: transform 150ms ease-out;
}

.ll-login-switch.is-password .ll-login-switch__pill {
  transform: translateX(100%);
}

.ll-login-switch__btn {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  padding: 12px;
  border: none;
  background: none;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-text-2);
  cursor: pointer;
  text-align: center;
  transition: color 150ms ease-out;
}

.ll-login-switch__btn.is-active {
  color: var(--ll-primary);
}

/* ---------- Поле пароля — обёртка для кнопки-глаза ---------- */

.ll-login-password-wrap {
  position: relative;
  width: 100%;
}

.ll-login-password-wrap input {
  padding-right: 48px;
}

.ll-login-eye-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* Клик-тумблер (не press-and-hold): показан один из двух SVG в зависимости
   от .is-visible на самой кнопке — оба лежат в DOM всегда, JS только
   переключает класс. Селектор с тегом (svg.ll-login-eye-toggle__icon--*),
   не голый класс: у общего .cobiz-landing svg{display:block} специфичность
   0,1,1 — выше одиночного класса 0,1,0, и она тихо перебивала display:none
   (тот же баг уже чинили на a.ll-demo-btn-secondary/a.ll-signup-demo__link
   — четвёртый повтор этого паттерна за сессию, см. Правки №16/19). */
svg.ll-login-eye-toggle__icon--hidden {
  display: none;
}

.ll-login-eye-toggle.is-visible svg.ll-login-eye-toggle__icon--shown {
  display: none;
}

.ll-login-eye-toggle.is-visible svg.ll-login-eye-toggle__icon--hidden {
  display: block;
}

/* "Не помните пароль? Войдите через WhatsApp" — переключает на вкладку
   WhatsApp (JS), визуально текстовая ссылка, приглушённый цвет (Figma:
   var(--text/tertiary,#949494) = --ll-text-3). */
.ll-login-forgot {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.48;
  text-align: center;
  color: var(--ll-text-3);
  cursor: pointer;
}

/* "Войдите через WhatsApp" - реально кликабельное действие (переключает
   вкладку), выделено как ссылка, тем же приёмом, что и "Зарегистрироваться"
   в .ll-signup-login-link. */
.ll-login-forgot__action {
  color: var(--ll-primary);
}

/* ---------- Success/error-сообщения под полем телефона ----------
   Зелёный — новый токен --ll-success (добавлен в landing.css для этой
   страницы). Красный переиспользует .ll-signup-field__error 1-в-1 (та же
   верстка ошибки, что и на регистрации, по прямой просьбе владельца). */
.ll-login-field__success {
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-success);
  margin: 0;
}

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

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

/* ---------- Мобильная версия — своего Figma-фрейма нет, собрана по
   общему принципу страницы (см. signup_page.css/local_workspace_intro.css:
   один брейкпоинт 767.98px, тот же масштаб заголовка и карточки). ---------- */
@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;
  }

  .ll-login-section {
    padding: 100px 0 80px;
  }

  .ll-login-password-wrap input {
    scroll-margin-top: 80px;
  }

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

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

  .ll-login-title {
    font-size: 32px;
  }

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

  .ll-login-card__form {
    gap: 24px;
  }
}