/* ==========================================================================
   Попап «Получить КП» — assets/svg/popup-template.svg (панель 1276×761 @1920)
   Открывается кнопкой в шапке. Внутри — тот же набор, что в блоке #cta:
   заголовок лесенкой, список «подберем», три поля и кнопка-пилюля. Поля берут
   классы .cta__* — шаг, отступы 27/26 и линии там уже описаны.
   ========================================================================== */

.popup {
  position: fixed;
  inset: 0;
  z-index: 1040; /* выше липкой шапки (1030) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow: auto; /* на низком окне панель можно доскроллить, а не обрезать */
}

/* Явно, а не на откуп браузеру: display: flex выше по каскаду перебил бы
   [hidden] везде, где в UA-стилях у него нет !important (Chrome его ставит,
   другие движки — не обязаны). */
.popup[hidden] { display: none; }

/* Подложка отдельным слоем, а не фоном .popup: backdrop-filter размывает то,
   что ЗА элементом, поэтому фильтр не должен висеть на общем контейнере —
   иначе он размоет и саму панель. */
.popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 16, 16, 0.4);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

/* Скругление эллиптическое, 58.48 по горизонтали и 39 по вертикали — те же
   радиусы, что в кривых popup-bg.svg. Сам svg не подключаем: он собран из
   шести перекрывающихся путей, и на стыках углов остаются светлые швы
   (та же история, что с tooltip-bg.svg). */
.popup__panel {
  position: relative;
  flex: 0 0 auto;
  width: 79.75rem;     /* 1276px */
  height: 47.5625rem;  /* 761px */
  border-radius: 3.655rem / 2.4375rem;
  background: var(--c-white);
  color: var(--c-ink);
}

/* Панель принимает фокус при открытии (js/main.js вешает ей tabindex=-1),
   чтобы клавиатура и скринридер оказались внутри диалога. Рамку гасим: она
   обвела бы всю панель, а сама панель ничего не «делает» — жать в ней надо
   крестик, ссылки меню и поля, у них свои состояния. */
.popup__panel:focus { outline: none; }

/* --- Крестик -------------------------------------------------------------- */
.popup__close {
  position: absolute;
  top: 1.75rem;    /* 28px */
  right: 1.875rem; /* 30px */
  /* Заголовок — абсолютный слой во всю ширину панели и стоит в разметке ПОСЛЕ
     крестика, поэтому его строка ложилась сверху и забирала клик себе
     (elementFromPoint в центре крестика возвращал span заголовка). */
  z-index: 2;
  width: 2.25rem;  /* 36px */
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.45s ease;
}

.popup__close::before,
.popup__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--line-w);
  background: var(--c-ink);
}

.popup__close::before { transform: rotate(45deg); }
.popup__close::after  { transform: rotate(-45deg); }
.popup__close:hover { opacity: 0.55; }

/* --- Заголовок ------------------------------------------------------------ */
.popup__title {
  position: absolute;
  top: 1.375rem;    /* 22px — верх строки, глаз буквы ложится на 29px макета */
  left: 1.875rem;
  right: 1.875rem;
  margin: 0;
  line-height: 0.764; /* 84px при кегле 110 — как у .cta__title */
}

.popup__title span { display: block; }
.popup__title--end { text-align: right; }

/* --- «Подберем» ----------------------------------------------------------- */
.popup__pick-label,
.popup__pick {
  position: absolute;
  top: 14.6875rem; /* 235px */
  margin: 0;
}

.popup__pick-label { left: 1.875rem; }
.popup__pick { left: 1.875rem; padding: 0; }

.popup__pick li { display: flex; }

/* Цифры правым краем на 310px, текст с 341px — как в макете. */
.popup__pick-num {
  flex: 0 0 17.5rem; /* 280px */
  margin-right: 1.9375rem; /* 31px */
  text-align: right;
}

/* --- Форма ---------------------------------------------------------------- */
.popup__form {
  position: absolute;
  /* 419px. Линия над первым полем рисуется внутренней тенью, то есть съедает
     полтора пикселя собственной коробки — отсюда правка на 2px, иначе весь
     столбец полей встаёт выше макета. */
  top: 26.1875rem;
  left: 21.3125rem;   /* 341px */
  width: 56.5625rem;  /* 905px */
}

