/* ==========================================================================
   CasinoBuddies Clean — site-wide styles.
   Palette matches the existing casinobuddies-authors mu-plugin (dark/cyan,
   Plus Jakarta Sans) so the whole site reads as one system.
   ========================================================================== */

:root {
	/* Light theme (2026-07-08 site-wide dark→light conversion, restyled again
	   2026-07-08, then rebuilt again 2026-07-09 per a white+navy+teal palette
	   direction). --cb-bg/--cb-card/--cb-card2/--cb-border moved from a warm
	   gray family to a cool near-white one (bg #F6F7FB, cards pure #FFFFFF,
	   card2 a soft blue-tint #EEF2FA, border a soft blue-gray #D9DEEA) — this
	   SUPERSEDES the earlier "white cards look wrong on a gray page" call:
	   that was true when the page itself was a saturated warm gray, but with
	   the page ALSO moved to near-white, white cards + a subtle border read as
	   a clean affiliate/comparison-site look instead of clashing. Flat-white
	   fills (.cb-logo, .cb-logo--boxed, header translucent overlay) still
	   track --cb-bg, now trivially since both are near-white anyway.
	   --cb-fg/--cb-muted softened from near-black/dark-gray to a navy-tinted
	   #171A2B / #5F667A for a less harsh, more "polished" text pairing on the
	   new white cards. --cb-gold softened #D4AF37 → #F5B83D (still used the
	   same way: dark-fill badges keep var(--cb-fg) text, bare stars use the
	   separate --cb-star).
	   --cb-cyan is a dark navy/indigo (#27285B, user-chosen — matches the
	   actual logo file, kept exactly as-is despite this palette pass
	   suggesting a very close but different #1E215F; brand-logo match wins).
	   Originally replaced the periwinkle #6186FF — see below for that history.
	   periwinkle #6186FF) — dark enough that it pairs with WHITE text on its
	   button/panel fills (cb-cyan-tint/border derived from this same value).
	   --cb-gold went amber(#FFBF00) then mint(#6EDABC) then settled on a muted
	   classic gold (#D4AF37) — mint only harmonized against the dark navy, not
	   against the light gray page (stars/rank badges/ribbons), so navy+gold
	   (a classic pairing) replaced it. Bare text/icon uses of gold (stars,
	   top-picks label, responsible-warning icon) are darkened separately for
	   legibility on light backgrounds; dark-fill badges (expert badge,
	   btn--gold, rank chips) keep the lighter gold with var(--cb-fg) text.
	   2026-07-09, new-logo rebrand (dark navy + green mark): stars recolored
	   to --cb-star (#E7AB29). Content sitting on a solid --cb-cyan fill (the
	   welcome-bonus offer card, table headers, pagination current, rank
	   badges, and the newly-dark Today's Top Picks panel) now uses
	   --cb-cyan-fg instead of white; --cb-cyan itself is what the user calls
	   "purple" — it's the same dark navy/indigo value from the 2026-07-08
	   pass, unchanged. --cb-cyan-btn-fg (button text, e.g. .cb-btn--cta) and
	   --cb-cyan-fg started as two different greens (#56E180/#3EC968) but the
	   user corrected the hex 2026-07-09 — both now share the single value
	   #3EC9A2; kept as two separate variables in case they need to diverge
	   again later. --cb-green (#18B451) is untouched — it's a semantic
	   "copied!" success color, unrelated to this brand-green pair. */
	--cb-bg: #F6F7FB;
	--cb-card: #FFFFFF;
	--cb-card2: #EEF2FA;
	--cb-border: #D9DEEA;
	--cb-fg: #171A2B;
	--cb-muted: #5F667A;
	--cb-cyan: #27285B;
	--cb-cyan-tint: #27285B1A;
	--cb-cyan-border: #27285B4D;
	--cb-cyan-fg: #3EC9A2;
	--cb-cyan-btn-fg: #3EC9A2;
	--cb-star: #E7AB29;
	--cb-gold: #F5B83D;
	--cb-green: #18B451;
	--cb-li: #0a66c2;
	--cb-radius: 8px;
	--cb-shell-w: 1240px;
	--cb-font-heading: "Outfit", system-ui, sans-serif;
	--cb-font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip, not hidden — hidden turns html/body into a scroll
   container, which silently breaks position:sticky on .cb-site-header in
   most browsers (sticky then computes against that container instead of the
   real viewport, so it never actually sticks on scroll). clip blocks the
   same horizontal overflow without that side effect. */
html { background: var(--cb-bg); overflow-x: clip; }
body {
	margin: 0;
	background: var(--cb-bg);
	color: var(--cb-muted);
	font-family: var(--cb-font-body);
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
	overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { font-family: var(--cb-font-heading); font-weight: 600; color: var(--cb-fg); }

.cb-shell { max-width: var(--cb-shell-w); margin: 0 auto; padding: 0 1.5rem; }

/* ---- Buttons ---- */
.cb-btn {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .6rem 1.1rem; border-radius: 6px; font-size: .88rem; font-weight: 700;
	border: 1px solid transparent; transition: filter .15s ease, background .15s ease, border-color .15s ease;
}
.cb-btn--cta { background: var(--cb-cyan); color: var(--cb-cyan-btn-fg); }
.cb-btn--cta:hover { filter: brightness(1.08); }
.cb-btn--ghost { background: transparent; border-color: var(--cb-cyan-border); color: var(--cb-cyan); }
.cb-btn--ghost:hover { background: var(--cb-cyan-tint); border-color: var(--cb-cyan); }

/* ---- Header ---- */
.cb-site-header {
	position: sticky; top: 0; z-index: 40;
	/* rgba literal, not var(--cb-bg) — needs its own alpha channel for the
	   glass effect, so it was left behind (still the old gray) when the
	   2026-07-09 palette pass moved --cb-bg to #F6F7FB. */
	background: rgba(246, 247, 251, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--cb-border);
}
.cb-site-header__inner { display: flex; align-items: center; gap: 1.5rem; height: 76px; }
.cb-site-header__logo { flex: none; display: flex; align-items: center; }
.cb-site-header__logo img { max-height: 40px; width: auto; }
.cb-nav { flex: 1 1 auto; min-width: 0; }
.cb-nav__list { list-style: none; display: flex; align-items: center; gap: 1.75rem; margin: 0; padding: 0; }
.cb-nav__list > li { position: relative; }
.cb-nav__list > li > a { font-size: .9rem; font-weight: 600; color: var(--cb-fg); padding: .5rem 0; display: inline-block; }
.cb-nav__list > li > a:hover { color: var(--cb-cyan); }
.cb-nav__list li.menu-item-has-children > a::after {
	content: ""; display: inline-block; margin-left: .35rem; width: 6px; height: 6px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
}
.cb-nav__list .sub-menu {
	list-style: none; margin: 0; padding: .6rem; position: absolute; top: 100%; left: 0; min-width: 240px;
	max-height: 70vh; overflow-y: auto;
	background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0,0,0,.12);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease;
}
.cb-nav__list > li:hover > .sub-menu, .cb-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cb-nav__list .sub-menu a { display: block; padding: .55rem .7rem; border-radius: 5px; font-size: .87rem; color: var(--cb-muted); }
.cb-nav__list .sub-menu a:hover { background: var(--cb-card2); color: var(--cb-fg); }
.cb-nav__list .sub-menu li.cb-menu-item--viewall { margin-top: .3rem; padding-top: .5rem; border-top: 1px solid var(--cb-border); }
.cb-nav__list .sub-menu li.cb-menu-item--viewall a { text-align: center; font-weight: 700; color: var(--cb-cyan); }

/* "Bonus Codes" dropdown — wider panel, richer per-item content */
.cb-nav__list > li.cb-submenu--bonus > .sub-menu { min-width: 340px; }
.cb-nav__list .sub-menu li.cb-menu-item--bonus { padding: .5rem .7rem; border-radius: 5px; }
.cb-nav__list .sub-menu li.cb-menu-item--bonus:hover { background: var(--cb-card2); }
.cb-menu-bonus { display: block; }
.cb-menu-bonus__row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.cb-menu-bonus__title { display: block; padding: 0; font-size: .87rem; font-weight: 600; color: var(--cb-fg); }
.cb-menu-bonus__copy { flex: none; font-size: .68rem; padding: .2rem .45rem; }
.cb-menu-bonus__stats { display: block; padding: .3rem 0 0; font-size: .78rem; color: var(--cb-cyan); }
.cb-menu-bonus__stats:hover { background: none; }

.cb-site-header__actions { flex: none; display: flex; align-items: center; gap: .9rem; margin-left: auto; }
.cb-search { position: relative; display: flex; align-items: center; }
.cb-search__toggle { background: none; border: none; color: var(--cb-muted); padding: .4rem; }
.cb-search__toggle:hover { color: var(--cb-cyan); }
.cb-search__input {
	width: 0; opacity: 0; padding: 0; border: none; background: var(--cb-card2); color: var(--cb-fg);
	border-radius: 5px; transition: width .2s ease, opacity .2s ease, padding .2s ease;
	position: absolute; right: 2.2rem; top: 50%; transform: translateY(-50%); height: 2.2rem;
}
.cb-search--open .cb-search__input { width: 220px; opacity: 1; padding: 0 .75rem; }
.cb-nav__burger { display: none; flex-direction: column; gap: 4px; background: none; border: none; padding: .4rem; }
.cb-nav__burger span { width: 20px; height: 2px; background: var(--cb-fg); border-radius: 2px; }
.cb-nav__mobile-cta { display: none; }

@media (max-width: 900px) {
	.cb-nav {
		position: fixed; top: 76px; left: 0; right: 0; height: calc(100vh - 76px); height: calc(100dvh - 76px);
		background: var(--cb-bg); padding: 1.5rem; overflow-y: auto; z-index: 39;
		transform: translateX(100%); transition: transform .2s ease;
	}
	.cb-nav--open { transform: translateX(0); }
	.cb-nav__mobile-cta { display: flex; justify-content: center; width: 100%; margin-bottom: 1.5rem; }
	.cb-site-header__actions .cb-btn--cta { display: none; }
	.cb-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.cb-nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; }
	.cb-nav__list li.menu-item-has-children.cb-nav--expanded > .sub-menu { display: block; }
	.cb-search__input { position: static; width: auto; opacity: 1; padding: .5rem .75rem; transform: none; display: none; }
	.cb-nav__burger { display: flex; }
}

