/* moneybets.net Theme — V3 left-sidebar (left-sidebar-dynamic-*-v3).
   Cloned from brasildasorte.css with the moneybets palette: brand #73bc1f (green),
   neutral-dark backgrounds (#000 / #0a0a09 / #181818); odds stay blue.
   Generic rules theme the main content (game cards, dialogs, MUI, body). The V3
   chrome (header/segmented-control, sidebar accordions, full-width footer) is themed
   by the component CSS plus the V3-scoped block appended at the bottom of this file. */
/* Single flat brand color: #73bc1f (no light/dark shades, no gradients). */

/* ===== CSS VARIABLES ===== */
:root {
  /* All three point at the same green so any inherited
     linear-gradient(var(--bb-primary-light), var(--bb-primary), var(--bb-primary-dark))
     rule renders as a flat #73bc1f fill. */
  --bb-primary: #73bc1f;
  --bb-primary-light: #73bc1f;
  --bb-primary-dark: #73bc1f;
  --bb-primary-glow: rgba(115, 188, 31, 0.5);
  --bb-accent: #E2E2E2;
  --bb-accent-dim: #C0C0C0;
  --bb-accent-bright: #F5F5F5;
  --bb-bg-dark: #0a0a09;
  --bb-bg-mid: #121212;
  --bb-bg-card: #181818;
  --bb-text: #f4f8ff;
  --bb-text-muted: #8497A6;
  --bb-border: rgba(115, 188, 31, 0.2);
  --bb-border-light: rgba(115, 188, 31, 0.35);
  --bb-glass: rgba(10, 10, 9, 0.55);
  --bb-glass-hover: rgba(115, 188, 31, 0.12);
}

/* ===== BODY ===== */
body {
  /* background: linear-gradient(180deg, #050505 0%, #0a0a09 30%, #080807 70%, #0a0a09 100%) !important; */
  background: rgb(0, 0, 0) !important;
  color: var(--bb-text) !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;
}
#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(115, 188, 31, 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: 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 {
  /* 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(115, 188, 31, 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(115, 188, 31, 0.08) !important;
  color: var(--bb-primary-light) !important;
  border: 1.5px solid var(--bb-primary) !important;
  /* Per client request: use the Public Sans system-fallback stack at weight 900 (black/extra bold).
     The previous wide 2px letter-spacing is dropped (was making the label look stretched);
     colors, sizing, padding, border, hover behavior are intentionally untouched. */
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: normal !important;

  line-height: 1 !important;
  height: auto !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}
.custom-header-button:hover {
  background: rgba(115, 188, 31, 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: linear-gradient(140deg, var(--bb-accent-bright) 0%, var(--bb-accent) 40%, var(--bb-accent-dim) 100%) !important;
  color: #0a0a09 !important;
  border: none !important;
  /* Per client request: use the Public Sans system-fallback stack at weight 900 (black/extra bold).
     The previous wide 1.5px letter-spacing is dropped; colors, sizing, padding, border,
     hover behavior are intentionally untouched. */
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: normal !important;

  line-height: 1 !important;
  height: auto !important;
  padding-top: 12px !important;
  padding-bottom: 12px !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;
}
.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(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 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;
}
#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(115, 188, 31, 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: linear-gradient(140deg, var(--bb-accent-bright) 0%, var(--bb-accent) 40%, var(--bb-accent-dim) 100%) !important;
  color: #0a0a09 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 2px !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;
}

/* V3 (moneybets) game overlay play button — "Jogar": solid moneybet green (#73bc1f),
   BLACK text, normal weight, flat. This high-specificity !important rule governs ALL overlay
   play buttons on V3 pages (grid .ls-v3-play-btn, carousel .ls-carousel-play-btn, and any V2
   fallback button), so it must carry the moneybet palette — not the leftover brasildasorte green. */
