.custom-header-chat-icon {
        display: none !important;
      }
      .custom-header-nav a{
        height: 100%;
        display: flex;
        align-items: center;
        margin-right: 0px !important;
        margin-left: 0px !important;
        padding: 10px !important;
        justify-content: center;
        text-decoration: none;
        border-bottom: 2px solid transparent !important;
        color: white;
      }
      .ganamos-header-nav a{
        height: 100%;
        display: flex;
        align-items: center;
        margin-right: 0px !important;
        margin-left: 0px !important;
        padding: 10px !important;
        justify-content: center;
        text-decoration: none;
        border-bottom: 2px solid transparent !important;
        color: white;
        }
      .custom-header-nav a:hover, .custom-header-nav a.active {
        color: grey;
        background-color: rgba(191, 191, 191, 0.18);
        border-bottom: 2px solid grey;
      }
        .ganamos-header-nav a:hover, .ganamos-header-nav a.active {
          color: #a6d0f5 !important;
          background-color: rgba(122, 18, 210, 0.21) !important;
          border-bottom: 3px solid #bd289f !important;
        }

      .casino-drex-header-nav a{
        color: #939393 !important;
        transition: 0.3s !important;
        padding-right: 10px !important;
        }
        .casino-drex-header-nav  a:hover, .casino-drex-header-nav  a.active {
          color: #fff !important;
        }

      .extracted-copyright {
       color: rgb(166, 173, 194);
       font-family: Inter, sans-serif;
       font-size: 11px;
       font-weight: 400;
        margin: 10px auto;
        text-align: center;
        width: 500px;
      }
      @media (max-width: 800px) {
        .extracted-copyright {
          width: 100%;
        }
      }
      @media (max-width: 1000px) {
        .custom-header-nav,
        .ganamos-header-nav,
        .casino-drex-header-nav {
          display: none !important;
        }
        
      }
      @media (max-width: 599px) {
        #custom-dynamic-header {
          flex-direction: column;
          padding-bottom: 95px !important;
        }
        // #custom-dynamic-page{
        //   padding-top: 32px !important;
        // }
      }

      /* Left Sidebar Header nav styles */
      .ls-header-nav a {
        height: 100%;
        display: flex;
        align-items: center;
        text-decoration: none !important;
        color: #8497A6 !important;
        font-size: 14px;
        font-weight: 400;
        white-space: nowrap;
        cursor: pointer;
        position: relative;
        z-index: 1;
        overflow: hidden;
        min-width: max-content;
        transition: color 0.2s ease, background-color 0.2s ease;
        border-radius: 0;
      }
      .ls-header-nav a:hover {
        color: #FFFFFF !important;
        text-decoration: none !important;
        background: radial-gradient(ellipse at center bottom, rgba(0, 255, 179, 0.12) 0%, transparent 70%) !important;
      }
      .ls-header-nav a:hover svg {
        color: #00FFB3 !important;
      }
      .ls-header-nav a.active {
        color: #FFFFFF !important;
        font-weight: 600;
        background: radial-gradient(ellipse at center bottom, rgba(0, 255, 179, 0.15) 0%, transparent 70%) !important;
        border-bottom: none !important;
        position: relative !important;
      }
      .ls-header-nav a.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        right: 10%;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, #00FFB3 30%, #00FFB3 70%, transparent 100%);
      }
      .ls-header-nav a.active svg {
        color: #00FFB3 !important;
      }
      /* Gift/promo icon bounce + shadow animation in header */
      .ls-header-promo-icon {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        color: #00FFB3 !important;
      }
      .ls-header-promo-icon .ls-promo-icon-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        transform-origin: center bottom;
        z-index: 2;
        animation: ls-fe-gift-bounce 1s ease-in-out infinite;
      }
      .ls-header-promo-icon .ls-promo-shadow {
        width: 80%;
        height: 6px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        filter: blur(1px);
        z-index: 1;
        animation: ls-fe-gift-shadow 1s ease-in-out infinite;
      }
      @keyframes ls-fe-gift-bounce {
        0%, 100% { transform: translateY(0) scaleX(1) scaleY(1); }
        50% { transform: translateY(-10px) scaleX(1.1) scaleY(0.8); }
      }
      @keyframes ls-fe-gift-shadow {
        0%, 100% { transform: scale(1); opacity: 0.3; }
        50% { transform: scale(0.5); opacity: 0.15; }
      }

      /* V2 gift/promo icon — reuses the V1 ls-fe-gift-bounce + ls-fe-gift-shadow
         keyframes above, scoped to .ls-header-v2-promo. The V2 saved markup has
         no separate shadow div, so we synthesise it with ::after. Colour IS forced
         here (#06DA73, brand-primary green) because GrapesJS strips the inline
         color: rgb(6, 218, 115) from the inner span when the template is re-saved,
         and the bare fill="currentColor" on the SVG then inherits whatever colour
         is in scope (a blue from a global rule) — making the icon turn blue after
         refresh. Forcing color + fill on the anchor, span, svg, and path with
         !important guarantees the icon stays green even after a GrapesJS save. */
      .ls-header-v2-promo,
      .ls-header-v2-promo > span,
      .ls-header-v2-promo svg,
      .ls-header-v2-promo svg * {
        color: #06DA73 !important;
        fill: #06DA73 !important;
      }
      .ls-header-v2-promo {
        position: relative !important;
      }
      .ls-header-v2-promo > span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform-origin: center bottom !important;
        z-index: 2 !important;
        animation: ls-fe-gift-bounce 1s ease-in-out infinite !important;
      }
      .ls-header-v2-promo::after {
        content: '' !important;
        position: absolute !important;
        left: 10% !important;
        right: 10% !important;
        bottom: -6px !important;
        height: 6px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        border-radius: 50% !important;
        filter: blur(1px) !important;
        z-index: 1 !important;
        pointer-events: none !important;
        animation: ls-fe-gift-shadow 1s ease-in-out infinite !important;
      }

      /* Auto-scrollable header nav */
      .ls-header-nav {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        min-width: 0 !important;
        position: relative !important;
        cursor: grab !important;
      }
      .ls-header-nav::-webkit-scrollbar {
        display: none !important;
      }
      .ls-header-nav a {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
      }
      .ls-header-left {
        flex-shrink: 0 !important;
      }
      .ls-header-hamburger {
        color: #FFFFFF !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease !important;
      }
      .ls-header-hamburger svg {
        color: #FFFFFF !important;
      }
      .ls-header-hamburger:hover {
        background-color: rgba(45, 45, 45, 0.5) !important;
        border-radius: 50% !important;
      }
      /* Scroll arrow buttons for header nav */
      .ls-nav-scroll-arrow {
        position: absolute !important;
        top: 0 !important;
        height: 100% !important;
        width: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 5 !important;
        border: none !important;
        padding: 0 !important;
        font-size: 16px !important;
        color: #8497A6 !important;
        transition: color 0.2s ease, background 0.2s ease !important;
        pointer-events: auto !important;
      }
      .ls-nav-scroll-arrow:hover {
        color: #FFFFFF !important;
      }
      .ls-nav-scroll-arrow.ls-nav-arrow-left {
        left: 0 !important;
        background: linear-gradient(to right, rgba(15, 24, 35, 0.95) 60%, transparent) !important;
      }
      .ls-nav-scroll-arrow.ls-nav-arrow-right {
        right: 0 !important;
        background: linear-gradient(to left, rgba(15, 24, 35, 0.95) 60%, transparent) !important;
      }
      .ls-nav-scroll-arrow.ls-nav-arrow-hidden {
        display: none !important;
      }
      body.ls-light-theme .ls-nav-scroll-arrow {
        color: #545F68 !important;
      }
      body.ls-light-theme .ls-nav-scroll-arrow:hover {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-nav-scroll-arrow.ls-nav-arrow-left {
        background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 60%, transparent) !important;
      }
      body.ls-light-theme .ls-nav-scroll-arrow.ls-nav-arrow-right {
        background: linear-gradient(to left, rgba(255, 255, 255, 0.95) 60%, transparent) !important;
      }
      /* Mobile drawer nav uses same arrow class — background matches drawer bg */
      .ls-mobile-drawer-nav .ls-nav-scroll-arrow.ls-nav-arrow-left {
        background: linear-gradient(to right, rgba(15, 24, 35, 0.95) 60%, transparent) !important;
      }
      .ls-mobile-drawer-nav .ls-nav-scroll-arrow.ls-nav-arrow-right {
        background: linear-gradient(to left, rgba(15, 24, 35, 0.95) 60%, transparent) !important;
      }
      body.ls-light-theme .ls-mobile-drawer-nav .ls-nav-scroll-arrow.ls-nav-arrow-left {
        background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 60%, transparent) !important;
      }
      body.ls-light-theme .ls-mobile-drawer-nav .ls-nav-scroll-arrow.ls-nav-arrow-right {
        background: linear-gradient(to left, rgba(255, 255, 255, 0.95) 60%, transparent) !important;
      }

      #left-sidebar-dynamic-header {
        border-bottom: 2px solid #10B981;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99 !important;
      }

      /* Fixed headers for all header types — position fixed so they never scroll away */
      #custom-dynamic-header,
      [id*='custom-dynamic-header-'] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 998 !important;
      }
      #ganamos-style-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 998 !important;
      }
      #casino-drex-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 998 !important;
      }
      /* Push content below the fixed header — margin-top set dynamically by JS */

      /* Left Sidebar Nav — fixed position on left, below header — top/height set dynamically by JS.
         iOS WebKit (Safari + iOS Chrome) has a longstanding bug where ANY non-none
         transform value on a fixed element disturbs the containing-block of nearby
         position:fixed elements (the bottom nav drifts to mid-screen). We deliberately
         avoid transform: translateX(0) here and animate left instead. */
      #left-sidebar-nav {
        position: fixed !important;
        left: 0 !important;
        width: 260px !important;
        max-width: 260px !important;
        z-index: 98;
        background-color: #1e2235;
        color: #ffffff;
        font-family: Arial, sans-serif;
        overflow-y: auto !important;
        transition: left 0.3s ease !important;
        margin: 0 !important;
        padding: 0 0 80px 0 !important;
        box-sizing: border-box !important;
      }
      /* Defensive icon-spacing rules for left-sidebar nav items.
         createNavItem in LeftSidebar.tsx puts these as inline styles inside
         its content HTML, but those inline styles can be lost during GrapesJS
         save/load cycles — so anchor them in real CSS keyed on stable classes. */
      #left-sidebar-nav .ls-nav-item > span:first-child,
      #left-sidebar-nav .ls-nav-section-header > span:first-child,
      #left-sidebar-nav .ls-nav-primary > span:first-child {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
        margin-right: 12px !important;
      }
      #left-sidebar-nav .ls-nav-section-header > span:nth-child(2) {
        flex: 1 !important;
      }
      #left-sidebar-nav .ls-nav-section-header > span:last-child {
        display: inline-flex !important;
        align-items: center !important;
      }
      /* Language selector row children: flag wrapper (24x24, no shrink),
         language text (flex:1 to push the chevron right), chevron wrapper */
      #left-sidebar-nav .ls-language-selector > *:first-child {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
      }
      #left-sidebar-nav .ls-language-selector > *:nth-child(2) {
        flex: 1 !important;
      }
      #left-sidebar-nav .ls-language-selector > *:last-child {
        display: inline-flex !important;
        align-items: center !important;
      }
      #left-sidebar-nav .ls-language-selector img {
        width: 20px !important;
        height: 14px !important;
        border-radius: 2px !important;
        object-fit: cover !important;
      }
      /* Sidebar alignment: all items at 16px left offset.
         Force gap:0 on every nav row so icon/label positions are driven purely
         by padding-left (16px) + icon span width (24px) + icon margin-right
         (12px). Some saved GrapesJS templates ship gap:10px important baked
         into the per-id style block for .ls-nav-item rows, which shifts their
         label 10px to the right of .ls-nav-section-header rows (Casino / Live
         Casino). We override with #id + .class specificity plus !important so
         all rows share the exact same vertical alignment on the left edge. */
      #left-sidebar-nav .ls-nav-item,
      #left-sidebar-nav .ls-nav-primary,
      #left-sidebar-nav .ls-nav-section-header {
        gap: 0 !important;
        column-gap: 0 !important;
      }
      #left-sidebar-nav .ls-nav-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        font-size: 14px !important;
        font-weight: 550 !important;
      }
      #left-sidebar-nav .ls-nav-section-header {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
      #left-sidebar-nav .ls-quick-links {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      #left-sidebar-nav .ls-nav-bottom-section {
        padding: 0 !important;
      }
      #left-sidebar-nav .ls-nav-bottom-section > .MuiBox-root {
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      #left-sidebar-nav .ls-nav-bottom-section .MuiFormControl-root {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
      }
      #left-sidebar-nav .ls-nav-bottom-section .MuiOutlinedInput-root {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
      }
      #left-sidebar-nav .ls-nav-bottom-section .MuiSelect-select {
        padding-left: 16px !important;
        padding-right: 32px !important;
      }
      #left-sidebar-nav .ls-nav-divider {
        margin-left: 16px !important;
        margin-right: 16px !important;
      }

      /* Spacer at the bottom of sidebar so last nav item is fully scrollable */
      #left-sidebar-nav::after {
        content: '' !important;
        display: block !important;
        min-height: 80px !important;
        width: 100% !important;
      }

      /* Push all body content right so fixed sidebar doesn't overlap page */
      body.has-left-sidebar {
        padding-left: 260px !important;
        transition: padding-left 0.3s ease !important;
      }
      /* V3 (moneybets) final desktop padding-left is 280px — that override normally
         lives in moneybets.css, which loads ASYNC via setLink() well after first
         paint. Mirrored here (verbatim from moneybets.css) so it's present in the
         SSR-embedded style element from frame one — otherwise V3 pages paint at the
         shared 260px, then visibly correct to 280px once moneybets.css finishes
         loading. Higher specificity (two classes) than the 260px rule above so no
         !important war; harmless no-op for V1/V2 (has-left-sidebar-v3 never set).
         Deliberately NOT mirroring moneybets.css's companion
         "@media (max-width:1279px) { padding-left:0 }" rule here: below 1280px
         padding was already 0 both before and after hydration (no flash exists
         there to fix), and this same style text gets captured verbatim into the
         page-editor's GrapesJS canvas (see frontendCanvasCss.ts + templateChrome.ts,
         which deliberately gives left-sidebar templates NO manual offset and relies
         solely on this class-based CSS). The editor's canvas iframe is narrower
         than 1280px, so a max-width:1279px rule here would reliably zero out the
         sidebar offset INSIDE THE EDITOR — collapsing the layout and making the
         sidebar unselectable/uneditable. Omitting it fixes the live-site flash
         without touching the editor. */
      @media (min-width: 1280px) {
        body.has-left-sidebar.has-left-sidebar-v3 {
          padding-left: 280px !important;
        }
      }
      body.left-sidebar-nav-collapsed.has-left-sidebar {
        padding-left: 0 !important;
      }
      body.left-sidebar-nav-collapsed.has-left-sidebar #custom-dynamic-page {
        margin-left: auto !important;
        margin-right: auto !important;
      }

      /* Page content and footer sit to the RIGHT of sidebar */
      body.has-left-sidebar #custom-dynamic-page {
        // margin-left: 260px !important;
        transition: all 0.3s ease !important;
      }
      body.has-left-sidebar #left-sidebar-dynamic-footer {
        // margin-left: 260px !important;
        transition: all 0.3s ease !important;
      }

      /* Left Sidebar collapsed state (hamburger toggle) */
      body.left-sidebar-nav-collapsed #left-sidebar-nav {
        transform: translateX(-260px) !important;
      }
      body.left-sidebar-nav-collapsed.has-left-sidebar #left-sidebar-dynamic-footer {
        margin-left: 0 !important;
        width: 100% !important;
      }

      /* Clear broken GrapesJS transforms */
      #left-sidebar-dynamic-footer {
        transform: none !important;
      }
      #custom-dynamic-page {
        transform: none !important;
      }

      /* Left Sidebar Footer styles */
      #left-sidebar-dynamic-footer a:hover {
        color: #ffffff !important;
        text-decoration: underline !important;
      }

      /* Left Sidebar Footer — social icons: no text-decoration on image-only links, hover brightens border */
      #left-sidebar-dynamic-footer .ls-footer-social-icons a,
      #left-sidebar-dynamic-footer .ls-footer-social-icons a:hover {
        text-decoration: none !important;
      }
      #left-sidebar-dynamic-footer .ls-footer-social-icons a:hover img {
        border-color: #00FFB3 !important;
        transform: translateY(-2px);
      }

      /* Left Sidebar Footer — all content (logo, Legal, Help, lists, headings, social icons)
         LEFT-aligned at every width. Aligns to existing 900px/600px footer breakpoints. */
      #left-sidebar-dynamic-footer .ls-footer-social-icons {
        justify-content: flex-start !important;
      }
      @media (max-width: 900px) {
        /* Logo column spans full width via the existing !important grid rule — keep it left-aligned. */
        #left-sidebar-dynamic-footer .ls-footer-logo-col {
          display: flex !important;
          flex-direction: column !important;
          align-items: flex-start !important;
          text-align: left !important;
        }
        #left-sidebar-dynamic-footer .ls-footer-social-wrapper {
          margin-top: 20px !important;
        }
        #left-sidebar-dynamic-footer .ls-footer-social-icons {
          gap: 10px !important;
          justify-content: flex-start !important;
        }
        #left-sidebar-dynamic-footer .ls-footer-social-icons img {
          // width: 36px !important;
          // height: 36px !important;
        }
      }
      @media (max-width: 600px) {
        /* Single-column stack — keep all content LEFT-aligned (per user request), except social icons. */
        #left-sidebar-dynamic-footer .ls-footer-top {
          text-align: left !important;
        }
        #left-sidebar-dynamic-footer .ls-footer-legal-col,
        #left-sidebar-dynamic-footer .ls-footer-help-col {
          text-align: left !important;
        }
        #left-sidebar-dynamic-footer .ls-footer-legal-col ul,
        #left-sidebar-dynamic-footer .ls-footer-help-col ul {
          padding: 0 !important;
          margin: 0 !important;
          list-style: none !important;
        }
        #left-sidebar-dynamic-footer .ls-footer-social-icons {
          justify-content: flex-start !important;
        }
        #left-sidebar-dynamic-footer .ls-footer-logos {
          gap: 16px !important;
          padding: 16px 0 !important;
        }
      }
      @media (max-width: 400px) {
        #left-sidebar-dynamic-footer .ls-footer-social-icons {
          gap: 8px !important;
          justify-content: flex-start !important;
        }
        #left-sidebar-dynamic-footer .ls-footer-social-icons img {
          width: 34px !important;
          height: 34px !important;
          padding: 6px !important;
        }
      }

      /* Left Sidebar responsive - below 900px: hide nav, hamburger, gift; keep logo + buttons; show mobile bottom nav */
      .ls-mobile-bottom-nav { display: none; }
      .ls-mobile-backdrop { display: none; }
      /* Mobile drawer header - hidden on desktop */
      .ls-mobile-drawer-header,
      .ls-mobile-drawer-divider,
      .ls-mobile-drawer-nav { display: none; }

      @media (max-width: 900px) {
        .ls-header-nav { display: none !important; }
        .ls-header-hamburger { display: none !important; }
        .ls-header-promo-icon { display: none !important; }
        #left-sidebar-dynamic-header { justify-content: space-between !important; overflow: visible !important; }
        .ls-header-left { flex-shrink: 0 !important; }
        .ls-header-actions { flex-shrink: 0 !important; }
        .custom-header-button, .custom-register-button { padding: 4px 12px !important; font-size: 13px !important; }

        /* Mobile bottom navigation bar.
           iPhone X+ safe-area: pad the bar by the home-indicator inset so tap
           targets stay above the gesture bar; resolves to 0 on Android/desktop. */
        .ls-mobile-bottom-nav {
          display: grid !important;
          position: fixed !important;
          bottom: 0 !important;
          left: 0 !important;
          width: 100% !important;
          height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
          padding: 0 8px env(safe-area-inset-bottom, 0px) 8px !important;
          background-color: #0F1922 !important;
          grid-template-columns: repeat(5, 1fr) !important;
          place-items: center !important;
          z-index: 999 !important;
          color: #8497A6 !important;
          border-top: 1px solid #294459 !important;
          box-sizing: border-box !important;
          font-family: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
        }
        /* Logged-in layout: 4 evenly-spaced items (Menu, Casino, Live, Sportsbook) —
           the raised center gift/login button is removed, so drop to a 4-column grid. */
        .ls-mobile-bottom-nav.ls-mobile-nav-4col {
          grid-template-columns: repeat(4, 1fr) !important;
        }
        .ls-mobile-bottom-nav a,
        .ls-mobile-bottom-nav .ls-mobile-nav-item {
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          gap: 2px !important;
          text-decoration: none !important;
          /* DARK theme: bottom-nav icons + hamburger menu = WHITE (icons inherit via fill=currentColor) */
          color: #FFFFFF !important;
          font-size: 11px !important;
          cursor: pointer !important;
          -webkit-tap-highlight-color: transparent !important;
        }
        .ls-mobile-bottom-nav svg {
          width: 22px !important;
          height: 22px !important;
        }
        /* Center promo icon - raised green circle matching original */
        .ls-mobile-promo-btn {
          position: relative !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: flex-end !important;
        }
        .ls-mobile-promo-btn .ls-promo-circle {
          width: 70px !important;
          height: 70px !important;
          border-radius: 50% !important;
          border: 3px solid #00FFB3 !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          position: absolute !important;
          top: -55px !important;
          z-index: 1400 !important;
          background-color: #0F1922 !important;
          color: #00FFB3 !important;
        }
        .ls-mobile-promo-btn .ls-promo-icon-wrap {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          transform-origin: center bottom !important;
          z-index: 2 !important;
          animation: ls-gift-bounce 1s ease-in-out infinite !important;
        }
        /* DARK theme: center promo/login icon = WHITE */
        .ls-mobile-promo-btn .ls-promo-icon-wrap svg {
          width: 24px !important;
          height: 24px !important;
          color: #FFFFFF !important;
          fill: #FFFFFF !important;
        }
        .ls-mobile-promo-btn .ls-promo-icon-wrap svg path {
          fill: #FFFFFF !important;
          color: #FFFFFF !important;
        }
        .ls-mobile-promo-btn .ls-promo-shadow {
          width: 80% !important;
          height: 6px !important;
          background: rgba(255, 255, 255, 0.3) !important;
          border-radius: 50% !important;
          filter: blur(1px) !important;
          position: absolute !important;
          bottom: 14px !important;
          z-index: 1 !important;
          animation: ls-gift-shadow 1s ease-in-out infinite !important;
        }
        @keyframes ls-gift-bounce {
          0%, 100% { transform: translateY(0) scaleX(1) scaleY(1); }
          50% { transform: translateY(-10px) scaleX(1.1) scaleY(0.8); }
        }
        @keyframes ls-gift-shadow {
          0%, 100% { transform: scale(1); opacity: 0.3; }
          50% { transform: scale(0.5); opacity: 0.15; }
        }

        /* Sidebar as full-width mobile drawer.
           iOS FIX: animate left instead of transform: translateX(...).
           transform on a fixed element creates a new containing block in iOS WebKit,
           which pulls sibling position: fixed; bottom: 0 elements (the bottom nav)
           up toward mid-screen. left does not trigger that bug. Off-canvas hide is
           left: -100vw; open state restores left: 0. */
        #left-sidebar-nav {
          display: block !important;
          position: fixed !important;
          top: 0 !important;
          left: -100vw !important;
          width: 100vw !important;
          max-width: 100vw !important;
          height: 100vh !important;
          height: 100dvh !important;
          z-index: 1200 !important;
          transition: left 0.3s ease !important;
          padding: 0 !important;
          overflow-y: auto !important;
        }
        /* Mobile spacer — accounts for bottom nav bar + extra scroll room */
        #left-sidebar-nav::after {
          content: '' !important;
          display: block !important;
          min-height: 120px !important;
          width: 100% !important;
        }
        body.left-sidebar-nav-open #left-sidebar-nav {
          left: 0 !important;
        }
        .ls-mobile-backdrop {
          display: none !important;
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          background: rgba(0,0,0,0.5) !important;
          z-index: 1199 !important;
        }
        body.left-sidebar-nav-open .ls-mobile-backdrop {
          display: block !important;
        }

        /* Mobile sidebar drawer header (logo + X + nav tabs) — sticky at top */
        .ls-mobile-drawer-header {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          padding: 16px 20px !important;
          background-color: #0F1922 !important;
          position: sticky !important;
          top: 0 !important;
          z-index: 10 !important;
        }
        .ls-mobile-drawer-logo {
          height: 28px !important;
          width: 140px !important;
          display: flex !important;
          align-items: center !important;
        }
        .ls-mobile-drawer-logo svg {
          width: 100% !important;
          height: 100% !important;
        }
        .ls-mobile-drawer-close {
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          padding: 4px !important;
          color: #8497A6 !important;
          -webkit-tap-highlight-color: transparent !important;
        }
        .ls-mobile-drawer-divider {
          border: none !important;
          border-top: 1px solid #294459 !important;
          margin: 0 !important;
          position: sticky !important;
          top: 60px !important;
          z-index: 10 !important;
        }
        .ls-mobile-drawer-nav {
          display: flex !important;
          align-items: center !important;
          gap: 0 !important;
          padding: 0 !important;
          background-color: rgba(15, 24, 35, 0.95) !important;
          border-bottom: 1px solid #294459 !important;
          position: sticky !important;
          top: 61px !important;
          z-index: 10 !important;
          overflow-x: auto !important;
          overflow-y: hidden !important;
          flex-wrap: nowrap !important;
          -webkit-overflow-scrolling: touch !important;
          scrollbar-width: none !important;
          cursor: grab !important;
        }
        .ls-mobile-drawer-nav::-webkit-scrollbar {
          display: none !important;
        }
        .ls-mobile-drawer-nav a {
          color: #8497A6 !important;
          text-decoration: none !important;
          padding: 8px 16px !important;
          font-size: 14px !important;
          display: flex !important;
          align-items: center !important;
          gap: 6px !important;
          transition: color 0.2s ease !important;
          white-space: nowrap !important;
          flex-shrink: 0 !important;
        }
        .ls-mobile-drawer-nav a:hover {
          color: #FFFFFF !important;
          background: radial-gradient(ellipse at center bottom, rgba(0, 255, 179, 0.12) 0%, transparent 70%) !important;
        }
        .ls-mobile-drawer-nav a:hover svg {
          color: #00FFB3 !important;
        }
        .ls-mobile-drawer-nav a.active {
          color: #FFFFFF !important;
          font-weight: 600 !important;
          background: radial-gradient(ellipse at center bottom, rgba(0, 255, 179, 0.15) 0%, transparent 70%) !important;
          border-bottom: none !important;
          position: relative !important;
        }
        .ls-mobile-drawer-nav a.active::after {
          /* Perfectly center the active underline using transform-translate
             instead of left:10%/right:10%. The percentage-based version is
             mathematically centered on the anchor border box, but browser
             sub-pixel rounding + flex-row content layout (no justify-content
             center) + font-weight shift (600 on active widens the text) make
             it appear slightly off-center. Transform-based centering is
             rounding-stable and doesn't care about content asymmetry. */
          content: '' !important;
          position: absolute !important;
          bottom: 0 !important;
          left: 50% !important;
          right: auto !important;
          transform: translateX(-50%) !important;
          width: 80% !important;
          height: 2px !important;
          background: linear-gradient(90deg, transparent 0%, #00FFB3 30%, #00FFB3 70%, transparent 100%) !important;
        }
        .ls-mobile-drawer-nav a.active svg {
          color: #00FFB3 !important;
        }
        .ls-mobile-drawer-nav a svg {
          width: 18px !important;
          height: 18px !important;
        }
        .ls-mobile-drawer-nav a span {
          font-size: 14px !important;
        }

        /* Add bottom padding so content isn't hidden behind bottom nav */
        body.has-left-sidebar {
          padding-bottom: 64px !important;
          padding-left: 0 !important;
        }
        body.has-left-sidebar #custom-dynamic-page { margin-left: 0 !important; }
        body.has-left-sidebar #left-sidebar-dynamic-footer { margin-left: 0 !important; width: 100% !important; }

        /* Left sidebar footer responsive: stack logo full width, legal+help side by side */
        .ls-footer-top {
          grid-template-columns: 1fr 1fr !important;
          gap: 24px !important;
        }
        .ls-footer-logo-col {
          grid-column: 1 / -1 !important;
          padding-bottom: 8px !important;
        }
      }
      @media (max-width: 1000px) {
        body.has-left-sidebar { padding-left: 0 !important; }
        body.has-left-sidebar #custom-dynamic-page { margin-left: 0 !important; }
        body.has-left-sidebar #left-sidebar-dynamic-footer { margin-left: 0 !important; width: 100% !important; }
      }
      @media (max-width: 600px) {
        /* Footer: single column layout below 600px */
        .ls-footer-top {
          grid-template-columns: 1fr !important;
          gap: 20px !important;
        }
        .ls-footer-logo-col {
          grid-column: 1 !important;
        }
        .ls-header-left { gap: 6px !important; }
        .ls-header-logo { width: 100px !important; }
        .custom-header-button, .custom-register-button { padding: 4px 10px !important; font-size: 12px !important; min-width: auto !important; }
        /* Force single-row layout below 600px for left-sidebar-dynamic-header, even when logged in (profile-opener present) */
        #left-sidebar-dynamic-header,
        #left-sidebar-dynamic-header:has(.profile-opener) {
          flex-direction: row !important;
          flex-wrap: nowrap !important;
          height: auto !important;
          min-height: auto !important;
          padding: 8px 12px !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap: 6px !important;
        }
        #left-sidebar-dynamic-header .ls-header-actions,
        #left-sidebar-dynamic-header:has(.profile-opener) .ls-header-actions {
          justify-content: flex-end !important;
          flex-wrap: nowrap !important;
          width: auto !important;
          flex-shrink: 0 !important;
        }
        #left-sidebar-dynamic-header .ls-header-left {
          flex-shrink: 1 !important;
          min-width: 0 !important;
        }
        /* Hide the "CRÉDITOS" label below 600px, keep balance value */
        #left-sidebar-dynamic-header .ls-balance-label {
          display: none !important;
        }
      }
      /* Ensure header buttons always visible at any viewport */
      #left-sidebar-dynamic-header { overflow: visible !important; }
      .ls-header-actions { display: flex !important; align-items: center !important; flex-shrink: 0 !important; }
      .custom-header-button, .custom-register-button { display: inline-block !important; white-space: nowrap !important; }

      /* Logged-in profile icon — force perfect 40x40 circle regardless of theme / global.css overrides.
         High specificity (.profile-opener .profile-icon-circle.custom-header-button) to beat
         .profile-opener .custom-header-button in global.css and bb-primary theme CSS. */
      .profile-opener .profile-icon-circle.custom-header-button,
      .profile-opener div.profile-icon-circle.custom-header-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #4e4e4e !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
      }
      .profile-opener .profile-icon-circle.custom-header-button:hover {
        background: #323232 !important;
      }
      .profile-opener .profile-icon-circle.custom-header-button svg {
        width: 22px !important;
        height: 22px !important;
        fill: #ffffff !important;
        display: block !important;
        margin: 0 !important;
      }

      /* Intentionally NO #left-sidebar-dynamic-header .custom-header-button overrides:
         keep the original LeftSidebarHeader button UI (text "Login", outlined transparent style)
         untouched when header is left-sidebar-dynamic-header. */

      /* ══════════════════════════════════════════════════════════════
         LIGHT THEME OVERRIDES — triggered by body.ls-light-theme
         ══════════════════════════════════════════════════════════════ */

      /* Body background */
      body.has-left-sidebar.ls-light-theme {
        background-color: #FFFFFF !important;
      }

      /* Sidebar container */
      body.ls-light-theme #left-sidebar-nav {
        background-color: #FFFFFF !important;
        color: #0F1922 !important;
        border-right: 1px solid #DFE3E8 !important;
        scrollbar-color: rgb(232, 239, 245) rgba(0, 0, 0, 0.05) !important;
      }
      body.ls-light-theme #left-sidebar-nav::after {
        background-color: #FFFFFF !important;
      }

      /* Header */
      body.ls-light-theme #left-sidebar-dynamic-header {
        background-color: #FFFFFF !important;
        background: #FFFFFF !important;
        border-bottom: 2px solid #1db964 !important;
      }
      body.ls-light-theme .ls-header-hamburger {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-header-hamburger svg {
        color: #0F1922 !important;
      }

      /* Header nav links — LIGHT MODE color policy (mirror of dark-mode swap).
         Resting:        text = BLACK, icon = BLUE
         Hover / active: text = BLUE,  icon = BLACK  (the two colors interchange)
         These selectors include 'nav.ls-header-nav a.ls-header-link' to push specificity
         to (0,4,3) — high enough to beat the doubled-specificity dark-mode rules in
         bluebet.css ('nav.ls-header-nav a.ls-header-link' = 0,3,2). Without that bump,
         the dark-mode WHITE/blue would leak into light mode. */
      body.ls-light-theme nav.ls-header-nav a.ls-header-link,
      body.ls-light-theme #left-sidebar-dynamic-header .ls-header-nav a.ls-header-link {
        color: #0F1922 !important;
      }
      body.ls-light-theme nav.ls-header-nav a.ls-header-link svg,
      body.ls-light-theme #left-sidebar-dynamic-header .ls-header-nav a.ls-header-link svg {
        color: var(--bb-primary) !important;
      }
      body.ls-light-theme nav.ls-header-nav a.ls-header-link:hover,
      body.ls-light-theme #left-sidebar-dynamic-header .ls-header-nav a.ls-header-link:hover {
        color: var(--bb-primary) !important;
        background: radial-gradient(ellipse at center bottom, rgba(21, 86, 171, 0.08) 0%, transparent 70%) !important;
      }
      body.ls-light-theme nav.ls-header-nav a.ls-header-link:hover svg,
      body.ls-light-theme #left-sidebar-dynamic-header .ls-header-nav a.ls-header-link:hover svg {
        color: #0F1922 !important;
      }
      body.ls-light-theme nav.ls-header-nav a.ls-header-link.active,
      body.ls-light-theme #left-sidebar-dynamic-header .ls-header-nav a.ls-header-link.active {
        color: var(--bb-primary) !important;
        background: radial-gradient(ellipse at center bottom, rgba(21, 86, 171, 0.1) 0%, transparent 70%) !important;
      }
      body.ls-light-theme nav.ls-header-nav a.ls-header-link.active svg,
      body.ls-light-theme #left-sidebar-dynamic-header .ls-header-nav a.ls-header-link.active svg {
        color: #0F1922 !important;
      }
      body.ls-light-theme nav.ls-header-nav a.ls-header-link.active::after,
      body.ls-light-theme #left-sidebar-dynamic-header .ls-header-nav a.ls-header-link.active::after {
        background: linear-gradient(90deg, transparent 0%, var(--bb-primary) 30%, var(--bb-primary) 70%, transparent 100%) !important;
      }

      /* Header — force dark text on ALL inline-styled white text (CRÉDITOS, profile opener, etc.) */
      body.ls-light-theme #left-sidebar-dynamic-header [style*="color: white"],
      body.ls-light-theme #left-sidebar-dynamic-header [style*="color:white"],
      body.ls-light-theme #left-sidebar-dynamic-header [style*="color: #fff"],
      body.ls-light-theme #left-sidebar-dynamic-header [style*="color:#fff"],
      body.ls-light-theme #left-sidebar-dynamic-header [style*="color: #FFFFFF"],
      body.ls-light-theme #left-sidebar-dynamic-header [style*="color:#FFFFFF"],
      body.ls-light-theme #left-sidebar-dynamic-header [style*="color: rgb(255"],
      body.ls-light-theme #left-sidebar-dynamic-header [style*="color:rgb(255"] {
        color: #0F1922 !important;
      }
      /* Header — profile opener and any div/span with white text */
      body.ls-light-theme #left-sidebar-dynamic-header .profile-opener,
      body.ls-light-theme #left-sidebar-dynamic-header .profile-opener * {
        color: #0F1922 !important;
      }
      /* Header — SVGs with white fill inside profile area.
         NOTE: intentionally NOT targeting #left-sidebar-dynamic-header .custom-header-button
         so the original LeftSidebarHeader Login button UI is preserved (no light-theme override). */
      body.ls-light-theme #left-sidebar-dynamic-header .profile-opener svg {
        fill: #545F68 !important;
        color: #545F68 !important;
      }

      /* Header promo icon */
      body.ls-light-theme .ls-header-promo-icon {
        color: #1db964 !important;
      }
      body.ls-light-theme .ls-header-promo-icon svg {
        color: #1db964 !important;
      }
      body.ls-light-theme .ls-promo-circle {
        border-color: #1db964 !important;
        background-color: #FFFFFF !important;
      }

      /* Header buttons */
      body.ls-light-theme .custom-header-button {
        color: #0F1922 !important;
        border-color: #DFE3E8 !important;
      }
      body.ls-light-theme .custom-register-button {
        background-color: #1db964 !important;
        color: #000000 !important;
      }

      /* Sidebar nav dividers */
      body.ls-light-theme .ls-nav-divider {
        border-top-color: #DFE3E8 !important;
      }
      body.ls-light-theme hr[class*="ls-nav-divider"] {
        border-color: #DFE3E8 !important;
      }

      /* Sidebar nav items */
      body.ls-light-theme .ls-nav-item,
      body.ls-light-theme .ls-nav-item span {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-nav-item svg {
        color: #545F68 !important;
      }
      body.ls-light-theme .ls-nav-item:hover {
        background-color: #F5F8FC !important;
      }
      body.ls-light-theme .ls-nav-item.active,
      body.ls-light-theme .ls-nav-item.active span {
        color: #1db964 !important;
      }
      body.ls-light-theme .ls-nav-item.active svg {
        color: #1db964 !important;
      }

      /* Primary nav items */
      body.ls-light-theme .ls-nav-primary,
      body.ls-light-theme .ls-nav-primary span {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-nav-primary svg {
        color: #1db964 !important;
      }

      /* Section headers (Casino, Live Casino expandable sections) */
      body.ls-light-theme .ls-nav-section-header {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-nav-section-header span {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-nav-section-header svg {
        color: #1db964 !important;
      }
      body.ls-light-theme .ls-nav-section-header span:last-child svg {
        fill: #545F68 !important;
        color: #545F68 !important;
      }

      /* Rotate chevron arrow on collapse */
      .ls-nav-section-header span:last-child svg {
        transition: transform 0.3s ease;
      }
      .ls-nav-section-header.collapsed span:last-child svg {
        transform: rotate(180deg);
      }

      /* Sidebar — force dark text on ALL inline white text inside sidebar nav */
      body.ls-light-theme #left-sidebar-nav [style*="color: white"],
      body.ls-light-theme #left-sidebar-nav [style*="color:white"],
      body.ls-light-theme #left-sidebar-nav [style*="color: #fff"],
      body.ls-light-theme #left-sidebar-nav [style*="color:#fff"],
      body.ls-light-theme #left-sidebar-nav [style*="color: #FFFFFF"],
      body.ls-light-theme #left-sidebar-nav [style*="color:#FFFFFF"],
      body.ls-light-theme #left-sidebar-nav [style*="color: rgb(255"],
      body.ls-light-theme #left-sidebar-nav [style*="color:rgb(255"] {
        color: #0F1922 !important;
      }
      /* Sidebar — all spans and divs with white text (Legal heading, etc.) */
      body.ls-light-theme #left-sidebar-nav h1,
      body.ls-light-theme #left-sidebar-nav h2,
      body.ls-light-theme #left-sidebar-nav h3,
      body.ls-light-theme #left-sidebar-nav h4,
      body.ls-light-theme #left-sidebar-nav h5,
      body.ls-light-theme #left-sidebar-nav h6 {
        color: #0F1922 !important;
      }

      /* Top Winnings section */
      body.ls-light-theme .ls-top-winnings,
      body.ls-light-theme .ls-top-winnings div,
      body.ls-light-theme .ls-top-winnings span,
      body.ls-light-theme .ls-top-winnings p {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-top-winnings svg {
        color: #1db964 !important;
      }

      /* Winner cards */
      body.ls-light-theme .ls-winner-card {
        background: linear-gradient(to top, rgba(0, 192, 130, 0.1) 0%, #F5F8FC 100%) !important;
        border-color: rgba(0, 192, 130, 0.5) !important;
        --palette-primary-main: #00875a;
        --palette-text-secondary: #556B7A;
      }
      body.ls-light-theme .ls-winner-thumb {
        background-color: #E8EFF5 !important;
        border-color: rgba(0, 192, 130, 0.5) !important;
      }

      /* Top Winnings carousel fade overlays for light theme */
      body.ls-light-theme .ls-top-winnings > div[class*="MuiBox-root"]::before {
        background: linear-gradient(to bottom, #FFFFFF 0%, transparent 100%) !important;
      }
      body.ls-light-theme .ls-top-winnings > div[class*="MuiBox-root"]::after {
        background: linear-gradient(to top, #FFFFFF 0%, transparent 100%) !important;
      }

      /* Quick links section */
      body.ls-light-theme .ls-quick-links .ls-nav-item {
        color: #0F1922 !important;
      }

      /* Bottom section (language, theme toggle, cookie, sitemap) */
      body.ls-light-theme .ls-nav-bottom-section {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-nav-bottom-section .ls-nav-item {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-nav-bottom-section .ls-nav-item svg {
        color: #545F68 !important;
      }

      /* Language selector in sidebar */
      body.ls-light-theme .MuiSelect-select {
        color: #0F1922 !important;
      }
      body.ls-light-theme .MuiOutlinedInput-notchedOutline {
        border-color: #DFE3E8 !important;
      }
      body.ls-light-theme .MuiSelect-icon {
        color: #545F68 !important;
      }

      /* Footer */
      body.ls-light-theme #left-sidebar-dynamic-footer {
        background-color: #F5F8FC !important;
        color: #0F1922 !important;
      }
      body.ls-light-theme #left-sidebar-dynamic-footer a {
        color: #545F68 !important;
      }
      body.ls-light-theme #left-sidebar-dynamic-footer a:hover {
        color: #0F1922 !important;
      }

      /* Footer social icons — force #545F68 (dark slate-gray) in light theme.
         Icons are PNG images (icons8-*.png) so we recolor them via a filter chain.
         brightness(0) flattens to black, then invert/sepia/saturate/hue-rotate tints it
         to ~rgb(84, 95, 104) = #545F68. */
      body.ls-light-theme .social-icons a,
      body.ls-light-theme .ls-footer-social-icons a,
      body.ls-light-theme #left-sidebar-dynamic-footer .ls-footer-social-icons a,
      body.ls-light-theme #left-sidebar-dynamic-footer .social-icons a {
        border-color: #545F68 !important;
        background-color: transparent !important;
      }
      body.ls-light-theme .social-icons a img,
      body.ls-light-theme .ls-footer-social-icons a img,
      body.ls-light-theme #left-sidebar-dynamic-footer .ls-footer-social-icons a img,
      body.ls-light-theme #left-sidebar-dynamic-footer .social-icons a img {
        filter: brightness(0) saturate(100%) invert(38%) sepia(11%) saturate(503%) hue-rotate(178deg) brightness(96%) contrast(87%) !important;
        -webkit-filter: brightness(0) saturate(100%) invert(38%) sepia(11%) saturate(503%) hue-rotate(178deg) brightness(96%) contrast(87%) !important;
      }
      body.ls-light-theme .social-icons a:hover,
      body.ls-light-theme .ls-footer-social-icons a:hover,
      body.ls-light-theme #left-sidebar-dynamic-footer .ls-footer-social-icons a:hover,
      body.ls-light-theme #left-sidebar-dynamic-footer .social-icons a:hover {
        background-color: #545F68 !important;
        border-color: #545F68 !important;
      }
      body.ls-light-theme .social-icons a:hover img,
      body.ls-light-theme .ls-footer-social-icons a:hover img,
      body.ls-light-theme #left-sidebar-dynamic-footer .ls-footer-social-icons a:hover img,
      body.ls-light-theme #left-sidebar-dynamic-footer .social-icons a:hover img {
        filter: brightness(0) invert(1) !important;
        -webkit-filter: brightness(0) invert(1) !important;
      }

      /* ══ CONTENT AREA & COMPONENTS LIGHT THEME ══ */

      /* Main content area — slightly off-white bg */
      body.ls-light-theme #custom-dynamic-page {
        background-color: #F5F8FC !important;
        color: #0F1922 !important;
      }

      /* Catch-all: force dark text on ALL elements inside content area */
      body.ls-light-theme #custom-dynamic-page h1,
      body.ls-light-theme #custom-dynamic-page h2,
      body.ls-light-theme #custom-dynamic-page h3,
      body.ls-light-theme #custom-dynamic-page h4,
      body.ls-light-theme #custom-dynamic-page h5,
      body.ls-light-theme #custom-dynamic-page h6,
      body.ls-light-theme #custom-dynamic-page p,
      body.ls-light-theme #custom-dynamic-page span,
      body.ls-light-theme #custom-dynamic-page div,
      body.ls-light-theme #custom-dynamic-page a,
      body.ls-light-theme #custom-dynamic-page li,
      body.ls-light-theme #custom-dynamic-page label,
      body.ls-light-theme #custom-dynamic-page td,
      body.ls-light-theme #custom-dynamic-page th,
      body.ls-light-theme #custom-dynamic-page input,
      body.ls-light-theme #custom-dynamic-page select,
      body.ls-light-theme #custom-dynamic-page textarea {
        color: #0F1922 !important;
      }

      /* Override inline style="color: white" from CMS content */
      body.ls-light-theme #custom-dynamic-page [style*="color: white"],
      body.ls-light-theme #custom-dynamic-page [style*="color:white"],
      body.ls-light-theme #custom-dynamic-page [style*="color: #fff"],
      body.ls-light-theme #custom-dynamic-page [style*="color:#fff"],
      body.ls-light-theme #custom-dynamic-page [style*="color: #FFF"],
      body.ls-light-theme #custom-dynamic-page [style*="color:#FFF"],
      body.ls-light-theme #custom-dynamic-page [style*="color: #ffffff"],
      body.ls-light-theme #custom-dynamic-page [style*="color:#ffffff"],
      body.ls-light-theme #custom-dynamic-page [style*="color: #FFFFFF"],
      body.ls-light-theme #custom-dynamic-page [style*="color:#FFFFFF"],
      body.ls-light-theme #custom-dynamic-page [style*="color: rgb(255"],
      body.ls-light-theme #custom-dynamic-page [style*="color:rgb(255"] {
        color: #0F1922 !important;
      }

      /* Restore white text inside dark game-card hover overlays */
      body.ls-light-theme #custom-dynamic-page .left-sidebar-game-overlay,
      body.ls-light-theme #custom-dynamic-page .left-sidebar-game-overlay *,
      body.ls-light-theme #custom-dynamic-page .left-sidebar-grid-overlay,
      body.ls-light-theme #custom-dynamic-page .left-sidebar-grid-overlay *,
      body.ls-light-theme #custom-dynamic-page .game-item-overlay,
      body.ls-light-theme #custom-dynamic-page .game-item-overlay * {
        color: #ffffff !important;
      }

      /* Light theme: slideshow game card image shadow → white instead of black */
      body.ls-light-theme .slideshow-game-card > .MuiBox-root:first-child {
        box-shadow: 0 10px 30px rgba(255, 255, 255, 0.9) !important;
      }

      /* Override inline dark backgrounds from CMS/components */
      body.ls-light-theme #custom-dynamic-page [style*="background-color: #000"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:#000"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: #1a1a"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:#1a1a"],
      body.ls-light-theme #custom-dynamic-page [style*="background: #000"],
      body.ls-light-theme #custom-dynamic-page [style*="background:#000"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: #0f1"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:#0f1"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: #0F1"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:#0F1"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: #1F2F3D"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:#1F2F3D"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: #1f2f3d"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:#1f2f3d"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: #16222D"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:#16222D"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: #142230"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:#142230"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: #294459"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:#294459"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: rgb(31"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:rgb(31"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: rgb(21"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:rgb(21"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: rgb(15"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:rgb(15"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: rgb(22"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:rgb(22"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: rgb(20"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:rgb(20"] {
        background-color: #FFFFFF !important;
      }
      /* .card elements from bonus/CMS with dark backgrounds */
      body.ls-light-theme #custom-dynamic-page .card,
      body.ls-light-theme .bonus-left-sidebar-theme .card {
        background-color: #FFFFFF !important;
        border: 1px solid #DFE3E8 !important;
        color: #0F1922 !important;
      }
      body.ls-light-theme #custom-dynamic-page .card *,
      body.ls-light-theme .bonus-left-sidebar-theme .card * {
        color: #0F1922 !important;
      }
      body.ls-light-theme #custom-dynamic-page .card .card-header,
      body.ls-light-theme .bonus-left-sidebar-theme .card .card-header {
        background-color: #F5F8FC !important;
      }
      body.ls-light-theme #custom-dynamic-page .card .card-body,
      body.ls-light-theme .bonus-left-sidebar-theme .card .card-body {
        background-color: #FFFFFF !important;
      }
      body.ls-light-theme #custom-dynamic-page .card .learn-more-btn,
      body.ls-light-theme .bonus-left-sidebar-theme .card .learn-more-btn {
        color: #1db964 !important;
      }
      /* Override dark borders from left-sidebar themed components */
      body.ls-light-theme #custom-dynamic-page [style*="border: 1px solid #294459"],
      body.ls-light-theme #custom-dynamic-page [style*="border:1px solid #294459"],
      body.ls-light-theme #custom-dynamic-page [style*="border-color: #294459"],
      body.ls-light-theme #custom-dynamic-page [style*="border-color:#294459"] {
        border-color: #DFE3E8 !important;
      }
      /* MUI-styled components with dark backgrounds (MisDatos, Historial, etc.) */
      body.ls-light-theme #custom-dynamic-page .MuiBox-root[style*="background-color: #1F2F3D"],
      body.ls-light-theme #custom-dynamic-page .MuiBox-root[style*="background-color:#1F2F3D"],
      body.ls-light-theme #custom-dynamic-page .MuiPaper-root[style*="background-color: #1F2F3D"],
      body.ls-light-theme #custom-dynamic-page .MuiPaper-root[style*="background-color:#1F2F3D"] {
        background-color: #FFFFFF !important;
        border: 1px solid #DFE3E8 !important;
      }
      /* Dividers */
      body.ls-light-theme #custom-dynamic-page .MuiDivider-root {
        border-color: #DFE3E8 !important;
      }
      /* Select dropdowns */
      body.ls-light-theme #custom-dynamic-page .MuiSelect-select {
        color: #0F1922 !important;
      }
      body.ls-light-theme #custom-dynamic-page .MuiSelect-icon {
        color: #545F68 !important;
      }
      /* Avatars */
      body.ls-light-theme #custom-dynamic-page .MuiAvatar-root {
        background-color: #E8EFF5 !important;
        color: #0F1922 !important;
      }

      /* Game grid */
      body.ls-light-theme .game-grid-title-container {
        color: #0F1922 !important;
      }
      body.ls-light-theme .left-sidebar-view-more {
        color: #545F68 !important;
      }
      body.ls-light-theme .left-sidebar-grid-card {
        background-color: #F5F8FC !important;
      }

      /* Game carousel */
      body.ls-light-theme #custom-dynamic-page .MuiTypography-root {
        color: #0F1922 !important;
      }
      /* Keep "Try for free" white inside dark hover overlays */
      body.ls-light-theme #custom-dynamic-page .left-sidebar-game-overlay .MuiTypography-root,
      body.ls-light-theme #custom-dynamic-page .left-sidebar-grid-overlay .MuiTypography-root,
      body.ls-light-theme #custom-dynamic-page .left-sidebar-try-free,
      body.ls-light-theme .left-sidebar-game-overlay .MuiTypography-root,
      body.ls-light-theme .left-sidebar-grid-overlay .MuiTypography-root,
      body.ls-light-theme .left-sidebar-try-free {
        color: #ffffff !important;
      }

      /* Preserve green accent on buttons */
      body.ls-light-theme #custom-dynamic-page .custom-register-button {
        color: #000000 !important;
        background-color: #1db964 !important;
      }

      /* ── FAQ / CMS CONTENT BOXES LIGHT THEME ── */
      /* FAQ boxes, info cards, and any CMS element using dark CSS variables or inline dark bg */
      body.ls-light-theme #custom-dynamic-page .faq-box,
      body.ls-light-theme #custom-dynamic-page .faq-q,
      body.ls-light-theme #custom-dynamic-page .faq-a {
        background-color: #FFFFFF !important;
        color: #0F1922 !important;
        border-color: #DFE3E8 !important;
      }
      /* Override --bb-* dark theme CSS variables for any CMS content using them */
      body.ls-light-theme #custom-dynamic-page {
        --bb-bg-dark: #F5F8FC;
        --bb-bg-mid: #FFFFFF;
        --bb-bg-card: #FFFFFF;
        --bb-text: #0F1922;
        --bb-text-muted: #545F68;
        --bb-border: rgba(223, 227, 232, 0.6);
        --bb-border-light: rgba(223, 227, 232, 0.8);
        --bb-glass: rgba(245, 248, 252, 0.8);
        --bb-glass-hover: rgba(232, 239, 245, 0.5);
      }
      /* Catch any element with inline dark rgb backgrounds inside content */
      body.ls-light-theme #custom-dynamic-page [style*="background-color: rgb(26"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:rgb(26"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: rgb(10"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:rgb(10"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color: rgb(19"],
      body.ls-light-theme #custom-dynamic-page [style*="background-color:rgb(19"] {
        background-color: #FFFFFF !important;
      }

      /* ── BONUS COMPONENT LIGHT THEME ── */
      /* Root wrapper */
      body.ls-light-theme .bonus-left-sidebar-theme {
        background-color: #F5F8FC !important;
        color: #0F1922 !important;
      }
      /* All text inside bonus */
      body.ls-light-theme .bonus-left-sidebar-theme * {
        color: #0F1922 !important;
      }
      /* Override ALL dark backgrounds inside bonus component (styled-components generate unique classes) */
      /* SidebarBox, NavBox, BonusCard, WhiteCard, ConditionsBox, etc. all use #1F2F3D / #294459 / #16222D */
      body.ls-light-theme .bonus-left-sidebar-theme .MuiBox-root,
      body.ls-light-theme .bonus-left-sidebar-theme .MuiContainer-root {
        background-color: transparent !important;
        border-color: #DFE3E8 !important;
      }
      /* Styled-component cards/boxes — target by structure */
      body.ls-light-theme .bonus-left-sidebar-theme > div > div,
      body.ls-light-theme .bonus-left-sidebar-theme > div > div > div {
        border-color: #DFE3E8 !important;
      }
      /* Bonus cards and sidebar boxes (styled-components with dark bg from .bonus-left-sidebar-theme &) */
      body.ls-light-theme .bonus-component-wrapper div {
        background-color: unset;
      }
      body.ls-light-theme .bonus-left-sidebar-theme .MuiGrid-item > div {
        background-color: #FFFFFF !important;
        border: 1px solid #DFE3E8 !important;
        border-radius: 8px;
      }
      /* Nav buttons in sidebar */
      body.ls-light-theme .bonus-left-sidebar-theme .MuiButton-root {
        color: #0F1922 !important;
      }
      body.ls-light-theme .bonus-left-sidebar-theme .MuiButton-root.Mui-selected,
      body.ls-light-theme .bonus-left-sidebar-theme .MuiButton-root[class*="active"] {
        color: #1db964 !important;
      }
      /* Tabs */
      body.ls-light-theme .bonus-left-sidebar-theme .MuiTabs-root {
        border-color: #DFE3E8 !important;
      }
      body.ls-light-theme .bonus-left-sidebar-theme .MuiTabs-indicator {
        background-color: #1db964 !important;
      }
      body.ls-light-theme .bonus-left-sidebar-theme .MuiTab-root {
        color: #545F68 !important;
      }
      body.ls-light-theme .bonus-left-sidebar-theme .MuiTab-root.Mui-selected {
        color: #1db964 !important;
      }
      body.ls-light-theme .bonus-left-sidebar-theme .MuiTabs-scrollButtons {
        color: #545F68 !important;
      }
      /* Card tag buttons (styled CardTag with #294459 bg) */
      body.ls-light-theme .bonus-left-sidebar-theme button[class*="MuiButton"] {
        background-color: #E8EFF5 !important;
        color: #0F1922 !important;
      }
      /* InfoBar (green accent bar) — keep green */
      body.ls-light-theme .bonus-left-sidebar-theme [class*="InfoBar"],
      body.ls-light-theme .bonus-left-sidebar-theme div[style*="background-color: #00C082"],
      body.ls-light-theme .bonus-left-sidebar-theme div[style*="background:#00C082"] {
        background-color: #1db964 !important;
        color: #000000 !important;
      }
      body.ls-light-theme .bonus-left-sidebar-theme [class*="InfoBar"] * {
        color: #000000 !important;
      }
      /* Progress bars */
      body.ls-light-theme .bonus-left-sidebar-theme .MuiLinearProgress-root {
        background-color: #E8EFF5 !important;
      }
      body.ls-light-theme .bonus-left-sidebar-theme .MuiLinearProgress-bar {
        background-color: #1db964 !important;
      }
      /* Inputs */
      body.ls-light-theme .bonus-left-sidebar-theme .MuiOutlinedInput-root {
        background-color: #F5F8FC !important;
        color: #0F1922 !important;
      }
      body.ls-light-theme .bonus-left-sidebar-theme .MuiOutlinedInput-notchedOutline {
        border-color: #DFE3E8 !important;
      }
      body.ls-light-theme .bonus-left-sidebar-theme .MuiSelect-select {
        color: #0F1922 !important;
      }
      body.ls-light-theme .bonus-left-sidebar-theme .MuiSelect-icon {
        color: #545F68 !important;
      }
      /* EnCursoTag and CardTag — styled span/button with #294459 bg */
      body.ls-light-theme .bonus-left-sidebar-theme span[class*="css-"] {
        background-color: #E8EFF5 !important;
        color: #0F1922 !important;
      }
      /* Conditions box (styled with #16222D bg) — white card */
      body.ls-light-theme .bonus-left-sidebar-theme div[class*="css-"] {
        border-color: #DFE3E8 !important;
      }
      /* Action/CTA buttons — keep green */
      body.ls-light-theme .bonus-left-sidebar-theme button[style*="background: linear-gradient"],
      body.ls-light-theme .bonus-left-sidebar-theme button[style*="background-color: #00C082"],
      body.ls-light-theme .bonus-left-sidebar-theme button[style*="background-color:#00C082"] {
        color: #000000 !important;
      }
      /* Checkbox/radio labels */
      body.ls-light-theme .bonus-left-sidebar-theme .MuiFormControlLabel-label {
        color: #0F1922 !important;
      }

      /* ── HISTORY / PROFILE / CONTACT PAGES LIGHT THEME ── */
      /* Table headers */
      body.ls-light-theme #custom-dynamic-page table th,
      body.ls-light-theme #custom-dynamic-page th[style*="background"] {
        background-color: #E8EFF5 !important;
        color: #0F1922 !important;
      }
      body.ls-light-theme #custom-dynamic-page table td {
        color: #0F1922 !important;
        border-color: #DFE3E8 !important;
      }
      body.ls-light-theme #custom-dynamic-page table {
        border-color: #DFE3E8 !important;
      }
      /* Tab buttons */
      body.ls-light-theme #custom-dynamic-page .MuiTab-root,
      body.ls-light-theme #custom-dynamic-page .MuiTabs-root {
        color: #0F1922 !important;
      }
      body.ls-light-theme #custom-dynamic-page .MuiTab-root.Mui-selected {
        color: #1db964 !important;
      }
      body.ls-light-theme #custom-dynamic-page .MuiTabs-indicator {
        background-color: #1db964 !important;
      }
      /* Input fields */
      body.ls-light-theme #custom-dynamic-page .MuiInputBase-root,
      body.ls-light-theme #custom-dynamic-page .MuiOutlinedInput-root {
        color: #0F1922 !important;
        background-color: #FFFFFF !important;
      }
      body.ls-light-theme #custom-dynamic-page .MuiOutlinedInput-notchedOutline {
        border-color: #DFE3E8 !important;
      }
      body.ls-light-theme #custom-dynamic-page .MuiInputLabel-root {
        color: #545F68 !important;
      }
      body.ls-light-theme #custom-dynamic-page .MuiFormHelperText-root {
        color: #545F68 !important;
      }
      /* Buttons inside content area */
      body.ls-light-theme #custom-dynamic-page .MuiButton-contained {
        color: #000000 !important;
      }
      body.ls-light-theme #custom-dynamic-page .MuiButton-containedPrimary {
        color: #FFFFFF !important;
      }
      body.ls-light-theme #custom-dynamic-page .MuiButton-textPrimary {
        color: #0F1922 !important;
      }
      body.ls-light-theme #custom-dynamic-page .MuiButton-textPrimary .MuiTypography-body1 {
        color: #0F1922 !important;
      }
      body.ls-light-theme #custom-dynamic-page .MuiButton-outlined {
        color: #0F1922 !important;
        border-color: #DFE3E8 !important;
      }
      /* Chips and tags */
      body.ls-light-theme #custom-dynamic-page .MuiChip-root {
        background-color: #E8EFF5 !important;
        color: #0F1922 !important;
      }
      /* ── DIALOGS / MODALS LIGHT THEME ── */
      /* All dialogs (LogoutDialog, WelcomeModal, WhatsAppPopup, ChangePassword, TokenExpired, etc.) */
      body.ls-light-theme .MuiDialog-paper {
        background-color: #FFFFFF !important;
        background: #FFFFFF none !important;
        background-image: none !important;
        color: #0F1922 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        border: none !important;
        outline: none !important;
        border-radius: 12px !important;
      }
      body.ls-light-theme .MuiDialog-paper[style] {
        --Paper-shadow: none;
        --Paper-overlay: none;
      }
      body.ls-light-theme .MuiDialog-paper * {
        color: #0F1922 !important;
      }
      body.ls-light-theme .MuiDialogTitle-root {
        color: #0F1922 !important;
      }
      body.ls-light-theme .MuiDialogContent-root {
        color: #0F1922 !important;
        background-color: #FFFFFF !important;
      }
      body.ls-light-theme .MuiDialogActions-root {
        background-color: #FFFFFF !important;
      }
      /* Dialog inner boxes with dark backgrounds */
      body.ls-light-theme .MuiDialog-paper .MuiBox-root {
        background-color: transparent !important;
      }
      body.ls-light-theme .MuiDialog-paper [style*="background: #"],
      body.ls-light-theme .MuiDialog-paper [style*="background:#"],
      body.ls-light-theme .MuiDialog-paper [style*="background-color: #0"],
      body.ls-light-theme .MuiDialog-paper [style*="background-color:#0"],
      body.ls-light-theme .MuiDialog-paper [style*="background-color: #1"],
      body.ls-light-theme .MuiDialog-paper [style*="background-color:#1"],
      body.ls-light-theme .MuiDialog-paper [style*="background-color: #2"],
      body.ls-light-theme .MuiDialog-paper [style*="background-color:#2"],
      body.ls-light-theme .MuiDialog-paper [style*="background-color: #3"],
      body.ls-light-theme .MuiDialog-paper [style*="background-color:#3"] {
        background-color: #FFFFFF !important;
        background: #FFFFFF !important;
      }
      /* Dialog inputs */
      body.ls-light-theme .MuiDialog-paper .MuiOutlinedInput-root {
        background-color: #F5F8FC !important;
        color: #0F1922 !important;
      }
      body.ls-light-theme .MuiDialog-paper .MuiOutlinedInput-notchedOutline {
        border-color: #DFE3E8 !important;
      }
      body.ls-light-theme .MuiDialog-paper .MuiInputLabel-root {
        color: #545F68 !important;
      }
      /* Dialog close/icon buttons */
      body.ls-light-theme .MuiDialog-paper .MuiIconButton-root svg {
        color: #545F68 !important;
      }
      /* Keep green/colored action buttons readable */
      body.ls-light-theme .MuiDialog-paper .MuiButton-contained {
        color: #000000 !important;
      }
      body.ls-light-theme .MuiDialog-paper .MuiButton-containedPrimary {
        color: #FFFFFF !important;
      }
      body.ls-light-theme .MuiDialog-paper .MuiButton-outlined {
        color: #0F1922 !important;
        border-color: #DFE3E8 !important;
      }
      /* Dialog backdrop */
      body.ls-light-theme .MuiDialog-root .MuiBackdrop-root {
        background: rgba(0, 0, 0, 0.3) !important;
      }

      /* ── PROFILE DRAWER (RIGHT SIDE) LIGHT THEME ── */
      body.ls-light-theme .MuiDrawer-paperAnchorRight {
        background-color: #FFFFFF !important;
        background: #FFFFFF !important;
        color: #0F1922 !important;
      }
      body.ls-light-theme .MuiDrawer-paperAnchorRight * {
        color: #0F1922 !important;
      }
      body.ls-light-theme .MuiDrawer-paperAnchorRight .MuiListItemIcon-root svg {
        color: #545F68 !important;
      }
      body.ls-light-theme .MuiDrawer-paperAnchorRight .MuiAvatar-root {
        background-color: #E8EFF5 !important;
        color: #0F1922 !important;
      }
      body.ls-light-theme .MuiDrawer-paperAnchorRight .MuiOutlinedInput-root {
        color: #0F1922 !important;
        background-color: #F5F8FC !important;
      }
      body.ls-light-theme .MuiDrawer-paperAnchorRight .MuiOutlinedInput-notchedOutline {
        border-color: #DFE3E8 !important;
      }
      body.ls-light-theme .MuiDrawer-paperAnchorRight .MuiIconButton-root svg {
        color: #545F68 !important;
      }
      body.ls-light-theme .MuiDrawer-paperAnchorRight .MuiList-root {
        border-color: #DFE3E8 !important;
      }
      body.ls-light-theme .MuiDrawer-paperAnchorRight .MuiListItemButton-root:hover {
        background-color: #F5F8FC !important;
      }
      /* Promo code section in drawer — dark bg from sx prop (#16222D, #294459 border) */
      body.ls-light-theme .MuiDrawer-paperAnchorRight .MuiBox-root {
        background-color: transparent !important;
        border-color: #DFE3E8 !important;
      }
      body.ls-light-theme .MuiDrawer-paperAnchorRight .MuiBox-root[class*="mui-1er5sqv"],
      body.ls-light-theme .MuiDrawer-paperAnchorRight .MuiBox-root[class*="css-"] {
        background-color: transparent !important;
        border-color: #DFE3E8 !important;
      }
      /* Drawer site menu */
      body.ls-light-theme .MuiDrawer-paperAnchorRight .drawer-site-menu {
        background-color: transparent !important;
      }
      body.ls-light-theme .MuiDrawer-paperAnchorRight .drawer-site-menu .MuiListItemButton-root {
        background-color: transparent !important;
      }
      body.ls-light-theme .MuiDrawer-paperAnchorRight .drawer-site-menu .MuiListItemButton-root:hover {
        background-color: #F5F8FC !important;
      }

      /* Promo-code label + field + verify button — the page-level surfaces (Bonus page,
         profile/MisDatos) render OUTSIDE any Dialog or the right drawer, so their inline
         color:'white' stayed white on the white light-theme page background and vanished.
         Force dark ink in light theme; dark theme keeps the inline white default. Field
         bg/border mirror the drawer promo field for a consistent look across surfaces. */
      body.ls-light-theme .ls-promo-code-title {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-promo-code-field .MuiOutlinedInput-root {
        color: #0F1922 !important;
        background-color: #F5F8FC !important;
      }
      body.ls-light-theme .ls-promo-code-field .MuiOutlinedInput-input {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-promo-code-field .MuiOutlinedInput-notchedOutline {
        border-color: #DFE3E8 !important;
      }
      body.ls-light-theme .ls-promo-code-field .MuiOutlinedInput-input::placeholder {
        color: #8497A6 !important;
        opacity: 1 !important;
      }
      body.ls-light-theme .ls-promo-code-verify {
        color: #0F1922 !important;
        background-color: #E8EFF5 !important;
      }
      body.ls-light-theme .ls-promo-code-verify:hover {
        background-color: #DFE3E8 !important;
      }
      body.ls-light-theme .ls-promo-code-verify svg {
        color: #0F1922 !important;
      }

      /* ── FOOTER LIGHT THEME ── */
      body.ls-light-theme #left-sidebar-dynamic-footer * {
        color: #545F68 !important;
      }
      body.ls-light-theme #left-sidebar-dynamic-footer a:hover {
        color: #0F1922 !important;
      }

      /* Logo — if SVG is white, invert for light bg */
      body.ls-light-theme .ls-header-logo svg {
        filter: brightness(0) !important;
      }

      /* ── LIGHT THEME MOBILE OVERRIDES ── */
      @media (max-width: 900px) {
        body.ls-light-theme .ls-mobile-bottom-nav {
          background-color: #FFFFFF !important;
          color: #545F68 !important;
          border-top: 1px solid #DFE3E8 !important;
        }
        /* LIGHT theme: bottom-nav icons + hamburger menu = BLUE (#1556AB brand-primary) */
        body.ls-light-theme .ls-mobile-bottom-nav a,
        body.ls-light-theme .ls-mobile-bottom-nav .ls-mobile-nav-item {
          color: #1556AB !important;
        }
        body.ls-light-theme .ls-mobile-drawer-header {
          background-color: #FFFFFF !important;
        }
        body.ls-light-theme .ls-mobile-drawer-header svg {
          filter: brightness(0) !important;
        }
        body.ls-light-theme .ls-mobile-drawer-close {
          color: #545F68 !important;
        }
        body.ls-light-theme .ls-mobile-drawer-close svg {
          stroke: #545F68 !important;
        }
        body.ls-light-theme .ls-mobile-drawer-divider {
          border-top-color: #DFE3E8 !important;
        }
        body.ls-light-theme .ls-mobile-drawer-nav {
          background-color: #FFFFFF !important;
          border-bottom-color: #DFE3E8 !important;
        }
        body.ls-light-theme .ls-mobile-drawer-nav a {
          color: #545F68 !important;
        }
        body.ls-light-theme .ls-mobile-drawer-nav a svg {
          color: #545F68 !important;
        }
        body.ls-light-theme .ls-mobile-drawer-nav a:hover {
          color: #0F1922 !important;
        }
        body.ls-light-theme .ls-mobile-drawer-nav a:hover svg {
          color: #1db964 !important;
        }
        body.ls-light-theme .ls-mobile-drawer-nav a.active {
          color: #0F1922 !important;
        }
        body.ls-light-theme .ls-mobile-drawer-nav a.active svg {
          color: #1db964 !important;
        }
        body.ls-light-theme .ls-mobile-drawer-nav a.active::after {
          background: linear-gradient(90deg, transparent 0%, #1db964 30%, #1db964 70%, transparent 100%) !important;
        }
        body.ls-light-theme .ls-mobile-promo-btn .ls-promo-circle {
          border-color: #1db964 !important;
          background-color: #FFFFFF !important;
          color: #1db964 !important;
        }
        /* LIGHT theme: center promo/login icon = BLUE (#1556AB brand-primary) */
        body.ls-light-theme .ls-mobile-promo-btn .ls-promo-icon-wrap svg {
          color: #1556AB !important;
          fill: #1556AB !important;
        }
        body.ls-light-theme .ls-mobile-promo-btn .ls-promo-icon-wrap svg path {
          fill: #1556AB !important;
          color: #1556AB !important;
        }
      }

      /* Light theme: Logo/lower slider overrides */
      body.ls-light-theme .ls-slider-title {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-slider-title span svg {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-logo-slider {
        background-color: transparent !important;
      }
      body.ls-light-theme .ls-logo-card {
        background-color: rgba(230, 235, 240, 0.6) !important;
        border-color: rgba(200, 210, 220, 0.5) !important;
      }
      body.ls-light-theme .ls-logo-img {
        /* Was brightness(0) which forced logos to solid-black silhouettes (all color lost).
           Render at native color in light theme. */
        filter: none !important;
      }

      /* Light theme: Hero slider overrides */
      body.ls-light-theme .ls-hero-slider {
        background-color: #F5F8FC !important;
      }

      /* Light theme: Auth dialogs (login, register, forgot password, OTP, change password, logout) */
      body.ls-light-theme .ls-auth-dialog .MuiPaper-root {
        color: #0F1922 !important;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15) !important;
      }
      body.ls-light-theme .ls-auth-dialog .auth-dialog-header {
        background: #FFFFFF !important;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08) !important;
      }
      body.ls-light-theme .ls-auth-dialog .auth-dialog-header svg {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-auth-dialog .MuiContainer-root,
      body.ls-light-theme .ls-auth-dialog .MuiDialogContent-root {
        background: #FFFFFF !important;
      }
      body.ls-light-theme .ls-auth-dialog .MuiDialogTitle-root {
        background: #FFFFFF !important;
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-auth-dialog .MuiDialogTitle-root svg {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-auth-dialog .MuiDialogActions-root {
        background: #FFFFFF !important;
      }
      /* Text colors */
      body.ls-light-theme .ls-auth-dialog .MuiTypography-root {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-auth-dialog a {
        color: #0F1922 !important;
      }
      /* Text field overrides */
      body.ls-light-theme .ls-auth-dialog .MuiOutlinedInput-root {
        background: #f5f7fa !important;
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-auth-dialog .MuiOutlinedInput-root input {
        color: #0F1922 !important;
      }
      body.ls-light-theme .ls-auth-dialog .MuiOutlinedInput-root fieldset {
        border-color: #DFE3E8 !important;
      }
      body.ls-light-theme .ls-auth-dialog .MuiOutlinedInput-root:hover fieldset {
        border-color: #b0b8c4 !important;
      }
      body.ls-light-theme .ls-auth-dialog .MuiOutlinedInput-root.Mui-focused fieldset {
        border-color: #1db964 !important;
      }
      body.ls-light-theme .ls-auth-dialog .MuiInputLabel-root {
        color: #545F68 !important;
      }
      body.ls-light-theme .ls-auth-dialog .MuiInputLabel-root.Mui-focused {
        color: #1db964 !important;
      }
      /* Icon buttons inside text fields */
      body.ls-light-theme .ls-auth-dialog .MuiIconButton-root {
        color: #545F68 !important;
      }
      /* Close icon on header */
      body.ls-light-theme .ls-auth-dialog .auth-dialog-header .MuiIconButton-root {
        color: #0F1922 !important;
      }
      /* Action buttons - keep the green gradient for left-sidebar */
      body.ls-light-theme .ls-auth-dialog .rsd-action-button {
        background: linear-gradient(90deg, #00e676, #00bfa5) !important;
        color: #000 !important;
      }
      body.ls-light-theme .ls-auth-dialog .rsd-action-button:hover {
        background: linear-gradient(90deg, #00c853, #009688) !important;
      }
      /* Links (forgot password, create account) */
      body.ls-light-theme .ls-auth-dialog span[style*="cursor: pointer"],
      body.ls-light-theme .ls-auth-dialog .MuiTypography-root[role="button"] {
        color: #1db964 !important;
      }
      /* Phone input overrides */
      body.ls-light-theme .ls-auth-dialog .react-international-phone-input-container {
        background: #f5f7fa !important;
      }
      body.ls-light-theme .ls-auth-dialog .react-international-phone-input-container .react-international-phone-input {
        background: #f5f7fa !important;
        color: #0F1922 !important;
        border-color: #DFE3E8 !important;
      }
      body.ls-light-theme .ls-auth-dialog .react-international-phone-country-selector-button {
        background: #f5f7fa !important;
        border-color: #DFE3E8 !important;
      }
      /* Custom select overrides */
      body.ls-light-theme .ls-auth-dialog .MuiSelect-select {
        color: #0F1922 !important;
        background: #f5f7fa !important;
      }
      body.ls-light-theme .ls-auth-dialog .MuiSelect-icon {
        color: #545F68 !important;
      }
      /* OTP input boxes */
      body.ls-light-theme .ls-auth-dialog .MuiOutlinedInput-root input[style*="text-align: center"] {
        color: #0F1922 !important;
      }
      /* OTP timer pill */
      body.ls-light-theme .ls-auth-dialog [style*="border-radius: 20px"] {
        background-color: rgba(0, 0, 0, 0.05) !important;
        border-color: rgba(0, 0, 0, 0.1) !important;
      }
      /* Alert messages - keep their colors */
      body.ls-light-theme .ls-auth-dialog .MuiAlert-root .MuiTypography-root {
        color: inherit !important;
      }
      /* Checkbox */
      body.ls-light-theme .ls-auth-dialog .MuiCheckbox-root {
        color: #545F68 !important;
      }
      body.ls-light-theme .ls-auth-dialog .MuiCheckbox-root.Mui-checked {
        color: #1db964 !important;
      }
      /* Date picker / Picker overrides */
      body.ls-light-theme .ls-auth-dialog .picker-container {
        background: #f5f7fa !important;
      }

      /* ============================================
         Template 2 V2 - structural positioning rules.
         Mirrors V1 layout paradigm (fixed header pinned to top, fixed sidebar pinned to
         left at 260px, body content offset right by 260px via the shared has-left-sidebar
         body class) but targets the -v2 ids. Visual styling stays V2 own (inline styles
         from the GrapesJS components); these rules only handle position/size so the page
         aligns identically to V1 in terms of layout.
         ============================================ */
      #left-sidebar-dynamic-header-v2 {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99 !important;
      }
      #left-sidebar-dynamic-nav-v2 {
        position: fixed !important;
        left: 0 !important;
        /* Default top offset = V2 header height (64px). The JS polling loop in this hook
           (adjustForHeaderHeight) will refine this once the real header element mounts,
           but the static fallback prevents the header from briefly overlapping the
           sidebar on first paint. */
        top: 64px !important;
        height: calc(100dvh - 64px) !important;
        width: 260px !important;
        max-width: 260px !important;
        min-width: 260px !important;
        z-index: 98 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Hide the scrollbar but keep scrolling functional. brasildasorte.css ships a
           GLOBAL ::-webkit-scrollbar width-6px + thumb gradient rule (line 683-696 of
           public/rsd_home_styles/brasildasorte.css) that paints every scrollable element
           on the page — including this sidebar — with a 6px gradient bar. We win on
           specificity (ID-scoped selector beats the bare global selector) and then also
           nuke the track + thumb pseudo-elements explicitly so the override cannot be
           subverted by a later track/thumb-only declaration. */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        /* iOS FIX: do NOT use transform: translateX(0) here. A non-none transform
           on a fixed element creates a containing-block trap in iOS WebKit that
           drags sibling position: fixed; bottom: 0 elements (the bottom nav) toward
           mid-screen. We animate left instead. See V1 desktop rule for full detail. */
        transition: left 0.3s ease !important;
        margin: 0 !important;
        padding: 0 0 80px 0 !important;
        box-sizing: border-box !important;
      }
      #left-sidebar-dynamic-nav-v2::-webkit-scrollbar,
      #left-sidebar-dynamic-nav-v2 *::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
        background: transparent !important;
      }
      #left-sidebar-dynamic-nav-v2::-webkit-scrollbar-track,
      #left-sidebar-dynamic-nav-v2 *::-webkit-scrollbar-track {
        display: none !important;
        background: transparent !important;
      }
      #left-sidebar-dynamic-nav-v2::-webkit-scrollbar-thumb,
      #left-sidebar-dynamic-nav-v2 *::-webkit-scrollbar-thumb {
        display: none !important;
        background: transparent !important;
      }
      /* Bottom spacer so the last nav item is fully scrollable. */
      #left-sidebar-dynamic-nav-v2::after {
        content: '' !important;
        display: block !important;
        min-height: 80px !important;
        width: 100% !important;
      }
      /* Clear any stray GrapesJS transform that would break position:fixed on the footer. */
      #left-sidebar-dynamic-footer-v2 {
        transform: none !important;
      }
      /* Sidebar collapse (hamburger toggle) — slide V2 nav off-screen like V1 does.
         iOS FIX: animate left instead of transform to avoid the iOS WebKit
         containing-block trap that drags bottom nav to mid-screen. */
      body.left-sidebar-nav-collapsed #left-sidebar-dynamic-nav-v2 {
        left: -260px !important;
      }
      /* Body padding-left: 260px (shared with V1 via .has-left-sidebar) already pushes
         content right of the fixed sidebar. No extra rule needed. */

      /* ============================================
         Template 2 V2 — FULLY RESPONSIVE FOOTER LAYOUT.
         GrapesJS-side editor.addComponents(style element) only injects into the editor
         canvas; on the live frontend that style is NOT re-applied. So the
         responsive rules MUST live in this hook's injected CSS to take effect.

         Progressive grid breakpoints — link-column count adapts to viewport:
            ≥ 1280px : 4 columns (Apostas | Comunidade | Regras | Pagamento)
           1024-1279 : 3 columns (4th wraps to row 2)
            640-1023 : 2 columns
              < 640  : 1 column (fully stacked)

         Top container (.ls-footer-v2-top: brand 288px | link-grid) goes
         column-stacked below 1024px so the brand row sits ABOVE the link grid
         on tablets and phones. Everything centers horizontally when stacked.
         ============================================ */
      #left-sidebar-dynamic-footer-v2 .ls-footer-v2-cols {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 32px !important;
        justify-items: start !important;
        align-items: start !important;
        width: 100% !important;
      }
      /* 4 → 3 cols at <1280px */
      @media (max-width: 1279px) {
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-cols {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 28px !important;
        }
      }
      /* Top row stacks (brand above grid) + 3 → 2 cols at <1024px. Brand block
         centers horizontally inside the now-full-width top container. */
      @media (max-width: 1023px) {
        #left-sidebar-dynamic-footer-v2 {
          padding: 24px 16px 32px 16px !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-top {
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          gap: 32px !important;
          grid-template-columns: none !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-brand {
          width: 100% !important;
          align-items: center !important;
          text-align: center !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-cols {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 24px 32px !important;
          /* Center each column BLOCK inside its grid cell, but leave the text
             inside (heading + <ul> links) LEFT-aligned. */
          justify-items: center !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-col,
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-col-utils {
          width: 100% !important;
          max-width: 280px !important;
          /* margin: 0 auto handles the horizontal centering of the column box; we
             intentionally do NOT set text-align/align-items center here so links
             read naturally left-to-right. */
          margin: 0 auto !important;
          text-align: left !important;
          align-items: flex-start !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-col h2,
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-col-utils h2 {
          text-align: left !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-list {
          text-align: left !important;
          padding-left: 0 !important;
          list-style: none !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-payment {
          display: flex !important;
          flex-direction: column !important;
          align-items: flex-start !important;
        }
      }
      /* 2 → 1 col at <640px. Legal block stacks, partners stack, etc. */
      @media (max-width: 639px) {
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-cols {
          grid-template-columns: 1fr !important;
          gap: 24px !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-col,
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-col-utils {
          max-width: 360px !important;
          margin: 0 auto !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-legal {
          flex-direction: column !important;
          align-items: center !important;
          text-align: center !important;
          gap: 16px !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-legal-text {
          text-align: center !important;
          flex: 0 1 auto !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-sigap-img {
          width: 100% !important;
          max-width: 288px !important;
          margin: 0 auto !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-partners {
          flex-direction: column !important;
          gap: 20px !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-responsible {
          align-items: center !important;
          text-align: center !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-bottom-links {
          gap: 6px !important;
          flex-wrap: wrap !important;
        }
      }
      @media (max-width: 479px) {
        #left-sidebar-dynamic-footer-v2 {
          padding: 16px 12px 24px 12px !important;
        }
        #left-sidebar-dynamic-footer-v2 .ls-footer-v2-legal-text {
          font-size: 11px !important;
        }
      }

      /* ============================================
         Template 2 V2 — DESKTOP TAB ALIGNMENT.
         The saved GrapesJS markup ships with justify-content: center on
         each tab anchor, an extra pl-2 (8px) on the inner icon-row div,
         plus a 16px padding-left on the strip itself — Cassino/Esportes
         end up centered in the 254px column with a fat gap on the left.
         Force flex-start + zero inner padding so the tabs hug the left
         edge with no useless slack.
         These same overrides normalise the .iconify span + its SVG so the
         icon stays the right size and centered with the label after a
         save (GrapesJS rewrites inline styles on save, which left the
         icon visually misaligned vs. the first-render canvas state).
         ============================================ */
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tabs {
        padding-left: 0 !important;
        justify-content: flex-start !important;
      }
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tab {
        justify-content: flex-start !important;
        width: auto !important;
        padding: 8px 12px !important;
      }
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tab > div:first-child {
        padding-left: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
      }
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tab .iconify {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        line-height: 1 !important;
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
      }
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tab .iconify svg {
        width: 18px !important;
        height: 18px !important;
        display: block !important;
      }
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tab span.ml-1,
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tab span.font-sans {
        margin-left: 0 !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
      }

      /* ============================================
         Template 2 V2 — TAB-INNER LAYOUT (persistent against GrapesJS strip).
         GrapesJS strips inline style attrs from the icon/label spans inside the
         tab content strings on save/reload, which displaces the icon when the
         page reloads. These rules re-apply the layout via stable class selectors
         so the tabs render correctly on every refresh of the live page.
         ============================================ */
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tabs {
        padding: 0 !important;
        gap: 0 !important;
        column-gap: 0 !important;
        align-items: stretch !important;
      }
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tabs > .ls-header-v2-tab {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: auto !important;
      }
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tab .flex.pl-2.items-center {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-left: 0 !important;
        column-gap: 4px !important;
      }
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tab .iconify {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        line-height: 1 !important;
        /* Brand-primary green for both tab icons (active + inactive). Survives
           GrapesJS strip of the inline style="color:#06DA73" on save/reload. */
        color: #06DA73 !important;
      }
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tab .iconify svg {
        width: 18px !important;
        height: 18px !important;
        display: block !important;
        color: #06DA73 !important;
        fill: #06DA73 !important;
      }
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tab .iconify svg path,
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tab .iconify svg circle {
        fill: #06DA73 !important;
      }
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tab .ml-1 {
        margin-left: 4px !important;
        font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif !important;
        color: inherit !important;
      }

      /* V2 header tabs — simple green underline at the bottom of the tab box.
         Default: height: 0 (hidden). Active or hovered: height: 2px (visible).
         Pinned at bottom: 0 of the tab anchor (which sits flush with the header's
         bottom edge) so the underline is visible inside the header, not clipped
         16px below it like the original Tailwind -bottom-4 class would place it. */
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tabs .ls-header-v2-tab-underline {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        /* Push the underline below the tab anchor so it visually pins to the bottom
           edge of the 64px header (the anchor + its 8px padding sits a few px above
           the header bottom; -16px lines the underline up with the header border). */
        bottom: -16px !important;
        height: 0 !important;
        width: 100% !important;
        background-color: #06DA73 !important;
        pointer-events: none !important;
        transition: height 0.2s ease !important;
      }
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tabs .ls-header-v2-tab-active .ls-header-v2-tab-underline,
      #left-sidebar-dynamic-header-v2 .ls-header-v2-tabs .ls-header-v2-tab:hover .ls-header-v2-tab-underline {
        height: 2px !important;
      }

      /* V2 header: constrain the center + actions cluster to a 1100px-max area
         centered in the space to the right of the 254px tabs column.
         max(0px, calc(...)) clamps to 0 on viewports narrower than 1354px (=254+1100)
         so the existing flat-flex layout kicks back in seamlessly on tablets/phones.
         No DOM wrapper, no structural change — only direct-child margins. */
      #left-sidebar-dynamic-header-v2 > .ls-header-v2-center {
        margin-left: max(0px, calc((100vw - 254px - 1100px) / 2)) !important;
      }
      #left-sidebar-dynamic-header-v2 > .ls-header-v2-actions {
        margin-right: max(0px, calc((100vw - 254px - 1100px) / 2)) !important;
      }

      /* ============================================
         Template 2 V2 — RESPONSIVE HEADER LAYOUT.
         Same reason as the footer: GrapesJS canvas styles don't propagate to
         the live frontend, so the V2 header responsive rules live here.
         ≤1023px : hide the Cassino/Esportes tabs column (mobile drawer covers those).
         ≤767px  : shrink action buttons, drop the promo gift icon.
         ≤400px  : tighter buttons + smaller logo for very narrow phones.
         ============================================ */
      @media (max-width: 1023px) {
        #left-sidebar-dynamic-header-v2 .ls-header-v2-tabs {
          display: none !important;
        }
        #left-sidebar-dynamic-header-v2 .ls-header-v2-center {
          padding: 0 12px !important;
        }
      }
      @media (max-width: 767px) {
        #left-sidebar-dynamic-header-v2 {
          padding: 0 !important;
        }
        #left-sidebar-dynamic-header-v2 .ls-header-v2-center {
          padding: 0 8px !important;
          gap: 8px !important;
        }
        #left-sidebar-dynamic-header-v2 .ls-header-v2-promo {
          display: none !important;
        }
        #left-sidebar-dynamic-header-v2 .ls-header-v2-actions {
          padding-right: 8px !important;
          gap: 4px !important;
        }
        #left-sidebar-dynamic-header-v2 .ls-header-v2-btn {
          padding: 6px 10px !important;
          font-size: 12px !important;
        }
        #left-sidebar-dynamic-header-v2 .ls-header-v2-logo {
          max-width: 120px !important;
        }
      }
      @media (max-width: 400px) {
        #left-sidebar-dynamic-header-v2 .ls-header-v2-btn {
          padding: 5px 8px !important;
          font-size: 11px !important;
        }
        #left-sidebar-dynamic-header-v2 .ls-header-v2-logo {
          max-width: 96px !important;
        }
      }

      /* ===========================================================
         V2 Mobile bottom nav + V2 sidebar mobile drawer
         -----------------------------------------------------------
         V2 has its own Cometa-style 5-cell bottom nav (Menu / Cassino /
         Clube da Sorte / Esportes / Conta) that replaces the V1
         .ls-mobile-bottom-nav. Tap on the Menu cell toggles
         body.left-sidebar-nav-open via the shared useUserAuth handler;
         the V2 sidebar then slides in from the left as a mobile drawer.
         =========================================================== */
      /* Hide V2 bottom nav by default — only shown on screens < 1024px. */
      .ls-mobile-bottom-nav-v2 { display: none; }
      @media (max-width: 1023px) {
        .ls-mobile-bottom-nav-v2 {
          display: grid !important;
          position: fixed !important;
          bottom: 0 !important;
          left: 0 !important;
          right: 0 !important;
          width: 100% !important;
          /* iPhone X+ safe-area: extend height + pad bottom by the home-indicator
             inset so tap targets stay above the gesture bar. Resolves to 0 on
             Android/desktop. */
          height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
          padding: 0 0 env(safe-area-inset-bottom, 0px) 0 !important;
          grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
          /* z:1300 keeps the bottom nav above the V2 sidebar drawer (z:1200) and the
             backdrop (z:1199) so the Menu/Fechar toggle stays tappable while the drawer
             is open. */
          z-index: 1300 !important;
          /* brand-sidebar (#0E1420) + brand-separator (#1E293B) border-top */
          background-color: rgb(14, 20, 32) !important;
          border-top: 1px solid rgb(30, 41, 59) !important;
          color: #FFFFFF !important;
          font-family: Montserrat, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
          box-sizing: border-box !important;
        }
        .ls-mobile-bottom-nav-v2 .ls-mobile-nav-v2-item {
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 4px !important;
          height: 100% !important;
          width: 100% !important;
          /* text-gray-400 (#9CA3AF) for inactive cells, like the reference markup */
          color: #9CA3AF !important;
          text-decoration: none !important;
          cursor: pointer !important;
          background: transparent !important;
          border: 0 !important;
          padding: 0 4px !important;
          box-sizing: border-box !important;
          transition: color 0.2s ease !important;
        }
        .ls-mobile-bottom-nav-v2 .ls-mobile-nav-v2-item:hover {
          color: #FFFFFF !important;
        }
        /* Active route — full white (matches V2 header tabs' active text colour) */
        .ls-mobile-bottom-nav-v2 .ls-mobile-nav-v2-item-active {
          color: #FFFFFF !important;
        }
        .ls-mobile-bottom-nav-v2 .ls-mobile-nav-v2-icon {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          width: 20px !important;
          height: 20px !important;
          color: inherit !important;
        }
        .ls-mobile-bottom-nav-v2 .ls-mobile-nav-v2-icon svg {
          width: 20px !important;
          height: 20px !important;
          color: inherit !important;
          fill: currentColor !important;
        }
        .ls-mobile-bottom-nav-v2 .ls-mobile-nav-v2-label {
          font-size: 10px !important;
          font-weight: 700 !important;
          line-height: 1 !important;
          letter-spacing: 0.02em !important;
          color: inherit !important;
          text-align: center !important;
        }

        /* ── Menu cell hamburger → X morph + label swap ───────────────────
           Three thin lines stacked with a 4px gap; on body.left-sidebar-nav-open
           they morph into an X (top rotates 45°, middle slides off, bottom
           rotates -45°). Mirrors the Cometa reference (top-rotate / move-x /
           bottom-rotate classes). The label below the icon swaps Menu → Fechar
           via display-toggle on a matched pair of <span>s. */
        .ls-mobile-menu-btn .ls-mobile-menu-icon-stack {
          position: relative !important;
          display: inline-flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          width: 16px !important;
          height: 20px !important;
          color: inherit !important;
        }
        .ls-mobile-menu-btn .ls-mobile-menu-line {
          display: block !important;
          width: 16px !important;
          height: 1px !important;
          background-color: currentColor !important;
          transition: transform 0.3s ease, opacity 0.3s ease !important;
          transform-origin: center !important;
        }
        /* Idle (drawer closed) — top sits 4px above middle, bottom 4px below.
           5px = (1px line) + (4px gap) → translate top/bottom by ±5px lines them up
           on the middle row when morphing to X. */
        .ls-mobile-menu-btn .ls-mobile-menu-line-top { margin-bottom: 4px !important; }
        .ls-mobile-menu-btn .ls-mobile-menu-line-bottom { margin-top: 4px !important; }

        body.left-sidebar-nav-open .ls-mobile-menu-btn .ls-mobile-menu-line-top {
          transform: translateY(5px) rotate(45deg) !important;
        }
        body.left-sidebar-nav-open .ls-mobile-menu-btn .ls-mobile-menu-line-middle {
          transform: translateX(-20px) !important;
          opacity: 0 !important;
        }
        body.left-sidebar-nav-open .ls-mobile-menu-btn .ls-mobile-menu-line-bottom {
          transform: translateY(-5px) rotate(-45deg) !important;
        }

        /* Label swap — "Menu" by default, "Fechar" when drawer is open. */
        .ls-mobile-menu-btn .ls-mobile-menu-label-open { display: none !important; }
        .ls-mobile-menu-btn .ls-mobile-menu-label-closed { display: block !important; }
        body.left-sidebar-nav-open .ls-mobile-menu-btn .ls-mobile-menu-label-closed { display: none !important; }
        body.left-sidebar-nav-open .ls-mobile-menu-btn .ls-mobile-menu-label-open { display: block !important; }

        /* V2 sidebar as a mobile drawer — slides in from the left when the Menu cell
           sets body.left-sidebar-nav-open. Height is shortened by 56px so it stops
           above the bottom nav instead of being covered by it; z:1200 is below the
           bottom nav z:1300 so the Menu/Fechar toggle stays on top.
           iOS FIX: animate left instead of transform: translateX(...). iOS WebKit
           treats any non-none transform on a fixed element as a new containing
           block, which traps sibling position: fixed; bottom: 0 elements (bottom
           nav) and drags them to mid-screen. left does not trigger this. */
        #left-sidebar-dynamic-nav-v2 {
          top: 0 !important;
          height: calc(100vh - 56px) !important;
          height: calc(100dvh - 56px) !important;
          width: 80vw !important;
          max-width: 320px !important;
          min-width: 0 !important;
          z-index: 1200 !important;
          left: -100vw !important;
          transition: left 0.3s ease !important;
        }
        body.left-sidebar-nav-open #left-sidebar-dynamic-nav-v2 {
          left: 0 !important;
        }
        /* Backdrop is shared between V1 and V2 — already styled in the V1 block above. */

        /* ── V2 sidebar STICKY top: logo+X close row + Cassino/Esportes tabs row ──
           Below 1024px, the V2 sidebar pins these two existing injected elements
           (.ls-mobile-drawer-header + .ls-mobile-drawer-nav) to the top of the
           scrollable sidebar so they stay visible while the user scrolls the
           Casino/Esporte section list. V1 already has equivalent rules at ≤900px;
           these mirror them but apply at ≤1023px and only inside the V2 nav.
           The existing default-hide rule .ls-mobile-drawer-* (display:none)
           gets overridden here. */
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-header {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          padding: 16px 24px !important;
          height: 64px !important;
          background-color: #0E1420 !important;
          position: sticky !important;
          top: 0 !important;
          z-index: 11 !important;
          flex-shrink: 0 !important;
          box-sizing: border-box !important;
        }
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-logo {
          display: flex !important;
          align-items: center !important;
          max-height: 32px !important;
        }
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-logo img,
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-logo svg {
          max-height: 32px !important;
          max-width: 100% !important;
          width: auto !important;
          height: auto !important;
          object-fit: contain !important;
        }
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-close {
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          color: #8497A6 !important;
          -webkit-tap-highlight-color: transparent !important;
        }
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-close svg {
          width: 32px !important;
          height: 32px !important;
        }
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-divider {
          display: none !important;
        }
        /* Second sticky row — the V2 tabs (Cassino / Esportes) sit immediately below
           the 64px-tall logo+X row so both stay pinned together as the user scrolls. */
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-nav {
          display: flex !important;
          align-items: stretch !important;
          gap: 0 !important;
          padding: 0 !important;
          background-color: #0E1420 !important;
          border-bottom: 1px solid #1E293B !important;
          position: sticky !important;
          top: 64px !important;
          z-index: 10 !important;
          flex-shrink: 0 !important;
          /* overflow: hidden — drawer-nav underline now sits at bottom: 0 inside the
             row, so we clip anything that would otherwise escape. */
          overflow: hidden !important;
        }
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-nav > .ls-header-v2-tab {
          flex: 1 1 0% !important;
          min-width: 0 !important;
          width: auto !important;
          position: relative !important;
          /* Lock all box-affecting properties to the same values whether hovered or not.
             V1 mobile-drawer-nav a:hover adds a radial-gradient background and V2 underline
             transitions height 0 to 2px on hover. Without these locks the cloned tabs
             jitter by 1-2px on hover because V1 gap:6px !important rule swaps with V2
             column-gap:4px inline style, the underline reflows the baseline, or the
             radial-gradient briefly resizes the flex item. Pin every dimension so only
             color and background-color transition. */
          height: auto !important;
          padding: 12px 8px !important;
          margin: 0 !important;
          gap: 4px !important;
          column-gap: 4px !important;
          row-gap: 0 !important;
          border: 0 !important;
          outline: 0 !important;
          box-sizing: border-box !important;
          transform: none !important;
          transition: color 0.2s ease, background-color 0.2s ease !important;
        }
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-nav > .ls-header-v2-tab:hover {
          /* Explicitly keep the hover variant on the same box dimensions/position. */
          transform: none !important;
          padding: 12px 8px !important;
          margin: 0 !important;
          gap: 4px !important;
          column-gap: 4px !important;
          border: 0 !important;
          outline: 0 !important;
        }
        /* Inner content layout — pinned identically on hover so the icon+label cluster
           stays exactly where it is. The underline stays absolutely positioned and
           overflow:hidden on the parent .ls-mobile-drawer-nav clips it so it never
           affects sibling layout. */
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-nav > .ls-header-v2-tab .flex.pl-2.items-center {
          padding-left: 0 !important;
          column-gap: 4px !important;
        }
        /* Drawer-nav tab underline — sits at bottom: 0 (inside the tab row), not -14px
           like the header (the drawer is sticky inside the sidebar scroll area and a
           negative bottom would overlap the section content below). Same green +
           height-0-to-2px transition though. */
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-nav > .ls-header-v2-tab .ls-header-v2-tab-underline {
          position: absolute !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          height: 0 !important;
          width: 100% !important;
          background-color: #06DA73 !important;
          pointer-events: none !important;
          transition: height 0.2s ease !important;
        }
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-nav > .ls-header-v2-tab-active .ls-header-v2-tab-underline,
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-nav > .ls-header-v2-tab:hover .ls-header-v2-tab-underline {
          height: 2px !important;
        }
        /* Kill V1 radial-gradient glow background on V2 tabs inside the drawer-nav
           (V1 rule .ls-mobile-drawer-nav a:hover sets a green glow which we don't want
           for V2 — only the simple green underline should indicate hover/active). */
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-nav > .ls-header-v2-tab,
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-nav > .ls-header-v2-tab:hover,
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-nav > .ls-header-v2-tab.active,
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-nav > .ls-header-v2-tab-active {
          background: transparent !important;
          background-image: none !important;
        }
        /* Also clear the ::after pseudo-element V1 paints on .active tabs in the
           drawer nav so V2 doesn't get a second underline layered on top of ours. */
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-nav > .ls-header-v2-tab.active::after,
        #left-sidebar-dynamic-nav-v2 .ls-mobile-drawer-nav > .ls-header-v2-tab-active::after {
          content: none !important;
          display: none !important;
        }
      }

      /* V2 mobile drawer — below 600px the drawer fills the ENTIRE viewport width
         (overrides the 80vw / 320px-max from the ≤1023px block above). */
      @media (max-width: 599px) {
        #left-sidebar-dynamic-nav-v2 {
          width: 100vw !important;
          max-width: 100vw !important;
          min-width: 100vw !important;
        }
        /* iOS FIX: animate left not transform. See V2 desktop rule for full detail. */
        body.left-sidebar-nav-collapsed #left-sidebar-dynamic-nav-v2 {
          left: -100vw !important;
        }
      }

      /* ============================================
         Template 2 V3 (moneybets) — structural positioning + mobile drawer.
         Mirrors the V2 block (fixed header top, fixed sidebar left, shared
         body.has-left-sidebar 260px offset) but targets the -v3 ids and the
         V3 header height (62px). Visual theming lives in moneybets.css + the
         component CSS; these rules only handle position/size/mobile-drawer.
         ============================================ */
      #left-sidebar-dynamic-header-v3 {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99 !important;
      }
      #left-sidebar-dynamic-nav-v3 {
        position: fixed !important;
        left: 0 !important;
        /* Default top offset = V3 header height (62px); the adjustForHeaderHeight
           polling loop refines it once the real header mounts. */
        top: 62px !important;
        height: calc(100dvh - 62px) !important;
        /* 280px = measured moneybets .sidebar__scroll-area footprint @1440px (content offset 280).
           The V3 content offset matches via body.has-left-sidebar-v3 in moneybets.css. */
        width: 280px !important;
        max-width: 280px !important;
        min-width: 280px !important;
        z-index: 98 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        transition: left 0.3s ease !important;
        margin: 0 !important;
        box-sizing: border-box !important;
      }
      #left-sidebar-dynamic-nav-v3::-webkit-scrollbar,
      #left-sidebar-dynamic-nav-v3 *::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
        background: transparent !important;
      }
      #left-sidebar-dynamic-nav-v3::-webkit-scrollbar-track,
      #left-sidebar-dynamic-nav-v3 *::-webkit-scrollbar-track,
      #left-sidebar-dynamic-nav-v3::-webkit-scrollbar-thumb,
      #left-sidebar-dynamic-nav-v3 *::-webkit-scrollbar-thumb {
        display: none !important;
        background: transparent !important;
      }
      #left-sidebar-dynamic-nav-v3::after {
        content: '' !important;
        display: block !important;
        min-height: 80px !important;
        width: 100% !important;
      }
      #left-sidebar-dynamic-footer-v3 {
        transform: none !important;
      }
      body.left-sidebar-nav-collapsed #left-sidebar-dynamic-nav-v3 {
        left: -320px !important;
      }
      /* Mobile drawer chrome (logo+X row + cloned segmented control) hidden on desktop. */
      #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-header,
      #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-nav,
      #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-divider {
        display: none !important;
      }

      /* ── V3 language-dropdown FOUC guard ──────────────────────────────────────
         The language selector (.ls-language-selector.ls-v3-language,
         id="sidebar__footer-language") gets its submenu-collapse + rounded-box
         styling ONLY from the async-loaded moneybets.css theme. On load/refresh —
         while the page is still awaiting the API response and the theme has not
         yet been applied — it paints fully EXPANDED and UN-styled (the "broken"
         UI). This rule (in the SYNCHRONOUS inline stylesheet, so it applies from
         the very first paint) keeps it display:none until DomainPageRenderer adds
         body.ls-v3-theme-ready the instant it activates moneybets.css — at which
         point the dropdown reveals already correctly themed. display:none (not
         visibility:hidden) so the un-collapsed submenu never reserves a tall blank
         gap while hidden. */
      #left-sidebar-dynamic-nav-v3 #sidebar__footer-language {
        display: none !important;
      }
      body.ls-v3-theme-ready #left-sidebar-dynamic-nav-v3 #sidebar__footer-language {
        display: block !important;
      }

      /* ── V3 mobile drawer (≤1279px) — sidebar becomes a slide-in drawer (moneybets switches at 1280px) ── */
      @media (max-width: 1279px) {
        #left-sidebar-dynamic-nav-v3 {
          top: 0 !important;
          height: calc(100vh - 56px) !important;
          height: calc(100dvh - 56px) !important;
          width: 80vw !important;
          max-width: 320px !important;
          min-width: 0 !important;
          z-index: 1200 !important;
          left: -100vw !important;
          transition: left 0.3s ease !important;
        }
        body.left-sidebar-nav-open #left-sidebar-dynamic-nav-v3 {
          left: 0 !important;
        }
        /* Sticky drawer header (cloned logo + close X). */
        #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-header {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          padding: 12px 16px !important;
          height: 62px !important;
          background-color: #000000 !important;
          position: sticky !important;
          top: 0 !important;
          z-index: 11 !important;
          flex-shrink: 0 !important;
          box-sizing: border-box !important;
        }
        #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-logo img { max-height: 36px !important; width: auto !important; object-fit: contain !important; }
        #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-close { cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; color: rgba(255,255,255,0.7) !important; }
        #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-close svg { width: 28px !important; height: 28px !important; }
        #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-divider { display: none !important; }
        /* Sticky drawer nav — the cloned segmented control (two buttons). */
        #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-nav {
          display: flex !important;
          align-items: stretch !important;
          gap: 4px !important;
          padding: 8px 12px !important;
          background-color: #000000 !important;
          border-bottom: 1px solid rgba(255,255,255,0.08) !important;
          position: sticky !important;
          top: 62px !important;
          z-index: 10 !important;
          flex-shrink: 0 !important;
        }
        #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-nav .segmented-control__button {
          flex: 1 1 0% !important;
          min-width: 0 !important;
          position: relative !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 8px !important;
          padding: 8px 10px !important;
          border-radius: 8px !important;
          color: rgba(255,255,255,0.6) !important;
          text-decoration: none !important;
          font-size: 14px !important;
          font-weight: 600 !important;
        }
        #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-nav .segmented-control__button--active,
        #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-nav .segmented-control__button.active { color: #ffffff !important; }
        #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-nav .segmented-control__indicator {
          position: absolute !important; inset: 0 !important; border-radius: 8px !important;
          background-color: rgba(115, 188, 31, 0.15) !important; border: 1px solid #73bc1f !important;
          z-index: 0 !important; pointer-events: none !important;
        }
        #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-nav .segmented-control__icon,
        #left-sidebar-dynamic-nav-v3 .ls-mobile-drawer-nav .segmented-control__label { position: relative !important; z-index: 1 !important; }
      }
      /* Below 600px the V3 drawer fills the full viewport width. */
      @media (max-width: 599px) {
        #left-sidebar-dynamic-nav-v3 {
          width: 100vw !important;
          max-width: 100vw !important;
          min-width: 100vw !important;
        }
        body.left-sidebar-nav-collapsed #left-sidebar-dynamic-nav-v3 {
          left: -100vw !important;
        }
        /* V3: hide the "CRÉDITOS" label in the header below 600px, keep the balance value.
           Mirrors the V1 #left-sidebar-dynamic-header .ls-balance-label rule. */
        #left-sidebar-dynamic-header-v3 .ls-balance-label {
          display: none !important;
        }
      }

      /* ── V3 header logo — shrink during responsiveness so it doesn't crowd the
         auth buttons / balance. The DYNAMIC swapped logo (useGameLogic's
         logoAnchorRegex replaces the inner <img> of <a class="custom-header-logo">)
         has NO .header__logo class, so it is sized only by its wrapper height + the
         img's own max-height/max-width. These rules cap BOTH the wrapper
         (.custom-header-logo / .ls-header-v3-logo-link) AND its <img> so the logo
         gets smaller (height + width) on tablets and phones. ── */
      /* 50% of the desktop logo (desktop .ls-header-v3-logo-link height = 36px → 18px). */
      @media (max-width: 767px) {
        #left-sidebar-dynamic-header-v3 .header__logo { height: 18px !important; }
        #left-sidebar-dynamic-header-v3 .custom-header-logo,
        #left-sidebar-dynamic-header-v3 .ls-header-v3-logo-link {
          height: 24px !important;
          max-width: 120px !important;
        }
        #left-sidebar-dynamic-header-v3 .custom-header-logo img,
        #left-sidebar-dynamic-header-v3 .ls-header-v3-logo-link img {
          max-height: 24px !important;
          max-width: 120px !important;
          width: auto !important;
          height: auto !important;
          object-fit: contain !important;
        }
      }
      @media (max-width: 400px) {
        #left-sidebar-dynamic-header-v3 .header__logo { height: 16px !important; }
        #left-sidebar-dynamic-header-v3 .custom-header-logo,
        #left-sidebar-dynamic-header-v3 .ls-header-v3-logo-link {
          height: 24px !important;
          max-width: 100px !important;
        }
        #left-sidebar-dynamic-header-v3 .custom-header-logo img,
        #left-sidebar-dynamic-header-v3 .ls-header-v3-logo-link img {
          max-height: 24x !important;
          max-width: 100px !important;
        }
      }