/* ============================================================
   NEONBET · VIP Club panel — neon loyalty tiers (Spark → Singularity)
   (frontend-redesign-v2 · designer look)
   ------------------------------------------------------------
   SCOPED reskin of the VIP content panel. Ported from the approved
   reference (css/pages/vip.css) and scoped under #content-panel
   .vip-page so nothing leaks into the rest of the app. Each tier
   card sets its own accent through the inline --tier custom property.

   Token-collision notes (legacy style.css :root loads after
   css/tokens.css and wins 7 names — same workaround as nav/home/panels):
   · --font-body / --font-mono → var(--font-sans)  (reference = Archivo)
   · --font-display            → local --vip-display (Archivo Black,
     already loaded by the css/tokens.css @import — no new fonts)
   · --radius-lg 14px / --radius-xl 20px → literals (legacy = 22/32px)
   ============================================================ */

#content-panel .vip-page {
  --vip-display: "Archivo Black", "Anton", "Bebas Neue", Impact, "Arial Black", Helvetica, sans-serif;
  font-family: var(--font-sans);
}

/* Reference heading treatment (base.css) — scoped to the VIP panel so
   it overrides the generic .cp-body heading rules from panels.css. */
#content-panel .vip-page h1,
#content-panel .vip-page h2,
#content-panel .vip-page h3,
#content-panel .vip-page h4 {
  font-family: var(--vip-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
}

/* Reference .section / .section-head, renamed .vip-section* so the
   legacy style.css + home.css .section-head rules can't interfere. */
#content-panel .vip-section { padding: var(--space-4) 0; }
@media (min-width: 768px)  { #content-panel .vip-section { padding: var(--space-5) 0; } }
@media (min-width: 1280px) { #content-panel .vip-section { padding: var(--space-6) 0; } }

#content-panel .vip-section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-4);
}
#content-panel .vip-section-head h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem);
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}

/* ---- Hero ---- */
#content-panel .vip-hero {
  text-align: center;
  padding: var(--space-12) 0 var(--space-8);
}
#content-panel .vip-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 229, 255, 0.4);
  background: rgba(0, 229, 255, 0.08);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  margin-bottom: var(--space-5);
}
#content-panel .vip-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan);
}
/* Hero heading demoted h1→h2 (the panel's h1 is the shared #cp-title);
   same designed look. */
#content-panel .vip-hero h2 { font-size: var(--text-5xl); line-height: 1.02; margin: 0 0 var(--space-4); }
#content-panel .vip-grad {
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#content-panel .vip-hero p {
  max-width: 620px; margin: 0 auto var(--space-6);
  color: var(--text-secondary); font-size: var(--text-lg);
}
#content-panel .vip-hero-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* Mini tier ladder under the hero */
#content-panel .vip-ladder {
  display: flex; justify-content: center; align-items: flex-start;
  gap: var(--space-4); margin-top: var(--space-10); flex-wrap: wrap;
}
#content-panel .vip-ladder-pip {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted);
}
#content-panel .vip-ladder-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--tier, var(--neon-cyan));
  box-shadow: 0 0 14px var(--tier, var(--neon-cyan));
}

/* ---- Progress widget ---- */
#content-panel .vip-progress {
  background: var(--grad-surface);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
#content-panel .vip-progress-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
#content-panel .vip-progress-tier { display: flex; align-items: center; gap: var(--space-3); }
#content-panel .vip-progress-badge {
  width: 50px; height: 50px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: rgba(0, 229, 255, 0.10);
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: var(--neon-cyan);
}
#content-panel .vip-progress-badge svg { width: 26px; height: 26px; }
#content-panel .vip-progress-tier .name { font-family: var(--vip-display); font-size: var(--text-xl); line-height: 1; }
#content-panel .vip-progress-tier .sub { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
#content-panel .vip-progress-points { text-align: right; }
#content-panel .vip-progress-points .big { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); color: var(--text-primary); }
#content-panel .vip-progress-points .lbl { font-size: var(--text-xs); color: var(--text-muted); }
#content-panel .vip-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
#content-panel .vip-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--grad-cyan); width: 0; transition: width 1.1s var(--ease-out); }
#content-panel .vip-progress-foot { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); flex-wrap: wrap; }
#content-panel .vip-progress-foot strong { color: var(--text-primary); }
#content-panel .vip-progress-guest { align-items: center; text-align: center; }
#content-panel .vip-progress-guest p { margin: 0; color: var(--text-secondary); }

