/* Cryptocom: remove the browser's default body margin so the header sits flush at the
   very top — otherwise the body_bg (propagated to the canvas) peeks out as a thin strip
   above the header. common.css only sets overflow-x on body, not margin:0. */
body {
    margin: 0 !important;
}

/* Cryptocom: page background (same mechanism as 7goldcasino's #main-content texture).
   body_bg covers the content column (right of the sidebar, below the header — both stay
   opaque on top) and sits BEHIND the banner + game sections. */
body,
#main-content {
    background-color: #010101 !important;   /* dark base */
}
/* Cryptocom: page background = #010101->#1F1F1F gradient, with the body_bg's chip
   decorations shown at the BOTTOM (full width, keep aspect, not side-cropped). Top is
   just the gradient. On the full-content-height wrapper (#content's .flex-1). */
#content > div > .flex-1 {
    background-image:
        url('/images/cryptocom/body_bg.webp'),
        linear-gradient(180deg, #010101 0%, #1F1F1F 100%) !important;
    background-size: 100% auto, cover !important;      /* image: full width, natural height, at bottom */
    background-position: center bottom, center !important;
    background-repeat: no-repeat, no-repeat !important;
    /* Paint edge to edge. This wrapper sits inside #content's px-4, so the background used to
       stop 16px short of the sidebar, while the banner and the game sections bleed out to it
       with the template's -ml-4/-mr-4. That left a 16px strip of the lighter #main-content
       gradient running down the page beside every section. The negative margins push the
       painted box out to the sidebar; the matching padding keeps the content exactly where it
       was. #content has overflow-x hidden, so the bleed cannot cause a scrollbar. */
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
/* Cryptocom: on the CASHBACK sub-page, replace body_bg with cashback_bg in the area above
   the footer (same wrapper + mechanism; :has scopes it to the page that has .cashbacks). */
#content > div > .flex-1:has(.cashbacks) {
    background-image:
        url('/images/cryptocom/cashback_bg.webp'),
        linear-gradient(180deg, #010101 0%, #1F1F1F 100%) !important;
    background-size: 100% auto, cover !important;
    background-position: center top, center !important;   /* image starts at the top (just below the header) */
    background-repeat: no-repeat, no-repeat !important;
}
/* Cryptocom: the RTP sub-page carries NO background artwork in Figma — frame 2031:3989 is a
   plain #010101 → #1F1F1F gradient (its only IMAGE fills are the sidebar icons and the logo),
   exactly like the Privacy Policy frame 2031:3470. The global body_bg above sits at the bottom
   of the wrapper, and because this page is short that artwork lands right behind the content,
   which the design does not show. So drop the image here and keep only the gradient. */
#content > div > .flex-1:has(.game-rtp-main) {
    background-image: linear-gradient(180deg, #010101 0%, #1F1F1F 100%) !important;
    background-size: cover !important;
    background-position: center !important;
}
/* Cryptocom: the POLICY / long-copy pages carry no artwork in Figma either — the Privacy Policy
   frame 2031:3470 is a plain #010101 → #1F1F1F gradient, and a full IMAGE-fill sweep of it turns
   up only the sidebar menu icons. Live they inherited the global body_bg, which the design does
   not show. Same treatment as the RTP rule above; `:has(.pageContent)` scopes it to all 10 policy
   pages (they all render through views/site/.../view.php into .pageContent). */
#content > div > .flex-1:has(.pageContent),
#content > div > .flex-1:has(.site-contact) {
    background-image: linear-gradient(180deg, #010101 0%, #1F1F1F 100%) !important;
    background-size: cover !important;
    background-position: center !important;
}
/* Cryptocom: the PROMOTIONS sub-page has its own artwork in Figma (frame 2077:1562 —
   the content area "Frame 190" 2077:1589 carries an IMAGE fill with scaleMode FILL, i.e.
   CSS `cover`). The shared body_bg is far darker/sparser, which made the page read almost
   black. Same wrapper + mechanism as the cashback rule above; :has scopes it to this page. */
#content > div > .flex-1:has(.promotions.sub-page) {
    background-image:
        url('/images/cryptocom/promotions_bg.webp'),
        linear-gradient(180deg, #010101 0%, #1F1F1F 100%) !important;
    background-size: cover, cover !important;      /* Figma scaleMode = FILL */
    background-position: center center, center !important;
    background-repeat: no-repeat, no-repeat !important;
}
/* Cryptocom: hide the orange "cashback-tier-background" overlay (66% opacity image at the
   top = a yellow haze over the page). src OR data-src (lazyload). */
img[src*="cashback-tier-background"],
img[data-src*="cashback-tier-background"] {
    display: none !important;
}
/* Cryptocom: cashback tier cards — card background = blue gradient (was bg-sidebarMenuBg
   dark). Applies to the header card + all tier cards. */
#cashback-tiers-container .full-w > div {
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.98) 0%, rgba(3, 19, 50, 0.98) 100%) !important;
}
/* "Max amount" highlight cells (bg-sidebarMenuMainitemBgTo) = #093B98 (was orange
   --sidebar-menu-mainitem-bg-to). Override the var, scoped to the tiers widget → covers
   both the base and md: responsive variants. */
#cashback-tiers-container {
    --sidebar-menu-mainitem-bg-to: #093B98;
}
/* FAQ collapse question buttons — pill, blue gradient bg, white text/chevron (was orange
   bg-sidebarMenuMainitemBgTo + orange hover:bg-selectBoxBgHover). */
.collapse-button {
    border-radius: 100px !important;
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.98) 0%, rgba(3, 19, 50, 0.98) 100%) !important;
    color: #FFFFFF !important;
}
.collapse-button:hover {
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.98) 0%, rgba(3, 19, 50, 0.98) 100%) !important;
}
.collapse-button p,
.collapse-button svg {
    color: #FFFFFF !important;
}
/* FAQ collapse answers — darker blue gradient bg, white text (was bg-selectBoxBg). */
.collapse-item {
    background: linear-gradient(90deg, rgba(10, 40, 96, 0.98) 0%, rgba(1, 8, 21, 0.98) 100%) !important;
    color: #FFFFFF !important;
}
.collapse-item p,
.collapse-item span,
.collapse-item a {
    color: #FFFFFF !important;
}

/* ===== Cryptocom: VIP Benefits page ===== */
/* fill the content panel (behind the tier cards, up to the banner) with the left-sidebar
   menu dark gradient (#010101 -> #1F1F1F). The banner keeps its own bg on top. */
.vip-benefits-container {
    background: linear-gradient(180deg, #010101 0%, #1F1F1F 100%) !important;
}
/* banner background = vip_benefits_bg (coins + blue chips) instead of the orange
   cashback-tier-background.webp set in the view's inline <style>. */
.vip-benefits-header {
    background-image: url('/images/cryptocom/vip_benefits_bg.webp') !important;
}

/* Cryptocom: hide the shared 36% "main-area-background" overlay so the body_bg shows
   cleanly behind the game sections (index_content.php renders it inside .main-slider-container). */
.main-slider-container > img {
    display: none !important;
}

#chat-enable, .we-are-here {
    display: none !important;
}

.lobby-swiper-background {
    padding-bottom:0;
}

/* Cryptocom: only the single banner image (bg_img) should show — hide the
   sunclub-inherited decorative side backgrounds (promotions_background_right...). */
.lobby-swiper-background-left,
.lobby-swiper-background-right {
    display: none !important;
}

.lobby-swiper-background-right {
    object-position: top right!important;
    object-fit: contain!important;
}
.text-cardDescription * {
    margin:0!important;
}

input[type="checkbox"] {
    border-radius: 0;
}

/* Cryptocom: banner as a full cover background on the whole banner section (behind the
   promo text AND the deposit-options bar), with a blue left->transparent overlay for
   readability. The gradient is listed first = painted ON TOP of the image. */
.promotions-placeholder {
    padding-bottom:10px;
    /* The artwork carries the banner on its own. Figma overlays it with a left-to-right
       blue wash (linear-gradient(90deg, #093B98, transparent)), which we shipped until
       2026-08-27; reviewers found the result too blue, so the overlay is gone and the bare
       image shows. Deliberate deviation from the design — restore the gradient as the first
       layer here if the blue is ever wanted back. */
    background-image:
        url('/images/cryptocom/cryptocom_banner_bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    top: auto !important;
    bottom: 12px !important;
}

#promotions-swiper {
    padding-bottom: 20px;
    padding-top: 0;
    margin-left: -16px;
    margin-right: -16px
}

#promotions-swiper .swiper-pagination-bullet {
    opacity: 1;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0 !important;
}

#content {
    margin-top:0;
}

.promo-lobby-card {
    border-radius: 0;
}

/* ===== Cryptocom: blue gradient nav arrows (game rows + banner + providers) =====
   Providers arrows (#providers-prev/#providers-next) are `btn-dark` WITHOUT `swiper-button`,
   so they're added explicitly here to match the other sections' arrows. */
.swiper-button.btn-dark,
#providers-prev, #providers-next {
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important; /* default */
    box-shadow: 0px 0px 3px 0px #3A56B3;
    border: none !important;      /* remove the orange/yellow border */
    border-radius: 9999px !important;  /* rounded, not square */
    transition: background 0.2s ease !important;
}
.swiper-button.btn-dark:hover,
#providers-prev:hover, #providers-next:hover {
    background: linear-gradient(180deg, #30B8C3 0%, #486CB0 100%) !important; /* hover (darker) */
}
/* Right (next) arrows: gradient flipped vertically (360deg) */
.swiper-button.btn-dark[id*="next"],
#providers-next {
    background: linear-gradient(360deg, #36D5DB 0%, #698AF7 100%) !important; /* default */
}
.swiper-button.btn-dark[id*="next"]:hover,
#providers-next:hover {
    background: linear-gradient(360deg, #30B8C3 0%, #486CB0 100%) !important; /* hover (darker) */
}
.swiper-button.btn-dark svg,
#providers-prev svg, #providers-next svg {
    color: #FFFFFF !important; /* white arrow */
}
/* Kill the theme's orange ::before hover overlay on the arrows (it fades in
   --dark-button-bg-hover = orange). Our own :hover background shows instead. */
.swiper-button.btn-dark::before,
.swiper-button.btn-dark:hover::before,
#providers-prev::before, #providers-next::before,
#providers-prev:hover::before, #providers-next:hover::before {
    display: none !important;
}

/* ===== Cryptocom: "Available deposit options" bar on the banner ===== */
.promotions-deposit-container {
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.78) 0%, rgba(3, 19, 50, 0.78) 100%) !important;
    border: 1px solid #E8E8E8 !important;
    border-radius: 9999px !important; /* rounded left & right ends (pill) */
}
/* payment-method icon pills inside the bar (were bg-navHeaderBg = orange) */
.promotions-deposit-container .bg-navHeaderBg {
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
}

/* Crypto-only deposit bar (requested 2026-09-03). The shared t-aztec lobby view prints a fixed
   list of twelve payment marks (Promotions/views/t-aztec/lobby_view.php:66-77) and the file is
   used by every t-aztec brand, so the seven fiat ones are hidden here instead of edited there.
   Left visible: usdt, etherum (sic — that is the symbol id), litecoin, usdc, bitcoin.
   Each pill is matched by the symbol it actually renders rather than by position, so re-ordering
   or extending the shared list cannot silently unhide a card logo. `xlink:href` lives in the XLink
   namespace, hence `*|href`. Where :has() is unsupported the whole rule drops and all twelve show,
   i.e. it degrades to today's behaviour rather than to an empty bar.
   NB the general icon set only holds these five crypto symbols; more would need new symbols in a
   cryptocom-specific /css/cryptocom/deposit-icons.svg, which CustomHtml::svgFromFile already
   prefers over the shared file. */
.promotions-deposit-container .bg-navHeaderBg:has(use[*|href*="#visa"]),
.promotions-deposit-container .bg-navHeaderBg:has(use[*|href*="#mastercard"]),
.promotions-deposit-container .bg-navHeaderBg:has(use[*|href*="#skrill"]),
.promotions-deposit-container .bg-navHeaderBg:has(use[*|href*="#banktransfer"]),
.promotions-deposit-container .bg-navHeaderBg:has(use[*|href*="#revolut"]),
.promotions-deposit-container .bg-navHeaderBg:has(use[*|href*="#neteller"]),
.promotions-deposit-container .bg-navHeaderBg:has(use[*|href*="#ideal"]),
.promotions-deposit-container .bg-navHeaderBg:has(use[*|href*="#paypal"]) {
    display: none !important;
}

/* Reviewer request (2026-09-02), a deliberate step away from the Figma desktop bar: it read as too
   wide and too deep, and the payment pills sat right of centre because 150px of padding held the
   label away from them. The shared view sizes it `2xl:px-[87px]` + `2xl:pr-[150px]` on the label
   with `py-4` and `lg:py-3` pills (16px icon + 24px padding = 40px tall, an 80px bar).
   Halving the pill padding and trimming the two big horizontal values takes the bar to ~40px tall
   and ~21% narrower, and — since it is `xl:w-fit mx-auto` — the tighter group re-centres itself. */
