/* ═══════════════════════════════════════════════════════════════════
   Casino Gurus · Casino Review Single Template (single-reviews.php)  ·  v1.6
   Scoping: .crb-page
   Depends on: homepage-v2.css (CSS custom properties + shared .hpv2-*
   components: hero, section headers, content typography, FAQ accordion
   CSS unused here — see docblock in single-reviews.php) and
   casino-ranking.css (.crk-rating badge, reused as-is for the rating
   breakdown values) and casino-blog.css (.crb-hero--photo, reading
   progress bar).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Summary card — logo, bonus headline, Play Now CTA ─────────── */
.rvw-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  background: linear-gradient(145deg, rgba(30,42,58,.55) 0%, rgba(22,32,48,.5) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212,175,55,.2);
  border-radius: var(--cg-radius-lg);
  padding: 24px 28px;
  margin-top: 20px;
  text-decoration: none;
}
.rvw-summary__logo {
  flex: 0 0 auto;
  width: 125px;
  height: 90px;
  border-radius: var(--cg-radius);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rvw-summary__logo img { width: 100%; height: 100%; object-fit: contain; }
.rvw-summary__bonus { flex: 1 1 220px; text-align: center; }
.rvw-summary__bonus-label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cg-text-dim); margin-bottom: 4px; }
.rvw-summary__bonus-value { font-size: 1.4rem; font-weight: 800; color: var(--cg-gold-light); }
.rvw-summary__cta { flex: 0 0 auto; }
.rvw-summary--closed { cursor: default; }

/* Social-proof line (existing #aad AJAX ticker, JS untouched) — the JS
   posts to a hardcoded https://dev.casinogurus.org/.../socialproof.php
   endpoint that never resolves here, so #aad stays empty, but this
   container's own background/border/padding/min-height rendered a
   visible pill regardless of content: an empty rounded bar with nothing
   in it. Confirmed on both mobile and desktop, so fixed universally —
   collapse to nothing whenever #aad has no content yet (initial load, a
   slow response, or a failed one), and appear normally the moment JS
   populates it. Functionality/JS untouched — style only. */
.rvw-socialproof {
  text-align: center;
  margin-top: 16px;
  padding: 10px 16px;
  border-radius: 50px;
  background: rgba(212,175,55,.08);
  border: 1px solid rgba(212,175,55,.2);
  color: var(--cg-text);
  font-size: .82rem;
  min-height: 20px;
}
.rvw-socialproof:has(#aad:empty) {
  margin-top: 0;
  padding: 0;
  border: none;
  background: none;
  min-height: 0;
}

/* Canada-only marquee banner (existing per-post conditional, ID 1030) */
.rvw-notice {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--cg-radius);
  background: rgba(255,51,51,.1);
  border: 1px solid rgba(255,51,51,.3);
  color: var(--cg-text);
  text-align: center;
  font-weight: 700;
  overflow: hidden;
}

