/**
 * auth-v2 — экран входа по макету «🔥 Авторизация»
 * (Figma Ylx35aiCg1aU0sWfXvPItE, node 8575-37768).
 *
 * Размеры, радиусы и цвета ниже сняты с макета через Dev Mode, не подобраны на глаз:
 * узлы 8575:38956 (мобильный, телефон), 8575:39468 (мобильный, код), 8575:40547 (десктоп).
 * Переменные соответствуют библиотеке цветов макета — рядом в комментарии её имя.
 *
 * Разметка сохранила хук-классы (.location-form__*, .is-code, #js-phone-register): на них
 * завязан personal/backend.js, переименование утащило бы за собой логику отправки кода.
 * Отсюда перекрытия тёмной темы из personal-cabinet.css — она продолжает обслуживать
 * соседний экран выбора комплекса. Файл подключается ПОСЛЕ main.css/personal-cabinet.css,
 * поэтому при равной специфичности выигрывает он.
 */

.auth-v2-screen {
  --auth-ink: #111827;          /* Text and Stroke/Total-Black.Title.Main */
  --auth-ink-soft: #1f2937;     /* Text and Stroke/Black.Title.Main */
  --auth-gray: #6b7280;         /* Text and Stroke/Gray.Secondary.Text */
  --auth-gray-light: #9ca3af;   /* Text and Stroke/Light-Gray.Text.Secondary */
  --auth-stroke: #d1d5db;       /* Text and Stroke/Gray.Stroke.Secondary */
  --auth-stroke-light: #e5e7eb; /* Text and Stroke/Light-Gray.Stroke.Secondary */
  --auth-field: #f3f4f6;        /* Backgrounds and Place/Light-Gray.Background.Main */
  --auth-place-blue: #ebf6f9;   /* Backgrounds and Place/Light-Blue.Secondary.Place */
  --auth-brand: #01aac9;        /* Branding Color/Blue.Branding.Primary */
  --auth-badge: #f0c773;
  --auth-danger: #e5484d;
  --auth-promo-ground: #111827;

  font-family: 'Golos Text VF', Arial, sans-serif;
}

/* Шапку с бургером на шагах входа не показываем — в макете её место занял промо-блок. */
.header.is-reg.is-auth-v2-hidden {
  display: none;
}

/* Фон страницы вокруг модалки: в макете десктопный фрейм — только сама модалка, воды
   вокруг нет. Фото уехало внутрь промо-блока (см. .auth-v2-promo), общий .authorize__bg
   на этих экранах не рисуем. */
.auth-v2-screen .pool-shader.authorize__bg,
.authorize.is-pk.auth-v2-screen::after {
  display: none;
}

.authorize.is-pk.auth-v2-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--auth-field);
}

.auth-v2-layout {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* justify-content:flex-end здесь стоять не должно: как только промо и карточка вместе
     перерастают экран (например, под полем появилась ошибка «Введите верный номер»),
     flex-end уводит начало колонки за верхнюю границу — логотип прилипает к краю и
     доскроллить до него нельзя. Карточку вниз прижимает flex-grow промо-блока, а при
     переполнении колонка честно растёт вниз и страница скроллится. */
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--auth-promo-ground);
}

/* --- Промо: фото поверх почти-чёрного, прозрачностью 30 % (как в макете) --- */

.auth-v2-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  /* В макете промо ровно 248px — карточка под ним занимает остаток экрана. На экранах
     выше макетных лишнее место отдаём фото, а не плоской заливке под ним. */
  /* 248px по макету + 24px, которые уходят под карточку (см. .authorize__body ниже):
     под скруглёнными углами карточки должно быть фото, а не тёмная подложка. */
  min-height: 272px;
  flex: 1 0 auto;
  padding: 24px 24px 48px;
  overflow: hidden;
  /* Тёмная подложка под фото живёт здесь, а не на .auth-v2-layout: на десктопе
     колонка модалки прозрачная, и подложка просвечивала тёмной кромкой на
     скруглённых углах белой половины. */
  background: var(--auth-promo-ground);
  color: #fff;
}

