@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Sora&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400..900&family=Sora&display=swap');

/**
 * Bluechip — Dark Theme
 * Structure based on Spinozo-dark-final.css; palette + typography sourced from
 * the live bluechip.io design tokens (read 2026-06-01):
 *   brand primary    #FF0960  (hot pink / magenta — logo crown, links, bonus, promo CTA)
 *   brand secondary  #01AF70  (green — primary conversion CTA: SIGN UP / register)
 *   page background  #03193A  (deep navy blue, measured body bg)
 *   deepest navy     #071837 / raised surface #12294A
 *   text scale       #ECEDEE / #ADB2B8 / #718298 / #5A697C (cool blue-grays)
 *   overlay base     #EEF0F4 (white) at low alpha — Bluechip's --alpha-night-* system
 *
 * COLOUR-ONLY theme — fonts are intentionally left untouched (site keeps its own typography).
 *
 * Version: 1.10 (2026-06-01)
 * Changelog:
 *   1.10 — auth-form input focus ring set to CYAN per clarification: #1BC0E2/#01DCFF
 *          was NOT a leftover default — the user picked it in DevTools to show the
 *          target. Reverted v1.9's pink ring; focus border now #1BC0E2 + box-shadow
 *          0 0 0 1px rgba(1,220,255,0.4) (= #01DCFF @ 40%). Resting border unchanged.
 *   1.9 — auth-form inputs: recoloured the focus ring from the leftover default
 *         cyan (#01dcff/#1bc0e2, hardcoded in the input CSS module) to brand pink.
 *         Added box-shadow: 0 0 0 1px var(--theme-brand-primary) on input/phone/
 *         country-button :focus — border-color alone didn't cover the cyan glow,
 *         which is a box-shadow. Resting border left at #18335C (ask if it should
 *         change too).
 *   1.8 — top-bar search input: resting background set to the page background
 *         #03193A so it blends in when idle. Focus state kept exactly as before
 *         (#04142E bg + --theme-border-base border) by pinning that bg on :focus
 *         (otherwise focus would inherit the new resting colour).
 *   1.7 — sidebar background set to #0B2244 (= color(srgb 0.0424 0.1329 0.265),
 *         picked in DevTools). KEY: the sidebar <nav> paints its own background
 *         directly, NOT via --sidebar-bg — which is why earlier sidebar-colour
 *         token changes had no visible effect. Added a direct override on
 *         nav.scrollbar-hide:has(.sidebar-menu/.sidebar-config); also set the
 *         sidebar surface tokens (bg/header/menu-group/switcher) to #0B2244.
 *   1.6 — top bar background recoloured to the page background #03193A so it
 *         matches the rest of the page; kept the translucency (0.8 alpha) and the
 *         blur(12px). Was rgba(5,22,50,0.8) — a slightly off navy.
 *   1.5 — narrowed borders to the TOP BAR only per request. Re-hid the borders
 *         that v1.3 had restored everywhere else: header search, sidebar/menu
 *         (header line, dividers, right edge, brand switcher), generic surface-base
 *         panels, brand-accent + cashback cards, and social links. The ONLY border
 *         kept is the top-bar nav bottom separator line (header nav) — matches the
 *         original bluechip.io top bar (bottom line + flat search, no menu borders).
 *   1.4 — sidebar background recoloured to match the live bluechip.io menu
 *         (BurgerMenu container = rgb(18,41,74) = #12294A, the brand's raised
 *         navy). Set --sidebar-bg, --sidebar-header-bg, --sidebar-menu-group-bg
 *         and --sidebar-switcher-bg to #12294A (was the darker #04142E / #03193A)
 *         so the side menu reads as the same raised navy panel as the original.
 *   1.3 — stopped hiding the DEFAULT theme's borders/lines per request. The
 *         default casino theme draws these borders; the ported Spinozo overrides
 *         were flattening them. Removed the border-color:transparent / border:none
 *         overrides on: top-bar nav bottom line, header search, sidebar (header
 *         line, dividers, right edge, brand switcher), generic surface-base
 *         panels, and brand-accent + cashback card borders. KEPT three deliberate
 *         component restyles (their borders are part of their own design, not the
 *         default chrome): auth-form input states + phone wrapper, flat translucent
 *         action buttons (forfeit / cashback / ghost-icon), white popup-corner toast.
 *   1.2 — removed ALL typography changes per request: Jost @import, global
 *         font-family, the --font-game-title token, and every font-family /
 *         font-size / font-weight / line-height declaration in the overrides.
 *         Theme now affects only colour, surface, radius, spacing & layout —
 *         the site's fonts are left exactly as they are.
 *   1.1 — verified against the live bluechip.io homepage. Confirmed page bg is
 *         exactly #03193A and the primary conversion CTA (SIGN UP) is green
 *         #01AF70 (maps to --theme-semantic-success / register button), while
 *         pink #FF0960 stays the accent/links/bonus colour (GET IT NOW promo
 *         gradient #FF2378→#FB6245). Anchored --theme-surface-elevated on the
 *         brand's exact raised navy #12294A (= LOGIN/secondary button), retuned
 *         the navy surface scale, and set brand-primary-hover to #FF2378.
 *   1.0 — initial Bluechip dark theme. Ported the Spinozo dark-theme structure
 *         (token block + component overrides), recolored every token to Bluechip
 *         navy + pink + green, swapped display & body font to Jost, and navy-tinted
 *         all hardcoded values in the component overrides.
 */