/* Mobile Platforms Supported row */
.rvw-platforms { text-align: center; margin-top: 24px; }
.rvw-platforms h4 { color: var(--cg-text-dim); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.rvw-platforms a { color: var(--cg-gold); margin: 0 10px; transition: color var(--cg-trans); }
.rvw-platforms a:hover { color: var(--cg-gold-light); }
.rvw-platforms .rvw-platforms__icon--disabled { color: var(--cg-text-dim); margin: 0 10px; cursor: not-allowed; }

/* ── 2. Rating breakdown ───────────────────────────────────────────── */
.rvw-ratings__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.rvw-rating-card {
  display: block;
  text-align: center;
  background: linear-gradient(145deg, rgba(30,42,58,.55) 0%, rgba(22,32,48,.5) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--cg-radius-lg);
  padding: 20px 12px;
}
.rvw-rating-card--overall { border-color: rgba(212,175,55,.4); background: linear-gradient(145deg, rgba(212,175,55,.12) 0%, rgba(22,32,48,.5) 100%); }
.rvw-rating-card__label { font-size: .78rem; font-weight: 700; color: var(--cg-text-dim); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.rvw-rating-card__value { font-size: 1.7rem; font-weight: 800; color: var(--cg-gold-light); }
.rvw-rating-card__value i { font-size: 1rem; color: var(--cg-gold); margin-right: 4px; }

/* ── 3. Features / Pros / Cons ─────────────────────────────────────── */
.rvw-features {
  margin-top: 32px;
  background: linear-gradient(145deg, rgba(30,42,58,.55) 0%, rgba(22,32,48,.5) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--cg-radius-lg);
  padding: 28px;
  color: var(--cg-text);
}
/* wpcf-reviews-features is a free-form admin-authored HTML field with
   two different shapes seen across review posts:
     1. a <ul><li style="..."> pill list with inline white/blue styling
        (e.g. Cloudbet) — every color/background/border is inline, so
        overriding it needs !important, same approach already used for
        legacy inline-styled content elsewhere in this project.
     2. bare <span> text runs with no wrapper and no icon at all (e.g.
        Betway, FortuneJack, Jackpot City) — styled here as an
        equivalent chip via CSS alone so both shapes read consistently,
        without adding or changing a single word of feature text.
   Pill/chip look mirrors .hpv2-hero__eyebrow (gold border, gold-tinted
   background, pill radius) rather than inventing a new tag style. */
.rvw-features ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: none !important;
}
.rvw-features li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  background: rgba(212,175,55,.07) !important;
  border: 1px solid rgba(212,175,55,.35) !important;
  border-radius: 50px !important;
  box-shadow: none !important;
  font-size: .86rem !important;
  line-height: 1.4 !important;
  color: var(--cg-text) !important;
}
.rvw-features li span {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto;
  background: var(--cg-gold) !important;
  color: #0f0920 !important;
}
.rvw-features li i { color: inherit !important; font-size: .68rem !important; }

/* Bare <span> feature format (no <ul>/icon at all) — turn each span
   into an equivalent chip via CSS only. */
.rvw-features > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 6px;
  background: rgba(212,175,55,.07);
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 50px;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--cg-text);
}
.rvw-features > span::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cg-gold);
  color: #0f0920;
  font-size: .68rem;
  flex: 0 0 auto;
}
.rvw-features { text-align: center; }

/* ── 4. Kadence Blocks galleries embedded in post_content — dark
   theme pass over the plugin's own rendered classes (Payment Methods
   icon gallery + "Preview of the Casino" screenshot gallery). Not
   page-specific: these classes are identical for every review post
   using the same Kadence gallery block. ──────────────────────────── */
.hpv2-content__inner .wp-block-kadence-advancedgallery { margin: 24px 0; }
.hpv2-content__inner .kb-gallery-ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hpv2-content__inner .kadence-blocks-gallery-item { list-style: none; }
.hpv2-content__inner .kb-gallery-figure {
  margin: 0;
  border-radius: var(--cg-radius);
  overflow: hidden;
  background: #fff;
  transition: transform var(--cg-trans), box-shadow var(--cg-trans);
}
.hpv2-content__inner .kb-gallery-figure:hover { transform: translateY(-3px); box-shadow: var(--cg-shadow-gold); }
.hpv2-content__inner .kb-gal-image-radius { border-radius: var(--cg-radius); overflow: hidden; }
.hpv2-content__inner .reviews-gallery .kb-gallery-figure { background: transparent; border: 1px solid rgba(255,255,255,.1); }

/* ── 5. Support info block — hand-authored wp:html row using
   Bootstrap grid classes (row/col-auto), same markup on every review
   post that has one. Dark-theme the icon + label/value pair. ──────── */
.hpv2-content__inner .row.justify-content-center.text-center.font-weight-bold {
  gap: 32px;
  margin: 24px 0;
}
.hpv2-content__inner .row.justify-content-center.text-center.font-weight-bold i {
  color: var(--cg-gold);
}
.hpv2-content__inner .row.justify-content-center.text-center.font-weight-bold p {
  color: var(--cg-text);
  margin: 4px 0 0;
}

/* ── 6. Responsive ─────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .rvw-ratings__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .rvw-summary { flex-direction: column; text-align: center; }
  /* .rvw-summary__bonus's base flex:1 1 220px sets a 220px flex-basis
     meant as a WIDTH hint for the desktop row layout — but .rvw-summary
     is column here, so that same 220px becomes a HEIGHT instead once the
     main axis flips, forcing a ~220px-tall block around text that only
     needs ~55px and leaving a dead gap before the Play Now button. */
  .rvw-summary__bonus { flex-basis: auto; }
  .rvw-ratings__grid { grid-template-columns: repeat(2, 1fr); }
  .rvw-features li,
  .rvw-features > span { font-size: .8rem !important; padding: 8px 12px !important; }
}