/* ---- Footer ---- */
.cb-site-footer { background: var(--cb-card); border-top: 1px solid var(--cb-border); margin-top: 4rem; }
.cb-site-footer__top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; padding: 3.5rem 1.5rem 2.5rem; }
.cb-site-footer__logo img { max-height: 34px; width: auto; max-width: 100%; object-fit: contain; }
.cb-site-footer__tagline { color: var(--cb-muted); font-size: .88rem; line-height: 1.6; margin: 1rem 0; max-width: 30ch; }
.cb-site-footer__social { display: flex; gap: .6rem; }
.cb-site-footer__social a { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cb-border); border-radius: 5px; color: var(--cb-muted); }
.cb-site-footer__social a:hover { color: var(--cb-cyan); border-color: var(--cb-cyan); }
.cb-site-footer__heading { font-size: .78rem; font-weight: 800; letter-spacing: .06em; color: var(--cb-muted); margin: 0 0 1rem; }
.cb-site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.cb-site-footer__links a { color: var(--cb-fg); font-size: .88rem; }
.cb-site-footer__links a:hover { color: var(--cb-cyan); }
.cb-site-footer__legal { border-top: 1px solid var(--cb-border); padding: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; font-size: .78rem; color: var(--cb-muted); }
.cb-site-footer__badges { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cb-site-footer__badges a { color: var(--cb-muted); }
.cb-site-footer__badges a:hover { color: var(--cb-cyan); }
.cb-site-footer__badges-list { display: flex; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.cb-site-footer__badges-list li:not(:first-child)::before { content: "\2022"; margin: 0 .6rem; color: var(--cb-border); }
.cb-age-badge { border: 1px solid var(--cb-border); border-radius: 4px; padding: .1rem .4rem; font-weight: 800; color: var(--cb-fg); }
.cb-site-footer__fine { margin: 0; }
.cb-site-footer__copy { margin: 0; flex-basis: 100%; }
@media (max-width: 1100px) { .cb-site-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cb-site-footer__top { grid-template-columns: 1fr; } }

/* ---- Generic single/page shell ---- */
.cb-single { padding: 2.5rem 0 4rem; }
.cb-page__title { font-size: 2rem; font-weight: 800; margin: 0 0 1.5rem; }
.cb-404 { text-align: center; padding: 4rem 0; }

/* ---- Breadcrumbs (shared with the authors mu-plugin look) ---- */
.cb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8rem; color: var(--cb-muted); margin-bottom: 1.5rem; }
.cb-crumbs a { color: var(--cb-muted); }
.cb-crumbs a:hover { color: var(--cb-cyan); }
.cb-crumbs__cur { color: var(--cb-fg); }

/* ---- Cards ---- */
.cb-card { background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); }

