/* BlueBet Theme - Built from scratch */
/* Primary: #1556AB | Accent: #5BD0FF */

/* ===== FONTS ===== */
/* Bebas Neue (buttons + large uppercase headings) + Inter (all other chrome). */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,wght@0,200;0,400;0,500;0,600;0,700;1,600;1,700&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
  --bb-primary: #1556AB;
  --bb-primary-light: #1a6fd4;
  --bb-primary-dark: #0e3d7a;
  --bb-primary-glow: rgba(21, 86, 171, 0.5);
  --bb-accent: #5BD0FF;
  --bb-accent-dim: #38B0E6;
  --bb-accent-bright: #A6E6FF;
  --bb-bg-dark: #0A1828;
  --bb-bg-mid: #0f1823;
  --bb-bg-card: #0F1A2E;
  --bb-text: #FFFFFF;
  --bb-text-muted: #9CA3AF;
  --bb-border: #2A3140;
  --bb-border-light: rgba(21, 86, 171, 0.35);
  --bb-glass: rgba(10, 22, 40, 0.55);
  --bb-glass-hover: rgba(21, 86, 171, 0.12);
  --bb-success: #22C55E;   /* VERIFICADO, positive amounts */
  --bb-warning: #F59E0B;   /* PENDIENTE */
  --bb-danger:  #E63946;   /* log out, self-exclusion, negative amounts */
}

/* ===== BODY ===== */
body {
  /* background: linear-gradient(180deg, #060e1a 0%, #0a1628 30%, #08101c 70%, #0a1628 100%) !important; */
  background: var(--bb-bg-dark) !important;
  color: var(--bb-text) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Kill any baked-in font/text overrides from saved CMS inline styles */
#left-sidebar-dynamic-header,
#left-sidebar-dynamic-header *,
#left-sidebar-dynamic-footer,
#left-sidebar-dynamic-footer *,
#left-sidebar-nav,
#left-sidebar-nav *,
#custom-dynamic-header,
#custom-dynamic-header *,
#custom-dynamic-footer,
#custom-dynamic-footer * {
  text-transform: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}
#left-sidebar-dynamic-footer h5 {
  font-size: 20px !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
}
/* Header h5 title — Bebas Neue (needs !important + #id specificity to beat the inherit reset above) */
.MuiTypography-root.MuiTypography-h5 {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 0.05em;
}
#left-sidebar-dynamic-header .ls-header-link {
  font-weight: 700 !important;
}
#left-sidebar-nav .ls-nav-section-header {
  font-size: 14px !important;
  font-weight: 550 !important;
}

/* ===== HEADER ===== */
#left-sidebar-dynamic-header,
#custom-dynamic-header {
  background-color: rgba(10, 22, 40, 0.95) !important;
  border-bottom: 1px solid var(--bb-border) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Hamburger */
.ls-header-hamburger {
  color: var(--bb-text-muted) !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
}
.ls-header-hamburger:hover {
  color: var(--bb-accent) !important;
}
.ls-header-hamburger svg {
  transition: color 0.2s ease !important;
}

/* Promo icon */
.ls-promo-icon-wrap {
  color: var(--bb-accent) !important;
  transition: color 0.2s ease !important;
}
.ls-promo-icon-wrap:hover {
  color: #fff !important;
}
.ls-promo-shadow {
  background: radial-gradient(circle, rgba(21, 86, 171, 0.15) 0%, transparent 70%) !important;
}

/* Header Nav Links
   DARK MODE color policy (per client requirement):
   - Resting:        text = WHITE, icon = BLUE
   - Hover / active: text = BLUE,  icon = WHITE  (the two colors interchange)
   See the higher-specificity overrides further down at the "doubled selectors"
   block (~line 1036+) which beat the JS-injected `.ls-header-nav a` rules in
   useGameLogic.tsx. Light-mode (body.ls-light-theme) overrides live in
   useGameLogic.tsx and follow the same swap pattern with BLACK instead of WHITE. */
.ls-header-link {
  color: #fff !important;
  position: relative !important;
  transition: color 0.3s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.ls-header-link::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--bb-primary) !important;
  transition: width 0.35s ease, left 0.35s ease !important;
  transform: translateX(-50%) !important;
}
.ls-header-link.active::after,
.ls-header-link:hover::after {
  width: 100% !important;
}
.ls-header-link.active,
.ls-header-link:hover {
  /* DARK MODE hover/active: TEXT becomes blue (swapped from resting white).
     Icon swap (resting blue → hover/active white) is handled by the .ls-header-link svg
     rules further below (~line 1023+) and the higher-specificity doubled rules (~line 1043+). */
  color: var(--bb-primary-light) !important;
}

/* Header Nav (horizontal scrollable) */
.ls-header-nav {
  scrollbar-width: none !important;
}
.ls-header-nav::-webkit-scrollbar {
  display: none !important;
}

/* Scroll Arrows */
.ls-nav-scroll-arrow {
  background: rgba(10, 22, 40, 0.9) !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--bb-text-muted) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
.ls-nav-scroll-arrow:hover {
  color: var(--bb-accent) !important;
  border-color: var(--bb-primary) !important;
  background: rgba(21, 86, 171, 0.15) !important;
}

/* Login / Register Buttons — use #id selector to beat GrapesJS per-element ID specificity */
#left-sidebar-dynamic-header .custom-header-button,
#custom-dynamic-header .custom-header-button,
.custom-header-button {
  background: rgba(21, 86, 171, 0.08) !important;
  color: var(--bb-primary-light) !important;
  border: 1.5px solid var(--bb-primary-light) !important;
  /* Per FINAL design spec: buttons use Bebas Neue, UPPERCASE display.
     (Supersedes the earlier Public Sans 900 client request — spec wins.)
     colors, sizing, padding, border, hover behavior are intentionally untouched. */
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: normal !important;

  height: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}
.custom-header-button:hover {
  background: rgba(21, 86, 171, 0.2) !important;
  border-color: var(--bb-primary-light) !important;
  color: #fff !important;
  transform: scale(1.05) translateY(-1px) !important;
  box-shadow: 0 0 12px var(--bb-primary-glow) !important;
}
#left-sidebar-dynamic-header .custom-register-button,
#custom-dynamic-header .custom-register-button,
.custom-register-button {
  background: var(--bb-primary) !important;
  border: none !important;
  /* Per FINAL design spec: buttons use Bebas Neue, UPPERCASE display.
     (Supersedes the earlier Public Sans 900 client request — spec wins.)
     colors, sizing, padding, border, hover behavior are intentionally untouched. */
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--bb-text) !important;


  line-height: normal !important;
  height: auto !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}
.custom-register-button:hover {
  transform: scale(1.08) translateY(-2px) !important;
  filter: brightness(1.1) !important;
  box-shadow: 0 4px 16px rgba(226, 226, 226, 0.3) !important;
}

/* ===== LEFT SIDEBAR NAV ===== */
#left-sidebar-nav {
  background-color: rgba(10, 22, 40, 0.98) !important;
  border-right: 1px solid var(--bb-border) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--bb-primary) rgba(0, 0, 0, 0.05) !important;
}
#left-sidebar-nav::-webkit-scrollbar {
  width: 4px !important;
}
#left-sidebar-nav::-webkit-scrollbar-track {
  background: transparent !important;
}
#left-sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--bb-primary) !important;

}

/* Mobile Drawer Header */
.ls-mobile-drawer-header {
  border-bottom: 1px solid var(--bb-border) !important;
}
.ls-mobile-drawer-close svg {
  stroke: var(--bb-text-muted) !important;
  transition: stroke 0.2s ease !important;
}
.ls-mobile-drawer-close:hover svg {
  stroke: var(--bb-accent) !important;
}
.ls-mobile-drawer-divider {
  border-color: var(--bb-border) !important;
  opacity: 0.5 !important;
}

/* Quick Links */
.ls-quick-links {
  padding: 8px 0 !important;
}

/* Top Winnings */
.ls-top-winnings {
  border-bottom: 1px solid var(--bb-border) !important;
}
/* "Top Winnings" heading only (the body2 title, NOT the winner-card caption text) —
   Bebas Neue UPPERCASE. #id + !important to beat the #left-sidebar-nav inherit reset. */
html body #left-sidebar-nav .ls-top-winnings .MuiStack-root .MuiTypography-body2,
.ls-top-winnings .MuiStack-root .MuiTypography-body2 {
  font-family: 'Bebas Neue', sans-serif !important;
  text-transform: uppercase !important;
}
.ls-winner-card {
  background: var(--bb-bg-card) !important;
  border: 1px solid var(--bb-border) !important;

}

