/* ══════════════════════════════════════════════════════════
   VIP PAGE — extends sports-page.css with vp-* additions
   ══════════════════════════════════════════════════════════ */

/* Hero leans gold */
.vp-hero .sp-hero__glow--gold   { opacity: 0.6; width: 560px; height: 560px; }
.vp-hero .sp-hero__glow--violet { opacity: 0.35; }
.vp-hero .sp-hero__glow--teal   { opacity: 0.18; }

/* ══════════════════════════════════════════════════════════
   TIER LADDER CARDS
   ══════════════════════════════════════════════════════════ */
.vp-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1000px) { .vp-tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .vp-tier-grid { grid-template-columns: 1fr; } }

.vp-tier {
  --vp-grad: linear-gradient(135deg,#2a1a5e 0%,#6c63ff 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px 24px;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .3s ease;
}
.vp-tier::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--vp-grad);
  opacity: 0.1;
  z-index: -2;
  pointer-events: none;
}
.vp-tier::after {
  content: '';
  position: absolute;
  top: -40%; right: -30%;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: var(--vp-grad);
  opacity: 0.18;
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  transition: opacity .4s ease;
}
.vp-tier:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 24px 50px rgba(0,0,0,0.5);
}
.vp-tier:hover::after { opacity: 0.35; }

.vp-tier__ribbon {
  position: absolute;
  top: 16px; right: 16px;
  padding: 3px 10px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  font-family: var(--font-display, sans-serif);
  font-size: 0.62rem;
  font-weight: 900;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vp-tier__icon {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 4px;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4));
}

.vp-tier__name {
  font-family: var(--font-display, sans-serif);
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  margin: 0;
  letter-spacing: -0.02em;
}
.vp-tier__sub { font-size: 0.82rem; color: var(--sp-muted); margin: 0 0 10px; line-height: 1.5; }

.vp-tier__points {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  margin-bottom: 14px;
}
.vp-tier__points-label { font-size: 0.66rem; color: var(--sp-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.vp-tier__points-val  { font-family: var(--font-display, sans-serif); font-size: 0.92rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }

.vp-tier__bonus { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.vp-tier__bonus-val {
  font-family: var(--font-display, sans-serif);
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #fff 0%, var(--sp-gold) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.vp-tier__bonus-label { font-size: 0.72rem; color: var(--sp-muted); font-weight: 600; letter-spacing: 0.04em; }

.vp-tier__hero {
  padding: 12px 14px;
  background: rgba(245,197,24,0.06);
  border: 1px solid rgba(245,197,24,0.2);
  border-radius: 12px;
  font-size: 0.84rem;
  color: #F5E9A8;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 16px;
}

.vp-tier__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  color: var(--sp-gold);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: gap .2s ease, color .2s ease;
}
.vp-tier__cta:hover { gap: 8px; color: #FFE082; }
.vp-tier__cta--locked { color: var(--sp-muted); }
.vp-tier__cta--locked:hover { gap: 4px; color: var(--sp-muted); }

/* Tier-specific accent touches */
.vp-tier--gold .vp-tier__bonus-val,
.vp-tier--platinum .vp-tier__bonus-val,
.vp-tier--diamond .vp-tier__bonus-val,
.vp-tier--black .vp-tier__bonus-val {
  background: linear-gradient(180deg, #fff 0%, #FFD24A 95%);
  -webkit-background-clip: text; background-clip: text;
}
.vp-tier--black {
  background: linear-gradient(135deg, #0E1116 0%, #1a1d28 100%);
  border-color: rgba(255,255,255,0.15);
}
.vp-tier--black .vp-tier__hero { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: #fff; }
.vp-tier--invite { position: relative; }
.vp-tier--invite::before { opacity: 0.2; }

/* ══════════════════════════════════════════════════════════
   EARN POINTS GRID
   ══════════════════════════════════════════════════════════ */
.vp-earn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 900px) { .vp-earn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .vp-earn-grid { grid-template-columns: 1fr; } }

.vp-earn-card {
  position: relative;
  padding: 22px 22px 20px;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 16px;
  transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease;
  overflow: hidden;
}
.vp-earn-card::before {
  content: '';
  position: absolute;
  top: -40%; right: -30%;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,197,24,0.14), transparent 65%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.vp-earn-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245,197,24,0.3);
  box-shadow: 0 16px 36px rgba(0,0,0,0.4);
}
.vp-earn-card:hover::before { opacity: 1; }

.vp-earn-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(245,197,24,0.2), rgba(245,197,24,0.05));
  border: 1px solid rgba(245,197,24,0.3);
  font-size: 1.3rem;
  margin-bottom: 14px;
}
.vp-earn-card h3 {
  font-family: var(--font-display, sans-serif);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.vp-earn-card__rate {
  font-family: var(--font-display, sans-serif);
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--sp-gold);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.vp-earn-card p { font-size: 0.82rem; color: var(--sp-muted); line-height: 1.55; margin: 0; }

/* Perks grid — allow 5 columns on wide screens */
.vp-perks__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .vp-perks__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .vp-perks__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .vp-perks__grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   COMPARISON TABLE
   ══════════════════════════════════════════════════════════ */
.vp-compare__wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 18px;
  padding: 4px;
  /* iOS Safari bleeds; isolate */
  transform: translateZ(0);
}
/* Hide scrollbar (still scrollable via drag/swipe) */
.vp-compare__wrap::-webkit-scrollbar { height: 6px; }
.vp-compare__wrap::-webkit-scrollbar-track { background: transparent; }
.vp-compare__wrap::-webkit-scrollbar-thumb { background: rgba(245,197,24,0.35); border-radius: 3px; }

.vp-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display, sans-serif);
  min-width: 760px;
  table-layout: auto;
}