/* ---- Prose (main_body / the_content) ---- */
.cb-prose { color: hsl(240 8% 15%); font-size: .98rem; line-height: 1.75; }
.cb-prose h2 { font-size: 1.4rem; font-weight: 800; color: var(--cb-fg); margin: 2.25rem 0 1rem; }
.cb-prose h3 { font-size: 1.15rem; font-weight: 700; color: var(--cb-fg); margin: 1.75rem 0 .85rem; }
.cb-prose p { margin: 0 0 1rem; }
.cb-prose ul, .cb-prose ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.cb-prose li { margin-bottom: .4rem; }
.cb-prose img { display: block; margin: 1.5rem auto; border-radius: 5px; }
/* Tables are wrapped in a .cb-table-scroll div by inc/table-scroll-wrap.php
   (the stored HTML is bare <table>, no wrapper of its own to hang overflow-x
   on — overflow-x:auto directly on a <table> with width:100% never actually
   scrolled, since the table obediently shrank its columns to fit 100% instead
   of overflowing). display:block on the table itself was tried before to
   make wide tables scroll instead of squish, but it broke narrow tables
   (e.g. a plain 2-column "Pros/Cons" table) — blockifying forces the browser
   to build an anonymous inner table box for the still-tabular children, and
   THAT box sizes to its content/min-width instead of inheriting the outer
   block's width, so short-content tables shrink-wrap and leave dead space in
   their card instead of filling it. Keeping the table native and using
   min-width:100% instead of width:100% gets both: narrow tables still
   stretch to fill the card, and wide tables (forced wider by min-width/
   nowrap headers below) can grow past 100% and get picked up by the
   wrapper's overflow-x. */
.cb-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.5rem; }
.cb-prose table { min-width: 100%; border-collapse: collapse; margin: 0; font-size: .92rem; border: 1px solid var(--cb-border); }
.cb-prose th, .cb-prose td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--cb-border); text-align: left; min-width: 110px; }
.cb-prose tr:last-child th, .cb-prose tr:last-child td { border-bottom: none; }
.cb-prose th { width: 38%; }
.cb-prose td { color: var(--cb-fg); }
/* Dark navy header row (WagerPals-style reference) — square corners, matching
   the rest of the table (no rounding anywhere in this component).
   white-space:nowrap here is deliberate: table-layout:auto alone still lets
   columns shrink until header words wrap and collide on many-column tables
   (e.g. "Withdrawal"/"Fee" running together) — forcing the header row to stay
   on one line per cell gives each column a real minimum width, so a table
   with too many columns for the viewport genuinely overflows and scrolls
   instead of squishing. Body cells keep normal wrapping (long prose in a
   plain 2-column table should still wrap, not force a needless scrollbar). */
