/* ============================================================
   Casino Review v2 — page styles (phase 1 mockup)
   Consumes tokens.css. New components use .cv2- prefix.
   Legacy content vocabulary is restyled ONLY inside .cv2-review-body.
   ============================================================ */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--bji-font-sans);
  font-size: var(--bji-text-base);
  line-height: var(--bji-leading-body);
  color: var(--bji-text);
  background: var(--bji-surface);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--bji-link); text-decoration: none; }
a:hover { color: var(--bji-link-hover); text-decoration: underline; }

/* .cv2-container moved to chrome-legacy.css (shared by all v2 pages) */

.cv2-section { margin-block: var(--bji-section-gap); }

.cv2-section-title {
  font-size: var(--bji-text-2xl);
  font-weight: var(--bji-weight-bold);
  line-height: var(--bji-leading-tight);
  color: var(--bji-navy-900);
  margin: 0 0 var(--bji-space-5);
}
.cv2-section-title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  border-radius: var(--bji-radius-pill);
  background: var(--bji-brand);
  margin-top: var(--bji-space-2);
}

.cv2-kicker {
  display: block;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bji-text-faint);
  margin-bottom: var(--bji-space-1);
}

/* ---------- Buttons ---------- */
/* .cv2-btn base + --cta moved to chrome-legacy.css (footer Subscribe uses
   them); --ghost/--outline/--sm variants moved to v2-components.css
   (shared with live-game v2 pages). */

/* ---------- Hero / verdict (light) ---------- */
.cv2-hero {
  background:
    radial-gradient(70rem 30rem at 85% -20%, rgb(6 152 255 / 0.10), transparent 60%),
    linear-gradient(170deg, var(--bji-blue-050), var(--bji-gray-000) 70%);
  border-bottom: 1px solid var(--bji-border);
  color: var(--bji-text);
  padding-block: clamp(2rem, 1.4rem + 3vw, 4rem);
}

.cv2-hero-breadcrumbs {
  font-size: var(--bji-text-xs);
  color: var(--bji-text-faint);
  margin-bottom: var(--bji-space-5);
}
.cv2-hero-breadcrumbs a { color: var(--bji-text-faint); }
.cv2-hero-breadcrumbs a:hover { color: var(--bji-link); }

.cv2-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(17rem, 1fr);
  grid-template-areas: "head card" "pros card";
  /* the tall rating card spans both rows; a 1fr second row absorbs its
     extra height so the head row stays snug against the pros row */
  grid-template-rows: auto 1fr;
  column-gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  row-gap: var(--bji-space-6);
  align-items: start;
}
.cv2-hero-head { grid-area: head; }
.cv2-hero-grid > .cv2-rating-card { grid-area: card; }
.cv2-hero-grid > .cv2-hero-proscons { grid-area: pros; margin-top: 0; }

.cv2-hero-byline {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
  margin: var(--bji-space-2) 0 0;
  font-size: var(--bji-text-xs);
  color: var(--bji-text-faint);
}
.cv2-hero-byline img { width: 24px; height: 24px; border-radius: 50%; }
.cv2-hero-byline a { color: inherit; text-decoration: underline; }
.cv2-hero-byline a:hover { color: var(--bji-link); }

/* author box at the end of the review (E-E-A-T) */
.cv2-author {
  display: flex;
  gap: var(--bji-space-5);
  align-items: flex-start;
  max-width: calc(var(--bji-prose-width) + 2 * var(--bji-gutter));
  margin: var(--bji-space-7) auto 0;
  padding: var(--bji-space-5);
  background: var(--bji-surface-sunken);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
}
.cv2-author img { width: 88px; height: 88px; border-radius: 50%; flex: 0 0 auto; }
.cv2-author h3 { margin: 0 0 var(--bji-space-2); font-size: var(--bji-text-lg); }
.cv2-author p { margin: 0 0 var(--bji-space-3); font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.cv2-author-more { font-style: italic; }
.cv2-author-more, .cv2-author p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .cv2-author { flex-direction: column; align-items: center; text-align: center; }
}

.cv2-hero-ident {
  display: flex;
  gap: var(--bji-space-5);
  align-items: center;
  margin-bottom: var(--bji-space-5);
}

.cv2-hero-logo {
  flex: 0 0 auto;
  width: clamp(5.5rem, 4.5rem + 4vw, 8.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  padding: var(--bji-space-3);
  box-shadow: var(--bji-shadow-md);
}
.cv2-hero-logo img { max-height: 100%; object-fit: contain; }

.cv2-hero-title {
  font-size: var(--bji-text-4xl);
  font-weight: var(--bji-weight-black);
  line-height: var(--bji-leading-tight);
  margin: 0 0 var(--bji-space-2);
  color: var(--bji-navy-900);
}

.cv2-hero-tagline {
  margin: 0;
  color: var(--bji-text-muted);
  font-size: var(--bji-text-lg);
  max-width: 40rem;
}

.cv2-geo {
  display: inline-flex;
  align-items: center;
  gap: var(--bji-space-2);
  padding: 0.45em 1em;
  border-radius: var(--bji-radius-pill);
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-medium);
}
.cv2-geo--yes { background: var(--bji-green-100); color: var(--bji-green-700); border: 1px solid rgb(31 162 84 / 0.35); }
.cv2-geo--no  { background: var(--bji-red-100); color: var(--bji-red-700); border: 1px solid rgb(221 61 61 / 0.35); }

/* row of hero pills: one gap governs spacing whether inline or wrapped */
.cv2-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bji-space-3);
  margin-top: var(--bji-space-4);
}

/* ---- Shared rep avatar (face + verified check) ---- */
.cv2-rep-avatar {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: 2.9rem;
  height: 2.9rem;
}
/* contain + white plate: rep avatars are user uploads and often wide logos;
   contain letterboxes those instead of clipping, and is a no-op for the
   usual square face avatars */
.cv2-rep-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  object-fit: contain;
  background: #fff;
}
.cv2-rep-avatar--lg { width: 4.5rem; height: 4.5rem; }
/* (the --brand logo-fallback avatar variant was retired 2026-07-09: rep
   cards always show the assigned rep user's avatar now) */
.cv2-rep-verified {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bji-green-500);
  color: #fff;
  font-size: 0.7rem;
  font-weight: var(--bji-weight-bold);
  border: 2px solid var(--bji-surface);
}
.cv2-rep-avatar--lg .cv2-rep-verified { width: 1.5rem; height: 1.5rem; font-size: 0.85rem; }

/* ---- Hero rep callout (name + face) ---- */
.cv2-rep-callout {
  display: flex;
  align-items: center;
  gap: var(--bji-space-3);
  margin-top: var(--bji-space-4);
  padding: var(--bji-space-3) var(--bji-space-4);
  max-width: 30rem;
  background: var(--bji-surface-raised);
  border: 1px solid var(--bji-blue-200);
  border-left: 3px solid var(--bji-brand);
  border-radius: var(--bji-radius-md);
  box-shadow: var(--bji-shadow-sm);
  color: var(--bji-text);
  transition: box-shadow var(--bji-duration) var(--bji-ease), border-color var(--bji-duration) var(--bji-ease);
}
.cv2-rep-callout:hover { text-decoration: none; box-shadow: var(--bji-shadow-md); border-color: var(--bji-blue-400); }
.cv2-rep-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cv2-rep-kicker {
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bji-blue-700);
}
.cv2-rep-name { font-weight: var(--bji-weight-semibold); color: var(--bji-navy-900); }
.cv2-rep-cta { font-size: var(--bji-text-xs); color: var(--bji-text-muted); }
.cv2-rep-callout:hover .cv2-rep-cta { color: var(--bji-link); }

/* pros/cons inside hero */
.cv2-hero-proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bji-space-5);
  margin-top: var(--bji-space-6);
}
.cv2-hero-proscons h3 {
  font-size: var(--bji-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--bji-space-3);
  color: var(--bji-text-faint);
}
.cv2-hero-proscons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bji-space-3); }
.cv2-hero-proscons li {
  position: relative;
  padding-left: 1.7rem;
  font-size: var(--bji-text-sm);
  line-height: var(--bji-leading-snug);
  color: var(--bji-text);
}
.cv2-hero-proscons li::before {
  position: absolute; left: 0; top: 0;
  font-weight: var(--bji-weight-bold);
}
.cv2-pros li::before { content: "✓"; color: var(--bji-green-500); }
.cv2-cons li::before { content: "✕"; color: var(--bji-red-500); }

/* rating card */
.cv2-rating-card {
  background: var(--bji-surface-raised);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  padding: var(--bji-space-5);
  box-shadow: var(--bji-shadow-md);
}

.cv2-rating-headline {
  display: flex;
  align-items: center;
  gap: var(--bji-space-4);
  margin-bottom: var(--bji-space-4);
}

.cv2-rating-score {
  flex: 0 0 auto;
  width: 4.4rem;
  height: 4.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--bji-radius-md);
  font-size: var(--bji-text-2xl);
  font-weight: var(--bji-weight-black);
  color: #fff;
}
.cv2-rating-score--great { background: var(--bji-rating-great); }
.cv2-rating-score--good { background: var(--bji-rating-good); }
.cv2-rating-score--average { background: var(--bji-rating-average); }
.cv2-rating-score--poor { background: var(--bji-rating-poor); }

.cv2-rating-label { font-weight: var(--bji-weight-semibold); color: var(--bji-navy-900); }
.cv2-rating-sub { font-size: var(--bji-text-xs); color: var(--bji-text-faint); }