/* Nav Items */
.ls-nav-item {
  color: var(--bb-text-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;

  margin: 1px 0 !important;
}
.ls-nav-item:hover {
  color: #fff !important;
  background: var(--bb-glass-hover) !important;
}
.ls-nav-item:hover > span:last-child {
  border-bottom: 1px solid rgb(132, 151, 166) !important;
}
.ls-nav-item.active {
  color: var(--bb-primary-light) !important;
  background: rgba(21, 86, 171, 0.18) !important;
  font-weight: 700 !important;
}
.ls-nav-item svg {
  flex-shrink: 0 !important;
}

/* Nav Section Headers (Casino, Live Casino) */
.ls-nav-section-header {
  color: var(--bb-accent) !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.ls-nav-section-header:hover {
  color: #fff !important;
  background: rgba(21, 86, 171, 0.08) !important;
}
.ls-nav-section-header.active {
  color: var(--bb-primary-light) !important;
}

/* Section content containers */
.ls-casino-items,
.ls-live-casino-items {
  padding: 2px 0 !important;
}

/* Collapsed section headers hide their adjacent items container */
.ls-nav-section-header.collapsed + .ls-casino-items,
.ls-nav-section-header.collapsed + .ls-live-casino-items {
  display: none !important;
}

/* Chevron toggle icon — larger click area with padding */
.ls-nav-section-header span:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
  margin: -6px !important;
  cursor: pointer !important;
  border-radius: 4px !important;
}
.ls-nav-section-header span:last-child:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Rotate chevron arrow when section is collapsed */
.ls-nav-section-header span:last-child svg {
  transition: transform 0.2s ease !important;
}
.ls-nav-section-header.collapsed span:last-child svg {
  transform: rotate(180deg) !important;
}

/* Nav Dividers */
.ls-nav-divider {
  border: none !important;
  height: 1px !important;
  background: var(--bb-border) !important;
  margin: 4px 16px !important;
  opacity: 0.6 !important;
}

/* Nav Primary Items */
.ls-nav-primary {
  font-weight: 600 !important;
}

/* Nav Bottom Section */
.ls-nav-bottom-section {
  padding: 0 !important;
  border-top: 1px solid var(--bb-border) !important;
}
.ls-nav-bottom-section > .MuiBox-root {
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ls-nav-bottom-section .MuiFormControl-root {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ls-nav-bottom-section .MuiOutlinedInput-root {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.ls-nav-bottom-section .MuiSelect-select {
  padding-left: 16px !important;
  padding-right: 32px !important;
}
.ls-nav-bottom-section .MuiOutlinedInput-root {
  background: rgba(21, 86, 171, 0.08) !important;
  color: var(--bb-text) !important;
}
.ls-nav-bottom-section .MuiOutlinedInput-root fieldset,
.ls-nav-bottom-section .MuiOutlinedInput-notchedOutline {
  border-color: var(--bb-border) !important;
}
.ls-nav-bottom-section .MuiOutlinedInput-root:hover fieldset {
  border-color: var(--bb-primary) !important;
}
.ls-nav-bottom-section .MuiSelect-select,
.ls-nav-bottom-section .MuiSelect-select span {
  color: var(--bb-text) !important;
}
.ls-nav-bottom-section .MuiSelect-icon {
  color: var(--bb-text-muted) !important;
}

/* ===== FOOTER ===== */
#left-sidebar-dynamic-footer,
#custom-dynamic-footer {
  background-color: rgba(10, 22, 40, 0.98) !important;
  border-top: 1px solid var(--bb-border) !important;
  color: var(--bb-text-muted) !important;
}

.ls-footer-top {
  padding: 24px 20px !important;
}
.ls-footer-legal-col h5,
.ls-footer-help-col h5 {
  color: var(--bb-accent) !important;
  margin-bottom: 10px !important;
}
.ls-footer-legal-col ul,
.ls-footer-help-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ls-footer-legal-col li,
.ls-footer-help-col li {
  margin-bottom: 6px !important;
}
#left-sidebar-dynamic-footer .ls-footer-legal-col a,
#left-sidebar-dynamic-footer .ls-footer-legal-col a b,
#left-sidebar-dynamic-footer .ls-footer-help-col a,
#left-sidebar-dynamic-footer .ls-footer-help-col a b {
  color: var(--bb-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
}
#left-sidebar-dynamic-footer .ls-footer-legal-col a:hover,
#left-sidebar-dynamic-footer .ls-footer-legal-col a:hover b,
#left-sidebar-dynamic-footer .ls-footer-help-col a:hover,
#left-sidebar-dynamic-footer .ls-footer-help-col a:hover b {
  color: var(--bb-primary-light) !important;
}
.ls-footer-legal-col a b,
.ls-footer-help-col a b {
}

.ls-footer-logos {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  padding: 16px 20px !important;
  flex-wrap: wrap !important;
}
.ls-footer-logos > div {
  color: var(--bb-text-muted) !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s ease !important;
}
.ls-footer-logos > div:hover {
  opacity: 1 !important;
}
.ls-footer-logos svg {
  stroke: var(--bb-text-muted) !important;
}
.ls-footer-logos span {
  color: var(--bb-text-muted) !important;
}

.ls-footer-disclaimer {
  padding: 16px 20px !important;
}
.ls-footer-disclaimer h5 {
  color: var(--bb-accent) !important;
  margin-bottom: 8px !important;
}
.ls-footer-disclaimer div {
  color: var(--bb-text-muted) !important;
}

#left-sidebar-dynamic-footer hr,
#custom-dynamic-footer hr {
  border: none !important;
  height: 1px !important;
  background: var(--bb-border) !important;
  margin: 0 !important;
  opacity: 0.6 !important;
}

/* ===== MAIN CONTENT PAGE ===== */
#left-sidebar-dynamic-page,
#custom-dynamic-page {
  padding: 0px !important;
  /* background: transparent !important; */
}

/* ===== GAME CARDS ===== */
.game-item-container {
  background: var(--bb-glass) !important;
  border: 1px solid var(--bb-border) !important;

  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.4s ease !important;
}
.game-item-container:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--bb-border-light) !important;
}

.game-item-image-wrapper {

  border: 1px solid rgba(21, 86, 171, 0.1) !important;
  overflow: hidden !important;
}

.game-name {
  color: var(--bb-text) !important;
  font-weight: 700 !important;

  letter-spacing: 0.5px !important;
  font-size: 12px !important;
}

.play-button {
  background: var(--bb-primary) !important;
  color: #0a1628 !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;

  height: auto !important;
  line-height: normal !important;

  border: none !important;
  padding: 10px 18px !important;
  min-width: 70px !important;
  line-height: 1 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(226, 226, 226, 0.2) !important;
}
.play-button:hover {
  transform: scale(1.08) !important;
  filter: brightness(1.1) !important;
  box-shadow: 0 4px 14px rgba(226, 226, 226, 0.35) !important;
}

/* Game overlay play buttons — override green to bluebet blue */
.left-sidebar-grid-overlay button,
.left-sidebar-game-overlay .MuiButton-root,
.left-sidebar-game-overlay button {
  background: var(--bb-primary) !important;
  background-color: var(--bb-primary) !important;
  font-size: 18px !important;
  line-height: normal !important;
  height: auto !important;
  color: #fff !important;
  padding: 10px 30px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  font-family: 'Bebas Neue', sans-serif !important;
  box-shadow: 0 2px 8px var(--bb-primary-glow) !important;
}
.left-sidebar-grid-overlay button:hover,
.left-sidebar-game-overlay .MuiButton-root:hover,
.left-sidebar-game-overlay button:hover {
  background: var(--bb-primary-light) !important;
  background-color: var(--bb-primary-light) !important;
  box-shadow: 0 4px 14px var(--bb-primary-glow) !important;
}

/* ===== SECTION TITLES ===== */
.MuiTypography-h4 div,
.game-grid-title-text,
.mui-104rzw2 {
  color: var(--bb-text) !important;

  font-family: 'Bebas Neue', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 400 !important;
}

.mui-1l4mjja,
.mui-1y4bj03,
.title-line-left,
.title-line-right {
  height: 2px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(21, 86, 171, 0.3) 10%, var(--bb-primary) 50%, var(--bb-accent-dim) 80%, transparent 100%) !important;
}

/* ===== CATEGORY NAV BAR ===== */
.mui-qv7jz {
  background: rgba(10, 22, 40, 0.7) !important;
  border-top: 1px solid var(--bb-border) !important;
  border-bottom: 1px solid var(--bb-border) !important;
}
.mui-1ej57x5-MuiTypography-root {
  color: var(--bb-text-muted) !important;

  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2.5px !important;
  transition: color 0.25s ease !important;
}
.mui-1ej57x5-MuiTypography-root:hover {
  color: var(--bb-primary-light) !important;
}

/* ===== SPORTS CARDS ===== */
.sports-card {
  background: linear-gradient(180deg, rgba(19, 34, 56, 0.7), rgba(10, 22, 40, 0.8)) !important;
  border: 1px solid var(--bb-border) !important;

  transition: all 0.3s ease !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}
.sports-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--bb-border-light) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

.team-name {
  color: var(--bb-text) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.time-info .time {
  color: var(--bb-primary-light) !important;
}
.time-info .date,
.time-info .league {
  color: var(--bb-text-muted) !important;
  font-size: 11px !important;
}
.badge-text {
  background: var(--bb-primary) !important;
  color: #fff !important;
  font-size: 10px !important;

  letter-spacing: 1.5px !important;

  font-weight: 700 !important;
}

.odd-btn,
button[class*=OddBoxButton] {
  background: rgba(10, 22, 40, 0.6) !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--bb-text) !important;

  transition: all 0.3s ease !important;
}
.odd-btn:hover,
button[class*=OddBoxButton]:hover {
  border-color: var(--bb-primary) !important;
  background: rgba(21, 86, 171, 0.15) !important;
  box-shadow: 0 0 10px rgba(21, 86, 171, 0.2) !important;
}

/* ===== VIEW MORE BUTTONS ===== */
.MuiButton-containedPrimary,
.MuiButton-textPrimary,
.view-more-btn,
.view-more-button,
a.view-more-button {
  background: var(--bb-primary) !important;
  color: #fff !important;
  border: none !important;

  font-size: 17px !important;
  line-height: normal !important;
  height: auto !important;
  padding: 10px 20px !important;

  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  transition: all 0.3s ease !important;
}
.MuiButton-containedPrimary:hover,
.MuiButton-textPrimary:hover,
.view-more-btn:hover,
.view-more-button:hover,
a.view-more-button:hover {
  background: var(--bb-primary) !important;
  box-shadow: 0 0 15px var(--bb-primary-glow) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: var(--bb-bg-dark) !important;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--bb-primary), var(--bb-primary-dark)) !important;

}

#logoutBtn {
  background-color: var(--bb-danger) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--bb-primary-light), var(--bb-primary)) !important;
}

/* ===== MUI DRAWER (Side Panel) ===== */
.MuiDrawer-paperAnchorRight {
  background: linear-gradient(180deg, var(--bb-bg-mid) 0%, var(--bb-bg-dark) 100%) !important;
  color: var(--bb-text) !important;
  border-left: 1px solid var(--bb-border) !important;
  box-shadow: -2px 0 15px rgba(0, 0, 0, 0.4) !important;
}
.MuiDrawer-paperAnchorRight .MuiListItemButton-root {
  transition: background 0.2s ease !important;
}
.MuiDrawer-paperAnchorRight .MuiListItemButton-root:hover {
  background: var(--bb-glass-hover) !important;
}
.MuiDrawer-paperAnchorRight .MuiListItemText-primary {
  color: var(--bb-text) !important;
  font-width: 700 !important;
}
.MuiDrawer-paperAnchorRight .MuiListItemText-secondary {
  color: var(--bb-text-muted) !important;
}
.MuiDrawer-paperAnchorRight .MuiListItemIcon-root {
  color: var(--bb-primary-light) !important;
}
.MuiDrawer-paperAnchorRight .MuiAvatar-root {
  box-shadow: 0 0 6px rgba(21, 86, 171, 0.25) !important;
}
.drawer-site-menu {
  background: var(--bb-bg-dark) !important;
}