@media (min-width: 1280px) {
    .promotions-deposit-container {
        padding: 6px 24px !important;
    }
    .promotions-deposit-container > .basis-full {
        padding-right: 24px !important;
    }
    .promotions-deposit-container .bg-navHeaderBg {
        padding: 6px 10px !important;
    }
    /* The pill strip is an `inline-flex` inside an `overflow-x:auto` wrapper, so the wrapper kept
       ~7px of inline line-box space under it: the wrapper centred correctly but the pills sat at
       its top, leaving 7px above them and 14px below. Making the wrapper a flex box drops that
       phantom space, so the strip centres and the bar loses the stray 7px as well. */
    .promotions-deposit-container .w-fit.max-w-full {
        display: flex !important;
        align-items: center !important;
    }
}

/* ===== Cryptocom: HEADER ===== */
/* Search button: the markup carries `!hidden sm:!flex`, but the prebuilt
   tailwind-styles.css contains `!hidden` yet NOT `sm:!flex` (that utility was
   purged/never generated), so the button ends up display:none at every width.
   Figma shows Search in the header on desktop → force it visible from sm up
   (keep it hidden below 640px, as the markup intends). */
@media (min-width: 640px) {
    .main-nav-container .search-icon {
        display: inline-flex !important;
    }
}

/* Search + Log In buttons: outline only (no fill), fully rounded (pill) */
.main-nav-container .search-icon,
.main-nav-container .login-button {
    background: transparent !important;
    border-radius: 9999px !important;
    box-shadow: none !important; /* drop the .glow default shadow (top/bottom edge) */
}
.main-nav-container .search-icon::before,
.main-nav-container .login-button::before {
    display: none !important; /* kill the theme's orange hover-fill overlay */
}
/* hover: no border, blue gradient fill (+ blue glow + drop shadow) */
.main-nav-container .search-icon:hover,
.main-nav-container .login-button:hover {
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    background-origin: border-box !important; /* fill the 2px border area too (no top/bottom strip) */
    background-clip: border-box !important;
    border-color: transparent !important;
    box-shadow: 0px 0px 4px 0px #3A56B3, 0px 4px 4px 0px #00000040 !important;
}
/* keep the icon + label the same color on hover (don't switch to orange) */
.main-nav-container .search-icon:hover,
.main-nav-container .search-icon:hover span,
.main-nav-container .search-icon:hover svg,
.main-nav-container .login-button:hover,
.main-nav-container .login-button:hover span,
.main-nav-container .login-button:hover svg {
    color: var(--button-color) !important;
}
/* labels — weight per Figma; size stays the template's (btn-responsive) */
.main-nav-container .search-icon span,
.main-nav-container .login-button span {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* EN language button (navbar #navbar-lang-toggle, btn-dark) — outline pill like Search/Log In
   (was the base orange btn-dark). Transparent + white border, white text/icon, blue hover. */
.main-nav-container #navbar-lang-toggle {
    background: transparent !important;
    border: 0.7px solid #FFFFFF !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
}
.main-nav-container #navbar-lang-toggle::before { display: none !important; }
.main-nav-container #navbar-lang-toggle,
.main-nav-container #navbar-lang-toggle span,
.main-nav-container #navbar-lang-toggle svg {
    color: #FFFFFF !important;
}
.main-nav-container #navbar-lang-toggle span {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}
.main-nav-container #navbar-lang-toggle:hover {
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    border-color: transparent !important;
    box-shadow: 0px 0px 4px 0px #3A56B3, 0px 4px 4px 0px #00000040 !important;
}

/* EN language dropdown menu (#navbar-lang-menu). Base tokens were orange
   (--form-input-bg #993204 / --select-box-bg-hover #A93305 = sunclub look),
   and z-[1100] fell behind the banner. Dark modal-style bg, blue hover,
   raised above the banner (matches the user dropdown's z-[100030]). */
#navbar-lang-menu {
    background: linear-gradient(180deg, #010101 0%, #1F1F1F 100%) !important;
    border: 0.7px solid #698AF7 !important;
    z-index: 100030 !important;
    /* The markup relies on `end-0 top-12 min-w-[160px] max-h-[70vh]`, but those
       utilities are absent from the prebuilt tailwind-styles.css (purged), so the
       menu fell back to its static position and ran off the right page edge.
       Re-declare them here (logical properties keep RTL correct). */
    inset-inline-end: 0;
    inset-inline-start: auto;
    top: 100%;
    margin-top: 0.5rem;
    min-width: 160px;
    max-height: 70vh;
}
#navbar-lang-menu a {
    background: transparent !important;
    color: #FFFFFF !important;
}
#navbar-lang-menu a:hover {
    background: #698AF7 !important;
    color: #FFFFFF !important;
}

/* Header "Sign Up" button (Figma) */
.main-nav-container .signup-button {
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;   /* default */
    background-origin: border-box !important;
    background-clip: border-box !important;
    border-color: transparent !important;          /* keep width (no size change), no visible border */
    border-radius: 9999px !important;              /* fully rounded (pill), like Search/Log In */
    box-shadow: 0px 4px 4px 0px #00000040 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-shadow: 0px 0px 4.3px #3A56B3 !important;  /* white label + blue glow */
}
.main-nav-container .signup-button svg {
    color: #FFFFFF !important;
    filter: drop-shadow(0 0 4.3px #3A56B3) !important; /* white icon + blue glow */
}
.main-nav-container .signup-button::before {
    display: none !important;                       /* kill the theme's primary-button (orange/white) overlay */
}
/* hover: darker gradient; label + icon stay white */
.main-nav-container .signup-button:hover {
    background: linear-gradient(180deg, #30B8C3 0%, #486CB0 100%) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    box-shadow: 0px 4px 4px 0px #00000040 !important;
}
.main-nav-container .signup-button:hover,
.main-nav-container .signup-button:hover span,
.main-nav-container .signup-button:hover svg {
    color: #FFFFFF !important;
}
/* on click: inset white glow */
.main-nav-container .signup-button:active {
    box-shadow: 0px 10px 13.7px 0px #FFFFFF59 inset, 0px 4px 4px 0px #00000040 !important;
}

/* ===== Cryptocom: LOGGED-IN header buttons =====
   Guest shows Search / Log In / Sign Up, all styled individually above. Logged in the same
   three slots hold the balance, the user menu and Deposit — and those were never touched, so
   they still came out in sunclub orange: .balance-group and the user link are `btn-dark`
   (--dark-button-bg #C44101) and .deposit-button is `btn-primary` (white fill,
   --primary-button-color #C44101 text). Figma has no logged-in frame, so this follows the
   guest header's own logic: the two informational pills take the deep blue, Deposit takes the
   primary gradient because it is the call to action, exactly like Sign Up. Text stays white. */
.main-nav-container .balance-group,
.main-nav-container .dropdown-button.btn-dark {
    background: #093B98 !important;
    background-image: none !important;
    border-color: transparent !important;
    border-radius: 9999px !important;
    color: #FFFFFF !important;
}
.main-nav-container .balance-group *,
.main-nav-container .dropdown-button.btn-dark span,
.main-nav-container .dropdown-button.btn-dark svg {
    color: #FFFFFF !important;
}
/* the theme fades in --dark-button-bg-hover (orange) through ::before — kill it */
.main-nav-container .balance-group::before,
.main-nav-container .dropdown-button.btn-dark::before {
    display: none !important;
}
.main-nav-container .balance-group:hover,
.main-nav-container .dropdown-button.btn-dark:hover {
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.78) 0%, rgba(3, 19, 50, 0.78) 100%) !important;
    color: #FFFFFF !important;
}

/* Deposit (and the Withdraw variant shown to locked-out users) = the Sign Up treatment */
.main-nav-container .deposit-button,
.main-nav-container .withdraw-button {
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    border-color: transparent !important;
    border-radius: 9999px !important;
    box-shadow: 0px 4px 4px 0px #00000040 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-shadow: 0px 0px 4.3px #3A56B3 !important;
}
.main-nav-container .deposit-button svg,
.main-nav-container .withdraw-button svg {
    color: #FFFFFF !important;
    filter: drop-shadow(0 0 4.3px #3A56B3) !important;
}
.main-nav-container .deposit-button::before,
.main-nav-container .withdraw-button::before {
    display: none !important;
}
.main-nav-container .deposit-button:hover,
.main-nav-container .withdraw-button:hover {
    background: linear-gradient(180deg, #30B8C3 0%, #486CB0 100%) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    color: #FFFFFF !important;
}
.main-nav-container .deposit-button:active,
.main-nav-container .withdraw-button:active {
    box-shadow: 0px 10px 13.7px 0px #FFFFFF59 inset, 0px 4px 4px 0px #00000040 !important;
}

/* ===== Cryptocom: PORTRAIT game cards =====
   gaming_aggregator.game_icon_style is "portrait", so the game list serves the tall
   360x640 artwork (gameimages.portrait) instead of the 500x294 landscape one. The card frame
   did not follow: t-aztec hardcodes `aspect-ratio: 233 / 126` (1.85, landscape) on both the
   container and the img, so the taller picture was cropped and the title rode up onto it.
   Set to WhiteHart's card proportion — their design frames game cards at 175x227 (Figma
   FX2RSxU58nuw9VxpuZOE3i, live games row 252:2399), which is 0.771. Their artwork is the
   aggregator's 360x472 `card` variant, which our catalogue does not have; ours is the taller
   360x640 `portrait` (0.5625), so the base `object-fit: cover` crops roughly a quarter of the
   height, centred — which is why some baked-in game names lose their top or bottom edge. The
   proper fix is the 360x472 `card` artwork WhiteHart uses; our catalogue has 0 of those against
   24359 portraits, so it needs a conversion pass before `game_icon_style` can move to "card".
   The card widths come from the swiper, see GameCatListWidget::getSwiperSettings(). */
.gameCell .background-container,
.gameCell .background-container img {
    aspect-ratio: 175 / 227 !important;
}

/* ===== Cryptocom: AJAX spinner (Top Wins, game rails, deposit panel) =====
   startElementSpinner() (js/app-tailwind.js:709) hands waitMe `effect: 'img'` with
   App.spinnerImgUrl but no `maxSize`. waitMe defaults maxSize to '' and then sets
   `height: '' + 'px'` — an invalid value the browser drops — so the image renders at its
   natural size. Ours is images/cryptocom/loader.webp at 675x675, drawn for the full-page
   loader, so the chip filled the whole section while Top Wins loaded. Other brands do not
   show this because their loader files are small. Capping it here rather than shrinking the
   webp keeps the full-page loader crisp on hi-dpi screens. */
.waitMe .waitMe_progress.img {
    height: 64px !important;
}
.waitMe .waitMe_progress.img > img {
    max-height: 100% !important;
    max-width: 64px !important;
    width: auto !important;
    height: auto !important;
}

/* ===== Cryptocom: account dropdown behind the logged-in username =====
   Tailwind maps both navUserMenu utilities to background-COLOR
   (`.bg-navUserMenuBg { background-color: var(--nav-user-menu-bg) }`), which cannot hold a
   gradient — the sunclub original put a radial-gradient in that variable and it never applied.
   So the panel and its hover are painted here instead, with the same treatments the sidebar
   and the search-modal dropdowns already use. The variables keep solid fallbacks. */
.bg-navUserMenuBg {
    background: linear-gradient(180deg, #010101 0%, #1F1F1F 100%) !important;
}
.hover\:bg-navUserMenuElemBgHover:hover {
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.98) 0%, rgba(3, 19, 50, 0.98) 100%) !important;
}

/* ===== Cryptocom: SIDE MENU (collapsed) — custom icons for the 2nd & 3rd items ===== */
/* scoped to the narrow sidebar so the wide menu's Lobby/Live Casino icons stay the sprites */
#side-menu-narrow-icons .nav-sidebar-icon .sprite-lobby {
    background: url('/images/cryptocom/cripto-advocacy.webp') center / contain no-repeat !important;
}
#side-menu-narrow-icons .nav-sidebar-icon .sprite-live-games {
    background: url('/images/cryptocom/cripto-casino.webp') center / contain no-repeat !important;
}
/* icon hover: blue instead of orange (the hamburger is .side-menu-toggle → unaffected) */
#side-menu-narrow-icons .nav-sidebar-icon:hover {
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.78) 0%, rgba(3, 19, 50, 0.78) 100%) !important;
}
/* hamburger toggle hover: icon turns blue (no background) */
#side-menu .side-menu-toggle:hover {
    background: transparent !important;
}
#side-menu .side-menu-toggle:hover svg,
#side-menu .side-menu-toggle:hover svg path {
    color: #698AF7 !important;
    fill: currentColor !important;
}

/* Bonus central + RTP + Casino main items: solid blue + fully rounded (pill).
   "My games" (sprite-my-games) belongs here too — it only appears when a player is LOGGED IN,
   which is why it was missed until 2026-08-31 and stayed sunclub orange
   (--sidebar-menu-mainitem-bg #DA591A) while every other main item was already blue. */
