/* Вход в личный кабинет. Образец — экран Untitled UI (две половины: форма слева, картинка с карточкой справа).
   Пересчёт с образца на 1440: левая колонка 35.6% (512), форма 360, поля через 68, кнопки 48, карточка 732×290 по центру картинки. */

.auth-page { background: var(--bg); } /* фон сайта (Павлон 08.10) */

.auth {
  display: grid; grid-template-columns: max(35.6%, 30rem) 1fr;
  min-height: 100vh; min-height: 100svh; /* svh, не dvh: dvh пересчитывается, когда Телеграм и Safari сворачивают панель, и страница прыгает (12.10) */
}

/* ---------- Левая колонка ---------- */
.auth__side {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; /* форма по центру колонки (Павлон 08.10) */
  padding: 6.5rem 4.75rem 4rem; background: var(--bg);
}
.auth__logo { position: absolute; top: 2.25rem; left: 4.75rem; } /* над левым краем формы (Павлон 08.10) */
.auth__logo img { width: 10.625rem; height: auto; }

.auth__body { width: 100%; } /* на десктопе форма во всю колонку: отступы слева и справа равны 76 (Павлон 08.10) */
.auth__title { font: 600 1.875rem/1.2 var(--font); color: var(--title); letter-spacing: -0.01em; }
.auth__sub { margin-top: 0.625rem; font: 400 0.9375rem/1.5 var(--font); color: var(--text); }

.auth__form { display: flex; flex-direction: column; margin-top: 2.25rem; }

/* подпись стоит в поле как подсказка (как в образце) и при вводе уезжает вверх; строки через 68 */
.field { position: relative; display: block; padding-top: 1.125rem; border-bottom: 1px solid var(--hair); transition: border-color .2s; }
.field[hidden] { display: none; } /* ОГРН у самозанятого: .field ставит block и перебивает hidden */
.field + .field { margin-top: 0.625rem; }
.field:focus-within { border-color: var(--green); }
.field__input {
  display: block; width: 100%; height: 2.5rem; padding: 0; border: 0; border-radius: 0;
  background: transparent; outline: none; font: 500 1rem/1 var(--font); color: var(--ink);
}
.field__input::placeholder { color: transparent; }
.field__label {
  position: absolute; left: 0; bottom: 0.6875rem; pointer-events: none;
  font: 400 0.9375rem/1.2 var(--font); color: var(--muted);
  transform-origin: 0 0; transition: transform .2s, color .2s;
}
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label { transform: translateY(-1.875rem) scale(.8667); }
/* автозаполнение: до первого действия человека Chrome прячет значение — :placeholder-shown держит подпись внизу, и она ложилась на текст (Павлон 08.10) */
.field__input:-webkit-autofill + .field__label { transform: translateY(-1.875rem) scale(.8667); }
.field__input:focus + .field__label { color: var(--olive); }
.field--pass .field__input { padding-right: 5.5rem; }
/* браузерные дорисовки: глаз пароля (Edge), заливка автозаполнения — в цвета страницы */
.field__input::-ms-reveal, .field__input::-ms-clear { display: none; }
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--bg) inset; -webkit-text-fill-color: var(--ink);
  transition: background-color 9999s;
}
.field__toggle {
  position: absolute; right: 0; bottom: 0; height: 2.5rem;
  font: 500 0.8125rem/1 var(--font); color: var(--olive);
}
.field__toggle:hover { color: var(--olive-h); }

