/* ═══════════════════════════════════════════════════════════
   IS7NOW.FUN — Bonuses / How To Play / Refer & Earn shared styles
   ═══════════════════════════════════════════════════════════ */

/* ── Bonus tier / promo cards ── */
.promo-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 640px) { .promo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .promo-grid { grid-template-columns: repeat(3, 1fr); } }
.promo-card { padding: var(--space-8); position: relative; }
.promo-card__ribbon {
  position: absolute; top: 18px; right: -30px; z-index: 3;
  background: var(--grad-plasma); color: #fff;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 36px; transform: rotate(38deg);
  box-shadow: var(--shadow-glow-sm);
}
.promo-card__icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-accent-subtle); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  margin-bottom: var(--space-4);
}
.promo-card__value { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-ivory); line-height: 1; margin-bottom: var(--space-2); }
.promo-card__title { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-2); }
.promo-card__desc { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.7; margin-bottom: var(--space-4); }
.promo-card__link { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }

/* ── VIP tier table ── */
.tier-table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.tier-table { width: 100%; border-collapse: collapse; background: var(--color-surface); min-width: 640px; }
.tier-table th, .tier-table td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); white-space: nowrap; }
.tier-table thead th { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); font-size: var(--text-xs); background: var(--color-surface-2); }
.tier-table td { color: var(--color-text-secondary); }
.tier-table tr:last-child td { border-bottom: none; }
.tier-table td:first-child, .tier-table th:first-child { color: var(--color-ivory); font-weight: 700; font-family: var(--font-ui); }

/* ── Referral code / share box ── */
.refer-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  background: var(--color-surface); border: 1.5px dashed var(--color-border-plasma);
  border-radius: var(--radius-md); padding: var(--space-6);
}
.refer-box__code { font-family: var(--font-mono); font-size: var(--text-xl); color: var(--color-accent); letter-spacing: 0.08em; flex: 1; min-width: 180px; }
.refer-box__hint { width: 100%; font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── Numbered gameplay / referral steps (icon + number combo) ── */
.step-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) { .step-grid { grid-template-columns: repeat(3, 1fr); } }
.step-card { padding: var(--space-8); text-align: center; }
.step-card__num {
  width: 44px; height: 44px; margin: 0 auto var(--space-4);
  border-radius: 50%; background: var(--grad-plasma); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--text-xl);
  box-shadow: var(--shadow-glow-sm);
}
.step-card__title { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-2); }
.step-card__desc { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.7; }

/* ── Category / topic cards (How To Play) ── */
.topic-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 640px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .topic-grid { grid-template-columns: repeat(4, 1fr); } }
.topic-card { padding: var(--space-6); }
.topic-card__icon { font-size: 28px; margin-bottom: var(--space-3); }
.topic-card__title { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: 0.02em; color: var(--color-bg); margin-bottom: var(--space-2); }
.topic-card__desc { color: #3a3a40; font-size: var(--text-sm); line-height: 1.65; }

/* ── Inline stat row (earnings examples, milestones) ── */
.mini-table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.mini-table { width: 100%; border-collapse: collapse; background: var(--color-surface); min-width: 480px; }
.mini-table th, .mini-table td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.mini-table thead th { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); font-size: var(--text-xs); background: var(--color-surface-2); }
.mini-table td { color: var(--color-text-secondary); }
.mini-table tr:last-child td { border-bottom: none; }
.mini-table td:first-child { color: var(--color-ivory); font-weight: 700; }