@charset "UTF-8";
/* ==========================================================================
   CASINO — MODERN THEME LAYER
   Premium dark (#111722) + green accent design system.

   Loaded AFTER main.css. This file re-themes and modernises the template
   without rewriting its markup or behaviour. Existing class names are
   preserved; only presentation is upgraded.

   CONTENTS
   01. Design tokens
   02. Base, typography & scrollbars
   03. Focus & accessibility
   04. Header
   05. Sidebar (+ collapsible behaviour)
   06. Buttons
   07. Game cards
   08. Game page (stage, breadcrumb, specs)
   09. Forms & inputs
   10. Surfaces, tables & misc
   11. Toasts & tooltips
   12. Motion
   13. Responsive
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* ---- Neutral ramp, built around the mandated #111722 ---- */
  --cs-bg-deep: #0b0f17;   /* behind everything, scrims */
  --cs-bg: #111722;        /* PRIMARY app background */
  --cs-surface-1: #161e2b; /* raised: cards, panels */
  --cs-surface-2: #1c2534; /* raised: hover, inputs */
  --cs-surface-3: #232e40; /* raised: pressed, active rows */
  --cs-border: #222c3c;    /* default hairline */
  --cs-border-strong: #2d3849;

  /* ---- Text ---- */
  --cs-text: #f2f6fa;      /* 16.4:1 on --cs-bg */
  --cs-text-secondary: #a8b4c6; /* 8.6:1 */
  --cs-text-muted: #7d8aa0;     /* 5.2:1 — still AA for body text */

  /* ---- Green accent ramp ---- */
  --cs-green-300: #5be0a5;
  --cs-green-400: #2ed694;
  --cs-green: #19c37d;     /* PRIMARY accent — 7.9:1 on --cs-bg */
  --cs-green-600: #12a167;
  --cs-green-700: #0c7f51;
  --cs-on-green: #06170f;  /* 9.1:1 on --cs-green */

  --cs-green-soft: rgba(25, 195, 125, 0.12);
  --cs-green-softer: rgba(25, 195, 125, 0.06);
  --cs-green-line: rgba(25, 195, 125, 0.32);
  --cs-green-glow: rgba(25, 195, 125, 0.28);
  --cs-green-grad: linear-gradient(135deg, #211cf382 0%, #00ff3e 100%);

  /* ---- Semantic (kept minimal & purposeful) ---- */
  --cs-danger: #f2555a;
  --cs-warning: #e0a32e;

  /* ---- Radii ---- */
  --cs-r-sm: 8px;
  --cs-r: 12px;
  --cs-r-lg: 16px;
  --cs-r-xl: 20px;
  --cs-r-pill: 999px;

  /* ---- Elevation (consistent scale, no ad-hoc shadows) ---- */
  --cs-e1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --cs-e2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --cs-e3: 0 12px 32px rgba(0, 0, 0, 0.55);
  --cs-e4: 0 24px 64px rgba(0, 0, 0, 0.65);

  /* ---- Spacing (density 7 — standard/dense) ---- */
  --cs-sp-1: 4px;
  --cs-sp-2: 8px;
  --cs-sp-3: 12px;
  --cs-sp-4: 16px;
  --cs-sp-5: 24px;
  --cs-sp-6: 32px;
  --cs-sp-7: 48px;

  /* ---- Motion tokens ---- */
  --cs-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --cs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cs-t-fast: 140ms;
  --cs-t: 220ms;
  --cs-t-slow: 320ms;

  /* ---- Layout ---- */
  --cs-sidebar-w: 270px;
  --cs-sidebar-w-collapsed: 76px;
  --cs-header-h: 80px;
  --cs-z-tooltip: 10050;
  --cs-z-modal: 10060;
  --cs-z-toast: 10070;

  /* ======================================================================
     Remap the template's original palette variables.
     main.css references these throughout, so overriding them re-themes
     every existing component in one place.
     ====================================================================== */
  --base: var(--cs-green);
  --title: var(--cs-on-green);
  --theme: var(--cs-green-400);
  --theme-one: var(--cs-green-300);
  --button: var(--cs-green);
  --box-bg: var(--cs-surface-1);
  --srh: var(--cs-surface-2);
  --section-bg: var(--cs-bg);
  --section-bg-two: var(--cs-bg-deep);
  --body: var(--cs-bg);
  --chat-bg: var(--cs-surface-1);
  --box-three: var(--cs-surface-2);
  --text-pra: var(--cs-text-secondary);
  --bg: var(--cs-bg);
  --white: #fff;
  --hover-bg: var(--cs-surface-2);
  --Breadcumnd: var(--cs-surface-1);
  --icon-bg: var(--cs-surface-2);
  --lightwaight: var(--cs-green-400);
  --box-two: var(--cs-bg);
  --border: var(--cs-border);
  --form-bg: var(--cs-surface-1);
  --footer: var(--cs-bg-deep);
  --pragraph: var(--cs-text-muted);
  --prev: var(--cs-surface-2);
  --next: var(--cs-surface-3);
  --ratting: var(--cs-warning);
  --tabe-bg: var(--cs-surface-1);
  --video-bg: var(--cs-surface-1);
  --focus: var(--cs-green-400);
  --gradian-bg: var(--cs-green-grad);
  --gradian-text: var(--cs-green-grad);

  /* main.css leaks `background-clip:text` onto :root — neutralise it. */
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

/* ==========================================================================
   02. BASE, TYPOGRAPHY & SCROLLBARS
   ========================================================================== */

body {
  background-color: var(--cs-bg);
  color: var(--cs-text-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* guard against horizontal scroll */
}

h1, h2, h3, h4, h5, h6,
.banner-content h1, .banner-content h2, .banner-content h3 {
  color: var(--cs-text);
  letter-spacing: -0.015em;
}

p, li, span, label, td {
  color: inherit;
}

a {
  transition: color var(--cs-t-fast) var(--cs-ease);
}

a:hover {
  color: var(--cs-green-400);
}

/* Everything clickable gets a pointer — template misses many. */
a, button, [role="button"], .cmn--btn, .border-btn,
.casino-demo-items, .dashboard-active, .cs-icon-btn,
.nice-select, .custom__number, summary {
  cursor: pointer;
}

/* Thin, on-brand scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--cs-surface-3) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--cs-surface-3);
  border-radius: var(--cs-r-pill);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--cs-green-700);
}

/* The sidebar hides its scrollbar entirely in main.css — give it a slim one. */
.left-site-menu ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Selection */
::selection {
  background: var(--cs-green);
  color: var(--cs-on-green);
}

/* --- Preloader ---------------------------------------------------------
   The template's 3D box spinner is replaced by the brand loader. Done in
   CSS rather than markup so all pages pick it up without edits: the
   original .boxes element is hidden and the animation is painted on its
   full-screen parent. */
.boxes-bg {
  background-color: var(--cs-bg);
  background-image: url("../img/loader/loader.gif");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 220px 220px;
  /* The GIF is a fully opaque black square (GIF has no real alpha), which
     would otherwise show as a hard box on the navy backdrop. Screening it
     against the background colour maps its pure black to exactly
     --cs-bg, so the plate disappears with no re-encoding. */
  background-blend-mode: screen;
}

.boxes-bg .boxes {
  display: none;
}

@media screen and (max-width: 575px) {
  .boxes-bg {
    background-size: 168px 168px;
  }
}

/* A GIF can't be paused from CSS, so swap in a still frame instead. */
@media (prefers-reduced-motion: reduce) {
  .boxes-bg {
    background-image: url("../img/loader/loader-static.png");
  }
}

/* ==========================================================================
   03. FOCUS & ACCESSIBILITY
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--cs-green-400);
  outline-offset: 2px;
  border-radius: var(--cs-r-sm);
}

/* Never leave a keyboard user without an indicator. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cs-green-400);
  outline-offset: 2px;
}

.cs-skip-link {
  position: absolute;
  left: var(--cs-sp-4);
  top: -100px;
  z-index: var(--cs-z-toast);
  padding: 10px 18px;
  border-radius: var(--cs-r-sm);
  background: var(--cs-green);
  color: var(--cs-on-green);
  font-weight: 700;
  transition: top var(--cs-t) var(--cs-ease);
}

.cs-skip-link:focus {
  top: var(--cs-sp-3);
  color: var(--cs-on-green);
}

.cs-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   04. HEADER
   ========================================================================== */

.header-top {
  height: var(--cs-header-h);
  padding: 0 var(--cs-sp-5);
  display: flex;
  align-items: center;
  background-color: rgba(17, 23, 34, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cs-border);
  box-shadow: var(--cs-e1);
}

.header-top-wrapper {
  width: 100%;
  gap: var(--cs-sp-4);
  flex-wrap: nowrap;
}

.header-top-wrapper .logo {
  max-width: 156px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* The lockup has a real alpha channel, so it composites normally and
   works on any background — no blend-mode trickery. */
.header-top-wrapper .logo img {
  object-fit: contain;
}

/* --- Left cluster: sidebar toggle sits before the logo --- */
.cs-header-left {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-3);
  flex-shrink: 0;
}

/* --- Generic icon button used across header, cards and game window --- */
.cs-icon-btn {
  --cs-icon-btn-size: 42px;
  width: var(--cs-icon-btn-size);
  height: var(--cs-icon-btn-size);
  min-width: var(--cs-icon-btn-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-r-sm);
  border: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
  color: var(--cs-text-secondary);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  position: relative;
  transition: background var(--cs-t-fast) var(--cs-ease),
              color var(--cs-t-fast) var(--cs-ease),
              border-color var(--cs-t-fast) var(--cs-ease);
}

.cs-icon-btn:hover {
  background: var(--cs-surface-2);
  border-color: var(--cs-border-strong);
  color: var(--cs-text);
}

.cs-icon-btn:active {
  background: var(--cs-surface-3);
}

.cs-icon-btn[aria-pressed="true"],
.cs-icon-btn.is-active {
  background: var(--cs-green-soft);
  border-color: var(--cs-green-line);
  color: var(--cs-green-400);
}

/* Notification / badge dot */
.cs-badge-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cs-green);
  box-shadow: 0 0 0 2px var(--cs-surface-1);
}