.game-card-title {
  font-size: 16px !important;
  text-transform: capitalize;
  line-height: 1;
  padding-bottom: 2px;
}

@media (min-width: 768px) {
  .game-card-hover-overlay {
    padding-bottom: 6px !important;
  }
}

html[data-theme^="custom-"] {

  --theme-brand-primary: #FF0960;
  --theme-brand-primary-hover: #FF2378;
  --theme-brand-text: #FF3D7E;
  --theme-brand-accent: #D60050;
  --theme-brand-primary-contrast: #FFFFFF;


  --theme-game-toolbar-logo: #FFFFFF;


  --theme-bg-primary: #03193A;
  --theme-bg-secondary: #020F24;
  --theme-surface-base: #0C2449;
  --theme-surface-raised: #0A2042;
  --theme-surface-elevated: #12294A;
  --theme-surface-solid: #0A2042;
  --theme-surface-icon: #1B3358;
  --dropdown-bg: #0C2449;


  --theme-text-primary: #ECEDEE;
  --theme-text-secondary: #ADB2B8;
  --theme-text-tertiary: #718298;
  --theme-text-muted: rgba(113, 130, 152, 0.6);


  --theme-text-primary-rgb: 236 237 238;


  --theme-border-base: rgba(238, 240, 244, 0.10);
  --theme-border-subtle: rgba(238, 240, 244, 0.05);
  --theme-border-accent: rgba(255, 9, 96, 0.3);



  --theme-semantic-success: #01AF70;
  --theme-semantic-success-hover: #02C880;


  --theme-semantic-warning: #FF8B01;
  --theme-semantic-warning-hover: #FFAB2E;


  --theme-semantic-error: #EE4337;
  --theme-semantic-error-hover: #F25B50;


  --theme-semantic-info: #4D90FF;
  --theme-semantic-info-hover: #6BA5FF;



  --theme-special-gold: var(--color-gold);
  --theme-special-gold-light: var(--color-gold-light);
  --theme-special-gold-dark: var(--color-gold-dark);


  --theme-special-vip: #8B5CF6;
  --theme-special-vip-dark: #7C3AED;


  --theme-special-cash: #01AF70;
  --theme-special-cash-dark: #018C5A;


  --theme-special-bonus: #FF0960;
  --theme-special-bonus-dark: #D60050;


  --theme-hover-overlay: rgba(238, 240, 244, 0.06);
  --theme-active-overlay: rgba(255, 9, 96, 0.14);
  --theme-focus-ring: rgba(255, 9, 96, 0.5);


  --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
  --theme-shadow-glow: 0 0 20px rgba(255, 9, 96, 0.35);



  --card-success-bg-from: rgba(1, 175, 112, 0.15);
  --card-success-bg-to: rgba(1, 175, 112, 0.08);
  --card-success-border: rgba(1, 175, 112, 0.3);
  --card-success-icon-bg: rgba(1, 175, 112, 0.2);
  --card-success-hover-glow: rgba(1, 175, 112, 0.25);


  --card-warning-bg-from: rgba(255, 139, 1, 0.15);
  --card-warning-bg-to: rgba(255, 139, 1, 0.08);
  --card-warning-border: rgba(255, 139, 1, 0.3);
  --card-warning-icon-bg: rgba(255, 139, 1, 0.2);
  --card-warning-hover-glow: rgba(255, 139, 1, 0.25);


  --card-info-bg-from: rgba(77, 144, 255, 0.15);
  --card-info-bg-to: rgba(77, 144, 255, 0.08);
  --card-info-border: rgba(77, 144, 255, 0.3);
  --card-info-icon-bg: rgba(77, 144, 255, 0.2);
  --card-info-hover-glow: rgba(77, 144, 255, 0.25);


  --card-primary-bg-from: rgba(255, 9, 96, 0.15);
  --card-primary-bg-to: rgba(255, 9, 96, 0.08);
  --card-primary-border: rgba(255, 9, 96, 0.3);
  --card-primary-icon-bg: rgba(255, 9, 96, 0.2);
  --card-primary-hover-glow: rgba(255, 9, 96, 0.25);


  --badge-orange-bg: var(--theme-brand-primary);
  --badge-orange-text: #FFFFFF;

  --badge-gold-bg: var(--theme-special-gold);
  --badge-gold-text: #051428;

  --badge-vip-bg: var(--theme-special-vip);
  --badge-vip-text: #FFFFFF;


  --button-primary-bg: var(--theme-brand-primary);
  --button-primary-hover: var(--theme-brand-primary-hover);
  --button-primary-text: #FFFFFF;

  --button-success-bg: var(--theme-semantic-success);
  --button-success-hover: var(--theme-semantic-success-hover);
  --button-success-text: #FFFFFF;

  --button-warning-bg: var(--theme-semantic-warning);
  --button-warning-hover: var(--theme-semantic-warning-hover);
  --button-warning-text: #051428;

  --button-error-text: #FFFFFF;

  --button-secondary-bg: var(--theme-surface-elevated);
  --button-secondary-hover: var(--theme-surface-raised);
  --button-secondary-text: var(--theme-text-primary);


  --button-primary-pressed: var(--theme-brand-accent);
  --button-secondary-pressed: rgba(22, 49, 90, 0.8);
  --button-success-pressed: #017A4F;
  --button-disabled-opacity: 0.5;
  --button-primary-disabled-bg: rgba(255, 9, 96, 0.3);


  --button-error-bg: var(--theme-semantic-error);
  --button-error-hover: var(--theme-semantic-error-hover);
  --button-error-pressed: #C42017;


  --input-bg: var(--theme-surface-raised);
  --input-border: var(--theme-border-base);
  --input-border-focus: var(--theme-brand-primary);
  --input-text: var(--theme-text-primary);
  --input-placeholder: var(--theme-text-muted);


  --modal-bg: var(--theme-surface-base);
  --modal-border: var(--theme-border-base);
  --modal-overlay: rgba(2, 12, 28, 0.9);
  --modal-header-bg: var(--theme-surface-elevated);
  --wallet-modal-bg: #03193A;
  --wallet-iframe-bg: var(--theme-surface-solid);


  --nav-bg: var(--theme-surface-base);
  --nav-border: var(--theme-border-base);
  --nav-item-hover: var(--theme-hover-overlay);
  --nav-item-active: var(--theme-brand-primary);
  --nav-item-text: var(--theme-text-secondary);
  --nav-item-text-active: var(--theme-brand-primary);


  --progress-bg: var(--theme-surface-raised);
  --progress-fill-success: var(--theme-semantic-success);
  --progress-fill-warning: var(--theme-semantic-warning);
  --progress-fill-primary: var(--theme-brand-primary);


  --balance-cash-color: var(--theme-special-cash);
  --balance-bonus-color: var(--theme-special-bonus);
  --balance-total-color: var(--theme-text-primary);

  --game-jackpot-color: var(--theme-special-gold);
  --game-hot-color: var(--theme-semantic-error);
  --game-new-color: var(--theme-brand-primary);
  --game-card-hover-overlay-bg: rgba(3, 16, 38, 0.82);
  --game-card-provider-text: rgba(255, 255, 255, 0.5);


  --scrollbar-track-bg: var(--theme-bg-secondary);
  --scrollbar-thumb-bg: var(--theme-surface-elevated);
  --scrollbar-thumb-hover-bg: var(--theme-border-base);


  --theme-luxury-platinum: #E5E4E2;
  --theme-luxury-rose-gold: #FF6B8A;
  --theme-luxury-champagne: #D4D4D4;


  --theme-vip-bronze: #CD7F32;
  --theme-vip-silver: #C0C0C0;
  --theme-vip-gold: #FFD700;
  --theme-vip-platinum: #E5E4E2;
  --theme-vip-diamond: #B9F2FF;


  --theme-card-premium-glow: 0 0 30px rgba(255, 9, 96, 0.35), 0 0 60px rgba(3, 16, 38, 0.4);


  --theme-special-gold-rich: #D4AF37;
  --theme-special-gold-rich-light: #E5C158;


  --social-icon-filter: brightness(0) invert(1);
  --social-link-border: transparent;


  --toggle-active-bg: #16315A;
  --toggle-active-border: #1C3A66;
  --toggle-active-knob: var(--theme-brand-primary);
  --toggle-inactive-bg: #16315A;
  --toggle-inactive-border: #1C3A66;
  --toggle-inactive-knob: #5A697C;


  --sidebar-bg: #0B2244;
  --sidebar-header-bg: #0B2244;
  --sidebar-header-border: transparent;
  --sidebar-link-color: var(--theme-text-secondary);
  --sidebar-link-hover-color: var(--theme-text-primary);
  --sidebar-link-active-color: #FF3D7E;
  --sidebar-link-active-bg: rgba(255, 9, 96, 0.14);
  --sidebar-link-active-bar: #FF0960;
  --sidebar-menu-group-bg: #0B2244;
  --sidebar-menu-group-radius: 8px;
  --sidebar-link-gap: 4px;
  --sidebar-chevron-color: var(--theme-text-muted);
  --sidebar-chevron-active-color: #FF3D7E;
  --sidebar-divider-color: transparent;
  --sidebar-submenu-border: #1C3A66;
  --sidebar-border-right: transparent;
  --sidebar-backdrop: none;
  --sidebar-switcher-bg: #0B2244;
  --sidebar-icon-color: #5A697C;
  --sidebar-menu-group-py: 4px;
  --sidebar-submenu-indent: 21px;
  --sidebar-submenu-nested-indent: 19px;
  --sidebar-loyalty-widget-bg: #0A2245;

  --font-game-title: 'Jost', 'Changa One', 'Inter', sans-serif;
  --game-card-demo-hover-bg: #3555ff;
}

