/* Exact screenshot look — namespaced rrcX-*, HTML/CSS only */

.rrcX-hero{
  --ink:#0b1e2d;
  --muted:#7f8e98;
  --body:#2d3f4f;
  --cta:#24c06f;
  --cta-ink:#fff;
  --bg-top:#f7fafc;
  --bg-btm:#f2f7fb;
  --shadow:0 6px 18px rgba(10,42,70,.08);
  background:linear-gradient(180deg,var(--bg-top),var(--bg-btm));
  border-radius:14px;
  padding:22px 24px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: auto auto auto;
  grid-template-areas: 'left right' 'excerpt excerpt' 'meta meta';
  gap:24px;
  align-items:stretch; /* allow right column to stretch for bottom meta */
}

.rrcX-left{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:flex-start}
.rrcX-media{position:relative; width:132px; height:132px}
.rrcX-logo{width:132px; height:132px; border-radius:12px; object-fit:cover; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.06)}
.rrcX-pill{position:absolute; top:-12px; left:-10px; background:#fff; color:var(--ink); border-radius:999px; padding:6px 10px; font-weight:800; font-size:14px; box-shadow:0 2px 6px rgba(0,0,0,.12)}

.rrcX-text{display:flex; flex-direction:column; gap:8px}
.rrcX-title{margin:0; font-size:clamp(28px,3.2vw,44px); line-height:1.1; letter-spacing:-.01em; color:#111}
.rrcX-offer{font-size:clamp(18px,2.1vw,22px); font-weight:800; color:#113549}
.rrcX-excerpt{margin:0; color:var(--body)}

/* Right column: CTA+terms at top, meta pinned to bottom right */
.rrcX-right{display:flex; flex-direction:column; align-items:flex-end}
.rrcX-ctaWrap{display:inline-flex; flex-direction:column; align-items:stretch; gap:8px; min-width:260px}
.rrcX-cta{display:inline-flex; align-items:flex-start; justify-content:center; padding:16px 34px; background:var(--cta); color:var(--cta-ink) !important; border-radius:12px; text-decoration:none !important; font-weight:800; min-width:260px; box-shadow:0 10px 22px rgba(36,192,111,.25)}
.rrcX-cta:hover{filter:brightness(.96); color:var(--cta-ink) !important}
.rrcX-cta:visited{color:var(--cta-ink) !important}
.rrcX-ctaIcon{margin-left:10px}
.rrcX-terms{font-size:12px; color:var(--muted); text-align:center}
.rrcX-meta{margin-top:auto; font-size:12px; color:#6c7c88; text-align:right}
.rrcX-check{color:#22c46e; margin-right:6px}

/* Mobile */
@media (max-width: 980px){
  .rrcX-hero{grid-template-columns:1fr}
  .rrcX-right{align-items:stretch}
  .rrcX-ctaWrap{min-width:0; width:100%}
  .rrcX-cta{width:100%}
  .rrcX-terms{width:100%}
  .rrcX-meta{text-align:left; margin-top:10px}
  .rrcX-media{width:104px; height:104px}
  .rrcX-logo{width:104px; height:104px; border-radius:10px}
}

/* Ensure the green check is always green and aligned */
.rrcX-meta{display:flex; align-items:center; gap:6px}
.rrcX-check{display:inline-flex; align-items:center}
.rrcX-check svg{width:14px; height:14px; stroke:#22c46e !important; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}

/* Excerpt spans full width below the top row (logo/title/CTA) */
.rrcX-excerpt{grid-column:1 / -1; margin-top:8px; color:var(--body)}
/* Meta sits at the very bottom-right */
.rrcX-meta{grid-column:2; justify-self:end; margin-top:6px}
/* Keep right column only for CTA + terms now */
.rrcX-right{display:flex; flex-direction:column; align-items:flex-end}
/* Mobile stacking still vertical */
@media (max-width:980px){
  .rrcX-meta{grid-column:1 / -1; justify-self:start}
}

/* Explicit grid placement */
.rrcX-left{grid-column:1; grid-row:1}
.rrcX-right{grid-column:2; grid-row:1}
.rrcX-excerpt{grid-column:1 / -1; grid-row:2; margin-top:10px; color:var(--body)}
.rrcX-meta{grid-column:2; grid-row:3; justify-self:end; align-self:end; margin-top:8px}
@media (max-width:980px){
  .rrcX-hero{grid-template-columns:1fr; grid-template-rows:auto auto auto auto}
  .rrcX-left{grid-column:1; grid-row:1}
  .rrcX-right{grid-column:1; grid-row:2; align-items:stretch}
  .rrcX-excerpt{grid-column:1; grid-row:3}
  .rrcX-meta{grid-column:1; grid-row:4; justify-self:start; align-self:start; margin-top:6px}
}

/* Rating pill parts: number + star */
.rrcX-pill{display:inline-flex; align-items:center; gap:4px}
.rrcX-pill .rrcX-num{color:var(--ink); font-weight:800}
.rrcX-pill .rrcX-star{color:#ff9800; font-weight:900} /* orange star */

/* Grid areas for robust ordering */
.rrcX-left{grid-area:left; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:flex-start}
.rrcX-right{grid-area:right; display:flex; flex-direction:column; align-items:flex-end}
.rrcX-excerpt{grid-area:excerpt; margin-top:10px; color:var(--body)}
.rrcX-meta{grid-area:meta; justify-self:end; align-self:end; margin-top:8px}

/* Mobile stacking */
@media (max-width:980px){
  .rrcX-hero{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 'left' 'right' 'excerpt' 'meta';
  }
  .rrcX-right{align-items:stretch}
}


/* Prevent text column from forcing overflow in grid */
.rrcX-text{min-width:0}
.rrcX-title, .rrcX-offer{word-wrap:break-word}

/* Slightly larger row gap below top for safety */
.rrcX-hero{row-gap:10px}

/* v1.0.9 — Mobile stack + centered alignment */
@media (max-width: 980px){
  .rrcX-left{justify-items:center}
  .rrcX-media{margin:0 auto}
  .rrcX-text{min-width:0; text-align:center}
  .rrcX-title, .rrcX-offer, .rrcX-excerpt{text-align:center}
  .rrcX-right{align-items:center}
  .rrcX-cta{width:100%}
  .rrcX-terms{text-align:center; width:100%}
  .rrcX-meta{justify-self:center; text-align:center}
}


/* v1.1.0 — Payout & Win Rate stats row */
.rrcX-stats{display:flex; gap:18px; align-items:center; margin-top:6px; font-size:14px; color:#113549}
.rrcX-stat{display:inline-flex; gap:6px; align-items:center; line-height:1}
.rrcX-stat .rrcX-ico{font-size:14px; opacity:.9}
.rrcX-stat .rrcX-k{opacity:.8}
.rrcX-stat .rrcX-v{font-weight:800}

.rrcX-rate--great{color:#1a7f37}
.rrcX-rate--solid{color:#2e7d32}
.rrcX-rate--weak{color:#b36b00}
.rrcX-rate--avoid{color:#d32f2f}


/* v1.0.21 — excerpt + stats wrapper */
.rrcX-descwrap{ grid-column:1; }
.rrcX-descwrap .rrcX-excerpt{ margin:0 0 10px 0; }
.rrcX-descwrap .rrcX-stats{
  display:flex; flex-wrap:wrap; align-items:center; gap:28px;
  margin-top:6px; padding-top:12px; border-top:1px solid rgba(17,53,73,.08);
  font-size:14px; color:#113549;
}
.rrcX-descwrap .rrcX-stat{ position:relative; display:inline-flex; align-items:center; gap:8px; line-height:1.2; color:#5a6e7a; }
.rrcX-descwrap .rrcX-stat::before /* disabled */{ content:''; width:6px; height:6px; border-radius:999px; background:#90a4ae; opacity:.6; display:inline-block; margin-right:10px; }
.rrcX-descwrap .rrcX-stat .rrcX-v{ font-weight:800; color:#113549; }
.rrcX-rate--great{ color:#1a7f37; } .rrcX-rate--solid{ color:#2e7d32; } .rrcX-rate--weak{ color:#b36b00; } .rrcX-rate--avoid{ color:#d32f2f; }

/* v1.0.23 — show icons for wrapper stats */
.rrcX-descwrap .rrcX-stat .rrcX-ico{display:inline-block}


/* v1.0.25 — bottom row: stats left, meta right */
.rrcX-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:10px}
.rrcX-bottom .rrcX-stats{display:flex;gap:22px;align-items:center;margin:0;padding:0;border:0}
.rrcX-bottom .rrcX-stat{display:inline-flex;gap:8px;align-items:center;color:#5a6e7a}
.rrcX-bottom .rrcX-stat::before{content:none}
.rrcX-bottom .rrcX-stat .rrcX-v{font-weight:800;color:#113549}
/* keep RTP colors */
.rrcX-rate--great{color:#1a7f37}.rrcX-rate--solid{color:#2e7d32}.rrcX-rate--weak{color:#b36b00}.rrcX-rate--avoid{color:#d32f2f}


/* v1.0.28 — ensure meta shows on right of the new bottom row */
.rrcX-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:10px}
.rrcX-bottom .rrcX-stats{display:flex;gap:22px;align-items:center;margin:0;padding:0;border:0}
.rrcX-bottom .rrcX-stat{display:inline-flex;gap:8px;align-items:center;color:#5a6e7a}
.rrcX-bottom .rrcX-stat::before{content:none}
.rrcX-bottom .rrcX-stat .rrcX-v{font-weight:800;color:#113549}
.rrcX-bottom .rrcX-meta{grid-area:auto;grid-column:auto;grid-row:auto;justify-self:auto;align-self:center;margin:0;display:flex;align-items:center;gap:6px;color:#6c7c88;font-size:12px}


/* v1.0.30 — align bottom row; restore trusted check icon */
.rrcX-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:8px}
.rrcX-bottom .rrcX-stats{display:flex;gap:22px;align-items:center;margin:0;padding:0;border:0}
.rrcX-bottom .rrcX-meta{display:flex;align-items:center;gap:8px;margin:0;color:#6c7c88;font-size:12px;line-height:1}
.rrcX-bottom .rrcX-check{display:inline-flex;align-items:center;justify-content:center;color:#22a06b}


/* v1.0.39 — make excerpt+bottom full-width and align meta to CTA edge */
.rrcX-hero .rrcX-descwrap{grid-column:1 / -1;}
.rrcX-hero .rrcX-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:10px}
.rrcX-hero .rrcX-bottom .rrcX-stats{display:inline-flex;gap:22px;align-items:center;margin:0;padding:0;border:0}
.rrcX-hero .rrcX-bottom .rrcX-meta{display:inline-flex;gap:8px;align-items:center;white-space:nowrap;color:#6c7c88;font-size:12px;line-height:1.2}
.rrcX-hero .rrcX-descwrap .rrcX-stat::before{content:none !important}
.rrcX-hero .rrcX-bottom .rrcX-ico,
.rrcX-hero .rrcX-bottom .rrcX-check{position:relative;top:1px}
@media (max-width:820px){
  .rrcX-hero .rrcX-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .rrcX-hero .rrcX-bottom .rrcX-meta{white-space:normal}
}


/* v1.0.40 — CSS-only verified badge for "Written by" meta */
.rrcX-hero .rrcX-meta .rrcX-check{
  --sz: 16px;         /* size */
  --r: 4px;           /* scallop radius */
  width: var(--sz);
  height: var(--sz);
  color: #1a7f37;     /* badge green */
  position: relative;
  display: inline-block;
  flex: 0 0 var(--sz);
  margin-right: 6px;
}
/* hide old inline svg if present */
.rrcX-hero .rrcX-meta .rrcX-check > svg{ display:none !important; }

/* scalloped badge */
.rrcX-hero .rrcX-meta .rrcX-check::before{
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  border-radius: 50%;
  /* build scallops with masks (works in modern browsers) */
  -webkit-mask:
    radial-gradient(farthest-side,#000 98%,#0000) calc(50% + var(--r)) 50% / calc(2*var(--r)) calc(2*var(--r)) repeat-x,
    radial-gradient(farthest-side,#000 98%,#0000) 50% calc(50% + var(--r)) / calc(2*var(--r)) calc(2*var(--r)) repeat-y,
    radial-gradient(closest-side,#000 80%,#0000);
          mask:
    radial-gradient(farthest-side,#000 98%,#0000) calc(50% + var(--r)) 50% / calc(2*var(--r)) calc(2*var(--r)) repeat-x,
    radial-gradient(farthest-side,#000 98%,#0000) 50% calc(50% + var(--r)) / calc(2*var(--r)) calc(2*var(--r)) repeat-y,
    radial-gradient(closest-side,#000 80%,#0000);
}

/* white check */
.rrcX-hero .rrcX-meta .rrcX-check::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: translate(-50%, -60%) rotate(45deg);
  border-radius: 1px;
}


/* v1.0.41 — simplify meta badge to a crisp circle + white check */
.rrcX-hero .rrcX-meta .rrcX-check{
  --sz: 14px;
  width: var(--sz);
  height: var(--sz);
  background: #1a7f37;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  flex: 0 0 var(--sz);
  margin-right: 6px;
  top: 1px;
}
/* hide any inline svg that may exist */
.rrcX-hero .rrcX-meta .rrcX-check > svg{ display:none !important; }

/* crisp tick */
.rrcX-hero .rrcX-meta .rrcX-check::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: translate(-50%, -58%) rotate(45deg);
  border-radius: 1px;
}

/* v1.0.44 — timer color hardening */
.mfc-hero .ico{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;}
.rrt-ico-svg{ width:16px; height:16px; display:inline-block; vertical-align:-2px;}
.rrt-ico-svg--timer{ color:#64748b !important; }                 /* color the svg itself */
.rrt-ico-svg--bolt{ color:#f59e0b;}  /* amber bolt */