html.light-bg .cbc-logo,
html.light-bg .cbd-logo,
html.light-bg .cbp-logo,
html.light-bg .cbm-logo,
html.light-bg .cbs-hero-logo,
html.light-bg .cbs-mini-logo,
html.light-bg .cbn-logo,
html.light-bg .cbb-logo,
html.light-bg .cbx-logo,
html.light-bg .cbx-mlogo,
html.light-bg .cbl-logo,
html.light-bg .cbt-logo,
html.light-bg .bg-logo img,
html.light-bg .bl-logo img,
html.light-bg .bc-logo img,
html.light-bg .bonus-logo,
html.light-bg .casino-logo,
html.light-bg .site-logo,
html.light-bg .header__logo-img,
html.light-bg .footer__logo {
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.6)) drop-shadow(0 0 0.5px rgba(0,0,0,0.4));
}
html.light-bg .cbd-logo,
html.light-bg .cbs-mini-logo,
html.light-bg .cbs-hero-logo {
  background: #1e2030 !important; border-radius: 10px;
}
html.light-bg .cbc-logo-wrap,
html.light-bg .cbp-logo,
html.light-bg .cbm-logo,
html.light-bg .cbn-logo,
html.light-bg .cbb-logo,
html.light-bg .cbx-logo,
html.light-bg .cbx-mlogo,
html.light-bg .cbl-logo,
html.light-bg .cbt-logo {
  background: #1e2030; border-radius: 8px; padding: 6px;
}
html.light-bg .cbc-logo { padding: 4px; }
html.light-bg .bg-logo img,
html.light-bg .bl-logo img,
html.light-bg .bc-logo img,
html.light-bg .casino-logo img,
html.light-bg .site-logo img,
html.light-bg .bonus-logo img {
  filter: none;
}

