/* ============================
   Registration page
   Дополняет landing.css. Базовый .site-header / .btn-primary / .site-header__logo*
   определены в landing.css — здесь только page-specific надстройки.
   ============================ */

/* landing.css грузит только VelaSans SemiBold. На странице регистрации
   нужны Regular и Bold (см. figma 517:958), поэтому подключаем здесь. */
@font-face {
  font-family: "VelaSans";
  src:
    local("Vela Sans Regular"),
    local("VelaSans-Regular"),
    url("/static/fonts/velasans/VelaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "VelaSans";
  src:
    local("Vela Sans Medium"),
    local("VelaSans-Medium"),
    url("/static/fonts/velasans/VelaSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "VelaSans";
  src:
    local("Vela Sans Bold"),
    local("VelaSans-Bold"),
    url("/static/fonts/velasans/VelaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Фон всей страницы регистрации (figma 367:1687 Regestration / Login):
   linear-gradient(158.36deg, #f8f9fc 58.534%, #c8e7fc 137.83%).
   Применяем к body, чтобы покрыть и шапку, и main, и весь вьюпорт,
   а не только контентный блок. */
body.registration-page {
  background: linear-gradient(
    158.3648deg,
    #f8f9fc 58.534%,
    #c8e7fc 137.83%
  );
  background-repeat: no-repeat;
  /* НЕ background-attachment: fixed — на iOS Safari такой фон не подстраивается
     под сворачивающуюся адресную строку, и внизу появляется полоса без фона
     («конец страницы»). cover + min-height:100dvh покрывают всю реальную
     высоту страницы на мобильных. */
  background-size: cover;
  min-height: 100vh;
  min-height: 100dvh;
  /* Декоративный blob справа от .report-visual выходит за правый край
     контейнера; на узких десктопах это могло бы вызвать горизонтальный скролл. */
  overflow-x: clip;
}

.site-header--bordered {
  border-bottom: 1px solid #d0d4e4;
  background: transparent;
}

.registration-header__cta-text--mobile {
  display: none;
}

/* ============================
   Main content layout
   ============================ */
.registration-main {
  width: 100%;
}

.registration-main__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px 120px 80px;
  display: flex;
  /* figma 517:958: items-center, justify-start (default), no gap.
     Колонки фиксированной ширины — между ними нет промежутка, правый блок
     может слегка выйти за padding-right (это поведение из макета). */
  align-items: center;
}

.registration-form {
  /* figma 367:1689 Section: фиксированная 650 на десктопе. Внутри 3 блока
     с явными margin-bottom вместо gap, потому что промежутки разные
     (intro→form 50, form→prompt 60). На мобилке `display: contents`,
     блоки уплощаются и встают в общий flex-column рядом с .visual. */
  width: 650px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.registration-form__intro {
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  color: #000;
  word-break: break-word;
}

.registration-form__title {
  /* figma desktop 50px / mobile 27px, оба с tracking -0.03em.
     Между 390 и 1440px viewport шрифт плавно интерполируется. */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(27px, calc(18.46px + 2.19vw), 50px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.registration-form__lead {
  /* figma desktop 22px / mobile 16px. */
  margin: 0;
  max-width: 591px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, calc(13.77px + 0.57vw), 22px);
  line-height: 1.4;
  letter-spacing: -0.03em;
}

/* ============================
   Form (email + button + consent)
   ============================ */
.registration-form__form {
  /* figma 367:1694 Email Input Section: 594.341 × auto, gap-30. */
  width: 594.341px;
  max-width: 100%;
  margin: 0 0 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.registration-form__row {
  /* figma 367:1695 Email Input: full width Subsection, gap-20, items-center. */
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.registration-form__input {
  /* figma 367:1696 Email Label: 387 × 55, фиксированный размер. */
  width: 387px;
  flex-shrink: 0;
  height: 55px;
  padding: 16px 20px;
  background: #ffffff;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 4px 6.5px rgba(159, 159, 159, 0.25);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #000;
}

.registration-form__input::placeholder {
  color: #000;
  opacity: 1;
}

.registration-form__input:focus {
  outline: 2px solid #44daf1;
  outline-offset: 2px;
}

.registration-form__submit {
  /* figma 367:1698 Continue Button: 186.355 × 54.74, асимметричные паддинги. */
  width: 186.355px;
  height: 54.74px;
  flex-shrink: 0;
  padding: 14px 35px 16px 40px;
  background: #44daf1;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 4px 6.5px rgba(159, 159, 159, 0.25);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.registration-form__submit:hover {
  filter: brightness(1.05);
}

.registration-form__submit:active {
  transform: translateY(1px);
}

.registration-form__submit:focus-visible {
  outline: 2px solid #090847;
  outline-offset: 2px;
}

/* Кастомный чекбокс — родной input скрыт, состояние отрисовываем на box. */
.registration-form__consent {
  display: flex;
  gap: 17px;
  align-items: flex-start;
  cursor: pointer;
}

.registration-form__consent-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.registration-form__consent-box {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 2px solid #090847;
  border-radius: 5px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #090847;
  box-sizing: border-box;
}

.registration-form__consent-check {
  width: 18px;
  height: 18px;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.registration-form__consent-input:checked + .registration-form__consent-box .registration-form__consent-check {
  opacity: 1;
}

.registration-form__consent-input:focus-visible + .registration-form__consent-box {
  outline: 2px solid #44daf1;
  outline-offset: 2px;
}

/* Состояние ошибки: ставится при попытке сабмита без отмеченного чекбокса
   (см. inline-скрипт в registration.html) либо при возврате формы с сервера
   с consent_error. Снимается на change при отметке галочки. */
.registration-form__consent.is-invalid .registration-form__consent-box {
  border-color: #d92d20;
  background: #fff5f5;
}

.registration-form__consent.is-invalid .registration-form__consent-text {
  color: #d92d20;
}

.registration-form__consent-text {
  /* figma 367:1702: ширина 540.436. */
  flex-shrink: 0;
  width: 540.436px;
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: rgba(0, 0, 0, 0.5);
  word-break: break-word;
}

/* ============================
   Account prompt
   ============================ */
.registration-form__login {
  margin: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #000;
}

.registration-form__login-link {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

/* ============================
   Right-side visual (report illustration)
   Контейнер для композиции figma 517:955 «signup-report 1»: 582.206 × 579.
   Содержимое (карточка, бейджи, график) добавим следующими шагами —
   .report-visual это просто пустой канвас правильного размера для абсолютно
   позиционируемых детей.
   ============================ */
.registration-visual {
  /* figma 517:955: 582 × 579 на десктопе. На мобилке станет 100% × aspect. */
  width: 582px;
  flex-shrink: 0;
  display: block;
  aspect-ratio: 582 / 579;
}

.report-visual {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Декоративный градиентный эллипс (figma 367:1707).
   В figma — две вложенности с отрицательными инсетами:
     outer: inset 4.39% -4.86% 60.3% 42.6%   (внутри 517:955)
     inner: inset -54.01% -30.46%            (внутри outer)
   Если свернуть к одному <img> поверх .report-visual, получаются финальные
   координаты ниже. Эллипс выходит чуть за правый край блока — это норма
   (поэтому body имеет overflow-x: clip). */
.report-visual__bg-blob {
  position: absolute;
  top: -14.68%;
  left: 23.64%;
  width: 100.22%;
  height: 73.45%;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Композиция карточки отчёта и три бейджа.
   .report-visual__card и .report-visual__badge — это <picture>-элементы;
   браузер выбирает desktop/mobile src по media-query внутри <picture>.
   <img> внутри них растягивается 100% × 100% родителя.
   Координаты — в процентах от .report-visual (на десктопе родитель 582×579,
   на мобилке 350×265 — см. медиа-секцию ниже). */
.report-visual__card,
.report-visual__badge {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.report-visual__card > img,
.report-visual__badge > img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

/* --- Desktop (figma 517:955, 582×579) --- */
/* Карточка: SVG 447×381 включает drop-shadow padding, видимая рамка
   попадает на figma-точку (124.55, 111.76). */
.report-visual__card {
  top: 15.98%;
  left: 17.20%;
  width: 76.80%;
  height: 65.80%;
}

/* figma 517:566 / 517:567 «+25% прибыли» */
.report-visual__badge--profit {
  top: 10.15%;
  left: 65.79%;
  width: 32.25%;
  height: 10.68%;
}

/* figma 517:572 / 517:573 «20 минут» */
.report-visual__badge--time {
  top: 72.04%;
  left: 2.67%;
  width: 34.14%;
  height: 10.68%;
}

/* figma 517:580 / 517:581 «32 страницы» */
.report-visual__badge--pages {
  top: 73.85%;
  left: 61.02%;
  width: 30.35%;
  height: 10.68%;
}

/* ============================
   Mobile / intermediate (< 1200px) — раскроем на следующем шаге
   ============================ */
@media (max-width: 1399px) {
  /* --- Header --- */
  /* На мобиле бордер шапки убираем (см. figma 622:5689). */
  .site-header--bordered {
    border-bottom: 0;
  }

  .registration-header__cta-text--desktop {
    display: none;
  }

  .registration-header__cta-text--mobile {
    display: inline;
  }

  /* --- Main layout: одна колонка, visual между intro и формой ---
     figma 517:611 (Main Content mobile): flex flex-col px-20 py-50,
     внутренний gap-20 между intro / signup-report / email-section / prompt.
     Чтобы visual встал между intro и form, .registration-form переводим в
     display: contents, и все 4 блока становятся прямыми flex-детьми inner.
     Порядок задаётся `order:`. */
  .registration-main__inner {
    flex-direction: column;
    align-items: center;
    padding: 50px 20px;
    gap: 20px;
    max-width: 600px;
  }

  .registration-form {
    display: contents;
  }

  .registration-form__intro {
    order: 1;
    margin: 0;
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  .registration-form__lead {
    max-width: none;
  }

  .registration-visual {
    order: 2;
    width: 100%;
    /* figma мобильная композиция (577:1453) — 350×265 (соотношение
       шире-чем-выше, не квадратное). Переопределяем aspect-ratio
       специально для мобильного. */
    max-width: 350px;
    aspect-ratio: 350 / 265;
  }

  /* Мобильные позиции элементов внутри .report-visual.
     Проценты — от 350×265 (новый aspect-ratio).
     Точные insets взяты из figma 577:1455 / 577:1458 / 577:1495 / 577:1501 / 577:1509. */

  /* bg-blob: figma 577:1455 outer inset [-7.44% -4.86% 61.06% 42.6%],
     inner -54.01% -30.46% → итог в %s контейнера 350×265. */
  .report-visual__bg-blob {
    top: -32.50%;
    left: 23.65%;
    width: 100.17%;
    height: 96.49%;
  }

  /* Карточка: Group_mobile.svg 297×253, видимая рамка должна попасть на
     figma-точку (42.14, 10.94) в 350×265. С учётом ~16px shadow padding в
     SVG получается top: -0.70%, left: 7.39%. */
  .report-visual__card {
    top: -0.70%;
    left: 7.39%;
    width: 84.86%;
    height: 95.47%;
  }

  /* +25% прибыли (figma 577:1495), 113×38 без shadow padding. */
  .report-visual__badge--profit {
    top: 0.13%;
    left: 65.77%;
    width: 32.23%;
    height: 14.02%;
  }

  /* 20 минут (figma 577:1501), 120×38. */
  .report-visual__badge--time {
    top: 70.09%;
    left: 2.67%;
    width: 34.13%;
    height: 14.03%;
  }

  /* 32 страницы (figma 577:1509), 107×38. */
  .report-visual__badge--pages {
    top: 83.79%;
    left: 61.00%;
    width: 30.34%;
    height: 14.03%;
  }

  .registration-form__form {
    order: 3;
    margin: 0;
    width: 100%;
    max-width: 347px;
    gap: 30px;
  }

  /* На мобиле инпут и кнопка стэком вертикально (figma 517:618: flex-col). */
  .registration-form__row {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .registration-form__input {
    width: 100%;
    padding: 16px 10px;
    font-size: 16px;
    /* figma 517:619 — текст «Ваша электронная почта» по центру поля на
       всех экранах кроме десктопа. text-align работает и на введённое
       значение, и на placeholder. */
    text-align: center;
    /* Чтобы инпут не путали с кнопкой: тонкая брендовая рамка #d0d4e4
       (тот же светлый сине-серый, что и бордер десктопной шапки). */
    border: 1px solid #d0d4e4;
    /* tracking задан через em и наследуется. */
  }

  /* Плейсхолдер приглушаем — без этого черный текст по центру читается
     как полноценный label, а не подсказка. */
  .registration-form__input::placeholder {
    color: rgba(0, 0, 0, 0.45);
  }

  .registration-form__submit {
    width: 100%;
    font-size: 16px;
    /* figma 517:622: текст #1f1b53 (не чёрный) на мобилке. */
    color: #1f1b53;
  }

  .registration-form__consent {
    /* figma gap-14 на мобилке (на десктопе 17). */
    gap: 14px;
  }

  .registration-form__consent-text {
    width: auto;
    max-width: 305.582px;
    font-size: 11px;
  }

  .registration-form__login {
    order: 4;
    font-size: 16px;
  }
}

/* ============================
   Tablet (768–1399): heading сверху, форма + мобильная картинка двумя
   колонками, login снизу. Перебивает flex-column раскладку из мобильной
   медиа-секции выше (по каскаду), но визуальные размеры (aspect-ratio
   350/265, мобильные позиции card/blob/badges) наследуются — это то, что
   нам нужно.
   <picture> в HTML с media="(max-width: 1399px)" сам подгружает мобильные
   SVG (Group_mobile, income_mobile и т.д.) в этом диапазоне.
   ============================ */
@media (min-width: 768px) and (max-width: 1399px) {
  .registration-main__inner {
    display: grid;
    /* Левая колонка фиксированная 340 (форма/логин), правая — резиновая 1fr.
       На широких планшетах правая колонка вытягивает картинку к краю экрана. */
    grid-template-columns: 340px 1fr;
    grid-template-areas:
      "intro  intro"
      "form   visual"
      "login  visual";
    column-gap: 40px;
    row-gap: 0;
    align-items: center;
    max-width: 1080px;
    padding: 60px 40px 70px;
    /* отменяем flex-направление и gap от мобильной секции */
    flex-direction: row;
    gap: 0;
  }

  .registration-form__intro {
    grid-area: intro;
    order: 0;
    margin-bottom: 50px;
    /* На планшете заголовок/подзаголовок выравниваем по левому краю
       (как на десктопе), а не по центру как на мобилке. */
    align-items: flex-start;
    text-align: left;
  }

  .registration-form__lead {
    /* возвращаем десктопный потолок 591px вместо мобильного "без ограничений" */
    max-width: 591px;
  }

  .registration-form__form {
    grid-area: form;
    order: 0;
    width: 100%;
    max-width: 340px;
  }

  .registration-visual {
    grid-area: visual;
    order: 0;
    /* Растягивается по 1fr-колонке. Потолок 460px — комфортный размер,
       чтобы картинка не выглядела непропорционально большой. */
    width: 100%;
    max-width: 460px;
  }

  .registration-form__login {
    grid-area: login;
    order: 0;
    width: 100%;
    max-width: 340px;
    justify-content: flex-start;
    margin-top: 24px;
  }
}

/* Подсветка ошибок формы (registration, login, password-reset, password-create). */
.registration-form__error {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: #fde8e8;
  border: 1px solid #f5c2c2;
  color: #8a1f1f;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
}