/* Линия над верхним полем в #cta висит на .cta__row:first-child; здесь первая
   строка формы — та же, правило общее и срабатывает само. */

/* --- Экран «заявка отправлена» -------------------------------------------
   Координаты сняты с макета: текст встаёт по левому краю формы (341px) и по
   центру высоты панели, кнопка — ровно туда, где стояла «получить КП».
   Заголовок, список «подберем» и сама форма при этом уходят.

   !important тут обязателен: у заголовка стоят бутстраповские d-none
   d-lg-block (и d-lg-none у мобильного двойника), а это display с
   !important — обычное правило ему проигрывает, и старый текст оставался
   висеть над новым.
-------------------------------------------------------------------------- */
.popup__panel.is-sent .popup__title,
.popup__panel.is-sent .popup__pick-label,
.popup__panel.is-sent .popup__pick,
.popup__panel.is-sent .popup__form { display: none !important; }

.popup__panel > .form-done {
  position: absolute;
  inset: 0;
  display: block;   /* дети стоят по координатам макета, а не потоком */
}

.popup__panel > .form-done .form-done__title {
  position: absolute;
  top: 50%;
  left: 21.3125rem;   /* 341px — левый край формы */
  right: 1.875rem;
  transform: translateY(-50%);
}

.popup__panel > .form-done .form-done__btn {
  position: absolute;
  top: 43.125rem;     /* 690px — строка кнопки «получить КП» */
  left: 21.3125rem;
}

