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}
/* ============================================================ */