.auth-v2-promo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  /* Мобильный набор: промо во всю ширину экрана, cover берёт ширину, поэтому база 430px
     (самый широкий телефон в ходу). Десктопный набор — в медиа ниже. Сборка:
     shared/assets/build-webp-set.sh <исходник> 430 shared/assets/auth */
  background-image: url('../assets/auth/auth-bg-mobile@1x.webp');
  background-image: -webkit-image-set(
    url('../assets/auth/auth-bg-mobile@1x.webp') 1x,
    url('../assets/auth/auth-bg-mobile@2x.webp') 2x,
    url('../assets/auth/auth-bg-mobile@3x.webp') 3x,
    url('../assets/auth/auth-bg-mobile@4x.webp') 4x);
  background-image: image-set(
    url('../assets/auth/auth-bg-mobile@1x.webp') 1x,
    url('../assets/auth/auth-bg-mobile@2x.webp') 2x,
    url('../assets/auth/auth-bg-mobile@3x.webp') 3x,
    url('../assets/auth/auth-bg-mobile@4x.webp') 4x);
  opacity: .3;
}

.auth-v2-promo__logo {
  position: relative;
  width: 40px;
  height: 34.74px;
  align-self: flex-start;
}

.auth-v2-promo__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 312px;
}

.auth-v2-promo__title {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -.5px;
}

.auth-v2-promo__text {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

/* --- Карточка --- */

/* .authorize.is-pk .authorize__body — стеклянная подложка с blur и max-width 472px
   (ширина списка комплексов на соседнем экране). Здесь карточка белая и занимает
   всю отведённую колонку. */
.authorize.is-pk.auth-v2-screen .authorize__body {
  width: 100%;
  max-width: none;
  position: relative;
  z-index: 1;
  /* Карточка заезжает на промо ровно на радиус угла: в просвете под скруглением
     остаётся фото, а не тёмная подложка макета. */
  margin-top: -24px;
  margin-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
}

.auth-v2-screen .location.is-pk {
  /* Базовый .location — фиксированный оверлей во всю высоту окна (height:100%).
     Здесь карточка живёт в потоке и должна быть по контенту, иначе на десктопе она
     растягивается на все 609px модалки и форма прилипает к верхнему краю вместо
     вертикального центра. */
  height: auto;
  padding: 24px 16px;
}

.auth-v2-screen .location.is-pk .location__inner {
  position: relative;
  display: flex;
  max-width: none;
  flex-direction: column;
  gap: 24px;
  border-radius: 0;
}

/* --- Шапка карточки --- */

.auth-v2-screen .location.is-pk .location__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 0;
}

.auth-v2-screen .location.is-pk .location__title,
.auth-v2-screen .location.is-pk .location__title.is-tel {
  margin-bottom: 0;
  color: var(--auth-ink);
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -.54px;
  text-align: left;
}

.auth-v2-screen .location.is-pk .location__desc {
  padding-right: 56px;   /* место под крестик в правом верхнем углу */
  color: var(--auth-gray);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
}

.auth-v2-screen .location.is-pk .location__desc b {
  color: var(--auth-ink-soft);
  font-weight: 500;
}

/* --- Круглые кнопки «назад» и «закрыть» --- */

.auth-v2-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-v2-round {
  display: flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 20px;
  cursor: pointer;
  transition: background .15s ease;
}

.auth-v2-round img {
  display: block;
}

.auth-v2-back {
  background: var(--auth-field);
}

/* Ассет стрелки экспортирован «вправо» — в макете он развёрнут трансформом
   (-scale-y-100 + rotate-180, то есть отражение по горизонтали). */
.auth-v2-back img {
  transform: scaleX(-1);
}

.auth-v2-back:hover {
  background: #e7e9ec;
}

.auth-v2-close {
  background: var(--auth-place-blue);
}

.auth-v2-close:hover {
  background: #dcedf3;
}

/* На шаге телефона строки «назад» нет — крестик висит в углу карточки. */
.auth-v2-close--corner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
}

.auth-v2-screen .location.is-pk .location__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 0;
  border: none;
}

/* --- Ряд «войти по ID» --- */

