/* =========================================================
   EaglePay — Luxury Milky Way Theme (Ultra-Futuristic Edition)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
  --gold: #d4af6a;
  --gold-light: #f4e4bc;
  --ink: #eae6f0;
  --ink-dim: #b9b3c9;
  --glass: rgba(20, 16, 35, 0.55);
  --glass-border: rgba(212, 175, 106, 0.28);
  --danger: #ff6b6b;
  --success: #4ade80;
  --radius: 16px;

  /* futuristic accent layer — cyan/violet circuitry over the gold-luxury base */
  --neon-cyan: #5ff2ff;
  --neon-violet: #b98bff;
  --neon-gold: #ffd88a;
  --font-display: 'Orbitron', 'Segoe UI', sans-serif;
  --font-body: 'Rajdhani', 'Segoe UI', Roboto, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink);
}

body {
  background: url('../images/milkyway.jpg') center center / cover fixed no-repeat, #05030c;
  background-blend-mode: normal;
  position: relative;
}

/* dark vignette overlay so text stays readable over the galaxy image */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(5,3,12,0.35) 0%, rgba(5,3,12,0.82) 100%);
  z-index: 0;
  pointer-events: none;
}

/* faint drifting scan-grid, purely decorative, sits above the vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(95,242,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,242,255,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, transparent 70%);
  animation: gridDrift 40s linear infinite;
}
@keyframes gridDrift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 84px 84px, 84px 84px; }
}

.app-shell, .center-shell {
  position: relative;
  z-index: 1;
}

h1, h2, h3, h4, .brand, .btn {
  font-family: var(--font-display);
}

/* ---------- Glass card (holo-edge) ---------- */
.glass-card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 32px;
  isolation: isolate;
  overflow: hidden;
}
/* rotating conic-gradient sliver bleeding through the border, like a
   holographic edge catching light — subtle, not a full neon frame */
.glass-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--holo-angle, 0deg), transparent 0 78%, rgba(95,242,255,0.55) 84%, rgba(185,139,255,0.55) 90%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  animation: holoSpin 7s linear infinite;
  opacity: 0.85;
}
@keyframes holoSpin { to { --holo-angle: 360deg; } }
@property --holo-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.glass-card > * { position: relative; }

/* ---------- Auth (login/signup-style admin-create) center layout ---------- */
.center-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-box { width: 100%; max-width: 420px; text-align: center; }
.brand {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: linear-gradient(100deg, var(--gold) 10%, var(--neon-cyan) 45%, var(--gold-light) 60%, var(--neon-violet) 85%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 14px rgba(212,175,106,0.35));
  animation: brandShimmer 6s ease-in-out infinite;
}
@keyframes brandShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.brand-sub { color: var(--ink-dim); font-size: 13px; margin-bottom: 28px; letter-spacing: .3px; }

/* ---------- Form elements ---------- */
label { display: block; text-align: left; font-size: 13px; color: var(--ink-dim); margin: 14px 0 6px; letter-spacing: .3px; text-transform: uppercase; font-weight: 600; }
input[type=text], input[type=password], input[type=email], input[type=number], select, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(95,242,255,0.12); }