html[data-theme^="custom-"] body {
  background: var(--theme-bg-primary) !important;
}

html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] {
  background: var(--theme-bg-primary) !important;
}

html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] {
  --input-bg: #0D2950;
  --input-border: #18335C;
}

html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] input[class*="_auth_"] {
  background-color: #0D2950 !important;
  border-color: #18335C !important;
  border-radius: 8px !important;
  height: 46px !important;
  color: #C2CEDB !important;
}

html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] [class*="_countryButton_"] {
  background-color: #18335C !important;
  color: #8C9EB2 !important;
  border-radius: 8px !important;
  height: 46px !important;
}

html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] input[class*="_phoneInput_"] {
  height: 46px !important;
  border-radius: 8px !important;
}

html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] input[class*="_auth_"]:focus,
html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] input[class*="_auth_"]:focus-visible,
html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] input[class*="_phoneInput_"]:focus,
html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] input[class*="_phoneInput_"]:focus-visible,
html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] [class*="_countryButton_"]:focus,
html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] [class*="_countryButton_"]:focus-visible {
  /* Cyan focus ring requested by the user (set in DevTools to demonstrate the
     target): #1BC0E2 border + #01DCFF glow at 40%. NOT a leftover default. */
  border-color: #1BC0E2 !important;
  box-shadow: 0 0 0 1px rgba(1, 220, 255, 0.4) !important;
}