/* player feedback counts inside the rating card */
.cv2-rating-community {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bji-space-2);
  margin: 0 0 var(--bji-space-4);
  padding: var(--bji-space-2) 0;
  border-block: 1px solid var(--bji-border);
  font-size: var(--bji-text-xs);
  color: var(--bji-text-muted);
}
.cv2-rating-community:hover { color: var(--bji-link); text-decoration: none; }
.cv2-rating-community b { color: var(--bji-text); }

.cv2-subratings { display: grid; gap: var(--bji-space-3); margin-bottom: var(--bji-space-5); }
.cv2-subrating { display: grid; grid-template-columns: 1fr auto; gap: var(--bji-space-1) var(--bji-space-3); font-size: var(--bji-text-xs); }
.cv2-subrating .name { color: var(--bji-text-muted); }
.cv2-subrating .val { color: var(--bji-navy-900); font-weight: var(--bji-weight-semibold); }
.cv2-subrating .bar {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: var(--bji-radius-pill);
  background: var(--bji-gray-200);
  overflow: hidden;
}
.cv2-subrating .bar i {
  display: block;
  height: 100%;
  width: calc(var(--score) / 5 * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bji-blue-400), var(--bji-blue-500));
}

.cv2-rating-card .cv2-btn { width: 100%; }

.cv2-bonus-teaser {
  margin: 0 0 var(--bji-space-4);
  padding: var(--bji-space-3) var(--bji-space-4);
  border-radius: var(--bji-radius-md);
  background: var(--bji-blue-050);
  border: 1px dashed var(--bji-blue-300);
  text-align: center;
}
.cv2-bonus-teaser strong { display: block; color: var(--bji-navy-900); font-size: var(--bji-text-lg); }
.cv2-bonus-teaser span { font-size: var(--bji-text-xs); color: var(--bji-text-muted); }

.cv2-tc-note {
  margin-top: var(--bji-space-3);
  font-size: var(--bji-text-xs);
  color: var(--bji-text-faint);
  text-align: center;
}
.cv2-tc-note a { color: inherit; text-decoration: underline; }

/* Sticky section nav (.cv2-toc) moved to css/v2-components.css (shared with live-game v2 pages). */

/* ---------- Cards, generic ---------- */
.cv2-card {
  background: var(--bji-surface-raised);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  padding: var(--bji-space-5);
}

/* ---------- Quick facts ---------- */
/* accepted-countries expander in the quick facts */
.cv2-show-more {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: var(--bji-link);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cv2-show-more:hover { color: var(--bji-cta-hover, var(--bji-link)); }

.cv2-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--bji-space-4);
}
.cv2-fact {
  display: flex;
  gap: var(--bji-space-3);
  align-items: flex-start;
  background: var(--bji-surface-sunken);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-4);
}
.cv2-fact-icon {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--bji-radius-sm);
  background: var(--bji-blue-050);
  color: var(--bji-blue-600);
  font-size: 1.1rem;
}
.cv2-fact dt {
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bji-text-faint);
  margin: 0;
}
.cv2-fact dd {
  margin: 2px 0 0;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-medium);
  line-height: var(--bji-leading-snug);
}
.cv2-fact dd small { display: block; font-weight: var(--bji-weight-regular); color: var(--bji-text-muted); }

/* payout timeline inside quick facts */
.cv2-payout-tiers { display: grid; gap: var(--bji-space-1); margin: 2px 0 0; padding: 0; list-style: none; font-size: var(--bji-text-xs); color: var(--bji-text-muted); }
.cv2-payout-tiers b { color: var(--bji-text); font-weight: var(--bji-weight-semibold); }

/* ---------- Bonuses ---------- */
.cv2-bonus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--bji-space-4);
}

.cv2-bonus-card {
  display: flex;
  flex-direction: column;
  background: var(--bji-surface-raised);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--bji-duration) var(--bji-ease), border-color var(--bji-duration) var(--bji-ease);
}
.cv2-bonus-card:hover { box-shadow: var(--bji-shadow-md); border-color: var(--bji-border-strong); }

.cv2-bonus-card--featured { border-color: var(--bji-blue-300); box-shadow: 0 0 0 1px var(--bji-blue-300), var(--bji-shadow-md); }

.cv2-bonus-type {
  align-self: flex-start;
  margin: var(--bji-space-4) var(--bji-space-4) 0;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  padding: 0.25em 0.9em;
  border-radius: var(--bji-radius-pill);
  background: var(--bji-blue-050);
  color: var(--bji-blue-700);
}
.cv2-bonus-type--nodeposit { background: var(--bji-green-100); color: var(--bji-green-700); }
.cv2-bonus-type--sports { background: var(--bji-amber-100); color: var(--bji-amber-700); }

.cv2-bonus-name {
  font-size: var(--bji-text-lg);
  font-weight: var(--bji-weight-bold);
  line-height: var(--bji-leading-snug);
  margin: var(--bji-space-2) var(--bji-space-4) var(--bji-space-3);
  color: var(--bji-navy-900);
}

/* welcome-package ladder steps inside a bonus card */
.cv2-bonus-steps {
  list-style: none;
  counter-reset: bstep;
  margin: 0 var(--bji-space-4) var(--bji-space-3);
  padding: 0;
  display: grid;
  gap: var(--bji-space-2);
}
.cv2-bonus-steps li {
  counter-increment: bstep;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  padding-left: 1.9rem;
  font-size: var(--bji-text-sm);
}
.cv2-bonus-steps li::before {
  content: counter(bstep);
  position: absolute; left: 0; top: 0.1em;
  width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bji-blue-050);
  color: var(--bji-blue-700);
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
}
.cv2-bonus-steps b { font-weight: var(--bji-weight-semibold); }
.cv2-bonus-steps small { margin-left: auto; color: var(--bji-text-faint); white-space: nowrap; }

.cv2-bonus-terms {
  margin: auto 0 0;
  padding: var(--bji-space-3) var(--bji-space-4);
  border-top: 1px dashed var(--bji-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bji-space-2) var(--bji-space-4);
  font-size: var(--bji-text-xs);
  background: var(--bji-surface-sunken);
}
.cv2-bonus-terms div { display: flex; justify-content: space-between; gap: var(--bji-space-2); }
.cv2-bonus-terms dt { color: var(--bji-text-faint); font-weight: var(--bji-weight-regular); margin: 0; }
.cv2-bonus-terms dd { margin: 0; font-weight: var(--bji-weight-semibold); text-align: right; }

.cv2-bonus-actions {
  display: flex;
  gap: var(--bji-space-2);
  padding: var(--bji-space-4);
}
.cv2-bonus-actions .cv2-btn--cta { flex: 1; }

/* ---------- Payments ---------- */
.cv2-pay-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bji-space-5);
}
/* a lone card (deposit-only casino, no payout-times data) spans the row */
.cv2-pay-cols > .cv2-card:only-child { grid-column: 1 / -1; }
.cv2-logo-wall {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bji-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cv2-logo-wall li a {
  display: flex;
  align-items: center;
  gap: var(--bji-space-2);
  padding: var(--bji-space-2) var(--bji-space-3);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  background: var(--bji-surface-raised);
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-medium);
  color: var(--bji-text-muted);
  transition: border-color var(--bji-duration) var(--bji-ease);
}
.cv2-logo-wall li a:hover { border-color: var(--bji-blue-300); text-decoration: none; color: var(--bji-link); }
.cv2-logo-wall img { height: 1.4rem; width: auto; max-width: 5.5rem; object-fit: contain; }

/* provider wall: slightly larger logos (the *_dark SVGs are for light surfaces) */
.cv2-logo-wall--dark img { height: 1.6rem; max-width: 7rem; }

/* ---------- Gaming options ---------- */
.cv2-game-types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bji-space-2);
  padding: 0;
  margin: 0 0 var(--bji-space-6);
  list-style: none;
}
.cv2-game-types li {
  display: inline-flex;
  align-items: center;
  gap: var(--bji-space-2);
  padding: 0.45em 1em;
  border-radius: var(--bji-radius-pill);
  background: var(--bji-blue-050);
  color: var(--bji-blue-800);
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-medium);
}
.cv2-game-types li::before { content: "✓"; color: var(--bji-green-500); font-weight: var(--bji-weight-bold); }
/* game types the casino does NOT offer */
.cv2-game-types li.off {
  background: var(--bji-gray-100);
  color: var(--bji-text-faint);
}
.cv2-game-types li.off::before { content: "✕"; color: var(--bji-gray-400); }