.btn {
  display: inline-block;
  width: 100%;
  margin-top: 22px;
  padding: 13px 18px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #241a05;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.btn::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
}
.btn:hover::after { left: 130%; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 26px rgba(212,175,106,0.4), 0 0 18px rgba(95,242,255,0.25); }
.btn.secondary { background: rgba(255,255,255,0.08); color: var(--ink); border: 1px solid var(--glass-border); }
.btn.secondary:hover { box-shadow: 0 0 16px rgba(95,242,255,0.3); border-color: var(--neon-cyan); }
.btn.danger { background: linear-gradient(135deg,#ff8b8b,#e04b4b); color: #2a0505; }
.btn.small { width: auto; padding: 8px 14px; font-size: 11.5px; margin-top: 0; }
.btn.ghost-neon {
  background: rgba(95,242,255,0.08);
  color: var(--neon-cyan);
  border: 1px solid rgba(95,242,255,0.45);
  box-shadow: 0 0 14px rgba(95,242,255,0.15);
}
.btn.ghost-neon:hover { box-shadow: 0 0 22px rgba(95,242,255,0.4); }

.alert { padding: 12px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; text-align: left; }
.alert.error   { background: rgba(255,107,107,0.15); border: 1px solid rgba(255,107,107,0.4); color: #ffb3b3; }
.alert.success { background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.4); color: #b7f5cd; }

/* ---------- Dashboard shell ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 28px;
  background: rgba(10,7,20,0.65);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  position: relative; z-index: 50;
}
.topbar .brand { margin: 0; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .user-chip {
  font-size: 13px; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw;
}

/* IMPORTANT: no position/z-index on .layout. It used to have
   `position:relative; z-index:1`, which created its own stacking context.
   That trapped the mobile drawer (.sidebar, z-index 9999) *inside* that
   context — so its z-index only ever competed against .content, never
   against #sidebarBackdrop (z-index 9998) which sits outside .layout.
   Net effect: the backdrop always painted on top of the drawer on mobile,
   silently swallowing every tap on the menu links (tapping a link just hit
   the backdrop's "close menu" handler instead). Keeping .layout unpositioned
   lets .sidebar and #sidebarBackdrop compare directly in the same stacking
   context, so the higher z-index (drawer) correctly wins. Do not re-add
   position/z-index here without moving #sidebarBackdrop inside .layout too. */
.layout { display: flex; min-height: calc(100vh - 62px); }
.sidebar {
  width: 220px; flex-shrink: 0;
  background: rgba(10,7,20,0.55);
  border-right: 1px solid var(--glass-border);
  padding: 20px 0;
}
.sidebar a {
  display: block; padding: 12px 24px; color: var(--ink-dim);
  text-decoration: none; font-size: 14px; border-left: 3px solid transparent;
}
.sidebar a:hover, .sidebar a.active {
  color: var(--gold-light); background: rgba(212,175,106,0.08); border-left-color: var(--gold);
}
.content { flex: 1; padding: 28px; min-width: 0; }

.grid { display: grid; gap: 18px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.stat-card { padding: 20px; }
.stat-card .label { font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .6px; }
.stat-card .value { font-size: 26px; font-weight: 700; color: var(--gold-light); margin-top: 6px; }

.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--glass-border); }
th { color: var(--gold-light); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .8px; white-space: nowrap; border-bottom: 1px solid rgba(95,242,255,0.35); }
tr:hover td { background: rgba(95,242,255,0.035); }

.badge { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge.success { background: rgba(74,222,128,0.15); color: var(--success); box-shadow: 0 0 8px rgba(74,222,128,0.25); }
.badge.pending { background: rgba(212,175,106,0.15); color: var(--gold-light); }
.badge.failed  { background: rgba(255,107,107,0.15); color: var(--danger); }

/* =========================================================
   Modal (payment-link popup + account-details popup)
   ========================================================= */
.modal-overlay {
  position: fixed; inset: 0; z-index: 20000;
  background: rgba(5,3,12,0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; transition: opacity .18s ease;
}
.modal-overlay.open { display: flex; opacity: 1; }
.modal-box {
  position: relative;
  width: 100%; max-width: 460px;
  background: linear-gradient(180deg, rgba(22,17,38,0.92), rgba(13,10,24,0.96));
  border: 1px solid rgba(95,242,255,0.3);
  border-radius: 18px;
  padding: 28px 26px 24px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.65), 0 0 40px rgba(95,242,255,0.08), inset 0 1px 0 rgba(255,255,255,0.05);
  transform: translateY(14px) scale(.97); transition: transform .2s ease;
  max-height: 88vh; overflow-y: auto;
}
.modal-overlay.open .modal-box { transform: translateY(0) scale(1); }
.modal-box h3 {
  margin: 0 0 4px; color: var(--gold-light); font-size: 18px; letter-spacing: .5px;
  display: flex; align-items: center; gap: 8px;
}
.modal-close {
  position: absolute; top: 14px; right: 16px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border);
  color: var(--ink-dim); width: 30px; height: 30px; border-radius: 8px;
  cursor: pointer; font-size: 15px; line-height: 1;
}
.modal-close:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.modal-sub { color: var(--ink-dim); font-size: 12.5px; margin: 0 0 18px; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn { margin-top: 0; }
.modal-link-box {
  font-family: 'Courier New', monospace; font-size: 13px; word-break: break-all;
  background: rgba(0,0,0,0.35); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: 12px 14px; color: var(--neon-cyan);
}
.copy-flash { color: var(--success); font-size: 12px; margin-left: 8px; display: none; }
.copy-flash.show { display: inline; }

/* ---------- Account-details card (gateway-panel style) ---------- */
.acct-card { border: 1px solid rgba(212,175,106,0.4); }
.acct-card-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 13.5px; letter-spacing: 1px;
  color: var(--gold-light); text-transform: uppercase;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px dashed rgba(212,175,106,0.35);
}
.acct-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13.5px;
}
.acct-row:last-child { border-bottom: none; }
.acct-row .k { color: var(--ink-dim); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.acct-row .v { font-family: 'Courier New', monospace; color: var(--ink); word-break: break-all; text-align: right; flex: 1; margin: 0 10px; }
.acct-foot {
  text-align: center; font-size: 11.5px; letter-spacing: .5px; color: var(--ink-dim);
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(212,175,106,0.35);
  text-transform: uppercase;
}

/* ---------- Mobile menu toggle (hidden on desktop) ---------- */
.menu-toggle {
  display: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--glass-border);
  color: var(--gold-light);
  width: 44px; height: 44px;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  position: relative;
  z-index: 10000;
  touch-action: manipulation;
}

/* =========================================================
   RESPONSIVE — tablets and phones
   ========================================================= */
@media (max-width: 900px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .glass-card { padding: 22px; }
}

@media (max-width: 900px) {
  .topbar { padding: 12px 16px; }
  .topbar .brand { font-size: 16px; }
  .content { padding: 18px; }

  .menu-toggle { display: block; }

  /* sidebar becomes a slide-in drawer on tablets + phones */
  .sidebar {
    display: block;
    position: fixed;
    top: 62px; left: 0; bottom: 0;
    width: 260px;
    max-width: 80vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 9999;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: 8px;
    touch-action: manipulation;
    pointer-events: auto;
    /* was rgba(10,7,20,0.55) — same as the desktop inline sidebar, which is
       fine on desktop (there's no page content directly behind it) but on
       a mobile drawer it let the dashboard content underneath show through
       and overlap the menu text. Solid + blurred so the drawer is fully
       opaque while open. */
    background: rgb(9, 7, 18);
    background: linear-gradient(180deg, rgba(15,11,28,0.98), rgba(9,7,18,0.98));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .sidebar.open { transform: translateX(0); box-shadow: 10px 0 40px rgba(0,0,0,0.5); }
  .sidebar a {
    padding: 14px 24px; font-size: 15px;
    position: relative; z-index: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(212,175,106,0.35);
    pointer-events: auto;
  }

  .sidebar-backdrop {
    display: none;
    position: fixed; top: 62px; left: 0; right: 0; bottom: 0; z-index: 9998;
    background: rgba(0,0,0,0.55);
  }
  .sidebar-backdrop.open { display: block; }

  /* Belt-and-braces: while the drawer is open, make everything behind it
     completely un-clickable (not just visually covered). If any other
     floating element, widget, or overlay on the page ever ends up between
     the drawer and its backdrop in stacking order, this still guarantees
     taps can only reach the drawer's own links while it's open. */
  body.menu-open .content,
  body.menu-open .topbar .user-chip {
    pointer-events: none;
  }

  .layout { display: block; }
  .content { width: 100%; }

  /* Fixed backgrounds are jank-prone / inconsistently supported on mobile
     browsers (notably iOS Safari) — scroll normally there instead. */
  body { background-attachment: scroll; }

  /* Belt-and-braces: the support bubble is position:fixed at the root level
     (outside .app-shell), so on very narrow phones its bottom-right corner
     can sit over the bottom of the drawer. Hide it while the drawer is open. */
  body.menu-open .tg-support-btn { display: none; }
}

@media (min-width: 901px) {
  .sidebar-backdrop { display: none !important; }
}

@media (max-width: 640px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .glass-card { padding: 18px; border-radius: 12px; }
  .content { padding: 16px; }

  /* forms/grids that used a fixed side column stack full width */
  .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  input[type=text], input[type=password], input[type=email], input[type=number], select, textarea, .btn {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }

  .stat-card .value { font-size: 21px; }

  .tg-support-btn { bottom: 16px; right: 16px; width: 50px; height: 50px; font-size: 22px; }

  .auth-box { max-width: 100%; }
  .qr-box img { width: 160px; height: 160px; }
}

/* ---------- Telegram support floating button ---------- */
.tg-support-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 50;
  background: linear-gradient(135deg,#34a8e0,#1c7fc4);
  color: #fff; text-decoration: none;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  box-shadow: 0 6px 22px rgba(28,127,196,0.5);
  transition: transform .15s;
}
.tg-support-btn:hover { transform: scale(1.08); }

.qr-box { background: #fff; padding: 14px; border-radius: 12px; display: inline-block; margin: 16px 0; }
.mono { font-family: 'Courier New', monospace; letter-spacing: 1px; }

/* ---------- API documentation page ---------- */
.docs-shell { max-width: 980px; margin: 0 auto; padding: 32px 20px 80px; }
.docs-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.docs-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.docs-nav a {
  font-size: 12.5px; padding: 7px 13px; border-radius: 20px; text-decoration: none;
  color: var(--ink-dim); background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
}
.docs-nav a:hover { color: var(--gold-light); border-color: var(--gold); }
.endpoint { margin-bottom: 34px; scroll-margin-top: 20px; }
.endpoint h3 { color: var(--gold-light); margin-bottom: 6px; }
.method-badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .5px;
  padding: 3px 10px; border-radius: 6px; margin-right: 8px; vertical-align: middle;
}
.method-badge.post { background: rgba(74,222,128,0.18); color: var(--success); }
.method-badge.get  { background: rgba(96,165,250,0.18); color: #93c5fd; }
pre.code-block {
  background: rgba(5,3,12,0.75); border: 1px solid var(--glass-border); border-radius: 12px;
  padding: 16px 18px; overflow-x: auto; font-size: 12.5px; line-height: 1.6;
  font-family: 'Courier New', monospace; color: #d7f0d0;
}
pre.code-block .k { color: #93c5fd; }
.params-table th, .params-table td { font-size: 12.5px; }
.download-row { display: flex; gap: 10px; flex-wrap: wrap; }
.download-row .btn { width: auto; }