#side-menu-wide .sidemenu-main-item:has(.sprite-bonus-central),
#side-menu-wide .sidemenu-main-item:has(.sprite-rtp),
#side-menu-wide .sidemenu-main-item:has(.sprite-my-games),
#side-menu-wide .sidemenu-main-item:has(.sprite-casino) {
    background: #093B98 !important;
    border-radius: 9999px !important;
}
/* ...their hover: blue gradient */
#side-menu-wide .sidemenu-main-item:has(.sprite-bonus-central):hover,
#side-menu-wide .sidemenu-main-item:has(.sprite-rtp):hover,
#side-menu-wide .sidemenu-main-item:has(.sprite-my-games):hover,
#side-menu-wide .sidemenu-main-item:has(.sprite-casino):hover {
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.78) 0%, rgba(3, 19, 50, 0.78) 100%) !important;
}

/* Wide-menu item icons: custom webp matched to each menu name */
#side-menu-wide .sprite-bonus-central { background: url('/images/cryptocom/cripto-bonuscentral.webp') center / contain no-repeat !important; }
/* The `.sub-page-header` variants matter too: each sub-page prints the same sprite next to
   its title, and without these it stays the base (sunclub orange) icon — review #6. */
#side-menu-wide .sprite-bonuses,
.sub-page-header .sprite-bonuses      { background: url('/images/cryptocom/cripto-bonuses.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-tournaments,
.sub-page-header .sprite-tournaments  { background: url('/images/cryptocom/cripto-tournament.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-cashback,
.sub-page-header .sprite-cashback     { background: url('/images/cryptocom/cripto-cashback.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-promotions,
.sub-page-header .sprite-promotions   { background: url('/images/cryptocom/cripto-promotion.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-vip-benefits,
.sub-page-header .sprite-vip-benefits { background: url('/images/cryptocom/cripto-vip.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-rtp,
.sub-page-header .sprite-rtp          { background: url('/images/cryptocom/cripto-rtp.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-casino        { background: url('/images/cryptocom/cripto-casino.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-providers     { background: url('/images/cryptocom/cripto-providers.webp') center / contain no-repeat !important; }
/* Casino dropdown children icons (scoped to the sidebar, so homepage game headers keep the sprites) */
#side-menu-wide .sprite-lobby         { background: url('/images/cryptocom/cripto-advocacy.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-live-games    { background: url('/images/cryptocom/cripto-casino.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-top-games     { background: url('/images/cryptocom/cripto-topgames.webp') center / contain no-repeat !important; }

/* Cryptocom: homepage game-section header icons = same custom icons as the sidebar
   (Top Games / Live / New / Slots).
   The X offsets cancel the transparent border baked into each webp, which is not the same
   width in all of them (measured on the 24x24 source: topgames 0px, casino 2px, slots 1px,
   shoppingbag 1px). Centred, that border pushed the artwork right and the icons no longer
   lined up with each other or with the game cards below — most visibly on Live Games. The
   sprite box is 24px and the sources are 24px, so the offsets are 1:1 pixels. The sidebar
   copies keep the plain `center`: there the icons stand in their own column. */
.game-cat-list-header .sprite-top-games  { background: url('/images/cryptocom/cripto-topgames.webp') center / contain no-repeat !important; }
.game-cat-list-header .sprite-live-games { background: url('/images/cryptocom/cripto-casino.webp') -2px center / contain no-repeat !important; }
.game-cat-list-header .sprite-new-games  { background: url('/images/cryptocom/cripto-shoppingbag.webp') -1px center / contain no-repeat !important; }
.game-cat-list-header .sprite-slots      { background: url('/images/cryptocom/cripto-slots.webp') -1px center / contain no-repeat !important; }
/* Providers slider header is not a .game-cat-list-header, but sits in .main-slider-container. */
.main-slider-container .sprite-providers { background: url('/images/cryptocom/cripto-providers.webp') center / contain no-repeat !important; }

/* Cryptocom: provider cards — dark background, fully rounded sides (like the View all button). */
.providers-slide {
    background: #1E1E1E !important;
    border-radius: 9999px !important;
}

/* Cryptocom: Top Wins toggle icons — Live bets = live-casino logo, Top wins = top-games logo. */
.type-selector[data-type="livebets"] .sprite { background: url('/images/cryptocom/cripto-casino.webp') center / contain no-repeat !important; }
.type-selector[data-type="topwins"] .sprite  { background: url('/images/cryptocom/cripto-topgames.webp') center / contain no-repeat !important; }

/* Cryptocom: Top Wins toggle (Live bets / Top wins) — per-button blue gradients (mirrored),
   white text, 300ms ease-out. Buttons told apart by their sprite icon. */
.type-selector {
    transition: background 300ms ease-out !important;
    color: #FFFFFF !important;
}
.type-selector span {
    color: #FFFFFF !important;
}
/* kill the btn-dark orange ::before hover overlay on the toggles */
.type-selector::before,
.type-selector:hover::before {
    display: none !important;
}
/* Live bets (left). Was :has(.sprite-live-games) but that icon carries the Tailwind
   responsive class `sm:sprite-live-games`, so the selector never matched → stayed orange.
   data-type is stable across breakpoints. */
.type-selector[data-type="livebets"] {
    background: linear-gradient(90deg, rgba(3, 19, 50, 0.78) 0%, rgba(9, 59, 152, 0.78) 100%) !important;
}
.type-selector[data-type="livebets"]:hover {
    background: linear-gradient(90deg, rgba(1, 8, 21, 0.78) 0%, rgba(10, 40, 96, 0.78) 100%) !important;
}
/* Top wins (right) */
.type-selector[data-type="topwins"] {
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.78) 0%, rgba(3, 19, 50, 0.78) 100%) !important;
}
.type-selector[data-type="topwins"]:hover {
    background: linear-gradient(90deg, rgba(10, 40, 96, 0.78) 0%, rgba(1, 8, 21, 0.78) 100%) !important;
}
#side-menu-wide .sprite-slots         { background: url('/images/cryptocom/cripto-slots.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-new-games     { background: url('/images/cryptocom/cripto-shoppingbag.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-megaways      { background: url('/images/cryptocom/cripto-megaways.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-jackpots      { background: url('/images/cryptocom/cripto-jackpot.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-hold-wins     { background: url('/images/cryptocom/cripto-holdandwin.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-books         { background: url('/images/cryptocom/cripto-books.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-table-games   { background: url('/images/cryptocom/cripto-tablegames.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-scratch-cards { background: url('/images/cryptocom/cripto-scratch.webp') center / contain no-repeat !important; }
#side-menu-wide .sprite-bingo         { background: url('/images/cryptocom/cripto-bingo.webp') center / contain no-repeat !important; }

/* sub-items (Bonuses, Tournaments, Cashback, Promotions, VIP) — fully rounded (pill) */
#side-menu-wide .sidemenu-sub-item {
    border-radius: 9999px !important;
}
/* Casino dropdown items: transparent background, white text (incl. active) */
#side-menu-wide .sidemenu-sub-item-casino,
#side-menu-wide .sidemenu-sub-item-casino:hover,
#side-menu-wide .sidemenu-sub-item-casino.active {
    background: transparent !important;
    color: #FFFFFF !important;
}
/* hover: the LABEL TEXT itself becomes the blue gradient (icon unaffected) */
#side-menu-wide .sidemenu-sub-item-casino:hover .name {
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* active sub-item (current sub-page, e.g. Cashback) — white text, NOT the base's yellow
   highlight. Only the label text; the pill background on the <a> is left untouched. */
#side-menu-wide .sidemenu-sub-item.active {
    color: #FFFFFF !important;
}
#side-menu-wide .sidemenu-sub-item.active .name {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background-image: none !important;      /* reset only the label, in case it's gradient-text */
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}

/* Support button (bottom of the wide menu): blue gradient, pill, glossy */
#side-menu-wide .chat-enable-mobile {
    justify-content: center !important; /* center icon + label */
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    border-color: transparent !important;
    border-radius: 9999px !important;
    box-shadow: 0px 4px 4px 0px #00000040, 0px 10px 13.7px 0px #FFFFFF57 inset !important;
    color: #FFFFFF !important;
}
#side-menu-wide .chat-enable-mobile::before {
    display: none !important; /* kill the theme's primary-button overlay */
}
/* hover: darker gradient */
#side-menu-wide .chat-enable-mobile:hover {
    background: linear-gradient(180deg, #30B8C3 0%, #486CB0 100%) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
}
/* icon + label stay white */
#side-menu-wide .chat-enable-mobile,
#side-menu-wide .chat-enable-mobile span,
#side-menu-wide .chat-enable-mobile svg,
#side-menu-wide .chat-enable-mobile:hover span,
#side-menu-wide .chat-enable-mobile:hover svg {
    color: #FFFFFF !important;
}

/* ===== Cryptocom: hide the sidebar language selector (review #2) =====
   The language switcher is available globally in the header (#navbar-lang-toggle),
   so the duplicate at the bottom of the side menu is redundant.
   Scoped to #side-menu on purpose: the same widget also renders on the account
   page (views/account/.../_language_setting.php) and must stay visible there.
   The .pb-2 wrapper is hidden too, so no empty padding is left behind. */
#side-menu .pb-2:has(> [id^="languageDropdown"]) {
    display: none !important;
}

/* ===== Cryptocom: Select Language ===== */
/* closed button: pill + blue gradient (kill the btn-dark orange border + overlay) */
[id^="languageDropdown"] .dropdown-button {
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.78) 0%, rgba(3, 19, 50, 0.78) 100%) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    border-color: transparent !important;
    border-radius: 9999px !important;
}
[id^="languageDropdown"] .dropdown-button::before {
    display: none !important;
}
[id^="languageDropdown"] .dropdown-button:hover,
[id^="languageDropdown"] .dropdown-button:active {
    background: linear-gradient(90deg, rgba(10, 40, 96, 0.78) 0%, rgba(1, 8, 21, 0.78) 100%) !important;
}
/* button label + chevron arrow white */
[id^="languageDropdown"] .dropdown-button,
[id^="languageDropdown"] .dropdown-button p,
[id^="languageDropdown"] .dropdown-button svg {
    color: #FFFFFF !important;
}
/* opened language list: dark gradient background */
[id^="languageDropdown"] .dropdown-items {
    background: linear-gradient(180deg, #010101 0%, #1F1F1F 100%) !important;
}
/* language names white; hover = blue pill */
[id^="languageDropdown"] .dropdown-item {
    color: #FFFFFF !important;
}
[id^="languageDropdown"] .dropdown-item:hover,
[id^="languageDropdown"] .dropdown-item.bg-selectBoxBgSelected {
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.98) 0%, rgba(3, 19, 50, 0.98) 100%) !important;
    border-radius: 100px !important;
}

/* ===== Cryptocom: scrollbar (webkit) — blue thumb on a dark track (matches theme) ===== */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
}
::-webkit-scrollbar-track {
    background: #1F1F1F !important;
}

.promo-lobby-card .button {
    line-height: 1.5rem;
}

/* Cryptocom: the banner is a CSS cover background on .promotions-placeholder (see top of
   file). Hide the template promo <img> elements so they don't overlap the background. */
.promo-lobby-card .image,
.promo-lobby-card .promotions-image {
    display: none !important;
}

.promo-lobby-card>img {
    border-radius: 0;
}

.promo-lobby-card .promotions-image {
    height: 100%;
    width: 100%;
    object-position: right;
    border-radius: 0;
}