/* ===== MUI DIALOG (Popups/Modals) ===== */
.MuiDialog-paper {
  background: linear-gradient(180deg, var(--bb-bg-mid) 0%, var(--bb-bg-dark) 100%) !important;
  color: var(--bb-text) !important;
  border: 1px solid var(--bb-border) !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
}
.MuiDialogTitle-root {
  color: var(--bb-text) !important;
}
.MuiDialogContent-root {
  color: var(--bb-text) !important;
}
.MuiDialog-paper .MuiDialogActions-root .MuiButton-root,
.MuiDialog-paper .rsd-action-button,
[data-ga4-section=auth_popup] .MuiDialogActions-root .MuiButton-root,
[data-ga4-section=auth_popup] .rsd-action-button {
  background: var(--bb-primary) !important;
  color: #fff !important;
  border: none !important;
  font-size: 21px !important;
  line-height: normal !important;
  height: auto !important;
  padding: 10px 24px !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 0 10px rgba(21, 86, 171, 0.2) !important;
}
.MuiDialog-paper .MuiDialogActions-root .MuiButton-root:hover,
.MuiDialog-paper .rsd-action-button:hover,
[data-ga4-section=auth_popup] .MuiDialogActions-root .MuiButton-root:hover,
[data-ga4-section=auth_popup] .rsd-action-button:hover {
  box-shadow: 0 0 18px rgba(21, 86, 171, 0.35) !important;
}
.auth-dialog-header {
  background: var(--bb-bg-card) !important;
}

/* MUI Form Inputs (in dialogs) */
.MuiDialog-paper .MuiInputBase-root,
.MuiDialog-paper .MuiOutlinedInput-root,
[data-ga4-section=auth_popup] .MuiInputBase-root,
[data-ga4-section=auth_popup] .MuiOutlinedInput-root {
  background: rgba(21, 86, 171, 0.06) !important;
  color: var(--bb-text) !important;
}
.MuiDialog-paper .MuiOutlinedInput-notchedOutline,
[data-ga4-section=auth_popup] .MuiOutlinedInput-notchedOutline {
  border-color: var(--bb-border) !important;
}
.MuiDialog-paper .MuiInputLabel-root,
[data-ga4-section=auth_popup] .MuiInputLabel-root {
  color: var(--bb-text-muted) !important;
}
.MuiDialog-paper .MuiInputBase-input,
[data-ga4-section=auth_popup] .MuiInputBase-input {
  color: var(--bb-text) !important;
}

/* Phone input */
.react-international-phone-input {
  background: rgba(21, 86, 171, 0.06) !important;
  color: var(--bb-text) !important;
  border-color: var(--bb-border) !important;
}
.react-international-phone-country-selector-button {
  background: rgba(21, 86, 171, 0.06) !important;
  border-color: var(--bb-border) !important;
}

/* Search input */
.search-input {
  background: rgba(21, 86, 171, 0.06) !important;
  color: var(--bb-text) !important;
  border-color: var(--bb-border) !important;
}

/* ===== MUI MENU / POPOVER ===== */
.MuiMenu-paper,
.MuiPaper-root.MuiMenu-paper {
  background: rgba(10, 22, 40, 0.95) !important;
  background-color: rgba(10, 22, 40, 0.95) !important;
  background-image: none !important;
  --Paper-overlay: none !important;
  --Paper-shadow: none !important;
  color: var(--bb-text) !important;
  border: 1px solid var(--bb-border) !important;
}
.MuiMenu-paper .MuiMenuItem-root {
  color: var(--bb-text) !important;
}
.MuiMenu-paper .MuiMenuItem-root:hover {
  background: rgba(21, 86, 171, 0.15) !important;
}
.MuiMenu-paper .MuiMenuItem-root.Mui-selected {
  background: rgba(21, 86, 171, 0.25) !important;
}
.MuiPopover-paper.MuiPaper-root:has(.MuiMenuItem-root) {
  background: rgba(10, 22, 40, 0.95) !important;
  background-color: rgba(10, 22, 40, 0.95) !important;
  background-image: none !important;
  --Paper-overlay: none !important;
  --Paper-shadow: none !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--bb-text) !important;
}
.MuiPopover-paper .MuiMenuItem-root:hover {
  background: rgba(21, 86, 171, 0.15) !important;
}
.MuiPopover-paper .MuiMenuItem-root.Mui-selected {
  background: rgba(21, 86, 171, 0.25) !important;
}
.MuiMenu-paper .MuiMenuItem-root *,
.MuiMenu-paper .MuiMenuItem-root .MuiTypography-root,
.MuiPopover-paper .MuiMenuItem-root *,
.MuiPopover-paper .MuiMenuItem-root .MuiTypography-root {
  color: var(--bb-text) !important;
}

/* ===== TABS ===== */
.MuiTabs-root {
  border-bottom: 1px solid var(--bb-border) !important;
}
.MuiTab-root {
  color: var(--bb-text-muted) !important;

  font-weight: 600 !important;
}
.MuiTab-root.Mui-selected {
  color: var(--bb-primary-light) !important;
}
.MuiTabs-indicator {
  background-color: var(--bb-primary) !important;
}

/* ===== BONUS / PROMO CARDS ===== */
.bonus-card,
.promo-card {
  background: var(--bb-glass) !important;
  border: 1px solid var(--bb-border) !important;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
.bonus-tag {
  background: var(--bb-primary) !important;
  color: #fff !important;
}

/* Bonus component wrapper */
.bonus-component-wrapper .MuiPaper-root {
  background-color: transparent !important;
  background-image: none !important;
  --Paper-overlay: none !important;
  --Paper-shadow: none !important;
  box-shadow: none !important;
}
.bonus-component-wrapper .bonus-tab-content .MuiIconButton-root {
  color: var(--bb-text-muted) !important;
}
.bonus-component-wrapper .bonus-tab-content .MuiIconButton-root:hover {
  color: var(--bb-primary-light) !important;
  background: rgba(21, 86, 171, 0.1) !important;
}
.bonus-component-wrapper .bonus-tab-content .MuiListItem-root,
.bonus-component-wrapper .bonus-tab-content .MuiListItemText-primary {
  color: var(--bb-text) !important;
}
.bonus-component-wrapper .bonus-tab-content .MuiListItemText-secondary {
  color: var(--bb-text-muted) !important;
}
.bonus-component-wrapper .bonus-tab-content .MuiListItemIcon-root {
  color: var(--bb-primary) !important;
}
.bonus-component-wrapper .MuiPickersDay-root.Mui-selected {
  background-color: var(--bb-primary) !important;
}

/* ===== HISTORY PAGE ===== */
.history-main-page .MuiPaper-root,
.history-main-page .MuiTableContainer-root {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  --Paper-overlay: none !important;
  --Paper-shadow: none !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 8px !important;
}
.history-main-page .MuiTableCell-head,
.history-main-page .MuiTableHead-root .MuiTableRow-root {
  background: rgba(10, 22, 40, 0.7) !important;
}
.history-main-page .MuiTableCell-head {
  color: var(--bb-accent) !important;
  border-bottom: 1px solid var(--bb-border) !important;
  border-right: 0px solid var(--bb-border) !important;
}
.history-main-page .MuiTableCell-head p {
  color: var(--bb-text) !important;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  font-weight: 500;
}
.history-main-page .MuiTableCell-body {
  color: var(--bb-text) !important;
  border-bottom: 1px solid var(--bb-border) !important;
  font-family: 'Inter', sans-serif;
}
.history-main-page .MuiTableBody-root {
  background: rgba(10, 22, 40, 0.7) !important;
}
.history-main-page .MuiTableBody-root .MuiTableRow-root:hover {
  background: rgba(21, 86, 171, 0.08) !important;
}
.history-main-page .MuiTableCell-body div,
.history-main-page .MuiTableCell-body div[style*="color: black"] {
  color: var(--bb-text) !important;
    font-family: 'Inter', sans-serif;

}
.history-main-page .MuiTableCell-head svg {
  color: var(--bb-text-muted) !important;
    font-family: 'Inter', sans-serif;
}

/* ===== AGE VERIFICATION ===== */
.age-verification-dialog .MuiDialog-paper {
  background: linear-gradient(180deg, var(--bb-bg-mid) 0%, var(--bb-bg-dark) 100%) !important;
  border: 1px solid var(--bb-border) !important;
}
.age-verification-dialog .MuiButton-contained {
  background: var(--bb-primary) !important;
  color: #fff !important;
  border: none !important;

  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.age-verification-dialog .MuiButton-contained:hover {
  box-shadow: 0 0 20px rgba(21, 86, 171, 0.35) !important;
}
.age-verification-dialog .MuiButton-outlined {
  background: rgba(21, 86, 171, 0.06) !important;
  color: var(--bb-primary-light) !important;
  border: 1.5px solid var(--bb-primary) !important;

  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.age-verification-dialog .MuiButton-outlined:hover {
  background: rgba(21, 86, 171, 0.15) !important;
  border-color: var(--bb-primary-light) !important;
}

/* ===== SNACKBAR ===== */
.MuiSnackbar-root:not(.login-success-snackbar) {
  position: fixed !important;
  top: 60px !important;
  z-index: 9999 !important;
}
.MuiSnackbar-root.login-success-snackbar {
  position: fixed !important;
  bottom: 20px !important;
  top: auto !important;
  z-index: 9999 !important;
}
.MuiSnackbar-root .MuiPaper-root.MuiAlert-root {
  --Paper-overlay: none !important;
  --Paper-shadow: none !important;
  background-image: none !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
.MuiSnackbar-root .MuiAlert-filledError {
  background-color: #d32f2f !important;
  color: #fff !important;
}
.MuiSnackbar-root .MuiAlert-filledSuccess {
  background-color: #2e7d32 !important;
  color: #fff !important;
}
.MuiSnackbar-root .MuiAlert-filledWarning {
  background-color: #ed6c02 !important;
  color: #fff !important;
}
.MuiSnackbar-root .MuiAlert-filledInfo {
  background-color: var(--bb-primary) !important;
  color: #fff !important;
}
.MuiSnackbar-root .MuiAlert-root .MuiAlert-icon,
.MuiSnackbar-root .MuiAlert-root .MuiAlert-action,
.MuiSnackbar-root .MuiAlert-root .MuiAlert-action .MuiIconButton-root,
.MuiSnackbar-root .MuiAlert-root .MuiSvgIcon-root {
  color: #fff !important;
}

/* ===== SKELETON LOADING ===== */
.MuiSkeleton-root {
  background-color: rgba(21, 86, 171, 0.08) !important;
}

/* ===== MOBILE NAV ===== */
.mobile-nav {
  background: rgba(10, 22, 40, 0.95) !important;
  border-top: 1px solid var(--bb-border) !important;
  backdrop-filter: blur(8px) !important;
}

/* ===== LINEAR PROGRESS ===== */
.MuiLinearProgress-root {
  background-color: rgba(21, 86, 171, 0.15) !important;
}
.MuiLinearProgress-bar {
  background-color: var(--bb-primary) !important;
}

/* ===== CIRCULAR PROGRESS ===== */
.MuiCircularProgress-root {
  color: var(--bb-primary) !important;
}

/* ===== OVERRIDE JS-INJECTED GREEN COLORS ===== */
/* These override the green (#00FFB3 / rgba(0,255,179)) colors injected by useGameLogic.tsx */

/* Header nav link SVG icons — DARK MODE swap policy.
   Resting: icon BLUE (paired with WHITE text from .ls-header-link rule above).
   Hover/active: icon WHITE (paired with BLUE text from the doubled rules below). */
.ls-header-nav .ls-header-link svg,
.ls-header-nav a svg,
.ls-header-link svg,
#left-sidebar-dynamic-header .ls-header-nav svg {
  color: var(--bb-primary-light) !important;
}
.ls-header-nav .ls-header-link:hover svg,
.ls-header-nav a:hover svg,
.ls-header-link:hover svg {
  color: #fff !important;
}
.ls-header-nav .ls-header-link.active svg,
.ls-header-nav a.active svg,
.ls-header-link.active svg {
  color: #fff !important;
}

/* Higher-specificity resting text rule — needed because useGameLogic.tsx injects
   `.ls-header-nav a { color: #8497A6 !important }` (specificity 0,1,1) which
   beats the plain `.ls-header-link { color: #fff }` rule (0,1,0) at line ~95. */
#left-sidebar-dynamic-header .ls-header-nav a.ls-header-link,
nav.ls-header-nav a.ls-header-link {
  color: #fff !important;
}

/* Header nav links - hover & active green glow override (doubled selectors for specificity) */
#left-sidebar-dynamic-header .ls-header-nav a:hover,
nav.ls-header-nav a.ls-header-link:hover {
  background: radial-gradient(ellipse at center bottom, rgba(21, 86, 171, 0.12) 0%, transparent 70%) !important;
  /* Swapped per client request: TEXT is blue on hover (was white). Needs to live on this
     higher-specificity selector to beat the JS-injected `.ls-header-nav a:hover { color: #FFFFFF }`
     from useGameLogic.tsx (~line 1110). */
  color: var(--bb-primary-light) !important;
}
#left-sidebar-dynamic-header .ls-header-nav a:hover svg,
nav.ls-header-nav a.ls-header-link:hover svg {
  /* DARK MODE hover icon = WHITE (swap with the now-blue text). */
  color: #fff !important;
}
#left-sidebar-dynamic-header .ls-header-nav a.active,
nav.ls-header-nav a.ls-header-link.active {
  background: radial-gradient(ellipse at center bottom, rgba(21, 86, 171, 0.15) 0%, transparent 70%) !important;
  /* Swapped per client request: TEXT is blue on active (was white). Needs to live on this
     higher-specificity selector to beat the JS-injected `.ls-header-nav a.active { color: #FFFFFF }`
     from useGameLogic.tsx (~line 1118). */
  color: var(--bb-primary-light) !important;
}
#left-sidebar-dynamic-header .ls-header-nav a.active::after,
nav.ls-header-nav a.ls-header-link.active::after {
  background: linear-gradient(90deg, transparent 0%, var(--bb-primary-light) 30%, var(--bb-primary-light) 70%, transparent 100%) !important;
}
#left-sidebar-dynamic-header .ls-header-nav a.active svg,
nav.ls-header-nav a.ls-header-link.active svg {
  /* DARK MODE active icon = WHITE (swap with the now-blue text). */
  color: #fff !important;
}

/* Mobile drawer nav links — EXACT mirror of the desktop top menu (.ls-header-nav a.ls-header-link).
   The drawer anchors are CLONES of the desktop nav (same ids + .ls-header-link class) injected
   inside #left-sidebar-nav, so the desktop's nav-scoped rules never reach them. These #id-scoped
   rules reproduce the desktop scheme 1:1 so the drawer looks identical:
   DARK → resting text WHITE / icon BLUE / weight 700; hover+active SWAP to text BLUE / icon WHITE. */
#left-sidebar-nav .ls-mobile-drawer-nav a,
aside#left-sidebar-nav .ls-mobile-drawer-nav a {
  color: #fff !important;
  font-weight: 700 !important;
}
#left-sidebar-nav .ls-mobile-drawer-nav a svg,
aside#left-sidebar-nav .ls-mobile-drawer-nav a svg {
  color: var(--bb-primary-light) !important;
}
#left-sidebar-nav .ls-mobile-drawer-nav a:hover,
aside#left-sidebar-nav .ls-mobile-drawer-nav a:hover {
  color: var(--bb-primary-light) !important;
  background: radial-gradient(ellipse at center bottom, rgba(21, 86, 171, 0.12) 0%, transparent 70%) !important;
}
#left-sidebar-nav .ls-mobile-drawer-nav a:hover svg,
aside#left-sidebar-nav .ls-mobile-drawer-nav a:hover svg {
  color: #fff !important;
}
#left-sidebar-nav .ls-mobile-drawer-nav a.active,
aside#left-sidebar-nav .ls-mobile-drawer-nav a.active {
  color: var(--bb-primary-light) !important;
  font-weight: 700 !important;
  background: radial-gradient(ellipse at center bottom, rgba(21, 86, 171, 0.15) 0%, transparent 70%) !important;
}
#left-sidebar-nav .ls-mobile-drawer-nav a.active::after,
aside#left-sidebar-nav .ls-mobile-drawer-nav a.active::after {
  background: linear-gradient(90deg, transparent 0%, var(--bb-primary-light) 30%, var(--bb-primary-light) 70%, transparent 100%) !important;
}
#left-sidebar-nav .ls-mobile-drawer-nav a.active svg,
aside#left-sidebar-nav .ls-mobile-drawer-nav a.active svg {
  color: #fff !important;
}