/* ===== Uniform content width (1280px / max-w-7xl) — no stretch on wide screens, единый размер ===== */
.container,
.cb-container,
.slots__container,
.faq-accordion__container,
.faq-cards__container,
.faq-table__container,
.faq-twocol__container,
.sports-widget-container,
.reviews-cards-grid,
.numbered-features-grid,
.images-gallery__container,
.author-article-container,
.pros-cons__container,
.demo-game__container,
.cta-block__container {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   HIGH-CTR SHORTCODES — global "juicy" overrides (2026-06-24)
   Targets stable component class names. Theme-var driven.
   ============================================================ */
@keyframes hctaPulse { 0%,100%{box-shadow:0 6px 18px color-mix(in srgb,var(--button-color) 40%,transparent)} 50%{box-shadow:0 12px 32px color-mix(in srgb,var(--button-color) 70%,transparent)} }
@keyframes hctaShine { 0%{left:-130%} 60%,100%{left:150%} }
@keyframes hctaFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

/* ---- Universal primary CTA buttons across all shortcodes ---- */
.cta-button,.bc-btn,.bl-btn,.claim-btn,.claim-btn--card,.claim-btn-mobile,
.bet-now-btn,.large-card-btn,.btn-offer,.hero-cta-btn,.article-link-button,
.large-card-odds .large-odd{
  position:relative!important;overflow:hidden!important;
  background:linear-gradient(135deg,var(--button-color),color-mix(in srgb,var(--button-color) 72%,#000))!important;
  color:var(--button-text-color,#fff)!important;
  font-weight:800!important;letter-spacing:.3px!important;text-transform:uppercase;
  border:none!important;
  box-shadow:0 6px 18px color-mix(in srgb,var(--button-color) 42%,transparent)!important;
  transition:transform .2s,filter .2s!important;
  animation:hctaPulse 2.6s ease-in-out infinite;
}
.cta-button:hover,.bc-btn:hover,.bl-btn:hover,.claim-btn:hover,.claim-btn--card:hover,
.claim-btn-mobile:hover,.bet-now-btn:hover,.large-card-btn:hover,.btn-offer:hover,
.hero-cta-btn:hover,.article-link-button:hover{transform:scale(1.05)!important;filter:brightness(1.1)!important}
.cta-button::after,.bc-btn::after,.bl-btn::after,.claim-btn::after,.claim-btn--card::after,
.bet-now-btn::after,.large-card-btn::after,.btn-offer::after,.hero-cta-btn::after,.article-link-button::after{
  content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(120deg,transparent,#ffffff5c,transparent);transform:skewX(-20deg);
  animation:hctaShine 3.4s ease-in-out infinite;pointer-events:none;z-index:1}

/* ---- Generic card lift+glow (slots/reviews/bonuses/demo/features/faq-cards) ---- */
.slots__card,.review-card,.bl-row,.bc-slide,.demo-game-card,.feature-card,.card-item,
.faq-cards__card,.large-card,.event-item{
  transition:transform .25s,box-shadow .25s,border-color .25s!important}
.slots__card:hover,.review-card:hover,.bl-row:hover,.demo-game-card:hover,.feature-card:hover,
.card-item:hover,.faq-cards__card:hover,.large-card:hover,.event-item:hover{
  transform:translateY(-5px)!important;
  box-shadow:0 16px 40px color-mix(in srgb,var(--button-color) 22%,#00000040)!important;
  border-color:var(--button-color)!important}

/* ---- Rank / number badges (reviews, bonuses, features, faq-cards) ---- */
.review-card__rank,.bl-rank,.card-number,.compact-number,.faq-cards__number{
  background:linear-gradient(135deg,var(--button-color),color-mix(in srgb,var(--button-color) 60%,#000))!important;
  color:var(--button-text-color,#fff)!important;font-weight:900!important;
  box-shadow:0 3px 10px #0003!important}
.review-card:nth-child(1) .review-card__rank,.bl-row:nth-child(1) .bl-rank{
  background:linear-gradient(135deg,#ffd86b,#f5a623)!important;color:#3a2a00!important}
.review-card:nth-child(2) .review-card__rank,.bl-row:nth-child(2) .bl-rank{
  background:linear-gradient(135deg,#eef2f7,#aeb8c4)!important;color:#2a2f36!important}
.review-card:nth-child(3) .review-card__rank,.bl-row:nth-child(3) .bl-rank{
  background:linear-gradient(135deg,#f0b078,#d57a36)!important;color:#3a1e00!important}

/* ---- Logos: clean white frame + contain ---- */
.bc-logo,.bl-logo,.review-card__logo img,.site-logo img{
  -o-object-fit:contain!important;object-fit:contain!important;
  filter:drop-shadow(0 2px 6px #00000040)}

/* ---- CTA block surface: premium gradient panel ---- */
.cta-surface{
  background:linear-gradient(135deg,color-mix(in srgb,var(--card-background-color,#1a1a2e) 90%,var(--button-color)),var(--card-background-color,#1a1a2e))!important;
  border:1.5px solid color-mix(in srgb,var(--button-color) 45%,transparent)!important;
  box-shadow:0 10px 36px #00000033!important}

/* ---- FAQ accordion: accent rows + animated open ---- */
.faq-accordion__item{transition:border-color .2s,box-shadow .2s!important}
.faq-accordion__item:hover{border-color:var(--button-color)!important;box-shadow:0 6px 20px #00000026!important}
.faq-accordion__question{transition:color .2s!important;font-weight:700!important}
.faq-accordion__question:hover{color:var(--button-color)!important}
.faq-accordion__icon{transition:transform .25s,color .2s!important}
.faq-accordion__item.is-active .faq-accordion__icon,.faq-accordion__item[open] .faq-accordion__icon{color:var(--button-color)!important}
.faq-cards__number{display:inline-flex;align-items:center;justify-content:center}

/* ---- Pros / cons colour coding ---- */
.columns-col-header--pros,.minimal-badge--pros{
  background:linear-gradient(135deg,#1fab6b,#0f8a52)!important;color:#fff!important}
.columns-col-header--cons,.minimal-badge--cons{
  background:linear-gradient(135deg,#e0566a,#c0392b)!important;color:#fff!important}
.columns-col--pros{border-color:#1fab6b55!important}
.columns-col--cons{border-color:#e0566a55!important}

/* ---- Sports: odds chips pop ---- */
.large-odd,.event-odd{font-weight:800!important;transition:transform .15s,background .15s!important}
.large-odd:hover,.event-odd:hover{transform:translateY(-2px)!important}

/* ---- Demo game: secondary "demo" button outline, modal offer button primary ---- */
.btn-demo{border:2px solid var(--button-color)!important;color:var(--primary-color)!important;font-weight:700!important;transition:background .2s,color .2s!important}
.btn-demo:hover{background:var(--button-color)!important;color:var(--button-text-color,#fff)!important}

/* ---- Hero CTA gets a gentle float on top of the shared CTA styles ---- */
.hero-cta-btn{animation:hctaPulse 2.6s ease-in-out infinite,hctaFloat 3.2s ease-in-out infinite}

/* ---- Slots play overlay: circular gradient ---- */
.slots__card-play{
  background:linear-gradient(135deg,var(--button-color),color-mix(in srgb,var(--button-color) 65%,#000))!important;
  color:var(--button-text-color,#fff)!important;box-shadow:0 4px 14px #0004!important;
  transition:transform .2s!important}
.slots__card:hover .slots__card-play{transform:scale(1.12)!important}
/* ============================================================ */

/* ============================================================
   HERO v2 — CONTAINED (not full-screen) + image SIDE-BY-SIDE
   (image is its own panel, no text overlaid), compact, offer-first,
   mobile-first, high-CTR. 2026-06-24
   ============================================================ */
/* Contain to content width (kills full-screen stretch) + clean rounded card.
   min-height:0 kills the old 60vh full-height. */
.hero-block{max-width:1280px!important;margin-left:auto!important;margin-right:auto!important;
  min-height:0!important;border-radius:1rem;overflow:hidden;padding:1.75rem 1.25rem!important}
.hero-block[data-layout="minimal"]{padding:1.4rem 1.25rem!important}
@media (min-width:768px){.hero-block{padding:2.5rem!important}}

/* Title / subtitle / CTA — compact, offer-first */
.hero-block h1{font-size:clamp(1.6rem,5vw,2.4rem)!important;line-height:1.12!important;
  margin-bottom:.6rem!important;letter-spacing:-.01em}
@media (min-width:768px){.hero-block h1{font-size:clamp(2rem,2.8vw,3rem)!important}}
.hero-block .hero-subtitle--theme,.hero-block .hero-subtitle--on-image{
  font-size:1rem!important;line-height:1.5!important;margin-bottom:1.1rem!important;max-width:46rem}
.hero-block .hero-cta-btn{padding:.95rem 1.9rem!important;font-size:1.04rem!important;border-radius:.7rem!important}
@media (max-width:639px){.hero-block .hero-cta-btn{display:flex!important;width:100%!important;justify-content:center!important}}

/* Fallback (no image OR :has unsupported): keep a readable scrim if text overlays an image */
.hero-block>.absolute::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,10,20,.30),rgba(8,10,20,.58))}

/* ---- SIDE-BY-SIDE: when a background image exists, lift it OUT of the background
   into its own column so text never sits on the picture ---- */
.hero-block[data-layout="centered"]:has(>.absolute),
.hero-block[data-layout="video"]:has(>.absolute){display:flex!important;flex-direction:column;gap:1.1rem;align-items:stretch}
.hero-block:has(>.absolute)>.absolute{position:relative!important;inset:auto!important;z-index:1!important;order:2;
  width:100%;border-radius:.8rem;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.28)}
.hero-block:has(>.absolute)>.absolute img{position:relative!important;width:100%!important;height:100%!important;
  object-fit:cover!important;min-height:170px}
.hero-block:has(>.absolute)>.absolute::after{display:none!important}        /* no scrim — image is its own panel */
.hero-block:has(>.absolute)>.container{order:1!important;text-align:left!important;max-width:none!important;
  margin:0!important;display:flex;flex-direction:column;justify-content:center}
/* text is no longer on the image → use theme colours, drop white+shadow */
.hero-block:has(>.absolute) .hero-title--on-image{color:var(--primary-color)!important;text-shadow:none!important;-webkit-text-stroke:0!important}
.hero-block:has(>.absolute) .hero-subtitle--on-image{color:var(--secondary-color)!important;text-shadow:none!important;-webkit-text-stroke:0!important}
@media (max-width:767px){.hero-block:has(>.absolute)>.absolute img{max-height:200px}}
@media (min-width:768px){
  .hero-block[data-layout="centered"]:has(>.absolute),
  .hero-block[data-layout="video"]:has(>.absolute){flex-direction:row!important;gap:2.25rem;align-items:stretch}
  .hero-block:has(>.absolute)>.absolute{flex:0 0 42%;max-width:42%;order:2}
  .hero-block:has(>.absolute)>.absolute img{min-height:300px}
  .hero-block:has(>.absolute)>.container{flex:1 1 0;order:1}
}
/* native split layout already has a side image — just tame it on mobile */
@media (max-width:767px){.hero-block[data-layout="split"] .hero-image img{max-height:220px;width:100%;object-fit:cover}}

/* ===== HERO polish — premium offer panel, accents, motion (CTR) ===== */
/* Premium framed panel (translucent theme tint → works on light & dark) */
.hero-block:has(>.absolute){position:relative;
  background:linear-gradient(135deg,color-mix(in srgb,var(--button-color) 7%,transparent),transparent 62%)!important;
  border:1px solid color-mix(in srgb,var(--button-color) 16%,transparent)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.16)!important}
/* soft accent glow for depth (behind content) */
.hero-block:has(>.absolute)::before{content:'';position:absolute;top:-40%;left:-8%;width:50%;height:180%;z-index:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--button-color) 18%,transparent),transparent);pointer-events:none}
.hero-block:has(>.absolute)>.container,.hero-block:has(>.absolute)>.absolute{position:relative;z-index:2}
/* eyebrow accent bar above the title (left-aligned layouts) */
.hero-block:has(>.absolute) h1::before,.hero-block[data-layout="split"] .hero-content h1::before{
  content:'';display:block;width:48px;height:4px;border-radius:3px;margin:0 0 .85rem;
  background:linear-gradient(90deg,var(--button-color),color-mix(in srgb,var(--button-color) 45%,#fff))}
/* image panel: subtle accent ring + zoom on hover */
.hero-block:has(>.absolute)>.absolute::before{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--button-color) 36%,transparent);pointer-events:none}
.hero-block:has(>.absolute)>.absolute img{transition:transform .5s ease!important}
.hero-block:has(>.absolute):hover>.absolute img{transform:scale(1.045)!important}
/* CTA arrow micro-nudge — pulls the eye toward the click */
@keyframes heroArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.hero-block .hero-cta-btn .external-icon{animation:heroArrow 1.4s ease-in-out infinite}
/* ============================================================ */

/* ===== CTA block — readable heading/description (theme colours; banner layout used
   color:var(--background-color) = invisible on dark themes). 2026-06-24 ===== */
.cta-block h2,.cta-surface h2,.cta-copy h2{color:var(--primary-color)!important}
.cta-block .cta-description,.cta-block .prose,.cta-surface .prose,.cta-surface .cta-description{color:var(--secondary-color)!important}
/* ============================================================ */

/* CTA block spacing (2026-06-24): separate the CTA banner from surrounding content */
.cta-block{margin-block:2.5rem}
@media (min-width:768px){.cta-block{margin-block:3rem}}

/* ============================================================
   [button] shortcode — 10 MODERN styles (v4 2026-06-24)
   Premium SaaS aesthetic (Stripe/Linear/Vercel/Apple):
   soft layered + colored shadows, hairline highlights, subtle
   gradients, smooth micro-interactions, focus rings.
   Auto-contrast text (oklch) keeps it readable on light & dark themes.
   ============================================================ */
.sc-btn-wrap{display:block;margin:1.5rem 0}
.sc-btn{
  --scb:var(--button-color,var(--primary-color,#6366f1));
  --scb-accent:var(--accent-color,var(--hover-color,var(--secondary-color,var(--button-color,#8b5cf6))));
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.45rem;font-weight:600;font-size:.95rem;line-height:1.25;
  letter-spacing:0;border:0;border-radius:.7rem;
  text-decoration:none;cursor:pointer;white-space:nowrap;isolation:isolate;
  transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),background-color .2s ease,filter .2s ease,border-color .2s ease;
  -webkit-tap-highlight-color:transparent}
.sc-btn:active{transform:translateY(0) scale(.985)}
.sc-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--scb) 65%,transparent);outline-offset:2px}
@media (max-width:639px){.sc-btn{width:100%;padding-block:.82rem;font-size:1rem}}

/* 1 · solid — flat fill, hairline highlight, soft colored shadow */
.sc-btn--primary{background:var(--scb);box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 14px -3px color-mix(in srgb,var(--scb) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.12)}
.sc-btn--primary:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 2px 5px rgba(0,0,0,.14),0 12px 30px -6px color-mix(in srgb,var(--scb) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.16)}

/* 2 · gradient — refined diagonal duotone */
.sc-btn--gradient{background:linear-gradient(135deg,var(--scb),var(--scb-accent));box-shadow:0 1px 2px rgba(0,0,0,.12),0 6px 20px -4px color-mix(in srgb,var(--scb-accent) 48%,transparent)}
.sc-btn--gradient:hover{transform:translateY(-2px);filter:brightness(1.05) saturate(1.05);box-shadow:0 2px 5px rgba(0,0,0,.14),0 13px 32px -6px color-mix(in srgb,var(--scb-accent) 60%,transparent)}

/* 3 · outline — 1.5px ring, subtle tint on hover */
.sc-btn--outline{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--scb) 55%,transparent)}
.sc-btn--outline:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--scb) 9%,transparent);box-shadow:inset 0 0 0 1.5px var(--scb)}

/* 4 · glow — soft diffused colored halo */
.sc-btn--glow{background:var(--scb);box-shadow:0 0 0 1px color-mix(in srgb,var(--scb) 35%,transparent),0 0 18px -2px color-mix(in srgb,var(--scb) 62%,transparent),0 4px 16px -4px color-mix(in srgb,var(--scb) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.1);animation:scbGlow 3s ease-in-out infinite}
@keyframes scbGlow{0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--scb) 35%,transparent),0 0 16px -3px color-mix(in srgb,var(--scb) 55%,transparent),0 4px 16px -4px color-mix(in srgb,var(--scb) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.1)}50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--scb) 45%,transparent),0 0 26px 0 color-mix(in srgb,var(--scb) 72%,transparent),0 6px 22px -4px color-mix(in srgb,var(--scb) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.1)}}
.sc-btn--glow:hover{transform:translateY(-2px);filter:brightness(1.04)}

/* 5 · pill — rounded solid */
.sc-btn--pill{background:var(--scb);border-radius:999px;padding-inline:1.75rem;box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 14px -3px color-mix(in srgb,var(--scb) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.12)}
.sc-btn--pill:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 2px 5px rgba(0,0,0,.14),0 12px 30px -6px color-mix(in srgb,var(--scb) 55%,transparent)}

/* 6 · soft — tonal secondary */
.sc-btn--soft{background:rgba(127,127,127,.1);background:color-mix(in srgb,var(--scb) 12%,transparent)}
.sc-btn--soft:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--scb) 20%,transparent)}

/* 7 · shine — solid with a slow elegant shimmer */
.sc-btn--shine{background:var(--scb);position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 14px -3px color-mix(in srgb,var(--scb) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.12)}
.sc-btn--shine::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);animation:scbShine 4s ease-in-out infinite}
@keyframes scbShine{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.sc-btn--shine:hover{transform:translateY(-2px);filter:brightness(1.04)}

/* 8 · elevated — modern floating depth (no bevel) */
.sc-btn--3d{background:var(--scb);box-shadow:0 2px 4px rgba(0,0,0,.1),0 8px 18px -6px rgba(0,0,0,.28),0 4px 14px -3px color-mix(in srgb,var(--scb) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.12)}
.sc-btn--3d:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(0,0,0,.12),0 18px 34px -8px rgba(0,0,0,.34),0 10px 26px -6px color-mix(in srgb,var(--scb) 48%,transparent),inset 0 1px 0 rgba(255,255,255,.15)}

/* 9 · ghost — minimal text button */
.sc-btn--ghost{background:transparent;padding-inline:.85rem}
.sc-btn--ghost:hover{background:rgba(127,127,127,.1);background:color-mix(in srgb,var(--scb) 11%,transparent)}

/* 10 · arrow — inline link with motion */
.sc-btn--arrow{background:transparent;font-weight:600;padding-inline:.4rem;gap:.4rem}
.sc-btn--arrow::after{content:'\2192';display:inline-block;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.sc-btn--arrow:hover::after{transform:translateX(5px)}

/* ---- TEXT COLOR: auto-contrast on filled bg, theme color on transparent bg ----
   specificity (0,3,1) beats content link rules (.prose a / .block-content a); #fff fallback. */
.sc-btn-wrap a.sc-btn{text-decoration:none!important;border:0}
.sc-btn-wrap a.sc-btn.sc-btn--primary,
.sc-btn-wrap a.sc-btn.sc-btn--gradient,
.sc-btn-wrap a.sc-btn.sc-btn--glow,
.sc-btn-wrap a.sc-btn.sc-btn--pill,
.sc-btn-wrap a.sc-btn.sc-btn--shine,
.sc-btn-wrap a.sc-btn.sc-btn--3d,
.sc-btn-wrap a.sc-btn.sc-btn--outline:hover{
  color:#fff!important;
  color:rgb(from var(--scb) clamp(0,(140 - (0.299*r + 0.587*g + 0.114*b))*1000,255) clamp(0,(140 - (0.299*r + 0.587*g + 0.114*b))*1000,255) clamp(0,(140 - (0.299*r + 0.587*g + 0.114*b))*1000,255))!important;
  text-shadow:0 1px 2px rgba(0,0,0,.16)}
.sc-btn-wrap a.sc-btn.sc-btn--outline,
.sc-btn-wrap a.sc-btn.sc-btn--soft,
.sc-btn-wrap a.sc-btn.sc-btn--ghost,
.sc-btn-wrap a.sc-btn.sc-btn--arrow{color:var(--scb)!important;text-shadow:none}