/* ======================================================
   Vector Lex — Auth (Resend-inspired, Dark Elegant 2026)
   Styles for .vl-auth-page (page-auth)
   ====================================================== */

.vl-auth-page{
  --auth-card-bg: rgba(18,18,18,.72);
  --auth-card-border: rgba(255,255,255,.12);

  --auth-field-bg: rgba(255,255,255,.04);
  --auth-field-border: rgba(255,255,255,.10);
  --auth-field-border-focus: rgba(255,255,255,.22);

  --auth-text: rgba(255,255,255,.92);
  --auth-muted: rgba(255,255,255,.62);
  --auth-muted-2: rgba(255,255,255,.44);

  position: relative;
  isolation: isolate;
}

/* ======================================================
   AUTH Background (only gradients)
   ====================================================== */

body.page-auth{
  background: #0D0D0D;
}

body.page-auth .vl-auth-page::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(1100px 720px at 84% 18%, rgba(255,255,255,.11), rgba(0,0,0,0) 62%),
    radial-gradient(980px 700px at 16% 86%, rgba(255,255,255,.09), rgba(0,0,0,0) 64%),
    radial-gradient(860px 620px at 52% 44%, rgba(255,255,255,.055), rgba(0,0,0,0) 70%),
    radial-gradient(560px 420px at 62% 62%, rgba(255,255,255,.032), rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.018) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,.38) 100%);

  opacity: .70;
  transform: translateZ(0);
}

body.page-auth .vl-auth-page::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    radial-gradient(1200px 820px at 50% 38%,
      rgba(0,0,0,0) 0 55%,
      rgba(0,0,0,.58) 76%,
      rgba(0,0,0,.92) 100%
    );

  transform: translateZ(0);
}

/* content always above background */
.vl-auth-page__dialog,
.vl-authTopBack{
  position: relative;
  z-index: 2;
}

/* ======================================================
   Back pill (premium)
   ====================================================== */

body.page-auth .vl-authTopBack{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  text-decoration: none;
  font-family: var(--vl-font-ui);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .01em;

  color: rgba(255,255,255,.82);

  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);

  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 34px rgba(0,0,0,.34);

  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

body.page-auth .vl-authTopBack i{
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* визуально “опускаем” иконку — убирает ощущение, что она выше текста */
  transform: translateY(1px);
  opacity: .92;
}

body.page-auth .vl-authTopBack span{
  line-height: 1;
  transform: translateY(.5px);
}

body.page-auth .vl-authTopBack:hover{
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  transform: translateY(-1px);
}

body.page-auth .vl-authTopBack:active{
  transform: translateY(0);
}

body.page-auth .vl-authTopBack:focus-visible{
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 34px rgba(0,0,0,.34),
    0 0 0 4px rgba(255,255,255,.06);
}

/* ======================================================
   Container
   ====================================================== */

.vl-auth-page__dialog{
  width: 100%;
  max-width: 480px;
}

/* ======================================================
   Card
   ====================================================== */

.vl-auth__card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(520px 220px at 20% 0%, rgba(255,255,255,.05), rgba(0,0,0,0) 60%),
    var(--auth-card-bg);

  border: 1px solid var(--auth-card-border);
  border-radius: 24px;
  padding: 34px 30px 28px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);

  backdrop-filter: blur(18px);
  overflow: visible;
}

/* ======================================================
   Header
   ====================================================== */

body.page-auth .vl-authHead{
  text-align: center;
}

/* mark: clean contour glow + controlled underglow */
body.page-auth .vl-authMark{
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;

  border-radius: 18px;
  display: grid;
  place-items: center;

  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: visible;
  box-sizing: border-box;

  background:
    radial-gradient(140px 80px at 30% 18%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%),
    rgba(9,9,9,.78);

  border: 0;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 22px rgba(255,255,255,.12),
    0 14px 30px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.07);
}

body.page-auth .vl-authMark::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);

  width: 88px;
  height: 30px;
  border-radius: 999px;

  pointer-events: none;
  z-index: -1;

  background:
    radial-gradient(28px 18px at 18% 55%, rgba(255,255,255,.22), rgba(0,0,0,0) 72%),
    radial-gradient(28px 18px at 82% 55%, rgba(255,255,255,.22), rgba(0,0,0,0) 72%),
    radial-gradient(42px 26px at 50% 70%, rgba(255,255,255,.10), rgba(0,0,0,0) 76%);

  filter: blur(12px);
  opacity: .30;
}

body.page-auth .vl-authMark__logo{
  width: 24px;
  height: 24px;
  display: block;

  opacity: .92;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
  transform: translateY(.5px);
}

/* title with subtle gradient (premium) */
.vl-authTitle{
  margin: 0;
  font-family: var(--vl-font-copy);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--auth-text);
}