/* ---- How it works ---- */
#content-panel .vip-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
#content-panel .vip-step {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 14px; padding: var(--space-6);
}
#content-panel .vip-step .vip-step-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: var(--space-4);
  background: rgba(0, 229, 255, 0.10); color: var(--neon-cyan);
}
#content-panel .vip-step .vip-step-icon svg { width: 24px; height: 24px; }
#content-panel .vip-step h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
#content-panel .vip-step p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }

/* ---- Tier cards ---- */
#content-panel .vip-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
#content-panel .vip-tier {
  --tier: var(--neon-cyan);
  position: relative; overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: var(--space-6);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
#content-panel .vip-tier::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--tier); box-shadow: 0 0 18px var(--tier);
}
#content-panel .vip-tier:hover { transform: translateY(-4px); border-color: var(--tier); }
#content-panel .vip-tier.is-invite { border-style: dashed; }
#content-panel .vip-tier-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
#content-panel .vip-tier-badge {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--tier);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--tier);
}
#content-panel .vip-tier-badge svg { width: 24px; height: 24px; }
#content-panel .vip-tier-name { font-family: var(--vip-display); font-size: var(--text-2xl); color: var(--tier); line-height: 1; }
#content-panel .vip-tier-req { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
#content-panel .vip-tier-req strong { color: var(--text-primary); font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
#content-panel .vip-tier-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
#content-panel .vip-tier-perks li { display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.4; }
#content-panel .vip-tier-perks li svg { width: 16px; height: 16px; color: var(--tier); flex: none; margin-top: 2px; }

/* ---- Perks grid ---- */
#content-panel .vip-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
#content-panel .vip-perk { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); }
#content-panel .vip-perk-icon { width: 34px; height: 34px; color: var(--neon-cyan); margin-bottom: var(--space-3); }
#content-panel .vip-perk h4 { margin: 0 0 var(--space-1); font-size: var(--text-base); }
#content-panel .vip-perk p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.45; }

/* ---- FAQ ---- */
#content-panel .vip-faq { max-width: 760px; }
#content-panel .vip-faq details { border-bottom: 1px solid var(--border-subtle); }
#content-panel .vip-faq summary {
  cursor: pointer; padding: var(--space-4) 0; font-weight: 600; color: var(--text-primary);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
}
#content-panel .vip-faq summary::-webkit-details-marker { display: none; }
#content-panel .vip-faq summary::after { content: "+"; color: var(--neon-cyan); font-size: var(--text-xl); line-height: 1; flex: none; }
#content-panel .vip-faq details[open] summary::after { content: "−"; }
#content-panel .vip-faq details > p { margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.55; }

/* ---- Final CTA ---- */
#content-panel .vip-cta {
  text-align: center; background: var(--grad-surface);
  border: 1px solid var(--border-strong); border-radius: 20px;
  padding: var(--space-12) var(--space-6);
}
#content-panel .vip-cta h2 { font-size: var(--text-3xl); margin: 0 0 var(--space-3); }
#content-panel .vip-cta p { color: var(--text-secondary); margin: 0 auto var(--space-6); max-width: 480px; }
#content-panel .vip-cta .vip-hero-actions { margin-top: 0; }

/* small print under the tiers */
#content-panel .vip-fineprint { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin-top: var(--space-5); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  #content-panel .vip-steps { grid-template-columns: repeat(3, 1fr); }
  #content-panel .vip-tiers { grid-template-columns: repeat(2, 1fr); }
  #content-panel .vip-perks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #content-panel .vip-hero { padding: var(--space-8) 0 var(--space-6); }
  #content-panel .vip-steps { grid-template-columns: 1fr; }
  #content-panel .vip-tiers { grid-template-columns: 1fr; }
  #content-panel .vip-perks { grid-template-columns: repeat(2, 1fr); }
  #content-panel .vip-ladder { gap: var(--space-3); }
}