.cb-prose thead th { background: var(--cb-cyan); color: var(--cb-cyan-fg); font-weight: 700; border-bottom: none; white-space: nowrap; }
.cb-prose a { color: var(--cb-cyan); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Star rating ---- */
.cb-stars { display: inline-flex; align-items: center; gap: .15rem; margin-top: .5rem; }
.cb-star { color: var(--cb-border); font-size: 1.1rem; line-height: 1; }
.cb-star--full, .cb-star--half { color: var(--cb-star); }
.cb-stars__num { margin-left: .4rem; font-size: .85rem; color: var(--cb-muted); font-weight: 700; }

/* ---- Casino detail hero (review/casino-list singles) ---- */
.cb-casino-hero { display: flex; flex-wrap: wrap; width: 100%; gap: 1.75rem; align-items: flex-start; padding: 1.75rem 0; margin-bottom: 2rem; border-radius: 0; }
.cb-logo { max-width: 160px; max-height: 72px; width: auto; object-fit: contain; border-radius: 5px; }
.cb-logo--lg { max-width: 130px; max-height: 130px; background: var(--cb-card2); padding: 0; border: 1px solid var(--cb-border); }
/* Fallback when a post has no featured image — shows the post title as text
   (fine for short casino-name titles, but review posts have long SEO
   headlines like "Is 32Red Casino Legit? Safety Check & Owner Reveal" that
   would otherwise overflow this small chip and overlap adjacent card text —
   clamp to 2 lines with an ellipsis instead of letting it spill out). */
.cb-logo--text {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
	overflow: hidden; align-items: center; justify-content: center; text-align: center;
	min-width: 140px; max-width: 100%; min-height: 60px; background: var(--cb-card2);
	border-radius: 5px; font-weight: 800; font-size: .8rem; line-height: 1.25; padding: .5rem .75rem;
}

.cb-casino-hero__aside { flex: none; width: 130px; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.cb-casino-hero__expert {
	display: inline-flex; align-items: center; gap: .3rem; background: var(--cb-gold); color: var(--cb-fg); white-space: nowrap;
	font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; padding: .3rem .5rem; border-radius: 4px;
}
.cb-casino-hero__aside .cb-stars { margin-top: .3rem; }
.cb-casino-hero__aside .cb-star { font-size: .85rem; }
.cb-casino-hero__aside .cb-stars__num { font-size: .72rem; }

.cb-casino-hero__body { flex: 1 1 320px; min-width: 0; }
.cb-casino-hero__title { font-size: 1.6rem; margin: 0 0 1rem; }
.cb-casino-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.cb-casino-hero__payments { margin-top: 1.1rem; }
.cb-casino-hero__payments-label { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cb-muted); margin-bottom: .5rem; }
.cb-pm-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.cb-pm-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--cb-card2); border: 1px solid var(--cb-border); border-radius: 5px; padding: .4rem .65rem; font-size: .78rem; color: var(--cb-fg); }
.cb-pm-chip svg { color: var(--cb-cyan); flex: none; }
.cb-hstat { display: flex; align-items: flex-start; gap: .5rem; padding: .85rem; background: var(--cb-card2); border: 1px solid var(--cb-border); border-radius: 6px; }
.cb-hstat__icon { color: var(--cb-cyan); flex: none; margin-top: .1rem; }
.cb-hstat__label { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .04em; margin-bottom: .25rem; }
.cb-hstat__value { display: block; font-size: .84rem; font-weight: 700; color: var(--cb-fg); line-height: 1.35; }

.cb-casino-hero__offer {
	flex: none; width: 100%; max-width: 300px; margin-left: auto;
	background: var(--cb-cyan); color: var(--cb-cyan-fg); border-radius: 8px; padding: 1.1rem 1.25rem;
	display: flex; flex-direction: column; gap: .35rem;
}

/* ---- Welcome-bonus hero: reuses the review hero's aside/body/offer
   skeleton (same classes, same borderless full-width treatment) instead of
   a separate bordered-card component — the bonus_list terms render as
   prose inside the body column so it isn't left empty next to the offer box. */
/* "Casino Bonus" block — matches the original Elementor design's own layout:
   small uppercase accent label, a repeated bold offer headline with a gift
   icon, then the casino_bonus_list field as plain wrapped text (deliberately
   NOT nl2br'd — the original just echoed the raw field value, so consecutive
   blank lines in the source collapse into normal wrapping via standard HTML
   whitespace handling, instead of rendering as visibly gapped paragraphs). */
