/* ============================================================================
   CasinoBonusesGuide — Redesign reskin (dark premium).
   PRESENTATION ONLY. Overrides theme CSS variables + a few hardcoded light
   surfaces, over untouched markup. Loads AFTER casinohub/style.css so :root
   token overrides win by cascade order (no !important needed for tokens).
   ========================================================================== */

:root{
  /* dark premium palette (from approved mockup) */
  --bg:#070b16; --bg2:#0b1324; --surface:#131c32; --surface2:#0e1728;
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.16);
  --text:#eef3fb; --muted:#9db0cf; --muted2:#68789a;
  --shadow:0 26px 60px -26px rgba(0,0,0,.75);

  /* accents: green = primary CTA (brighter for dark), coral/purple/gold = highlights */
  --green:#1ee07a; --green2:#12bd66; --gold:#ff7a4d; --gold2:#ff5d2e;
  --purple:#8f7dff; --star:#ffc24d; --red:#ff6470;
  --grad-green:linear-gradient(135deg,#2bf089,#13c66c);
  --grad-gold:linear-gradient(135deg,#ff8a6b,#ff5d2e);
}

/* page canvas: deep navy with a subtle premium glow */
body{
  background:
    radial-gradient(1200px 520px at 78% -8%, rgba(124,108,255,.14), transparent 60%),
    radial-gradient(1000px 460px at 8% 2%, rgba(30,224,122,.10), transparent 55%),
    var(--bg) !important;
  color:var(--text);
}

/* glass headers -> dark */
.site-header{ background:rgba(9,13,24,.82) !important; border-bottom-color:var(--line); }
/* review-sticky: clip overflow so the bar is FULLY hidden when parked (translateY(-100%)) — on
   mobile its content was overflowing the 60px box and peeking into the top of the viewport. */
.review-sticky{ background:rgba(9,13,24,.9) !important; overflow:hidden; }
/* mobile: keep the shown sticky bar compact — the bonus kv concatenates bonus + subtext (very long),
   so truncate it to one line and tighten spacing so logo + bonus + Visit button fit one 60px row. */
@media(max-width:760px){
  .review-sticky .rs-inner{ gap:10px; }
  .review-sticky .rs-meta{ gap:10px; min-width:0; flex:1; }
  .review-sticky .rs-kv{ min-width:0; flex:1; }
  .review-sticky .rs-kv b{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .review-sticky .rs-meta .btn{ flex:none; white-space:nowrap; }
}

/* surfaces get a touch more depth + crisp hairline borders on dark */
.hero-card,.ccard,.feature,.pay-wrap,.card,.featured-card,.mini-card,.cg-card,
.cc-row,.review-head,.page-hero,.tool-card{
  border-color:var(--line);
  box-shadow:var(--shadow);
}
/* toplist Variant-A card (.ccard) — theme hardcodes background:#fff; flip to dark */
.ccard{ background:linear-gradient(180deg,var(--surface),var(--surface2)) !important;
  border-color:var(--line) !important; box-shadow:var(--shadow) !important; }
.ccard.top{ background:linear-gradient(var(--surface),var(--surface2)) padding-box,
  linear-gradient(130deg,var(--gold),var(--green)) border-box !important; }
.cc-badge{ background:rgba(255,122,77,.14) !important; border-color:rgba(255,122,77,.38) !important; color:#ffa983 !important; }
.cc-num.a{ color:#f0a830 !important; }
/* contrast: brighten card text for legibility on dark */
.ccard,.ccard .cc-name,.cc-kv .v{ color:#f2f6fc !important; }
.cc-feats li{ color:#dde6f4 !important; }
.cc-feats li i{ color:var(--green) !important; }
/* sub-labels: readable mid-grey (not faint) */
.cc-word,.cc-tbl .cc-kv .k,.cc-pay-l{ color:#9fb0cc !important; }
.cc-kv .v em{ color:#c3cee0 !important; font-style:normal; }

/* nav hover pill on dark */
.nav a:hover{ background:rgba(255,255,255,.06); color:var(--text); }
.sub-menu{ background:var(--surface); border-color:var(--line); }

/* tables / key-value chips inside cards */
.cc-tbl,.cc-kv{ border-color:var(--line); }
.cc-kv b,.cc-score{ color:var(--text); }
.tag,.cc-badge{ background:rgba(255,255,255,.05); border-color:var(--line); color:var(--muted); }

/* payment chips: keep readable on dark */
.pay,.cc-pay-chip{ background:rgba(255,255,255,.04); border-color:var(--line2); color:var(--text); }

/* lang switcher / ghost buttons */
.btn-ghost{ border-color:var(--line2); color:var(--text); }
.btn-ghost:hover{ background:rgba(255,255,255,.06); }

/* primary CTA glow */
.btn-green,.cc-visit{ box-shadow:0 10px 26px -10px rgba(30,224,122,.55); }

/* inputs (for the tools) */
input,select,textarea{ background:var(--surface2); color:var(--text); border-color:var(--line2); }

/* keep brand/payment LOGO plates light so logos stay legible (intentional) */
.c-logo-img,.c-logo-badge img,.mini-card img.dot.is-logo,img.dot.is-logo,
img.fc-dot.is-logo,.pay-logo,.rs-logo .is-logo,.rh-logo.is-logo,.cc-logo-img,.pay .visa{
  background:#fff !important;
}

/* dark-mode neon brand logo (header + footer) — already light/coloured, no filter.
   Sized up to compensate for the logo's built-in glow padding. */
.custom-logo{ height:66px !important; width:auto !important; max-width:360px !important; }
@media(max-width:600px){ .custom-logo{ height:50px !important; max-width:250px !important; } }

/* footer on dark */
.site-footer,footer{ background:var(--surface2); border-top:1px solid var(--line); color:var(--muted); }

/* ---- MOBILE FIX: Gutenberg block columns (homepage hero/features) must STACK on mobile ----
   The homepage hero/features are wp-block-columns carrying WP's `is-not-stacked-on-mobile`, which
   FORCES them side-by-side on phones (flex-wrap:nowrap) → horizontal overflow. Override it: wrap +
   full-width columns. Higher specificity (3 classes) + !important to beat WP core. Plus overflow guard. */
@media(max-width:900px){
  .home-blocks .wp-block-columns,
  .home-blocks .wp-block-columns.is-not-stacked-on-mobile{ flex-wrap:wrap !important; }
  .home-blocks .wp-block-columns > .wp-block-column,
  .home-blocks .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column{
    flex-basis:100% !important; max-width:100% !important; min-width:0 !important; }
  .home-blocks .trust{ overflow-wrap:anywhere; }
}
/* ---- MOBILE FIX: CSS Grid blowout on review/toplist cards ----
   Several theme grids collapse to a single `1fr` track (or `auto 1fr`) at their mobile breakpoint
   (.review-grid, .review-hero .wrap, .rel, .pc, .verdict .vgrid, .rbreak, .cc-main, .cc-kv,
   .ch-why-row). Per the CSS Grid spec, a bare `1fr` track has an *automatic minimum size* equal to
   the min-content size of its contents — so any grid item with unbreakable/long content (table
   cells, stat labels, score rows) silently forces the whole grid (and everything in it) wider than
   the 390px viewport. Because `overflow-x:hidden` below clips it, this reads as "content cut off at
   the right edge" rather than a visible scrollbar — that's the actual bug reported (hero/cards/
   buttons/table values sheared off). Fix: set min-width:0 on the grid ITEMS, which overrides their
   automatic minimum size and lets the track shrink to the container — standard grid-blowout fix,
   doesn't require touching the theme's grid-template-columns at all. */
@media(max-width:900px){
  /* .cc-score goes flex-direction:row (ch-toplist-style.php, !important) in the narrow toplist-card
     layout: number + stars + word + the "Why this score?" button (added client-side by ch-tools.js)
     don't fit in the ~180px score column on a phone and overflow to the right (nowrap). Let it wrap.
     Selector repeats `.casino-list` to out-specificity the 2-class rule that sets flex-direction,
     regardless of stylesheet order. */
  .casino-list.casino-list .cc-score{ flex-wrap:wrap; justify-content:center; }
}
@media(max-width:900px){
  .review-grid, .review-grid > *,
  .review-hero .wrap, .review-hero .wrap > *,
  .rel, .rel > *,
  .pc, .pc > *,
  .verdict .vgrid, .verdict .vgrid > *,
  .rbreak, .rbreak > *,
  .cc-main, .cc-main > *,
  .cc-kv, .cc-kv > *,
  .ch-why-row, .ch-why-row > *{
    min-width:0;
  }
}

/* ---- MOBILE FIX: content tables (review "deposits/withdrawals/comparison" tables and editor
   table blocks in toplist SEO copy) are wider than a phone can show — several real columns of text
   genuinely need more than ~350px. Rather than let them blow out the page, give each table its own
   horizontal scroller so the PAGE stays at 100% width and only the table scrolls internally. ---- */
@media(max-width:900px){
  .rsec table, .content table{
    display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
}

/* use overflow-x:clip (NOT hidden) — `hidden` on html/body turns them into a scroll container and
   breaks position:sticky (header + jump bar). `clip` contains any stray overflow without that side effect. */
@media(max-width:600px){ html,body{ overflow-x:clip; max-width:100%; } }

/* "Show all casinos" / "Show matching only" toggle under a filtered toplist */
.ch-showall{ text-align:center; margin:18px 0 6px; }
.ch-showall-link{
  display:inline-block; padding:8px 18px; font-size:13px; font-weight:600;
  color:var(--muted); background:var(--surface); border:1px solid var(--line);
  border-radius:999px; text-decoration:none; transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.ch-showall-link:hover{ color:var(--green); border-color:var(--green); background:rgba(30,224,122,.08); }