/* ═══════════════════════════════════════════════════════════════════
   Casino Gurus · Casino Ranking Page (shared page-ranking.php)  ·  v1.0
   Scoping: .crk-page
   Depends on: homepage-v2.css (CSS custom properties + shared .hpv2-*
   utility classes: container, buttons, hero eyebrow/title/subtitle,
   trust counters, FAQ accordion, editor content typography).
   ═══════════════════════════════════════════════════════════════════ */

.crk-page {
  background: var(--cg-bg);
  color: var(--cg-text);
  overflow-x: hidden;
  padding-top: 74px; /* clears the fixed site header */
}
.crk-page, .crk-page *, .crk-page *::before, .crk-page *::after { box-sizing: border-box; }
.crk-page img { max-width: 100%; display: block; }
.crk-page a { color: var(--cg-gold); text-decoration: none; transition: color var(--cg-trans); }
.crk-page a:hover { color: var(--cg-gold-light); }

/* ── 1. Hero ──────────────────────────────────────────────────────── */
.crk-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 62px 24px 36px;
  background:
    radial-gradient(ellipse at 18% 30%, rgba(30,6,60,.92) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 75%, rgba(5,20,60,.82) 0%, transparent 50%),
    linear-gradient(160deg, #0f0820 0%, #0a1520 55%, #0f0820 100%);
}
.crk-hero__pattern { position: absolute; inset: 0; opacity: .85; pointer-events: none; z-index: 0; }
.crk-hero__pattern svg { width: 100%; height: 100%; }
.crk-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .12; z-index: 0;
}
.crk-hero__stat { margin-top: 34px; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }

/* ── 2. Affiliate Notice & Social Proof ───────────────────────────── */
.crk-affiliate-notice {
  text-align: center;
  font-size: .78rem;
  color: var(--cg-text-dim);
  padding: 14px 20px;
  background: var(--cg-bg-alt);
  border-bottom: 1px solid var(--cg-dark-border);
}
.crk-socialproof { text-align: center; padding: 10px 20px 0; background: var(--cg-bg-alt); }
.crk-socialproof__card {
  display: inline-block; margin-bottom: 12px; padding: 10px 18px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(212,175,55,.25);
  border-radius: 50px; font-size: .8rem; color: var(--cg-text);
}

/* ── 3. Sections ──────────────────────────────────────────────────── */
.crk-section { padding: 56px 0; }
.crk-section--alt { background: var(--cg-bg-alt); }

/* ── 4. Comparison Table ──────────────────────────────────────────── */
.hpv2-container--wide { max-width: 1560px; }
.crk-section--compare { padding-top: 32px; }

.crk-rating {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 50px;
  white-space: nowrap; flex-shrink: 0;
}
.crk-rating--green  { background: rgba(0,200,81,.13);  color: var(--cg-green);  border: 1px solid rgba(0,200,81,.25); }
.crk-rating--orange { background: rgba(255,136,0,.13); color: var(--cg-orange); border: 1px solid rgba(255,136,0,.25); }
.crk-rating--red    { background: rgba(255,51,51,.13); color: var(--cg-red);    border: 1px solid rgba(255,51,51,.25); }
.crk-rating--none   { display: none; }

.crk-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 50px;
  border: 1px solid rgba(212,175,55,.3); background: rgba(212,175,55,.08);
  color: var(--cg-gold-light); font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.crk-chip i { color: var(--cg-gold); font-size: .7rem; }

/* Horizontal scroll wrapper — a no-op on desktop where the grid fits,
   becomes the mobile scroll container once columns overflow. */
.crk-compare-scroll {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: var(--cg-radius-lg);
  -webkit-overflow-scrolling: touch;
}

.crk-compare {
  display: grid;
  grid-template-columns: minmax(160px, 200px) repeat(var(--crk-cols), minmax(200px, 1fr));
  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(255,255,255,.08);
  border-radius: var(--cg-radius-lg);
  overflow: hidden;
}

.crk-compare__cell {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center;
  font-size: .86rem; color: #ffffff;
  transition: background var(--cg-trans), box-shadow var(--cg-trans);
}

/* Alternating row backgrounds for scannability — PHP tags every other
   row's cells with this class (cols vary per page, so nth-child alone
   can't compute row parity reliably). */
.crk-compare__cell.crk-compare__row--alt { background: rgba(255,255,255,.02); }

/* ── Casino header row (no longer sticky — scrolls away with the page
   like everything else). position:relative is kept, without top/sticky,
   purely so the restricted-countries dropdown panel (position:absolute
   below) still anchors to its own header cell instead of the page. ──── */