/* --- Мобильный макет (assets/svg/mobile-popup.svg, 498×822) ---------------
   В мобильном макете раскрытое меню и попап — ОДИН экран: панель выезжает
   сверху во всю ширину, в ней логотип, крестик, горизонтальное меню и та же
   форма заявки. Поэтому бургер открывает этот же попап, отдельного меню нет.

   Значения сняты прямо из svg-экспорта:
     · подложка — #101010 40% плюс backdrop-filter: blur(40px) (в самом svg
       так и записано: data-figma-bg-blur-radius=80 и foreignObject с blur(40));
     · панель — белая, 0…822, снизу эллиптические углы 30×20 (из кривой
       «C498 813.164 485.778 822 468 822»);
     · крестик — две линии 2px из (426,31) в (468,57).

   Вертикаль:
       30…58    логотип 42×28        31…57  крестик 42×26
       105…127  меню, моно 20
       226…438  заголовок, 4 строки 70/53
       472…532  «подберем» и список 1–4
       571…721  форма, три поля с шагом 50
       762…792  кнопка
       822      низ панели
------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .popup { align-items: flex-start; padding: 0; }

  .popup__panel {
    width: 100%;
    height: 51.375rem;                    /* 822px */
    padding: 0;
    border-radius: 0 0 1.875rem 1.875rem / 0 0 1.25rem 1.25rem;
  }

  /* --- Плавное открытие ---
     Панель выезжает сверху, подложка проявляется. Класс is-open вешает
     js/main.js СЛЕДУЮЩИМ кадром после снятия hidden — иначе браузер посчитает
     оба состояния за одно и переход не стартует. Закрытие он же ждёт по
     transitionend, чтобы панель успела уехать до display: none.

     Только на мобилке: на десктопе попап открывается мгновенно, как и был. */
  .popup__panel {
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .popup__backdrop {
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .popup.is-open .popup__panel { transform: translateY(0); }
  .popup.is-open .popup__backdrop { opacity: 1; }

  /* --- Шапка панели --- */
  .popup__logo {
    position: absolute;
    top: 1.875rem;                        /* 30px */
    left: 1.875rem;
    width: 2.625rem;                      /* 42px, пропорция svg 1.5 → 28 */
  }

  /* Крестик из макета — ровно две линии по диагоналям бокса 42×26, поэтому
     не квадрат с rotate(45°), а размер и наклон по месту. */
  .popup__close {
    top: 1.9375rem;                       /* 31px */
    right: 1.875rem;                      /* правый край 468 */
    width: 2.625rem;                      /* 42px */
    height: 1.625rem;                     /* 26px */
  }

  /* Линии — диагонали бокса 42×26: длина √(42²+26²) = 49.4, наклон
     atan(26/42) = 31.76°. В процентах задавать нельзя — они считаются от
     ширины бокса (42), и крестик выходил вдвое короче. */
  .popup__close::before,
  .popup__close::after {
    top: 50%;
    left: 50%;
    width: 3.0875rem;                     /* 49.4px */
    height: 2px;
  }

  .popup__close::before { transform: translate(-50%, -50%) rotate(31.76deg); }
  .popup__close::after  { transform: translate(-50%, -50%) rotate(-31.76deg); }

  .popup__menu {
    position: absolute;
    top: 6.4375rem;                       /* 103px — глаз строки ложится на 107 */
    left: 1.875rem;
    right: 1.875rem;
    height: 1.375rem;
    font-size: var(--fs-lead);            /* 20px */
    line-height: 1.1;
  }

  .popup__menu a { position: absolute; top: 0; white-space: nowrap; }
  .popup__menu a:nth-child(1) { left: 0; }
  .popup__menu a:nth-child(2) { left: 9.6875rem; }   /* 185 − 30 */
  .popup__menu a:nth-child(3) { right: 0; }

  /* --- Заголовок «лесенкой», как в 11 блоке --- */
  .popup__title--m {
    position: absolute;
    top: 14.125rem;                       /* 226px */
    left: 0;
    right: 0;
    font-size: var(--fs-display-m);       /* 70px */
    line-height: 0.757;                   /* 53px */
  }

  .popup__title--m > span {
    display: block;
    height: 3.3125rem;
    margin-left: var(--mx, 0);
  }

  /* --- «Подберем» --- */
  .popup__pick-label,
  .popup__pick {
    position: absolute;
    top: 29.625rem;                       /* 474px — глаз строки на 477 */
    margin: 0;
    font-size: var(--fs-caption);
    line-height: 1;
  }

  .popup__pick-label { left: 1.8125rem; }  /* 29px */

  .popup__pick {
    left: 0;
    right: 0;
    padding: 0;
  }

  .popup__pick li {
    display: block;
    position: relative;
    min-height: 0.9375rem;                /* 15px — шаг строк */
    /* текст с 185, правый край по линии сетки: наш третий пункт длиннее
       макетного и иначе лез бы за экран */
    padding-left: 11.5625rem;
    padding-right: 0.9375rem;
  }

  .popup__pick-num {
    position: absolute;
    left: 9.25rem;                        /* 148px */
    flex: none;
    margin: 0;
    text-align: left;
  }

  /* --- Форма --- */
  .popup__form {
    position: absolute;
    top: 35.6875rem;                      /* 571px — первая линия */
    left: 0;
    right: 0;
    width: auto;
  }

  /* Поля берут .cta__* (шаг 50, линии, кегль) из cta.css; там поджатие
     считается от поля секции, здесь у панели полей нет — задаём сами. */
  .popup__form .cta__row,
  .popup__form .cta__submit { margin-inline: 1.875rem; }   /* 30…468 */

  .popup__form .cta__submit { margin-top: 2.5625rem; }     /* 41px до кнопки */

  .popup__field-note { display: none; }

  /* Экран «отправлено» на мобилке: текст встаёт на место заголовка (226px),
     кнопка — на место «получить КП» (762px). По центру панели он бы висел в
     пустоте: панель высокая, 822px, и текст оказывался ниже, чем всё
     остальное, что человек только что видел. */
  .popup__panel > .form-done .form-done__title {
    top: 14.125rem;     /* 226px */
    left: 1.875rem;
    right: 1.875rem;
    transform: none;
    text-align: center;
  }

  .popup__panel > .form-done .form-done__btn {
    top: 47.625rem;     /* 762px */
    left: 1.875rem;
    right: 1.875rem;
    width: auto;
  }
}