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

/* ===== 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: #E2E2E2;
  --bb-accent-dim: #C0C0C0;
  --bb-accent-bright: #F5F5F5;
  --bb-bg-dark: #0a1628;
  --bb-bg-mid: #0f1823;
  --bb-bg-card: #132238;
  --bb-text: #f4f8ff;
  --bb-text-muted: #8497A6;
  --bb-border: rgba(21, 86, 171, 0.2);
  --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);
}

/* ===== BODY ===== */
body {
  background: linear-gradient(180deg, #060e1a 0%, #0a1628 30%, #08101c 70%, #0a1628 100%) !important;
  color: var(--bb-text) !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 */
.ls-header-link {
  color: var(--bb-text-muted) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 2px !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: linear-gradient(90deg, var(--bb-primary), var(--bb-accent)) !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 {
  color: #fff !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 */
.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;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  line-height: 1 !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;
}
.custom-register-button {
  background: linear-gradient(140deg, var(--bb-accent-bright) 0%, var(--bb-accent) 40%, var(--bb-accent-dim) 100%) !important;
  color: #0a1628 !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 8px 20px 6px !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;
  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 12px !important;
}

/* Top Winnings */
.ls-top-winnings {
  border-bottom: 1px solid var(--bb-border) !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: 13px !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 8px !important;
}
.ls-nav-item:hover {
  color: #fff !important;
  background: var(--bb-glass-hover) !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;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 2px !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: 12px 8px !important;
  border-top: 1px solid var(--bb-border) !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;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 2px !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;
}
.ls-footer-legal-col a,
.ls-footer-help-col a {
  color: var(--bb-text-muted) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: color 0.2s ease !important;
}
.ls-footer-legal-col a:hover,
.ls-footer-help-col a:hover {
  color: var(--bb-primary-light) !important;
}
.ls-footer-legal-col a b,
.ls-footer-help-col a b {
  font-weight: 500 !important;
}

.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;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.ls-footer-disclaimer {
  padding: 16px 20px !important;
}
.ls-footer-disclaimer h5 {
  color: var(--bb-accent) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  margin-bottom: 8px !important;
}
.ls-footer-disclaimer div {
  color: var(--bb-text-muted) !important;
  font-size: 12px !important;
  line-height: 1.6 !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;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 12px !important;
}

.play-button {
  background: linear-gradient(140deg, var(--bb-accent-bright) 0%, var(--bb-accent) 40%, var(--bb-accent-dim) 100%) !important;
  color: #0a1628 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;

  border: none !important;
  padding: 8px 18px 6px !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;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 1px !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-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 4px !important;
  font-weight: 700 !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;
  text-transform: uppercase !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: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-dark)) !important;
  color: #fff !important;
  font-size: 10px !important;
  text-transform: uppercase !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: linear-gradient(140deg, var(--bb-primary-light) 0%, var(--bb-primary) 50%, var(--bb-primary-dark) 100%) !important;
  color: #fff !important;
  border: none !important;

  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 2px !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: linear-gradient(140deg, #2080e8 0%, var(--bb-primary-light) 50%, var(--bb-primary) 100%) !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;

}
::-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;
}
.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: linear-gradient(140deg, var(--bb-primary-light) 0%, var(--bb-primary) 50%, var(--bb-primary-dark) 100%) !important;
  color: #fff !important;
  border: none !important;

  font-weight: 700 !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;
  text-transform: uppercase !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;
}
.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;
}
.history-main-page .MuiTableCell-head p {
  color: var(--bb-accent) !important;
}
.history-main-page .MuiTableCell-body {
  color: var(--bb-text) !important;
  border-bottom: 1px solid var(--bb-border) !important;
}
.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;
}
.history-main-page .MuiTableCell-head svg {
  color: var(--bb-text-muted) !important;
}