/* ── Review SEO Enhancements ── */
.rvw-breadcrumb-wrap { padding: 16px 0 0; }
.rvw-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
}
.rvw-breadcrumb a { color: var(--cg-gold); text-decoration: none; }
.rvw-breadcrumb a:hover { text-decoration: underline; }
.rvw-breadcrumb__sep { color: var(--cg-text-dim); }
.rvw-breadcrumb__current { color: var(--cg-text-dim); }

.rvw-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 16px 0 0;
  font-size: 13px;
  color: #8899aa;
}
.rvw-meta__item i { margin-right: 4px; }

@media (max-width: 700px) {
  .rvw-meta { gap: 8px 16px; }
}

/* ── Affiliate Disclosure ── */
.crv-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: #6a7a8a;
}
.crv-disclosure__icon { flex: 0 0 auto; font-size: 12px; }

/* ── Verdict Summary Box ── */
.crv-verdict-card {
  margin-top: 20px;
  padding: 24px 28px;
  background: rgba(255,255,255,.04);
  border-left: 4px solid #d4af37;
  border-radius: 12px;
}
.crv-verdict-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.crv-verdict-rating {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--cg-gold-light);
}
.crv-verdict-rating i { font-size: 1.1rem; color: var(--cg-gold); margin-right: 6px; }
.crv-verdict-name { font-size: 1.2rem; font-weight: 700; color: var(--cg-text); }
.crv-verdict-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.crv-verdict-label { font-size: 1rem; font-weight: 700; margin: 0 0 8px; color: var(--cg-text); }
.crv-verdict-label--pros { color: var(--cg-green); }
.crv-verdict-label--cons { color: var(--cg-red); }
.crv-verdict-list { margin: 0; padding-left: 18px; color: var(--cg-text); line-height: 1.7; }
.crv-verdict-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.crv-verdict-readmore { color: var(--cg-gold); text-decoration: none; font-weight: 600; font-size: .9rem; }
.crv-verdict-readmore:hover { color: var(--cg-gold-light); text-decoration: underline; }

/* ── Table of Contents ── */
.crv-toc-card {
  margin-top: 24px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--cg-radius);
  padding: 18px 24px;
}
.crv-toc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.crv-toc-label { color: var(--cg-gold); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; }
.crv-toc-icon { color: var(--cg-gold); font-size: .8rem; transition: transform var(--cg-trans); }
.crv-toc-card--collapsed .crv-toc-icon { transform: rotate(180deg); }
.crv-toc-list { margin: 14px 0 0; padding-left: 20px; }
.crv-toc-card--collapsed .crv-toc-list { display: none; }
.crv-toc-list li { margin-bottom: 8px; }
.crv-toc-list a { color: var(--cg-text); text-decoration: none; }
.crv-toc-list a:hover { color: var(--cg-gold); }

