/* ============================================================================
   FRENZY96 — Deep-Sea Redesign · AUTH MODAL  (fz-auth.css)
   Transplant of design prototype AUTH MODAL (pkg2 L1335-1372) onto the
   production auth-v3 markup. ALL ids / handlers / Turnstile / CMS fillers
   untouched — skin only.
   Specificity note: auth-redesign.css + auth-center-fix.css deliberately use
   `html body #modal-auth#modal-auth … !important` to outrank stanley-header.
   This file follows the same convention and loads LAST so it wins 1:1.
   ============================================================================ */

/* ── Backdrop (design: rgba(4,8,12,.74) + blur4) ─────────────────────────── */
html body #modal-auth#modal-auth.modal-backdrop {
  background: rgba(4, 8, 12, 0.74) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Panel: 400px, underwater art + teal gradient, r18 ───────────────────── */
html body #modal-auth#modal-auth.modal-backdrop .auth-v3,
html body #modal-auth#modal-auth .auth-v3 {
  max-width: 400px !important;
  background:
    linear-gradient(180deg, rgba(9, 38, 50, 0.82) 0%, rgba(4, 14, 22, 0.92) 100%),
    url("../img/bg/underwater-modal.jpg") center / cover no-repeat !important;
  border: 1px solid var(--fz-line-2) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 80px rgba(0, 0, 0, 0.6) !important;
  padding-top: 18px !important;
  padding-bottom: 20px !important;
}

/* close X — quiet ghost per design */
html body #modal-auth#modal-auth .auth-v3 .auth-v3-close {
  background: none !important;
  border: none !important;
  color: var(--fz-text-3) !important;
}
html body #modal-auth#modal-auth .auth-v3 .auth-v3-close:hover { color: var(--fz-white) !important; }

/* brand row: logo 26px + tag (CMS-driven, layout only) */
html body #modal-auth#modal-auth .auth-v3 .auth-v3-logo { height: 26px !important; }
html body #modal-auth#modal-auth .auth-v3 .auth-v3-wordmark {
  font-family: var(--fz-font-display) !important;
  letter-spacing: 0.06em;
  color: var(--fz-white) !important;
}
html body #modal-auth#modal-auth .auth-v3 .auth-v3-tag {
  color: var(--fz-text-3) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em;
}

/* ── Tabs → design pill switcher (navy track, active = surface-2 white) ──── */
html body #modal-auth#modal-auth.modal-backdrop .auth-v3 .auth-v3-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  background: var(--fz-navy) !important;
  border: 1px solid var(--fz-line) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  margin-bottom: 16px !important;
}
html body #modal-auth#modal-auth.modal-backdrop .auth-v3 .auth-v3-tab {
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 0 !important;
  /* legacy skin used flex-fill (flex:1 + width:0); in the design grid that
     collapses buttons to 0px with overflowing text — restore natural width */
  width: auto !important;
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--fz-font-body) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent !important;
  color: var(--fz-text-3) !important;
  box-shadow: none !important;
}
html body #modal-auth#modal-auth.modal-backdrop .auth-v3 .auth-v3-tab.auth-v3-tab.active,
html body #modal-auth#modal-auth .auth-v3 .auth-v3-tab.active {
  background: var(--fz-surface-2) !important;
  color: var(--fz-white) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ── Register panel head → design gift banner (copy stays 100% CMS:
      cfg.copy.register_title / register_subtitle fill these nodes) ────────── */
html body #modal-auth#modal-auth .auth-v3 #auth-v3-reg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px !important;
  background: var(--fz-gold-soft) !important;
  border: 1px dashed rgba(245, 200, 66, 0.45) !important;
  border-radius: 10px !important;
  margin-bottom: 14px !important;
  text-align: left !important;
}
html body #modal-auth#modal-auth .auth-v3 #auth-v3-reg-head[style*="display: none"],
html body #modal-auth#modal-auth .auth-v3 #auth-v3-reg-head[style*="display:none"] { display: none !important; }
html body #modal-auth#modal-auth .auth-v3 #auth-v3-reg-head .fz-gift-ico {
  color: var(--fz-gold);
  flex-shrink: 0;
  display: inline-flex;
}
html body #modal-auth#modal-auth .auth-v3 #auth-v3-reg-head .auth-v3-panel-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--fz-gold) !important;
  margin: 0 !important;
}
html body #modal-auth#modal-auth .auth-v3 #auth-v3-reg-head .auth-v3-panel-sub {
  font-size: 12px !important;
  color: var(--fz-text) !important;
  margin: 0 !important;
}