/* ===== Cryptocom: banner title text (Figma spec; font = template default) ===== */
.promo-lobby-card .intro>h3 {
    text-shadow: none;
    font-weight: 700 !important;
    /* Fluid like the template (cqi). Figma desktop is 55px (3.4375rem), but the 2026-08-27
       review asked for a smaller banner, so the whole banner runs at 80% of the Figma scale:
       55 -> 44px (2.75rem). Deliberate, documented deviation from the design — the button,
       property and spacing rules below use the same factor. */
    font-size: clamp(1.2rem, 4cqi, 2.75rem) !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    /* color: template already white via --game-card-description (#ffffff) */
    /* No max-width here on purpose. There used to be one (15em) to force the design's two-line
       title — "100% Second Deposit Bonus" / "up to €1000" (desktop frame 252:2305) — back when the
       title arrived as a single unbroken string. Since 2026-09-03 the shared t-aztec card view
       injects a real <br> before the "up to <amount>" phrase (lobby_card_view.php), so the template
       makes the break itself and the cap only got in the way: at 15em it forced a THIRD line,
       because the remaining "100% Second Deposit Bonus" needs 714px and had 660. The width the
       title actually gets is handled below instead, since that is the real constraint. */
    /* never split a word (template uses hyphens-auto + break-words); wrap whole words */
    hyphens: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Below ~1440px the title still wrapped onto a THIRD line, because the template reserves 35% of the
   card on the right (`pr-[35%]`) to keep the copy off the coin artwork, and what is left is
   narrower than the title's first line. Measured on staging with the live promotion ("100% Second
   Deposit Bonus up to €1,000"), which needs 714px: 1440px and up leaves exactly 714, 1280px leaves
   669, 1024px leaves 528. Trimming the reserve to 22% in that band restores the design's two lines,
   and the copy then ends at 62-75% of the card, still clear of the coins.
   Phones are excluded on purpose (the 640px block below owns them): at 360-480px the title is three
   lines either way, because our real title is longer than the Figma placeholder, so the rule would
   only push copy further over the artwork for no gain.
   ⚠ Do NOT check this on the local preview — its promotion title is shorter ("300% First Deposit
   bonus"), so every width shows two lines there and the bug is invisible. Measure on staging. */
@media (min-width: 641px) and (max-width: 1439px) {
    .promo-lobby-card .intro {
        padding-right: 22% !important;
    }
}

.promo-lobby-card .promotion-property .promotion-property-text {
    text-shadow: none;
    /* Template caps at 25px (= Figma); 80% of it per the 2026-08-27 review -> 20px. */
    font-size: clamp(0.65rem, 1.1cqi, 1.25rem) !important;
}

/* ===== Cryptocom: banner "Sign up" button (Figma spec) ===== */
.promo-lobby-card .signup-button,
.promo-lobby-card .deposit-button {
    width: min(242px, 100%) !important; /* Figma 303px at 80% (2026-08-27 review) */
    padding: 12px 16px !important;      /* Figma height ~67px at 80% (~54px), responsively */
    gap: 10px !important;
    justify-content: center !important; /* center text horizontally */
    align-items: center !important;     /* center text vertically */
    border: none !important;
    border-radius: 100px !important;
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    box-shadow: 0px 10px 13.7px 0px #FFFFFF59 inset, 0px 4px 4px 0px #00000040 !important;
    /* button text (font = template default) */
    font-weight: 700 !important;
    font-size: clamp(0.9rem, 2.08cqi, 24px) !important; /* Figma 30px at 80% (2026-08-27) */
    line-height: 100% !important;
    letter-spacing: 0 !important;
    color: #FFFFFF !important;
    text-shadow: 0px 0px 4px #3A56B3 !important;
}
/* kill the theme's ::before overlay so the gradient stays (incl. hover) */
.promo-lobby-card .signup-button::before,
.promo-lobby-card .deposit-button::before {
    display: none !important;
}
/* hover state (Figma spec): darker blue gradient, drop shadow only */
.promo-lobby-card .signup-button:hover,
.promo-lobby-card .deposit-button:hover {
    background: linear-gradient(180deg, #30B8C3 0%, #486CB0 100%) !important;
    box-shadow: 0px 4px 4px 0px #00000040 !important;
}

/* ===== Cryptocom: banner vertical rhythm at 80% of Figma (2026-08-27 review) =====
   The template spaces the title+button block with container-query utilities
   (@xl/promo-card:mt-12 / mb-12 = 48px) and the property row with mb-2 (8px).
   Desktop only: the max-width 768/640 blocks near the end of this file own the
   mobile values and must keep winning there. */
@media (min-width: 769px) {
    /* The gap under the Sign up button should match the one above it. That upper gap is
       NOT a margin: the template gives .intro flex-1, so it is leftover space and a fixed
       margin here could never track it. Stop .intro from swallowing the slack and let the
       column distribute it instead — space-evenly yields three equal gaps (above the title,
       between title and button, below the button), so "before" == "after" at any card
       height. The block's own bottom margin has to go, or it would add to the last gap. */
    .promo-lobby-card .promo-intro-and-button {
        margin-top: 38px !important;
        margin-bottom: 0 !important;
        justify-content: space-evenly !important;
    }
    .promo-lobby-card .promo-intro-and-button > .intro {
        flex: 0 0 auto !important;
    }

    /* Figma puts the deposit bar 14px below the pagination dashes (Line 16/17 sit at
       y=422 inside the banner frame, Frame 133 starts at y=436). The template's utilities
       give mt-8 (32px) at xl and mt-16 (64px) at 2xl, which reads as a hole on a wide
       screen. This is the one place in the banner that goes TO Figma, not to 80% of it. */
    .promotions-deposit-container {
        margin-top: 14px !important;
    }

    /* ...and 48px of banner below it: the bar (Frame 133) ends at y=526 inside the 574px
       banner frame. The template's pb-4 leaves only 16px. Figma value, not 80% of it —
       the max-width 768/640 blocks below keep their own smaller mobile paddings. */
    .promotions-placeholder {
        padding-bottom: 48px !important;
    }

    /* Do NOT pull the game sections out to the banner's left edge — tried on 2026-08-27 and
       reverted the next day. Figma keeps the header, banner and footer flush with the sidebar
       (x=49 in the 1920 home frame) and indents the game sections to x=69; a pixel scan of
       the rendered design confirms both. The step is the design, not a bug. (Dropping
       padding-right as well also clipped the "View all" arrows, because -mr-4 already pulls
       the container past the viewport.)
       The template's pl-4 makes that step 16px; Figma's is 20px, so it is set explicitly. */
    .main-slider-container {
        padding-left: 20px !important;
    }
    .promo-lobby-card .promo-properties {
        margin-bottom: 6px !important;
    }
}

.play-button {
    border-radius: 9999px!important;
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    color: #FFFFFF !important;
    border: none !important;   /* no white border from the btn base */
}
.play-button span,
.play-button svg {
    color: #FFFFFF !important;   /* white label + play icon (fill=currentColor) */
}
.play-button::before {
    border-radius: 9999px!important;
    display: none !important;    /* kill the theme's orange hover overlay */
}
/* play button hover: darker blue gradient + drop shadow */
.play-button:hover {
    background: linear-gradient(180deg, #30B8C3 0%, #486CB0 100%) !important;
    box-shadow: 0px 4px 4px 0px #00000040 !important;
}
/* Cryptocom: blue darkening overlay over the game image on card hover
   (below the play button z-10, above the image). */
.mainCard .gameCell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 32, 59, 0.77) 0%, rgba(9, 59, 152, 0.77) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 5;
    border-radius: inherit;
}
.mainCard:hover .gameCell::after {
    opacity: 1;
}

.promo-intro-and-button {
    margin-top:32px!important;
}

.promo-intro-and-button .button  {
    margin-bottom:20px!important;
}

.promo-intro-and-button .intro {
    margin-bottom:16px!important;
}

/* Align the property row's left edge with the Sign up button / title
   (they use pl-6 @sm/promo-card:pl-[var(--lobby-promo-margin)]). */
.promo-lobby-card .promo-properties {
    padding-left: 1.5rem !important;
}
@container promo-card (min-width: 24rem) {
    .promo-lobby-card .promo-properties {
        padding-left: var(--lobby-promo-margin) !important;
    }
}
/* remove the first item's inner left padding so the checkmark starts at that edge */
.promo-lobby-card .promo-properties .promotion-property:first-child {
    padding-left: 0 !important;
}

/* The Top Games slide width used to be pinned here (214px desktop, 165px under 1024, 50% under
   640) back when every section shared the same 5-per-view swiper setting. Top Games is now driven
   by the cryptocom arm of GameCatListWidget::getSwiperSettings(), which uses WhiteHart's own grid
   (9 per row, 32px gap => the design's 175px card). A fixed px width only fought that - it forced
   the card to 214px minus 12px padding = 202px - so the sizing is left to the swiper. */

/* Cryptocom: "View all" button — solid deep-blue pill, white text
   (hover: blue gradient like the nav buttons). */
.btn-view-all {
    background: #093B98 !important;
    border-color: #093B98 !important;   /* replace the orange border ring */
    color: #FFFFFF !important;
    border-radius: 9999px !important;   /* fully rounded pill sides */
}
.btn-view-all span,
.btn-view-all .view-all-number {
    color: #FFFFFF !important;
}
.btn-view-all:hover {
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.98) 0%, rgba(3, 19, 50, 0.98) 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}
/* kill the theme's orange ::before hover overlay */
.btn-view-all::before,
.btn-view-all:hover::before {
    opacity: 0 !important;
}
/* the count badge: blue gradient circle (instead of orange --main-title-left-right-icon), white number */
.btn-view-all .bg-mainTitleLeftRightIcon {
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
}

.promotion-property-checkmark {
    background: rgba(255, 255, 255, 0.15) !important; /* pale translucent fill (like Figma); white border + white check remain */
}
.promotion-property-checkmark>svg {
    color: #FFFFFF !important; /* white check */
}
.type-selector {
    border-color: var(--primary-button-border)!important;
}

.swiper-wrapper {
    margin-bottom:4px;
}

.signup-modal .header-content,
.login-modal .header-content {
    justify-content: left;
}
.signup-modal .header-content .header-button,
.login-modal .header-content .header-button {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 5px;
}

/* Cryptocom: modal text inputs (email/password) — dark pill. Behaviour stays the
   template/sunclub default (icon absolute-left, left-aligned text, normal cursor);
   only the look is restyled. */
/* field width per Figma (335px), centered — the pill sits on the input inside. */
.modal-main .relative:has(> input[type="text"]),
.modal-main .relative:has(> input[type="password"]),
.modal-main .relative:has(> input[type="email"]) {
    width: 335px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* icon (and password reveal) vertically centered in the 38px field — the icon span is
   h-12 (48px) by default, which pushed it off-centre after shrinking the field. */
.modal-main .relative:has(> input) > span {
    height: 38px !important;
}
.modal-main input[type="text"],
.modal-main input[type="password"],
.modal-main input[type="email"] {
    background: #010101 !important;
    border-radius: 100px !important;
    height: 38px !important;
}
/* Cryptocom: modal inputs never show orange/yellow (no Figma for these states). Keep the
   dark pill; any hover/focus/typed/validation border uses the scrollbar blue #698AF7. */
.modal-main input[type="text"]:hover,
.modal-main input[type="text"]:focus,
.modal-main input[type="text"]:not(:placeholder-shown),
.modal-main input[type="password"]:hover,
.modal-main input[type="password"]:focus,
.modal-main input[type="password"]:not(:placeholder-shown),
.modal-main input[type="email"]:hover,
.modal-main input[type="email"]:focus,
.modal-main input[type="email"]:not(:placeholder-shown),
.modal-main .has-error input,
.modal-main .has-success input {
    background: #010101 !important;
    border-color: #698AF7 !important;
    box-shadow: none !important;
    outline: none !important;
}
/* validation message (help-block) — blue, not the yellow --error */
.modal-main .help-block-error {
    color: #698AF7 !important;
}

/* Cryptocom: modal close (X) button — keep the WHITE circle, but the X itself is a
   transparent cut-out (the dark modal shows through the X shape) instead of orange.
   mix-blend-mode: destination-out erases the circle where the X is; isolation keeps the
   blend inside the button. */
.modal-main .modal-close {
    background: #FFFFFF !important;
    isolation: isolate !important;
}
.modal-main .modal-close svg {
    color: #000000 !important;
    mix-blend-mode: destination-out !important;
}
.modal-main .modal-close:hover {
    background: #e1dede !important;
}

/* Cryptocom: Log In / Sign Up modal tabs — Inter 700 15px, white. */
.modal-main .header-content .header-button {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    color: #FFFFFF !important;
}
/* active tab underline = 2px blue gradient (was orange border-customBg). */
.modal-main .header-button.border-customBg {
    border-image-source: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    border-image-slice: 1 !important;
}

/* ===== Cryptocom: the modals that were never themed =====
   error / balance-zero / signup second part / username all sit in .modal-main, so the July
   base rules (dark panel, pill inputs, blue focus, blue primary button, cut-out close X)
   already reach them. Only these four leftovers still carried sunclub or raw Tailwind colours;
   they surfaced on 2026-08-31 because they only appear in flows we had not walked. */

/* error modal: the title rule is `border-b-2 border-red-500` — Tailwind's red, not a variable.
   Same 2px blue gradient as every other modal heading. */
.error-modal .title.border-red-500 {
    border-image-source: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    border-image-slice: 1 !important;
}
/* error modal OK button: was bg-customBg (#ffaf00) with hover-customHover. Same treatment as
   the other modal primary buttons. */
.error-modal .modal-ok {
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0px 10px 13.7px 0px #FFFFFF59 inset, 0px 4px 4px 0px #00000040 !important;
    text-shadow: 0px 0px 4px #3A56B3 !important;
}
.error-modal .modal-ok:hover {
    background: linear-gradient(180deg, #30B8C3 0%, #486CB0 100%) !important;
    color: #FFFFFF !important;
}

/* balance-zero modal: one paragraph is text-yellow-500. White reads correctly on the dark
   panel; the message is informational, not a warning that needs its own colour. */
.balance-zero-modal .text-yellow-500 {
    color: #FFFFFF !important;
}

/* Second signup step ("Additional Information"): its heading uses border-customBg but is NOT a
   .header-button, so the tab rule above does not reach it — same fix as the not-registered
   modal. That modal's container carries no name of its own (just modal-main + utilities), so
   the heading is addressed by its own two classes. Safe against the banner's .signup-button:
   that one is outside .modal-main and has no border-customBg. */
.modal-main .signup-button.border-customBg {
    border-bottom: 2px solid !important;
    border-image-source: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    border-image-slice: 1 !important;
}

/* Cryptocom: modal primary buttons (Log in / Sign up submit) — pill 218x35, blue gradient
   with inset glow + drop shadow. Disabled stays the template grey/white. */
.modal-main .btn-primary {
    border-radius: 100px !important;
    width: 218px !important;
    max-width: 100% !important;
    height: 35px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 20px !important;
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    border: none !important;   /* remove the btn 2px border (thin top/bottom line) */
    color: #FFFFFF !important;
    box-shadow: 0px 10px 13.7px 0px #FFFFFF59 inset, 0px 4px 4px 0px #00000040 !important;
}
.modal-main .btn-primary span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    color: #FFFFFF !important;
    text-shadow: 0px 0px 4px #3A56B3 !important;
}
.modal-main .btn-primary:disabled {           /* still blue, just dimmed while the form is invalid */
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}
.modal-main .btn-primary::before {
    display: none !important;
}
.modal-main .btn-primary:not(:disabled):hover {
    background: linear-gradient(180deg, #30B8C3 0%, #486CB0 100%) !important;
}

/* ===== Cryptocom: Sign Up modal — signup-specific fields. Only styling; behaviour
   stays the template/sunclub default. Values are user-specified per element. ===== */

/* Welcome Package box: round both ends (pill). Background comes from --login-gift-box-bg
   (blue gradient set in variables.css). */
.modal-main div[style*="login-gift-box-bg"] {
    border-radius: 100px !important;
}
/* the gift-box image inside: full circle (was square), vertically centered next to the
   text (flex-row put it top-aligned → more space below it than above). */
.modal-main div[style*="login-gift-box-bg"] img {
    border-radius: 50% !important;
    align-self: center !important;
}

/* Phone / Country / Currency: were orange (--form-input-bg) → same dark bg (#010101) as
   the email/password fields, pill sides. Checkbox check → scrollbar blue #698AF7. */
.modal-main input[type="tel"] {
    background: #010101 !important;         /* same dark bg as email/password */
    border-radius: 100px !important;       /* pill sides, like email/password */
    border-color: #698AF7 !important;      /* blue border instead of the yellow one */
}
/* intl-tel-input flag/dial-code segment: transparent so the blue field shows uniformly;
   dial code white. (also overrides the #620000 the full-page signup JS may set.) */
.modal-main .iti__flag-container,
.modal-main .iti__selected-flag {
    background: transparent !important;
}
.modal-main .iti__selected-dial-code {
    color: #FFFFFF !important;
}
/* the dropdown arrow next to the flag = white (CSS triangle; flipped when the list opens). */
.modal-main .iti__arrow {
    border-top-color: #FFFFFF !important;
}
.modal-main .iti__arrow--up {
    border-top-color: transparent !important;
    border-bottom-color: #FFFFFF !important;
}
/* Country / Currency custom-select — BUTTON stays as before: dark bg + pill + blue border. */
.modal-main .custom-select {
    background-color: #010101 !important;
    border-radius: 100px !important;
    border-color: #698AF7 !important;
}
/* the drop-down LIST like the homepage language selector's list: dark bg, white items,
   selected item blue. (native <select> option list — only bg/colour are reliably
   stylable; the language selector's pill-hover/gradient needs its div-based markup.) */
.modal-main .custom-select option {
    background-color: #010101 !important;
    color: #FFFFFF !important;
}
.modal-main .custom-select option:checked,
.modal-main .custom-select option:hover {
    background-color: #093B98 !important;
    color: #FFFFFF !important;
}
/* over-18 checkbox: white box, check is a REAL transparent cut-out (dark modal shows
   through the check shape) — same trick as the close (X) button. The base draws the check
   as a ::before (clip-path polygon); we make the box white and blend the ::before
   destination-out so it erases the white where the check is. */
.modal-main input.form-checkbox {
    background-color: transparent !important;  /* unchecked = empty box, not orange --form-cb-bg */
    border-color: #FFFFFF !important;
    isolation: isolate !important;          /* contain the blend to the checkbox */
}
.modal-main input.form-checkbox:checked {
    background-color: #FFFFFF !important;   /* white box */
    border-color: #FFFFFF !important;
}
.modal-main input.form-checkbox:checked::before {
    background-color: #000000 !important;   /* any opaque color; only its shape matters */
    mix-blend-mode: destination-out !important;  /* erases the white box → transparent check */
}
/* checkbox focus ring: blue, not the orange --form-cb-tx-act. */
.modal-main input.form-checkbox:focus {
    box-shadow: 0 0 0 2px #698AF7 !important;
}

/* phone country dropdown (opens from the flag) — was orange (--form-input-bg /
   --form-input-bg-act): dark list + white text, blue highlight. */
.modal-main .iti__dropdown-content,
.modal-main .iti__search-input {
    background-color: #010101 !important;
    color: #FFFFFF !important;
}
.modal-main .iti__country.iti__highlight {
    background-color: rgba(105, 138, 247, 0.25) !important;
}

/* phone field focus/typed state: blue border, no orange ring (the type=text/email/password
   states are handled by the login block; tel needs its own). */
.modal-main input[type="tel"]:hover,
.modal-main input[type="tel"]:focus,
.modal-main input[type="tel"]:not(:placeholder-shown) {
    border-color: #698AF7 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ===== Cryptocom: Search modal ===== */
/* "Showing Popular" stat badge (#search-results-stat, .btn-view-all) — transparent fill,
   white 1px border pill, Inter 700 15px centered text (all user-specified). */
.modal-main #search-results-stat {
    width: auto !important;            /* grow for the dynamic "Showing 11864/30" count text */
    min-width: 152px !important;       /* but keep the user's 152px as the minimum */
    height: 38px !important;
    border-radius: 100px !important;
    border: 1px solid #FFFFFF !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    opacity: 1 !important;
    background: transparent !important;   /* no blue fill, border only */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;    /* keep the label on one line */
}
.modal-main #search-results-stat,
.modal-main #search-results-stat * {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
}
/* header divider line under "Search" — solid white (was --modal-header-border #FFFFFF85).
   Scoped to the search modal so the committed login/signup modals are untouched. */
.search-modal .border-modalHeaderBorder {
    border-bottom: 1px solid #FFFFFF !important;
}
/* search input — pill, blue gradient fill, white Inter 400 12px centered text (user-specified). */
.modal-main #searchInput {
    border-radius: 100px !important;
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.78) 0%, rgba(3, 19, 50, 0.78) 100%) !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}
.modal-main #searchInput::placeholder {
    color: #FFFFFF !important;
}
/* dropdown selector buttons ("All providers" / "All Tags" / filter) — pill, blue gradient
   fill, white Inter 400 12px centered text (user-specified). Shared .select-button class,
   so both the search-nav and filter dropdown buttons match. */