/* Исходный .location-form__inputs — прокручиваемый список комплексов (max-height 250px
   + overflow:auto). Внутри карточки входа лежит форма, свой скролл ей не нужен. */
.auth-v2-screen .location.is-pk .location-form__inputs {
  display: flex;
  min-height: 0;
  max-height: none;
  height: auto;
  flex-direction: column;
  gap: 24px;
  overflow: visible;
  margin-bottom: 0;
  padding: 0;
  border: none;
}

.auth-v2-providers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: auto !important;
}

/* Кнопки трёх провайдеров: у Сбера это <button> (открывает SDK-виджет), у VK и Яндекса —
   <a> из Provider/<Code>/views/button.php. Разметка разная, правило одно. */
.auth-v2-provider {
  display: flex !important;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 16px 0 12px;
  border: 1px solid var(--auth-stroke-light);
  border-radius: 16px;
  background: #fff;
  color: var(--auth-ink-soft) !important;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.auth-v2-provider:hover,
.auth-v2-provider:active {
  border-color: var(--auth-stroke);
  background: #fbfcfc;
  color: var(--auth-ink-soft) !important;
}

.auth-v2-provider[disabled] {
  opacity: .6;
  cursor: default;
}

.auth-v2-provider__icon {
  display: block;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

/* Бейдж прижат к правому краю, поэтому подпись занимает остаток строки. */
.auth-v2-provider__label {
  flex: 1 1 auto;
}

/* «Быстро» у Сбера: единственный способ, после которого не надо дозаполнять анкету —
   он отдаёт и подтверждённый номер, и профиль. */
.auth-v2-provider__badge {
  display: flex;
  height: 20px;
  flex: 0 0 auto;
  align-items: center;
  padding: 1px 8px;
  border-radius: 8px;
  background: rgba(240, 199, 115, .12);
  color: var(--auth-badge);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
}

.auth-v2-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--auth-stroke);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .96px;
  text-transform: uppercase;
}

.auth-v2-or::before,
.auth-v2-or::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--auth-stroke-light);
}

/* --- Телефон и кнопка: один блок с шагом 10px --- */

.auth-v2-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-v2-screen .location-form__phone {
  display: flex;
  height: 52px;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--auth-field);
  overflow: hidden;
}

.auth-v2-screen .location-form__phone-add {
  position: static;
  padding: 0;
  color: var(--auth-ink-soft);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  transform: none;
}

/* Вертикальная черта-разделитель между «+7» и полем — из тёмной темы, в макете её нет. */
.auth-v2-screen .location-form__phone-add::before {
  display: none;
}

.auth-v2-screen .location-form__phone-input {
  width: 100%;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--auth-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  outline: none;
}

.auth-v2-screen .location-form__phone-input::placeholder {
  color: var(--auth-gray-light);
  font-size: 16px;
}

/* Инлайновая ошибка под полем: раньше валидация только красила рамку. */
.auth-v2-screen .location-form__phone:has(.error) {
  border-color: var(--auth-danger);
  background: #fff;
}

.auth-v2-screen .location-form__phone-input.error {
  border: 0;
}

.auth-v2-field-error {
  display: none;
  color: var(--auth-danger);
  font-size: 13px;
  line-height: 18px;
}

.auth-v2-field-error.is-active {
  display: block;
}

/* --- Кнопка --- */

.auth-v2-screen .location.is-pk .location-form__buttons {
  display: block;
  margin-top: 0;
}

.auth-v2-screen .location.is-pk .location-form__submit {
  display: flex;
  width: 100%;
  height: 48px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px 24px;
  border: 0;
  border-radius: 16px;
  background: var(--auth-brand);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-transform: uppercase;
  transition: background .15s ease, color .15s ease;
  outline: none !important;
}

.auth-v2-screen .location.is-pk .location-form__submit:hover {
  background: #019bb7;
  color: #fff;
}

/* Пока вводить нечего — кнопка серая (в макете это её стартовое состояние).
   Состоянием управляет syncAuthSubmitState() в personal/backend.js. */
.auth-v2-screen .location.is-pk .location-form__submit[disabled],
.auth-v2-screen .location.is-pk .location-form__submit.js-boot-pending {
  background: var(--auth-field);
  color: var(--auth-stroke);
  cursor: default;
}