/* ---------- Live dealer ---------- */
.cv2-live {
  background: linear-gradient(180deg, var(--bji-gray-050), transparent 22rem);
  border-radius: var(--bji-radius-xl);
  padding: var(--bji-space-6) var(--bji-space-5);
}
.cv2-live-provider {
  font-size: var(--bji-text-sm);
  color: var(--bji-text-muted);
  margin: calc(-1 * var(--bji-space-3)) 0 var(--bji-space-5);
}
.cv2-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--bji-space-4);
}
.cv2-live-card {
  background: var(--bji-surface-raised);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cv2-live-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.cv2-live-card h3 {
  font-size: var(--bji-text-base);
  font-weight: var(--bji-weight-bold);
  margin: var(--bji-space-3) var(--bji-space-4) var(--bji-space-1);
}
.cv2-live-card h3 a { color: var(--bji-navy-900); }
.cv2-live-specs {
  margin: 0 var(--bji-space-4) var(--bji-space-3);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px var(--bji-space-3);
  font-size: var(--bji-text-xs);
}
.cv2-live-specs div { display: flex; justify-content: space-between; gap: var(--bji-space-2); }
.cv2-live-specs dt { color: var(--bji-text-faint); margin: 0; }
.cv2-live-specs dd { margin: 0; font-weight: var(--bji-weight-semibold); text-align: right; }
.cv2-live-side {
  margin: auto var(--bji-space-4) var(--bji-space-4);
  font-size: var(--bji-text-xs);
  color: var(--bji-text-muted);
}
.cv2-live-side b { color: var(--bji-text); }

/* ---------- Review body: restyle legacy vocabulary ---------- */
.cv2-review-body { max-width: none; }

.cv2-review-body > p,
.cv2-review-body > ul,
.cv2-review-body > ol,
.cv2-review-body > h2,
.cv2-review-body > h3,
.cv2-review-body > div,
.cv2-review-body > figure,
.cv2-review-body > table,
.cv2-review-body > hr {
  /* same box as .full-width-section .container: 46rem text measure on
     desktop, gutter padding keeps prose off the screen edge on mobile */
  max-width: calc(var(--bji-prose-width) + 2 * var(--bji-gutter));
  margin-inline: auto;
  padding-inline: var(--bji-gutter);
}

.cv2-review-body p { margin-block: var(--bji-space-4); }

.cv2-review-body h2.big.under-line,
.cv2-review-body h2.big {
  font-size: var(--bji-text-2xl);
  font-weight: var(--bji-weight-bold);
  line-height: var(--bji-leading-tight);
  color: var(--bji-navy-900);
  margin: var(--bji-space-7) auto var(--bji-space-4);
}
.cv2-review-body h2.big.under-line::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  border-radius: var(--bji-radius-pill);
  background: var(--bji-brand);
  margin-top: var(--bji-space-2);
}
.cv2-review-body h3.big { font-size: var(--bji-text-xl); font-weight: var(--bji-weight-bold); color: var(--bji-navy-900); }

/* legacy full-width alternating sections become soft-tinted bands */
.cv2-review-body .full-width-section {
  max-width: none;
  margin-block: var(--bji-space-6);
  padding-block: var(--bji-space-6);
  padding-inline: 0; /* full-bleed band; its inner .container carries the gutter */
}
.cv2-review-body .full-width-section.gray-container { background: var(--bji-surface-sunken); }
.cv2-review-body .full-width-section .container {
  /* padding is inside the border-box, so widen by the gutter to keep the
     text measure identical to un-banded prose (46rem everywhere) */
  max-width: calc(var(--bji-prose-width) + 2 * var(--bji-gutter));
  margin-inline: auto;
  padding-inline: var(--bji-gutter);
}

/* cards */
.cv2-review-body .card {
  background: var(--bji-surface-raised);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  box-shadow: var(--bji-shadow-sm);
}
.cv2-review-body .card.p20 { padding: var(--bji-space-5); }
.cv2-review-body .card--outline { box-shadow: none; }
.cv2-review-body .card--pros { border-top: 4px solid var(--bji-green-500); }
.cv2-review-body .card--cons { border-top: 4px solid var(--bji-red-500); }
.cv2-review-body .card--neutral-accent { border-left: 4px solid var(--bji-blue-400); background: var(--bji-blue-050); border-color: var(--bji-blue-200); }
.cv2-review-body .card--accent { border-left: 4px solid var(--bji-brand); }

/* callouts */
.cv2-review-body .bs-callout {
  border: 1px solid var(--bji-border);
  border-left-width: 4px;
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-4) var(--bji-space-5);
  margin-block: var(--bji-space-5);
  background: var(--bji-surface-raised);
}
.cv2-review-body .bs-callout p { margin: 0; }
.cv2-review-body .bs-callout p + p { margin-top: var(--bji-space-3); }
.cv2-review-body .bs-callout-warning { border-left-color: var(--bji-amber-500); background: var(--bji-amber-100); }
.cv2-review-body .bs-callout-info { border-left-color: var(--bji-blue-500); background: var(--bji-blue-050); }
.cv2-review-body .bs-callout-success { border-left-color: var(--bji-green-500); background: var(--bji-green-100); }
.cv2-review-body .bs-callout-danger { border-left-color: var(--bji-red-500); background: var(--bji-red-100); }

/* lists */
.cv2-review-body .check-list { list-style: none; padding: 0; display: grid; gap: var(--bji-space-2); }
.cv2-review-body .check-list li { position: relative; padding-left: 1.8rem; }
.cv2-review-body .check-list li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--bji-green-500);
  font-weight: var(--bji-weight-bold);
}
.cv2-review-body .check-list--cross li::before { content: "✕"; color: var(--bji-red-500); }

.cv2-review-body .step-list { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--bji-space-3); }
.cv2-review-body .step-list li { position: relative; padding-left: 2.6rem; counter-increment: step; }
.cv2-review-body .step-list li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0.05em;
  width: 1.8rem; height: 1.8rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bji-blue-050);
  color: var(--bji-blue-700);
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-bold);
}

/* tables */
.cv2-review-body table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bji-text-sm);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  overflow: hidden;
}
.cv2-review-body table.table th,
.cv2-review-body table.table td {
  padding: var(--bji-space-3) var(--bji-space-4);
  border-bottom: 1px solid var(--bji-border);
  text-align: left;
  vertical-align: top;
}
.cv2-review-body table.table thead th,
.cv2-review-body table.table tr:first-child th {
  background: var(--bji-navy-900);
  color: #fff;
  font-weight: var(--bji-weight-semibold);
}
.cv2-review-body table.table tbody tr:nth-child(even) { background: var(--bji-surface-sunken); }
.cv2-review-body table.table tr:last-child td { border-bottom: 0; }

/* colour words */
.cv2-review-body .green { color: var(--bji-green-600); font-weight: var(--bji-weight-semibold); }
.cv2-review-body .red { color: var(--bji-red-500); font-weight: var(--bji-weight-semibold); }

/* two-col rows */
.cv2-review-body .wpg-inner-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bji-space-4);
}
.cv2-review-body .wpg-col { min-width: 0; }

/* screenshots */
.cv2-review-body img { border-radius: var(--bji-radius-md); box-shadow: var(--bji-shadow-md); }
.cv2-review-body .mobile-screenshots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bji-space-4);
  margin-block: var(--bji-space-5);
}
.cv2-review-body .mobile-screenshots img { margin: 0; }
/* wpautop inserts <br> between the images; they would occupy grid cells */
.cv2-review-body .mobile-screenshots br { display: none; }

.cv2-review-body .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--bji-border);
  margin-block: var(--bji-space-6);
}

/* FAQ (.cv2-faq) moved to css/v2-components.css (shared; now full container width, owner call 2026-07-11). */

/* ---------- For Blackjack Players (intelligence layer) ---------- */
.cv2-bj {
  color: var(--bji-text-inverse);
  background:
    radial-gradient(48rem 22rem at 88% -10%, rgb(31 162 84 / 0.22), transparent 60%),
    radial-gradient(40rem 20rem at 0% 120%, rgb(6 152 255 / 0.16), transparent 55%),
    linear-gradient(160deg, var(--bji-navy-900), var(--bji-navy-950));
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: var(--bji-radius-lg);
  box-shadow: var(--bji-shadow-lg);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}