.cb-wb-hero__bonus-label { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--cb-cyan); margin-bottom: .6rem; }
.cb-wb-hero__bonus-headline { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; font-weight: 700; color: var(--cb-fg); margin-bottom: .6rem; }
.cb-wb-hero__bonus-headline svg { color: var(--cb-cyan); flex: none; }
.cb-wb-hero__bonus-text { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--cb-muted); }
.cb-casino-hero__offer-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.cb-casino-hero__offer-value { font-size: 1.25rem; font-weight: 800; font-family: var(--cb-font-heading); }
.cb-casino-hero__offer-terms { font-size: .78rem; opacity: .8; }
.cb-btn--gold { justify-content: center; background: var(--cb-cyan-fg); color: var(--cb-fg); margin-top: .4rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: .82rem; }
.cb-btn--gold:hover { filter: brightness(1.08); }
.cb-casino-hero__code-box { display: flex; align-items: center; gap: .6rem; background: #06121a; border-radius: 6px; padding: .6rem .8rem; margin-top: .5rem; font-size: .82rem; color: rgba(255,255,255,.7); }
.cb-casino-hero__code-box .cb-code-chip { border-color: rgba(255,255,255,.35); color: #fff; }
.cb-casino-hero__code-box .cb-code-chip--copied { border-color: var(--cb-green); color: var(--cb-green); }
/* Now a standalone block below the whole hero row (not inside the offer
   panel) — matches the original site, which shows the T&Cs as plain page
   text under a divider rather than packed into the cyan/navy box. */
.cb-casino-hero__disclaimer { display: block; font-size: .78rem; color: var(--cb-muted); margin: 1.5rem 0 2rem; padding: 1.5rem 0; border-top: 1px solid var(--cb-border); border-bottom: 1px solid var(--cb-border); }
.cb-casino-hero__disclaimer a { color: var(--cb-cyan); text-decoration: underline; }

/* Title is a plain sibling H1 above .cb-casino-hero (not a grid/flex item of
   it) at all viewport sizes now — it just needs a smaller size on mobile.
   Mobile: logo/rating/badge as a left column against a stacked Withdrawal/
   Min Deposit/Wagering column on the right, then the offer box full-width
   below — Total Games/License/Established and Payment Methods are dropped
   here (still shown on desktop). */
@media (max-width: 700px) {
	.cb-casino-hero__title { font-size: 1.3rem; }
	.cb-casino-hero {
		display: grid; grid-template-columns: 1fr 1fr;
		grid-template-areas: "aside stats" "offer offer";
		align-items: start; gap: 1.25rem;
	}
	.cb-casino-hero__aside { grid-area: aside; width: auto; align-items: center; text-align: center; }
	.cb-casino-hero__aside .cb-logo--lg { max-width: 160px; max-height: 160px; }
	.cb-casino-hero__body { display: contents; }
	.cb-casino-hero__stats { grid-area: stats; grid-template-columns: 1fr; }
	.cb-hstat--total-games, .cb-hstat--license, .cb-hstat--established { display: none; }
	.cb-casino-hero__payments { display: none; }
	.cb-casino-hero__offer { grid-area: offer; width: 100%; max-width: none; margin: 0; }
}

/* ---- Play-single intro card ---- */
.cb-play-single__hero {
	padding: 2.5rem 0 2rem; margin-bottom: 2rem;
	border-bottom: 1px solid var(--cb-border);
}
.cb-play-single__pill {
	display: inline-flex; align-items: center; gap: .45rem; color: var(--cb-cyan); font-weight: 700; font-size: .88rem;
	background: var(--cb-card2); border: 1px solid var(--cb-border); border-radius: 5px; padding: .4rem .7rem; margin-bottom: 1.25rem;
}
.cb-play-single__badges { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.cb-play-single__badges span {
	display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--cb-fg);
	background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 6px; padding: .55rem .9rem;
}
.cb-play-single__badges svg { color: var(--cb-cyan); flex: none; }
.cb-play-single__intro { padding: 1.25rem 1.5rem; margin-bottom: 0; }
.cb-play-single__intro p:last-child { margin-bottom: 0; }

/* ---- Sections + FAQ accordion ---- */
.cb-sec { margin-top: 2.5rem; }
.cb-sec--top { margin-top: 2rem; margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--cb-border); }
.cb-sec__h { font-size: 1.25rem; font-weight: 800; margin: 0 0 1rem; color: var(--cb-fg); }
.cb-faq { display: block; }
.cb-faq__item { border-bottom: 1px solid var(--cb-border); }
.cb-faq__q {
	cursor: pointer; padding: 1.2rem 1.75rem 1.2rem 0; font-weight: 600; color: var(--cb-fg); list-style: none;
	position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.cb-faq__q::-webkit-details-marker { display: none; }
.cb-faq__q .cb-faq__chevron { color: var(--cb-muted); flex: none; transition: transform .15s ease; }
details[open] > .cb-faq__q .cb-faq__chevron { transform: rotate(180deg); }
.cb-faq__a { padding: 0 1.75rem 1.2rem 0; line-height: 1.7; }

/* ==========================================================================
   Homepage (front-page.php)
   ========================================================================== */
.cb-front { padding-bottom: 2rem; }

.cb-hero { padding: 3.5rem 0 2.5rem; }
.cb-hero__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: start; }
.cb-hero__col { min-width: 0; }
.cb-hero__badge { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .9rem; border-radius: 999px; background: var(--cb-card2); border: 1px solid var(--cb-border); font-size: .8rem; font-weight: 700; color: var(--cb-cyan); margin-bottom: 1.25rem; }
.cb-hero__title { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 1rem; }
.cb-hero__subtitle { max-width: 46ch; margin: 0 0 1.75rem; font-size: 1.05rem; line-height: 1.6; }
.cb-hero__ctas { display: flex; gap: 1rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.cb-hero__stats { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.cb-hero__stat { display: flex; flex-direction: column; }
.cb-hero__stat-val { font-size: 1.4rem; font-weight: 700; font-family: var(--cb-font-heading); color: var(--cb-fg); }
.cb-hero__stat-label { font-size: .8rem; }
@media (max-width: 1000px) { .cb-hero__grid { grid-template-columns: 1fr; } }

/* ---- "Today's Top Picks" hero side panel ---- */
.cb-top-picks { background: var(--cb-cyan); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); padding: 1.25rem; }
.cb-top-picks__head { display: flex; align-items: center; gap: .5rem; color: var(--cb-cyan-fg); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 1rem; }
.cb-top-picks__all { width: 100%; justify-content: center; margin-top: .5rem; }

.cb-sec--wide { margin-top: 3.5rem; }
.cb-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cb-sec-head__h { font-size: 1.6rem; margin: 0; }
.cb-sec-head__sub { margin: .4rem 0 0; }
.cb-sec__sub { margin: -.5rem 0 1.5rem; }
.cb-sec__h--left { text-align: left; }
.cb-sec__sub--center { text-align: center; }

/* ---- Rich "Top Rated" row card ---- */
.cb-casino-list { display: grid; gap: 1rem; }
.cb-tr-card {
	position: relative; display: grid; grid-template-columns: auto auto 1fr auto; gap: 1.25rem; align-items: center;
	padding: 1.5rem; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: var(--cb-radius);
}
.cb-tr-card__rank { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 5px; background: var(--cb-gold); color: var(--cb-fg); font-weight: 800; font-size: .85rem; }
.cb-tr-card__logo .cb-logo { max-width: 110px; max-height: 52px; }
.cb-tr-card__main { min-width: 0; }
.cb-tr-card__name-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.cb-tr-card__name { font-family: var(--cb-font-heading); font-weight: 600; font-size: 1.05rem; color: var(--cb-fg); }
.cb-tr-card__offer { display: block; font-family: var(--cb-font-heading); font-weight: 600; font-size: 1.3rem; color: var(--cb-cyan); margin-top: .3rem; }
.cb-tr-card__stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: .75rem; font-size: .85rem; }
.cb-tr-card__stats span { display: inline-flex; align-items: center; gap: .4rem; }
.cb-tr-card__stats svg { color: var(--cb-cyan); flex: none; }
.cb-tr-card__actions { display: flex; flex-direction: column; gap: .6rem; }
.cb-tr-card__terms { grid-column: 1 / -1; border-top: 1px solid var(--cb-border); margin-top: .5rem; padding-top: 1rem; font-size: .8rem; }
.cb-tr-card__terms-head { font-weight: 700; color: var(--cb-fg); margin: 0 0 .35rem; }
.cb-tr-card__terms-body { margin: 0; line-height: 1.6; }
.cb-tr-card__terms-body a { color: var(--cb-cyan); }

.cb-tr-card--compact { grid-template-columns: auto auto 1fr; padding: 1rem; gap: .85rem; margin-bottom: .85rem; }
.cb-tr-card--compact .cb-tr-card__logo .cb-logo { max-width: 64px; max-height: 36px; }
.cb-tr-card--compact .cb-tr-card__offer { font-size: .95rem; }
.cb-tr-card--compact .cb-tr-card__actions { grid-column: 1 / -1; }
.cb-tr-card--compact .cb-tr-card__actions .cb-btn { width: 100%; justify-content: center; }

/* Ranks #2+ in the hero's "Today's Top Picks" panel — smaller, no button. */
.cb-tr-card--mini { padding: .7rem .85rem; gap: .65rem; margin-bottom: .5rem; background: transparent; border: none; border-top: 1px solid var(--cb-border); border-radius: 0; }
.cb-tr-card--mini .cb-tr-card__rank { width: 22px; height: 22px; font-size: .72rem; background: var(--cb-card2); color: var(--cb-muted); }
.cb-tr-card--mini .cb-tr-card__logo .cb-logo { max-width: 44px; max-height: 30px; }
.cb-tr-card--mini .cb-tr-card__name { font-size: .88rem; color: #fff; }
.cb-tr-card--mini .cb-star { font-size: .78rem; }
.cb-tr-card--mini .cb-stars__num { font-size: .68rem; color: #fff; }
.cb-tr-card--mini .cb-tr-card__offer { font-size: .8rem; font-weight: 400; font-family: inherit; color: #fff; text-decoration: none; margin-top: .2rem; }

@media (max-width: 700px) {
	.cb-tr-card {
		grid-template-columns: auto 1fr; row-gap: 1rem;
	}
	.cb-tr-card__rank { grid-row: 1; grid-column: 1; }
	.cb-tr-card__logo { grid-row: 1; grid-column: 2; justify-self: start; }
	.cb-tr-card__main, .cb-tr-card__actions { grid-column: 1 / -1; }
	.cb-tr-card__actions { flex-direction: row; }
	.cb-tr-card__actions .cb-btn { flex: 1 1 0; justify-content: center; }
	.cb-tr-card--compact { grid-template-columns: auto 1fr; }
	.cb-tr-card--compact .cb-tr-card__rank { grid-row: 1; grid-column: 1; }
	.cb-tr-card--compact .cb-tr-card__logo { grid-row: 1; grid-column: 2; }
	.cb-tr-card--compact .cb-tr-card__main { grid-column: 1 / -1; }
}

/* ---- Bonus code chip ---- */
.cb-code-chip-row { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .78rem; }
.cb-code-chip-label { color: var(--cb-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.cb-code-chip {
	display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 5px;
	border: 1px dashed var(--cb-cyan-border); background: transparent; color: var(--cb-cyan); font-weight: 700;
	font-size: .82rem; letter-spacing: .03em; font-family: var(--cb-font-body); cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.cb-code-chip:hover { background: var(--cb-cyan-tint); }
.cb-code-chip--copied { border-style: solid; border-color: var(--cb-green); color: var(--cb-green); }

/* ---- "Latest Bonus Codes" grid card ---- */
.cb-bc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2rem; }
@media (max-width: 1000px) { .cb-bc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cb-bc-grid { grid-template-columns: 1fr; } }
.cb-bc-card { position: relative; padding: 1.5rem; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); }
.cb-bc-card__badge { position: absolute; top: -10px; right: 1.25rem; background: var(--cb-gold); color: var(--cb-fg); font-size: .68rem; font-weight: 800; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; }
.cb-bc-card__logo .cb-logo { max-width: 88px; max-height: 40px; margin-bottom: .75rem; }
.cb-bc-card__name { display: block; font-family: var(--cb-font-heading); font-weight: 600; color: var(--cb-fg); margin-bottom: .3rem; }
.cb-bc-card__offer { display: block; color: var(--cb-cyan); font-size: .92rem; margin-bottom: .85rem; }
.cb-bc-card__footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid var(--cb-border); margin-top: 1rem; padding-top: 1rem; }
.cb-bc-card__freshness { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; }
.cb-bc-card__claim { padding: .45rem .9rem; font-size: .8rem; }

/* ---- "In-Depth Casino Reviews" card ---- */
.cb-id-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 1.5rem 0; }
@media (max-width: 800px) { .cb-id-grid { grid-template-columns: 1fr; } }
.cb-id-card { display: flex; flex-direction: column; padding: 1.5rem; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); }
.cb-id-card__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.cb-id-card__logo .cb-logo { max-width: 80px; max-height: 44px; }
.cb-id-card__name { display: block; font-family: var(--cb-font-heading); font-weight: 600; color: var(--cb-fg); margin-bottom: .3rem; }
.cb-id-card__summary { font-size: .9rem; line-height: 1.65; margin: 0 0 1rem; }
.cb-id-card__stats { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .55rem; }
.cb-id-card__stats li { display: flex; align-items: center; gap: .55rem; font-size: .88rem; }
.cb-id-card__stats svg { color: var(--cb-green); flex: none; }
.cb-id-card__cta { margin-top: auto; justify-content: center; }
.cb-id-grid__all { display: inline-flex; align-items: center; gap: .4rem; color: var(--cb-cyan); font-weight: 700; }

.cb-tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .cb-tile-grid { grid-template-columns: repeat(2, 1fr); } }
.cb-tile {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
	padding: 1.5rem 1rem; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: var(--cb-radius);
	transition: border-color .15s ease, transform .15s ease;
}
.cb-tile:hover { border-color: var(--cb-cyan); transform: translateY(-2px); }
.cb-tile__icon-badge {
	display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
	border-radius: 8px; background: var(--cb-cyan-tint); border: 1px solid var(--cb-cyan-border); color: var(--cb-cyan);
}
.cb-tile__label { font-weight: 700; font-size: .92rem; color: var(--cb-fg); }
.cb-tile__count { font-size: .78rem; }

.cb-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .cb-trust-grid { grid-template-columns: repeat(2, 1fr); } }
.cb-trust-badge { text-align: center; padding: 1.5rem; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); }
.cb-trust-badge__icon-badge {
	display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: .9rem;
	border-radius: 8px; background: var(--cb-cyan-tint); border: 1px solid var(--cb-cyan-border); color: var(--cb-cyan);
}
.cb-trust-badge__title { font-size: 1rem; margin: 0 0 .5rem; }
.cb-trust-badge__desc { font-size: .88rem; line-height: 1.6; margin: 0; }