.cs-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--cs-r-pill);
  background: var(--cs-green);
  color: var(--cs-on-green);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* --- Right cluster: wallet, deposit, notifications, profile.
   These are injected as <li>s into the template's existing social list so
   the header's flex layout keeps working. --- */
.header-top-wrapper .header-top-social {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-2);
  margin-left: auto;
  flex-shrink: 0;
}

/* NOTE: deliberately no `display` here. main.css hides these items below
   1199px, and setting display on all of them would override that and push
   the header off-screen on mobile. The ul's align-items handles alignment. */
.header-top-wrapper .header-top-social > li {
  align-items: center;
}

/* Wallet / balance */
.cs-wallet {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-3);
  height: 44px;
  padding: 0 var(--cs-sp-2) 0 var(--cs-sp-4);
  border-radius: var(--cs-r-sm);
  border: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
}

.cs-wallet-amount {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.cs-wallet-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-text-muted);
}

.cs-wallet-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--cs-green-400);
  /* tabular figures stop the balance jittering as it updates */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.cs-deposit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 var(--cs-sp-4);
  border: none;
  border-radius: var(--cs-r-sm);
  background: var(--cs-green-grad);
  color: var(--cs-on-green);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: filter var(--cs-t-fast) var(--cs-ease),
              transform var(--cs-t-fast) var(--cs-ease),
              box-shadow var(--cs-t-fast) var(--cs-ease);
}

.cs-deposit-btn:hover {
  color: var(--cs-on-green);
  filter: brightness(1.08);
  box-shadow: 0 0 0 3px var(--cs-green-soft);
}

.cs-deposit-btn:active {
  transform: scale(0.97);
}

/* Profile */
.cs-profile {
  position: relative;
}

.cs-profile-trigger {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-2);
  height: 44px;
  padding: 0 var(--cs-sp-2);
  border-radius: var(--cs-r-sm);
  border: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
  color: var(--cs-text-secondary);
  transition: background var(--cs-t-fast) var(--cs-ease);
}

.cs-profile-trigger:hover {
  background: var(--cs-surface-2);
  color: var(--cs-text);
}

.cs-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cs-green-grad);
  color: var(--cs-on-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.cs-profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 214px;
  padding: var(--cs-sp-2);
  border-radius: var(--cs-r);
  border: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
  box-shadow: var(--cs-e3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--cs-t-fast) var(--cs-ease),
              transform var(--cs-t-fast) var(--cs-ease),
              visibility var(--cs-t-fast);
}

.cs-profile.is-open .cs-profile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cs-profile-menu a,
.cs-profile-menu button {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-3);
  width: 100%;
  padding: 10px var(--cs-sp-3);
  border: none;
  border-radius: var(--cs-r-sm);
  background: none;
  color: var(--cs-text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background var(--cs-t-fast) var(--cs-ease),
              color var(--cs-t-fast) var(--cs-ease);
}

.cs-profile-menu a:hover,
.cs-profile-menu button:hover {
  background: var(--cs-surface-2);
  color: var(--cs-text);
}

.cs-profile-menu a i,
.cs-profile-menu button i {
  width: 16px;
  color: var(--cs-text-muted);
}