/* Второстепенное действие в паре кнопок — «Запросить СМС» на push-шаге. */
.auth-v2-screen .location.is-pk .location-form__submit.btn-secondary {
  background: var(--auth-place-blue);
  color: var(--auth-ink-soft);
}

.auth-v2-screen .location.is-pk .location-form__submit.btn-secondary:hover {
  background: #dcedf3;
  color: var(--auth-ink-soft);
}

/* --- Согласие --- */

.auth-v2-consent {
  margin: 0;
  color: var(--auth-gray-light);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.auth-v2-consent a {
  color: var(--auth-brand);
  text-decoration: none;
}

.auth-v2-consent a:hover {
  text-decoration: underline;
}

/* --- Ошибки уровня экрана (провайдер не отдал номер, сеть и т.п.) --- */

.auth-v2-error {
  display: none;
  color: var(--auth-danger);
  font-size: 13px;
  line-height: 18px;
}

.auth-v2-error.is-active {
  display: block;
}

/* Sber ID открывается не ссылкой, а SDK-виджетом: его нужно куда-то смонтировать,
   но показывать нельзя — кликаем по нему из кода (см. startSberPhoneAuth). */
.auth-v2-sdk-mount {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: 320px;
  height: 48px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* --- Экран ввода кода --- */

.auth-v2-screen .location.is-pk.auth-v2-step-code {
  padding: 24px;
}

/* .location__desc.is-code в тёмной теме — flex-колонка ради «******80-80» отдельной
   строкой. В макете подпись однострочная, с номером целиком внутри текста. */
.auth-v2-screen .location.is-pk .location__desc.is-code {
  display: block;
}

.auth-v2-resend {
  margin: 0;
  color: var(--auth-stroke);
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

.auth-v2-resend__button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--auth-brand);
  font: inherit;
  cursor: pointer;
}

.auth-v2-resend__button:hover {
  text-decoration: underline;
}

/* Ячейки кода рисует bootstrap-pincode-input: оригинальный input прячется, а рядом
   появляется .pincode-input-container с четырьмя полями. Обёртку в разметке назвали
   .auth-v2-code, а не .location-form__phone — иначе на ячейки села бы тёмная тема. */
.auth-v2-code .pincode-input-container {
  display: flex;
  gap: 12px;
}

/* На touch-устройствах плагин строит другой DOM: одно прозрачное поле с letter-spacing
   поверх четырёх подложек .touch-flex-cell, а не четыре отдельных инпута. Подложки
   в исходных стилях — прозрачные с белой рамкой и уезжают под z-index:-1, то есть на
   светлой карточке их не видно вовсе: пользователь видел цифры, висящие в пустоте. */
.auth-v2-code .pincode-input-container.touch {
  display: block;
}

.auth-v2-code .pincode-input-container.touch .touchwrapper {
  height: 52px;
}

.auth-v2-code .pincode-input-container.touch .touch-flex {
  z-index: 0;
  gap: 12px;
}

.auth-v2-code .pincode-input-container.touch .touch-flex-cell {
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: center;
  margin-right: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--auth-field);
  color: var(--auth-ink);
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 52px;
}

/* Цифры в подложках расставляет backend.js, а само поле остаётся прозрачным приёмником
   ввода. Раскладку в touch-режиме плагин делает эвристикой (letter-spacing и padding
   по предполагаемой ширине цифры) — под четыре плашки с зазором 12px она не попадает,
   и цифры уезжали мимо ячеек. Каретку оставляем видимой, чтобы поле не выглядело мёртвым. */
.auth-v2-code .pincode-input-container.touch .touchwrapper .pincode-input-text {
  position: relative;
  z-index: 1;
  height: 52px;
  padding-left: 0 !important;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: var(--auth-brand);
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 52px;
  letter-spacing: 0 !important;
  text-align: center;
  box-shadow: none;
  outline: none;
}