@supports (-webkit-background-clip: text){
  .vl-authTitle{
    background: linear-gradient(180deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.78) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.vl-authSwitch{
  margin: 8px 0 0;
  font-family: var(--vl-font-ui);
  font-size: 13px;
  color: var(--auth-muted);
}

.vl-authSwitch__link{
  color: rgba(255,255,255,.90);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.20);
  padding-bottom: 1px;
  margin-left: 6px;
  transition: border-color .18s ease, color .18s ease;
}

.vl-authSwitch__link:hover{
  color: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.34);
}

/* ======================================================
   Fields
   ====================================================== */

.vl-auth-page .vl-field{
  margin: 0 0 16px;
}

.vl-auth-page .vl-field label{
  display: block;
  margin: 0 0 8px;

  font-family: var(--vl-font-ui);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--auth-muted-2);

  transition: color .18s ease;
}

/* label highlight when field focused */
.vl-auth-page .vl-field:focus-within > label,
.vl-auth-page .vl-field:focus-within .vl-field__labelRow > label{
  color: rgba(255,255,255,.92);
}

/* label row (Password + Forgot) */
.vl-auth-page .vl-field__labelRow{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
}

.vl-auth-page .vl-field__labelRow label{
  margin: 0;
}

.vl-authForgot{
  font-family: var(--vl-font-ui);
  font-size: 13px;
  color: rgba(255,255,255,.64);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.16);
  padding-bottom: 1px;
  white-space: nowrap;

  transition: color .18s ease, border-color .18s ease;
}

.vl-authForgot:hover{
  color: rgba(255,255,255,.90);
  border-color: rgba(255,255,255,.30);
}

@media (max-width: 360px){
  .vl-auth-page .vl-field__labelRow{ flex-wrap: wrap; }
  .vl-authForgot{ white-space: normal; }
}

.vl-auth-page .vl-input-wrap{
  position: relative;
}

/* inputs */
.vl-auth-page input.input-text{
  width: 100%;
  height: 52px;
  padding: 0 16px;

  border-radius: 16px;
  border: 1px solid var(--auth-field-border);

  background: var(--auth-field-bg);
  color: rgba(255,255,255,.90);

  font-family: var(--vl-font-ui);
  font-size: 15px;

  outline: none;
  box-sizing: border-box;

  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.vl-auth-page input.input-text::placeholder{
  color: rgba(255,255,255,.36);
}

.vl-auth-page input.input-text:focus{
  border-color: var(--auth-field-border-focus);
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 4px rgba(255,255,255,.05);
}

.vl-auth-page input.input-text:focus-visible{
  outline: none;
}

/* password input + eye button */
.vl-auth-page .vl-input-wrap--pass input.input-text{
  padding-right: 56px;
}

.vl-auth-page .vl-pass-toggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 34px;
  height: 34px;
  padding: 0;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);

  color: rgba(255,255,255,.70);
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  line-height: 1;

  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.vl-auth-page .vl-pass-toggle i{
  font-size: 18px;
  line-height: 1;
}

.vl-auth-page .vl-pass-toggle:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.86);
}

.vl-auth-page .vl-pass-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}

/* remember me (if appears) */
.vl-auth-page .woocommerce-form-login__rememberme input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;

  width: 18px;
  height: 18px;

  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);

  display: inline-grid;
  place-items: center;

  transition: background .18s ease, border-color .18s ease;
  margin: 0;
}

.vl-auth-page .woocommerce-form-login__rememberme input[type="checkbox"]::after{
  content:"";
  width: 9px;
  height: 5px;
  border-left: 2px solid #0D0D0D;
  border-bottom: 2px solid #0D0D0D;
  transform: rotate(-45deg);
  opacity: 0;
}

.vl-auth-page .woocommerce-form-login__rememberme input[type="checkbox"]:checked{
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.92);
}

.vl-auth-page .woocommerce-form-login__rememberme input[type="checkbox"]:checked::after{
  opacity: 1;
}

/* ======================================================
   Primary button
   ====================================================== */

.vl-auth-page .btn-primary{
  width: 100%;
  height: 54px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.22);

  background: rgba(255,255,255,.88);
  color: #0D0D0D;

  font-family: var(--vl-font-ui);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;

  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.vl-auth-page .btn-primary:hover{
  background: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.30);
  transform: translateY(-1px);
}

.vl-auth-page .btn-primary:active{
  transform: translateY(0);
}

.vl-auth-page .btn-primary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

/* ======================================================
   Legal
   ====================================================== */

.vl-auth-page .vl-legal-text{
  margin: 16px 0 0;
  text-align: center;

  font-size: 11px;
  line-height: 1.55;
  color: rgba(255,255,255,.46);
}

.vl-auth-page .vl-legal-text a{
  color: rgba(255,255,255,.66);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding-bottom: 1px;
}

.vl-auth-page .vl-legal-text a:hover{
  color: rgba(255,255,255,.90);
  border-color: rgba(255,255,255,.34);
}