.crk-compare__corner,
.crk-compare__header {
  position: relative; z-index: 3;
  background: #141c29;
  align-items: stretch;
}
.crk-compare__corner { left: 0; z-index: 4; border-bottom: 1px solid rgba(212,175,55,.25); }
.crk-compare__header { border-bottom: 2px solid rgba(212,175,55,.35); }

.crk-compare__label {
  position: sticky; left: 0; z-index: 2;
  background: #141c29;
  font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  color: rgba(200,220,240,.85);
  box-shadow: 2px 0 0 rgba(212,175,55,.12);
}

/* ── Section header row (spans every column) ──────────────────────── */
.crk-compare__section-row {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cg-text);
  background: rgba(255,255,255,.03);
  border-left: 4px solid var(--cg-gold);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.crk-compare__section-row i { font-size: .82rem; }
.crk-compare__section-row--gold   { border-left-color: var(--cg-gold); color: var(--cg-gold-light); }
.crk-compare__section-row--gold i { color: var(--cg-gold); }
.crk-compare__section-row--pink   { border-left-color: #ff6fa5; color: #ffb3cf; }
.crk-compare__section-row--pink i { color: #ff6fa5; }
.crk-compare__section-row--blue   { border-left-color: var(--cg-neon); color: #9fe8ff; }
.crk-compare__section-row--blue i { color: var(--cg-neon); }
.crk-compare__section-row--purple { border-left-color: var(--cg-purple); color: #cbb0ff; }
.crk-compare__section-row--purple i { color: var(--cg-purple); }
.crk-compare__section-row--green  { border-left-color: var(--cg-green); color: #8fe8ac; }
.crk-compare__section-row--green i { color: var(--cg-green); }
.crk-compare__section-row--red    { border-left-color: var(--cg-red); color: #ff9d9d; }
.crk-compare__section-row--red i  { color: var(--cg-red); }

/* ── Column hover highlight ────────────────────────────────────────── */
.crk-compare__value, .crk-compare__header { transition: background var(--cg-trans), box-shadow var(--cg-trans); }
.crk-compare[data-hover-col="1"]  [data-col="1"],
.crk-compare[data-hover-col="2"]  [data-col="2"],
.crk-compare[data-hover-col="3"]  [data-col="3"],
.crk-compare[data-hover-col="4"]  [data-col="4"],
.crk-compare[data-hover-col="5"]  [data-col="5"],
.crk-compare[data-hover-col="6"]  [data-col="6"],
.crk-compare[data-hover-col="7"]  [data-col="7"],
.crk-compare[data-hover-col="8"]  [data-col="8"],
.crk-compare[data-hover-col="9"]  [data-col="9"],
.crk-compare[data-hover-col="10"] [data-col="10"] {
  background: rgba(212,175,55,.07);
  box-shadow: inset 2px 0 0 rgba(212,175,55,.5), inset -2px 0 0 rgba(212,175,55,.5);
  position: relative; z-index: 1;
}

/* ── Casino header cell ────────────────────────────────────────────── */
.crk-compare__header {
  flex-direction: column; align-items: center; text-align: center;
  gap: 10px;
  padding: 22px 16px 18px;
}
.crk-compare__header--featured { background: #1c1608; }

.crk-compare__rank {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 900; font-size: .8rem; line-height: 1;
  color: var(--cg-gold); background: rgba(212,175,55,.12);
  border: 2px solid var(--cg-gold);
}
.crk-compare__rank--gold {
  width: 48px; height: 48px; font-size: .95rem;
  color: #0f0920; background: var(--cg-gold-shine);
  border: 3px solid var(--cg-bg);
  box-shadow: 0 4px 16px rgba(212,175,55,.5);
}
.crk-compare__rank i { font-size: .68rem; }
.crk-compare__rank--gold i { font-size: .78rem; }

.crk-compare__logo {
  width: 100%; max-width: 140px; height: 68px;
  background: #ffffff; border-radius: var(--cg-radius);
  display: flex; align-items: center; justify-content: center; padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.crk-compare__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.crk-compare__name { font-size: .98rem; font-weight: 800; color: #ffffff; margin: 0; line-height: 1.3; }
.crk-compare__header--featured .crk-compare__name { color: var(--cg-gold-light); }

.crk-compare__actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: auto; }
.crk-compare__actions .hpv2-btn { padding: 10px 14px; font-size: .74rem; }

.crk-compare__countries-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  color: var(--cg-text-dim); font-size: .68rem; font-weight: 700;
  padding: 6px 12px; border-radius: 50px; cursor: pointer;
  transition: var(--cg-trans);
}
.crk-compare__countries-toggle:hover { color: var(--cg-gold); border-color: rgba(212,175,55,.35); }
.crk-compare__countries-toggle .fa-chevron-down { font-size: .6rem; transition: transform .25s; }
.crk-compare__countries-toggle.is-open .fa-chevron-down { transform: rotate(180deg); }
.crk-compare__countries-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 8px; width: 220px; z-index: 20;
  background: #141c29; border: 1px solid rgba(212,175,55,.3);
  border-radius: var(--cg-radius); padding: 12px 16px;
  font-size: .74rem; color: var(--cg-text-dim); text-align: left;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.crk-compare__countries-panel[hidden] { display: none; }

/* The panel is an absolute-positioned overlay (by design — it floats
   over the Overview rows below the sticky header rather than pushing
   them down). Bump the open column's header above its siblings' shared
   z-index:3 so the overlay always wins the paint order, whichever
   column's toggle is open. */
.crk-compare__header:has(.crk-compare__countries-toggle.is-open) {
  z-index: 10;
  overflow: visible;
}

/* ── Value cell formatting ─────────────────────────────────────────── */
.crk-compare__dash { color: rgba(255,255,255,.25); }

.crk-compare__bool { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; }
.crk-compare__bool--yes { background: rgba(0,200,81,.15); color: var(--cg-green); }
.crk-compare__bool--no  { background: rgba(255,51,51,.12); color: var(--cg-red); }

.crk-compare__pills { display: flex; flex-wrap: wrap; gap: 6px; }

.crk-compare__progress { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.crk-compare__progress-val { font-size: .8rem; font-weight: 700; color: #ffffff; }
.crk-progress { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.crk-progress__bar {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--cg-gold-dark), var(--cg-gold), var(--cg-gold-light));
  box-shadow: 0 0 8px rgba(212,175,55,.4);
}

/* Payout speed — plain text like every other casino's value cell, not
   a badge/pill (only exists as a marker class so the generic comma
   pill-splitter below skips it). */
.crk-compare__speed-plain { color: #ffffff; font-weight: 400; }

/* Play Now text stays legible (near-black) in its resting gold-filled
   state, regardless of any surrounding content-area color overrides.
   Hover inverts to a transparent background (.hpv2-btn--gold:hover in
   homepage-v2.css), so the :hover override below keeps the text gold
   instead of the resting black — otherwise it'd be unreadable. */
.crk-compare__actions .crk-compare__play {
  color: #000000 !important;
}
.crk-compare__actions .crk-compare__play:hover {
  color: #C98E35 !important;
}

/* ── 5. FAQ / Terms accordion — ranking-page overrides ────────────────
   Base .hpv2-faq-* rules live in homepage-v2.css (shared with the
   homepage FAQ) and cap the answer's max-height at a fixed 500px —
   page-ranking.php's JS now sets max-height to the panel's real
   scrollHeight inline instead, so these overrides only need to handle
   spacing/typography and a stray light-grey <hr> baked into some
   authored FAQ/Terms content (unstyled against the dark theme, reads
   as a white line under the question).
   Also applied under .crb-page (the bonus-page family's dark wrapper) —
   page-blacklisted-casinos.php is the first .crb-page template with a
   real FAQ accordion, and it uses the same scrollHeight-based JS, so it
   needs the same overrides rather than a duplicate copy. */
.hpv2-faq--terms { padding-top: 0; }

.crk-page .hpv2-faq-item.open .hpv2-faq-question,
.crb-page .hpv2-faq-item.open .hpv2-faq-question {
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.crk-page .hpv2-faq-answer hr,
.crk-page .hpv2-faq-answer .kt-divider,
.crb-page .hpv2-faq-answer hr,
.crb-page .hpv2-faq-answer .kt-divider {
  border: none !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  background: transparent !important;
  margin: 16px 0 !important;
  height: 0 !important;
}

.crk-page .hpv2-faq-item.open .hpv2-faq-answer,
.crb-page .hpv2-faq-item.open .hpv2-faq-answer { padding: 20px 24px 24px; }
.crk-page .hpv2-faq-answer p,
.crb-page .hpv2-faq-answer p { line-height: 1.8; margin: 0 0 12px; }
.crk-page .hpv2-faq-answer p:last-child,
.crb-page .hpv2-faq-answer p:last-child { margin-bottom: 0; }
.crk-page .hpv2-faq-answer ul,
.crk-page .hpv2-faq-answer ol,
.crb-page .hpv2-faq-answer ul,
.crb-page .hpv2-faq-answer ol { margin: 0 0 12px; padding-left: 22px; }
.crk-page .hpv2-faq-answer li,
.crb-page .hpv2-faq-answer li { line-height: 1.8; margin-bottom: 10px; }
.crk-page .hpv2-faq-answer li:last-child,
.crb-page .hpv2-faq-answer li:last-child { margin-bottom: 0; }

/* ── 6. Disclosure ─────────────────────────────────────────────────── */
.crk-disclosure { max-width: 900px; margin: 0 auto; text-align: center; }
.crk-disclosure p { color: var(--cg-text-dim); font-size: .88rem; line-height: 1.78; margin-top: 16px; }

/* ── 7. Responsive ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .crk-hero { padding: 46px 20px 26px; }

  /* The grid itself doesn't shrink below each column's comfortable
     minimum, so it becomes wider than the viewport, with the label
     column pinned via position:sticky;left:0 (already set
     unconditionally above) so it reads like a frozen first column
     while scrolling through casinos.

     The scrolling itself has to happen on .crk-compare directly, not
     the .crk-compare-scroll wrapper around it: position:sticky on a
     grid item only sticks correctly against its own grid container's
     scrollport, not an ancestor wrapper's — confirmed the wrapper-only
     setup left the label sticking to nothing (it just scrolled away
     with everything else). .crk-compare-scroll is left as a plain
     passthrough (overflow:visible) since .crk-compare now handles it.

     This also means .crk-compare can no longer keep overflow:hidden
     (used on desktop purely to clip content to its rounded corners) —
     hidden would clip the grid's own oversized content before it could
     ever become scrollable, making the cut-off pills genuinely
     unreachable rather than just undiscoverable. Corners can lose
     their clip at the scrolled edges on mobile; being able to reach
     the content at all matters more. */
  .crk-compare-scroll { overflow: visible; position: relative; }
  .crk-compare {
    grid-template-columns: 132px repeat(var(--crk-cols), 78vw);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  .crk-compare__cell { padding: 12px 14px; font-size: .8rem; }
  .crk-compare__header { padding: 18px 12px 14px; }
  .crk-compare__logo { max-width: 110px; height: 56px; }

  /* On alternating rows, .crk-compare__cell.crk-compare__row--alt (2
     classes) beats .crk-compare__label's own background (1 class) on
     specificity, painting a near-transparent rgba(255,255,255,.02)
     tint over the label instead of its intended solid #141c29 — invisible
     on desktop (nothing sits behind the label to bleed through since
     nothing scrolls there), but now that the label actually stays
     pinned while scrolling on mobile, whatever scrolled-past column
     content sits behind it shows through. !important guarantees the
     win without having to duplicate the alt-row's 2-class selector. */
  .crk-compare__label { background: #141c29 !important; }

  /* Scroll affordance — pill lists (Providers, Deposit/Withdrawal
     Methods, etc.) visually clip at the right edge with nothing to
     hint the row scrolls sideways. Reuses the same edge-fade technique
     already built for the homepage casino carousel
     (.hpv2-casinos__track-wrap::before/::after in homepage-v2.css).
     Anchored on .crk-compare-scroll (which no longer scrolls itself)
     rather than .crk-compare, so the fade stays pinned to the visible
     edge instead of scrolling away with the grid's own content. */
  .crk-compare-scroll::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    background: linear-gradient(270deg, var(--cg-bg-alt), transparent);
    pointer-events: none;
    z-index: 5;
  }
}

/* ── Why Choose Bitcoin Casinos (advantage cards) ─────────────────────────
   For "How to Get Started" steps, reuse .hpv2-review-method-*  directly
   (homepage-v2.css is already enqueued as a dependency of this file) —
   no new CSS needed for that pattern. This block covers only the
   title+description advantage cards, which have no existing equivalent. */
.btc-advantages-header   { text-align: center; margin-bottom: 32px; }
.btc-advantages-title {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--cg-gold);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;
}

.btc-advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.btc-advantage-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 28px 24px;
}
.btc-advantage-card__title { font-size: .95rem; font-weight: 700; color: var(--cg-text); margin: 0 0 8px; }
.btc-advantage-card__text  { font-size: .83rem; color: var(--cg-text-dim); line-height: 1.65; margin: 0; }

@media (max-width: 900px) {
  .btc-advantages-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .btc-advantages-grid { grid-template-columns: 1fr; }
}

/* ── Related Guides (internal linking block) ──────────────────────────── */
.btc-related-header { text-align: center; margin-bottom: 32px; }

.btc-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.btc-related-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  transition: border-color var(--cg-trans), transform var(--cg-trans);
}
.btc-related-card:hover { border-color: rgba(212,175,55,.4); transform: translateY(-2px); }

.btc-related-card__title { font-size: .95rem; font-weight: 700; color: #fff; margin: 0 0 6px; }
.btc-related-card__text  { font-size: .83rem; color: var(--cg-text-dim); line-height: 1.5; margin: 0; }

.btc-related-card__arrow {
  color: var(--cg-gold);
  font-size: 1.1rem;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--cg-trans), transform var(--cg-trans);
}
.btc-related-card:hover .btc-related-card__arrow { opacity: 1; transform: translateX(0); }

@media (max-width: 900px) {
  .btc-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .btc-related-grid { grid-template-columns: 1fr; }
}