.cs-menu-sep {
  height: 1px;
  margin: var(--cs-sp-2) var(--cs-sp-3);
  background: var(--cs-border);
}

.cs-profile-menu .cs-danger-item:hover {
  color: var(--cs-danger);
}

.cs-profile-menu .cs-danger-item:hover i {
  color: var(--cs-danger);
}

/* Auth-state switching: guest sees log in / sign up, player sees wallet. */
body[data-cs-auth="guest"] .cs-player-only {
  display: none !important;
}

body[data-cs-auth="player"] .btn-top-group {
  display: none !important;
}

/* Header search + nav */
.header-top-wrapper .middle-referral ul li form input {
  background: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-sm);
  color: var(--cs-text);
  transition: border-color var(--cs-t-fast) var(--cs-ease),
              box-shadow var(--cs-t-fast) var(--cs-ease);
}

.header-top-wrapper .middle-referral ul li form input:focus {
  border-color: var(--cs-green-line);
  box-shadow: 0 0 0 3px var(--cs-green-soft);
  outline: none;
}

.header-top-wrapper .middle-referral ul li a:hover {
  color: var(--cs-green-400);
}

.header-top-wrapper .middle-referral ul li:first-child {
  border-right-color: var(--cs-border);
}

.header-top-social .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--cs-r-sm);
  transition: background var(--cs-t-fast) var(--cs-ease);
}

.header-top-social .icon:hover {
  background: var(--cs-surface-2);
}

/* ==========================================================================
   05. SIDEBAR
   ========================================================================== */
/* --- Shell ------------------------------------------------------------- */

.left-site-menu {
  background-color: var(--cs-bg);
}

.left-site-menu .left-box {
  width: var(--cs-sidebar-w);
  background-color: var(--cs-bg);
  border-right: 1px solid var(--cs-border);
  top: var(--cs-header-h);
  transition: width var(--cs-t-slow) var(--cs-ease-out);
  will-change: width;
}

.left-site-menu .left-box .header {
  background: transparent;
}

.left-site-menu .custom-scroll-animated {
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: var(--cs-sp-5);
}

.cs-side {
  display: flex;
  flex-direction: column;
  gap: var(--cs-sp-4);
  padding: var(--cs-sp-3);
}

/* --- Header collapse toggle (lives in the header, drives this sidebar) -- */

.cs-sidebar-toggle {
  --cs-icon-btn-size: 42px;
}

.cs-sidebar-toggle .cs-bars {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  position: relative;
  transition: background var(--cs-t-fast) var(--cs-ease);
}

.cs-sidebar-toggle .cs-bars::before,
.cs-sidebar-toggle .cs-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--cs-t) var(--cs-ease), width var(--cs-t) var(--cs-ease);
}

.cs-sidebar-toggle .cs-bars::before {
  top: -6px;
}

.cs-sidebar-toggle .cs-bars::after {
  top: 6px;
}

.cs-sidebar-toggle:hover .cs-bars::before {
  width: 12px;
}

.cs-sidebar-toggle:hover .cs-bars::after {
  width: 14px;
}

/* --- Casino / Sport segmented switcher ---------------------------------
   A real segmented control: one sliding thumb behind two tab buttons, so
   the transition reads as movement rather than two states blinking. */

.cs-seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 4px;
  border-radius: var(--cs-r);
  background: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  isolation: isolate;
}

.cs-seg-thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 4px;
  width: calc(50% - 5px);
  height: calc(100% - 8px);
  border-radius: 9px;
  background: var(--cs-green-soft);
  border: 1px solid var(--cs-green-line);
  transition: transform var(--cs-t) var(--cs-ease-out),
              width var(--cs-t) var(--cs-ease-out),
              height var(--cs-t) var(--cs-ease-out);
}

.cs-seg[data-cs-active="sport"] .cs-seg-thumb {
  transform: translateX(calc(100% + 3px));
}

.cs-seg-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 6px;
  border: 0;
  background: none;
  border-radius: 9px;
  color: var(--cs-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--cs-t-fast) var(--cs-ease);
}

.cs-seg-btn i {
  font-size: 13px;
  transition: transform var(--cs-t-fast) var(--cs-ease);
}

.cs-seg-btn:hover {
  color: var(--cs-text-secondary);
}

.cs-seg-btn[aria-selected="true"] {
  color: var(--cs-green-300);
}

.cs-seg-btn[aria-selected="true"] i {
  transform: scale(1.06);
}

/* --- Nav groups --------------------------------------------------------- */

.cs-nav-group + .cs-nav-group {
  margin-top: var(--cs-sp-4);
  padding-top: var(--cs-sp-4);
  border-top: 1px solid var(--cs-border);
}

.cs-nav-title {
  margin: 0 0 6px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-text-muted);
  white-space: nowrap;
}

.cs-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  background: none;
  border-radius: var(--cs-r-sm);
  color: var(--cs-text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  transition: background var(--cs-t-fast) var(--cs-ease),
              color var(--cs-t-fast) var(--cs-ease);
}

.cs-nav-item:hover {
  background: var(--cs-surface-1);
  color: var(--cs-text);
}

.cs-nav-item:active {
  background: var(--cs-surface-2);
}

.cs-nav-ico {
  width: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--cs-text-muted);
  transition: color var(--cs-t-fast) var(--cs-ease),
              transform var(--cs-t-fast) var(--cs-ease);
}

.cs-nav-item:hover .cs-nav-ico {
  color: var(--cs-green-400);
  transform: translateX(1px);
}

.cs-nav-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Current page: bar + tint + weight, never colour alone */
.cs-nav-item[aria-current="page"] {
  background: var(--cs-green-soft);
  color: var(--cs-green-300);
  font-weight: 700;
}

.cs-nav-item[aria-current="page"] .cs-nav-ico {
  color: var(--cs-green);
}

.cs-nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--cs-green);
}

.cs-nav-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--cs-r-pill);
  background: var(--cs-green-soft);
  border: 1px solid var(--cs-green-line);
  color: var(--cs-green-300);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cs-nav-badge.is-muted {
  background: var(--cs-surface-2);
  border-color: var(--cs-border-strong);
  color: var(--cs-text-muted);
}

/* Panel swap between Casino and Sport */
.cs-nav-panel {
  animation: cs-panel-in var(--cs-t-slow) var(--cs-ease-out);
}

@keyframes cs-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* --- Sidebar footer ----------------------------------------------------- */

.cs-side-foot {
  margin-top: var(--cs-sp-3);
  padding-top: var(--cs-sp-4);
  border-top: 1px solid var(--cs-border);
  display: flex;
  align-items: center;
  gap: var(--cs-sp-3);
  flex-wrap: wrap;
  padding-left: 10px;
  padding-right: 10px;
}