.left-sidebar-grid-overlay button,
.left-sidebar-game-overlay .MuiButton-root,
.left-sidebar-game-overlay button {
  background: #73bc1f !important;
  background-color: #73bc1f !important;
  color: #000000 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
.left-sidebar-grid-overlay button:hover,
.left-sidebar-game-overlay .MuiButton-root:hover,
.left-sidebar-game-overlay button:hover {
  background: #84d324 !important;
  background-color: #84d324 !important;
  box-shadow: none !important;
}

/* ===== SECTION TITLES ===== */
.MuiTypography-h4 div,
.game-grid-title-text,
.mui-104rzw2 {
  color: var(--bb-accent) !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(115, 188, 31, 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: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-dark)) !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(115, 188, 31, 0.15) !important;
  box-shadow: 0 0 10px rgba(115, 188, 31, 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;


  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, #73bc1f 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(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 0.06) !important;
  color: var(--bb-text) !important;
  border-color: var(--bb-border) !important;
}
.react-international-phone-country-selector-button {
  background: rgba(115, 188, 31, 0.06) !important;
  border-color: var(--bb-border) !important;
}

/* Search input */
.search-input {
  background: rgba(115, 188, 31, 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(115, 188, 31, 0.15) !important;
}
.MuiMenu-paper .MuiMenuItem-root.Mui-selected {
  background: rgba(115, 188, 31, 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(115, 188, 31, 0.15) !important;
}
.MuiPopover-paper .MuiMenuItem-root.Mui-selected {
  background: rgba(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 0.35) !important;
}
.age-verification-dialog .MuiButton-outlined {
  background: rgba(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 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 (#73bc1f / 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(115, 188, 31, 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(115, 188, 31, 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 - 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(115, 188, 31, 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(115, 188, 31, 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,
.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 (#5fa31a) */
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;
}
/* 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;
}

/* ===== 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(115, 188, 31, 0.25) 0%, rgba(115, 188, 31, 0.12) 40%, #000000 100%) !important;
  border: 1.5px solid rgba(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 0.15) 0%, rgba(115, 188, 31, 0.06) 40%, #FFFFFF 100%) !important;
  border: 1.5px solid rgba(115, 188, 31, 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(115, 188, 31, 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 #65a81c / 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(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 0.08) !important;
  color: var(--bb-primary-light) !important;
}
html body.ls-light-theme .custom-header-button:hover {
  background: rgba(115, 188, 31, 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 */
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: #0a0a09 !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: #5fa31a"],
html body.ls-light-theme .bonus-left-sidebar-theme div[style*="background:#5fa31a"] {
  background-color: var(--bb-primary) !important;
}
html body.ls-light-theme .bonus-left-sidebar-theme button[style*="background-color: #5fa31a"],
html body.ls-light-theme .bonus-left-sidebar-theme button[style*="background-color:#5fa31a"] {
  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(115, 188, 31, 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 #65a81c 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: #5fa31a"],
html body.ls-light-theme .bonus-left-sidebar-theme div[style*="background:#5fa31a"] {
  background-color: var(--bb-primary) !important;
}
html body.ls-light-theme .bonus-left-sidebar-theme button[style*="background-color: #5fa31a"],
html body.ls-light-theme .bonus-left-sidebar-theme button[style*="background-color:#5fa31a"] {
  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(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 0.06) !important;
}
html body.ls-light-theme .ls-auth-dialog .react-international-phone-input-container .react-international-phone-input {
  background: rgba(115, 188, 31, 0.06) !important;
  background-color: rgba(115, 188, 31, 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(115, 188, 31, 0.06) !important;
  background-color: rgba(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 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(115, 188, 31, 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: 8px !important;
    padding: 3px 8px 2px !important;
    margin-bottom: 0 !important;
    min-width: 40px !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
  }
}

/* ============================================================================
   V3 (moneybets) CHROME — header / sidebar / footer.
   All rules scoped under the V3 DOM ids so they never leak onto V1/V2/default
   pages. These reinforce the component-shipped CSS on the live frontend (where
   GrapesJS may have stripped inline styles on save) and supply the dark theme
   container surfaces + brand-green accents.
   ============================================================================ */

/* ---- Header ---- */
#left-sidebar-dynamic-header-v3 {
  background-color: #0a0a09 !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* Reduced vertical padding so the taller buttons fit within the header bar. */
  padding: 8px 16px !important;
  /* Reference .header__content: content capped at 1920px and centered. */
  max-width: 1920px !important;
  margin: 0 auto !important;
  max-height: 62px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1100 !important;
  font-family: 'Open Sans', sans-serif !important;
}
#left-sidebar-dynamic-header-v3 .header__left { display: flex !important; align-items: center !important; gap: 16px !important; min-width: 0 !important; }
#left-sidebar-dynamic-header-v3 .header__right { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; }
#left-sidebar-dynamic-header-v3 .header__logo { height: 36px !important; width: auto !important; display: block !important; }
/* Logo <a> wrapper carries the custom-header-logo class; after useGameLogic swaps the dynamic site
   logo in (an <img> with no .header__logo class, sized max-height:100%), the <a> holds the 36px height. */
#left-sidebar-dynamic-header-v3 .ls-header-v3-logo-link { height: 36px !important; display: inline-flex !important; align-items: center !important; }
#left-sidebar-dynamic-header-v3 .ls-header-v3-logo-link img { max-height: 100% !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; }
#left-sidebar-dynamic-header-v3 .segmented-control {
  display: flex !important; align-items: stretch !important; gap: 4px !important;
  padding: 4px !important; background-color: #2F2F2F !important; border-radius: 10px !important;
}
#left-sidebar-dynamic-header-v3 .segmented-control__button {
  position: relative !important; display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 8px !important; height: 36px !important; padding: 0 16px !important;
  border-radius: 8px !important; font-size: 14px !important; font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.8) !important; text-decoration: none !important; cursor: pointer !important;
  transition: color 0.2s ease !important;
}
/* Active = solid green pill with BLACK text + icon; inactive = light. */
#left-sidebar-dynamic-header-v3 .segmented-control__button--active,
#left-sidebar-dynamic-header-v3 .segmented-control__button--active .segmented-control__label,
#left-sidebar-dynamic-header-v3 .segmented-control__button--active .segmented-control__icon { color: #000000 !important; }
#left-sidebar-dynamic-header-v3 .segmented-control__button--active .segmented-control__icon svg { stroke: #000000 !important; }
#left-sidebar-dynamic-header-v3 .segmented-control__button:not(.segmented-control__button--active):hover { color: #ffffff !important; }
#left-sidebar-dynamic-header-v3 .segmented-control__indicator {
  position: absolute !important; inset: 0 !important; border-radius: 8px !important;
  background-color: #73bc1f !important; border: none !important;
  z-index: 0 !important; pointer-events: none !important;
}
#left-sidebar-dynamic-header-v3 .segmented-control__icon,
#left-sidebar-dynamic-header-v3 .segmented-control__label { position: relative !important; z-index: 1 !important; display: inline-flex !important; align-items: center !important; }
#left-sidebar-dynamic-header-v3 .segmented-control__icon svg { display: block; }
#left-sidebar-dynamic-header-v3 .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 40px !important; padding: 0 22px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 400 !important; cursor: pointer !important; line-height: 1 !important; transition: all 0.2s ease !important; }
#left-sidebar-dynamic-header-v3 .btn--outline { background: transparent !important; color: #73bc1f !important; border: 1px solid #73bc1f !important; }
#left-sidebar-dynamic-header-v3 .btn--outline:hover { background-color: rgba(115, 188, 31, 0.12) !important; color: #84d324 !important; border-color: #84d324 !important; }
#left-sidebar-dynamic-header-v3 .btn--primary { background-color: #73bc1f !important; color: #000000 !important; border: 1px solid #73bc1f !important; }
#left-sidebar-dynamic-header-v3 .btn--primary:hover { background-color: #84d324 !important; border-color: #84d324 !important; }
@media (max-width: 1279px) { #left-sidebar-dynamic-header-v3 .segmented-control { display: none !important; } }
/* Desktop: logo occupies a fixed 288px slot so the segmented control starts at the content
   edge (~320px, right of the 320px sidebar) instead of sitting directly above the sidebar.
   Header padding 16 + logo 288 + gap 16 = 320px. */
@media (min-width: 1280px) {
  #left-sidebar-dynamic-header-v3 .ls-header-v3-logo-link { width: 263px !important; min-width: 263px !important; flex-shrink: 0 !important; }
}

/* ---- Sidebar nav ---- */
#left-sidebar-dynamic-nav-v3 {
  /* 320px matches the reference .sidebar__scroll-area max-width. The shared
     body.has-left-sidebar padding-left is overridden to 320px for V3 (body.has-left-sidebar-v3
     desktop rule below) + the useGameLogic structural rule, so content sits flush. */
  width: 280px !important; max-width: 280px !important; background-color: #000000 !important;
  color: #ffffff !important; box-sizing: border-box !important; display: flex !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  flex-direction: column !important; gap: 16px !important; padding: 12px !important;
  overflow-y: auto !important; font-family: 'Open Sans', sans-serif !important;
}
/* V3 content offset = 320px (overrides the shared 260px from useGameLogic's
   body.has-left-sidebar rule; higher specificity via the V3-only body class, desktop-scoped
   so the mobile drawer keeps a 0 offset). */
@media (min-width: 1280px) {
  body.has-left-sidebar.has-left-sidebar-v3 { padding-left: 280px !important; }
}
/* Below 1280px the V3 sidebar becomes a slide-in drawer and the bottom-bar shows, so content is
   full-width — override the shared 260px has-left-sidebar padding-left to 0 for V3. */
@media (max-width: 1279px) {
  body.has-left-sidebar.has-left-sidebar-v3 { padding-left: 0 !important; }
}
#left-sidebar-dynamic-nav-v3 .sidebar__promo-section { display: flex !important; flex-direction: column !important; gap: 12px !important; }
#left-sidebar-dynamic-nav-v3 .promo-card { border-radius: 10px !important; overflow: hidden !important; }
#left-sidebar-dynamic-nav-v3 .promo-card__image { width: 100% !important; height: auto !important; display: block !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__divider { height: 1px !important; background-color: rgba(255, 255, 255, 0.08) !important; margin: 2px 0 !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__nav-list { display: flex !important; flex-direction: column !important; gap: 4px !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--accordion,
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--single {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 10px 16px !important; cursor: pointer !important; text-decoration: none !important; box-sizing: border-box !important;
  border-radius: 8px !important; transition: background-color 0.2s ease, color 0.2s ease !important;
}
#left-sidebar-dynamic-nav-v3 .sidebar__nav-content { display: flex !important; align-items: center !important; gap: 12px !important; flex: 1 1 auto !important; min-width: 0 !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__nav-icon,
#left-sidebar-dynamic-nav-v3 .sidebar__subitem-icon,
#left-sidebar-dynamic-nav-v3 .sidebar__footer-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: 18px !important; height: 18px !important; color: rgba(255, 255, 255, 0.8) !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__nav-icon svg,
#left-sidebar-dynamic-nav-v3 .sidebar__subitem-icon svg,
#left-sidebar-dynamic-nav-v3 .sidebar__chevron,
#left-sidebar-dynamic-nav-v3 .sidebar__clock { display: block !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__nav-label { color: #ffffff !important; font-size: 14px !important; font-weight: 600 !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__chevron { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; color: rgba(255, 255, 255, 0.6) !important; transition: transform 0.3s ease !important; transform: rotate(180deg); }
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--accordion.collapsed .sidebar__chevron { transform: rotate(0deg) !important; }
/* Hover — gray rounded background + white text/icon (NOT green). */
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--accordion:hover,
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--single:hover { background-color: rgba(255, 255, 255, 0.08) !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--accordion:hover .sidebar__nav-label,
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--accordion:hover .sidebar__nav-icon,
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--single:hover .sidebar__nav-label,
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--single:hover .sidebar__nav-icon { color: #ffffff !important; }
/* Open (expanded) accordion header — lighter gray background + white text/icon. */
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--accordion:not(.collapsed) { background-color: rgba(255, 255, 255, 0.1) !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--accordion:not(.collapsed) .sidebar__nav-label,
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--accordion:not(.collapsed) .sidebar__nav-icon { color: #ffffff !important; }
/* display is NOT !important so the accordion toggle's inline display:none can hide it
   (collapse + exclusivity rely on JS-set inline display). flex-direction stays enforced. */
#left-sidebar-dynamic-nav-v3 .sidebar__submenu { display: flex; flex-direction: column !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__subitem { display: flex !important; align-items: center !important; gap: 12px !important; padding: 8px 16px 8px 24px !important; color: rgba(255, 255, 255, 0.8) !important; text-decoration: none !important; font-size: 14px !important; box-sizing: border-box !important; border-radius: 8px !important; transition: background-color 0.2s ease, color 0.2s ease !important; }
/* Sub-item hover — gray background + white text/icon. */
#left-sidebar-dynamic-nav-v3 .sidebar__subitem:hover { background-color: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__subitem:hover .sidebar__subitem-icon { color: #ffffff !important; }
/* Active sub-item — subtle background + WHITE bold text + white checkmark on the right. */
/* Active sub-item: NO background highlight (same as non-active) — only the checkmark + white text mark it. */
#left-sidebar-dynamic-nav-v3 .sidebar__subitem.active { background-color: transparent !important; color: #ffffff !important; font-weight: 600 !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__subitem.active .sidebar__subitem-icon { color: #ffffff !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__subitem.active:hover { background-color: rgba(255, 255, 255, 0.08) !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__subitem.active::after {
  content: '' !important; margin-left: auto !important; width: 18px !important; height: 18px !important; flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important;
}
/* sidebar__footer (language + session/version) flows after the nav list like any other item —
   NOT pinned to the bottom (margin-top: 0 overrides the saved inline margin-top auto). */
#left-sidebar-dynamic-nav-v3 .sidebar__footer { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 0 !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__footer-item { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 16px !important; text-decoration: none !important; cursor: pointer !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__footer-content { display: flex !important; align-items: center !important; gap: 12px !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__footer-label { color: #ffffff !important; font-size: 14px !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__footer-item:hover .sidebar__footer-label { color: #73bc1f !important; }
/* Language footer group (sidebar__footer-language): the footer submenu is shown when .open. */
#left-sidebar-dynamic-nav-v3 #sidebar__footer-language .sidebar__footer-item .sidebar__chevron { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; color: rgba(255, 255, 255, 0.6) !important; transition: transform 0.3s ease !important; transform: rotate(180deg); }
#left-sidebar-dynamic-nav-v3 .sidebar__submenu--footer { display: flex !important; flex-direction: column !important; }
#left-sidebar-dynamic-nav-v3 #sidebar__footer-language:not(.open) .sidebar__submenu--footer { display: none !important; }
#left-sidebar-dynamic-nav-v3 #sidebar__footer-language:not(.open) .sidebar__footer-item .sidebar__chevron { transform: rotate(0deg) !important; }
/* Native V3 language dropdown — rounded bordered box (closed) that expands in place (open). */
#left-sidebar-dynamic-nav-v3 #sidebar__footer-language { border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 12px !important; overflow: hidden !important; background-color: transparent !important; }
#left-sidebar-dynamic-nav-v3 #sidebar__footer-language .sidebar__footer-item { padding: 12px 16px !important; border-radius: 0 !important; }
#left-sidebar-dynamic-nav-v3 #sidebar__footer-language.open .sidebar__footer-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }
#left-sidebar-dynamic-nav-v3 #sidebar__footer-language .sidebar__footer-item:hover { background-color: rgba(255, 255, 255, 0.04) !important; }
#left-sidebar-dynamic-nav-v3 #sidebar__footer-language .sidebar__submenu--footer { padding: 4px 0 !important; }
#left-sidebar-dynamic-nav-v3 #sidebar__footer-language .sidebar__submenu--footer .sidebar__subitem { padding: 10px 16px !important; border-radius: 0 !important; color: #ffffff !important; }
#left-sidebar-dynamic-nav-v3 #sidebar__footer-language .sidebar__submenu--footer .sidebar__subitem:hover { background-color: rgba(255, 255, 255, 0.06) !important; }
#left-sidebar-dynamic-nav-v3 #sidebar__footer-language .sidebar__submenu--footer .sidebar__subitem.active::after { content: none !important; } /* no checkmark in the language list */
/* Circular realistic flags (rectangular flagcdn image cropped to a circle) — frontend dropdown. */
#left-sidebar-dynamic-nav-v3 .ls-v3-flag { width: 24px !important; height: 24px !important; border-radius: 50% !important; object-fit: cover !important; display: block !important; flex-shrink: 0 !important; }
/* Flag icons — the flag-icons library is not loaded, so render br/us/es as CSS fallbacks. */
#left-sidebar-dynamic-nav-v3 .flag-icon { display: inline-block !important; width: 20px !important; height: 14px !important; border-radius: 2px !important; flex-shrink: 0 !important; background-size: cover !important; background-position: center !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__footer-icon, #left-sidebar-dynamic-nav-v3 .sidebar__submenu--footer .sidebar__subitem-icon { width: auto !important; height: auto !important; }

/* ── V3 FOOTER language dropdown ─────────────────────────────────────────────────────────
   Same V3LanguageDropdown rendered into the site footer (id footer-language-v3). Its styling
   lives HERE (loaded via <link>, always current) — NOT only in the footer's saved <style>, which
   goes stale until the block is re-saved. Scoped via .ls-v3-language so it mirrors the sidebar. */
#left-sidebar-dynamic-footer-v3 .ls-v3-language { width: 100% !important; max-width: 320px !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 12px !important; overflow: hidden !important; background-color: transparent !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-language .sidebar__footer-item { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 16px !important; text-decoration: none !important; cursor: pointer !important; border-radius: 0 !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-language .sidebar__footer-content { display: flex !important; align-items: center !important; gap: 12px !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-language .sidebar__footer-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: auto !important; height: auto !important; color: rgba(255, 255, 255, 0.8) !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-language .sidebar__footer-label { color: #ffffff !important; font-size: 14px !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-language .sidebar__footer-item:hover { background-color: rgba(255, 255, 255, 0.04) !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-language .sidebar__footer-item:hover .sidebar__footer-label { color: #73bc1f !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-language .sidebar__chevron { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; color: rgba(255, 255, 255, 0.6) !important; transition: transform 0.3s ease !important; transform: rotate(180deg); }
#left-sidebar-dynamic-footer-v3 .ls-v3-language:not(.open) .sidebar__chevron { transform: rotate(0deg) !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-language.open .sidebar__footer-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-language .sidebar__submenu--footer { display: flex !important; flex-direction: column !important; padding: 4px 0 !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-language:not(.open) .sidebar__submenu--footer { display: none !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-language .sidebar__submenu--footer .sidebar__subitem { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 16px !important; border-radius: 0 !important; color: #ffffff !important; text-decoration: none !important; cursor: pointer !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-language .sidebar__submenu--footer .sidebar__subitem:hover { background-color: rgba(255, 255, 255, 0.06) !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-language .sidebar__submenu--footer .sidebar__subitem.active::after { content: none !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-language .sidebar__subitem-icon { display: inline-flex !important; align-items: center !important; width: auto !important; height: auto !important; flex-shrink: 0 !important; }
#left-sidebar-dynamic-footer-v3 .ls-v3-flag { width: 24px !important; height: 24px !important; border-radius: 50% !important; object-fit: cover !important; display: block !important; flex-shrink: 0 !important; }
#left-sidebar-dynamic-nav-v3 .flag-icon-br { background-image: linear-gradient(180deg, #009C3B 33%, #FFDF00 33%, #FFDF00 66%, #002776 66%) !important; }
#left-sidebar-dynamic-nav-v3 .flag-icon-us { background-image: repeating-linear-gradient(180deg, #B22234 0, #B22234 2px, #ffffff 2px, #ffffff 4px) !important; }
#left-sidebar-dynamic-nav-v3 .flag-icon-es { background-image: linear-gradient(180deg, #AA151B 25%, #F1BF00 25%, #F1BF00 75%, #AA151B 75%) !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__status { display: flex !important; flex-direction: column !important; align-items: flex-start !important; padding: 8px 16px !important; font-size: 12px !important; color: rgba(255, 255, 255, 0.6) !important; gap: 16px !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__session { display: flex !important; align-items: center !important; gap: 6px !important; }

/* ---- Footer (exact moneybets structure + responsive; mirrors LeftSidebarFooterV3.tsx) ---- */
#left-sidebar-dynamic-footer-v3 {
  position: relative !important; width: 100% !important; background-color: #0a0a09 !important; color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important; min-height: 250px !important; padding: 25px 0 !important;
  font-size: 12px !important; font-family: 'Open Sans', sans-serif !important; box-sizing: border-box !important;
}
#left-sidebar-dynamic-footer-v3 * { box-sizing: border-box; }
#left-sidebar-dynamic-footer-v3 .container { max-width: auto !important; margin: auto !important; padding: 0 40px !important; }
#left-sidebar-dynamic-footer-v3 .logo { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; flex-wrap: wrap !important; }
#left-sidebar-dynamic-footer-v3 .logo p { margin: 0 !important; }
#left-sidebar-dynamic-footer-v3 .ls-footer-v3-logo { height: 44px !important; width: auto !important; display: block !important; }
/* Footer logo <a> wrapper carries the custom-header-logo class; after useGameLogic swaps the dynamic
   site logo in (an <img> with no .ls-footer-v3-logo class), the <a> holds the 44px height. */
#left-sidebar-dynamic-footer-v3 .ls-footer-v3-logo-link { height: 44px !important; display: inline-flex !important; align-items: center !important; }
#left-sidebar-dynamic-footer-v3 .ls-footer-v3-logo-link img { max-height: 100% !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; }
/* Social icons — V2 pattern (icons8 PNG in a bordered square; green border + lift on hover). */
#left-sidebar-dynamic-footer-v3 .ls-footer-social-icons { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; }
#left-sidebar-dynamic-footer-v3 .ls-footer-social-icons a { display: inline-flex !important; text-decoration: none !important; }
#left-sidebar-dynamic-footer-v3 .ls-footer-social-icons a img { width: 40px !important; height: 40px !important; border-radius: 25% !important; padding: 7px !important; border: 1px solid #294459 !important; box-sizing: border-box !important; filter: brightness(0) invert(1) !important; transition: border-color 0.2s ease, transform 0.2s ease !important; }
#left-sidebar-dynamic-footer-v3 .ls-footer-social-icons a:hover img { border-color: #73bc1f !important; transform: translateY(-2px); }
#left-sidebar-dynamic-footer-v3 .ls-footer-v3-social-mobile { display: none !important; }
#left-sidebar-dynamic-footer-v3 .separator { height: 1px !important; background-color: rgba(255, 255, 255, 0.1) !important; margin: 20px 0 !important; border: none !important; width: 100% !important; }
/* 3-column row: [legal + seal] | [Institucional] | [Pagamento] */
#left-sidebar-dynamic-footer-v3 .container-center { display: flex !important; flex-direction: row !important; gap: 48px !important; align-items: flex-start !important; }
#left-sidebar-dynamic-footer-v3 .container-footer { flex: 1.2 1 0 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
#left-sidebar-dynamic-footer-v3 .container-footer .see-more { text-align: center !important; font-size: 14px !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.85) !important; line-height: 1.6 !important; max-width: 100% !important; margin: 0 auto !important; }
#left-sidebar-dynamic-footer-v3 .see-more a { color: #73bc1f !important; text-decoration: none !important; }
#left-sidebar-dynamic-footer-v3 .ls-footer-v3-seal { max-width: 180px !important; width: 100% !important; height: auto !important; display: block !important; margin: 16px auto 0 !important; }
#left-sidebar-dynamic-footer-v3 .container-bottom { flex: 1.8 1 0 !important; display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: flex-start !important; gap: 64px !important; flex-wrap: wrap !important; }
#left-sidebar-dynamic-footer-v3 .left-container { flex: 0 1 auto !important; min-width: 0 !important; }
#left-sidebar-dynamic-footer-v3 .accordion-header { display: flex !important; align-items: center !important; }
#left-sidebar-dynamic-footer-v3 .accordion-header h2, #left-sidebar-dynamic-footer-v3 .info.pagamento h2 { margin: 0 0 12px 0 !important; font-size: 16px !important; font-weight: 700 !important; color: #fff !important; }
#left-sidebar-dynamic-footer-v3 .accordion-header i { display: none; margin-left: auto !important; color: rgba(255,255,255,0.6) !important; cursor: pointer; }
#left-sidebar-dynamic-footer-v3 .links { display: flex !important; flex-direction: column !important; gap: 8px !important; }
#left-sidebar-dynamic-footer-v3 .links a { color: rgba(255, 255, 255, 0.7) !important; text-decoration: none !important; font-size: 13px !important; line-height: 1.6 !important; }
#left-sidebar-dynamic-footer-v3 .links a:hover { color: #73bc1f !important; }
#left-sidebar-dynamic-footer-v3 .center-container { flex: 0 0 auto !important; }
#left-sidebar-dynamic-footer-v3 .info.pagamento img { height: 30px !important; width: auto !important; display: block !important;}
#left-sidebar-dynamic-footer-v3 #right-container { flex: 0 0 auto !important; }
#left-sidebar-dynamic-footer-v3 .info-jogo .icons { display: flex !important; align-items: center !important; justify-content: center !important; gap: 40px !important; flex-wrap: wrap !important; }
#left-sidebar-dynamic-footer-v3 .restricted-adults-container a, #left-sidebar-dynamic-footer-v3 .game-therapy a { text-decoration: none !important; color: inherit !important; }
#left-sidebar-dynamic-footer-v3 .restricted-adults,
#left-sidebar-dynamic-footer-v3 .play-responsibly,
#left-sidebar-dynamic-footer-v3 .game-therapy { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; text-align: left !important; color: #ffffff !important; }
#left-sidebar-dynamic-footer-v3 .restricted-adults svg,
#left-sidebar-dynamic-footer-v3 .play-responsibly svg,
#left-sidebar-dynamic-footer-v3 .game-therapy svg { flex-shrink: 0 !important; }
#left-sidebar-dynamic-footer-v3 .info-jogo svg { color: #ffffff !important; }
/* The seal SVGs hardcode fill-opacity/stroke-opacity 0.7 — force full opacity for pure white. */
#left-sidebar-dynamic-footer-v3 .info-jogo svg path,
#left-sidebar-dynamic-footer-v3 .info-jogo svg [fill-opacity],
#left-sidebar-dynamic-footer-v3 .info-jogo svg [stroke-opacity] { fill-opacity: 1 !important; stroke-opacity: 1 !important; }
#left-sidebar-dynamic-footer-v3 .info-jogo .title { margin: 0 !important; font-size: 12px !important; font-weight: 400 !important; color: #ffffff !important; line-height: 1.3 !important; text-align: left !important; }
#left-sidebar-dynamic-footer-v3 .only-mobile { display: none; text-align: center; color: rgba(255,255,255,0.7); font-size: 12px; }
#left-sidebar-dynamic-footer-v3 .separator-mobile { display: none; }
#left-sidebar-dynamic-footer-v3 .language-dropdown.hide-desktop { display: none; }
#left-sidebar-dynamic-footer-v3 .language-dropdown .dropdown-toggle { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; border-radius: 8px !important; padding: 8px 14px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; font-size: 13px !important; }
#left-sidebar-dynamic-footer-v3 .info-footer { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 4px !important; text-align: center !important; }
#left-sidebar-dynamic-footer-v3 .info-footer .info { font-size: 12px !important; color: rgba(255, 255, 255, 0.6) !important; }
#left-sidebar-dynamic-footer-v3 .info-footer .info.small { position: absolute !important; left: 0 !important; }
@media (max-width: 1023px) {
  #left-sidebar-dynamic-footer-v3 .container-bottom { gap: 32px !important; }
  #left-sidebar-dynamic-footer-v3 .container { padding: 0 24px !important; }
}
@media (max-width: 767px) {
  #left-sidebar-dynamic-footer-v3 .container { padding: 0 16px !important; }
  #left-sidebar-dynamic-footer-v3 .logo { justify-content: center !important; }
  #left-sidebar-dynamic-footer-v3 .ls-footer-v3-social-desktop { display: none !important; }
  #left-sidebar-dynamic-footer-v3 .ls-footer-v3-social-mobile { display: flex !important; justify-content: center !important; }
  #left-sidebar-dynamic-footer-v3 .container-center { flex-direction: column !important; gap: 24px !important; }
  #left-sidebar-dynamic-footer-v3 .container-footer { flex: 1 1 auto !important; width: 100% !important; }
  #left-sidebar-dynamic-footer-v3 .container-bottom { flex: 1 1 auto !important; flex-direction: column !important; gap: 24px !important; }
  #left-sidebar-dynamic-footer-v3 .accordion-header i { display: block !important; }
  #left-sidebar-dynamic-footer-v3 .center-container { width: 100% !important; }
  #left-sidebar-dynamic-footer-v3 .info-jogo .icons { gap: 24px !important; }
  #left-sidebar-dynamic-footer-v3 .only-mobile { display: block !important; }
  #left-sidebar-dynamic-footer-v3 .separator-mobile { display: block !important; }
  #left-sidebar-dynamic-footer-v3 .language-dropdown.hide-desktop { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; }
  #left-sidebar-dynamic-footer-v3 .info-footer { flex-direction: column !important; }
  #left-sidebar-dynamic-footer-v3 .info-footer .info.small { position: static !important; }
}

/* ============================================================================
   V3 game-section header (wall-section) — rendered in the MAIN content by the
   Dynamic Game Grid / Carousel components for buttonStyleType === 'left-sidebar-v3'.
   Not id-scoped because these sections live in <main>, not the sidebar/footer;
   safe because moneybets.css only loads on V3 pages and the markup only renders for V3.
   ============================================================================ */
.wall-section { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; font-size: 16px; color: var(--foreground, #fff); font-family: 'Open Sans', sans-serif; }
.wall-section__group { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wall-section__title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: var(--foreground, #fff); }
.wall-section__title i.fa { color: var(--highlight, #73bc1f); }
.wall-section__title .ls-dynamic-svg-icon { display: inline-flex; align-items: center; }
.wall-section__title .ls-dynamic-svg-icon svg { width: 18px; height: 18px; display: block; }
.scroll-buttons { display: flex; align-items: center; gap: 12px; font-size: 16px; }
/* Bare green chevrons (like V2's arrows, but green + larger) — NO circular background. */
.scroll-button { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; cursor: pointer; color: var(--highlight, #73bc1f); font-size: 22px; line-height: 1; flex-shrink: 0; transition: color 0.2s ease, opacity 0.2s ease; }
.scroll-button i, .scroll-button svg { display: block; fill: currentColor; }
.scroll-button.enabled-scroll-button { color: var(--highlight, #73bc1f); opacity: 1; }
.scroll-button.enabled-scroll-button:hover { color: #84d324; }
.scroll-button.disabled-scroll-button { color: var(--highlight, #73bc1f); opacity: 0.4; cursor: default; pointer-events: none; }
.wall-section__see-all { color: var(--highlight, #73bc1f); cursor: pointer; font-size: 14px; text-decoration: none; white-space: nowrap; }
.wall-section__see-all:hover { text-decoration: underline; }
/* Match V2: arrows show on desktop (≥1024px); below that users swipe the carousel. */
@media (max-width: 1023px) {
  .scroll-buttons { display: none; }
}
@media (max-width: 767px) {
  .wall-section { font-size: 14px; margin-bottom: 12px; }
  .wall-section__title { font-size: 14px; }
}

/* ============================================================================
   V3 games-search box — main-content search filter (FiltersComponent, left-sidebar-v3).
   ============================================================================ */
.bloco.filters { width: 100%; margin-bottom: 16px; }
.bloco.filters .games-search__container,
.bloco.filters .games-search,
.bloco.filters .games-search__wrapper,
.bloco.filters .games-search__header,
.bloco.filters .games-search__input { width: 100%; }
/* Unfocused: pure-white border, icon and placeholder. On focus the border turns green. */
.bloco.filters .search-box { position: relative; display: flex; align-items: center; width: 100%; height: 44px; background: var(--inputs-odds, #181818); border: 1px solid #ffffff; border-radius: 8px; box-sizing: border-box; }
.bloco.filters .search-box:focus-within { border-color: var(--highlight, #73bc1f); }
.bloco.filters .search-box .search-box__icon--search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #ffffff; opacity: 1; font-size: 18px; pointer-events: none; }
.bloco.filters .search-box__input { flex: 1; width: 100%; height: 100%; background: transparent; border: none; outline: none; color: #ffffff; font-size: 14px; padding: 0 14px 0 42px; font-family: 'Open Sans', sans-serif; box-sizing: border-box; }
.bloco.filters .search-box__input::placeholder { color: #ffffff; opacity: 1; }

/* ============================================================================
   V3 banner-slider side navigation controls (DynamicSliderComponent, left-sidebar-v3).
   Large white overlay arrows at the slider edges.
   ============================================================================ */
.button-nav-control { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); color: #ffffff; width: 64px; height: 64px; font-size: 24px; background: none; border: none; cursor: pointer; opacity: 0.8; z-index: 10; pointer-events: all; transition: opacity 0.3s ease; }
.button-nav-control:hover { opacity: 1; }
.button-nav-control svg { width: 1em; height: 1em; fill: currentColor; }
.button-nav-prev { left: 0; }
.button-nav-next { right: 0; }
@media (max-width: 767px) {
  .button-nav-control { width: 44px; height: 44px; font-size: 20px; }
}

/* V3 banner-slider pagination — owl-carousel style dots (absolute, bottom-centered). */
.owl-dots { position: absolute; bottom: 12px; left: 0; width: 100%; text-align: center; z-index: 5; pointer-events: none; }
.owl-dot { display: inline-block; cursor: pointer; pointer-events: all; }
/* Thin pill dots: inactive is a short thin bar; active is thinner + much wider
   (inactive width is less than half the active width). */
.owl-dot span { display: block; width: 12px; height: 4px; margin: 5px 3px; background: rgba(255, 255, 255, 0.5); border-radius: 4px; transition: all 0.25s ease; }
.owl-dot:hover span { background: rgba(255, 255, 255, 0.85); }
.owl-dot.active span { background: var(--highlight, #73bc1f); width: 30px; height: 4px; border-radius: 4px; }

/* ============================================================================
   V3 game cards (grid + carousel) — green "Jogar" hover button.
   The game name renders BELOW the card (outside) via component markup.
   ============================================================================ */
.ls-v3-play-btn {
  background: #73bc1f;
  color: #000000;
  font-weight: 400;
  font-size: 14px;
  padding: 10px 26px;
  max-width: calc(100% - 16px);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Open Sans', sans-serif;
  transition: background 0.2s ease;
}
.ls-v3-play-btn:hover { background: #84d324; }
.ls-v3-card-name:hover { color: var(--highlight, #73bc1f); }

/* ───────────────────────── V3 mobile bottom-bar (moneybets) ─────────────────────────
   Curved bar with a center notch + floating circular deposit button + 5 tabs
   (Menu / Cassino / Depósito / Ao Vivo / Esportes). Rendered by useGameLogic as the
   .bottom-bar element; only shown < 1024px. This file only loads when V3 is active, so the
   generic .bottom-bar class is safe here. */
.bottom-bar { display: none; }
/* moneybets shows the bottom-bar below 1280px (sidebar becomes a drawer). All dimensions are
   FLUID — measured off moneybets: each value scales linearly from ~375px and CAPS at 1024px.
   clamp(min, basePx + Bvw, max) reproduces that exactly (e.g. bg-height 88→126, deposit 40→60). */
@media (max-width: 1279px) {
  .bottom-bar {
    --bottom-bar: #0a0a09;
    /* fluid menu-line gap (5px→8px), shared by the menu icon gap + the X-morph translate */
    --bb-mgap: clamp(5px, 3.27px + 0.46vw, 8px);
    display: block !important;
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 1300 !important;
    pointer-events: none !important;
    user-select: none !important;
    font-family: 'Open Sans', sans-serif !important;
  }
  .bottom-bar__background { position: relative !important; width: 100% !important; height: calc(clamp(88px, 66px + 5.86vw, 126px) + env(safe-area-inset-bottom, 0px)) !important; pointer-events: none !important; }
  /* SVG viewBox is regenerated in JS (width = screen width) so the notch stays a fixed px. */
  .bottom-bar__bg-svg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; pointer-events: none !important; filter: drop-shadow(0 -2px 10px rgba(0, 0, 0, 0.35)) !important; }
  .bottom-bar__bg-svg path { fill: var(--bottom-bar, #0a0a09) !important; }
  .bottom-bar__floating { position: absolute !important; left: 50% !important; top: 0 !important; transform: translate(-50%, 8%) !important; pointer-events: auto !important; z-index: 2 !important; }
  .bottom-bar__deposit-btn { width: clamp(40px, 28.4px + 3.08vw, 60px) !important; height: clamp(40px, 28.4px + 3.08vw, 60px) !important; border-radius: 50% !important; background: var(--highlight, #73bc1f) !important; color: var(--foreground-highlight, #000000) !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 0 20px rgba(115, 188, 31, 0.65), 0 0 8px rgba(115, 188, 31, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3) !important; padding: 0 !important; }
  .bottom-bar__deposit-btn svg { width: clamp(19px, 13.8px + 1.39vw, 28px) !important; height: clamp(19px, 13.8px + 1.39vw, 28px) !important; display: block !important; }
  .bottom-bar__nav { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: calc(clamp(64px, 47.8px + 4.31vw, 92px) + env(safe-area-inset-bottom, 0px)) !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; padding-right: 10px !important; display: flex !important; align-items: stretch !important; justify-content: space-around !important; pointer-events: auto !important; box-sizing: border-box !important; }
  .bottom-bar__tab, .bottom-bar__spacer { flex: 1 1 0 !important; height: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: clamp(1px, 0.31vw, 3px) !important; padding-top: clamp(4px, 0.53px + 0.92vw, 10px) !important; background: none !important; border: none !important; color: rgba(255, 255, 255, 0.8) !important; text-decoration: none !important; cursor: pointer !important; position: relative !important; min-width: 0 !important; box-sizing: border-box !important; }
  .bottom-bar__spacer { cursor: default !important; align-items: center !important; text-align: center !important; }
  .bottom-bar__tab.active { color: var(--highlight, #73bc1f) !important; }
  .bottom-bar__tab svg { width: clamp(21px, 15.8px + 1.39vw, 30px) !important; height: clamp(21px, 15.8px + 1.39vw, 30px) !important; display: block !important; }
  .bottom-bar__menu-label { font-size: clamp(9px, 6.69px + 0.62vw, 13px) !important; line-height: 1 !important; color: inherit !important; white-space: nowrap !important; }
  /* "Depósito" label (the center spacer) — bold + pure white. */
  .bottom-bar__spacer .bottom-bar__menu-label { font-weight: 700 !important; color: #ffffff !important; }
  .bottom-bar__spacer-gap { width: clamp(21px, 15.8px + 1.39vw, 30px) !important; height: clamp(23px, 17px + 1.53vw, 33px) !important; }
  .bottom-bar__menu-icon { width: clamp(21px, 15.8px + 1.39vw, 30px) !important; height: clamp(21px, 15.8px + 1.39vw, 30px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: var(--bb-mgap) !important; }
  .bottom-bar__menu-line { width: clamp(17px, 12.95px + 1.08vw, 24px) !important; height: 2px !important; background: currentColor !important; border-radius: 2px !important; transition: transform 0.25s ease, opacity 0.2s ease !important; }
  /* Hamburger morphs to an X while the drawer is open (translate scales with the line gap). */
  body.left-sidebar-nav-open .bottom-bar__menu-line:nth-child(1) { transform: translateY(calc(var(--bb-mgap) + 2px)) rotate(45deg) !important; }
  body.left-sidebar-nav-open .bottom-bar__menu-line:nth-child(2) { opacity: 0 !important; }
  body.left-sidebar-nav-open .bottom-bar__menu-line:nth-child(3) { transform: translateY(calc(-1 * (var(--bb-mgap) + 2px))) rotate(-45deg) !important; }
  .bottom-bar__indicator { position: absolute !important; left: 50% !important; bottom: clamp(2px, 0.62vw, 6px) !important; transform: translateX(-50%) !important; width: clamp(26px, 15.6px + 2.77vw, 44px) !important; height: 3px !important; border-radius: 3px !important; background: var(--highlight, #73bc1f) !important; }
  /* Keep page content above the bar (nav height + safe-area). */
  body.has-left-sidebar-v3 { padding-bottom: calc(clamp(64px, 47.8px + 4.31vw, 92px) + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ============================================================================
   PIXEL-PERFECT OVERRIDES — measured against https://moneybets.net/casino @1440px
   via Playwright getComputedStyle diff. Id-scoped (1,0,1) so they win over the
   earlier theme rules + the .ls-* component rules. Each value is moneybets' actual.
   ============================================================================ */
/* FONT: global.css rule (div,a,label,td,th font-family principal) was overriding the theme
   font across the whole V3 chrome. Force Open Sans (moneybets' real font). :not(i) keeps
   any Font Awesome <i> glyphs intact. */
#left-sidebar-dynamic-header-v3, #left-sidebar-dynamic-header-v3 *:not(i),
#left-sidebar-dynamic-nav-v3, #left-sidebar-dynamic-nav-v3 *:not(i),
#left-sidebar-dynamic-footer-v3, #left-sidebar-dynamic-footer-v3 *:not(i) { font-family: 'Open Sans', sans-serif !important; }

/* ---- SIDEBAR ---- */
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item,
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--accordion,
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--single { padding: 10px 6px !important; border-radius: 12px !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--accordion:not(.collapsed),
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--single.active { background-color: rgba(255, 255, 255, 0.15) !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__nav-content { gap: 8px !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__nav-icon { width: 20px !important; height: 20px !important; color: rgba(255, 255, 255, 0.8) !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__nav-icon svg { width: 20px !important; height: 20px !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__nav-label { font-size: 15px !important; font-weight: 500 !important; line-height: 22.5px !important; color: rgba(255, 255, 255, 0.8) !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__chevron { width: 16px !important; height: 16px !important; color: rgba(255, 255, 255, 0.8) !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__submenu { gap: 2px !important; padding: 2px 0 8px 0 !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__subitem { font-size: 14px !important; font-weight: 400 !important; line-height: 16.8px !important; gap: 8px !important; padding: 10px 20px !important; }
/* status block: container unpadded; session is a 12px-padded rounded row; version small + tracked */
#left-sidebar-dynamic-nav-v3 .sidebar__status { padding: 0 !important; gap: 0 !important; color: #ffffff !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__session { font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.5px !important; color: rgba(255, 255, 255, 0.8) !important; gap: 8px !important; padding: 12px !important; border-radius: 12px !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__version { font-size: 10px !important; letter-spacing: 1px !important; padding-left: 12px !important; color: #ffffff !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__footer-label { font-size: 14.5px !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.8) !important; }

/* ---- HEADER ---- */
#left-sidebar-dynamic-header-v3 { padding: 12px 16px !important; }
#left-sidebar-dynamic-header-v3 .segmented-control { height: 40px !important; padding: 0 !important; gap: 0 !important; border-radius: 8px !important; background-color: rgba(255, 255, 255, 0.1) !important; }
#left-sidebar-dynamic-header-v3 .segmented-control__button { height: 40px !important; min-width: 150px !important; text-align: center !important; justify-content: center !important; }
#left-sidebar-dynamic-header-v3 .segmented-control__indicator { border-radius: 8px !important; }
#left-sidebar-dynamic-header-v3 .segmented-control__label { font-size: 14px !important; font-weight: 500 !important; }
#left-sidebar-dynamic-header-v3 .btn { padding: 0 16px !important; }
#left-sidebar-dynamic-header-v3 .btn--outline { padding: 0 16px !important; background-color: rgba(115, 188, 31, 0.08) !important; }
#left-sidebar-dynamic-header-v3 .btn--primary { padding: 0 16px !important; }

/* ---- FOOTER ---- */
#left-sidebar-dynamic-footer-v3 .container { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 24px !important; padding: 24px 54px !important; }
#left-sidebar-dynamic-footer-v3 .container-center { justify-content: space-between !important; gap: 36px !important; }
#left-sidebar-dynamic-footer-v3 .container-bottom { gap: 32px !important; }
#left-sidebar-dynamic-footer-v3 .see-more { text-align: left !important; color: #ffffff !important; }
#left-sidebar-dynamic-footer-v3 .info-jogo .icons { gap: 48px !important; flex-wrap: nowrap !important; }

/* ---- PIXEL-PERFECT batch 2 ---- */
/* Base font-size: moneybets header/sidebar inherit 12px (ours was 14px → oversized everywhere
   an element had no explicit size). Elements with explicit sizes above are unaffected. */
#left-sidebar-dynamic-header-v3 { font-size: 12px !important; }
#left-sidebar-dynamic-nav-v3 { font-size: 12px !important; }
/* Segmented control vertical centering + label line box */
#left-sidebar-dynamic-header-v3 .segmented-control { align-items: center !important; }
#left-sidebar-dynamic-header-v3 .segmented-control__label { line-height: 27px !important; }
/* Cadastre-se (primary) has no border in moneybets */
#left-sidebar-dynamic-header-v3 .btn--primary { border: 0 !important; }
/* Logo: 40px tall (moneybets), white link colour (image, but avoids default link blue) + header tall enough */
#left-sidebar-dynamic-header-v3 { min-height: 62px !important; max-height: 62px !important; }
#left-sidebar-dynamic-header-v3 .ls-header-v3-logo-link { height: 40px !important; color: #ffffff !important; }
#left-sidebar-dynamic-header-v3 .header__logo { height: 40px !important; }
/* Promo cards are transparent / borderless / no shadow / 8px radius in moneybets */
#left-sidebar-dynamic-nav-v3 .promo-card { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 8px !important; }

/* ---- PIXEL-PERFECT batch 3 (footer layout + nav-content) ---- */
#left-sidebar-dynamic-nav-v3 .sidebar__nav-content { gap: 8px !important; }
#left-sidebar-dynamic-nav-v3 .sidebar__nav-icon { font-size: 20px !important; }
/* Footer: see-more legal copy = 12px/400, left-aligned, full white (moneybets) */
#left-sidebar-dynamic-footer-v3 .see-more { font-size: 12px !important; font-weight: 400 !important; line-height: 18px !important; text-align: left !important; color: #ffffff !important; }
#left-sidebar-dynamic-footer-v3 .container-footer { display: block !important; align-items: stretch !important; text-align: left !important; }
/* info-jogo = vertical (seals row + any mobile note), 16px gap, centered */
#left-sidebar-dynamic-footer-v3 .info-jogo { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 16px !important; }
/* info-footer = space-between, muted 0.5, 60px bottom breathing room (moneybets) */
#left-sidebar-dynamic-footer-v3 .info-footer { justify-content: space-between !important; gap: 0 !important; padding-bottom: 60px !important; color: rgba(255, 255, 255, 0.5) !important; text-align: left !important; }

/* ---- PIXEL-PERFECT batch 4 (footer — the body prefix beats the footer component's saved <style>) ---- */
body #left-sidebar-dynamic-footer-v3 .container-footer { display: block !important; align-items: stretch !important; text-align: left !important; }
body #left-sidebar-dynamic-footer-v3 .container-footer .see-more { text-align: left !important; font-size: 12px !important; font-weight: 400 !important; line-height: 18px !important; color: #ffffff !important; max-width: none !important; margin: 0 !important; }
body #left-sidebar-dynamic-footer-v3 .info-jogo { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 16px !important; }
body #left-sidebar-dynamic-footer-v3 .info-footer { width: 100% !important; flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; gap: 0 !important; padding-bottom: 60px !important; text-align: left !important; }
body #left-sidebar-dynamic-footer-v3 .info-footer .info { color: rgba(255, 255, 255, 0.5) !important; }

/* ---- PIXEL-PERFECT batch 5 (segmented control x = 295) ---- */
/* The control sits at header-padding(16) + logo-slot + header gap(16). For moneybets' x=295 the
   logo slot must be 263 (16+263+16=295). The header component's saved <style> pins it at 288, so
   the body prefix raises specificity to win over it. */
@media (min-width: 1280px) {
  body #left-sidebar-dynamic-header-v3 .ls-header-v3-logo-link { width: 263px !important; min-width: 263px !important; }
}

/* ---- PIXEL-PERFECT batch 6 (footer layout — corrected to moneybets; supersedes batch 3/4) ---- */
body #left-sidebar-dynamic-footer-v3 .logo { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: 24px !important; flex-wrap: nowrap !important; }
body #left-sidebar-dynamic-footer-v3 .container-center { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; gap: 36px !important; }
body #left-sidebar-dynamic-footer-v3 .container-footer { flex: 1 1 0 !important; display: block !important; text-align: center !important; min-width: 0 !important; }
body #left-sidebar-dynamic-footer-v3 .container-footer .see-more { display: block !important; text-align: center !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.5 !important; color: #ffffff !important; max-width: none !important; margin: 0 auto !important; }
body #left-sidebar-dynamic-footer-v3 .see-more a { color: #73bc1f !important; text-decoration: none !important; }
body #left-sidebar-dynamic-footer-v3 .container-bottom { flex: 1 1 0 !important; display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: flex-start !important; gap: 32px !important; flex-wrap: nowrap !important; }
body #left-sidebar-dynamic-footer-v3 .left-container { flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; min-width: 0 !important; }
body #left-sidebar-dynamic-footer-v3 .left-container .links { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
body #left-sidebar-dynamic-footer-v3 .center-container { flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
/* info-footer: copyright centered, Versão absolute-left (moneybets look); reverts batch-4 space-between that caused overlap */
body #left-sidebar-dynamic-footer-v3 .info-footer { position: relative !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; gap: 4px !important; text-align: center !important; padding-bottom: 60px !important; }
body #left-sidebar-dynamic-footer-v3 .info-footer .info { font-size: 12px !important; color: rgba(255, 255, 255, 0.5) !important; }
body #left-sidebar-dynamic-footer-v3 .info-footer .info.small { position: absolute !important; left: 0 !important; }

/* ---- PIXEL-PERFECT batch 7 (footer social icons — moneybets green look) ---- */
/* moneybets social = green-filled icons (fill var(--highlight)) at top-right of the logo row.
   Our icons keep their logic classes (facebook-icon etc.); render as a green circle + white glyph. */
body #left-sidebar-dynamic-footer-v3 .ls-footer-social-icons { gap: 12px !important; }
body #left-sidebar-dynamic-footer-v3 .ls-footer-social-icons a img { width: 34px !important; height: 34px !important; border: none !important; border-radius: 50% !important; background: var(--highlight, #73bc1f) !important; padding: 8px !important; box-sizing: border-box !important; filter: brightness(0) invert(1) !important; transition: transform 0.2s ease, opacity 0.2s ease !important; }
body #left-sidebar-dynamic-footer-v3 .ls-footer-social-icons a:hover img { transform: translateY(-2px) !important; opacity: 0.9 !important; }

/* ---- PIXEL-PERFECT batch 8 (footer MOBILE <768px — stack everything, like moneybets) ---- */
@media (max-width: 767px) {
  body #left-sidebar-dynamic-footer-v3 .logo { justify-content: center !important; flex-wrap: wrap !important; gap: 16px !important; }
  body #left-sidebar-dynamic-footer-v3 .container-center { flex-direction: column !important; align-items: center !important; gap: 24px !important; }
  body #left-sidebar-dynamic-footer-v3 .container-footer { width: 100% !important; flex: 1 1 auto !important; }
  body #left-sidebar-dynamic-footer-v3 .container-bottom { flex-direction: column !important; align-items: center !important; gap: 24px !important; width: 100% !important; }
  body #left-sidebar-dynamic-footer-v3 .left-container, body #left-sidebar-dynamic-footer-v3 .center-container { align-items: center !important; text-align: center !important; width: 100% !important; }
  body #left-sidebar-dynamic-footer-v3 .left-container .links { align-items: center !important; }
  body #left-sidebar-dynamic-footer-v3 .info-jogo .icons { gap: 16px !important; flex-wrap: wrap !important; }
  body #left-sidebar-dynamic-footer-v3 .info-footer { flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 8px !important; padding-bottom: 24px !important; }
  body #left-sidebar-dynamic-footer-v3 .info-footer .info.small { position: static !important; left: auto !important; }
}

/* ---- PIXEL-PERFECT batch 9 (footer MOBILE <768px: Institucional accordion + Pagamento) ---- */
@media (max-width: 767px) {
  /* Institucional — LEFT-aligned + collapsible accordion (overrides batch 8's centered rule) */
  body #left-sidebar-dynamic-footer-v3 .left-container { align-items: flex-start !important; text-align: left !important; width: 100% !important; }
  body #left-sidebar-dynamic-footer-v3 .left-container .links { align-items: flex-start !important; }
  body #left-sidebar-dynamic-footer-v3 .accordion-header { display: flex !important; align-items: center !important; width: 100% !important; cursor: pointer !important; }
  /* Chevron via borders (reliable even if Font Awesome doesn't render). Up = expanded, down = collapsed. */
  body #left-sidebar-dynamic-footer-v3 .accordion-header i { display: block !important; margin-left: auto !important; width: 9px !important; height: 9px !important; border: none !important; border-right: 2px solid rgba(255, 255, 255, 0.6) !important; border-bottom: 2px solid rgba(255, 255, 255, 0.6) !important; transform: rotate(-135deg) !important; transition: transform 0.3s ease !important; font-size: 0 !important; flex-shrink: 0 !important; }
  body #left-sidebar-dynamic-footer-v3 .left-container.collapsed .accordion-header i { transform: rotate(45deg) !important; }
  body #left-sidebar-dynamic-footer-v3 .left-container.collapsed .links { display: none !important; }
  /* Pagamento — hide the "Metódos de pagamento" heading + perfectly center the PIX image */
  body #left-sidebar-dynamic-footer-v3 .center-container { align-items: center !important; text-align: center !important; }
  body #left-sidebar-dynamic-footer-v3 .info.pagamento { width: 100% !important; text-align: center !important; }
  body #left-sidebar-dynamic-footer-v3 .info.pagamento h2 { display: none !important; }
  body #left-sidebar-dynamic-footer-v3 .info.pagamento p { margin: 0 auto !important; text-align: center !important; }
  body #left-sidebar-dynamic-footer-v3 .info.pagamento img { margin: 0 auto !important; display: block !important; }
}

/* ---- V3 sidebar: active-main + ALL hover items = #323333; active-submenu checkmark 12px, pushed right ---- */
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--accordion:not(.collapsed),
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--single.active,
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--accordion:hover,
#left-sidebar-dynamic-nav-v3 .sidebar__nav-item--single:hover,
#left-sidebar-dynamic-nav-v3 .sidebar__subitem:hover,
#left-sidebar-dynamic-nav-v3 .sidebar__subitem.active:hover { background-color: #323333 !important; }
/* Checkmark: 12px square; margin-right:-14px offsets the subitem's 20px right padding down to ~6px,
   so its right edge lines up with the main-menu chevron (which sits at 6px right padding). */
#left-sidebar-dynamic-nav-v3 .sidebar__subitem.active::after { width: 12px !important; height: 12px !important; margin-right: -14px !important; }

/* ---- V3 category pills (moneybets submenu-v2) — green-outlined text; selected = filled green ---- */
.ls-v3-categories { scrollbar-width: none !important; }
.ls-v3-categories::-webkit-scrollbar { display: none !important; }
.ls-v3-categories .submenu-v2__item { display: inline-flex !important; align-items: center !important; height: 30px !important; padding: 0 20px !important; border-radius: 29px !important; border: 1px solid var(--highlight, #73bc1f) !important; background: transparent !important; color: var(--highlight, #73bc1f) !important; font-family: 'Open Sans', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 21px !important; white-space: nowrap !important; cursor: pointer !important; text-decoration: none !important; flex-shrink: 0 !important; box-sizing: border-box !important; transition: background 0.2s ease, color 0.2s ease !important; }
.ls-v3-categories .submenu-v2__item:hover { background: rgba(115, 188, 31, 0.12) !important; }
.ls-v3-categories .submenu-v2__item--selected { background: var(--highlight, #73bc1f) !important; color: #000000 !important; }
.ls-v3-categories .submenu-v2__item__text { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.ls-v3-categories .submenu-v2__item__icon:empty { display: none !important; }

/* ---- V3 search + provider dropdown: responsive like V2 — stack to a column < 800px ---- */
@media (max-width: 800px) {
  .ls-v3-filters-row { flex-direction: column !important; align-items: stretch !important; }
  .ls-v3-filters-row .games-search__container,
  .ls-v3-filters-row .ls-v3-provider-box { width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; }
}

/* Hide the divider directly below the promo section (the saved HTML still contains it). */
#left-sidebar-dynamic-nav-v3 .sidebar__promo-section + .sidebar__divider { display: none !important; }

/* ============================================================================
   V3 (moneybets) theme for the login / register / forgot-password modals.
   moneybets.css only loads on V3 pages, so styling .ls-auth-dialog here is
   automatically V3-scoped (V1/V2 keep their own theme). Pure CSS — the markup,
   form inputs and logic are untouched; we override the inline MUI colours via
   higher-specificity !important rules. Palette: --inputs-odds #181818,
   --highlight #73bc1f, --foreground-highlight #000, dark surface #0a0a09.
   ============================================================================ */
/* Form surface → dark; all text → white. */
.ls-auth-dialog .MuiPaper-root .MuiContainer-root,
.ls-auth-dialog .MuiDialog-paper .MuiContainer-root { background: #0a0a09 !important; background-color: #0a0a09 !important; }
.ls-auth-dialog .MuiContainer-root .MuiTypography-root,
.ls-auth-dialog .MuiContainer-root p,
.ls-auth-dialog .MuiContainer-root span,
.ls-auth-dialog .MuiContainer-root label { color: #ffffff !important; }
/* Inputs → moneybets --inputs-odds #181818, white text, subtle border, green on focus. */
.ls-auth-dialog .MuiInputBase-root { background-color: #181818 !important; color: #ffffff !important; border-radius: 8px !important; }
.ls-auth-dialog .MuiInputBase-input { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background-color: transparent !important; }
.ls-auth-dialog .MuiInputBase-input::placeholder { color: rgba(255, 255, 255, 0.45) !important; }
.ls-auth-dialog .MuiOutlinedInput-notchedOutline { border-color: rgba(255, 255, 255, 0.12) !important; }
.ls-auth-dialog .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: rgba(255, 255, 255, 0.25) !important; }
.ls-auth-dialog .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #73bc1f !important; border-width: 1px !important; }
.ls-auth-dialog .MuiInputLabel-root { color: rgba(255, 255, 255, 0.6) !important; }
.ls-auth-dialog .MuiInputLabel-root.Mui-focused { color: #73bc1f !important; }
/* Show/hide-password + adornment icons → light. */
.ls-auth-dialog .MuiInputAdornment-root .MuiSvgIcon-root,
.ls-auth-dialog .MuiInputAdornment-root .MuiIconButton-root { color: rgba(255, 255, 255, 0.7) !important; }
/* Primary action button (Entrar / Cadastre-se / submit) → solid moneybets green, BLACK text.
   Text rule covers the button + any span/Typography child with high specificity so it beats the
   generic white-text rule above (the button label can be wrapped in a span → was rendering white). */
.ls-auth-dialog .rsd-action-button { background: #73bc1f !important; background-image: none !important; border-radius: 8px !important; font-weight: 700 !important; }
.ls-auth-dialog .MuiContainer-root .rsd-action-button,
.ls-auth-dialog .MuiContainer-root .rsd-action-button span,
.ls-auth-dialog .MuiContainer-root .rsd-action-button .MuiTypography-root { color: #000000 !important; -webkit-text-fill-color: #000000 !important; }
.ls-auth-dialog .rsd-action-button:hover { background: #84d324 !important; background-image: none !important; }
.ls-auth-dialog .rsd-action-button.Mui-disabled { background: #2a2a2a !important; }
.ls-auth-dialog .MuiContainer-root .rsd-action-button.Mui-disabled,
.ls-auth-dialog .MuiContainer-root .rsd-action-button.Mui-disabled span { color: rgba(0, 0, 0, 0.45) !important; -webkit-text-fill-color: rgba(0, 0, 0, 0.45) !important; }
/* Links (forgot password / Cadastre-se / login switch) → moneybets green. */
.ls-auth-dialog a,
.ls-auth-dialog .MuiLink-root { color: #73bc1f !important; }

/* V3 register-cancel modal buttons — override the global .MuiButton-textPrimary green gradient.
   Continue = solid green + black text (primary); Cancel = transparent outlined + white text. */
.ls-register-cancel-dialog .MuiDialog-container .MuiButton-root.ls-regcancel-continue { background: #73bc1f !important; background-image: none !important; color: #000000 !important; letter-spacing: normal !important; box-shadow: none !important; }
.ls-register-cancel-dialog .MuiDialog-container .MuiButton-root.ls-regcancel-continue:hover { background: #84d324 !important; background-image: none !important; box-shadow: none !important; }
.ls-register-cancel-dialog .MuiDialog-container .MuiButton-root.ls-regcancel-continue * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; }
.ls-register-cancel-dialog .MuiDialog-container .MuiButton-root.ls-regcancel-cancel { background: transparent !important; background-image: none !important; color: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; letter-spacing: normal !important; box-shadow: none !important; }
.ls-register-cancel-dialog .MuiDialog-container .MuiButton-root.ls-regcancel-cancel:hover { background: rgba(255, 255, 255, 0.06) !important; background-image: none !important; box-shadow: none !important; }
.ls-register-cancel-dialog .MuiDialog-container .MuiButton-root.ls-regcancel-cancel * { color: rgba(255, 255, 255, 0.85) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important; }

/* ============================================================================
   V3 MODAL COVERAGE — dark/green theming for ALL dialogs, drawers, popovers &
   alerts that bypass the base theme (component inline sx / PaperProps hardcoding
   light-gray / site-specific colours). moneybets.css loads ONLY on V3 pages, so
   these broad MUI selectors are automatically V3-scoped. High-specificity
   .MuiDialog-root .MuiDialog-container descendant chains (0,3,0)+ beat component
   inline (and .MuiDialog-paper) sx rules. Palette: surfaces #0a0a09, inputs #181818,
   text #fff, primary buttons green #73bc1f + BLACK text, secondary = green outline.
   ============================================================================ */
/* --- Dialog surfaces (paper + inner content/title/container) → dark --- */
.MuiDialog-root .MuiDialog-container > .MuiPaper-root { background: #0a0a09 !important; background-image: none !important; color: #ffffff !important; }
.MuiDialog-root .MuiDialog-container .MuiPaper-root .MuiContainer-root,
.MuiDialog-root .MuiDialog-container .MuiDialogContent-root,
.MuiDialog-root .MuiDialog-container .MuiDialogTitle-root { background: #0a0a09 !important; background-image: none !important; color: #ffffff !important; }
.MuiDialog-root .MuiDialog-container .MuiDialogContentText-root,
.MuiDialog-root .MuiDialog-container .MuiDialogContent-root .MuiTypography-root,
.MuiDialog-root .MuiDialog-container .MuiDialogTitle-root .MuiTypography-root { color: #ffffff !important; }
/* --- Inputs inside any dialog → #181818, white text, green focus --- */
.MuiDialog-root .MuiDialog-container .MuiInputBase-root,
.MuiDialog-root .MuiDialog-container .MuiOutlinedInput-root { background-color: #181818 !important; color: #ffffff !important; }
.MuiDialog-root .MuiDialog-container .MuiInputBase-input { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
.MuiDialog-root .MuiDialog-container .MuiOutlinedInput-notchedOutline { border-color: rgba(255, 255, 255, 0.12) !important; }
.MuiDialog-root .MuiDialog-container .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #73bc1f !important; }
.MuiDialog-root .MuiDialog-container .MuiInputLabel-root { color: rgba(255, 255, 255, 0.6) !important; }
.MuiDialog-root .MuiDialog-container .MuiInputLabel-root.Mui-focused { color: #73bc1f !important; }
/* --- Dialog buttons: contained / action = green + BLACK text; outlined / text = green --- */
.MuiDialog-root .MuiDialog-container .MuiButton-contained,
.MuiDialog-root .MuiDialog-container .rsd-action-button,
.MuiDialog-root .MuiDialog-container .MuiDialogActions-root .MuiButton-root { background: #73bc1f !important; background-image: none !important; color: #000000 !important; border: none !important; box-shadow: none !important; }
.MuiDialog-root .MuiDialog-container .MuiButton-contained:hover,
.MuiDialog-root .MuiDialog-container .rsd-action-button:hover,
.MuiDialog-root .MuiDialog-container .MuiDialogActions-root .MuiButton-root:hover { background: #84d324 !important; background-image: none !important; }
.MuiDialog-root .MuiDialog-container .MuiButton-contained span,
.MuiDialog-root .MuiDialog-container .rsd-action-button span,
.MuiDialog-root .MuiDialog-container .MuiDialogActions-root .MuiButton-root span { color: #000000 !important; -webkit-text-fill-color: #000000 !important; }
.MuiDialog-root .MuiDialog-container .MuiButton-outlined { background: transparent !important; background-image: none !important; color: #73bc1f !important; border: 1px solid #73bc1f !important; }
.MuiDialog-root .MuiDialog-container .MuiButton-text { color: #73bc1f !important; }
.MuiDialog-root .MuiDialog-container .MuiButton-root.Mui-disabled { background: #2a2a2a !important; color: rgba(255, 255, 255, 0.4) !important; }
.MuiDialog-root .MuiDialog-container .MuiButton-root.Mui-disabled span { color: rgba(255, 255, 255, 0.4) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important; }
/* --- Drawers (mobile nav + right-anchor profile drawer) --- */
.MuiDrawer-root .MuiDrawer-paper { background: #0a0a09 !important; background-image: none !important; color: #ffffff !important; }
.MuiDrawer-root .MuiDrawer-paper .MuiInputBase-root,
.MuiDrawer-root .MuiDrawer-paper .MuiOutlinedInput-root { background-color: #181818 !important; color: #ffffff !important; }
.MuiDrawer-root .MuiDrawer-paper .MuiOutlinedInput-notchedOutline { border-color: rgba(255, 255, 255, 0.12) !important; }
.MuiDrawer-root .MuiDrawer-paper .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.MuiDrawer-root .MuiDrawer-paper .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #73bc1f !important; }
.MuiDrawer-root .MuiDrawer-paper .MuiListItemButton-root:hover { background-color: rgba(115, 188, 31, 0.12) !important; }
.MuiDrawer-root .MuiDrawer-paper .MuiButton-contained { background: #73bc1f !important; background-image: none !important; color: #000000 !important; }
/* --- Snackbar Alerts → V3 palette --- */
.MuiAlert-root.MuiAlert-filledSuccess { background-color: #1f5732 !important; color: #ffffff !important; }
.MuiAlert-root.MuiAlert-filledError { background-color: #7a1f1f !important; color: #ffffff !important; }
.MuiAlert-root.MuiAlert-filledInfo { background-color: #14110f !important; color: #ffffff !important; border: 1px solid rgba(115,188,31,0.3) !important; }
.MuiAlert-root.MuiAlert-filledWarning { background-color: #6b5310 !important; color: #ffffff !important; }

/* --- Modals whose content lives in a Box (not MuiContainer/DialogContent): target by their
   own dialog class so the content wrapper + buttons also go dark/green. --- */
.age-verification-dialog .MuiDialog-container > .MuiPaper-root,
.age-verification-dialog .MuiDialog-container .MuiPaper-root > div { background-color: #0a0a09 !important; background-image: none !important; color: #ffffff !important; }
.age-verification-dialog .MuiButton-contained,
.age-verification-dialog .MuiDialog-container .MuiButton-root:not(.MuiButton-outlined):not(.MuiButton-text) { background: #73bc1f !important; background-image: none !important; color: #000000 !important; }
.age-verification-dialog .MuiButton-outlined { background: transparent !important; color: #73bc1f !important; border-color: #73bc1f !important; }
/* Auth-dialog buttons that lack the rsd-action-button class (e.g. WelcomeModal, reset-success) →
   green + black; leave plain text/link buttons (and the close icon) alone. */
.ls-auth-dialog .MuiDialog-container .MuiButton-root:not(.MuiButton-text):not(.MuiIconButton-root) { background: #73bc1f !important; background-image: none !important; color: #000000 !important; }
.ls-auth-dialog .MuiDialog-container .MuiButton-root:not(.MuiButton-text):not(.MuiIconButton-root) span { color: #000000 !important; -webkit-text-fill-color: #000000 !important; }