html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] button[class*="bg-[var(--theme-surface-raised)]"] {
  background-color: #0D2950 !important;
  border-color: #18335C !important;
  border-radius: 8px !important;
}

html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] button[class*="bg-[var(--theme-surface-raised)]"]:focus,
html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] button[class*="bg-[var(--theme-surface-raised)]"]:focus-visible {
  border-color: var(--theme-brand-primary) !important;
}

html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] input[class*="_auth_"]::placeholder,
html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] input[class*="_phoneInput_"]::placeholder {
  color: #3A5274 !important;
  opacity: 1 !important;
}

.btn-register-header--welcome-pack,
.btn-register-header--welcome-pack:hover,
.btn-register-header--welcome-pack:focus,
.btn-register-header--welcome-pack:focus-visible {
  background-image: none !important;
}

html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] input[class*="_auth_"]:not(:placeholder-shown),
html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] input[class*="_phoneInput_"]:not(:placeholder-shown) {
  background-color: #16315A !important;
  border-color: transparent !important;
}

html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] button[class*="bg-[var(--theme-surface-raised)]"]:has(p[class*="text-[var(--theme-text-primary)]"]) {
  background-color: #16315A !important;
  border-color: transparent !important;
}

html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] [class*="_control_"] {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: auto !important;
  gap: 10px !important;
}