.cs-side-foot a {
  color: var(--cs-text-muted);
  font-size: 12px;
}

.cs-side-foot a:hover {
  color: var(--cs-green-400);
}

.cs-side-lang {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: var(--cs-r-sm);
  border: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
  color: var(--cs-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.cs-side-lang img {
  width: 16px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
}

/* --- COLLAPSED STATE (desktop only) ------------------------------------
   Set on <html> before first paint and mirrored onto <body>, so a plain
   ancestor selector matches either. */

@media screen and (min-width: 1200px) {
  .cs-sidebar-collapsed .left-site-menu .left-box {
    width: var(--cs-sidebar-w-collapsed);
  }

  .cs-sidebar-collapsed .cs-side {
    padding: var(--cs-sp-3) 8px;
  }

  /* Switcher stacks vertically so it still fits — and stays reachable,
     which the brief calls for explicitly. */
  .cs-sidebar-collapsed .cs-seg {
    grid-template-columns: 1fr;
  }

  .cs-sidebar-collapsed .cs-seg-btn {
    min-height: 38px;
    gap: 0;
  }

  .cs-sidebar-collapsed .cs-seg-btn span {
    display: none;
  }

  .cs-sidebar-collapsed .cs-seg-btn i {
    font-size: 15px;
  }

  .cs-sidebar-collapsed .cs-seg-thumb {
    width: calc(100% - 8px);
    height: calc(50% - 5px);
  }

  .cs-sidebar-collapsed .cs-seg[data-cs-active="sport"] .cs-seg-thumb {
    transform: translateY(calc(100% + 3px));
  }

  /* Items become icon-only */
  .cs-sidebar-collapsed .cs-nav-text,
  .cs-sidebar-collapsed .cs-nav-badge,
  .cs-sidebar-collapsed .cs-nav-title,
  .cs-sidebar-collapsed .cs-side-foot {
    position: absolute;
    width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .cs-sidebar-collapsed .cs-nav-item {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .cs-sidebar-collapsed .cs-nav-item[aria-current="page"]::before {
    left: -8px;
  }

  .cs-sidebar-collapsed .cs-nav-group + .cs-nav-group {
    margin-top: var(--cs-sp-3);
    padding-top: var(--cs-sp-3);
  }
}

/* --- Mobile drawer ------------------------------------------------------ */

@media screen and (max-width: 1199px) {
  .left-site-menu {
    box-shadow: var(--cs-e4);
  }

  .left-site-menu .left-box .header {
    background: var(--cs-bg);
  }

  /* The drawer's close button is absolutely positioned top-right by the
     template, so reserve a row for it — otherwise it sits on top of the
     Casino/Sport switcher. */
  .cs-side {
    padding-top: 50px;
  }

  .cross-icon {
    background: var(--cs-surface-2);
    border: 1px solid var(--cs-border);
    color: var(--cs-text);
    width: 36px;
    height: 36px;
  }

  .cross-icon i {
    font-size: 18px;
  }

  .ov-dsh.active {
    background: rgba(11, 15, 23, 0.72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}

/* ==========================================================================
   06. BUTTONS
   ========================================================================== */

.cmn--btn {
  border-radius: var(--cs-r-sm);
  padding: 12px 22px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--cs-on-green);
  background: var(--cs-green-grad);
  border: none;
  overflow: hidden;
  transition: filter var(--cs-t-fast) var(--cs-ease),
              transform var(--cs-t-fast) var(--cs-ease),
              box-shadow var(--cs-t-fast) var(--cs-ease);
}

/* main.css paints the fill with ::before/::after — fold them into the base. */
.cmn--btn::before,
.cmn--btn::after {
  display: none;
}

.cmn--btn span {
  color: var(--cs-on-green);
  position: relative;
  z-index: 1;
}

.cmn--btn:hover {
  filter: brightness(1.09);
  box-shadow: 0 6px 20px var(--cs-green-glow);
}

.cmn--btn:hover span {
  color: var(--cs-on-green);
}

.cmn--btn:active {
  transform: scale(0.975);
  filter: brightness(0.96);
}

.cmn--btn[disabled],
.cmn--btn.is-loading {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.3);
}

/* Secondary / outline */
.border-btn {
  border-radius: var(--cs-r-sm);
  padding: 12px 22px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--cs-text);
  background: transparent;
  border: 1px solid var(--cs-border-strong);
  overflow: hidden;
  transition: border-color var(--cs-t-fast) var(--cs-ease),
              background var(--cs-t-fast) var(--cs-ease),
              color var(--cs-t-fast) var(--cs-ease);
}

.border-btn::before,
.border-btn::after {
  display: none;
}

.border-btn span {
  color: inherit;
  position: relative;
  z-index: 1;
}

.border-btn:hover {
  border-color: var(--cs-green-line);
  background: var(--cs-green-soft);
  color: var(--cs-green-300);
}

.border-btn:active {
  transform: scale(0.975);
}

/* Inline spinner for async actions */
.cs-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  animation: cs-spin 700ms linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes cs-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   07. GAME CARDS
   ========================================================================== */

.casino-demo-items {
  border-radius: var(--cs-r);
  overflow: hidden;
  background: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  transition: transform var(--cs-t) var(--cs-ease-out),
              border-color var(--cs-t) var(--cs-ease),
              box-shadow var(--cs-t) var(--cs-ease);
}

.casino-demo-items:hover {
  transform: translateY(-4px);
  border-color: var(--cs-green-line);
  box-shadow: var(--cs-e3), 0 0 0 1px var(--cs-green-softer);
}

/* Media area — fixed ratio stops layout shift while images load. */
.cs-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cs-surface-2);
}

.casino-demo-items img {
  border-radius: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--cs-t-slow) var(--cs-ease-out);
}

.casino-demo-items:hover img {
  transform: scale(1.06);
}

/* Hover overlay with the Play / Demo actions */
.casino-demo-items .casino-overlay {
  border-radius: 0;
  background: linear-gradient(180deg, rgba(11, 15, 23, 0) 0%, rgba(11, 15, 23, 0.55) 45%, rgba(11, 15, 23, 0.92) 100%);
  align-items: center;
  bottom: 0;
  opacity: 0;
  transition: opacity var(--cs-t) var(--cs-ease);
}

.casino-demo-items:hover .casino-overlay,
.casino-demo-items:focus-within .casino-overlay {
  bottom: 0;
  opacity: 1;
  border-radius: 0;
}

.casino-demo-items .casino-overlay .cmn-grp {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-2);
}

.casino-demo-items .casino-overlay .cmn-grp .cmn--btn {
  padding: 10px 20px;
  margin: 0;
  color: var(--cs-on-green);
  transform: translateY(8px);
  transition: transform var(--cs-t) var(--cs-ease-out),
              filter var(--cs-t-fast) var(--cs-ease);
}

