/* ── Reset & Variables ───────────────────────────────────────────── */
.auth-root *, .auth-root *::before, .auth-root *::after { box-sizing: border-box; }

.auth-root {
  --bg:         #0a0a0a;
  --panel:      #111111;
  --border:     rgba(255,255,255,0.07);
  --text:       #e8e8e8;
  --muted:      #555;
  --btn-bg:     #1a1a1a;
  --btn-hover:  #222;
}

/* ── Root Layout ─────────────────────────────────────────────────── */
.auth-root {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
  font-family: 'Sora', sans-serif;
  color: var(--text);
}

/* ── Left Column ─────────────────────────────────────────────────── */
.auth-col-left {
  width: 42%;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  z-index: 2;
  overflow-y: auto;
}

.auth-login-form-wrapper {
  width: 100%;
  max-width: 340px;
}

.auth-login-form-wrapper h2 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
  color: #fff;
  text-align: left;
}

.auth-login-form-wrapper > .auth-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 28px;
  text-align: left;
}
.auth-login-form-wrapper > .auth-sub a {
  color: #666;
  text-decoration: underline;
}
.auth-login-form-wrapper > .auth-sub a:hover {
  color: #999;
}

/* ── Tabs ────────────────────────────────────────────────────────── */
.auth-tabs {
  display: flex;
  background: #161616;
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
}
.auth-tab-btn {
  flex: 1;
  padding: 9px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: block;
  text-align: center;
  line-height: 1;
}
.auth-tab-btn.active {
  background: #252525;
  color: #fff;
}
.auth-tab-btn:hover:not(.active) {
  color: #999;
}

/* ── Social Login (Nextend Social Login) ─────────────────────────── */
.auth-social-wrapper .nsl-container,
.auth-social-wrapper .nsl-container-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.auth-social-wrapper a.nsl-button,
.auth-social-wrapper .nsl-button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 11px 16px !important;
  background: var(--btn-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s !important;
  text-decoration: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  height: auto !important;
  line-height: normal !important;
}
.auth-social-wrapper a.nsl-button:hover,
.auth-social-wrapper .nsl-button:hover {
  background: var(--btn-hover) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}
.auth-social-wrapper .nsl-button-icon {
  width: 17px !important;
  height: 17px !important;
  background: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.auth-social-wrapper .nsl-button-label-container {
  background: transparent !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 13px !important;
  color: var(--text) !important;
  padding: 0 !important;
}

/* ── Divider ─────────────────────────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--muted);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* CEV inserts signup validation messages into #customer_login. */
.auth-root #customer_login.auth-registration-notices {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.auth-root #customer_login.auth-registration-notices > .woocommerce-error {
  display: block;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #8c4545;
  border-radius: 10px;
  background: #291919;
  color: #ffd6d6;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: anywhere;
}
.auth-root #customer_login.auth-registration-notices > .woocommerce-error::before {
  content: none;
}

/* ── WooCommerce Register Form ───────────────────────────────────── */
form.register,
form.woocommerce-form-register {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

form.register .form-row,
form.woocommerce-form-register .form-row {
  margin-bottom: 12px !important;
  padding: 0 !important;
}

form.register input.input-text,
form.woocommerce-form-register input.input-text,
form.register input[type="text"],
form.woocommerce-form-register input[type="text"],
form.register input[type="password"],
form.woocommerce-form-register input[type="password"],
form.register input[type="email"],
form.woocommerce-form-register input[type="email"] {
  width: 100% !important;
  padding: 11px 14px !important;
  background: #161616 !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

form.register input::placeholder,
form.woocommerce-form-register input::placeholder {
  color: #3a3a3a !important;
}

form.register input:focus,
form.woocommerce-form-register input:focus {
  border-color: rgba(255,255,255,0.2) !important;
  box-shadow: none !important;
  background: #1a1a1a !important;
}

/* Hide labels */
form.register label,
form.woocommerce-form-register label {
  display: none !important;
}


.auth-password-field {
  position: relative;
  display: block;
}

.auth-password-field input[type="password"],
.auth-password-field input[type="text"] {
  padding-right: 46px !important;
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #777;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-password-toggle:hover {
  color: #fff;
}

.auth-password-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.auth-password-rules {
  display: none;
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}

.auth-password-rules.is-visible {
  display: block;
}

.auth-password-rules li::before {
  content: '•';
  margin-right: 6px;
}

.auth-password-rules li.is-valid {
  color: #3ddc84;
}

.auth-password-rules li.is-invalid {
  color: #d06a6a;
}


/* ── Cloudflare Turnstile CAPTCHA ───────────────────────────────── */
.auth-captcha {
  margin: 14px 0 16px;
  display: flex;
  justify-content: center;
}

.auth-captcha .cf-turnstile {
  max-width: 100%;
}

/* Submit button */
form.register button.button,
form.woocommerce-form-register button.button,
form.register input[type="submit"],
form.woocommerce-form-register input[type="submit"] {
  width: 100% !important;
  padding: 12px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  color: #000 !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-top: 4px !important;
  transition: opacity 0.2s !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}
form.register button.button:hover,
form.woocommerce-form-register button.button:hover {
  opacity: 0.88 !important;
  background: #fff !important;
}

/* ── Terms ───────────────────────────────────────────────────────── */
.auth-terms {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 18px;
  line-height: 1.6;
}
.auth-terms a {
  color: #666;
  text-decoration: underline;
}
.auth-terms a:hover {
  color: #999;
}

/* ── Right Column ────────────────────────────────────────────────── */
.auth-col-right {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
}

.auth-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.2;
  pointer-events: none;
}
.auth-blob-1 { width: 400px; height: 400px; background: #3ddc84; top: -120px; right: 40px; }
.auth-blob-2 { width: 320px; height: 320px; background: #f7931a; bottom: 40px;  right: -80px; }
.auth-blob-3 { width: 220px; height: 220px; background: #8247e5; bottom: 180px; left: 60px; }

.auth-ico {
  position: absolute;
  border-radius: 22%;
  will-change: transform, opacity, filter;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-ico img {
  width: 76%;
  height: 76%;
  object-fit: contain;
  display: block;
}

/* Telegram promo card */
.telegram-promo-box {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 320px;
  background: rgba(22, 22, 28, 0.82);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 20;
  text-align: left;
}
.telegram-promo-box strong {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.telegram-promo-box p {
  color: var(--muted);
  font-size: 12px;
  margin: 8px 0 0 0;
  line-height: 1.5;
}
.telegram-promo-box a {
  display: block;
  margin-top: 12px;
  text-decoration: none;
}
.telegram-promo-box a button {
  background: var(--btn-bg);
  color: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 1.25rem;
  font-size: 13px;
  font-family: 'Sora', sans-serif;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s, border-color 0.2s;
}
.telegram-promo-box a button:hover {
  background: #252525;
  border-color: rgba(255,255,255,0.15);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .auth-root        { flex-direction: column; min-height: 100vh; }
  .auth-col-left    { width: 100%; min-width: unset; padding: 2.5rem 1.5rem 3rem; }
  .auth-col-right   { display: none; }
  .auth-login-form-wrapper { max-width: 100%; }
}