.auth__err { margin: 1rem 0 -0.5rem; color: #d9432b; font: 500 0.875rem/1.4 var(--font); } /* ошибка входа — над кнопкой, цвет ошибки полей */
.auth__err[hidden] { display: none; }
.auth__btn:disabled { opacity: .6; cursor: progress; }
.auth__forgot { align-self: flex-end; margin-top: 0.75rem; font: 500 0.8125rem/1.4 var(--font); color: var(--olive); }
button.auth__forgot { background: none; border: 0; padding: 0; cursor: pointer; }
.auth__err a { color: inherit; text-decoration: underline; }
.auth__forgot:hover { color: var(--olive-h); }

.auth__btn {
  display: flex; align-items: center; justify-content: center; height: 3rem; margin-top: 1.75rem;
  background: var(--btn); color: var(--btn-ink); font: 500 0.9375rem/1.2 var(--font); /* как кнопки сайта */
  transition: background-color .25s, color .25s;
}
.auth__btn:hover { background: var(--btn-h); }
.auth__btn--line { margin-top: 0.875rem; background: transparent; color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.auth__btn--line:hover { background: var(--green); color: var(--white); }
.auth__btn:focus-visible, .field__toggle:focus-visible, .auth__forgot:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }

.auth__note { margin-top: 2rem; font: 400 0.875rem/1.5 var(--font); color: var(--text); text-align: center; }
.auth__note a { color: var(--ink); border-bottom: 1px solid currentColor; }

/* ---------- Правая половина ---------- */
.auth__visual {
  position: relative; display: grid; place-items: center; overflow: hidden; container-type: size;
  padding: 3rem; background: #e6e0cb; /* = фон картинки после сжатия в webp (замер), стыка не видно */
}
/* букет в исходнике — 66% высоты кадра; увеличен до ~90% панели, как в образце. Поля картинки ровного цвета, обрезка не видна; 150cqw — чтобы на узкой панели не резало цветы по бокам */
.auth__img { position: absolute; left: 50%; top: 50%; width: auto; max-width: none; height: min(136cqh, 150cqw); aspect-ratio: 1; transform: translate(-50%, -50%); }

.auth__card {
  position: relative; width: min(45.75rem, 100%); padding: 2rem 2rem 2.25rem;
  background: rgba(63, 79, 23, .6); color: var(--white);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.auth__slides { display: grid; }
/* слайды лежат стопкой, высоту задаёт длинный; подпись прижата к низу — при листании не прыгает */
.auth__slide { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; margin: 0; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.auth__slide.is-on { opacity: 1; visibility: visible; }
.auth__slide blockquote { margin: 0; font: 500 1.75rem/1.25 var(--font); letter-spacing: -0.01em; }
.auth__slide figcaption { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 2rem; }
.auth__slide b { font: 600 1.25rem/1.3 var(--font); }
.auth__slide span { font: 400 0.875rem/1.4 var(--font); }

/* переключалка — та же, что у слайдера главной (классы hero__*), в правом нижнем углу карточки, напротив подписи */
.auth__nav { right: 1.5rem; bottom: 2rem; }
.auth__card { touch-action: pan-y; cursor: grab; user-select: none; } /* горизонталь — свайпу, вертикаль — странице */
.auth__card.dragging { cursor: grabbing; }
.auth__nav[hidden] { display: none; } /* без скриптов листать нечем: hero__nav ставит flex и перебивает hidden */

/* ---------- Анкета: длинная форма. Левая колонка прокручивается, букет стоит ---------- */
.auth--long .auth__side { justify-content: flex-start; padding-top: 9rem; padding-bottom: 5rem; }
.auth--long .auth__visual { position: sticky; top: 0; height: 100vh; height: 100svh; }

.step { margin: 0; padding: 0; border: 0; min-width: 0; }
.step + .step { margin-top: 2.5rem; }
.step__title {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; padding: 0;
  font: 600 1rem/1.3 var(--font); color: var(--title);
}
.step__title span {
  display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--card-bg); color: var(--title); font: 600 0.8125rem/1 var(--font); /* цвет карточек товаров (Павлон 08.10) */
}

.choice { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.75rem; }
.choice--row { flex-direction: row; gap: 2rem; }
.choice__label { font: 400 0.8125rem/1.2 var(--font); color: var(--muted); }
.choice + .field { margin-top: 0.5rem; }

/* кружки и галочки свои: родные красит браузер (синий), а нужна олива */
.radio, .agree { position: relative; display: block; cursor: pointer; font: 400 0.9375rem/1.4 var(--font); color: var(--ink); }
.radio input, .agree input { position: absolute; opacity: 0; width: 1.25rem; height: 1.25rem; margin: 0; }
.radio span::before, .agree span::before {
  content: ""; position: absolute; left: 0; top: 0; width: 1.25rem; height: 1.25rem; /* центр кружка = середина заглавных (замер по пикселям: 0.5 px ниже, ровнее не встаёт) */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); transition: box-shadow .2s, background-color .2s;
}
.radio span, .agree span { display: block; padding-left: 2rem; }
.radio span::before { border-radius: 50%; }
.radio input:checked + span::before { box-shadow: inset 0 0 0 1px var(--green), inset 0 0 0 5px var(--bg); background: var(--green); }
.agree input:checked + span::before {
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6.2 2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
  box-shadow: inset 0 0 0 1px var(--green);
}
.radio input:focus-visible + span::before, .agree input:focus-visible + span::before { outline: 2px solid var(--olive); outline-offset: 2px; }
.radio:hover span::before, .agree:hover span::before { box-shadow: inset 0 0 0 1px var(--green); }
.radio small { margin-left: 0.25rem; font-size: 0.8125rem; color: var(--muted); }
.agree a { color: var(--olive); border-bottom: 1px solid currentColor; }

.step--agree { display: flex; flex-direction: column; gap: 0.875rem; padding-top: 2rem; border-top: 1px solid var(--hair); }
.auth--long .auth__btn[type="submit"] { margin-top: 2rem; }

/* звёздочка обязательного поля — цвет розы из логотипа (Павлон 08.10) */
.req { font-style: normal; color: #d9432b; }

/* незаполненное обязательное — коралл розы из логотипа */
.field.is-bad { border-color: #d9432b; }
.field.is-bad .field__label { color: #d9432b; }
.choice.is-bad .radio span::before, .agree.is-bad span::before { box-shadow: inset 0 0 0 1px #d9432b; }
.choice.is-bad .choice__label, .agree.is-bad span { color: #d9432b; }

.auth__done .auth__btn { margin-top: 2rem; }

/* ---------- Ширины ---------- */
@media (max-width: 1279px) {
  .auth__slide blockquote { font-size: 1.5rem; }
}
@media (max-width: 1023px) {
  .auth { grid-template-columns: 1fr; }
  .auth__visual { display: none; }
  .auth__side { align-items: center; padding: 7rem var(--pad) 3rem; }
  .auth__body { max-width: 22.5rem; } /* одна колонка на весь экран: форма 360 по центру */
  .auth__logo { left: max(var(--pad), (100% - 22.5rem) / 2); } /* форма по центру — лого над её левым краем */
  .auth--long .auth__side { padding-top: 7rem; }
}
@media (max-width: 479px) {
  .auth__side { align-items: stretch; padding-top: 6rem; }
  .auth__body { max-width: none; } /* на телефоне форма во всю ширину, отступы слева и справа равны */
  .auth__logo { top: 1.5rem; left: var(--pad); }
  .auth__logo img { width: 8.75rem; }
  .auth__title { font-size: 1.625rem; }
}

/* Переключатель языка в правом верхнем углу картинки (как в образце Petala). Английской версии пока нет — EN неактивен */
.auth__lang { position: absolute; top: 2rem; right: 2.5rem; z-index: 1; display: flex; gap: 0.25rem; font: 500 0.8125rem/1 var(--font); }
.auth__lang > * { padding: 0.5rem 0.625rem; color: var(--ink); background: rgba(255, 255, 255, .55); }
.auth__lang .is-on { background: var(--white); }
.auth__lang button:disabled { cursor: default; opacity: .7; }
.auth__btn--line { gap: 0.625rem; }
.auth__btn--line img { width: 1.25rem; height: 1.25rem; flex: none; } /* значки Яндекса, VK и MAX слева от подписи */