/* Promo icon green override */
#left-sidebar-dynamic-header .ls-header-promo-icon,
.ls-header-promo-icon {
  color: var(--bb-primary-light) !important;
}
#left-sidebar-dynamic-header .ls-header-promo-icon .ls-promo-icon-wrap,
.ls-header-promo-icon .ls-promo-icon-wrap,
#left-sidebar-dynamic-header .ls-header-promo-icon .ls-promo-icon-wrap svg,
.ls-header-promo-icon .ls-promo-icon-wrap svg,
#left-sidebar-dynamic-header .ls-header-promo-icon .ls-promo-icon-wrap svg path,
.ls-header-promo-icon .ls-promo-icon-wrap svg path {
  color: #B0E0E6 !important;
  fill: #B0E0E6 !important;
}

/* Mobile promo circle green overrides — max specificity to beat JS-injected !important styles */
html body .ls-mobile-promo-btn .ls-promo-circle,
html body div.ls-mobile-promo-btn .ls-promo-circle,
html body .ls-mobile-promo-btn div.ls-promo-circle {
  border: 3px solid var(--bb-primary-light) !important;
  color: var(--bb-primary-light) !important;
}
html body .ls-mobile-promo-btn .ls-promo-icon-wrap,
html body div.ls-mobile-promo-btn .ls-promo-icon-wrap,
html body .ls-mobile-promo-btn div.ls-promo-icon-wrap,
html body .ls-mobile-promo-btn .ls-promo-icon-wrap svg,
html body div.ls-mobile-promo-btn .ls-promo-icon-wrap svg,
html body .ls-mobile-promo-btn div.ls-promo-icon-wrap svg,
html body .ls-mobile-promo-btn .ls-promo-icon-wrap svg path,
html body div.ls-mobile-promo-btn .ls-promo-icon-wrap svg path,
html body .ls-mobile-promo-btn div.ls-promo-icon-wrap svg path {
  color: #B0E0E6 !important;
  fill: #B0E0E6 !important;
}

/* Arrow button with inline green background (#00C082) */
html body .MuiIconButton-root.MuiIconButton-sizeSmall {
  /* color: var(--bb-text-muted) !important; */
  background-color: var(--bb-primary) !important;
}
html body .MuiIconButton-root.MuiIconButton-sizeSmall:hover {
  background-color: var(--bb-primary-dark) !important;
}
/* Search icon button — override the above for buttons inside InputAdornment */
html body .MuiInputAdornment-root .MuiIconButton-root.MuiIconButton-sizeSmall {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
html body .MuiInputAdornment-root .MuiIconButton-root.MuiIconButton-sizeSmall:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
}
html body.ls-light-theme .MuiInputAdornment-root .MuiIconButton-root.MuiIconButton-sizeSmall {
  background-color: rgba(0, 0, 0, 0.03) !important;
}
html body.ls-light-theme .MuiInputAdornment-root .MuiIconButton-root.MuiIconButton-sizeSmall:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* ===== FORCE ALL SVG/ICON COLORS TO BLUE ===== */
#left-sidebar-nav svg,
#left-sidebar-nav .ls-nav-item svg,
#left-sidebar-nav .ls-nav-section-header svg,
#left-sidebar-nav .ls-quick-links svg,
#left-sidebar-nav .ls-casino-items svg,
#left-sidebar-nav .ls-live-casino-items svg,
#left-sidebar-nav .ls-mobile-drawer-nav svg,
#left-sidebar-nav .ls-nav-bottom-section svg,
.ls-nav-item svg,
.ls-nav-section-header svg,
.ls-nav-section-header span svg {
  color: var(--bb-primary-light) !important;
  fill: currentColor !important;
}
#left-sidebar-nav .ls-nav-item:hover svg,
.ls-nav-item:hover svg {
  color: #fff !important;
}
#left-sidebar-nav .ls-nav-item.active svg,
.ls-nav-item.active svg {
  color: var(--bb-primary-light) !important;
}
.ls-nav-section-header.active svg,
.ls-nav-section-header.active span svg {
  color: var(--bb-primary-light) !important;
}
/* Section header chevron arrow */
.ls-nav-section-header span:last-child svg {
  fill: var(--bb-text-muted) !important;
}

/* ===== LEFT-SIDEBAR NAV ITEMS — match the desktop top menu (.ls-header-link) =====
   Applies the EXACT header scheme to every sidebar menu row: .ls-nav-item (Ofertas / Soporte),
   the Casino / Live section headers .ls-nav-section-header, and the .ls-nav-primary sub-items.
   DARK → resting text WHITE / icon BLUE / weight 700; hover + active SWAP to text BLUE / icon WHITE.
   The `html body` prefix lifts specificity above the runtime-injected
   `#left-sidebar-nav .ls-nav-item { font-weight: 550 }` rule from useGameLogic.tsx. */
