/* ================================================
   AUTH MODAL — Compact Olive Edition (#606661 bg)
   ================================================ */

/* ── Color tokens ── */
:root {
  --auth-bg       : #606661;
  --auth-bg-dark  : #4e524f;
  --auth-gold     : #F5C518;
  --auth-gold-dim : #C8900A;
  --auth-white    : #FFFFFF;
  --auth-sub      : rgba(255,255,255,.58);
  --auth-in-bg    : rgba(0,0,0,.22);
  --auth-in-bd    : rgba(255,255,255,.16);
  --auth-in-focus : rgba(245,197,24,.7);
}

.modal {
  display:none;position:fixed;inset:0;z-index:1100;
  background:rgba(0,0,0,.72);
  align-items:center;justify-content:center;
  padding:14px;
}
.modal.active { display:flex; }

@keyframes popIn {
  from { opacity:0; transform:scale(.93) translateY(14px); }
  to   { opacity:1; transform:scale(1)   translateY(0); }
}
@keyframes goldShimmer {
  0%   { transform:translateX(-100%) rotate(45deg); }
  100% { transform:translateX(220%)  rotate(45deg); }
}

/* ── Modal sheet ── */
.modal-sheet {
  width:100%; max-width:380px;
  max-height:92vh; overflow-y:auto;
  scrollbar-width:none;
  background: var(--auth-bg);
  border-radius:20px;
  padding:18px 16px 22px;
  position:relative;
  animation:popIn .28s cubic-bezier(.25,.8,.25,1) both;
  box-shadow:
    0 20px 60px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.13),
    inset 0 1px 0 rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.14);
}
.modal-sheet::-webkit-scrollbar { display:none; }