/* Mobile: full-bleed the wrap so users see more columns before scrolling */
@media (max-width: 700px) {
  .vp-compare__wrap {
    margin-left: -16px;
    margin-right: -16px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 16px;
    padding-right: 16px;
  }
  .vp-compare__table { min-width: 680px; }
  .vp-compare__table thead th { padding: 14px 10px 12px; font-size: 0.7rem; }
  .vp-compare__table thead th:first-child { font-size: 0.6rem; }
  .vp-compare__th-icon { font-size: 1.2rem; }
  .vp-compare__th-name { font-size: 0.68rem; }
  .vp-compare__table tbody th {
    padding: 11px 10px;
    font-size: 0.76rem;
    position: sticky;
    left: 0;
    background: linear-gradient(90deg, rgba(18,22,35,1) 85%, rgba(18,22,35,0) 100%);
    z-index: 1;
  }
  .vp-compare__table tbody td { padding: 11px 8px; font-size: 0.74rem; }
}
.vp-compare__table thead th {
  padding: 20px 16px 16px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fff;
  border-bottom: 1px solid var(--sp-border);
  background: rgba(255,255,255,0.02);
}
.vp-compare__table thead th:first-child {
  text-align: left;
  color: var(--sp-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.vp-compare__th {
  display: table-cell;
}
.vp-compare__th-icon { display: block; font-size: 1.5rem; margin-bottom: 4px; }
.vp-compare__th-name { display: block; font-size: 0.78rem; }

.vp-compare__table tbody th {
  padding: 14px 16px;
  text-align: left;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--sp-text);
  border-bottom: 1px dashed var(--sp-border);
  background: rgba(0,0,0,0.12);
  white-space: nowrap;
}
.vp-compare__table tbody td {
  padding: 14px 10px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  border-bottom: 1px dashed var(--sp-border);
  color: #fff;
  white-space: nowrap;
}
.vp-compare__table tbody tr:hover td,
.vp-compare__table tbody tr:hover th { background: rgba(245,197,24,0.04); }
.vp-compare__table tbody tr:last-child td,
.vp-compare__table tbody tr:last-child th { border-bottom: none; }

.vp-compare__cell--none { color: rgba(255,255,255,0.2); font-weight: 400; }
.vp-compare__cell--yes  { color: var(--sp-teal); }
.vp-compare__cell--val  { color: #fff; }

/* Highlight premium columns subtly */
.vp-compare__th--platinum,
.vp-compare__cell--platinum { background: rgba(110,231,255,0.04); }
.vp-compare__th--diamond,
.vp-compare__cell--diamond  { background: rgba(183,148,255,0.05); }
.vp-compare__th--black,
.vp-compare__cell--black    { background: rgba(255,255,255,0.03); position: relative; }
.vp-compare__th--black { color: #FFD24A !important; }

/* Responsive: allow table to scroll horizontally; show a subtle hint */
@media (max-width: 900px) {
  .vp-compare__wrap { position: relative; }
  .vp-compare__wrap::after {
    content: '← scroll →';
    position: absolute;
    bottom: -26px; right: 0;
    font-size: 0.72rem;
    color: var(--sp-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
}