html body #left-sidebar-nav .ls-nav-item,
html body #left-sidebar-nav .ls-nav-section-header,
html body #left-sidebar-nav .ls-nav-primary {
  color: #fff !important;
  font-weight: 600 !important;
  font-style: italic;
}
html body #left-sidebar-nav .ls-nav-item > span,
html body #left-sidebar-nav .ls-nav-section-header > span,
html body #left-sidebar-nav .ls-nav-primary > span {
  color: inherit !important;
}
html body #left-sidebar-nav .ls-nav-item svg,
html body #left-sidebar-nav .ls-nav-section-header svg,
html body #left-sidebar-nav .ls-nav-section-header span:last-child svg,
html body #left-sidebar-nav .ls-nav-primary svg {
  color: var(--bb-primary-light) !important;
  fill: currentColor !important;
}
html body #left-sidebar-nav .ls-nav-item:hover,
html body #left-sidebar-nav .ls-nav-section-header:hover,
html body #left-sidebar-nav .ls-nav-primary:hover {
  color: var(--bb-primary-light) !important;
}
html body #left-sidebar-nav .ls-nav-item:hover svg,
html body #left-sidebar-nav .ls-nav-section-header:hover svg,
html body #left-sidebar-nav .ls-nav-section-header:hover span:last-child svg,
html body #left-sidebar-nav .ls-nav-primary:hover svg {
  color: #fff !important;
}
html body #left-sidebar-nav .ls-nav-item.active,
html body #left-sidebar-nav .ls-nav-item.active span,
html body #left-sidebar-nav .ls-nav-section-header.active,
html body #left-sidebar-nav .ls-nav-section-header.active span,
html body #left-sidebar-nav .ls-nav-primary.active,
html body #left-sidebar-nav .ls-nav-primary.active span {
  color: var(--bb-primary-light) !important;
  font-weight: 600 !important;
  font-style: italic !important;
}
html body #left-sidebar-nav .ls-nav-item.active svg,
html body #left-sidebar-nav .ls-nav-section-header.active svg,
html body #left-sidebar-nav .ls-nav-section-header.active span:last-child svg,
html body #left-sidebar-nav .ls-nav-primary.active svg {
  color: #fff !important;
}

/* ===== TOP WINNINGS GREEN OVERRIDES ===== */
/* Trophy icon + title */
html body .ls-top-winnings .MuiStack-root svg,
html body .ls-top-winnings .MuiStack-root .MuiBox-root {
  color: var(--bb-primary-light) !important;
}
/* Winner cards - background gradient & border */
html body .ls-winner-card,
html body .MuiCard-root.ls-winner-card {
  background: linear-gradient(to top, rgba(21, 86, 171, 0.25) 0%, rgba(21, 86, 171, 0.12) 40%, #000000 100%) !important;
  border: 1.5px solid rgba(21, 86, 171, 0.7) !important;
}
/* Winner thumb border */
html body .ls-winner-card .ls-winner-thumb,
html body .ls-winner-card .ls-winner-thumb.MuiBox-root {
  border: 1.5px solid rgba(21, 86, 171, 0.7) !important;
}
/* Winner card text — white in dark theme (was --bb-primary-light, which read bluish) */
html body .ls-winner-card .MuiTypography-caption[style*="color"],
html body .topwinnings-scroll-container .MuiTypography-caption {
  color: #FFFFFF !important;
}

/* Light theme top winnings */
html body.ls-light-theme .ls-top-winnings .MuiStack-root svg,
html body.ls-light-theme .ls-top-winnings .MuiStack-root .MuiBox-root {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-winner-card,
html body.ls-light-theme .MuiCard-root.ls-winner-card {
  background: linear-gradient(to top, rgba(21, 86, 171, 0.15) 0%, rgba(21, 86, 171, 0.06) 40%, #FFFFFF 100%) !important;
  border: 1.5px solid rgba(21, 86, 171, 0.4) !important;
}
html body.ls-light-theme .ls-winner-card .ls-winner-thumb,
html body.ls-light-theme .ls-winner-card .ls-winner-thumb.MuiBox-root {
  border: 1.5px solid rgba(21, 86, 171, 0.4) !important;
}
html body.ls-light-theme .ls-winner-card .MuiTypography-caption[style*="color"],
html body.ls-light-theme .topwinnings-scroll-container .MuiTypography-caption {
  color: var(--bb-primary) !important;
}

/* ===== BONUS COMPONENT GREEN OVERRIDES ===== */
.bonus-component-wrapper .MuiTab-root.Mui-selected {
  color: var(--bb-primary-light) !important;
  border-color: var(--bb-primary-light) !important;
}
.bonus-component-wrapper .MuiTabs-indicator {
  background-color: var(--bb-primary) !important;
}
.bonus-component-wrapper .bonus-tab-content .MuiLinearProgress-bar {
  background-color: var(--bb-primary) !important;
}

/* ===== LIGHT THEME GREEN-TO-BLUE OVERRIDES ===== */
/* Override all #1db964 / rgba(29,185,100) greens in light theme with blue */

/* Header nav bottom border */
html body.ls-light-theme #left-sidebar-dynamic-header {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
}

/* Header nav hover & active */
html body.ls-light-theme .ls-header-nav a:hover {
  background: radial-gradient(ellipse at center bottom, rgba(21, 86, 171, 0.08) 0%, transparent 70%) !important;
}
html body.ls-light-theme .ls-header-nav a:hover svg {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-header-nav a.active {
  background: radial-gradient(ellipse at center bottom, rgba(21, 86, 171, 0.1) 0%, transparent 70%) !important;
}
html body.ls-light-theme .ls-header-nav a.active svg {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-header-nav a.active::after {
  background: var(--bb-primary) !important;
}

/* Promo icon */
html body.ls-light-theme .ls-header-promo-icon,
html body.ls-light-theme .ls-header-promo-icon svg {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-promo-circle {
  border-color: var(--bb-primary) !important;
}

/* Register button — blue filled in light theme */
html body.ls-light-theme .custom-register-button {
  background: var(--bb-primary) !important;
  background-color: var(--bb-primary) !important;
  color: #fff !important;
}
html body.ls-light-theme #custom-dynamic-page .custom-register-button {
  background: var(--bb-primary) !important;
  background-color: var(--bb-primary) !important;
  color: #fff !important;
}

/* Login button — keep dark theme look in light theme */
html body.ls-light-theme .custom-header-button {
  background: rgba(21, 86, 171, 0.08) !important;
  color: var(--bb-primary-light) !important;
  border: 1.5px solid var(--bb-primary) !important;
  border-color: var(--bb-primary) !important;
}
html body.ls-light-theme #left-sidebar-dynamic-header .custom-header-button {
  background: rgba(21, 86, 171, 0.08) !important;
  color: var(--bb-primary-light) !important;
}
html body.ls-light-theme .custom-header-button:hover {
  background: rgba(21, 86, 171, 0.2) !important;
  border-color: var(--bb-primary-light) !important;
  color: #fff !important;
}
html body.ls-light-theme #left-sidebar-dynamic-header .custom-header-button svg {
  fill: var(--bb-primary-light) !important;
  color: var(--bb-primary-light) !important;
}

/* Nav items active */
html body.ls-light-theme .ls-nav-item.active,
html body.ls-light-theme .ls-nav-item.active span {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-nav-item.active svg {
  color: var(--bb-primary) !important;
}

/* Nav section headers */
html body.ls-light-theme .ls-nav-section-header.active,
html body.ls-light-theme .ls-nav-section-header.active span {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-nav-section-header.active svg,
html body.ls-light-theme .ls-nav-primary.active span,
html body.ls-light-theme .ls-nav-primary.active svg {
  color: var(--bb-primary) !important;
}

/* Footer links hover */
html body.ls-light-theme #left-sidebar-dynamic-footer a:hover,
html body.ls-light-theme #left-sidebar-dynamic-footer a:hover b {
  color: var(--bb-primary-light) !important;
}

/* Mobile drawer nav — EXACT mirror of the desktop light-theme top menu.
   LIGHT → resting text #0F1922 / icon BLUE / weight 700; hover+active SWAP to text BLUE / icon #0F1922. */
html body.ls-light-theme #left-sidebar-nav .ls-mobile-drawer-nav a,
html body.ls-light-theme aside#left-sidebar-nav .ls-mobile-drawer-nav a {
  color: #0F1922 !important;
  font-weight: 700 !important;
}
html body.ls-light-theme #left-sidebar-nav .ls-mobile-drawer-nav a svg,
html body.ls-light-theme aside#left-sidebar-nav .ls-mobile-drawer-nav a svg {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme #left-sidebar-nav .ls-mobile-drawer-nav a:hover,
html body.ls-light-theme aside#left-sidebar-nav .ls-mobile-drawer-nav a:hover {
  color: var(--bb-primary) !important;
  background: radial-gradient(ellipse at center bottom, rgba(21, 86, 171, 0.08) 0%, transparent 70%) !important;
}
html body.ls-light-theme #left-sidebar-nav .ls-mobile-drawer-nav a:hover svg,
html body.ls-light-theme aside#left-sidebar-nav .ls-mobile-drawer-nav a:hover svg {
  color: #0F1922 !important;
}
html body.ls-light-theme #left-sidebar-nav .ls-mobile-drawer-nav a.active,
html body.ls-light-theme aside#left-sidebar-nav .ls-mobile-drawer-nav a.active {
  color: var(--bb-primary) !important;
  font-weight: 700 !important;
  background: radial-gradient(ellipse at center bottom, rgba(21, 86, 171, 0.1) 0%, transparent 70%) !important;
}
html body.ls-light-theme #left-sidebar-nav .ls-mobile-drawer-nav a.active svg,
html body.ls-light-theme aside#left-sidebar-nav .ls-mobile-drawer-nav a.active svg {
  color: #0F1922 !important;
}
html body.ls-light-theme #left-sidebar-nav .ls-mobile-drawer-nav a.active::after,
html body.ls-light-theme aside#left-sidebar-nav .ls-mobile-drawer-nav a.active::after {
  background: var(--bb-primary) !important;
}