/* login head stays a quiet heading */
html body #modal-auth#modal-auth .auth-v3 #auth-v3-login-head .auth-v3-panel-title {
  font-family: var(--fz-font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fz-white) !important;
}
html body #modal-auth#modal-auth .auth-v3 #auth-v3-login-head .auth-v3-panel-sub {
  color: var(--fz-text-3) !important;
  font-size: 12px !important;
}

/* ── Inputs → design fields ──────────────────────────────────────────────── */
html body #modal-auth#modal-auth.modal-backdrop .auth-v3 .auth-v3-input {
  background: rgba(4, 16, 24, 0.6) !important;
  border: 1px solid var(--fz-line) !important;
  border-radius: 10px !important;
  color: var(--fz-text) !important;
  min-height: 44px !important;
  font-family: var(--fz-font-body) !important;
  font-size: 14px !important;
}
html body #modal-auth#modal-auth.modal-backdrop .auth-v3 .auth-v3-input::placeholder { color: var(--fz-text-3) !important; }
html body #modal-auth#modal-auth.modal-backdrop .auth-v3 .auth-v3-input:focus {
  border-color: var(--fz-cyan) !important;
  box-shadow: 0 0 0 3px rgba(41, 182, 232, 0.15) !important;
  outline: none !important;
}
html body #modal-auth#modal-auth .auth-v3 .auth-v3-phone-prefix {
  background: rgba(4, 16, 24, 0.6) !important;
  border: 1px solid var(--fz-line) !important;
  border-radius: 10px !important;
  color: var(--fz-text-2) !important;
  font-family: var(--fz-font-mono);
}
html body #modal-auth#modal-auth .auth-v3 .auth-v3-eye { color: var(--fz-cyan) !important; opacity: .75; }

/* OTP send — cyan action chip */
html body #modal-auth#modal-auth.modal-backdrop .auth-v3 .auth-v3-otp-btn {
  background: linear-gradient(180deg, var(--fz-cyan-bright), var(--fz-cyan-deep)) !important;
  color: var(--fz-on-cyan) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
}

/* remember-me: cyan when checked (structure untouched) */
html body #modal-auth#modal-auth .auth-v3 .auth-v3-remember-box {
  width: 17px; height: 17px;
  border-radius: 5px !important;
  border: 1px solid var(--fz-line-2) !important;
  background: transparent !important;
  color: var(--fz-on-cyan) !important;
}
html body #modal-auth#modal-auth .auth-v3 .auth-v3-remember-cb:checked ~ .auth-v3-remember-box {
  background: var(--fz-cyan) !important;
  border-color: var(--fz-cyan) !important;
}
html body #modal-auth#modal-auth .auth-v3 .auth-v3-remember-text { color: var(--fz-text-2) !important; font-size: 12px !important; }

/* ── CTA → design gold lg (label text stays CMS-filled) ──────────────────── */
html body #modal-auth#modal-auth.modal-backdrop .auth-v3 .auth-v3-cta {
  background: var(--fz-grad-gold) !important;
  color: var(--fz-on-gold) !important;
  border: none !important;
  border-radius: 12px !important;
  min-height: 44px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  box-shadow: var(--fz-glow-gold) !important;
}
html body #modal-auth#modal-auth.modal-backdrop .auth-v3 .auth-v3-cta:hover { box-shadow: var(--fz-glow-gold-hover) !important; }

/* links: cyan per design language (was green) */
html body #modal-auth#modal-auth.modal-backdrop .auth-v3 .auth-v3-link,
html body #modal-auth#modal-auth.modal-backdrop .auth-v3 .auth-v3-switch-link { color: var(--fz-cyan) !important; }
html body #modal-auth#modal-auth .auth-v3 .auth-v3-switch-prefix { color: var(--fz-text-3) !important; }

/* error / hint lines must never clip inside the 400px panel */
html body #modal-auth#modal-auth .auth-v3 .auth-v3-hint,
html body #modal-auth#modal-auth .auth-v3 .auth-v3-form .bs-error,
html body #modal-auth#modal-auth .auth-v3 .auth-v3-form [id$="-error"] {
  white-space: normal !important;
  overflow: visible !important;
  line-height: 1.45;
}

/* Turnstile widget (300px) centered inside the 400px panel — never clipped */
html body #modal-auth#modal-auth .auth-v3 #ts-login,
html body #modal-auth#modal-auth .auth-v3 #ts-register {
  max-width: 100%;
  overflow: visible !important;
  display: flex;
  justify-content: center;
}

/* 18+ terms footer (static display line, design L1369) */
html body #modal-auth#modal-auth .auth-v3 .fz-auth-terms {
  text-align: center;
  font-size: 10px;
  color: var(--fz-text-3);
  margin-top: 12px;
  line-height: 1.6;
}