/* ===== 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: linear-gradient(140deg, var(--bb-primary-light) 0%, var(--bb-primary) 50%, var(--bb-primary-dark) 100%) !important;
  color: #fff !important;
  border: none !important;

  font-weight: 700 !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-weight: 600 !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 */
.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-text-muted) !important;
}
.ls-header-nav .ls-header-link:hover svg,
.ls-header-nav a:hover svg,
.ls-header-link:hover svg {
  color: var(--bb-primary-light) !important;
}
.ls-header-nav .ls-header-link.active svg,
.ls-header-nav a.active svg,
.ls-header-link.active svg {
  color: var(--bb-primary-light) !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;
}
#left-sidebar-dynamic-header .ls-header-nav a:hover svg,
nav.ls-header-nav a.ls-header-link:hover svg {
  color: var(--bb-primary-light) !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;
}
#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 {
  color: var(--bb-primary-light) !important;
}

/* Mobile drawer nav links - same overrides with higher specificity */
#left-sidebar-nav .ls-mobile-drawer-nav a:hover,
aside#left-sidebar-nav .ls-mobile-drawer-nav a:hover {
  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: var(--bb-primary-light) !important;
}
#left-sidebar-nav .ls-mobile-drawer-nav a.active,
aside#left-sidebar-nav .ls-mobile-drawer-nav a.active {
  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: var(--bb-primary-light) !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 svg,
.ls-header-promo-icon .ls-promo-icon-wrap svg {
  color: var(--bb-primary-light) !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 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 {
  color: var(--bb-primary-light) !important;
}

/* Arrow button with inline green background (#00C082) */
html body .MuiIconButton-root.MuiIconButton-sizeSmall {
  background-color: var(--bb-primary) !important;
}
html body .MuiIconButton-root.MuiIconButton-sizeSmall:hover {
  background-color: var(--bb-primary-dark) !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;
}

/* ===== 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;
}
/* Win amount color */
html body .ls-winner-card .MuiTypography-caption[style*="color"],
html body .topwinnings-scroll-container .MuiTypography-caption {
  color: var(--bb-primary-light) !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-color: var(--bb-primary) !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: linear-gradient(90deg, transparent 0%, var(--bb-primary) 30%, var(--bb-primary) 70%, transparent 100%) !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 {
  color: var(--bb-primary) !important;
}

/* Mobile drawer nav */
html body.ls-light-theme .ls-mobile-drawer-nav a:hover svg {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-mobile-drawer-nav a.active svg {
  color: var(--bb-primary) !important;
}
html body.ls-light-theme .ls-mobile-drawer-nav a.active::after {
  background: linear-gradient(90deg, transparent 0%, var(--bb-primary) 30%, var(--bb-primary) 70%, transparent 100%) !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 {
  color: var(--bb-primary) !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;
}

/* 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;
}
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;
}
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 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) GREEN-TO-BLUE ===== */
html body .slideshow-number,
html body .slideshow-number.MuiBox-root {
  color: var(--bb-primary-light) !important;
  -webkit-text-stroke: 2px var(--bb-primary-light) !important;
  -webkit-text-fill-color: rgba(21, 86, 171, 0.15) !important;
}
html body *:hover > .slideshow-number,
html body .MuiBox-root:hover > .slideshow-number {
  -webkit-text-fill-color: var(--bb-primary-light) !important;
}
/* Light theme */
html body.ls-light-theme .slideshow-number,
html body.ls-light-theme .slideshow-number.MuiBox-root {
  color: var(--bb-primary) !important;
  -webkit-text-stroke: 2px var(--bb-primary) !important;
  -webkit-text-fill-color: rgba(21, 86, 171, 0.15) !important;
}
html body.ls-light-theme *:hover > .slideshow-number,
html body.ls-light-theme .MuiBox-root:hover > .slideshow-number {
  -webkit-text-fill-color: var(--bb-primary) !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: 8px !important;
    padding: 3px 8px 2px !important;
    margin-bottom: 0 !important;
    min-width: 40px !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
  }
}