/* Mobile promo circle */
html body.ls-light-theme .ls-mobile-promo-btn .ls-promo-circle {
  border-color: var(--bb-primary) !important;
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-mobile-promo-btn .ls-promo-icon-wrap svg {
  color: var(--bb-primary) !important;
}

/* Auth dialog in light theme */
html body.ls-light-theme .ls-auth-dialog .MuiOutlinedInput-root:hover fieldset {
  border-color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiInputLabel-root.Mui-focused {
  color: var(--bb-primary) !important;
}
/* Language dropdown text — black in light theme */
html body.ls-light-theme .ls-nav-bottom-section .MuiSelect-select,
html body.ls-light-theme .ls-nav-bottom-section .MuiSelect-select span,
html body.ls-light-theme .ls-nav-bottom-section .MuiOutlinedInput-root {
  color: #0F1922 !important;
}

/* (auth dialog overrides consolidated in the dialog section below) */

/* Bonus component light theme */
html body.ls-light-theme .bonus-left-sidebar-theme .MuiTab-root.Mui-selected {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .bonus-left-sidebar-theme .MuiTabs-indicator {
  background-color: var(--bb-primary) !important;
}
html body.ls-light-theme .bonus-left-sidebar-theme div[style*="background-color: #00C082"],
html body.ls-light-theme .bonus-left-sidebar-theme div[style*="background:#00C082"] {
  background-color: var(--bb-primary) !important;
}
html body.ls-light-theme .bonus-left-sidebar-theme button[style*="background-color: #00C082"],
html body.ls-light-theme .bonus-left-sidebar-theme button[style*="background-color:#00C082"] {
  background-color: var(--bb-primary) !important;
}

/* Slider title */
html body.ls-light-theme .ls-slider-title span svg {
  color: var(--bb-primary) !important;
}

/* Generic: any remaining green text/icon in light theme sidebar */
html body.ls-light-theme #left-sidebar-nav .ls-nav-item:hover,
html body.ls-light-theme .ls-nav-item:hover {
  color: var(--bb-primary) !important;
  background: rgba(21, 86, 171, 0.08) !important;
}
html body.ls-light-theme #left-sidebar-nav .ls-nav-item:hover svg,
html body.ls-light-theme .ls-nav-item:hover svg {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-nav-section-header:hover {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-nav-section-header:hover svg {
  color: var(--bb-primary) !important;
}

/* ===== LIGHT THEME: SEARCH BAR — kill MUI hover border change ===== */
html body.ls-light-theme .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(0, 0, 0, 0.01) !important;
  border-width: 1px !important;
}
html body.ls-light-theme .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: rgba(0, 0, 0, 0.01) !important;
  border-width: 1px !important;
}

/* ===== LIGHT THEME: HISTORY & BONUS TABS/SECTIONS ===== */

/* Selected tabs — override #1db964 from JS with matching+ specificity */
html body.ls-light-theme .MuiTab-root.Mui-selected,
html body.ls-light-theme .bonus-left-sidebar-theme .MuiTab-root.Mui-selected,
html body.ls-light-theme #custom-dynamic-page .MuiTab-root.Mui-selected,
html body.ls-light-theme #left-sidebar-dynamic-page .MuiTab-root.Mui-selected,
html body.ls-light-theme .bonus-left-sidebar-theme .MuiButton-root.Mui-selected,
html body.ls-light-theme .bonus-left-sidebar-theme .MuiButton-root[class*="active"] {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .MuiTabs-indicator,
html body.ls-light-theme .bonus-left-sidebar-theme .MuiTabs-indicator,
html body.ls-light-theme #custom-dynamic-page .MuiTabs-indicator,
html body.ls-light-theme #left-sidebar-dynamic-page .MuiTabs-indicator {
  background-color: var(--bb-primary) !important;
}
/* Bonus progress bar + buttons */
html body.ls-light-theme .bonus-left-sidebar-theme .MuiLinearProgress-bar {
  background-color: var(--bb-primary) !important;
}
html body.ls-light-theme .bonus-left-sidebar-theme .card .learn-more-btn,
html body.ls-light-theme #custom-dynamic-page .card .learn-more-btn {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme #custom-dynamic-page .custom-register-button {
  background-color: var(--bb-primary) !important;
}
html body.ls-light-theme .bonus-left-sidebar-theme div[style*="background-color: #00C082"],
html body.ls-light-theme .bonus-left-sidebar-theme div[style*="background:#00C082"] {
  background-color: var(--bb-primary) !important;
}
html body.ls-light-theme .bonus-left-sidebar-theme button[style*="background-color: #00C082"],
html body.ls-light-theme .bonus-left-sidebar-theme button[style*="background-color:#00C082"] {
  background-color: var(--bb-primary) !important;
}
/* History tabs */
html body.ls-light-theme .history-main-page .MuiTab-root.Mui-selected {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .history-main-page .MuiTabs-indicator {
  background-color: var(--bb-primary) !important;
}
/* Top winnings icon in light theme */
html body.ls-light-theme .ls-top-winnings svg {
  color: var(--bb-primary) !important;
}
/* Nav primary svg */
html body.ls-light-theme .ls-nav-primary svg {
  color: var(--bb-primary) !important;
}
/* Nav section header svg */
html body.ls-light-theme .ls-nav-section-header svg {
  color: var(--bb-primary) !important;
}

/* ===== LEFT-SIDEBAR NAV ITEMS — LIGHT theme, mirror desktop top menu =====
   resting text #0F1922 / icon BLUE / weight 700; hover + active SWAP to text BLUE / icon #0F1922.
   Placed after all earlier light sidebar rules so equal-specificity rules lose on source order,
   and the #id outranks the runtime-injected green (#1db964) icon rules from useGameLogic.tsx. */
html body.ls-light-theme #left-sidebar-nav .ls-nav-item,
html body.ls-light-theme #left-sidebar-nav .ls-nav-section-header,
html body.ls-light-theme #left-sidebar-nav .ls-nav-primary {
  color: #0F1922 !important;
  font-weight: 700 !important;
}
html body.ls-light-theme #left-sidebar-nav .ls-nav-item > span,
html body.ls-light-theme #left-sidebar-nav .ls-nav-section-header > span,
html body.ls-light-theme #left-sidebar-nav .ls-nav-primary > span {
  color: inherit !important;
}
html body.ls-light-theme #left-sidebar-nav .ls-nav-item svg,
html body.ls-light-theme #left-sidebar-nav .ls-nav-section-header svg,
html body.ls-light-theme #left-sidebar-nav .ls-nav-section-header span:last-child svg,
html body.ls-light-theme #left-sidebar-nav .ls-nav-primary svg {
  color: var(--bb-primary) !important;
  fill: currentColor !important;
}
html body.ls-light-theme #left-sidebar-nav .ls-nav-item:hover,
html body.ls-light-theme #left-sidebar-nav .ls-nav-section-header:hover,
html body.ls-light-theme #left-sidebar-nav .ls-nav-primary:hover {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme #left-sidebar-nav .ls-nav-item:hover svg,
html body.ls-light-theme #left-sidebar-nav .ls-nav-section-header:hover svg,
html body.ls-light-theme #left-sidebar-nav .ls-nav-section-header:hover span:last-child svg,
html body.ls-light-theme #left-sidebar-nav .ls-nav-primary:hover svg {
  color: #0F1922 !important;
}
html body.ls-light-theme #left-sidebar-nav .ls-nav-item.active,
html body.ls-light-theme #left-sidebar-nav .ls-nav-item.active span,
html body.ls-light-theme #left-sidebar-nav .ls-nav-section-header.active,
html body.ls-light-theme #left-sidebar-nav .ls-nav-section-header.active span,
html body.ls-light-theme #left-sidebar-nav .ls-nav-primary.active,
html body.ls-light-theme #left-sidebar-nav .ls-nav-primary.active span {
  color: var(--bb-primary) !important;
  font-weight: 700 !important;
}
html body.ls-light-theme #left-sidebar-nav .ls-nav-item.active svg,
html body.ls-light-theme #left-sidebar-nav .ls-nav-section-header.active svg,
html body.ls-light-theme #left-sidebar-nav .ls-nav-section-header.active span:last-child svg,
html body.ls-light-theme #left-sidebar-nav .ls-nav-primary.active svg {
  color: #0F1922 !important;
}

/* History page light theme */
html body.ls-light-theme .history-main-page {
  color: #1c1c1e !important;
}
html body.ls-light-theme .history-main-page .MuiPaper-root,
html body.ls-light-theme .history-main-page .MuiTableContainer-root {
  background: #fff !important;
  background-color: #fff !important;
}
html body.ls-light-theme .history-main-page .MuiTableCell-head,
html body.ls-light-theme .history-main-page .MuiTableHead-root .MuiTableRow-root {
  background: #f5f7fa !important;
}
html body.ls-light-theme .history-main-page .MuiTableCell-head {
  color: #333 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  border-right: 0px solid #e0e0e0 !important;
}
html body.ls-light-theme .history-main-page .MuiTableCell-head p {
  color: #333 !important;
}
html body.ls-light-theme .history-main-page .MuiTableCell-body {
  color: #1c1c1e !important;
  border-bottom: 1px solid #e8e8e8 !important;
  border-right: 0px solid #e8e8e8 !important;
}

.history-details-table {
  border: 0px solid var(--bb-border) !important;
  border-radius: 8px !important;
}
html body.ls-light-theme .history-main-page .MuiTableBody-root {
  background: #fff !important;
}
html body.ls-light-theme .history-main-page .MuiTableBody-root .MuiTableRow-root:hover {
  background: rgba(21, 86, 171, 0.05) !important;
}
html body.ls-light-theme .history-main-page .MuiTableCell-body div,
html body.ls-light-theme .history-main-page .MuiTableCell-body div[style*="color: black"],
html body.ls-light-theme .history-main-page .MuiTableCell-body div[style*="color: white"] {
  color: #1c1c1e !important;
}
html body.ls-light-theme .history-main-page .MuiTableCell-head svg {
  color: #666 !important;
}
html body.ls-light-theme .history-main-page .MuiButton-root,
html body.ls-light-theme .history-main-page .history-ff-btn {
  color: var(--bb-primary) !important;
  border-color: var(--bb-primary) !important;
}
html body.ls-light-theme .history-main-page .MuiButton-containedPrimary {
  background-color: var(--bb-primary) !important;
  color: #fff !important;
}
html li body.ls-light-theme .history-main-page .MuiPaginationItem-root.Mui-selected {
  background-color: var(--bb-primary) !important;
  color: #fff !important;
}