.modal-main .select-button {
    width: 100% !important;             /* reach the same right edge as the search bar above */
    max-width: 100% !important;
    height: 27px !important;
    border-radius: 100px !important;
    padding: 5px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    opacity: 1 !important;
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.78) 0%, rgba(3, 19, 50, 0.78) 100%) !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}
.modal-main .select-button span {
    color: #FFFFFF !important;
}
/* search/filter dropdown LISTS — like the homepage language selector list: dark gradient
   bg, white items, blue pill hover. These are div/ul-based custom dropdowns (NOT native
   selects), so the full language-selector look IS reproducible here (was orange
   bg-formInputBg / hover:bg-formInputBgAct). */
.modal-main #providers-select-ul,
.modal-main .dropdown-default-checkbox {
    background: linear-gradient(180deg, #010101 0%, #1F1F1F 100%) !important;
}
.modal-main #providers-select-ul li,
.modal-main .dropdown-default-checkbox li {
    color: #FFFFFF !important;
}
.modal-main #providers-select-ul li:hover,
.modal-main .dropdown-default-checkbox li:hover {
    background: linear-gradient(90deg, rgba(9, 59, 152, 0.98) 0%, rgba(3, 19, 50, 0.98) 100%) !important;
    border-radius: 100px !important;
    color: #FFFFFF !important;
}
/* filter + providers list radios/checkboxes (orange --form-cb-bg / !bg-formCbBg, NOT
   .form-checkbox) — same look as the signup checkbox: white box, transparent cut-out
   check/dot, blue focus. */
.modal-main .dropdown-default-checkbox input[type="checkbox"],
.modal-main .dropdown-default-checkbox input[type="radio"],
.modal-main #providers-select-ul input[type="checkbox"] {
    background-color: transparent !important;
    border-color: #FFFFFF !important;
    isolation: isolate !important;
}
.modal-main .dropdown-default-checkbox input[type="checkbox"]:checked,
.modal-main .dropdown-default-checkbox input[type="radio"]:checked,
.modal-main #providers-select-ul input[type="checkbox"]:checked {
    background-color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}
.modal-main .dropdown-default-checkbox input[type="checkbox"]:checked::before,
.modal-main .dropdown-default-checkbox input[type="radio"]:checked::before,
.modal-main #providers-select-ul input[type="checkbox"]:checked::before {
    background-color: #000000 !important;
    mix-blend-mode: destination-out !important;
}
.modal-main .dropdown-default-checkbox input:focus,
.modal-main #providers-select-ul input:focus {
    box-shadow: 0 0 0 2px #698AF7 !important;
}
/* provider-logo background (bg-formInputBg orange span behind each logo) → transparent so
   the logos sit on the dark list. */
.modal-main #providers-select-ul .bg-formInputBg {
    background: transparent !important;
}

/* ===== Cryptocom: Not Registered modal ===== */
/* header underline ("Not Registered") — 2px blue gradient (was orange border-customBg
   #ffaf00). This tab isn't a .header-button, so the login/signup tab rule doesn't reach it. */
.not-registered-modal .border-customBg {
    border-bottom: 2px solid !important;
    border-image-source: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    border-image-slice: 1 !important;
}
/* "Sign Up" button — user-specified box (86x38 pill, 10/15 padding, gap 10) + blue gradient
   and inset/drop shadows. */
.not-registered-modal .signup-modal-button {
    width: 86px !important;
    height: 38px !important;
    border-radius: 100px !important;
    padding: 10px 15px !important;
    gap: 10px !important;
    opacity: 1 !important;
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    box-shadow: 0px 10px 13.7px 0px #FFFFFF59 inset, 0px 4px 4px 0px #00000040 !important;
    white-space: nowrap !important;    /* keep "Sign Up" on one line */
}
/* "Play Demo" button — outline: dark gradient fill (reads transparent on the dark modal) +
   white 1px border, white Inter 700 15px centered text. (was solid Tailwind bg-blue-500) */
.not-registered-modal .play-demo {
    background: linear-gradient(180deg, #010101 0%, #1F1F1F 100%) !important;
    border: 1px solid #FFFFFF !important;
    color: #FFFFFF !important;
    text-align: center !important;
}
.not-registered-modal .play-demo,
.not-registered-modal .play-demo span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    color: #FFFFFF !important;
}
/* "Log in" button — user-specified box (75x38 pill, 10/15 padding, gap 10) + blue gradient
   and inset/drop shadows (same as Sign Up, narrower). */
.not-registered-modal .login-modal-button {
    width: 75px !important;
    height: 38px !important;
    border-radius: 100px !important;
    padding: 10px 15px !important;
    gap: 10px !important;
    opacity: 1 !important;
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    box-shadow: 0px 10px 13.7px 0px #FFFFFF59 inset, 0px 4px 4px 0px #00000040 !important;
}

.topwins-table-row .payout-amount {
    color: white;
}

/* Cryptocom: bet pill on the odd rows. It used to be the bright cyan gradient, which put a second,
   louder blue on top of the (then solid) blue band — two competing accents in one table. Now that
   the rows are only a 30% tint (--table-odd-background), the pill carries the brand blue on its
   own and matches the pill on the even rows, so the whole table has ONE blue. */
.bg-tableTopwinsBetOddBg {
    background: #093B98 !important;
}

/* Cryptocom: gap below the Top Wins header row, matching the visual row rhythm. */
.topwins-table-header {
    margin-bottom: 8px !important;
}

/* Cryptocom: active-tab underline under the Top Wins tabs = white (was orange bg-customBg).
   Only shown for the selected tab via the theme's parent-selected:opacity-100. */
.table-type-selector > span {
    background: #FFFFFF !important;
}
/* Cryptocom: remove the long orange line (border-bottom) under the whole Top Wins tab row. */
#top-wins-widget-container .border-customBg {
    border-color: transparent !important;
}

.main-nav-container .btn.glow {
    box-shadow: none;
}

.mainCard>.gameCell {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

#big-wins-prev,
#big-wins-next {
    display:none!important;
}