/* Десктопный режим — четыре самостоятельных инпута. */
.auth-v2-code .pincode-input-container:not(.touch) .pincode-input-text {
  width: 100%;
  height: 52px;
  flex: 1 1 0;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--auth-field);
  color: var(--auth-ink);
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  box-shadow: none;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}

.auth-v2-code .pincode-input-container:not(.touch) .pincode-input-text:focus {
  border-color: var(--auth-brand);
  background: #fff;
}

.auth-v2-code .pincode-input-container:not(.touch) .pincode-input-text.error,
.auth-v2-code.has-error .pincode-input-container:not(.touch) .pincode-input-text {
  border-color: var(--auth-danger);
  background: #fff;
}

/* Плагин вставляет собственный .pincode-input-error — сообщение показывает
   backend.js в .js-auth-code-error, дубль не нужен. */
.auth-v2-code .pincode-input-error {
  display: none;
}

/* Ошибка кода в touch-режиме подсвечивает подложки, а не прозрачное поле. */
.auth-v2-code.has-error .pincode-input-container.touch .touch-flex-cell {
  border-color: var(--auth-danger);
  background: #fff;
}

.auth-v2-screen .js-auth-code-error {
  margin: 0 !important;
  color: var(--auth-danger) !important;
  font-size: 13px;
  line-height: 18px;
  text-align: left !important;
}

/* Клавиатура на мобильном перекрывает нижнюю карточку: как только visualViewport
   становится заметно ниже окна (backend.js вешает .is-keyboard), промо схлопывается
   и на экране остаётся форма — «вид при клаве» из макета. */
.auth-v2-screen.is-keyboard .auth-v2-promo {
  height: auto;
  padding-top: 16px;
  padding-bottom: 40px; /* 16px + 24px захода под карточку */
}

.auth-v2-screen.is-keyboard .auth-v2-promo__title {
  font-size: 20px;
}

/* --- Десктоп: модалка 912 × 609, слева фото с промо, справа форма --- */

@media (min-width: 1024px) {
  .authorize.is-pk.auth-v2-screen {
    padding: 40px 20px;
  }

  .auth-v2-layout {
    display: grid;
    overflow: hidden;
    width: 912px;
    max-width: 100%;
    /* Высота макетная, но не жёсткая. При height:609px строка грида всё равно растёт под
       самый высокий столбец — например, когда под кнопкой появляется ошибка отправки кода,
       — а контейнер остаётся 609px и режет overflow:hidden. Резало при этом не правый
       столбец, который вырос, а левый: промо растягивается на высоту строки, его
       justify-content:space-between уводит подпись под нижнюю границу карточки, и текст
       «Кабинет хранит билеты…» обрезался пополам. С min-height карточка честно растёт вниз
       вместе с содержимым, и обрезать нечего. */
    min-height: 609px;
    grid-template-columns: 392px 520px;
    border-radius: 24px;
    /* Подложку несёт промо-колонка; прозрачный контейнер не даёт тёмной кромке
       просвечивать на антиалиасинге скруглённых углов белой половины. */
    background: transparent;
  }

  .auth-v2-promo {
    min-height: 0;
    flex: 0 1 auto;
    justify-content: space-between;
    padding: 40px;
  }

  /* Десктопная колонка 392×609 — cover берёт высоту, изображение растягивается примерно
     до 812 CSS px по ширине, отсюда база набора. Сборка:
     shared/assets/build-webp-set.sh <исходник> 812 shared/assets/auth */
  .auth-v2-promo::before {
    background-position: center;
    background-image: url('../assets/auth/auth-bg@1x.webp');
    background-image: -webkit-image-set(
      url('../assets/auth/auth-bg@1x.webp') 1x,
      url('../assets/auth/auth-bg@2x.webp') 2x,
      url('../assets/auth/auth-bg@3x.webp') 3x,
      url('../assets/auth/auth-bg@4x.webp') 4x);
    background-image: image-set(
      url('../assets/auth/auth-bg@1x.webp') 1x,
      url('../assets/auth/auth-bg@2x.webp') 2x,
      url('../assets/auth/auth-bg@3x.webp') 3x,
      url('../assets/auth/auth-bg@4x.webp') 4x);
  }

  .auth-v2-promo__logo {
    margin-bottom: auto;
  }

  .auth-v2-promo__title {
    font-size: 32px;
  }

  .authorize.is-pk.auth-v2-screen .authorize__body {
    display: flex;
    height: 100%;
    /* Колонка, а не строка: у .authorize__body flex-direction:column из общих стилей,
       и align-items центрирует по горизонтали. Вертикальный центр — justify-content,
       иначе форма прилипает к верхнему краю модалки (заметно на шаге ввода кода,
       где контента вдвое меньше). */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    /* Свой радиус у правой половины: контейнер режет overflow, но без радиуса на самой
       колонке край антиалиасится о фон страницы и даёт серую кромку. */
    border-radius: 0 24px 24px 0;
  }

  .auth-v2-screen .location.is-pk {
    width: 100%;
    padding: 64px 40px;
  }

  /* Шаг кода в макете (8575:40615) — p-40, контент прижат к верху, а не по центру
     колонки: контента вдвое меньше, и по центру он висел в пустоте. margin-bottom:auto
     в колонке с justify-content:center забирает всё свободное место под себя. */
  .auth-v2-screen .location.is-pk.auth-v2-step-code {
    width: 100%;
    margin-bottom: auto;
    padding: 40px;
  }

  /* Крестик на шаге кода в макете стоит в углу белой половины (20px от краёв), а
     стрелка «назад» — в потоке с отступом 40px. Строка навигации оставляет в потоке
     только стрелку. */
  .auth-v2-screen .auth-v2-step-code .auth-v2-nav .auth-v2-close {
    position: absolute;
    top: -20px;
    right: -20px;
  }

  .auth-v2-screen .location.is-pk .location__inner {
    gap: 22px;
  }

  /* На десктопе крестик — скруглённый квадрат в углу белой половины, не круг. */
  .auth-v2-screen .auth-v2-close {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--auth-field);
  }

  .auth-v2-screen .auth-v2-close:hover {
    background: #e7e9ec;
  }

  .auth-v2-close--corner {
    top: -44px;
    right: -20px;
  }
}