.casino-demo-items .casino-overlay .cmn-grp .border-btn {
  padding: 10px 18px;
  margin: 0;
  background: rgba(11, 15, 23, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: translateY(8px);
  transition: transform var(--cs-t) var(--cs-ease-out) 40ms,
              border-color var(--cs-t-fast) var(--cs-ease);
}

.casino-demo-items .casino-overlay .cmn-grp .border-btn::before {
  display: none;
}

.casino-demo-items:hover .casino-overlay .cmn-grp .cmn--btn,
.casino-demo-items:hover .casino-overlay .cmn-grp .border-btn,
.casino-demo-items:focus-within .casino-overlay .cmn-grp .cmn--btn,
.casino-demo-items:focus-within .casino-overlay .cmn-grp .border-btn {
  transform: translateY(0);
}

/* Favourite button */
.cs-fav-btn {
  position: absolute;
  top: var(--cs-sp-2);
  right: var(--cs-sp-2);
  z-index: 3;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(11, 15, 23, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--cs-text-secondary);
  font-size: 14px;
  padding: 0;
  transition: color var(--cs-t-fast) var(--cs-ease),
              background var(--cs-t-fast) var(--cs-ease),
              transform var(--cs-t-fast) var(--cs-ease);
}

/* Keep the tap target at 44px without growing the visual circle. */
.cs-fav-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.cs-fav-btn:hover {
  background: rgba(11, 15, 23, 0.85);
  color: var(--cs-green-300);
}

.cs-fav-btn[aria-pressed="true"] {
  color: var(--cs-green);
  border-color: var(--cs-green-line);
}

.cs-fav-btn.cs-pop {
  animation: cs-pop var(--cs-t-slow) var(--cs-ease-out);
}

@keyframes cs-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* Category chip */
.cs-card-tag {
  position: absolute;
  top: var(--cs-sp-2);
  left: var(--cs-sp-2);
  z-index: 3;
  padding: 4px 10px;
  border-radius: var(--cs-r-pill);
  background: rgba(11, 15, 23, 0.66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--cs-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Caption bar under the artwork */
.cs-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-sp-2);
  padding: var(--cs-sp-3);
  border-top: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
}

.cs-card-text {
  min-width: 0; /* lets the text actually shrink instead of overflowing */
}

.cs-card-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--cs-text);
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-card-provider {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--cs-text-muted);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.cs-card-play {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  height: 32px;
  padding: 0 var(--cs-sp-3);
  border: 1px solid var(--cs-green-line);
  border-radius: var(--cs-r-sm);
  background: var(--cs-green-soft);
  color: var(--cs-green-300);
  font-size: 12px;
  font-weight: 700;
  transition: background var(--cs-t-fast) var(--cs-ease),
              color var(--cs-t-fast) var(--cs-ease);
}

.cs-card-play:hover {
  background: var(--cs-green);
  color: var(--cs-on-green);
}

.cs-card-play i {
  transition: transform var(--cs-t-fast) var(--cs-ease);
}

.cs-card-play:hover i {
  transform: translateX(2px);
}

/* ==========================================================================
   08. GAME PAGE

   The game opens as a real, linkable page (game.html?provider=X&game=Y),
   not an overlay — so it can be deep-linked, shared, bookmarked and
   handled by the browser's own back button.
   ========================================================================== */

.cs-game-page {
  padding: var(--cs-sp-5) 0 var(--cs-sp-6);
}

/* --- Breadcrumb --- */
.cs-game-crumbs {
  margin-bottom: var(--cs-sp-4);
}

.cs-game-crumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cs-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.cs-game-crumbs a {
  color: var(--cs-text-muted);
}

.cs-game-crumbs a:hover {
  color: var(--cs-green-400);
}

.cs-crumb-sep {
  display: inline-flex;
  font-size: 9px;
  color: var(--cs-text-muted);
  opacity: 0.6;
}

.cs-crumb-game {
  color: var(--cs-text);
  font-weight: 600;
}

/* --- The stage --- */
.cs-game-stage {
  display: flex;
  flex-direction: column;
  border-radius: var(--cs-r-lg);
  border: 1px solid var(--cs-border-strong);
  background: var(--cs-bg);
  box-shadow: var(--cs-e3);
  overflow: hidden;
}

/* Title bar */
.cs-game-bar {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-3);
  padding: var(--cs-sp-3) var(--cs-sp-4);
  border-bottom: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
  flex-shrink: 0;
}

.cs-game-id {
  min-width: 0;
  flex: 1;
}

.cs-game-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--cs-text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.cs-game-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--cs-text-muted);
}

.cs-game-meta .cs-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.cs-game-actions {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-2);
  flex-shrink: 0;
}

.cs-game-actions .cs-icon-btn {
  --cs-icon-btn-size: 38px;
}

.cs-game-actions .cs-close:hover {
  border-color: var(--cs-danger);
  color: var(--cs-danger);
}

/* Playfield */
.cs-game-area {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--cs-bg-deep);
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.cs-game-area iframe,
.cs-game-area video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Loading state while the game boots */
.cs-game-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cs-sp-3);
  background: var(--cs-bg-deep);
  color: var(--cs-text-muted);
  font-size: 13px;
  transition: opacity var(--cs-t) var(--cs-ease);
}

.cs-game-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.cs-game-loader .cs-spinner {
  width: 28px;
  height: 28px;
  border-width: 3px;
  border-color: var(--cs-surface-3);
  border-top-color: var(--cs-green);
}

/* Footer controls */
.cs-game-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-sp-3);
  padding: var(--cs-sp-3) var(--cs-sp-4);
  border-top: 1px solid var(--cs-border);
  background: var(--cs-surface-1);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cs-game-stat {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-2);
  font-size: 12px;
  color: var(--cs-text-muted);
}

.cs-game-stat strong {
  color: var(--cs-green-400);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.cs-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cs-green);
  box-shadow: 0 0 0 3px var(--cs-green-soft);
  animation: cs-pulse 2s var(--cs-ease) infinite;
}

@keyframes cs-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.cs-game-foot-actions {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-4);
  flex-wrap: wrap;
}

.cs-game-deposit {
  min-height: 36px;
  padding: 8px 18px;
  font-size: 14px;
}

/* Fullscreen — the stage itself goes fullscreen, so the toolbar and
   controls stay available while playing. */
.cs-game-stage:fullscreen {
  border-radius: 0;
  border: 0;
  height: 100%;
}

.cs-game-stage:fullscreen .cs-game-area {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
}

/* --- About / specs panel below the stage --- */
.cs-game-about {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--cs-sp-5);
  margin-top: var(--cs-sp-5);
  padding: var(--cs-sp-5);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r);
  background: var(--cs-surface-1);
}