/* Cryptocom: footer — solid dark fill + top border (was orange from-footerBg gradient). */
footer {
    background: #010101 !important;
    /* Figma 'Lábléc' (mobile frame 2089:2248 / 252:2953) = #010101 with a 1px #1F2937 stroke.
       Our earlier 3px version read as a grey strip on the dark background and was removed
       outright; 1px is what the design actually asks for. */
    border-top: 1px solid #1F2937 !important;
    margin-top: 0 !important;       /* no gap above the footer */
    /* Reach the sidebar, like Figma's 'Lábléc' (x=49 in the 1920 home frame, flush with the
       49px sidebar). The footer sits inside #content's px-4, so on its own it stops 16px
       short and leaves the same pale strip the page background used to. The template's -mx-4
       was cancelled here earlier, which is what re-introduced the gap; restore the bleed but
       add matching padding so the footer's content does not move. */
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Cryptocom: footer "Affiliates" link — plain white, like every other footer link in Figma
   (footer frame 252:2542; it is NOT highlighted there). Left alone it renders YELLOW: the
   wrapping <span> carries .text-navLiveCasinoColor (--nav-live-casino-color #ffc114) and
   tailwind-styles.css — which loads AFTER t-aztec — has a preflight `a { color: inherit }`
   that beats the template's `a { color: var(--hyperlink-color) }` at equal specificity,
   so the anchor inherits the yellow instead of the white. (Earlier this was overridden to
   blue #698AF7; Figma says white.) */
footer .text-navLiveCasinoColor,
footer .text-navLiveCasinoColor a {
    color: #FFFFFF;
}

/* Cryptocom: footer links — hover paints the text with the Figma gradient (review #4).
   Figma component set "Bonus Terms and Conditions" 2031:3771: Default = #FFFFFF,
   Variant2 (hover) = a TEXT fill of linear-gradient(180deg, #36D5DB, #698AF7)
   — the handle positions give exactly 180deg, the same gradient the buttons use.
   The template only offers a flat `a:hover { color: var(--hyperlink-color-hover) }`
   (#ddd here), so the gradient has to be painted via background-clip: text. */
footer a:hover,
/* the Affiliates rule above is 0-2-2, so its hover needs 0-3-2 to win — no !important needed */
footer .text-navLiveCasinoColor a:hover {
    background-image: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Cryptocom: cookie-consent popup — dark bar with blue link + blue Accept button
   (was orange: bg-navHeaderBg / text-customBg / btn-primary). */
.cookies-popup {
    background: linear-gradient(90deg, #010101 0%, #1F1F1F 100%) !important;
}
.cookies-popup .text-customBg {          /* "Cookie Policy" link */
    color: #698AF7 !important;
}
.cookies-popup .btn-primary {            /* Accept button */
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
.cookies-popup .btn-primary span {
    color: #FFFFFF !important;
}
.cookies-popup .btn-primary::before {    /* kill the theme's orange hover overlay */
    display: none !important;
}
.cookies-popup .btn-primary:hover {
    background: linear-gradient(180deg, #30B8C3 0%, #486CB0 100%) !important;
}


@media (max-width: 1378px) {
    .promo-lobby-card .signup-button,
    .promo-lobby-card .deposit-button {
        font-size: 24px;
        line-height: 26px;
        padding: 12px 64px;
    }
}

@media (max-width: 1280px) {
    .promo-lobby-card .promotion-property svg {
        width: 12px !important;
        height: 12px !important;
    }
    .promotions-placeholder {
        padding-bottom:10px;
    }
}
@media (max-width: 1024px) {
    .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 0px !important;
    }
    .promo-lobby-card .signup-button,

    .promo-lobby-card .deposit-button {
        font-size: 18px;
        line-height: 20px;
        padding: 12px 48px;
    }
}

@media (max-width: 768px) {
    .promo-lobby-card .intro,
    .promo-lobby-card .button,
    .promo-lobby-card .promo-properties {
        padding-left: 16px!important;
    }

    .promo-intro-and-button .button  {
        margin-bottom:14px!important;
    }

    .promo-intro-and-button .intro {
        margin-bottom:12px!important;
    }


    .promo-lobby-card .promo-properties .promotion-property {
        padding-left:0;
        padding-right:0;
    }
    .promotions-placeholder {
        padding-bottom:10px;
    }

    #glider-next-promotions,
    #glider-prev-promotions {
        display:none;
    }
}

@media (max-width: 640px) {

    .promo-intro-and-button {
        margin-top:10px!important;
    }

    .promo-intro-and-button .intro,
    .promo-intro-and-button .button  {
        margin-bottom:10px!important;
    }
    .promo-lobby-card .signup-button,
    .promo-lobby-card .deposit-button {
        font-size: 14px;
        line-height: 16px;
        padding: 8px 16px;
    }
    .promotions-placeholder {
        padding-bottom:8px;
    }

    .main-nav-container .btn.search-icon {
        border-radius: 9999px!important;
        padding: 4px 4px !important;
    }

    /* ===== Header alignment on phones (Figma "Mobil design" 252:2916) =====
       The design's mobile bar is 57px tall with the logo 103x39 at y=9 and the Log in / Sign up
       row 29px tall at y=14 — i.e. 9px above and below the logo, 14px above and below the buttons.
       Three things pulled ours out of that:
       1. the template's inner row keeps `h-16` (64px) while the painted bar is 57px, so everything
          inside sat ~3.5px low;
       2. we carried the DESKTOP logo size (120x45, frame 252:2276) onto phones, leaving only 2px
          under it;
       3. the button row adds a `mt-1`, which put 21px above the buttons against 10px above the
          logo — the "more space over the buttons" that is visible at a glance.
       Sizing the row to the bar, the logo to its mobile size and dropping the offset puts both on
       the same centre line with the design's spacing. */
    .main-nav-container .flex.h-16.justify-between {
        height: 57px !important;
    }
    .main-nav-container .mt-1.flex-grow {
        margin-top: 0 !important;
    }
    /* the phone logo size lives with the rest of the logo sizing further down, because that block
       comes later in the file and would otherwise win on equal specificity */

    /* ===== Banner properties on phones (Figma "Mobil design" 252:2916) =====
       The design puts the two checks 14px under the Sign up button, in columns 135px and 131px
       wide at x=14 and x=215 of a 360px frame, each label wrapping onto two 15px lines. Ours came
       out 26px lower and 180px/160px wide with a 10.4px label, so the right-hand one ran into the
       screen edge and was clipped. The 26px is not a margin: the intro+button box grows (flex-1)
       and leaves its slack under the button, so it has to stop growing before the gap can be set. */
    .promo-lobby-card .promo-intro-and-button {
        flex: 0 0 auto !important;
        margin-bottom: 0 !important;   /* the template's 16px would add to the 14px set below */
    }
    .promo-intro-and-button .button {
        margin-bottom: 0 !important;
    }
    .promo-lobby-card .promo-properties {
        margin-top: 14px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        justify-content: space-between !important;
        gap: 0 !important;
    }
    /* Figma draws the columns 135px/131px wide, but its placeholder label is both misspelled
       ("Lighning Fast Withdarawals") and set in Inter, which is narrower than our Montserrat —
       the real string needs a third line at that width. 150px keeps the design's two-line shape
       with the columns still inside the 332px row. */
    .promo-lobby-card .promo-properties .promotion-property {
        max-width: 150px !important;
    }
    .promo-lobby-card .promotion-property .promotion-property-text {
        font-size: 15px !important;
        line-height: 18px !important;
    }

    /* ===== Deposit-options frame (same Figma frame) =====
       The design puts it 6px under the properties row and pads it 9px inside; ours sat 32px lower
       with 16px of top padding. The 32px is 4px of swiper-wrapper margin + 20px of swiper padding
       held open for the pagination dots + 8px on the frame itself — and the lobby carries a single
       promotion, so the pagination is display:none and all of it is empty.
       The dots are absolutely positioned, so simply removing the reserve would drop them onto the
       frame as soon as a second promotion exists. Swiper marks a single-slide pagination with
       `swiper-pagination-lock`, so the reserve is taken away only while that class is present and
       comes back on its own when the lobby really has several promotions. */
    .promotions-placeholder .swiper-container {
        padding-bottom: 0 !important;
    }
    .promotions-placeholder .swiper-wrapper {
        margin-bottom: 0 !important;
    }
    /* the row's own mb-2 sat inside that distance too, so the 6px has to start at the text */
    .promo-lobby-card .promo-properties {
        margin-bottom: 0 !important;
    }
    .promotions-deposit-container {
        margin-top: 6px !important;
        padding-top: 9px !important;
    }
    /* With several promotions the dots reappear and need a lane. Sized so the gap above and below
       them stays in the same 6-7px rhythm as everywhere else in the banner — the reserve used to be
       20px, which left 18px over the dots and 13px under them. */
    .promotions-placeholder:has(.swiper-pagination:not(.swiper-pagination-lock)) .swiper-container {
        padding-bottom: 16px !important;
    }
    .promotions-placeholder:has(.swiper-pagination:not(.swiper-pagination-lock)) .promotions-deposit-container {
        margin-top: 0 !important;
    }
    .promotions-placeholder .swiper-pagination {
        height: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

}

/* ===== Cryptocom: header dark gradient ===== */
/* (the left sidebar #side-menu / #side-menu-wide are dark via --sidebar-menu-bg in variables.css) */
.main-nav-container {
    background: linear-gradient(90deg, #010101 0%, #1F1F1F 100%) !important;
}

/* Cryptocom: full-page background (behind the sections) is the dark gradient
   from --main-bg -> --main-bg-to (set to #010101 -> #1F1F1F in variables.css),
   applied by the template's own `bg-gradient-to-b from-mainBg to-mainBgTo` on #main-content.
   The loading screen (#loader, bg-mainBg) uses the same var, so it's dark too. */

/* ===== Cryptocom: PROMOTIONS page (Figma: dark casino bg + dark-blue cards) =====
   The base theme paints an orange promotions-background.webp (@36% opacity) over the
   whole page (promotions.php line 2), and the promo cards are translucent gray so the
   orange showed through → the whole page read orange. Figma shows dark-blue cards on
   the dark casino background. */
img[src*="promotions-background"] {
    display: none !important;
}
/* ===== Cryptocom: BONUSES page (review #8: "change the page background to blue") =====
   Same mechanism as promotions: bonus_hub.php line 2 paints an orange bonuses-background.webp
   at 36% opacity over the whole page (poker table + coins), which is the yellow haze behind
   the cards and the footer. Figma has NO bonuses frame (design map section 252:2270), so the
   page falls back to the standard cryptocom page background — the #010101 → #1F1F1F gradient
   + body_bg on `#content > div > .flex-1` (top of this file). src OR data-src (lazyload). */
img[src*="bonuses-background"],
img[data-src*="bonuses-background"] {
    display: none !important;
}
/* Promo cards — exact Figma values (promotions frame 2077:1562, card body "Frame 311"
   2082:1986): fill linear-gradient 90deg #0A2860 → #010815, corner radius 10.
   NB this is deliberately DARKER than the cashback tiers / FAQ rows (#093B98 → #031332):
   the promotions cards sit on the page artwork and Figma keeps them near-black so the
   background reads through. An earlier by-eye version reused the bright cashback blue. */
#promotions-container .grid > div {
    background: linear-gradient(90deg, #0A2860 0%, #010815 100%) !important;
    border-radius: 10px !important;
}
/* Breathing room under the last promo row. Figma (content area "Frame 253" 2077:1608) leaves
   23px between the lowest card and the footer; live it was 0 because our own
   `footer { margin-top: 0 }` removed the template's gap. Scoped to this sub-page so the
   footer stays flush everywhere else. */
.promotions.sub-page {
    padding-bottom: 23px !important;
}

/* Promo card illustration — Figma keeps it a SQUARE at the right edge, roughly the full
   card height (card 2082:1986 is 1604x184, the artwork rects "1-st-dep"…"4-th-dep" are
   179x179 flush right). The template instead gives the img `max-w-[35%]` + `object-cover`,
   which smears it across a third of the card and crops it. Constrain it to a square and
   stop cropping. Scoped to the same container width where the template switches the image
   to absolute (`@lg/promo-card` = 32rem), so the stacked narrow layout is untouched. */
@container promo-card (min-width: 32rem) {
    #promotions-container .grid > div > img {
        aspect-ratio: 1 / 1 !important;
        width: auto !important;
        /* keep the template's 35% ceiling: on a tall card (long title) a pure square would
           grow past it and eat into the text column */
        max-width: 35% !important;
        object-fit: contain !important;   /* never crop the illustration */
    }
    /* The template pairs `max-w-[70%]` text with a `max-w-[35%]` image — 105% together, so a
       long title runs straight into the illustration (measured: overlap on every half-width
       card, and on the full-width one below ~1200px). Cap the text column so the two can
       never meet, leaving a small gap. */
    #promotions-container .grid > div .content {
        /* The box starts 2rem from the left (the template's ml-8 at this container size),
           so a plain percentage cap lands 2rem further right than intended — subtract it.
           63% - margin + 35% image leaves a ~2% gutter between text and illustration. */
        max-width: calc(63% - 2rem) !important;
        /* a single very long word (e.g. a big prize figure) must not stick out either */
        overflow-wrap: break-word !important;
    }
}
/* Card title line-height per Figma (40px text on a 48px line = 1.2; the template runs 1.5,
   which pushes the title block ~13px taller than the design). */
#promotions-container .grid > div .content > div:first-child {
    line-height: 1.2 !important;
}
/* Promo "Sign up" button → blue gradient pill (Figma), like the header/banner.
   Radius per Figma promotions frame 2077:1562 ("Sign up komponens" 2077:1855, 76x31, r=100);
   the markup has no .btn-rounded, so the .btn base radius (5px) would win (review #5). */
.promotions .signup-button {
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    border-color: transparent !important;
    border-radius: 100px !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;   /* Figma "Sign up komponens" label = Inter 700 14px */
}
.promotions .signup-button::before {
    display: none !important;
}
/* Promo "Read more" → blue outline instead of the base orange border + orange hover. */
.promotions .promotion-bonus-info-button {
    border-color: #698AF7 !important;
}
.promotions .promotion-bonus-info-button:hover {
    background: #698AF7 !important;
    color: #FFFFFF !important;
}

/* ===== Cryptocom: TOURNAMENTS page (Figma: blue accents, base theme was orange) =====
   Figma shows blue Active/Expired badges, a blue "?" info button and blue Sign up. */
/* State badge (Active/Expired) — base bg-{getStateColor} resolves to orange (customBg).
   Figma paints it with the "Sign up komponens" (tournaments frame 2023:2889 → 2023:3041,
   58x26): vertical gradient #36D5DB → #698AF7 with the component's drop + inner shadow. */
.tournaments .text-tournamentStateText {
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    /* Figma pill (r=100); the markup only carries rounded-lg = 8px. */
    border-radius: 100px !important;
    box-shadow: 0 10px 13.7px #FFFFFF59 inset, 0 4px 4px #00000040;
    color: #FFFFFF !important;
}
/* "?" tournament-info button. Two Figma sources disagree: the tournaments page frame
   2023:2889 (Frame 270) draws a 26x26 SOLID #093B98 circle with a white "?", while the
   component set "Kérdőjel button komponens a tournamentshez" 317:1924 draws a 39x39
   ring (no fill + 1px #FFFFFF) whose Variant2 = hover is linear-gradient(90deg,#0A2860,#010815).
   User decision: default state from the page frame, hover from the component. */
.tournaments .tournament-info-button {
    background: #093B98 !important;
    border: none !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
    /* Figma 26x26; the markup carries Tailwind w-8 h-8 (32px). */
    width: 26px !important;
    height: 26px !important;
    min-width: 26px;
    flex: 0 0 auto;
}
.tournaments .tournament-info-button:hover {
    background: linear-gradient(90deg, #0A2860 0%, #010815 100%) !important;
}
.tournaments .tournament-info-button::before {
    display: none !important;
}
/* The "?" glyph: white, and scaled to the smaller circle. The icons.svg symbol uses a
   24-unit viewBox in which the visible mark spans ~17 units, so an 18px box yields the
   ~13px glyph height Figma shows (text "?" Inter 500 18px inside the 26px circle). */
.tournaments .tournament-info-button svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    width: 18px !important;
    height: 18px !important;
}
/* Sign up button (guest) → blue gradient pill (Figma tournaments frame 2023:2889; review #5). */
.tournaments .signup-button {
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    border-color: transparent !important;
    border-radius: 100px !important;
    color: #FFFFFF !important;
}
.tournaments .signup-button::before {
    display: none !important;
}

/* ===== Cryptocom: live-chat launcher (review #14) =====
   The 7soft chat widget paints its round launcher with its own `.custom-color` /
   `.custom-border-color` classes (#884119, a sunclub brown-orange). It renders inside our DOM,
   so it can be recoloured from here. Scoped to the circular launcher button only. */
.button.button-circle.custom-color,
.button.button-circle.custom-border-color {
    background-color: #093B98 !important;
    border-color: #093B98 !important;
}

/* Tournament card text scrim (review #7). The artwork is the card background and the title /
   prize / buttons sit on top of it; the template darkens them with only rgba(0,0,0,0.38)
   (_renderCard.php line 45), so long titles read badly over busy art. Figma's card text panel
   "Frame 274" (2023:3046) is a 60% black background over the same artwork. */
.tournaments .content {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* ===== Cryptocom: TOURNAMENT INFO POPUP (review #10) =====
   The dialog served by /tournament-info-dialog/<id> (#tournament-info-modal). Figma
   "Tournaments ablak" 441:997. Its colours came from --description-background /
   --modal-tournament-header-bg / --tournament-state-text (now dark+blue in variables.css) and
   from description-format.css (section bars, prize table); what is left here is what a
   variable cannot express. */
/* Panel: Figma frame fill = linear-gradient(180deg, #010101, #1F1F1F); the markup asks for a
   from/to gradient of the SAME var, so the second stop has to be added. */
#tournament-info-modal .modal-content {
    background: linear-gradient(180deg, #010101 0%, #1F1F1F 100%) !important;
}
/* State badge (Active/Upcoming/Expired) — Figma 441:1002/441:1003 = WHITE pill r=100 with a
   #093B98 label, i.e. the inverse of the tournament CARDS, whose badge is a blue gradient with
   white text. The card rule matches here too (the modal is appended to <body>, which carries the
   page class), so the popup needs the explicit inversion. */
#tournament-info-modal .text-tournamentStateText {
    background: #FFFFFF !important;
    border-radius: 100px !important;
    box-shadow: none !important;
    color: #093B98 !important;
}
/* Close button — Figma 441:1004/441:1006 = white circle with a #093B98 cross. The other
   cryptocom modals use a transparent cut-out X (mix-blend-mode), which would show the panel
   through; here the design wants a painted blue glyph, so the blend mode is switched off. */
#tournament-info-modal .modal-close {
    color: #093B98 !important;   /* --close-button is still sunclub orange */
}
#tournament-info-modal .modal-close svg {
    mix-blend-mode: normal !important;
    color: #093B98 !important;
    fill: #093B98 !important;
}
/* Game/provider chips in the popup body (bg-darkButtonBg = sunclub orange). The Figma popup has
   no such chip — the design ends at the T&C bar — so they follow the brand blue instead. */
#tournament-info-modal .bg-darkButtonBg {
    background: #093B98 !important;
    color: #FFFFFF !important;
}
/* Separator lines — Figma Line 1-4 are solid #FFFFFF (the theme uses #FFFFFF85). */
#tournament-info-modal .border-modalHeaderBorder {
    border-color: #FFFFFF !important;
}

/* ===== Cryptocom: RTP page — back-arrow + "Understanding RTP" btn-dark orange → blue ===== */
/* Pill shape per Figma RTP frame 2031:3989 ("Understanding RTP" 2031:5358 = 163x38 r=100);
   the .btn base radius (5px) applies otherwise, even where .btn-rounded is present (review #5). */
/* The back-arrow has NO counterpart in the Figma RTP frame (the design header is just the
   icon + "RTP" + the games badge), so it keeps the blue gradient. */
#back-to-main.btn-dark {
    background: linear-gradient(180deg, #36D5DB 0%, #698AF7 100%) !important;
    border-color: transparent !important;
    border-radius: 100px !important;
    color: #FFFFFF !important;
}
/* "Understanding RTP" — Figma 2031:5358 is a SOLID #093B98 pill, 163x38, label Inter 700 15px
   (review #12). The by-eye pass had painted it the cyan→blue gradient at 204x40; the width
   follows from the label, so only the fill, the height and the type size are set here. */
#show-rtp-info.btn-dark {
    background: #093B98 !important;
    border-color: transparent !important;
    border-radius: 100px !important;
    color: #FFFFFF !important;
    height: 38px !important;
    padding: 0 10px !important;
}
#show-rtp-info.btn-dark span {
    font-size: 15px;
    font-weight: 700;
}
#back-to-main.btn-dark::before,
#show-rtp-info.btn-dark::before {
    display: none !important;
}
#back-to-main svg,
#show-rtp-info svg,
#show-rtp-info span {
    color: #FFFFFF !important;
}
/* RTP order dropdown button (btn-dark orange → blue). Scoped by id so the navbar
   user dropdown (.dropdown-button) is untouched. */