.cv2-kicker--invert { color: #6fd39a; }

.cv2-bj-head {
  display: flex;
  gap: var(--bji-space-6);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: var(--bji-space-5);
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}
.cv2-bj-head-copy { flex: 1 1 22rem; }
.cv2-bj-head h2 { margin: var(--bji-space-2) 0; font-size: var(--bji-text-3xl); color: #fff; }
.cv2-bj-head p { margin: 0; max-width: 42rem; color: rgb(255 255 255 / 0.78); }
.cv2-bj-head em { color: #fff; font-style: italic; }

.cv2-bj-score { display: flex; align-items: center; gap: var(--bji-space-4); flex: 0 0 auto; }
.cv2-bj-score-ring {
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: conic-gradient(#1fa254 0 82%, rgb(255 255 255 / 0.14) 82% 100%);
  position: relative;
}
.cv2-bj-score-ring::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border-radius: 50%;
  background: var(--bji-navy-900);
}
.cv2-bj-score-num { position: relative; font-size: 1.9rem; font-weight: var(--bji-weight-black); color: #fff; line-height: 1; }
.cv2-bj-score-den { position: relative; font-size: var(--bji-text-xs); color: rgb(255 255 255 / 0.7); }
.cv2-bj-score-label { margin: 0; font-size: var(--bji-text-sm); color: rgb(255 255 255 / 0.72); max-width: 12rem; }
.cv2-bj-score-label b { color: #fff; }

.cv2-bj-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--bji-space-4);
  margin: var(--bji-space-6) 0;
}
.cv2-bj-card {
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-5);
}
.cv2-bj-card h3 { margin: 0 0 var(--bji-space-3); font-size: var(--bji-text-sm); text-transform: uppercase; letter-spacing: 0.05em; color: rgb(255 255 255 / 0.6); }
.cv2-bj-checks { list-style: none; margin: 0 0 var(--bji-space-3); padding: 0; display: flex; flex-direction: column; gap: var(--bji-space-2); }
.cv2-bj-checks li { position: relative; padding-left: 1.6rem; font-size: var(--bji-text-sm); color: rgb(255 255 255 / 0.9); }
.cv2-bj-checks li::before { position: absolute; left: 0; font-weight: var(--bji-weight-bold); }
.cv2-bj-checks li.ok::before { content: "✓"; color: #6fd39a; }
.cv2-bj-checks li.bad::before { content: "✕"; color: #ff8c8c; }
.cv2-bj-checks li.meh::before { content: "•"; color: rgb(255 255 255 / 0.5); }
.cv2-bj-metric { margin: 0; font-size: var(--bji-text-sm); color: rgb(255 255 255 / 0.75); }
.cv2-bj-metric b { color: #fff; }
.cv2-bj-metric--warn { color: #ffcf99; }
.cv2-bj-metric--warn b { color: #ffb26b; }
.cv2-bj-table-name { margin: 0 0 2px; font-size: var(--bji-text-lg); font-weight: var(--bji-weight-bold); color: #fff; }
.cv2-bj-link { display: inline-block; margin-top: var(--bji-space-3); color: #7cc4ff; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-medium); }
.cv2-bj-link:hover { color: #a8d8ff; }

.cv2-bj-strategy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
  padding-top: var(--bji-space-6);
  border-top: 1px solid rgb(255 255 255 / 0.1);
}
.cv2-bj-strategy h3 { margin: var(--bji-space-2) 0 var(--bji-space-3); font-size: var(--bji-text-xl); color: #fff; }
.cv2-bj-strategy > .cv2-bj-strategy-copy p { color: rgb(255 255 255 / 0.8); }
.cv2-bj-plays { list-style: none; margin: 0 0 var(--bji-space-5); padding: 0; display: flex; flex-direction: column; gap: var(--bji-space-2); }
.cv2-bj-plays li { position: relative; padding-left: 1.4rem; font-size: var(--bji-text-sm); color: rgb(255 255 255 / 0.9); }
.cv2-bj-plays li::before { content: "♠"; position: absolute; left: 0; color: #6fd39a; font-size: 0.8em; }
.cv2-bj-plays b { color: #fff; }
.cv2-bj-strategy-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--bji-space-2); }

/* strategy chart */
.cv2-bj-chart { margin: 0; background: var(--bji-surface); border-radius: var(--bji-radius-md); padding: var(--bji-space-4); box-shadow: var(--bji-shadow-md); }
.cv2-sc {
  display: grid;
  grid-template-columns: 1.7rem repeat(10, 1fr);
  gap: 2px;
}
.cv2-sc-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: clamp(0.6rem, 0.4rem + 0.5vw, 0.78rem);
  font-weight: var(--bji-weight-semibold);
  border-radius: 3px;
  color: var(--bji-navy-900);
}
.cv2-sc-corner { font-size: 0.55rem; color: var(--bji-text-faint); font-weight: var(--bji-weight-medium); }
.cv2-sc-dh, .cv2-sc-rh { background: var(--bji-gray-100); color: var(--bji-text-muted); font-weight: var(--bji-weight-bold); }
.cv2-sc-cell.h { background: #fde2e2; color: #b42318; }
.cv2-sc-cell.s { background: #d6f0e0; color: #1f7a45; }
.cv2-sc-cell.d { background: #d8e9fb; color: #1560bd; }
.cv2-bj-chart figcaption { display: flex; flex-wrap: wrap; gap: var(--bji-space-2) var(--bji-space-4); justify-content: space-between; align-items: center; margin-top: var(--bji-space-3); font-size: var(--bji-text-xs); color: var(--bji-text-muted); }
.cv2-sc-legend { display: inline-flex; align-items: center; gap: 0.4rem; }
.cv2-sc-legend b { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 3px; font-size: 0.7rem; }
.cv2-sc-legend b.h { background: #fde2e2; color: #b42318; }
.cv2-sc-legend b.s { background: #d6f0e0; color: #1f7a45; }
.cv2-sc-legend b.d { background: #d8e9fb; color: #1560bd; }

@media (max-width: 760px) {
  .cv2-bj-strategy { grid-template-columns: minmax(0, 1fr); }
  .cv2-bj-strategy-copy { min-width: 0; }
  .cv2-bj-chart { order: -1; padding: var(--bji-space-2); }
  .cv2-sc { grid-template-columns: 1.3rem repeat(10, 1fr); gap: 1px; }
  .cv2-bj-score { flex-direction: column; align-items: flex-start; gap: var(--bji-space-3); }
  .cv2-bj-score-label { max-width: none; }
}

/* ---------- Resolution Center ---------- */
.cv2-resolution {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
  margin-bottom: var(--bji-space-6);
  padding: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  border: 1px solid var(--bji-blue-200);
  border-radius: var(--bji-radius-lg);
  background:
    radial-gradient(36rem 14rem at 88% -30%, rgb(6 152 255 / 0.08), transparent 60%),
    var(--bji-surface-raised);
  box-shadow: var(--bji-shadow-sm);
}
.cv2-resolution-main { display: flex; gap: var(--bji-space-4); align-items: flex-start; }
.cv2-resolution-main h3 {
  margin: 0;
  font-size: var(--bji-text-xl);
  display: flex;
  align-items: center;
  gap: var(--bji-space-2);
  flex-wrap: wrap;
}
.cv2-rep-badge {
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2em 0.6em;
  border-radius: var(--bji-radius-pill);
  background: var(--bji-green-100);
  color: var(--bji-green-700);
}
.cv2-rep-role { margin: 2px 0 var(--bji-space-3); font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.cv2-rep-quote {
  margin: 0;
  font-size: var(--bji-text-sm);
  font-style: italic;
  color: var(--bji-text);
  border-left: 3px solid var(--bji-blue-200);
  padding-left: var(--bji-space-3);
}
/* generic fallback statement: not a personal quote, so no italics/quote marks */
.cv2-rep-quote--statement { font-style: normal; color: var(--bji-text-muted); }
.cv2-resolution-side {
  display: flex;
  flex-direction: column;
  gap: var(--bji-space-3);
}
.cv2-resolution-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bji-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.cv2-resolution-stats li {
  display: flex;
  flex-direction: column;
  padding: var(--bji-space-3) var(--bji-space-1);
  background: var(--bji-surface-sunken);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-sm);
}
.cv2-resolution-stats b { font-size: var(--bji-text-base); color: var(--bji-navy-900); }
.cv2-resolution-stats span { font-size: 0.68rem; color: var(--bji-text-faint); }
.cv2-live-dot { display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; color: var(--bji-green-600) !important; }
.cv2-live-dot::before {
  content: "";
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: var(--bji-green-500);
  box-shadow: 0 0 0 0 rgb(31 162 84 / 0.5);
  animation: cv2-pulse 2s var(--bji-ease) infinite;
}
@keyframes cv2-pulse {
  0% { box-shadow: 0 0 0 0 rgb(31 162 84 / 0.5); }
  70% { box-shadow: 0 0 0 0.5em rgb(31 162 84 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(31 162 84 / 0); }
}
@media (prefers-reduced-motion: reduce) { .cv2-live-dot::before { animation: none; } }
.cv2-resolution-side .cv2-btn { width: 100%; }
.cv2-resolution-how { text-align: center; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-medium); }

@media (max-width: 760px) {
  .cv2-resolution { grid-template-columns: 1fr; }
}

/* ---------- Community tabs ---------- */
.cv2-tabs {
  border-bottom: 2px solid var(--bji-border);
  display: flex;
  gap: var(--bji-space-2);
  /* many tabs (live casino) can exceed a phone width; contain the scroll
     here instead of letting the row push the whole page wide */
  overflow-x: auto;
  scrollbar-width: none;
}
.cv2-tabs::-webkit-scrollbar { display: none; }
.cv2-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: var(--bji-space-3) var(--bji-space-4);
  font: inherit;
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-text-muted);
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}
.cv2-tab[aria-selected="true"] { color: var(--bji-link); border-bottom-color: var(--bji-brand); }
.cv2-tab .count {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  padding: 0 0.4em;
  margin-left: 0.4em;
  border-radius: var(--bji-radius-pill);
  background: var(--bji-gray-100);
  color: var(--bji-text-muted);
  font-size: var(--bji-text-xs);
}
.cv2-tabpanel { padding-block: var(--bji-space-5); }
.cv2-tabpanel[hidden] { display: none; }

.cv2-comment {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--bji-space-3);
  padding: var(--bji-space-4);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  margin-bottom: var(--bji-space-3);
}
.cv2-comment-avatar {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bji-blue-050);
  color: var(--bji-blue-700);
  font-weight: var(--bji-weight-bold);
}
.cv2-comment-meta { font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
.cv2-comment p { margin: var(--bji-space-2) 0 0; font-size: var(--bji-text-sm); }

/* ---------- Related casinos ---------- */
.cv2-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--bji-space-4);
}
.cv2-related-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--bji-space-3);
  background: var(--bji-surface-raised);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  padding: var(--bji-space-5);
  transition: box-shadow var(--bji-duration) var(--bji-ease);
}
.cv2-related-card:hover { box-shadow: var(--bji-shadow-md); }
.cv2-related-logo {
  position: relative;
  height: 4.5rem;
  width: 100%;
  display: block;
  background: var(--bji-navy-900);
  border-radius: var(--bji-radius-md);
}
/* identical bounding box for every logo so centering is uniform across cards.
   Absolute fill + calc sizes rather than percentage img heights: Safari
   resolves %-heights inside grid boxes inconsistently (logos rendered
   oversized and offset), and object-fit:contain centers deterministically. */
.cv2-related-logo img {
  position: absolute;
  inset: var(--bji-space-3) var(--bji-space-5);
  width: calc(100% - 2 * var(--bji-space-5));
  height: calc(100% - 2 * var(--bji-space-3));
  object-fit: contain;
}
.cv2-related-card h3 { margin: 0; font-size: var(--bji-text-base); }
.cv2-related-card h3 a { color: var(--bji-navy-900); }
.cv2-related-rating {
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-bold);
  color: var(--bji-green-600);
}
.cv2-related-why { margin: 0; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
.cv2-related-card .cv2-btn { width: 100%; margin-top: auto; }

/* ---------- Bonus modal ---------- */
.cv2-modal {
  border: 0;
  border-radius: var(--bji-radius-lg);
  padding: 0;
  max-width: 26rem;
  width: calc(100vw - 2rem);
  box-shadow: var(--bji-shadow-lg);
}
.cv2-modal::backdrop { background: rgb(9 15 38 / 0.65); backdrop-filter: blur(2px); }
.cv2-modal-head {
  background: var(--bji-navy-900);
  color: #fff;
  padding: var(--bji-space-5);
  text-align: center;
}
.cv2-modal-head h3 { margin: 0; font-size: var(--bji-text-xl); }
.cv2-modal-body { padding: var(--bji-space-5); text-align: center; }
.cv2-modal-body .cv2-btn { width: 100%; margin-top: var(--bji-space-4); }
.cv2-modal-close {
  position: absolute;
  top: var(--bji-space-3); right: var(--bji-space-3);
  background: rgb(255 255 255 / 0.15);
  border: 0;
  color: #fff;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
}

/* ---------- Mobile sticky CTA ---------- */
.cv2-sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  gap: var(--bji-space-3);
  align-items: center;
  padding: var(--bji-space-3) var(--bji-gutter);
  padding-bottom: calc(var(--bji-space-3) + env(safe-area-inset-bottom));
  background: var(--bji-navy-900);
  box-shadow: 0 -4px 16px rgb(9 15 38 / 0.3);
}
.cv2-sticky-cta .score { color: #fff; font-weight: var(--bji-weight-black); font-size: var(--bji-text-lg); }
.cv2-sticky-cta .name { color: var(--bji-text-inverse-muted); font-size: var(--bji-text-xs); line-height: 1.2; }
.cv2-sticky-cta .cv2-btn { flex: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* verdict card directly after the title block; pros/cons follow */
  .cv2-hero-grid { grid-template-columns: 1fr; grid-template-areas: "head" "card" "pros"; }
  .cv2-pay-cols { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cv2-hero-proscons { grid-template-columns: 1fr; }
  .cv2-hero-ident { flex-direction: row; align-items: center; }
  .cv2-review-body .wpg-inner-row { grid-template-columns: 1fr; }
  /* one-per-view swipe strip instead of unreadable 3-up thumbnails */
  .cv2-review-body .mobile-screenshots {
    display: flex;
    gap: var(--bji-space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .cv2-review-body .mobile-screenshots img {
    flex: 0 0 64%;
    scroll-snap-align: center;
  }
  /* wide in-review tables scroll sideways instead of crushing columns */
  .cv2-review-body table.table { display: block; overflow-x: auto; }
  .cv2-bonus-grid { grid-template-columns: 1fr; }
  .cv2-sticky-cta { display: flex; }
  /* the bottom sticky CTA bar already carries Claim Bonus on mobile */
  .cv2-toc .cv2-toc-cta { display: none; }
}

/* chips whose logos are white SVGs need a dark plate */
.cv2-logo-wall li a.is-dark { background: var(--bji-navy-900); border-color: var(--bji-navy-700); color: var(--bji-gray-300); }

/* live casino tabs + imageless game cards */
.cv2-tabs--live { margin-bottom: var(--bji-space-5); }
.cv2-live .cv2-tabpanel { padding-block: 0; }
.cv2-live-card--noimg { padding-top: var(--bji-space-2); border-top: 4px solid var(--bji-blue-200); }
.cv2-live-card--noimg h3 { margin-top: var(--bji-space-3); }
.cv2-live-footnote {
  margin: var(--bji-space-4) 0 0;
  font-size: var(--bji-text-xs);
  color: var(--bji-text-faint);
}

/* ============================================================
   Theme integration (WordPress build only; not in the mockup)
   ============================================================ */

/* closed-casino banner */
.cv2-closed-banner {
  background: var(--bji-red-100);
  border: 1px solid var(--bji-red-500);
  color: var(--bji-red-700);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-4) var(--bji-space-5);
  margin-bottom: var(--bji-space-5);
}

/* complaints endpoint hero */
.cv2-hero--slim { padding-block: var(--bji-space-6); }
.cv2-hero--slim .cv2-hero-title { margin-bottom: var(--bji-space-4); }
.cv2-hero--slim p { max-width: var(--bji-prose-width); }
.cv2-complaint-steps { max-width: var(--bji-prose-width); padding-left: 1.4em; display: grid; gap: var(--bji-space-2); }

/* complaint notice above the WpDiscuz form */
.cv2-complaint-notice {
  background: var(--bji-amber-100);
  border-left: 3px solid var(--bji-amber-500);
  border-radius: var(--bji-radius-sm);
  padding: var(--bji-space-4) var(--bji-space-5);
  margin-bottom: var(--bji-space-5);
  font-size: var(--bji-text-sm);
}
.cv2-complaint-notice p { margin: 0 0 var(--bji-space-2); }
.cv2-complaint-notice p:last-child { margin-bottom: 0; }
/* the notice is complaints-tab only: community.php stamps data-active-tab
   server-side, casino-v2-comments.js keeps it in sync on tab switches */
.cv2-comments .cv2-complaint-notice { display: none; }
.cv2-comments[data-active-tab="complaint"] .cv2-complaint-notice { display: block; }

/* WpDiscuz mounts here. Plain tab panel per the mockup (no outer card; each
   comment is its own card). The legacy wpDiscuz form custom CSS (stored in
   the form's wpd_form_custom_css meta, shared with legacy pages) paints this
   element white via #comment-section-content, so the ID is needed to win. */
.cv2-comments { padding-top: var(--bji-space-4); }
#comment-section-content.cv2-comments { background: transparent; }

/* bonus code line on cards */
.cv2-bonus-code { font-size: var(--bji-text-sm); color: var(--bji-text-muted); margin: 0 0 var(--bji-space-3); padding-inline: var(--bji-space-4); }
.cv2-bonus-code b { cursor: pointer; border-bottom: 1px dashed var(--bji-border-strong); }
.cv2-bonus-code b.is-copied::after { content: " copied!"; color: var(--bji-green-600); font-weight: var(--bji-weight-medium); }
.cv2-bonus-archive-link { text-align: center; margin-top: var(--bji-space-5); }

/* collapsed market-variant offers (availability_conditions country tags) */
.cv2-bonus-regions { margin-top: var(--bji-space-5); border: 1px solid var(--bji-border); border-radius: var(--bji-radius-lg); background: var(--bji-surface); }
.cv2-bonus-regions summary { cursor: pointer; padding: var(--bji-space-3) var(--bji-space-4); font-weight: var(--bji-weight-medium); color: var(--bji-text-muted); }
.cv2-bonus-regions summary:hover { color: var(--bji-text); }
.cv2-bonus-regions ul { list-style: none; margin: 0; padding: 0 var(--bji-space-4) var(--bji-space-3); }
.cv2-bonus-regions li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--bji-space-2) var(--bji-space-3); padding: var(--bji-space-2) 0; border-top: 1px dashed var(--bji-border); font-size: var(--bji-text-sm); }
.cv2-bonus-region { min-width: 6.5em; font-weight: var(--bji-weight-semibold); }
.cv2-bonus-region-wr { color: var(--bji-text-faint); white-space: nowrap; }
.cv2-bonus-regions li a { margin-left: auto; white-space: nowrap; }
.cv2-bonus-voting { margin-top: var(--bji-space-3); border-top: 1px dashed var(--bji-border); padding-top: var(--bji-space-3); }
.cv2-bonus-voting .bonus-voting { margin: 0; }

/* generic v2 data table (RNG variations etc.) */
.cv2-subheading { font-size: var(--bji-text-lg); margin: var(--bji-space-6) 0 var(--bji-space-3); color: var(--bji-navy-900); }
.cv2-table-scroll { overflow-x: auto; }
.cv2-table { width: 100%; border-collapse: collapse; font-size: var(--bji-text-sm); }
.cv2-table th {
  text-align: left;
  font-size: var(--bji-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bji-text-faint);
  padding: var(--bji-space-2) var(--bji-space-3);
  border-bottom: 2px solid var(--bji-border-strong);
}
.cv2-table td { padding: var(--bji-space-3); border-bottom: 1px solid var(--bji-border); }
.cv2-table tbody tr:hover { background: var(--bji-surface-sunken); }

/* Method / provider pills (native taxonomy rendering; the wpg logo walls and
   their !important counter-hacks are gone, wpg CSS no longer loads on v2).
   White linked pills: entities you can click through to (banking pages,
   software pages). Distinct from .cv2-game-types (blue capability pills). */
.cv2-method-pills,
.cv2-provider-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bji-space-2);
  margin: var(--bji-space-3) 0 0;
  padding: 0;
  list-style: none;
}
.cv2-method-pills a,
.cv2-provider-pills a {
  display: inline-flex;
  align-items: center;
  gap: var(--bji-space-2);
  padding: 0.4em 0.9em;
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-pill);
  background: var(--bji-surface);
  color: var(--bji-text);
  font-size: var(--bji-text-sm);
  text-decoration: none;
}
.cv2-method-pills a:hover,
.cv2-provider-pills a:hover { border-color: var(--bji-blue-300); color: var(--bji-link); }
/* method icons are small accents; text does the informational work */
.cv2-method-pills img {
  height: 1.1em;
  width: auto;
  max-width: 4.5em;
  object-fit: contain;
}
.cv2-method-group + .cv2-method-group { margin-top: var(--bji-space-4); }
.cv2-geo-note {
  margin: var(--bji-space-4) 0 0;
  font-size: var(--bji-text-xs);
  color: var(--bji-text-faint);
}
.cv2-kicker-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  padding: 0 0.4em;
  margin-left: 0.3em;
  border-radius: var(--bji-radius-pill);
  background: var(--bji-gray-100);
  color: var(--bji-text-muted);
  font-size: var(--bji-text-xs);
}

/* bonus clearing-difficulty meter (tiers from bjinfo_calculate_wagering_info).
   Bonus-card children carry their own padding (the card has none), so the row
   pads itself to align with the terms band's text. */
.cv2-bonus-difficulty {
  display: flex;
  align-items: center;
  gap: var(--bji-space-2);
  margin: 0;
  padding: var(--bji-space-3) var(--bji-space-4) 0;
  font-size: var(--bji-text-xs);
}
.cv2-bonus-difficulty .lbl { color: var(--bji-text-faint); }
.cv2-bonus-difficulty b { color: var(--bji-text); font-weight: var(--bji-weight-semibold); }
.cv2-bonus-difficulty .meter { display: inline-flex; gap: 2px; }
.cv2-bonus-difficulty .meter i {
  width: 0.9rem;
  height: 0.35rem;
  border-radius: 2px;
  background: var(--bji-gray-200);
}
.cv2-diff--1 { --diff-color: var(--bji-rating-great); }
.cv2-diff--2 { --diff-color: var(--bji-rating-good); }
.cv2-diff--3 { --diff-color: var(--bji-rating-average); }
.cv2-diff--4 { --diff-color: var(--bji-rating-poor); }
.cv2-diff--5 { --diff-color: var(--bji-rating-terrible); }
.cv2-diff--1 .meter i:nth-child(-n+1),
.cv2-diff--2 .meter i:nth-child(-n+2),
.cv2-diff--3 .meter i:nth-child(-n+3),
.cv2-diff--4 .meter i:nth-child(-n+4),
.cv2-diff--5 .meter i:nth-child(-n+5) { background: var(--diff-color); }

.cv2-payout-tiers--roomy { font-size: var(--bji-text-sm); display: grid; gap: var(--bji-space-2); }

/* ------------------------------------------------------------
   WpDiscuz restyle (scoped to the v2 comments card).
   CSS-only over plugin markup; the plugin itself is untouched.
   Matches the mockup's cv2-comment look: card rows, round avatars,
   tokenized form controls.
   ------------------------------------------------------------ */
.cv2-comments #wpdcom { padding: 0; }
/* :not(i) keeps Font Awesome's glyph font on wpDiscuz's <i> icons; a bare *
   here overrode it and every icon rendered as a tofu box */
.cv2-comments #wpdcom :not(i) { font-family: var(--bji-font-sans); }

/* thread head: the tabs already carry the counts, so the "N Reviews" label
   and the reacted/hottest filter buttons are redundant; only sorting stays */
.cv2-comments #wpdcom .wpd-thread-head { border: 0; margin-bottom: var(--bji-space-3); }
.cv2-comments #wpdcom .wpd-thread-info,
.cv2-comments #wpdcom .wpd-thread-filter .wpdf-reacted,
.cv2-comments #wpdcom .wpd-thread-filter .wpdf-hottest { display: none; }
.cv2-comments #wpdcom .wpdiscuz-sort-button { color: var(--bji-text-faint); }
.cv2-comments #wpdcom .wpdiscuz-sort-button-active { color: var(--bji-link); }

/* form: one card on the outer wrap only, above the thread list (production
   logic per the approved mockup: pick Complaint -> tab flips -> notice and
   form share the viewport) */
.cv2-comments #wpdcom .wpd-form-wrap {
  margin: 0 0 var(--bji-space-5);
  background: var(--bji-surface-sunken);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-4) var(--bji-space-5) var(--bji-space-5);
}
.cv2-comments #wpdcom .wpd-form-wrapper { background: transparent; border: 0; padding: 0; }
.cv2-comments #wpdcom .wpd-form-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bji-space-3);
  border-bottom: 1px solid var(--bji-border);
  padding-bottom: var(--bji-space-3);
  margin-bottom: var(--bji-space-4);
}
.cv2-comments #wpdcom .bji-form-intro { font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.cv2-comments #wpdcom .wpd-form-head .wpd-auth { white-space: nowrap; flex: 0 0 auto; }

/* comment-type select: relocated above the editor by casino-v2-comments.js
   into .wpdiscuz-textarea-wrap, whose grid (legacy form custom CSS) is
   auto/1fr columns; this places it in the editor column, first row */
.cv2-comments #wpdcom .wpdiscuz-textarea-wrap .bji_comment_type-wrapper {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  display: flex;
  align-items: center;
  gap: var(--bji-space-2);
  margin: 0 0 var(--bji-space-1);
  padding: 0;
}
/* !important throughout: the plugin's bare .wpdiscuz_select rule marks its
   whole declaration block !important (base64 arrow art, width 100%, fixed
   32px height), so specificity alone cannot beat it */