.cb-responsible { margin-top: 3.5rem; padding: 3rem 0; background: var(--cb-card); border-top: 1px solid var(--cb-border); border-bottom: 1px solid var(--cb-border); }
.cb-responsible__inner { text-align: center; max-width: 700px; }
.cb-responsible__badges { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-bottom: 1rem; }
.cb-responsible__badge { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 5px; border: 1px solid hsl(0 70% 50% / .4); background: hsl(0 70% 50% / .1); color: hsl(0 75% 40%); font-weight: 800; }
.cb-responsible__warning { display: inline-flex; color: hsl(46 65% 32%); }
.cb-responsible p { line-height: 1.7; }
.cb-responsible__links { display: flex; justify-content: center; gap: .9rem; flex-wrap: wrap; margin-top: 1.25rem; }
.cb-responsible__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; color: var(--cb-cyan); font-weight: 700; font-size: .88rem; }

.cb-newsletter { padding: 3.5rem 0; }
.cb-newsletter__inner { text-align: center; max-width: 560px; }
.cb-newsletter p { color: var(--cb-muted); }
.cb-newsletter__form { display: flex; gap: .75rem; margin: 1.5rem 0 1rem; }
.cb-newsletter__form input { flex: 1; padding: .75rem 1rem; border-radius: 6px; border: 1px solid var(--cb-border); background: var(--cb-card2); color: var(--cb-fg); }
.cb-newsletter__fine { font-size: .78rem; }
.cb-newsletter__fine a { color: var(--cb-cyan); }
@media (max-width: 500px) { .cb-newsletter__form { flex-direction: column; } }