/* Figma 2031:5361 "Select order of games" = SOLID #093B98, 186x50, r=100 (review #12).
   The two-line label (10px caption + value) already matches the design; the template's
   `!h-10` capped the box at 40px, hence the explicit height. */
#dropdown-rtporder .dropdown-button {
    background: #093B98 !important;
    border-color: transparent !important;
    border-radius: 100px !important;
    height: 50px !important;
    min-width: 186px;
}
#dropdown-rtporder .dropdown-button::before {
    display: none !important;
}
/* Hover for both RTP controls = the components' Variant2 (2031:5391 / the 186x50 set):
   linear-gradient(90deg, #093B98, #031332). */
#show-rtp-info.btn-dark:hover,
#dropdown-rtporder .dropdown-button:hover {
    background: linear-gradient(90deg, #093B98 0%, #031332 100%) !important;
}
/* Open dropdown LIST (DropdownWidget — RTP order, language, payment bonus select). The panel
   colours come from the --select-box-* vars (now dark, see variables.css); the items are
   transparent pills with a gradient hover per Figma "Nyelvek" 2031:3352 Variant2, which a
   variable cannot express. The selected item gets the same gradient (Figma has no separate
   selected state). Was sunclub orange on every list. */
.dropdown-items {
    border-radius: 10px;   /* Figma panel 2002:1468 r=10; the markup's rounded-lg is 8px */
}
.dropdown-items .dropdown-item {
    border-radius: 100px;
}
.dropdown-items .dropdown-item:hover,
.dropdown-items .dropdown-item.bg-selectBoxBgSelected {
    background: linear-gradient(90deg, #093B98 0%, #031332 100%) !important;
    color: #FFFFFF !important;
}
#dropdown-rtporder .dropdown-button,
#dropdown-rtporder .dropdown-button p,
#dropdown-rtporder .dropdown-button svg {
    color: #FFFFFF !important;
}
/* Games counter — Figma 2031:5398 has NO fill, only a 1px #FFFFFF ring (119x38, r=100,
   label Inter 700 15px). It is the same component as the search modal's "Showing Popular"
   badge, while the global .btn-view-all rule paints it solid #093B98 — hence this page-scoped
   override (review #12). It is a static label (`no-hover`), so the hover state is neutralised. */
.game-rtp-main .btn-view-all,
.game-rtp-main .btn-view-all:hover {
    background: transparent !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 100px !important;
    color: #FFFFFF !important;
    height: 38px !important;
    padding: 0 14px !important;
}
.game-rtp-main .btn-view-all span {
    font-size: 15px !important;
    font-weight: 700;
}
/* ===== Cryptocom: "Understanding RTP" text block (review #13: font sizes are too large) =====
   #rtp-info is the panel that slides open under the header. The template gives it
   `text-s md:text-xl` (20px body), `h1 text-l md:text-2xl` (24px) and `h2 text-m md:text-xl`
   (20px) — larger than any other copy on the site (the policy pages run 16px).
   Figma has no frame for the opened panel, so the size comes from the design's own long-copy
   block (Privacy Policy 2031:3742 = 14px / lh 17); the headings are scaled proportionally.
   ID-scoped, so the utility classes are outranked without !important. */
#rtp-info {
    font-size: 14px;
    line-height: 17px;
}
#rtp-info h1 {
    font-size: 20px;
    line-height: 1.2;
}
#rtp-info h2 {
    font-size: 16px;
    line-height: 1.2;
}

/* ===== Cryptocom: site logo sizing (Figma) =====
   The shared template sizes the logo by HEIGHT only (`h-16` in the header, `h-20` in the footer)
   and lets the width follow. That works for a near-square mark like mrjones's (800x640 → 100x80 in
   the footer), but cryptocom's lockup is wide (2087x789 = 2.64:1), so the same 80px height rendered
   it **212x80** — over twice mrjones's width and 22% wider than the design. Conversely the header
   box caps the width at 100, so there it painted only 100x38, smaller than the design.
   Figma: header logo 120x45 (home frame 252:2276), footer logo 173x65 (privacy frame 2049:1515). */
.main-nav-container .navbar-brand {
    width: 120px !important;
    /* The anchor keeps the template's `h-16` (64px) while the image above is pinned to 45px, so
       without a centring box the logo sticks to the TOP of the header and sits ~9px above the
       Log in / Sign up buttons. Figma centres both on the same line (mobile frame 252:2916:
       logo 103x39 at y=9, buttons 29px tall at y=14 — both centred at 28.5 in a 57px header). */
    display: flex !important;
    align-items: center !important;
}
.main-nav-container .navbar-brand img {
    width: 120px !important;
    height: 45px !important;
    object-fit: contain !important;
}
/* Phones get a smaller lockup: the mobile frame (252:2916) draws it 103x39 in a 57px bar, which
   leaves the design's 9px above and below. The desktop 120x45 only left 6px.
   The image also carries `py-2 md:py-0`, so below the md breakpoint 8px of padding top and bottom
   eat into the box: `object-fit: contain` then had only 103x23 to fill and drew the lockup at 61x23
   — 60% of the design, which is why the mark looked small however the box was sized. */
@media (max-width: 640px) {
    .main-nav-container .navbar-brand,
    .main-nav-container .navbar-brand img {
        width: 103px !important;
        height: 39px !important;
    }
    .main-nav-container .navbar-brand img {
        padding: 0 !important;
    }
}
footer img[src*="site-logo"],
footer img[data-src*="site-logo"] {
    width: 173px !important;
    height: 65px !important;
    object-fit: contain !important;
}
/* The `/support`, `/banking` and `/contact` pages render a THIRD copy of the logo inside the page
   body — `views/site/<casino>/view.php:30` prints it with `width="80%"`, so it filled the column:
   1750x662 on cryptocom (the wide 2087px artwork) and 800x640 on mrjones. Both brands are affected,
   it is simply more obvious with a wide lockup. Figma has NO frame for these pages, so rather than
   inventing a number the cap is the largest logo size the design DOES define — the footer's 173px. */