/* hide default Woo privacy text block (you already use your own) */
.vl-auth-page .woocommerce-privacy-policy-text{
  display: none !important;
}

/* ======================================================
   Notices (Woo)
   ====================================================== */

.vl-auth-page .woocommerce-error,
.vl-auth-page .woocommerce-message,
.vl-auth-page .woocommerce-info{
  margin: 0 0 14px;
  padding: 12px 14px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);

  color: rgba(255,255,255,.88);
  list-style: none;
}

.vl-auth-page .woocommerce-error li,
.vl-auth-page .woocommerce-message li,
.vl-auth-page .woocommerce-info li{
  margin: 0;
}

/* ======================================================
   Mobile
   ====================================================== */

@media (max-width: 520px){
  .vl-auth__card{
    padding: 28px 18px 22px;
    border-radius: 22px;
  }

  .vl-authTitle{
    font-size: 26px;
  }

  .vl-auth-page input.input-text{
    height: 50px;
    border-radius: 15px;
  }
}



/* Lost/Reset helper text + icon */
.vl-auth-page .vl-authHelp{
  margin: 14px 0 18px;
  text-align: center;
  font-family: var(--vl-font-ui);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.58);
}

.vl-auth-page .vl-authIcon{
  width: 56px;
  height: 56px;
  margin: 16px auto 12px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
}

.vl-auth-page .vl-authIcon i{
  font-size: 28px;
  line-height: 1;
  transform: translateY(1px);
}

.vl-auth-page a.btn-primary{
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}


/* Helper text under fields (desktop + mobile одинаково) */
.vl-auth-page .vl-fieldHint{
  margin: 8px 2px 0;
  font-family: var(--vl-font-ui);
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.54);
  letter-spacing: .01em;
}



/* ======================================================
   Auth notices: compact, inside card (browser-like)
   ====================================================== */

.vl-auth-page .woocommerce-notices-wrapper,
.vl-auth-page .woocommerce-NoticeGroup,
.vl-auth-page .woocommerce-NoticeGroup-checkout{
  margin: 0 0 14px;
}

/* one compact pill */
.vl-auth-page .woocommerce-error,
.vl-auth-page .woocommerce-message,
.vl-auth-page .woocommerce-info{
  position: relative;

  margin: 0 0 12px;
  padding: 10px 12px 10px 36px; /* space for dot */

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);

  color: rgba(255,255,255,.90);
  list-style: none;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* status dot */
.vl-auth-page .woocommerce-error::before,
.vl-auth-page .woocommerce-message::before,
.vl-auth-page .woocommerce-info::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);

  width: 8px;
  height: 8px;
  border-radius: 999px;
  opacity: .95;
}

.vl-auth-page .woocommerce-error::before{
  background: rgba(255,77,79,.95);
  box-shadow: 0 0 10px rgba(255,77,79,.35);
}
.vl-auth-page .woocommerce-message::before{
  background: rgba(46,204,113,.95);
  box-shadow: 0 0 10px rgba(46,204,113,.28);
}
.vl-auth-page .woocommerce-info::before{
  background: rgba(30,144,255,.95);
  box-shadow: 0 0 10px rgba(30,144,255,.28);
}

/* no bullets / normalize inner li */
.vl-auth-page .woocommerce-error li,
.vl-auth-page .woocommerce-message li,
.vl-auth-page .woocommerce-info li{
  margin: 0;
  padding: 0;
}

.vl-auth-page .woocommerce-error li::before,
.vl-auth-page .woocommerce-message li::before,
.vl-auth-page .woocommerce-info li::before{
  display: none !important;
}

/* subtle type borders */
.vl-auth-page .woocommerce-error{
  border-color: rgba(255,77,79,.28);
}
.vl-auth-page .woocommerce-message{
  border-color: rgba(46,204,113,.22);
}
.vl-auth-page .woocommerce-info{
  border-color: rgba(30,144,255,.22);
}

/* если вдруг в notice попадет ссылка восстановления — не показываем */
.vl-auth-page .woocommerce-error a[href*="lostpassword"],
.vl-auth-page .woocommerce-error a[href*="lost-password"]{
  display: none !important;
}

/* =========================================
   AUTH / REGISTER — без свечения фона и формы
   Вставить в конец css/vectorlex-auth.css
   ========================================= */

/* Фон страницы — просто наш базовый фон, без сияния */
body.page-auth{
  background: #0D0D0D !important;
}

body.page-auth .vl-auth-page::before,
body.page-auth .vl-auth-page::after{
  display: none !important;
  content: none !important;
}

/* Форма авторизации / регистрации — без светящихся градиентов */
body.page-auth .vl-auth__card{
  background: #121212 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Чуть спокойнее верхняя часть формы */
body.page-auth .vl-authHead{
  background: transparent !important;
}