.cv2-comments #wpdcom .wpdiscuz-item.bji_comment_type-wrapper select.bji_comment_type {
  width: min(20rem, 100%) !important;
  height: auto !important;
  padding: 0.55em 2.4em 0.55em 0.75em !important;
  font-size: var(--bji-text-sm) !important;
  /* custom chevron: the plugin arrow art hugs the right border */
  appearance: none;
  -webkit-appearance: none !important;
  background-color: var(--bji-surface) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235f6b7a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.9em center !important;
}

/* help tooltip: plugin markup (<i> icon + <span> bubble) restyled to the
   mockup's white ?-badge and navy bubble; the plugin's own hover rules
   handle show/hide */
.cv2-comments #wpdcom .wpd-field-desc {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
  background: var(--bji-surface);
  border: 1px solid var(--bji-text-faint);
  border-radius: 50%;
  color: var(--bji-navy-800);
  cursor: help;
}
.cv2-comments #wpdcom .wpd-field-desc:hover { border-color: var(--bji-navy-800); }
.cv2-comments #wpdcom .wpd-field-desc i { display: none; }
.cv2-comments #wpdcom .wpd-field-desc::before {
  content: "?";
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  line-height: 1;
}
.cv2-comments #wpdcom .wpd-field-desc span {
  width: 16rem;
  background: var(--bji-navy-900);
  color: #fff;
  font-size: var(--bji-text-xs);
  line-height: 1.45;
  text-align: left;
  padding: var(--bji-space-2) var(--bji-space-3);
  border-radius: var(--bji-radius-sm);
  box-shadow: 0 4px 14px rgb(14 22 56 / 0.25);
}
.cv2-comments #wpdcom .wpd-field-desc:hover span {
  left: 50%;
  margin-left: -8rem;
  bottom: calc(100% + 9px);
}
.cv2-comments #wpdcom .wpd-field-desc span::after { border-top-color: var(--bji-navy-900); }
@media (max-width: 640px) {
  /* keep the bubble on-screen next to the right-edge icon */
  .cv2-comments #wpdcom .wpd-field-desc span,
  .cv2-comments #wpdcom .wpd-field-desc:hover span { left: auto; right: -0.5rem; margin-left: 0; }
}
.cv2-comments #wpdcom .ql-editor,
.cv2-comments #wpdcom .wpd-field,
.cv2-comments #wpdcom input[type="text"],
.cv2-comments #wpdcom input[type="email"],
.cv2-comments #wpdcom input[type="url"],
.cv2-comments #wpdcom select,
.cv2-comments #wpdcom textarea {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-sm);
  font-size: var(--bji-text-sm);
  color: var(--bji-text);
}
.cv2-comments #wpdcom .ql-editor:focus,
.cv2-comments #wpdcom .wpd-field:focus,
.cv2-comments #wpdcom input:focus,
.cv2-comments #wpdcom select:focus {
  border-color: var(--bji-blue-400);
  outline: 2px solid var(--bji-blue-100);
}
.cv2-comments #wpdcom .wpd-editor-wrap,
.cv2-comments #wpdcom .ql-container { border-radius: var(--bji-radius-sm); }
.cv2-comments #wpdcom .wpd-prim-button,
.cv2-comments #wpdcom .wc_comm_submit {
  background: var(--bji-cta) !important;
  color: var(--bji-cta-text) !important;
  border: 0 !important;
  border-radius: var(--bji-radius-sm) !important;
  font-weight: var(--bji-weight-semibold);
  padding: 0.6em 1.4em;
  cursor: pointer;
  transition: background var(--bji-duration) var(--bji-ease);
}
.cv2-comments #wpdcom .wpd-prim-button:hover,
.cv2-comments #wpdcom .wc_comm_submit:hover { background: var(--bji-cta-hover) !important; }