.logoinpages img {
    max-width: 173px !important;
    width: auto !important;
    height: auto !important;
}
/* The same legacy view (`views/site/<casino>/view.php`) lays its body out with Bootstrap-3 grid
   classes — `.row` with two `.col-md-6` (copy | logo). Those classes are NOT in the current
   Tailwind build, so the two columns get no width and no float and end up drawn on top of each
   other: on /contact the text sits at y157 and the logo column at y155, so the logo lands across
   the copy. It is broken on mrjones too, where it goes unnoticed only because that logo is 1146px
   tall and the text falls over its empty upper area. Restore the intended two-column layout. */
/* Stack the legacy grid instead of trying to run it as two columns: /banking and /support (the
   modern `t-aztec` views) put the copy full width with the logo centred underneath, and the user
   wants /contact to match them. */
.row:has(> .col-md-6) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.row > .col-md-6 {
    flex: 1 1 100%;
    min-width: 0;
}

/* ===== Cryptocom: /contact — make it look like the other content pages =====
   `views/site/t-aztec/contact.php:16` wraps the page in a bare `<div class="site-contact">`,
   while /banking and /support use `.pageContent bg-[rgba(125,125,125,0.1)] px-5 py-7 mt-4 mb-4
   shadow-[0_0_3px_0_rgba(0,0,0,0.75)] text-mainText rounded-lg`. Because the class is missing,
   /contact fell out of every `.pageContent` rule: no panel, no typography, and the page-background
   override did not match either, so the body artwork showed through. t-aztec is off-limits, so the
   same treatment is reproduced here. */
.site-contact {
    background: rgba(125, 125, 125, 0.1);
    padding: 28px 20px;                                  /* py-7 px-5 */
    margin: 16px 0;                                      /* mt-4 mb-4 */
    border-radius: 8px;                                  /* rounded-lg */
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.75);
    color: #FFFFFF;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    line-height: 17px;
}
.site-contact p,
.site-contact li,
.site-contact span,
.site-contact div,
.site-contact a {
    font-size: 14px;
    line-height: 17px;
}
/* The logo column sits last in the row, so stacking already puts it underneath. Centre it the way
   the modern views do (`logoinpages w-full flex justify-center items-center` in banking.php:45) —
   `text-align` alone does not work because the img is a block. */
.site-contact .logoinpages {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
}
/* The page title: this view uses a bare `h1.viewTitle` with no utility classes, so it inherited the
   14px body size and read like ordinary copy. The other content pages show a 32px heading. */
.site-contact .viewTitle {
    font-family: Montserrat, Verdana, sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    margin-bottom: 16px;
}
/* `views/site/t-aztec/contact.php:29` prints the in-page logo with a hardcoded
   `style="margin-top:-50px"`. That was harmless while the image was ~1150px tall, but once the
   logo is capped at 173px the pull-up lands the logo straight on top of the copy. t-aztec is the
   shared base and off-limits, so the inline style is neutralised here instead. */
.logoinpages img {
    margin-top: 0 !important;
}

/* ===== Cryptocom: policy / long-copy pages (Figma Privacy Policy frame 2031:3470) =====
   The design's copy block 2031:3742 is **Verdana 400 14px / line-height 17**, white, in a 1610px
   column with no coloured box (--page-content-bg is already transparent from an earlier round).
   Live the template ran 16px / lh 24 in Montserrat, with list items at lh 28.
   These pages are `views/site/.../view.php` → `.pageContent`, so ONE rule covers all 10 policy
   pages AND every language (the translations render into the same container).
   ⚠️ Verdana is a deliberate deviation from the site's Montserrat: the design specifies it for
   long-form copy (the tournament-info popup body is Verdana too). Easy to drop if disliked. */
.pageContent {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    line-height: 17px;
}
.pageContent p,
.pageContent li,
.pageContent span,
.pageContent td,
.pageContent div {
    font-size: 14px;
    line-height: 17px;
}
/* The list items need a stronger selector: the base template has `.content ul li` (0-1-2) at
   t-aztec/full_site_template.css:5477 (1rem / 1.75rem, plus a 0.75rem variant under 768px),
   which outranks a plain `.pageContent li`. Font-family too — the base sets
   `h1..h6, li { font-family: Montserrat }` at line 18, so `li` never inherits our Verdana. */
.pageContent ul li,
.pageContent .content ul li {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    line-height: 17px;
}
/* Some translated policy pages carry markup pasted straight out of ChatGPT / Word: inline
   `font-family: Arial`, `font-size: 11pt` and even `--tw-*` custom properties, which is why the
   German page rendered in Arial/Söhne instead of the design's Verdana. Measured in the DB:
   de-DE 5 of 10 pages, es-ES 4, nl-NL 1, plus 4 English pages with pt sizes; the other seven
   languages are clean. An inline style beats normal CSS, so the design values are forced here —
   no data is touched. The pasted markup is still worth cleaning in s-admin. */
.pageContent [style],
.pageContent [style] * {
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 14px !important;
    line-height: 17px !important;
    /* The pasted markup also carries a COLOUR: the German page rendered three elements in
       rgb(55,65,81) (#374151, Tailwind gray-700) — near-invisible on the dark background, and
       the reason that page looked a different shade than the English one. Figma has the whole
       policy copy in #FFFFFF. Descendants are included because the inner spans inherit it. */
    color: #FFFFFF !important;
}

/* ===== Cryptocom: MOBILE layout vs the Figma mobile frames (review #7, responsiveness) =====
   Figma mobile frames: home 252:2916 and promotions 2089:2058, both 360 CSS px wide.
   Measured live at the mobile branch and compared against those frames; only the two real
   deviations are corrected here. */
@media (max-width: 640px) {
    /* Game-section headers wrapped the title onto a second line ("Live / Games").
       Figma 'live games' 252:3020 keeps it on ONE line: title block 103px + View-all pill
       106x37 + arrows 78x35 inside a 332px row. Live the title block (116px) and the
       View-all block (214px) came to 330px, 2px more than the 328px available at 360px,
       so the flex row shrank the title and it wrapped. Trimming the pill padding and the
       arrow circles to the Figma sizes brings the row to ~320px.
       The title keeps its default shrink + gets an ellipsis, so an unusually long section
       name truncates instead of overflowing the row. */
    .game-cat-list-header > div:first-child {
        white-space: nowrap;
        min-width: 0;
    }
    .game-cat-list-header > div:first-child > div {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .game-cat-list-header .btn-view-all {
        padding-left: 10px;
        padding-right: 10px;
    }
    .game-cat-list-header .btn-view-all .bg-mainTitleLeftRightIcon {
        margin-left: 6px;
    }
    .game-cat-list-header .swiper-button {
        width: 30px;
        height: 30px;
        padding: 5px !important; /* the markup carries !p-2 */
    }

    /* Promotions cards, Figma 2089:2058: the stacked cards sit 20px apart (card frames
       2089:2500/2536/2551 are 316x334 at y 6444/6798/7152) and the text column is centred.
       Live the grid gap was 16px and the template's asymmetric .content inset
       (32px left / 16px right) pushed the centred text and buttons 8px off-centre. */
    #promotions-container .grid {
        gap: 20px;
    }
    #promotions-container .grid > div .content {
        margin-left: 16px;
    }

    /* No body artwork on the mobile HOME page. The Figma mobile frame 252:2916 fills its
       'törzs' (252:4587) with a plain linear-gradient(180deg,#010101,#1F1F1F); a full
       IMAGE-fill sweep of that frame turns up only the logo, the bonuses icon, the banner
       and the footer icon. Live, the global body_bg is anchored `center bottom`, so on a
       phone it landed right behind the Top Wins block.
       Scoped with :has() to the home page only — the DESKTOP home does carry the artwork in
       Figma, and the promotions mobile frame (2089:2430) has its own IMAGE fill, so both of
       those keep their existing rules (their :has() selectors also outrank this one). */
    #content > div > .flex-1:has(.main-slider-container) {
        background-image: linear-gradient(180deg, #010101 0%, #1F1F1F 100%) !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* "Available deposit options:" is visible on the Figma mobile banner (deposit bar 252:3007,
       330x81 — the label sits on its own line above the payment pills, Inter 400 15px white),
       but the shared t-aztec lobby view gives it `hidden md:block`
       (Promotions/views/t-aztec/lobby_view.php:57-58), so it disappeared below 768px.
       The container is `flex flex-wrap` and the label carries `basis-full text-center`, so simply
       showing it puts it on its own centred line and the bar grows to fit — no other change needed.
       Its base size is already `text-[15px]`, i.e. the Figma value. */
    .promotions-deposit-container > .basis-full {
        display: block;
    }

    /* Banner type at the Figma MOBILE values (frame 'banner szöveg' 252:2981):
       title Inter 700 25px / lh 30.3 · Sign up pill 96x32 r=100 with a 15px label ·
       check props Inter 700 15px / lh 18.2 with a 23px icon.
       The desktop rules earlier in this file are fluid clamp()s sized off the container, and on a
       phone they bottom out at 24px (title) and 18px (button) — close, but not the design's values,
       and the button in particular stayed 297x48 instead of 96x32. */
    .promo-lobby-card .intro > h3 {
        font-size: 25px !important;
        line-height: 30.3px !important;
    }
    .promo-lobby-card .signup-button,
    .promo-lobby-card .deposit-button {
        width: 96px !important;
        height: 32px !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 18.2px !important;
    }
    .promo-lobby-card .promotion-property-text {
        font-size: 15px !important;
        line-height: 18.2px !important;
    }
    .promo-lobby-card .promotion-property-checkmark {
        width: 23px !important;
        height: 23px !important;
    }

    /* Header bar: Figma 'fejléc' 252:2919 is 57px tall; the template's h-16 gives 64. */
    .main-nav-container {
        height: 57px !important;
    }

    /* Banner overlay: the Figma MOBILE banner (252:2980) paints a SYMMETRIC horizontal gradient
       over the artwork — `#093B98 @0 → transparent @0.5 → #093B98 @1`, handles (1,0.5)→(0,0.5),
       i.e. blue down BOTH side edges and clear in the middle. Our rule (top of this file) is the
       DESKTOP one, `90deg #093B98 → transparent`, which is blue on the left only, so the right-hand
       blue was missing on a phone. There is no vertical component in either — the design has no
       blue along the top or bottom edge. Desktop is left as it is. */
    /* …and the mobile frame also uses a DIFFERENT artwork: its image fill is
       `a8c4ec18770840533ac190c1913f439e0383c07e` (one big centred Bitcoin, roulette wheel left,
       blue chips bottom-right) where the desktop banner uses `f2b0409d…`. Exported from the Figma
       fill map and converted to `images/cryptocom/cryptocom_banner_bg_mobile.webp` (1536x1024).
       ⚠️ The fill reports `scaleMode: STRETCH`, which is NOT a literal stretch — that is what the
       Figma API calls the UI's "Crop" mode, and it comes with an imageTransform:
         [0.8619, 0, 0.0684]
         [0,      1, 0     ]
       i.e. take 86.19% of the image width starting at 6.84%, and the full height. That crop is
       1324x1024 = 1.293, and the banner box is 362x280 = 1.293 — the same ratio, so the design does
       NOT distort the artwork; it is a centred cover crop. Hence `cover`, not `100% 100%`. */
    .promotions-placeholder {
        background-image:
            linear-gradient(90deg, #093B98 0%, rgba(0, 0, 0, 0) 50%, #093B98 100%),
            url('/images/cryptocom/cryptocom_banner_bg_mobile.webp');
        background-size: cover, cover;
        background-position: center, center;
    }
}

/* ===== Cryptocom: mobile menu bar (Menu / Bonuses / Search) =====
   Figma 'menü' 252:2939 (home mobile) and 2089:2091 (promotions mobile): a SOLID #093B98 bar,
   362x60, flush under the header, white 24px icons with Inter 700 12px labels.
   The base theme paints it `bg-sidebarMenuBg` (our #010101) with `my-1`, so it read as a black
   strip with dark gaps above and below.
   NOT inside the 640px media query on purpose: mobile_menu_view.php shows this nav in portrait
   up to 768px, so the styling has to hold there too — the nav is JS-hidden above that anyway. */
#bottom-mobile-menu {
    background: #093B98;
    margin-top: 0;
    margin-bottom: 0;
}
#bottom-mobile-menu > div {
    min-height: 60px;
}
#bottom-mobile-menu p {
    font-weight: 700; /* the markup carries font-semibold (600) */
}
/* All three symbols in the shared /css/icons.svg paint with fill="currentColor", so `color`
   drives them. Bonuses and Search inherited white already; the hamburger sat at #CDCDCD. */
#bottom-mobile-menu svg {
    color: #FFFFFF;
}