.cs-game-about h2 {
  margin: 0 0 var(--cs-sp-3);
  font-size: 17px;
  font-weight: 700;
}

.cs-game-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--cs-text-secondary);
  max-width: 68ch; /* keeps the measure readable on wide screens */
}

.cs-game-specs {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--cs-border);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-sm);
  overflow: hidden;
}

.cs-game-specs > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-sp-3);
  padding: 10px var(--cs-sp-3);
  background: var(--cs-surface-1);
}

.cs-game-specs dt {
  font-size: 12px;
  color: var(--cs-text-muted);
  font-weight: 500;
}

.cs-game-specs dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cs-text);
  text-align: right;
  overflow-wrap: anywhere;
}

/* Error state when no game source is configured */
.cs-game-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cs-sp-3);
  text-align: center;
  padding: var(--cs-sp-5);
  color: var(--cs-text-secondary);
}

.cs-game-error i {
  font-size: 26px;
  color: var(--cs-text-muted);
}

.cs-game-error h3 {
  margin: 0;
  font-size: 16px;
  color: var(--cs-text);
}

.cs-game-error p {
  margin: 0;
  font-size: 13px;
  color: var(--cs-text-muted);
  max-width: 46ch;
}

/* ==========================================================================
   08b. MOBILE BOTTOM NAVIGATION

   Five top-level destinations with a raised centre action, per Material's
   bottom-nav guidance (max 5, icon + label, current item marked by more
   than colour). Replaces the template's own .app-section bar.
   Desktop keeps the sidebar, so this only exists below 1200px.
   ========================================================================== */

.cs-bottom-nav {
  display: none;
}

@media screen and (max-width: 1199px) {
  /* The template's own bottom bar would stack under ours. */
  .app-section {
    display: none !important;
  }

  .cs-bottom-nav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    padding: 0 10px calc(8px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
  }

  .cs-bnav-bar {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2px;
    height: 66px;
    padding: 0 4px;
    border-radius: 26px;
    background: var(--cs-surface-1);
    border: 1px solid var(--cs-border);
    box-shadow: var(--cs-e3);
    pointer-events: auto;
  }

  /* Green glow seam under the bar */
  .cs-bnav-bar::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -3px;
    height: 3px;
    border-radius: var(--cs-r-pill);
    background: linear-gradient(90deg, transparent, var(--cs-green), transparent);
    box-shadow: 0 0 14px 2px var(--cs-green-glow);
    opacity: 0.9;
  }

  /* --- Standard item --- */
  .cs-bnav-item {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 2px 8px;
    border: 0;
    background: none;
    border-radius: var(--cs-r);
    color: var(--cs-text-secondary);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    transition: color var(--cs-t-fast) var(--cs-ease),
                background var(--cs-t-fast) var(--cs-ease);
  }

  .cs-bnav-item:active {
    background: var(--cs-surface-2);
  }

  .cs-bnav-ico {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .cs-bnav-ico img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }

  /* Lift the supplied artwork slightly off the dark bar */
  .cs-bnav-item .cs-bnav-ico img {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  }

  .cs-bnav-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Current destination: colour + weight + a marker dot, never colour alone */
  .cs-bnav-item[aria-current="page"] {
    color: var(--cs-green-300);
    font-weight: 700;
  }

  /* Material-style active indicator: a pill behind the icon. A shape, not
     just a hue, so the current item survives colour-blindness and
     greyscale. */
  .cs-bnav-item[aria-current="page"] .cs-bnav-ico::before {
    content: "";
    position: absolute;
    inset: -4px -13px;
    border-radius: var(--cs-r-pill);
    background: var(--cs-green-soft);
    border: 1px solid var(--cs-green-line);
  }

  /* --- Raised centre action --- */
  .cs-bnav-center {
    flex: 0 0 84px;
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  /* Notch: a disc of page background that reads as a cut-out in the bar */
  .cs-bnav-notch {
    position: absolute;
    z-index: 1;
    top: -33px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--cs-bg);
    pointer-events: none;
  }

  /* The Rami artwork already contains the flames, disc, cards and
     wordmark, so the FAB draws nothing itself — it is just a hit area
     around the image. The image is taller than the disc it contains, so
     it is offset upward to let the flames escape the bar. */
  .cs-bnav-fab {
    position: absolute;
    z-index: 3;
    top: -58px;
    left: 50%;
    transform: translateX(-50%);
    width: 122px;
    height: 122px;
    display: block;
    text-decoration: none;
    transition: transform var(--cs-t-fast) var(--cs-ease);
  }

  .cs-bnav-fab-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(255, 120, 0, 0.35));
    animation: cs-flicker 1.9s var(--cs-ease) infinite;
    transform-origin: 50% 62%;
  }

  .cs-bnav-fab:active {
    transform: translateX(-50%) scale(0.95);
  }

  /* The glow breathes rather than the artwork jumping — the flames are
     baked into the bitmap, so scaling it would read as a wobble. */
  @keyframes cs-flicker {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 120, 0, 0.35)); }
    50%      { filter: drop-shadow(0 0 18px rgba(255, 145, 0, 0.55)); }
  }

  /* Keep content and the footer clear of the fixed bar */
  .body-middle {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }

  /* Toasts must not sit under the bar */
  .cs-toast-region {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }

}

/* Very narrow phones: drop to icon-first sizing so 5 slots still fit */
@media screen and (max-width: 359px) {
  .cs-bnav-bar {
    height: 62px;
  }

  .cs-bnav-item {
    font-size: 10px;
  }

  .cs-bnav-ico {
    width: 26px;
    height: 26px;
  }

  .cs-bnav-center {
    flex: 0 0 74px;
  }

  .cs-bnav-fab {
    width: 106px;
    height: 106px;
    top: -50px;
  }

  .cs-bnav-notch {
    width: 80px;
    height: 80px;
    top: -28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-bnav-fab-img {
    animation: none;
  }
}

/* ==========================================================================
   09. FORMS & INPUTS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
select {
  background: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-sm);
  color: var(--cs-text);
  min-height: 44px; /* comfortable tap target */
  transition: border-color var(--cs-t-fast) var(--cs-ease),
              box-shadow var(--cs-t-fast) var(--cs-ease);
}

input::placeholder,
textarea::placeholder {
  color: var(--cs-text-muted);
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--cs-green-line);
  box-shadow: 0 0 0 3px var(--cs-green-soft);
  outline: none;
}

input[disabled],
textarea[disabled],
select[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

label {
  color: var(--cs-text-secondary);
  font-weight: 500;
}

/* nice-select dropdown */
.nice-select {
  background: var(--cs-surface-1) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-r-sm) !important;
  color: var(--cs-text) !important;
}