/* form fields: the plugin floats name/email/submit into a 49% column and the
   type select ends up orphaned below, so nothing lines up. Regrid the column:
   name / email / type on one row (source order via `order`, so no explicit
   row coordinates to undo at mobile), actions right-aligned below.
   !important where the plugin sets the same property on an equal selector
   later in the cascade. */
.cv2-comments #wpdcom .wpd-form-row .wpd-form-col-left {
  width: 100% !important;
  float: none !important;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bji-space-2) var(--bji-space-3);
  align-items: start;
}
/* empty on this form (no subscribe bar); the 49% right float skews the row */
.cv2-comments #wpdcom .wpd-form-row .wpd-form-col-right { display: none; }
.cv2-comments #wpdcom .wpd-form-col-left .wpdiscuz-item { padding: 0 !important; margin: 0 !important; }
.cv2-comments #wpdcom .wpd-form-col-left .wc_name-wrapper { order: 1; }
.cv2-comments #wpdcom .wpd-form-col-left .wc_email-wrapper { order: 2; }
.cv2-comments #wpdcom .wpd-form-col-left .wc-field-submit {
  order: 4;
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--bji-space-3);
  padding: var(--bji-space-2) 0 0 !important;
}
/* the whole form foot (fields + actions) shares the editor column's left
   edge: 44px avatar column + the 15px grid gap from the legacy form CSS.
   !important: layout-3 sets its own margin-left 84px (sized for its 67px
   avatar) on a deeper selector */