/* ── Close btn ── */
.modal-close {
  position:absolute; top:12px; right:12px;
  width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.6); font-size:14px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer; transition:all .18s; z-index:2;
}
.modal-close:hover { background:rgba(0,0,0,.4); color:#fff; }

/* ── Brand ── */
.auth-modal-brand {
  display:flex; align-items:center; gap:8px;
  margin-bottom:14px; justify-content:center;
}
.auth-brand-txt {
  font-size:16px; font-weight:900;
  color:var(--auth-white); letter-spacing:.3px;
}

/* ── Tabs ── */
.auth-tabs {
  display:flex;
  background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:3px; margin-bottom:14px;
}
.auth-tab {
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  padding:7px 8px; border-radius:10px;
  background:none; border:none;
  color:rgba(255,255,255,.38);
  font-size:12px; font-family:inherit; font-weight:600;
  cursor:pointer; transition:all .2s;
}
.auth-tab.active {
  background:rgba(0,0,0,.32);
  color:var(--auth-gold);
  border:1px solid rgba(245,197,24,.28);
  box-shadow:0 1px 8px rgba(0,0,0,.25);
}

/* ── Subtitle ── */
.auth-subtitle {
  font-size:11.5px; color:var(--auth-sub);
  margin-bottom:12px; text-align:center; letter-spacing:.3px;
}

/* ── Form body ── */
.auth-body { padding:0; display:block; }
#registerForm, #loginForm { display:flex; flex-direction:column; gap:8px; }

/* ── Input group ── */
.input-group {
  display:flex; align-items:center;
  background:var(--auth-in-bg);
  border:1px solid var(--auth-in-bd);
  border-radius:12px; padding:10px 12px; gap:8px;
  transition:border-color .2s, box-shadow .2s;
}
.input-group:focus-within {
  border-color:var(--auth-in-focus);
  box-shadow:0 0 0 3px rgba(245,197,24,.1);
}
.inp-icon { color:rgba(255,255,255,.32); display:flex; flex-shrink:0; }
.input-group input {
  flex:1; background:none; border:none;
  color:var(--auth-white); font-size:13px; font-family:inherit; outline:none;
}
.input-group input::placeholder { color:rgba(255,255,255,.28); font-size:11.5px; }

/* ── Eye toggle ── */
.eye-toggle {
  background:none; border:none;
  color:rgba(255,255,255,.32); display:flex; padding:0; cursor:pointer;
  transition:color .18s;
}
.eye-toggle:hover { color:var(--auth-gold); }

/* ── Phone wrap ── */
.phone-wrap {
  display:flex;
  background:var(--auth-in-bg);
  border:1px solid var(--auth-in-bd);
  border-radius:12px; overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.phone-wrap:focus-within {
  border-color:var(--auth-in-focus);
  box-shadow:0 0 0 3px rgba(245,197,24,.1);
}
.phone-prefix {
  display:flex; align-items:center; gap:4px;
  padding:10px 10px;
  border-right:1px solid rgba(255,255,255,.1);
  font-size:12.5px; color:rgba(255,255,255,.7); font-weight:600; flex-shrink:0;
}
.phone-input {
  flex:1; background:none; border:none;
  color:var(--auth-white); font-size:13px; padding:10px 10px;
  font-family:inherit; outline:none;
}
.phone-input::placeholder { color:rgba(255,255,255,.28); font-size:11.5px; }

/* ── Referral row ── */
.ref-row {
  display:flex; align-items:center; gap:6px;
}
.ref-row-label {
  font-size:10.5px; color:var(--auth-sub); flex-shrink:0; font-weight:600;
}
.ref-dots { display:flex; gap:3px; flex-shrink:0; }
.ref-dot  { width:7px; height:7px; border-radius:50%; }

/* Referral glass wrapper — relative container */
.ref-input-wrap {
  flex:1; position:relative;
  background:var(--auth-in-bg);
  border:1px solid var(--auth-in-bd);
  border-radius:10px; overflow:hidden;
}
.ref-input-wrap input {
  width:100%; background:none; border:none;
  color:var(--auth-gold); font-size:11.5px; padding:8px 10px;
  font-family:inherit; outline:none; font-weight:600;
  pointer-events:none; user-select:none;
}
.ref-input-wrap input::placeholder { color:rgba(255,255,255,.22); font-weight:400; }

/* Glassmorphism overlay — covers the input */
.ref-glass-overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:5px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  pointer-events:none;
  border-radius:10px;
}
/* When the input has a non-empty value, hide overlay */
.ref-input-wrap input:not(:placeholder-shown) ~ .ref-glass-overlay {
  display:none;
}
.ref-glass-label {
  font-size:10px; font-weight:700; letter-spacing:.6px;
  color:rgba(255,255,255,.65);
  text-transform:uppercase;
}

/* ── Age check ── */
.age-check {
  display:flex; align-items:flex-start; gap:7px;
  font-size:10.5px; color:var(--auth-sub); line-height:1.65;
}
.age-check input[type="checkbox"] {
  margin-top:2px;
  accent-color:var(--auth-gold); flex-shrink:0;
  width:13px; height:13px; cursor:pointer;
}
.age-check a { color:var(--auth-gold); text-decoration:none; }

/* ── Submit button — Gold ── */
.auth-submit {
  width:100%; border:none; border-radius:12px; padding:12px;
  background:linear-gradient(135deg, #F5C518 0%, #C8900A 100%);
  color:#1a0f00; font-size:14px; font-weight:800;
  font-family:inherit; cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.35), 0 5px 16px rgba(245,197,24,.25);
  transform:translateY(-1px); transition:all .14s;
  position:relative; overflow:hidden; letter-spacing:.3px;
}
.auth-submit::after {
  content:''; position:absolute;
  top:-50%; left:-50%; width:200%; height:200%;
  background:linear-gradient(45deg,transparent,rgba(255,255,255,.15),transparent);
  transform:rotate(45deg);
  animation:goldShimmer 3.5s infinite;
}
.auth-submit:active {
  transform:translateY(1px);
  box-shadow:0 1px 0 rgba(0,0,0,.35), 0 2px 6px rgba(245,197,24,.15);
}

/* ── Footer link ── */
.auth-footer-link { text-align:center; margin-top:3px; }
.auth-footer-link a {
  font-size:11.5px; color:rgba(255,255,255,.55); text-decoration:none;
}
.auth-footer-link a:hover { color:var(--auth-gold); }

@keyframes slideUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}