/* ---- Listing pages (casino-reviews, all-casino-bonus-codes) ---- */
.cb-page__title--center { text-align: center; }
.cb-listing__intro { max-width: 760px; margin: -.5rem 0 2rem; line-height: 1.6; }
.cb-listing__intro--center { margin-left: auto; margin-right: auto; text-align: center; }
.cb-pagination { display: flex; justify-content: center; gap: .4rem; }
.cb-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .5rem;
	border: 1px solid var(--cb-border); border-radius: 5px; color: var(--cb-fg); font-weight: 700; font-size: .85rem;
}
.cb-pagination .page-numbers.current { background: var(--cb-cyan); color: var(--cb-cyan-fg); border-color: var(--cb-cyan); }
.cb-pagination .page-numbers.dots { border: none; }

/* ---- Casino Reviews archive card ---- */
.cb-ra-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2.5rem; }
@media (max-width: 1000px) { .cb-ra-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cb-ra-grid { grid-template-columns: 1fr; } }
.cb-ra-card { position: relative; display: flex; flex-direction: column; padding: 1.5rem; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); }
.cb-ra-card__rank { position: absolute; top: -10px; left: 1.25rem; background: var(--cb-cyan); color: var(--cb-cyan-fg); font-weight: 800; font-size: .78rem; padding: .15rem .55rem; border-radius: 4px; }
.cb-ra-card__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.cb-ra-card__logo .cb-logo { max-width: 80px; max-height: 44px; }
.cb-ra-card__name { display: block; font-family: var(--cb-font-heading); font-weight: 600; color: var(--cb-fg); margin-bottom: .3rem; }
.cb-ra-card__offer { color: var(--cb-cyan); font-size: .92rem; margin: 0 0 1.25rem; }
.cb-ra-card__cta { margin-top: auto; justify-content: center; }

