/* ==========================================================================
   /bonuses-promotions/ (page 370) — wp-content/mu-plugins/w9-bonuses.php
   --------------------------------------------------------------------------
   Self-contained page, same visual grammar as the rest of the site's current
   dark-hero pass (blog-dark-premium.css, search-results.css): the shared
   #17150F->#0E0C09 / gold #F9E900 hero identity, light cream body, and dark
   repeating cards on the light section (same contrast rule documented in
   blog-dark-premium.css). Built on its own `w9-bns-*` classes rather than
   reusing `.s5-prose`/`.s5-card`/etc. directly — those require an ancestor
   `.s5` wrapper class that only exists on actual Elementor-authored pages;
   this page is a plain WP page rendered through a `the_content` filter (same
   architecture as the blog article / search results page), so it gets its
   own small self-contained stylesheet instead. All colour/shadow/radius
   values reuse the same --s5-* custom properties (defined globally in
   w9-site5.php) as everywhere else, so it still reads as the same design
   system. Scoped to `body.page-id-370` throughout.
   ========================================================================== */

body.page-id-370 .site-main,
body.page-id-370 .page-content{ max-width:none !important; padding:0 !important; margin:0 !important; }

/* ---- hero ---- */
body.page-id-370 .w9-bns-hero{
  position:relative; overflow:hidden;
  padding:clamp(64px,9vh,100px) 24px clamp(36px,4vh,48px);
  background:
    radial-gradient(820px 400px at 70% 0%, rgba(249,233,0,.18), transparent 64%),
    linear-gradient(160deg, #17150F 0%, #0E0C09 100%);
  text-align:center;
}
body.page-id-370 .w9-bns-hero-in{ position:relative; z-index:2; max-width:820px; margin:0 auto; }
body.page-id-370 .w9-bns-chip{
  display:inline-flex; padding:6px 14px; border-radius:999px; background:rgba(249,233,0,.16);
  font-family:var(--s5-en); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#F9E900;
  margin:0 0 14px;
}
body.page-id-370 .w9-bns-title{
  font-family:var(--s5-en); font-size:clamp(28px,4vw,46px); font-weight:700; line-height:1.16;
  letter-spacing:-.02em; color:#FFFFFF !important; margin:0;
}
body.page-id-370 .w9-bns-lead{
  font-family:var(--s5-bn); font-size:16px; line-height:1.8; color:rgba(255,255,255,.76);
  max-width:640px; margin:14px auto 0;
}

/* ---- jump-to table of contents ---- */
body.page-id-370 .w9-bns-toc{
  list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
body.page-id-370 .w9-bns-toc a{
  display:flex; align-items:center; gap:10px; padding:13px 16px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); border-radius:999px; text-decoration:none;
  font-family:var(--s5-bn); font-size:13.5px; font-weight:600; color:rgba(255,255,255,.85);
  transition:background .3s ease, border-color .3s ease;
}
body.page-id-370 .w9-bns-toc a:hover{ background:rgba(249,233,0,.14); border-color:rgba(249,233,0,.35); color:#F9E900; }
body.page-id-370 .w9-bns-toc i{ color:#F9E900; font-size:12px; }
@media(max-width:900px){ body.page-id-370 .w9-bns-toc{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ body.page-id-370 .w9-bns-toc{ grid-template-columns:1fr; } }

/* ---- section shell ---- */
body.page-id-370 .w9-bns-sec{ max-width:1100px; margin:0 auto; padding:56px 24px 0; scroll-margin-top:100px; }
body.page-id-370 .w9-bns-eyebrow{
  display:inline-block; padding:6px 14px; border-radius:999px; background:rgba(255,199,44,.18);
  font-family:var(--s5-en); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--s5-gold-3);
  margin:0 0 12px;
}
body.page-id-370 .w9-bns-h2{
  font-family:var(--s5-en); font-size:clamp(22px,2.8vw,32px); font-weight:700; color:var(--s5-ink);
  letter-spacing:-.02em; margin:0 0 10px;
}
body.page-id-370 .w9-bns-sec > p{
  font-family:var(--s5-bn); font-size:15.5px; line-height:1.85; color:var(--s5-mid); max-width:74ch; margin:0 0 8px;
}

/* ---- icon-card grid (welcome bonus types) ---- */
body.page-id-370 .w9-bns-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px; }
body.page-id-370 .w9-bns-card{
  background:#FFFFFF; border-radius:26px; padding:26px 24px; box-shadow:var(--s5-shadow);
  transition:transform .35s ease, box-shadow .35s ease;
}
body.page-id-370 .w9-bns-card:hover{ transform:translateY(-4px); box-shadow:0 20px 46px rgba(200,134,11,.20); }
body.page-id-370 .w9-bns-card i{
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:16px;
  background:var(--s5-grad); color:#1C1500; font-size:18px; box-shadow:var(--s5-glow); margin-bottom:14px;
}
body.page-id-370 .w9-bns-card b{
  display:block; font-family:var(--s5-en); font-size:22px; font-weight:800; color:var(--s5-gold-3); margin-bottom:6px;
}
body.page-id-370 .w9-bns-card h3{ font-family:var(--s5-en); font-size:16.5px; font-weight:600; color:var(--s5-ink); margin:0 0 6px; }
body.page-id-370 .w9-bns-card p{ font-family:var(--s5-bn); font-size:14px; line-height:1.75; color:var(--s5-mid); margin:0; }
@media(max-width:900px){ body.page-id-370 .w9-bns-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ body.page-id-370 .w9-bns-grid{ grid-template-columns:1fr; } }

/* ---- tiered list (deposit bonus by deposit count) ---- */
body.page-id-370 .w9-bns-tiers{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:26px 0 0; padding:0; }
body.page-id-370 .w9-bns-tiers li{ background:#FFFFFF; border-radius:24px; padding:22px 20px; box-shadow:var(--s5-shadow); }
body.page-id-370 .w9-bns-tier-n{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px;
  background:var(--s5-grad); color:#1C1500; font-family:var(--s5-en); font-weight:700; font-size:15px; margin-bottom:12px;
  box-shadow:var(--s5-glow);
}
body.page-id-370 .w9-bns-tiers h3{ font-family:var(--s5-en); font-size:16px; font-weight:600; color:var(--s5-ink); margin:0 0 6px; }
body.page-id-370 .w9-bns-tiers p{ font-family:var(--s5-bn); font-size:13.5px; color:var(--s5-mid); margin:0; line-height:1.7; }
@media(max-width:900px){ body.page-id-370 .w9-bns-tiers{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ body.page-id-370 .w9-bns-tiers{ grid-template-columns:1fr; } }

/* ---- stat grid (cashback) ---- */
body.page-id-370 .w9-bns-stats{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0 0; padding:0; }
body.page-id-370 .w9-bns-stats li{ padding:26px 20px; text-align:center; background:#FFFFFF; border-radius:26px; box-shadow:var(--s5-shadow); }
body.page-id-370 .w9-bns-stat-n{
  display:block; font-family:var(--s5-en); font-size:clamp(26px,3.2vw,38px); font-weight:700; line-height:1;
  background:var(--s5-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
body.page-id-370 .w9-bns-stat-l{ display:block; margin-top:10px; font-family:var(--s5-bn); font-size:13.5px; color:var(--s5-mid); }
@media(max-width:767px){ body.page-id-370 .w9-bns-stats{ grid-template-columns:1fr; } }

/* ---- checklist (referral / terms) ---- */
body.page-id-370 .w9-bns-card--wide{ background:#FFFFFF; border-radius:26px; padding:28px 26px; box-shadow:var(--s5-shadow); margin-top:26px; }
body.page-id-370 .w9-bns-checks{ list-style:none; margin:0; padding:0; }
body.page-id-370 .w9-bns-checks li{ position:relative; padding:8px 0 8px 26px; font-family:var(--s5-bn); font-size:15px; line-height:1.75; color:var(--s5-mid); }
body.page-id-370 .w9-bns-checks li i{ position:absolute; left:0; top:12px; color:var(--s5-gold); font-size:11px; }
body.page-id-370 .w9-bns-checks li b{ color:var(--s5-ink); font-weight:600; }

/* ---- steps (how to claim) ---- */
body.page-id-370 .w9-bns-steps{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:26px 0 0; padding:0; }
body.page-id-370 .w9-bns-steps li{ padding:24px 20px; background:#FFFFFF; border-radius:26px; box-shadow:var(--s5-shadow); }
body.page-id-370 .w9-bns-step-n{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:999px;
  background:var(--s5-grad); color:#1C1500; font-family:var(--s5-en); font-weight:700; font-size:15px; margin-bottom:12px;
  box-shadow:var(--s5-glow);
}
body.page-id-370 .w9-bns-steps h3{ font-family:var(--s5-en); font-size:15.5px; font-weight:600; color:var(--s5-ink); margin:0 0 6px; }
body.page-id-370 .w9-bns-steps p{ font-family:var(--s5-bn); font-size:13.5px; color:var(--s5-mid); margin:0; line-height:1.7; }
@media(max-width:900px){ body.page-id-370 .w9-bns-steps{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ body.page-id-370 .w9-bns-steps{ grid-template-columns:1fr; } }

/* ---- responsible-gaming note ---- */
body.page-id-370 .w9-bns-note{
  margin-top:26px; padding:20px 22px; border-radius:22px; background:rgba(255,199,44,.16);
  display:flex; gap:14px; align-items:flex-start;
}
body.page-id-370 .w9-bns-note i{ color:var(--s5-gold-3); font-size:18px; margin-top:2px; }
body.page-id-370 .w9-bns-note p{ margin:0; font-family:var(--s5-bn); font-size:14px; line-height:1.75; color:var(--s5-mid); }
body.page-id-370 .w9-bns-note b{ color:var(--s5-ink); }

/* ---- FAQ (native <details>/<summary>, no Elementor JS involved) ---- */
body.page-id-370 .w9-bns-faq{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }
body.page-id-370 .w9-bns-faq details{
  background:#FFFFFF; border-radius:22px; box-shadow:var(--s5-shadow); overflow:hidden; padding:0 22px;
}
body.page-id-370 .w9-bns-faq summary{
  list-style:none; cursor:pointer; padding:18px 0; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--s5-bn); font-size:16px; font-weight:600; color:var(--s5-ink);
}
body.page-id-370 .w9-bns-faq summary::-webkit-details-marker{ display:none; }
body.page-id-370 .w9-bns-faq summary .w9-bns-faq-ic{
  flex:none; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:999px;
  background:rgba(255,199,44,.20); color:var(--s5-gold-3); font-size:12px; transition:transform .3s ease;
}
body.page-id-370 .w9-bns-faq details[open] summary .w9-bns-faq-ic{ transform:rotate(45deg); }
body.page-id-370 .w9-bns-faq p{ margin:0 0 18px; font-family:var(--s5-bn); font-size:14.5px; line-height:1.85; color:var(--s5-mid); }

/* ---- closing CTA gap (matches the single-post .w9-bcta gap fix) ---- */
body.page-id-370 .w9-bcta{ margin-top:56px; }