@media (min-width: 1024px) and (max-height: 700px) {
  .auth-v2-layout {
    height: auto;
    min-height: 560px;
  }

  .auth-v2-screen .location.is-pk {
    padding: 40px;
  }
}

/* Прослойки .location__form / .location-form__head в разметке нужны только компоненту
   Bitrix — сквозной шаг между шапкой и формой они бы разорвали, поэтому убираем их
   из потока и оставляем один flex-контейнер. */
.auth-v2-screen .location.is-pk .location__form,
.auth-v2-screen .location.is-pk .location-form__head {
  display: contents;
}

/* Крестик на шаге телефона стоит в углу карточки, поэтому подпись обтекает его.
   На шаге кода его держит строка .auth-v2-nav, отступ не нужен. */
.auth-v2-screen .location.is-pk.auth-v2-step-code .location__desc {
  padding-right: 0;
}

/* В макете крестик отбит от края карточки на 24px, а не выровнен по колонке контента. */
.auth-v2-close--corner {
  right: 8px;
}

@media (min-width: 1024px) {
  .auth-v2-close--corner {
    right: -20px;
  }
}


/* personal/main.css держит .location-form__inputs без tel-поля на min-height:250px —
   правило написано под список комплексов на соседнем экране, но экран ввода кода под
   него тоже подходит, и под кнопкой оставалось ~86px пустой карточки. Селектор повторён
   целиком: у исходного правила специфичность выше за счёт :not(:has(...)). */
.auth-v2-screen .location.is-pk .location-form__inputs:not(:has(input[type="tel"])) {
  min-height: 0;
}


/* На невысоких экранах промо в 248px вместе с карточкой перерастает вьюпорт и уводит
   страницу в скролл — отдаём часть высоты форме. */
@media (max-width: 1023px) and (max-height: 760px) {
  .auth-v2-promo {
    min-height: 224px;
    gap: 16px;
  }
}

@media (max-width: 1023px) and (max-height: 680px) {
  .auth-v2-promo {
    min-height: 184px;
  }

  .auth-v2-promo__title {
    font-size: 20px;
  }
}