/* ---- Search results: generic (non-casino) result card ---- */
.cb-sr-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.5rem; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); transition: border-color .15s, box-shadow .15s; }
.cb-sr-card:hover { border-color: var(--cb-cyan-border); box-shadow: 0 4px 16px rgba(23, 26, 43, .06); }
.cb-sr-card__type { align-self: flex-start; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--cb-cyan); background: var(--cb-card2); padding: .25rem .6rem; border-radius: 999px; }
.cb-sr-card__title { display: block; font-family: var(--cb-font-heading); font-weight: 700; font-size: 1.1rem; color: var(--cb-fg); line-height: 1.35; }
.cb-sr-card__title:hover { color: var(--cb-cyan); }
.cb-sr-card__excerpt { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--cb-muted); flex: 1; }
.cb-sr-card__more { display: inline-flex; align-items: center; gap: .3rem; font-size: .84rem; font-weight: 700; color: var(--cb-cyan); margin-top: auto; }
.cb-sr-card__more:hover { text-decoration: underline; }

/* ---- Search results: empty state ---- */
.cb-search-empty { padding: 3rem 1.5rem; text-align: center; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); }
.cb-search-empty p { font-size: 1rem; color: var(--cb-muted); margin: 0 0 1.25rem; }
.cb-search-empty__links { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }

/* ---- All Casino Bonus Codes archive card ---- */
.cb-ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2rem; }
@media (max-width: 1000px) { .cb-ba-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cb-ba-grid { grid-template-columns: 1fr; } }
.cb-ba-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.75rem 1.5rem; background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); }
.cb-ba-card__logo { margin-bottom: 1rem; }
.cb-logo--boxed { background: var(--cb-bg); border-radius: 5px; padding: .5rem 1rem; max-width: 160px; max-height: 72px; }
.cb-ba-card__name { font-family: var(--cb-font-heading); font-weight: 600; color: var(--cb-fg); margin-bottom: .4rem; }
.cb-ba-card__offer { color: var(--cb-cyan); font-size: .92rem; margin: 0 0 1.25rem; }
.cb-ba-card__code-row { display: flex; align-items: center; gap: .6rem; padding-top: 1.1rem; border-top: 1px solid var(--cb-border); width: 100%; justify-content: flex-start; font-size: .78rem; }
.cb-ba-card__go { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 5px; border: 1px solid var(--cb-cyan-border); color: var(--cb-cyan); margin-left: auto; flex: none; }
.cb-ba-card__go:hover { background: var(--cb-cyan-tint); }