html[data-theme^="custom-"] div.min-h-dvh.flex[style*="linear-gradient"] p[class*="text-[var(--theme-semantic-success)]"] {
  color: #FF3D7E !important;
}

html[data-theme^="custom-"] .provider-logo {
  background-color: var(--theme-surface-elevated) !important;
  border-radius: 5px !important;
}

html[data-theme^="custom-"] .loyalty-hero p {
  color: #FFFFFF !important;
}

html[data-theme^="custom-"] .loyalty-hero.has-banner {
  min-height: 360px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[data-theme^="custom-"] .loyalty-hero.has-banner>.max-w-5xl {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 767px) {
  html[data-theme^="custom-"] .loyalty-hero.has-banner {
    min-height: 250px !important;
  }
}

/* Top bar: same colour as the page background (--theme-bg-primary #03193A),
   kept translucent (0.8) + blurred so content shows through faintly on scroll. */
html[data-theme^="custom-"] header {
  background: rgba(3, 25, 58, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html[data-theme^="custom-"] [data-testid="casino-game-search-input"] {
  background-color: #03193A !important;
  border-color: transparent !important;
}

html[data-theme^="custom-"] [class*="--sidebar-switcher-bg"] {
  border-color: transparent !important;
}

/* Sidebar container — the sidebar <nav> paints its own background directly,
   NOT via --sidebar-bg (that's why changing the token alone did nothing visible).
   Target the nav, scoped via :has() to the sidebar's own menu so other
   .scrollbar-hide scroll areas (game carousels) stay untouched.
   Colour from DevTools picker: color(srgb 0.0424 0.1329 0.265) = #0B2244. */
html[data-theme^="custom-"] nav.scrollbar-hide:has([class*="sidebar-menu"], [class*="sidebar-config"]) {
  background-color: #0B2244 !important;
}

html[data-theme^="custom-"] .header-balance-box {
  background-color: #03193A !important;
}

html[data-theme^="custom-"] [class*="bg-[var(--theme-surface-base)]"] {
  border-color: transparent !important;
}

html[data-theme^="custom-"] [data-testid="casino-game-search-input"]:focus,
html[data-theme^="custom-"] [data-testid="casino-game-search-input"]:focus-visible {
  background-color: #04142E !important;
  border-color: var(--theme-border-base) !important;
  box-shadow: none !important;
}

html[data-theme^="custom-"] .banner-container {
  border-radius: 10px !important;
}

html[data-theme^="custom-"] .rounded-2xl:has(.carousel-slides) {
  border-radius: 10px !important;
}

html[data-theme^="custom-"] .banner-text-title,
html[data-theme^="custom-"] .banner-text-description {
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
}

html[data-theme^="custom-"] [class*="border-[color:var(--theme-border-accent)]"] {
  border-color: transparent !important;
}

html[data-theme^="custom-"] [data-testid^="reward-card-"] [class*="bg-[color:var(--progress-bg)]"],
html[data-theme^="custom-"] [data-testid^="campaign-card-"] [class*="bg-[color:var(--progress-bg)]"] {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

html[data-theme^="custom-"] [data-testid="reward-forfeit-btn"] {
  background-color: rgba(0, 0, 0, 0.2) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

html[data-theme^="custom-"] [data-testid="reward-forfeit-btn"]:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.32) !important;
  color: #ffffff !important;
}

html[data-theme^="custom-"] [data-testid="reward-forfeit-btn"]:active:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.4) !important;
  color: #ffffff !important;
}

html[data-theme^="custom-"] [data-testid^="cashback-card-"] button[class*="_success_"][class*="_isDisabled_"] {
  background-color: rgba(22, 49, 90, 0.95) !important;
  border: none !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}

html[data-theme^="custom-"] [data-testid^="cashback-card-"] {
  border-color: transparent !important;
}

html[data-theme^="custom-"] div.aspect-\[3\/4\].rounded-\[10px\] img.opacity-60 {
  opacity: 0.3 !important;
}

html[data-theme^="custom-"] div.aspect-\[3\/4\].rounded-\[10px\] div.absolute.inset-0.rounded-\[10px\].pointer-events-none {
  background-image: none !important;
}

html[data-theme^="custom-"] [data-testid^="game-prelaunch-play"][class*="prelaunch-demo-border"] {
  background-color: rgba(0, 0, 0, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #FFFFFF !important;
}

html[data-theme^="custom-"] [data-testid^="game-prelaunch-play"][class*="prelaunch-demo-border"]:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

html[data-theme^="custom-"] .game-card-gradient {
  height: 75% !important;
}

html[data-theme^="custom-"] div.mb-2.md\:mb-4:has(astro-island[component-url*="FilterChips"]) {
  margin-bottom: 1.75rem !important;
}

@media (min-width: 48rem) {
  html[data-theme^="custom-"] div.mb-2.md\:mb-4:has(astro-island[component-url*="FilterChips"]) {
    margin-bottom: 2rem !important;
  }
}

@media (min-width: 48rem) {

  html[data-theme^="custom-"] .game-card-static-overlay,
  html[data-theme^="custom-"] .game-card-hover-overlay {
    padding-inline: 0.75rem !important;
  }
}

button[class*="_ghostIcon_"] {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-color: transparent !important;
}

button[class*="_ghostIcon_"]:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.32) !important;
}

