/* ============================================================================
   themes/default/css/lovers-auth.css — вход / регистрация / восстановление
   в стиле темы lovers.

   Страница: themes/default/layout/auth/auth.phtml (роуты /login,
   /register, /forget — index.php:464–494). Это ВЕБ-страница, не Angular:
   на неё ведёт лендинг landing4 и с телефона, и с компьютера.
   Подключается в <head> auth.phtml ПОСЛЕ auth.css и crossplatform.css;
   всё — под body.lv-auth-page, поэтому каждый селектор на класс тяжелее
   исходного в auth.css и !important не нужен. Исключение — кнопка
   sweetalert: у неё !important в инлайновом <style> самой auth.phtml.

   Токены продублированы из mobile/lovers/css/lovers.css (:root) —
   lovers.css на эту страницу не грузится. Менять синхронно.
   Разметку и login.js не трогаем: id и классы — их.
   ========================================================================== */

.lv-auth-page {
  --lv-bg:            #0B0B10;
  --lv-surface:       #16161D;
  --lv-surface-2:     #1E1E27;
  --lv-surface-3:     #262631;
  --lv-line:          rgba(255, 255, 255, .07);
  --lv-line-strong:   rgba(255, 255, 255, .14);
  --lv-text:          #F2F2F5;
  --lv-text-dim:      #A8A8B4;
  --lv-text-mute:     #6E6E7C;
  --lv-text-on-accent:#FFFFFF;
  --lv-accent:        #A855F7;
  --lv-danger:        #F0555F;
  --lv-online:        #22C55E;
  --lv-grad-cta:      linear-gradient(90deg, #7C3AED 0%, #C026D3 45%, #F0A93B 100%);
  --lv-grad-badge:    linear-gradient(90deg, #7C3AED 0%, #C026D3 100%);
  --lv-glow-cta:      0 12px 30px -14px rgba(192, 38, 211, .7);
  --lv-shadow-card:   0 2px 14px -8px rgba(0, 0, 0, .8);
  --lv-auth-glow:     rgba(168, 85, 247, .30);
  --lv-auth-glow-2:   rgba(236, 72, 153, .16);
  --lv-veil:          rgba(0, 0, 0, .6);
  --lv-r-sm:   8px;
  --lv-r-md:   14px;
  --lv-r-lg:   18px;
  --lv-r-pill: 999px;
  --lv-font: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  color-scheme: dark;
  background: var(--lv-bg);
  color: var(--lv-text);
  font-family: var(--lv-font);
}

/* ---------------------------------------------------------------- ФОН ----*/
/* .bl-main-wrap — светлая подложка на весь экран (auth.css:1063). */

.lv-auth-page .bl-main-wrap {
  background:
    radial-gradient(90% 50% at 15% -5%, var(--lv-auth-glow), transparent 70%),
    radial-gradient(80% 45% at 100% 105%, var(--lv-auth-glow-2), transparent 70%),
    var(--lv-bg);
}

/* На узком экране auth.css красит контейнеры в белый (.xs\:bg-white
   в @media max-width:700px) и карточку в .bg-white. */
.lv-auth-page .xs\:bg-white,
.lv-auth-page .bg-white {
  background: transparent;
}

/* --------------------------------------------------------- КАРТОЧКА ------*/

.lv-auth-page .auth-main-wrap {
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-r-lg);
  background: var(--lv-surface);
  box-shadow: var(--lv-shadow-card);
}

@media (max-width: 700px) {
  /* На телефоне карточка без рамки — сразу на фоне страницы. */
  .lv-auth-page .auth-main-wrap {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* ------------------------------------------------------------ ТЕКСТ ------*/

.lv-auth-page .text-blDark { color: var(--lv-text); }
.lv-auth-page .text-blGrey { color: var(--lv-text-mute); }
.lv-auth-page .text-blPrimary { color: var(--lv-accent); }

.lv-auth-page a { color: inherit; }

.lv-auth-page .underline {
  color: var(--lv-accent);
}

/* ------------------------------------------------------------- ПОЛЯ ------*/
/* .input-main-wrap — обёртка с 1px прозрачной рамкой; при фокусе
   auth.css кладёт в неё градиент, и он проступает рамкой. Оставляем
   приём, меняем цвета. */

.lv-auth-page .input-main-wrap {
  border-radius: var(--lv-r-sm);
  background: var(--lv-line-strong);
}

.lv-auth-page .input-main-wrap:focus-within {
  background: var(--lv-grad-badge);
}

.lv-auth-page .bl-input,
.lv-auth-page .bl-input:hover,
.lv-auth-page .bl-input:focus {
  background-color: var(--lv-surface-2);
  color: var(--lv-text);
  font-family: var(--lv-font);
}

.lv-auth-page .bl-input {
  height: 46px;
  border-radius: calc(var(--lv-r-sm) - 1px);
}

.lv-auth-page .bl-input::placeholder {
  color: var(--lv-text-mute);
}

.lv-auth-page select.bl-input option {
  background: var(--lv-surface-2);
  color: var(--lv-text);
}

/* Автозаполнение браузера красит поле в белый/жёлтый. */
.lv-auth-page .bl-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--lv-surface-2) inset;
  -webkit-text-fill-color: var(--lv-text);
  caret-color: var(--lv-text);
}

/* Ошибка / успех: auth.css ставит белый фон — возвращаем тёмный. */
.lv-auth-page .input-main-wrap.error-input,
.lv-auth-page .input-main-wrap.success-input,
.lv-auth-page .input-main-wrap.error-input:focus-within,
.lv-auth-page .input-main-wrap.success-input:focus-within {
  background-color: var(--lv-surface-2);
}

.lv-auth-page .input-main-wrap.error-input { border-color: var(--lv-danger); }
.lv-auth-page .input-main-wrap.success-input { border-color: var(--lv-online); }

.lv-auth-page .input-main-wrap.error-input .bl-input,
.lv-auth-page .input-main-wrap.success-input .bl-input {
  background-color: var(--lv-surface-2);
}

/* Префикс «lovers.in.ua/» в поле логина и глаз пароля. */
.lv-auth-page .bl-input-prefix {
  color: var(--lv-text-mute);
}

.lv-auth-page .bl-input-with-suffix-icon path {
  fill: var(--lv-text-mute);
}

/* Город (#loc): поле создаёт login.js (addressAutocomplete) с теми же
   классами bl-input; выпадающий список — .autocomplete-items
   из crossplatform.css (белый). */
.lv-auth-page .autocomplete-items {
  border-color: var(--lv-line-strong);
  border-radius: var(--lv-r-sm);
  background-color: var(--lv-surface-2);
  box-shadow: var(--lv-shadow-card);
  color: var(--lv-text);
}

.lv-auth-page .autocomplete-items div:hover,
.lv-auth-page .autocomplete-items .autocomplete-active {
  background-color: var(--lv-surface-3);
}

.lv-auth-page .clear-button,
.lv-auth-page .clear-button:hover {
  color: var(--lv-text-mute);
}

/* Галочка согласия. */
.lv-auth-page input[type="checkbox"] {
  accent-color: var(--lv-accent);
}

/* ----------------------------------------------------------- КНОПКИ ------*/
/* .bl-btn / .bl-bg — коралловый градиент с анимацией на hover
   (auth.css:1025, 1198). Приводим к градиенту темы, без КАПСА. */

.lv-auth-page .bl-btn,
.lv-auth-page .bl-bg,
.lv-auth-page .bl-bg:hover,
.lv-auth-page .bl-bg-active {
  height: 48px;
  border: 0;
  border-radius: var(--lv-r-pill);
  background: var(--lv-grad-cta);
  background-size: 100%;
  box-shadow: var(--lv-glow-cta);
  animation: none;
  font-family: var(--lv-font);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}

.lv-auth-page .disable-btn.bl-btn {
  box-shadow: none;
}

/* Кнопки соцвходов (Google, VK, Facebook). */
.lv-auth-page .bl-trans-btn {
  height: 46px;
  border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-r-pill);
  background: var(--lv-surface-2);
  color: var(--lv-text);
  font-family: var(--lv-font);
}

.lv-auth-page .bl-trans-btn:hover {
  background: var(--lv-surface-3);
}

/* Разделитель «або». */
.lv-auth-page .grey-border-block {
  background-color: var(--lv-line-strong);
}

/* ------------------------------------------------------ SWEETALERT -------*/
/* Кнопка — через !important: в <style> самой auth.phtml стоит
   .sweet-alert button { background-color:#000 !important }. */

.lv-auth-page .sweet-overlay {
  background-color: var(--lv-veil);
}

.lv-auth-page .sweet-alert {
  border-radius: var(--lv-r-lg);
  background-color: var(--lv-surface-2);
  font-family: var(--lv-font);
}

.lv-auth-page .sweet-alert h2 {
  color: var(--lv-text);
}

.lv-auth-page .sweet-alert p {
  color: var(--lv-text-dim);
}

.lv-auth-page .sweet-alert button {
  border-radius: var(--lv-r-pill);
  background: var(--lv-grad-badge) !important;
  box-shadow: none;
}