/* ── End CTA ── */
.crv-endcta-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
  padding: 24px 28px;
  background: linear-gradient(145deg, rgba(212,175,55,.1) 0%, rgba(22,32,48,.5) 100%);
  border: 1px solid rgba(212,175,55,.3);
  border-radius: var(--cg-radius-lg);
}
.crv-endcta-logo { flex: 0 0 auto; width: 90px; height: 70px; background: #fff; border-radius: var(--cg-radius); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.crv-endcta-logo img { width: 100%; height: 100%; object-fit: contain; }
.crv-endcta-body { flex: 1 1 200px; }
.crv-endcta-heading { font-size: 1.15rem; font-weight: 700; color: var(--cg-text); }
.crv-endcta-bonus { color: var(--cg-gold-light); font-weight: 700; margin-top: 4px; }
.crv-endcta-action { flex: 0 0 auto; text-align: center; }
.crv-endcta-fineprint { margin-top: 8px; font-size: .72rem; color: var(--cg-text-dim); }

/* ── Similar Casinos ── */
.crv-similar-section { margin-top: 40px; }
.crv-similar-title { text-align: center; font-size: 1.4rem; font-weight: 800; color: var(--cg-text); margin-bottom: 20px; }
.crv-similar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.crv-similar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px;
  background: linear-gradient(145deg, rgba(30,42,58,.55) 0%, rgba(22,32,48,.5) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--cg-radius-lg);
  text-decoration: none;
  transition: transform var(--cg-trans), box-shadow var(--cg-trans);
}
.crv-similar-card:hover { transform: translateY(-3px); box-shadow: var(--cg-shadow-gold); }
.crv-similar-card__logo { width: 90px; height: 64px; background: #fff; border-radius: var(--cg-radius); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.crv-similar-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.crv-similar-card__name { font-weight: 700; color: var(--cg-text); }
.crv-similar-card__rating { color: var(--cg-gold-light); font-weight: 700; }
.crv-similar-card__rating i { color: var(--cg-gold); font-size: .8rem; margin-right: 4px; }
.crv-similar-card__bonus { font-size: .85rem; color: var(--cg-text-dim); }
.crv-similar-card__link { color: var(--cg-gold); font-size: .85rem; font-weight: 600; }

/* ── Responsible Gambling ── */
/* Now reuses .hpv2-rg verbatim from homepage-v2.css (already an enqueue
   dependency of this stylesheet) instead of a bespoke component — see
   single-reviews.php. No page-specific overrides needed. */

/* ── Responsive ── */
@media (max-width: 991px) {
  .crv-similar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .crv-verdict-body { grid-template-columns: 1fr; }
  .crv-endcta-box { flex-direction: column; text-align: center; gap: 16px; }
  /* Same flex-basis-becomes-height issue as .rvw-summary__bonus above:
     .crv-endcta-body's base flex:1 1 200px is a WIDTH hint for the desktop
     row layout, but .crv-endcta-box is column here, so that 200px becomes
     a HEIGHT instead once the main axis flips — forcing a tall empty block
     between the bonus amount and the "Visit Casino" button below it. */
  .crv-endcta-body { flex-basis: auto; }
  .crv-similar-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Payment Methods Logos ──
   Scoped to the Payment Methods gallery specifically, via the "text-center"
   className WordPress already assigns that Kadence gallery block (confirmed
   present on 46/48 published posts) — deliberately NOT the shared
   .kb-gallery-figure/.kb-gal-image-radius rules above, which the "Preview
   of the Casino" screenshot gallery (.reviews-gallery) also depends on and
   must keep its own look (real screenshots, not icon logos). Cloudbet
   (1010) and Betchain (1040) have no className at all on their Payment
   Methods block, so they keep the old plain white-card look — a
   pre-existing content gap; a class-less fallback selector would risk
   mis-styling 4 other posts' un-classed Preview galleries instead.
   Overrides use !important where they're fighting the Kadence plugin's own
   inline per-image styles (aspect-ratio padding-bottom hack, per-image
   max-width) and absolute-positioned <img>, same pattern as .rvw-features
   above. */
.hpv2-content__inner .wp-block-kadence-advancedgallery.text-center .kb-gallery-ul {
  gap: 16px;
}
.hpv2-content__inner .wp-block-kadence-advancedgallery.text-center .kb-gallery-figure {
  width: 120px;
  height: 70px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}
.hpv2-content__inner .wp-block-kadence-advancedgallery.text-center .kb-gal-image-radius,
.hpv2-content__inner .wp-block-kadence-advancedgallery.text-center .kb-gallery-image-contain {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  padding-bottom: 0 !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
.hpv2-content__inner .wp-block-kadence-advancedgallery.text-center .kb-gallery-figure img {
  position: static !important;
  max-width: 80px !important;
  max-height: 40px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: brightness(1.1);
}
@media (max-width: 700px) {
  .hpv2-content__inner .wp-block-kadence-advancedgallery.text-center .kb-gallery-figure {
    width: 100px;
    height: 60px;
    padding: 8px;
  }
  .hpv2-content__inner .wp-block-kadence-advancedgallery.text-center .kb-gallery-figure img {
    max-width: 60px !important;
    max-height: 30px !important;
  }
}

/* ── Content Tables ──
   Tables embedded directly in post_content (raw <table> markup inside a
   wp:html block — e.g. the "At a Glance"/VIP Tier/comparison tables on the
   7Bit review) have no wrapper of their own and can be wider than the
   viewport, cropping the last column on mobile instead of scrolling.
   Made scrollable at the element level rather than adding a wrapper div,
   since the table markup already lives in post_content and doesn't need a
   content edit for this. */
.hpv2-content__inner table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .hpv2-content__inner table { font-size: 13px; }
  .hpv2-content__inner table td,
  .hpv2-content__inner table th { padding: 8px !important; }
}