.cv2-comments #wpdcom .wpd-form .wpd-avatar { width: 44px !important; margin: 0 !important; }
.cv2-comments #wpdcom .wpd-main-form-wrapper .wpd-form-foot {
  margin-left: 59px !important;
  padding-left: 0;
}
@media (max-width: 600px) {
  /* the plugin hides the form avatar at exactly 600px; drop the indent with it */
  .cv2-comments #wpdcom .wpd-main-form-wrapper .wpd-form-foot { margin-left: 0 !important; }
}
.cv2-comments #wpdcom .wc-field-submit input[type="submit"] { margin-left: 0 !important; }
/* consistent field heights: the plugin pads fields with width-relative
   percentages, which drift as the grid cells narrow */
.cv2-comments #wpdcom .wpd-form-row .wpd-field { padding: 0.55em 0.75em !important; }
.cv2-comments #wpdcom .wpd-form-row .wpd-has-icon .wpd-field { padding-left: 30px !important; }
.cv2-comments #wpdcom .wpd-form-row .wpd-has-desc .wpd-field { padding-right: 30px !important; }
@media (max-width: 640px) {
  .cv2-comments #wpdcom .wpd-form-row .wpd-form-col-left { grid-template-columns: 1fr; }
  .cv2-comments #wpdcom .wpd-form-col-left .wc-field-submit { grid-column: 1; }
  .cv2-comments #wpdcom .wc-field-submit input[type="submit"] { flex: 1; }
}

/* comment items */
.cv2-comments #wpdcom .wpd-comment {
  margin: 0 0 var(--bji-space-3);
}
.cv2-comments #wpdcom .wpd-comment-wrap {
  background: var(--bji-surface);
  background-image: none;
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-4);
  box-shadow: none;
}
.cv2-comments #wpdcom .wpd-comment.wpd-reply .wpd-comment-wrap {
  background: var(--bji-surface-sunken);
  border-left: 3px solid var(--bji-blue-200);
}
.cv2-comments #wpdcom .wpd-avatar img {
  border-radius: 50%;
  width: 44px;
  height: 44px;
}
/* !important: layout-3 sets font-weight:normal / 14px on a deeper selector;
   the mockup's author is full bold */
.cv2-comments #wpdcom .wpd-comment-author,
.cv2-comments #wpdcom .wpd-comment-author a {
  font-weight: var(--bji-weight-bold) !important;
  color: var(--bji-navy-900);
  font-size: var(--bji-text-base) !important;
}
.cv2-comments #wpdcom .wpd-comment-date { color: var(--bji-text-faint); font-size: var(--bji-text-xs); }
.cv2-comments #wpdcom .wpd-comment-text { color: var(--bji-text); font-size: var(--bji-text-sm); line-height: var(--bji-leading-body); }
.cv2-comments #wpdcom .wpd-comment-footer { border: 0; }
.cv2-comments #wpdcom .wpd-reply-button,
.cv2-comments #wpdcom .wpd-tools { color: var(--bji-text-muted); }
.cv2-comments #wpdcom .wpd-vote .wpd-vote-result { color: var(--bji-text-muted); }

/* complaint-tagged comments get an amber accent so complaints scan apart */
.cv2-comments #wpdcom .wpd-comment.comment-type-complaint > .wpd-comment-wrap {
  border-left: 3px solid var(--bji-amber-500);
}

/* positive bonus-for-blackjack verdict */
.cv2-bj-metric--ok { color: #8fe0ae; }
.cv2-bj-metric--ok b { color: #6fd39a; }

/* wpDiscuz structural overrides against its own #wpdcom-prefixed defaults:
   flatten the gray header band + dashed separators so items read as the
   mockup's clean comment cards */
.cv2-comments #wpdcom .wpd-comment-header {
  background: transparent;
  border: 0;
  align-items: baseline;
}
/* comment-right only: zeroing these on .wpd-comment-wrap too erased the
   card's own top/bottom borders (uneven-border bug, fixed 2026-07-08) */
.cv2-comments #wpdcom .wpd-comment-right {
  border-top: 0;
  border-bottom: 0;
  background-image: none;
}
.cv2-comments #wpdcom .wpd-comment-right { padding: 0 0 0 var(--bji-space-3); }
.cv2-comments #wpdcom .wpd-avatar img { width: 44px !important; height: 44px !important; }
.cv2-comments #wpdcom .wpd-comment-text p { margin: var(--bji-space-2) 0 0; }
.cv2-comments #wpdcom .wpd-comment-footer {
  background: transparent;
  border: 0;
  padding: var(--bji-space-2) 0 0;
  font-size: var(--bji-text-xs);
}
.cv2-comments #wpdcom .wpd-thread-filter { border: 0; }
.cv2-comments #wpdcom .wpdiscuz-sort-buttons { gap: 4px; }

/* wpDiscuz polish: subheader dashed rule, author color, vote/reply controls */
.cv2-comments #wpdcom .wpd-comment-subheader {
  border: 0;
  align-items: baseline;
}
.cv2-comments #wpdcom .wpd-comment-date i { display: none; }
.cv2-comments #wpdcom .wpd-comment-author,
.cv2-comments #wpdcom .wpd-comment-author a { color: var(--bji-navy-900) !important; }
.cv2-comments #wpdcom .wpd-comment-date { color: var(--bji-text-faint); }
.cv2-comments #wpdcom .wpd-vote-up,
.cv2-comments #wpdcom .wpd-vote-down {
  color: var(--bji-text-faint);
  border: 1px solid var(--bji-border);
  border-radius: 50%;
  background: var(--bji-surface);
}
.cv2-comments #wpdcom .wpd-vote-result { color: var(--bji-text-muted); font-weight: var(--bji-weight-semibold); }
.cv2-comments #wpdcom .wpd-reply-button,
.cv2-comments #wpdcom .wpd-cta-button {
  background: var(--bji-surface-sunken);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-pill);
  color: var(--bji-text-muted);
  padding: 0.25em 1em;
}
.cv2-comments #wpdcom .wpd-reply-button:hover { border-color: var(--bji-blue-300); color: var(--bji-link); }

/* wpDiscuz zero-outs that need force: the plugin sets these via deeper
   #wpdcom .wpd-comment ... selectors than our scope, and its stylesheet
   loads after this one */
.cv2-comments #wpdcom .wpd-comment-subheader { border: 0 !important; }
.cv2-comments #wpdcom .wpd-comment-header { background: transparent !important; }
.cv2-comments #wpdcom .wpd-comment-right { border: 0 !important; }
/* author + date on one line (mockup): header and subheader are sibling block
   divs the plugin lays out with 42px offsets and chunky padding */
.cv2-comments #wpdcom .wpd-comment-header {
  display: inline-flex !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cv2-comments #wpdcom .wpd-comment-subheader {
  display: inline-flex !important;
  padding: 0 !important;
  margin: 0 0 0 var(--bji-space-2) !important;
}
.cv2-comments #wpdcom .wpd-comment-author { padding: 0 !important; }
.cv2-comments #wpdcom .wpd-comment-date { padding: 0 !important; }
.cv2-comments #wpdcom .wpd-comment-text { padding: 0 !important; }
/* plain two-column card: layout-3 overlaps the avatar into the text column
   (width 70px + margin-right -34px), which the 42px paddings above were
   compensating for; its mobile breakpoint also stacks the columns
   (display:block), so the flex row is pinned at every width like the
   mockup's avatar-column grid */
.cv2-comments #wpdcom .wpd-comment .wpd-comment-wrap { display: flex !important; }
.cv2-comments #wpdcom .wpd-comment .wpd-comment-left {
  width: 44px !important;
  margin-right: 0 !important;
}
.cv2-comments #wpdcom .wpd-comment .wpd-comment-left .wpd-avatar { margin-top: 0 !important; }
.cv2-comments #wpdcom .wpd-comment .wpd-comment-right {
  width: auto !important;
  flex: 1;
  min-width: 0;
}
/* share (X/FB/VK/OK) and copy-link icons: not part of the v2 comment design */
.cv2-comments #wpdcom .wpd-comment-share,
.cv2-comments #wpdcom .wpd-comment-link { display: none !important; }

/* ==========================================================================
   /bonuses/ endpoint list page (increment 1.4).
   Design reference: mockups/bonuses-v2/list.html (rounds 2-5b).
   One card per bonus repeater row; consumes tokens + cv2-btn/cv2-faq from
   v2-components.css.
   ========================================================================== */