/* Bonus component light theme */
html body.ls-light-theme .bonus-component-wrapper {
  color: #1c1c1e !important;
}
html body.ls-light-theme .bonus-component-wrapper .MuiPaper-root {
  background: #fff !important;
  background-color: #fff !important;
}
html body.ls-light-theme .bonus-component-wrapper .MuiTab-root {
  color: #666 !important;
}
html body.ls-light-theme .bonus-component-wrapper .MuiTab-root.Mui-selected {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .bonus-component-wrapper .MuiTabs-indicator {
  background-color: var(--bb-primary) !important;
}
html body.ls-light-theme .bonus-component-wrapper .bonus-tab-content .MuiListItemText-primary {
  color: #1c1c1e !important;
}
html body.ls-light-theme .bonus-component-wrapper .bonus-tab-content .MuiListItemText-secondary {
  color: #666 !important;
}
html body.ls-light-theme .bonus-component-wrapper .bonus-tab-content .MuiListItemIcon-root {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .bonus-component-wrapper .bonus-tab-content .MuiIconButton-root:hover {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .bonus-component-wrapper .bonus-tab-content .MuiLinearProgress-bar {
  background-color: var(--bb-primary) !important;
}
html body.ls-light-theme .bonus-component-wrapper .bonus-tab-content .MuiButton-containedPrimary {
  background-color: var(--bb-primary) !important;
  color: #fff !important;
}

/* Bonus styled-components green overrides (both themes) */
html body .bonus-component-wrapper [class*="StyledTab"][class*="active"],
html body .bonus-component-wrapper button[class*="active"] {
  color: var(--bb-primary) !important;
  border-color: var(--bb-primary) !important;
}

/* MisDatos / Profile section light theme */
html body.ls-light-theme .MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: var(--bb-primary) !important;
}
html body.ls-light-theme .MuiInputLabel-root.Mui-focused {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .MuiButton-containedPrimary {
  background-color: var(--bb-primary) !important;
  color: #fff !important;
}
html body.ls-light-theme .MuiButton-containedPrimary:hover {
  background-color: var(--bb-primary-dark) !important;
}
html body.ls-light-theme .MuiCheckbox-root.Mui-checked {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .MuiRadio-root.Mui-checked {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .MuiSwitch-track {
  background-color: var(--bb-primary) !important;
}

/* ===== FORCE DIALOGS/MODALS TO STAY DARK THEME DURING LIGHT THEME ===== */
/* Undo all light theme overrides on dialogs — keep them as dark theme */
html body.ls-light-theme .MuiDialog-paper {
  background-color: var(--bb-bg-mid) !important;
  background: linear-gradient(180deg, var(--bb-bg-mid) 0%, var(--bb-bg-dark) 100%) !important;
  background-image: linear-gradient(180deg, var(--bb-bg-mid) 0%, var(--bb-bg-dark) 100%) !important;
  color: var(--bb-text) !important;
  border: 1px solid var(--bb-border) !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
}
html body.ls-light-theme .MuiDialog-paper[style] {
  --Paper-shadow: 0 0 20px rgba(0,0,0,0.5);
  --Paper-overlay: none;
}
html body.ls-light-theme .MuiDialog-paper * {
  color: var(--bb-text) !important;
}
html body.ls-light-theme .MuiDialogTitle-root {
  color: var(--bb-text) !important;
}
html body.ls-light-theme .MuiDialogContent-root {
  color: var(--bb-text) !important;
  background-color: transparent !important;
}
html body.ls-light-theme .MuiDialogActions-root {
  background-color: transparent !important;
}
html body.ls-light-theme .MuiDialog-paper .MuiBox-root {
  background-color: transparent !important;
}
html body.ls-light-theme .MuiDialog-paper [style*="background: #"],
html body.ls-light-theme .MuiDialog-paper [style*="background:#"],
html body.ls-light-theme .MuiDialog-paper [style*="background-color: #0"],
html body.ls-light-theme .MuiDialog-paper [style*="background-color:#0"],
html body.ls-light-theme .MuiDialog-paper [style*="background-color: #1"],
html body.ls-light-theme .MuiDialog-paper [style*="background-color:#1"],
html body.ls-light-theme .MuiDialog-paper [style*="background-color: #2"],
html body.ls-light-theme .MuiDialog-paper [style*="background-color:#2"],
html body.ls-light-theme .MuiDialog-paper [style*="background-color: #3"],
html body.ls-light-theme .MuiDialog-paper [style*="background-color:#3"] {
  background-color: var(--bb-bg-card) !important;
  background: var(--bb-bg-card) !important;
}
html body.ls-light-theme .MuiDialog-paper .MuiOutlinedInput-root {
  background-color: rgba(21, 86, 171, 0.06) !important;
  color: var(--bb-text) !important;
}
html body.ls-light-theme .MuiDialog-paper .MuiOutlinedInput-notchedOutline {
  border-color: var(--bb-border) !important;
}
html body.ls-light-theme .MuiDialog-paper .MuiInputLabel-root {
  color: var(--bb-text-muted) !important;
}
html body.ls-light-theme .MuiDialog-paper .MuiIconButton-root svg {
  color: var(--bb-text-muted) !important;
}
html body.ls-light-theme .MuiDialog-paper .MuiButton-contained {
  color: #fff !important;
  background: var(--bb-primary) !important;
  background-color: var(--bb-primary) !important;
}
html body.ls-light-theme .MuiDialog-paper .MuiButton-outlined {
  color: var(--bb-text) !important;
  border-color: var(--bb-border) !important;
}
html body.ls-light-theme .MuiDialog-root .MuiBackdrop-root {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Auth dialog specific — keep dark */
html body.ls-light-theme .ls-auth-dialog .MuiPaper-root {
  background-color: var(--bb-bg-mid) !important;
  background: linear-gradient(180deg, var(--bb-bg-mid) 0%, var(--bb-bg-dark) 100%) !important;
  color: var(--bb-text) !important;
}
html body.ls-light-theme .ls-auth-dialog .auth-dialog-header {
  background: var(--bb-bg-card) !important;
}
html body.ls-light-theme .ls-auth-dialog .auth-dialog-header svg {
  color: var(--bb-text-muted) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiContainer-root,
html body.ls-light-theme .ls-auth-dialog .MuiDialogContent-root {
  background-color: transparent !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiDialogTitle-root {
  color: var(--bb-text) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiDialogTitle-root svg {
  color: var(--bb-text-muted) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiDialogActions-root {
  background-color: transparent !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiTypography-root {
  color: var(--bb-text) !important;
}
html body.ls-light-theme .ls-auth-dialog a {
  color: var(--bb-primary-light) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiOutlinedInput-root {
  background-color: rgba(21, 86, 171, 0.06) !important;
  color: var(--bb-text) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiOutlinedInput-root input {
  color: var(--bb-text) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiOutlinedInput-root fieldset {
  border-color: var(--bb-border) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiOutlinedInput-root:hover fieldset {
  border-color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiInputLabel-root {
  color: var(--bb-text-muted) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiInputLabel-root.Mui-focused {
  color: var(--bb-primary-light) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiIconButton-root {
  color: var(--bb-text-muted) !important;
}
html body.ls-light-theme .ls-auth-dialog .auth-dialog-header .MuiIconButton-root {
  color: var(--bb-text-muted) !important;
}
html body.ls-light-theme .ls-auth-dialog .rsd-action-button {
  background: var(--bb-primary) !important;
  background-color: var(--bb-primary) !important;
  color: #fff !important;
}
html body.ls-light-theme .ls-auth-dialog .rsd-action-button:hover {
  background: var(--bb-primary-dark) !important;
  background-color: var(--bb-primary-dark) !important;
}
html body.ls-light-theme .ls-auth-dialog span[style*="cursor: pointer"],
html body.ls-light-theme .ls-auth-dialog .MuiTypography-root[role="button"] {
  color: var(--bb-primary-light) !important;
}
html body.ls-light-theme .ls-auth-dialog .react-international-phone-input-container {
  background: rgba(21, 86, 171, 0.06) !important;
}
html body.ls-light-theme .ls-auth-dialog .react-international-phone-input-container .react-international-phone-input {
  background: rgba(21, 86, 171, 0.06) !important;
  background-color: rgba(21, 86, 171, 0.06) !important;
  color: var(--bb-text) !important;
  border-color: var(--bb-border) !important;
}
html body.ls-light-theme .ls-auth-dialog .react-international-phone-country-selector-button {
  background: rgba(21, 86, 171, 0.06) !important;
  background-color: rgba(21, 86, 171, 0.06) !important;
  border-color: var(--bb-border) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiSelect-select {
  color: var(--bb-text) !important;
  background: rgba(21, 86, 171, 0.06) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiSelect-icon {
  color: var(--bb-text-muted) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiOutlinedInput-root input[style*="text-align: center"] {
  color: var(--bb-text) !important;
}
html body.ls-light-theme .ls-auth-dialog [style*="border-radius: 20px"] {
  background-color: rgba(21, 86, 171, 0.08) !important;
  border-color: var(--bb-border) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiCheckbox-root {
  color: var(--bb-text-muted) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiCheckbox-root.Mui-checked {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-auth-dialog .picker-container {
  background: rgba(21, 86, 171, 0.06) !important;
}
html body.ls-light-theme .ls-auth-dialog .MuiAlert-root .MuiTypography-root {
  color: #fff !important;
}

/* Profile drawer — let it stay light in light theme, no override */

/* Age verification dialog — keep dark */
html body.ls-light-theme .age-verification-dialog .MuiDialog-paper {
  background: linear-gradient(180deg, var(--bb-bg-mid) 0%, var(--bb-bg-dark) 100%) !important;
  border: 1px solid var(--bb-border) !important;
}

/* Slideshow number (game carousel) styling moved to component sx in
   src/components/DynamicGameCarouselComponent.tsx. Class renamed to
   .bb-carousel-slide-num so cached older versions of this stylesheet
   (which had a 15% opacity backfill on .slideshow-number) cannot apply. */

/* ===== LIGHT THEME: STATIC CONTENT (T&C / policy pages) — force <strong> to black ===== */
html body.ls-light-theme .content-text strong,
html body.ls-light-theme p.content-text strong,
html body.ls-light-theme .content-text b,
html body.ls-light-theme p.content-text b {
  color: #000 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 650px) {
  .game-item-overlay {
    gap: 0.25rem !important;
    padding: 4px !important;
  }
  .game-name {
    font-size: 9px !important;
    margin-bottom: 0.15rem !important;
    line-height: 1.1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    word-break: break-word !important;
  }
  .play-button {
    font-size: 10px !important;
    padding: 3px 8px 2px !important;
    margin-bottom: 0 !important;
    min-width: 40px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
  }
}

/* ===== TYPOGRAPHY — INTER PER-COMPONENT (FINAL design spec) =====
   Placed at end-of-file so equal-specificity rules win on source order, and
   #id-scoped to beat both the `font-family: inherit !important` reset (~line 36)
   and the scattered nav font-weight rules above. Fonts are theme-independent,
   so no separate light-theme variants are needed. */

/* Header tabs — Inter Bold (700) ITALIC */
#left-sidebar-dynamic-header .ls-header-nav a.ls-header-link,
nav.ls-header-nav a.ls-header-link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
}

/* Sidebar nav items — Inter Semibold (600) ITALIC */
html body #left-sidebar-nav .ls-casino-items .ls-nav-item {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
}



html body #left-sidebar-nav .ls-live-casino-items .ls-nav-item {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

/* Section headers (e.g. Casino) — Inter Semibold (600), NORMAL (not italic) */
html body #left-sidebar-nav .ls-nav-section-header {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-style: italic;
}


/* Account / history sub-tabs — Inter Bold (700) UPPERCASE */
.MuiTab-root {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* Profile-menu list items (My Data / History / Bonus / Change Password / Logout) — bold 700.
   Color is set separately, so the Logout red rule below is unaffected. */
.MuiListItemButton-root .MuiListItemText-primary {
  font-weight: 700 !important;
}

/* Profile page field LABELS (First Name, Document, Email, KYC Identity, User ID, …) —
   UPPERCASE, Inter Semibold 600, 14px. Matches the label <p> across both card variants:
   a body1 label followed by its edit button / chip-wrapper div / arrow svg, OR a caption
   label (User ID, Username, Currency Type). The value <p> is a trailing body1 with no
   following sibling, so it's untouched. Uses structure, not the hashed mui-* classes. */
.profile-main-page .info-fields-dp p.MuiTypography-body1:has(+ button),
.profile-main-page .info-fields-dp p.MuiTypography-body1:has(+ div),
.profile-main-page .info-fields-dp p.MuiTypography-body1:has(+ svg),
.profile-main-page .info-fields-dp p.MuiTypography-caption {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
}
/* Field VALUES (NA, Brazil, 10004756, …) — keep normal weight. They are the trailing
   :last-child body1 (labels are never last-child, always followed by button/div/svg),
   so this only normalizes values and overrides the component's bold styling on the
   Personal Data card. */
.profile-main-page .info-fields-dp p.MuiTypography-body1:last-child {
  font-weight: 400 !important;
}

.profile-main-page .MuiChip-label {
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* History filter-bar LABELS (Desde / Hasta / Proveedor / Juegos) — UPPERCASE Inter 600.
   Targets the floating MuiInputLabel; font-size left untouched so the notched-outline
   legend stays aligned. */
.history-main-page .MuiFormControl-root .MuiInputLabel-root {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

#left-sidebar-dynamic-header .profile-opener {
  font-weight: 700 !important;
}

/* History content wrapper (the mui-htz4zg box, sx background rgb(255 255 255 / 15%)) — card surface.
   Identified stably as the DIRECT child of .history-main-page that contains the table
   (the only sibling that's a MuiBox and holds the table container). No hashed class needed.
   The !important beats the sx-generated background. */
.history-main-page > .MuiBox-root:has(.MuiTableContainer-root) {
  background: var(--bb-bg-dark) !important;
  border: 0px solid var(--bb-border) !important;
  border-radius: 12px !important;
  padding: 0px !important;
}

/* ===== HISTORY FILTER BAR — match dark mockup ===== */
/* Date + select inputs: dark surface, subtle border, white text, light icons */
.history-main-page .MuiOutlinedInput-root {
  background-color: var(--bb-bg-dark) !important;
  border-radius: 8px !important;
  color: var(--bb-text) !important;
}
.history-main-page .MuiOutlinedInput-notchedOutline {
  border-color: var(--bb-border) !important;
}
.history-main-page .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.history-main-page .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--bb-primary) !important;
}
.history-main-page .MuiInputBase-input,
.history-main-page .MuiSelect-select {
  color: var(--bb-text) !important;
}
.history-main-page .MuiSelect-icon,
.history-main-page .MuiOutlinedInput-root .MuiSvgIcon-root {
  color: var(--bb-text-muted) !important;
}
/* Native date picker icon — invert so it reads light on the dark input */
.history-main-page input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
  opacity: 0.7 !important;
  cursor: pointer !important;
}
/* LIGHT THEME: cancel the invert so the dark native icon shows on the white input.
   Global (covers every CustomDateField, not just history) and higher specificity than
   the dark rule above + the component's sx filter:invert(1). */
body.ls-light-theme input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none !important;
  opacity: 0.6 !important;
  cursor: pointer !important;
}

.history-main-page li .Mui-selected {
  background-color: var(--bb-primary) !important;
}

.history-main-page .MuiTabs-list .MuiButtonBase-root {
  background-color: var(--bb-bg-dark) !important;
  border-width: 0px !important;
}

.history-main-page .MuiStack-root {
  padding: 10px;
  padding-top: 30px;
  border: 1px solid var(--bb-border) !important;
  border-radius: 8px !important;
}

.history-main-page .MuiBox-root {
  padding: 0px !important;
}

/* "Mas filtros" / "Ocultar Filtros" toggle — plain text link, NOT the blue-gradient
   .MuiButton-textPrimary. Scoped + !important beats that global rule. */
.history-main-page .MuiButton-text,
.history-main-page .MuiButton-text:hover {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--bb-primary-light) !important;
}
.history-main-page .MuiButton-text .MuiTypography-root,
.history-main-page .MuiButton-text .MuiSvgIcon-root {
  color: var(--bb-primary-light) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

/* History table — uppercase muted column headers + sort icons, matching the mockup */
.history-main-page .MuiTableCell-head p,
.history-main-page .MuiTableCell-head .MuiTypography-root {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--bb-text-muted) !important;
}
.history-main-page .MuiTableCell-head .MuiSvgIcon-root {
  color: var(--bb-text-muted) !important;
}
/* Pagination — active page in brand blue */
.history-main-page .MuiPaginationItem-root.Mui-selected {
  background-color: var(--bb-primary) !important;
  color: #fff !important;
}

/* Logout (Cerrar sesión) — destructive red per spec. Scoped via the stable
   ExitToAppIcon test-id (not the hashed mui-* classes) so it survives rebuilds. */
.MuiListItemButton-root:has(svg[data-testid="ExitToAppIcon"]) .MuiListItemText-primary,
.MuiListItemButton-root:has(svg[data-testid="ExitToAppIcon"]) .MuiListItemIcon-root,
.MuiListItemButton-root:has(svg[data-testid="ExitToAppIcon"]) .MuiSvgIcon-root {
  color: var(--bb-danger) !important;
}
/* Higher-specificity + light-theme: the logout icon itself is svg[data-testid=ExitToAppIcon];
   target it directly (and its path) so a light-theme icon-color rule can't override it. */
html body svg[data-testid="ExitToAppIcon"],
html body svg[data-testid="ExitToAppIcon"] path,
html body.ls-light-theme svg[data-testid="ExitToAppIcon"],
html body.ls-light-theme svg[data-testid="ExitToAppIcon"] path {
  color: var(--bb-danger) !important;
  fill: currentColor !important;
}

.MuiInputBase-input {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
}

.MuiTypography-body1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
}

/* .slideshow-game-card, .left-sidebar-game-overlay, .MuiTypography-body1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 200 !important;
  color: var(--bb-text-muted) !important;
} */

.card .card-body h3 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

.card .card-body p {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
}

.see-more {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: var(--bb-primary) !important;
}

.learn-more-btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: var(--bb-text) !important;
  background-color: var(--bb-primary) !important;
}

[style*="rgb(138, 146, 158)"] {
  font-family: 'Inter', sans-serif;
}
#custom-dynamic-page h2 {
  font-family:'Bebas Neue', sans-serif !important;
  letter-spacing: 0.05em !important;
}

.ls-logo-card {
  border: 1px solid var(--bb-accent) !important;

}

.ls-logo-card:hover {
  box-shadow: 0 0 10px var(--bb-accent) !important;
}

#ibacc div {
  font-family: 'Inter', sans-serif;
}

.MuiList-root span {
font-family: 'Inter', sans-serif;
}

#custom-dynamic-page .MuiTypography-h1 {
  font-weight: 600 !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 25px;
  letter-spacing: 0.04em;
}

#custom-dynamic-page .MuiTypography-h6 {
font-family: 'Inter', sans-serif;
}

.MuiButton-text span {
  font-family: 'Inter', sans-serif;
}

.bonus-left-sidebar-theme .MuiGrid-root .MuiTypography-h4{
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em;
  font-size: 24px;
}

.bonus-left-sidebar-theme p{
  font-family: 'Inter', sans-serif;
}

.MuiDrawer-paper p {
    font-family: 'Inter', sans-serif;
}

.promo-container .hero-badge,.hero-title,.hero-subtitle,.hero-spin-label,p,div {
  font-family: 'Inter', sans-serif;
}

.hero-cta {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em;
  background-color: var(--bb-primary) !important;
  color: var(--bb-text) !important;
}

@media (max-width: 600px) {
  #iorig .MuiStack-root {
    min-width: calc(((100vw - 60px) / 3) + 10px) !important;
    padding-left: 3px !important;
    /* width / height: ? */
  }

  #islots .MuiStack-root {
    min-width: calc(((100vw - 60px) / 3) + 10px) !important;
    padding-left: 3px !important;
  }

  #indh-2 .MuiStack-root {
    min-width: calc(((100vw - 60px) / 3) + 10px) !important;
    padding-left: 3px !important;
    /* width / height: ? */
  }

   #indh .MuiStack-root {
    min-width: calc(((100vw - 60px) / 3) + 10px) !important;
    padding-left: 3px !important;
    /* width / height: ? */
  }

  .slideshow-column-num {
     min-width: calc(((100vw - 60px) / 3) + 10px) !important;
    padding-left: 3px !important;
  }

  .bb-carousel-slide-num {
    font-size: 45px !important;
    left:0px !important;
  }

  #indh .MuiStack-root {
    min-width: calc(((100vw - 60px) / 3) + 10px) !important;
    padding-left: 3px !important;
    /* width / height: ? */
  }
}

.bb-carousel-slide-num {
      color: var(--bb-accent);
    -webkit-text-stroke: 1.8px var(--bb-accent);
    -webkit-text-fill-color: var(--bb-accent);
    text-shadow: 0 0 6px var(--bb-accent-dim), 0 0 12px var(--bb-accent-dim);
    -webkit-filter: drop-shadow(0 0 4px var(--bb-accent-dim));
    filter: drop-shadow(0 0 4px var(--bb-accent-dim));
}

#iorig,#islots,#icrash,#inew,#ihot,#itable,#ibonus,#indh,#iokky,#izqhs {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.profile-main-page .MuiPaper-root {
  background-color: var(--bb-bg-dark) !important;
  border-radius: 8px !important;
  border: 0px solid var(--bb-border) !important;
  padding: 0px !important;
  gap: 10px !important;
  --Paper-shadow: none !important;
}

.Mui-disabled {
  -webkit-text-fill-color: var(--bb-text-muted) !important;
}

.MuiPaginationItem-root {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: var(--bb-text) !important;
}

.profile-box {
  border: 1px solid var(--bb-border) !important;
  background-color: var(--bb-bg-card) !important;
  border-radius: 8px !important;
  padding: 16px !important;
}


#custom-dynamic-page .bonus-component-wrapper .MuiGrid-item > div {
  border-width: 0px !important;
  border-color: transparent !important;
}