.nice-select .list {
  background: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r);
  box-shadow: var(--cs-e3);
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
  background: var(--cs-surface-2);
  color: var(--cs-text);
}

/* Form error / helper text */
.cs-field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--cs-danger);
}

.cs-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--cs-text-muted);
}

/* ==========================================================================
   10. SURFACES, TABLES & MISC
   ========================================================================== */

/* --- Home hero slide ----------------------------------------------------
   The artwork already carries the logo (top-left) and the roulette
   (right), so the copy sits low-left to clear the mark, and the focal
   point shifts to the wheel on narrow screens where cover crops hard. */
.cs-hero-slide {
  background-image: url("../img/banner/betvimo-hero.jpg");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cs-hero-slide .banner-content {
  padding: 215px 60px 60px;
  max-width: 580px;
}

.cs-hero-slide .banner-content h2 {
  margin-bottom: 22px;
  font-size: 34px;
  line-height: 1.2;
  color: var(--cs-text);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .cs-hero-slide .banner-content {
    padding-top: 175px;
  }
}

@media screen and (max-width: 991px) {
  .cs-hero-slide {
    background-position: 72% center;
  }

  /* A scrim keeps the copy readable once the artwork fills the frame. */
  .cs-hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 15, 23, 0.88) 0%, rgba(11, 15, 23, 0.45) 55%, rgba(11, 15, 23, 0) 100%);
  }

  .cs-hero-slide .banner-content {
    padding: 150px 30px 50px;
  }

  .cs-hero-slide .banner-content h2 {
    font-size: 26px;
  }
}

@media screen and (max-width: 575px) {
  /* At this width `cover` crops ~46% horizontally. Anchoring right drops
     the baked-in logo out of frame entirely — a sliver of it reads as a
     broken image — and centres the roulette instead. The header already
     carries the brand here. */
  /* No amount of repositioning keeps the wordmark out of frame at every
     width — the crop window widens with the viewport. So small screens get
     a separate crop of the artwork with no logo in it at all, which is
     also 33% lighter. The header already carries the brand here. */
  .cs-hero-slide {
    background-image: url("../img/banner/betvimo-hero-mobile.jpg");
    background-position: center center;
    background-size: cover;
  }

  .cs-hero-slide::before {
    background: linear-gradient(180deg, rgba(11, 15, 23, 0.82) 0%, rgba(11, 15, 23, 0.45) 55%, rgba(11, 15, 23, 0.88) 100%);
  }

  .cs-hero-slide .banner-content {
    padding: 96px 20px 40px;
  }

  .cs-hero-slide .banner-content h2 {
    font-size: 22px;
  }
}

/* --- Rami promo slide ---------------------------------------------------
   All of this artwork's copy (the RAMI lockup and the Arabic lines) is
   baked into the image and centred, so the slide carries no text overlay
   that would fight it. The whole slide is one link instead, with an
   accessible name — a CSS background is invisible to screen readers, so
   without it this would be an unlabelled link. */
.cs-rami-slide {
  background-image: url("../img/banner/rami-promo.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cs-slide-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}

.cs-slide-link:focus-visible {
  outline: 3px solid var(--cs-green-400);
  outline-offset: -5px;
  border-radius: 4px;
}

@media screen and (max-width: 767px) {
  /* Centre crop: cover would otherwise squeeze the lockup at phone
     aspect ratios. */
  .cs-rami-slide {
    background-image: url("../img/banner/rami-promo-mobile.jpg");
  }
}

@media screen and (max-width: 575px) {
  /* Every word on this slide is inside the artwork, so `cover` is the
     wrong fit here — it clipped the Arabic bars at phone widths. `contain`
     keeps the whole promo legible; the letterbox is painted with the
     artwork's own edge colour so the seam doesn't read. */
  .cs-rami-slide {
    background-size: contain;
    background-color: #261c17;
  }
}

.breadcumnd-banner {
  background-color: var(--cs-surface-1);
  border-bottom: 1px solid var(--cs-border);
}

.breadcumnd-content h1 {
  color: var(--cs-text);
}

.search-provider-wrapper {
  background-color: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r);
  gap: var(--cs-sp-4);
  flex-wrap: wrap;
}

/* Generic panel/card surfaces used across the template */
.popup-container,
.custom-model-inner,
.pop-up-content-wrap {
  background: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-lg);
  box-shadow: var(--cs-e3);
}

/* Wide data tables must scroll inside their own container. The template
   clips them with .body-middle{overflow:hidden}, which silently cut the
   right-hand columns off on mobile with no way to reach them. */
div.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

div.table-wrapper > table {
  min-width: 560px;
}

table {
  color: var(--cs-text-secondary);
}

table th {
  color: var(--cs-text);
  font-weight: 600;
}

table td,
table th {
  border-color: var(--cs-border) !important;
}

/* Numeric columns shouldn't jitter */
table td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Owl carousel nav */
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
  background: var(--cs-surface-1) !important;
  border: 1px solid var(--cs-border) !important;
  color: var(--cs-text-secondary) !important;
  border-radius: var(--cs-r-sm) !important;
  transition: background var(--cs-t-fast) var(--cs-ease),
              color var(--cs-t-fast) var(--cs-ease),
              border-color var(--cs-t-fast) var(--cs-ease);
}

.owl-nav button.owl-prev:hover,
.owl-nav button.owl-next:hover {
  background: var(--cs-green-soft) !important;
  border-color: var(--cs-green-line) !important;
  color: var(--cs-green-300) !important;
}

.owl-dots .owl-dot span {
  background: var(--cs-surface-3) !important;
  transition: background var(--cs-t-fast) var(--cs-ease),
              width var(--cs-t-fast) var(--cs-ease);
}

.owl-dots .owl-dot.active span {
  background: var(--cs-green) !important;
}

/* Empty state */
.cs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cs-sp-3);
  padding: var(--cs-sp-7) var(--cs-sp-4);
  border: 1px dashed var(--cs-border-strong);
  border-radius: var(--cs-r);
  background: var(--cs-surface-1);
  text-align: center;
}

.cs-empty i {
  font-size: 28px;
  color: var(--cs-text-muted);
}

.cs-empty h4 {
  font-size: 16px;
  margin: 0;
}

.cs-empty p {
  margin: 0;
  font-size: 14px;
  color: var(--cs-text-muted);
}

/* ==========================================================================
   11. TOASTS & TOOLTIPS
   ========================================================================== */

.cs-toast-region {
  position: fixed;
  right: var(--cs-sp-5);
  bottom: var(--cs-sp-5);
  z-index: var(--cs-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--cs-sp-2);
  pointer-events: none;
}

