/* ═══════════════════════════════════════════════════════════════════
   Casino Gurus · Bonuses Page (page-bonuses.php)  ·  v1.0
   Scoping: .crb-page
   Depends on: homepage-v2.css (CSS custom properties + shared .hpv2-*
   components: hero, section headers, bonus cards, why-cards, content
   typography, FAQ accordion) and casino-ranking.css (affiliate notice
   bar, disclosure block, rating badge, chip — reused as-is, not
   redeclared here).
   ═══════════════════════════════════════════════════════════════════ */

.crb-page {
  background: var(--cg-bg);
  color: var(--cg-text);
  overflow-x: hidden;
  padding-top: 74px; /* clears the fixed site header */
}
.crb-page, .crb-page *, .crb-page *::before, .crb-page *::after { box-sizing: border-box; }
.crb-page img { max-width: 100%; display: block; }
.crb-page a { color: var(--cg-gold); text-decoration: none; transition: color var(--cg-trans); }
.crb-page a:hover { color: var(--cg-gold-light); }

/* ── 1. Hero (same treatment as the ranking/reviews page heroes) ────── */
.crb-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 62px 24px 36px;
  background:
    radial-gradient(ellipse at 18% 30%, rgba(30,6,60,.92) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 75%, rgba(5,20,60,.82) 0%, transparent 50%),
    linear-gradient(160deg, #0f0820 0%, #0a1520 55%, #0f0820 100%);
}
.crb-hero__pattern { position: absolute; inset: 0; opacity: .85; pointer-events: none; z-index: 0; }
.crb-hero__pattern svg { width: 100%; height: 100%; }

/* ── 2. "Type Of Bonuses" cards — bullet list inside .hpv2-why-card__text.
   The shared card only styles a single paragraph by default; these
   rules extend it (not replace it) for the intro-sentence + list
   pattern this page's existing copy uses. */
.hpv2-why-card__text ul { margin: 10px 0 0; padding-left: 20px; }
.hpv2-why-card__text li { margin-bottom: 8px; line-height: 1.6; }
.hpv2-why-card__text li:last-child { margin-bottom: 0; }

/* This page's "Type Of Bonuses" icons are FontAwesome <i> glyphs (same
   ones already used before the redesign), not the inline SVGs the
   homepage's why-cards use — size them for the icon slot. */
.hpv2-why-card__icon i { font-size: 1.4rem; }

/* ── 3. Bonus card "claimed today" pill — same gold-pill recipe as
   .crk-chip (casino-ranking.css), just with a flame icon instead of a
   leading glyph. Not on the homepage's bonus-card variant, so it lives
   here rather than in the shared component. */
.hpv2-bonus-card__claims {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 50px; margin-bottom: 14px;
  border: 1px solid rgba(212,175,55,.3); background: rgba(212,175,55,.08);
  color: var(--cg-gold-light); font-size: .72rem; font-weight: 600;
}
.hpv2-bonus-card__claims i { color: var(--cg-gold); font-size: .72rem; }

/* ── 4. Responsive ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .crb-hero { padding: 46px 20px 26px; }
}