/* =========================================================
   goad.se — Neon Auth Modal (Login / Register)
   Работает с разметкой:
   #authModal.modal-overlay > .modal-box
   .tabs: #tabLogin, #tabRegister
   формы: #loginForm, #registerForm
   ========================================================= */

/* --- Подложка --- */
#authModal.modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(4,6,17,.78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: none; /* показываешь/прячешь своим JS */
}

/* --- Коробка модалки --- */
#authModal .modal-box {
  position: relative;
  margin: 8vh auto 0;
  width: min(92vw, 560px);
  max-height: calc(100vh - 16vh);
  overflow: auto;
  background: radial-gradient(120% 120% at 0% 0%, #0f172a 0%, #0b1222 55%);
  border-radius: 16px;
  border: 1px solid rgba(48,93,255,.30);
  box-shadow: 0 0 22px rgba(48,93,255,.24), 0 0 48px rgba(48,93,255,.16), inset 0 0 12px rgba(48,93,255,.08);
  color:#e6eefc;
  padding: 22px 22px 24px;
}

/* — Кнопка закрытия — */
#authModal .close-btn{
  position:absolute; top:12px; right:14px; width:34px; height:34px;
  border-radius:10px; border:1px solid rgba(48,93,255,.35);
  background:rgba(255,255,255,.06); color:#e6eefc; cursor:pointer;
  transition:.2s; font-size:18px; line-height:1;
}
#authModal .close-btn:hover{ background:rgba(48,93,255,.28); color:#fff; box-shadow:0 0 12px rgba(48,93,255,.45) }

/* =========================
   Табы (Вход / Регистрация)
   ========================= */
#authModal .tabs{
  display:flex; gap:8px; margin:0 0 14px;
}
#authModal .tab{
  appearance:none; border:1px solid rgba(80,120,255,.28); background:#0b1222; color:#cfe2ff;
  padding:8px 12px; border-radius:10px; cursor:pointer; transition:.2s;
}
#authModal .tab:hover{ box-shadow:0 0 10px rgba(59,130,246,.35) }
#authModal .tab.is-active{
  background: linear-gradient(90deg,#2563eb,#3b82f6);
  color:#fff; border-color: transparent; box-shadow:0 0 16px rgba(59,130,246,.45);
}

/* =========================
   Плавное появление панелей
   ========================= */
#authModal .panel{
  opacity:0; transform: translateY(6px); pointer-events:none; transition:.25s ease;
}
#authModal .panel.is-active{
  opacity:1; transform:none; pointer-events:auto;
}

/* =========================
   Поля ввода + фокус
   ========================= */
#authModal .field{ margin-bottom:12px }
#authModal .field label{ display:block; margin-bottom:6px; color:#aeb9d5 }
#authModal .field input{
  width:100%; border-radius:10px; padding:12px 14px; background:#0c1428; color:#e6eefc;
  border:1px solid rgba(80,120,255,.25); transition:.2s;
}
#authModal .field input::placeholder{ color:#8fa2c4 }
#authModal .field input:focus{
  border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.18), 0 0 14px rgba(59,130,246,.35);
  outline:none; background:#0c1730;
}

/* =========================
   Капча и кнопки
   ========================= */
#turnstile-login, #turnstile-register { margin: 8px 0 12px; }
#authModal .cf-turnstile, 
#turnstile-login > div, #turnstile-register > div { width:100% !important; }

#authModal .actions{ display:flex; gap:12px; margin-top:14px }

#authModal .btn-primary{
  background:linear-gradient(90deg,#2563eb,#3b82f6); color:#fff; border:0; padding:10px 16px; border-radius:10px;
  box-shadow:0 0 15px rgba(48,93,255,.30); transition:.2s; cursor:pointer;
}
#authModal .btn-primary:hover{ box-shadow:0 0 25px rgba(48,93,255,.55), 0 0 40px rgba(48,93,255,.30) }
#authModal .btn-primary:active{ transform: translateY(1px) scale(.99); box-shadow:0 0 12px rgba(48,93,255,.45) }

/* Заголовки */
#authModal h2{ margin:.2rem 0 .8rem; color:#f1f6ff; text-shadow:0 0 8px rgba(48,93,255,.35) }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* === Accessibility / Visibility Fix === */
[hidden] {
  display: none !important;
}