.cs-toast {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-3);
  min-width: 240px;
  max-width: min(360px, calc(100vw - 32px));
  padding: var(--cs-sp-3) var(--cs-sp-4);
  border-radius: var(--cs-r);
  border: 1px solid var(--cs-border-strong);
  background: var(--cs-surface-1);
  color: var(--cs-text);
  font-size: 14px;
  box-shadow: var(--cs-e3);
  pointer-events: auto;
  animation: cs-toast-in var(--cs-t-slow) var(--cs-ease-out);
}

.cs-toast.is-leaving {
  animation: cs-toast-out var(--cs-t) var(--cs-ease) forwards;
}

.cs-toast i {
  color: var(--cs-green);
  flex-shrink: 0;
}

@keyframes cs-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cs-toast-out {
  to { opacity: 0; transform: translateY(8px); }
}

/* Sidebar tooltips — positioned fixed by JS so the scroll container
   can't clip them. */
.cs-tooltip {
  position: fixed;
  z-index: var(--cs-z-tooltip);
  padding: 7px 11px;
  border-radius: var(--cs-r-sm);
  border: 1px solid var(--cs-border-strong);
  background: var(--cs-surface-2);
  color: var(--cs-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--cs-e2);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--cs-t-fast) var(--cs-ease),
              transform var(--cs-t-fast) var(--cs-ease);
}

.cs-tooltip.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   12. MOTION
   ========================================================================== */

/* Scroll/load reveal — final state is the default so content is readable
   even if JS never runs. */
.cs-reveal {
  opacity: 0;
  transform: translateY(14px);
}

.cs-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--cs-t-slow) var(--cs-ease-out),
              transform var(--cs-t-slow) var(--cs-ease-out);
}

/* Respect the user's motion preference across everything above. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .cs-reveal {
    opacity: 1;
    transform: none;
  }

  .casino-demo-items:hover {
    transform: none;
  }

  .casino-demo-items:hover img {
    transform: none;
  }
}

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */

/* Large desktop.
   The header now carries a wallet, notifications and a profile menu on top
   of the template's original row, which overflowed between roughly 1200
   and 1600px and clipped the profile. Shed the least important items
   first: the decorative social links (they are repeated in the footer),
   then the oversized search field. */
@media screen and (min-width: 1200px) and (max-width: 1599px) {
  .header-top-wrapper .header-top-social > li:not(.cs-player-only):not(.btn-top-group) {
    display: none;
  }
}

@media screen and (max-width: 1599px) {
  .header-top-wrapper .middle-referral ul li form {
    width: 260px;
  }
}

@media screen and (max-width: 1399px) {
  .cs-wallet {
    padding-left: var(--cs-sp-3);
  }

  .header-top-wrapper .middle-referral ul li:not(:last-child) {
    margin-right: 16px;
  }
}

/* Tablet / small laptop */
@media screen and (max-width: 1199px) {
  .header-top {
    padding: 0 var(--cs-sp-4);
  }

  .header-top-wrapper .header-top-social {
    gap: var(--cs-sp-2);
  }

  /* main.css hides EVERY header-social item below 1199px. The decorative
     social icons can stay hidden, but the wallet, deposit and profile are
     primary controls — bring those back, scoped to the current auth state
     so they don't fight the guest/player rules above. */
  body[data-cs-auth="player"] .header-top-social > li.cs-player-only,
  body[data-cs-auth="guest"] .header-top-social > li.btn-top-group {
    display: flex !important;
  }

  /* The toggle drives the off-canvas drawer at this size. */
  .cs-sidebar-toggle {
    display: inline-flex;
  }
}

@media screen and (max-width: 991px) {
  .cs-wallet-label {
    display: none;
  }

  .cs-wallet {
    height: 42px;
    gap: var(--cs-sp-2);
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  :root {
    --cs-header-h: 64px;
  }

  .header-top {
    padding: 0 var(--cs-sp-3);
  }

  .header-top-wrapper {
    gap: var(--cs-sp-2);
  }

  .header-top-wrapper .logo {
    max-width: 112px;
  }

  /* Collapse the wallet to the essential number + deposit action. */
  .cs-wallet {
    padding: 0 4px 0 var(--cs-sp-3);
    gap: var(--cs-sp-2);
  }

  .cs-wallet-value {
    font-size: 14px;
  }

  .cs-deposit-btn span {
    display: none;
  }

  .cs-deposit-btn {
    padding: 0 12px;
  }

  .cs-profile-trigger .cs-profile-name,
  .cs-profile-trigger .fa-chevron-down {
    display: none;
  }

  .cs-game-page {
    padding: var(--cs-sp-4) 0 var(--cs-sp-5);
  }

  /* Let the playfield use the full width on phones. */
  .cs-game-stage {
    border-radius: var(--cs-r);
  }

  .cs-game-foot {
    justify-content: center;
    gap: var(--cs-sp-3);
  }

  .cs-game-foot-actions {
    justify-content: center;
    gap: var(--cs-sp-3);
  }

  .cs-game-about {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cs-sp-4);
    padding: var(--cs-sp-4);
  }

  .cs-toast-region {
    right: var(--cs-sp-3);
    left: var(--cs-sp-3);
    bottom: var(--cs-sp-3);
  }

  .cs-toast {
    max-width: none;
  }

  .cs-card-body {
    padding: 10px;
  }

  .cs-card-title {
    font-size: 13px;
  }
}

@media screen and (max-width: 575px) {
  /* Wallet, deposit and profile win the space contest at this width;
     notifications stay reachable from the profile menu. */
  body[data-cs-auth="player"] .header-top-social > li.cs-notif-item {
    display: none !important;
  }

  /* Fit toggle + logo + wallet + profile inside 375px without clipping. */
  .header-top {
    padding: 0 10px;
  }

  .header-top-wrapper {
    gap: 6px;
  }

  .header-top-wrapper .logo {
    max-width: 88px;
  }

  .cs-header-left {
    gap: 6px;
  }

  .header-top-wrapper .header-top-social {
    gap: 6px;
  }

  .cs-sidebar-toggle {
    --cs-icon-btn-size: 40px;
  }

  .cs-wallet {
    height: 40px;
    padding: 0 4px 0 10px;
    gap: 6px;
  }

  .cs-wallet-value {
    font-size: 13px;
  }

  .cs-deposit-btn {
    height: 32px;
    padding: 0 10px;
  }

  .cs-profile-trigger {
    height: 40px;
    padding: 0 4px;
    gap: 0;
  }

  .cs-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .cs-game-bar {
    padding: 10px var(--cs-sp-3);
  }

  .cs-game-actions .cs-icon-btn {
    --cs-icon-btn-size: 36px;
  }

  /* Two-up game grid stays comfortable at 375px */
  .cs-card-play span {
    display: none;
  }

  .cs-card-play {
    padding: 0 10px;
  }
}