button[class*="_ghostIcon_"]:active:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

html[data-theme^="custom-"] .prose h1 {
  color: #FFFFFF !important;
}

html[data-theme^="custom-"] .prose h2 {
  color: #ADB2B8 !important;
}

html[data-theme^="custom-"] .prose h3 {
  color: #718298 !important;
}

html[data-theme^="custom-"] .prose h4 {
  color: #E7F1F7 !important;
}

html[data-theme^="custom-"] .prose h5 {
  color: #E7F1F7 !important;
}

html[data-theme^="custom-"] .prose strong {
  color: #FFFFFF !important;
}

@media (min-width: 48rem) {

  html[data-theme^="custom-"] .page-section:has(.loyalty-progress-section) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100% !important;
  }


  html[data-theme^="custom-"] .loyalty-progress-section,
  html[data-theme^="custom-"] .loyalty-progress-section astro-island,
  html[data-theme^="custom-"] .loyalty-progress-section astro-island>a {
    height: 100% !important;
  }

  html[data-theme^="custom-"] .loyalty-progress-section .rounded-xl.p-5.bg-surface-base {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }


  html[data-theme^="custom-"]:has(.relative.group [id$="-dots"].flex) .page-section:has(.loyalty-progress-section) {
    padding-bottom: 40px !important;
  }
}

@media (max-width: 47.99rem) {
  html[data-theme^="custom-"] .page-section:has(.loyalty-progress-section) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html[data-theme^="custom-"] .loyalty-progress-section .text-left p.text-xs.text-tertiary,
  html[data-theme^="custom-"] .loyalty-progress-section .text-right p.text-xs.text-tertiary {
    display: none !important;
  }
}

html[data-theme^="custom-"] [class*="var(--theme-semantic-success)_12%"][class*="rounded-full"] {
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme^="custom-"] [class*="var(--theme-semantic-success)_12%"] svg[class*="text-[var(--theme-semantic-success)]"] {
  color: #FFFFFF !important;
}

html[data-theme^="custom-"] [class*="var(--theme-semantic-error)_10%"][class*="rounded-full"] {
  background: color-mix(in srgb, var(--theme-semantic-success) 12%, var(--theme-surface-base)) !important;
}