.bvl-head { background: var(--bji-surface); border-bottom: 1px solid var(--bji-border); padding: var(--bji-space-6) 0 var(--bji-space-5); }
.bvl-crumbs { font-size: var(--bji-text-xs); color: var(--bji-text-faint); margin-bottom: var(--bji-space-4); }
.bvl-crumbs a { color: var(--bji-text-faint); text-decoration: none; }
.bvl-crumbs a:hover { color: var(--bji-link); }
.bvl-head h1 { font-size: var(--bji-text-3xl); font-weight: var(--bji-weight-black); line-height: var(--bji-leading-tight); margin: 0 0 var(--bji-space-2); }
.bvl-ident { display: flex; align-items: center; gap: var(--bji-space-3); margin-bottom: var(--bji-space-4); }
.bvl-ident .avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--bji-border); display: grid; place-items: center; overflow: hidden; background: #fff; }
.bvl-ident .avatar img { width: 58px; height: 58px; object-fit: contain; }
.bvl-ident .who { font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.bvl-ident .who b { display: block; color: var(--bji-text); font-size: var(--bji-text-base); }
.bvl-meta { display: flex; flex-wrap: wrap; gap: var(--bji-space-2) var(--bji-space-4); margin: 0; padding: 0; list-style: none; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.bvl-meta b { color: var(--bji-text); }
.bvl-meta .fresh { color: var(--bji-green-600); font-weight: var(--bji-weight-semibold); }

.bvl-section { padding-top: var(--bji-space-6); }
.bvl-section:last-of-type { padding-bottom: var(--bji-section-gap); }
.bvl-h2 { font-size: var(--bji-text-2xl); font-weight: var(--bji-weight-bold); margin: 0 0 var(--bji-space-4); }

/* filter pills (JS-injected behavior; hidden without JS) */
.bvl-filters { display: flex; flex-wrap: wrap; gap: var(--bji-space-2); margin: 0 0 var(--bji-space-4); }
.bvl-filters[hidden] { display: none; }
.bvl-filters button {
  font: inherit;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-text-muted);
  background: var(--bji-surface);
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-pill);
  padding: 5px 14px;
  cursor: pointer;
}
.bvl-filters button:hover { border-color: var(--bji-blue-500); color: var(--bji-blue-600); }
.bvl-filters button[aria-pressed="true"] { background: var(--bji-navy-900); border-color: var(--bji-navy-900); color: #fff; }
.bvl-filters button small { font-weight: var(--bji-weight-regular); opacity: 0.75; }

/* chips */
.bv-type {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bji-navy-800);
  background: var(--bji-blue-050);
  border: 1px solid var(--bji-blue-200);
  border-radius: var(--bji-radius-pill);
  padding: 2px 9px;
}
.bv-type--nodeposit { color: var(--bji-green-700); background: var(--bji-green-100); border-color: rgb(31 162 84 / 0.35); }
.bv-type--sports { color: var(--bji-gray-700); background: var(--bji-gray-100); border-color: var(--bji-gray-300); }
.bv-type--expired { color: var(--bji-red-700); background: var(--bji-red-100); border-color: rgb(221 61 61 / 0.35); }

/* code chip with copy */
.bv-code {
  display: inline-flex;
  align-items: center;
  gap: var(--bji-space-2);
  font-family: var(--bji-font-mono);
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-bold);
  letter-spacing: 0.06em;
  color: var(--bji-navy-900);
  background: var(--bji-gray-050);
  border: 1px dashed var(--bji-border-strong);
  border-radius: var(--bji-radius-sm);
  padding: 4px 10px;
}
.bv-code button {
  font: inherit;
  font-family: var(--bji-font-sans);
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  letter-spacing: 0;
  color: var(--bji-blue-600);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.bv-code button:hover { color: var(--bji-blue-700); }

/* bonus card rows */
.bvl-list { display: grid; gap: var(--bji-space-3); }
.bvl-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: var(--bji-space-4) var(--bji-space-5);
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-5);
}
@media (max-width: 760px) { .bvl-card { grid-template-columns: 1fr; } }
.bvl-card[hidden] { display: none; }
.bvl-card.is-expired { background: var(--bji-gray-050); }
.bvl-card.is-expired h3 { color: var(--bji-text-muted); }
.bvl-card .chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bji-space-2); margin-bottom: var(--bji-space-2); }
.bvl-card .chips .added { font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
.bvl-card h3 { margin: 0 0 var(--bji-space-2); font-size: var(--bji-text-xl); font-weight: var(--bji-weight-bold); line-height: var(--bji-leading-snug); }
.bvl-terms { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.bvl-terms b { color: var(--bji-text); font-weight: var(--bji-weight-semibold); }
.bvl-terms .sep { margin: 0 6px; color: var(--bji-border-strong); }
.bvl-card .note { margin: var(--bji-space-2) 0 0; font-size: var(--bji-text-sm); }
.bvl-card .note::before { content: "= "; font-weight: var(--bji-weight-bold); color: var(--bji-navy-800); }
.bvl-more { margin: var(--bji-space-2) 0 0; font-size: var(--bji-text-sm); }
.bvl-more a { font-weight: var(--bji-weight-semibold); }
.bvl-groupnote { margin: var(--bji-space-2) 0; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
.bvl-groupnote[hidden] { display: none; }
.bvl-source { margin: var(--bji-space-4) 0 0; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }

/* right column: code + CTA + claimed + reports */
.bvl-act { display: flex; flex-direction: column; gap: var(--bji-space-2); align-self: start; }
@media (min-width: 761px) { .bvl-act { border-left: 1px dashed var(--bji-border); padding-left: var(--bji-space-5); } }
.bvl-act .bv-code { justify-content: space-between; width: 100%; }
.bvl-nocode {
  display: block;
  text-align: center;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-text-faint);
  background: var(--bji-gray-050);
  border: 1px dashed var(--bji-border);
  border-radius: var(--bji-radius-sm);
  padding: 6px 10px;
}
.bvl-act .cv2-btn { width: 100%; }
.bvl-card.is-expired .bvl-act { align-self: stretch; justify-content: center; }
.bvl-act .ended {
  text-align: center;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-text-faint);
  padding: 0.6em 0;
}
.bvl-claimed { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: var(--bji-text-xs); color: var(--bji-text-muted); }
.bvl-claimed b { color: var(--bji-text); }
.bvl-claimed .i { flex: none; color: var(--bji-text-faint); }
.bvl-vote { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
.bvl-vote button {
  font: inherit;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-text-muted);
  background: var(--bji-gray-050);
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-pill);
  padding: 2px 9px;
  cursor: pointer;
}
.bvl-vote button:hover { border-color: var(--bji-blue-500); color: var(--bji-blue-600); }
.bvl-vote button[disabled] { opacity: 0.55; cursor: default; }

/* --- single-bonus landing page (1.4b); shares the .bvl- family above.
   Design reference: mockups/bonuses-v2/bonus-single.html --- */
.bvs-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--bji-space-4) var(--bji-space-6);
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  box-shadow: var(--bji-shadow-md);
  padding: var(--bji-space-6);
}
@media (max-width: 760px) { .bvs-offer { grid-template-columns: 1fr; } }
.bvs-offer .chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bji-space-2); margin-bottom: var(--bji-space-3); }
.bvs-offer h2 { margin: 0 0 var(--bji-space-3); font-size: var(--bji-text-2xl); font-weight: var(--bji-weight-black); line-height: var(--bji-leading-tight); }
.bvs-offer .bvl-terms { font-size: var(--bji-text-base); }
.bvs-offer .note { margin: var(--bji-space-2) 0 0; font-size: var(--bji-text-sm); }
.bvs-offer .note::before { content: "= "; font-weight: var(--bji-weight-bold); color: var(--bji-navy-800); }

.bvs-terms { margin: var(--bji-space-3) 0 0; border-top: 2px solid var(--bji-navy-900); max-width: var(--bji-prose-width); }
.bvs-terms .row { display: grid; grid-template-columns: 180px 1fr; gap: var(--bji-space-4); padding: var(--bji-space-3) 0; border-bottom: 1px solid var(--bji-border); font-size: var(--bji-text-sm); }
@media (max-width: 560px) { .bvs-terms .row { grid-template-columns: 1fr; gap: 2px; } }
.bvs-terms dt { margin: 0; font-weight: var(--bji-weight-semibold); color: var(--bji-text-muted); }
.bvs-terms dd { margin: 0; }

.bvs-guide { max-width: var(--bji-prose-width); }
.bvs-guide h3 { font-size: var(--bji-text-lg); margin: var(--bji-space-5) 0 var(--bji-space-2); }
.bvs-guide p, .bvs-guide li { font-size: var(--bji-text-base); }
.bvs-guide img { max-width: 100%; height: auto; border: 1px solid var(--bji-border); border-radius: var(--bji-radius-md); box-shadow: var(--bji-shadow-sm); }
.bvs-guide img.aligncenter { display: block; margin: var(--bji-space-4) auto; }

.bvs-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--bji-space-4); margin-top: var(--bji-space-3); }
.bvs-rel {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--bji-space-2);
}
.bvs-rel h3 { margin: 0; font-size: var(--bji-text-lg); line-height: var(--bji-leading-snug); }
.bvs-rel h3 a { color: var(--bji-navy-800); text-decoration: none; }
.bvs-rel h3 a:hover { color: var(--bji-blue-600); }
.bvs-rel .terms { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.bvs-rel .terms b { color: var(--bji-text); }
.bvs-rel .terms .sep { margin: 0 6px; color: var(--bji-border-strong); }
.bvs-rel .go { margin-top: auto; padding-top: var(--bji-space-2); font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); }
.bvs-all { margin: var(--bji-space-4) 0 0; font-size: var(--bji-text-sm); }