html[data-theme^="custom-"] [class*="var(--theme-semantic-error)_10%"] svg[class*="text-[var(--theme-semantic-error)]"] {
  color: var(--theme-semantic-success) !important;
}

html[data-theme^="custom-"] [data-testid="popup-corner"] {
  background: #FFFFFF !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  color: #07193A !important;
}

html[data-theme^="custom-"] [data-testid="popup-corner"] h4 {
  color: #07193A !important;
}

html[data-theme^="custom-"] [data-testid="popup-corner"] h4+div {
  color: #07193A !important;
}

html[data-theme^="custom-"] [data-testid="popup-corner"] [data-testid="popup-dismiss-btn"] {
  color: #858A9E !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

html[data-theme^="custom-"] [data-testid="popup-corner"] [data-testid="popup-dismiss-btn"] svg {
  width: 16px !important;
  height: 16px !important;
}

html[data-theme^="custom-"] [data-testid="popup-corner"] [data-testid="popup-dismiss-btn"]:hover:not(:disabled),
html[data-theme^="custom-"] [data-testid="popup-corner"] [data-testid="popup-dismiss-btn"]:active:not(:disabled),
html[data-theme^="custom-"] [data-testid="popup-corner"] [data-testid="popup-dismiss-btn"]:focus,
html[data-theme^="custom-"] [data-testid="popup-corner"] [data-testid="popup-dismiss-btn"]:focus-visible {
  background-color: transparent !important;
  color: #07193A !important;
  box-shadow: none !important;
  outline: none !important;
}

.game-card-chip-provider {
  font-family: var(--font-game-title);
}

.game-card-demo-btn {
  font-family: var(--font-game-title);
  transition: background-color .3s ease-in, color .3s ease-in;
}

.game-card-play-btn {
  font-family: var(--font-game-title);
  transition: background-color .3s ease-in, color .3s ease-in;
}

/* payment-methods page */
.payments-list button[type="button"]:not([class*="_ghostIcon_"]) {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-color: transparent !important;
  color: var(--theme-text-secondary);
}

.payments-list button[type="button"]:not([class*="_ghostIcon_"]):hover {
  background-color: rgba(0, 0, 0, 0.32) !important;
  color: var(--theme-text-primary);
}

.payments-list img {
  object-position: center center !important;
}


.vip-section h2 {
  text-align: center;
  color: gold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.6vw, 8px);
  font-size: clamp(1rem, 4.5cqw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0px;
  white-space: nowrap;
  overflow: hidden;
  color: #fff !important;
}

html[data-theme^="custom-"] .vip-section h2 {
  color: #fff !important;
}

.vip-section h2:before,
.vip-section h2::after {
  content: "";
  display: block;
  width: 90px;
  height: 17px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.vip-section h2:before {
  background-image: url("/cdn/banners/019f70ac-b0fd-7508-b758-7de08d9ca0eb/original.svg");
}

.vip-section h2::after {
  background-image: url("/cdn/banners/019f70ac-d16b-7033-b902-2080ae3fd853/original.svg");
}

html[lang="hi"] .vip-section h2::after,
html[lang="hi"] .vip-section h2::before {
  transform: translateY(-6px);
}


.vip-banners .banner-container .banner-content {
  width: 100%;
}

.vip-banners .banner-container .banner-content>div {
  justify-content: end;
  text-align: center;
}

.vip-banners .banner-container .banner-text-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1rem, 4.5cqw, 1.8rem);
  font-weight: 700;
}

.quick-navigation .carousel-slide div:has(> .banner-content) {
    padding: 0;
}

.quick-navigation .carousel-slide .banner-content {
    width: 100%;
    padding-inline: 16px;
    padding-block: 8px;
}

.quick-navigation .carousel-slide .banner-content h2 {
    margin: 0;
    color: var(--theme-text-primary);
    font-weight: 400;
    font-size: clamp(12px,1.4vw,16px);
}

.quick-navigation .banner-container {
    background: var(--theme-surface-base) !important;
    border-radius: 0.25rem;
    transition: background .2s ease;
}

.quick-navigation .banner-container:hover {
    background: var(--theme-surface-elevated) !important;
}

.quick-navigation .banner-container>div {
    background-image: unset;
}