/* Hide legacy loaders/overlays to enforce single global loader */
        #page-loader, .page-loader, .preloader, .loading-overlay, .pl-progress, .pl-progress-bar, .pl-spinner, .pl-inner, .pl-logo-zone, .spa-progress-bar { display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important }

        /* Top fixed progress bar (green accent) */
        #bet365-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:99999;pointer-events:none}
        /* minimal flat green bar for non-blocking progress */
        #bet365-progress-bar{height:100%;background:#146c4b;box-shadow:0 6px 12px rgba(20,108,75,0.12);transition:transform 420ms cubic-bezier(.14,.8,.12,1),opacity 180ms linear;will-change:transform;transform-origin:left center}
        #bet365-progress-bar[aria-hidden="true"]{opacity:0}

        /* Full-page subtle overlay used during fade-out to avoid white flash */
        .bet365-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.02);opacity:0;pointer-events:none;transition:opacity 340ms cubic-bezier(.2,.9,.2,1);z-index:99998}
        .bet365-overlay.active{opacity:1;pointer-events:none}

        /* Minimal fade animations for body content */
        .bet365-fade-out{opacity:0.0;transform:translateY(6px);transition:opacity 200ms cubic-bezier(.2,.9,.2,1),transform 240ms cubic-bezier(.2,.9,.2,1)}
        .bet365-fade-in{opacity:1;transform:none;transition:opacity 420ms cubic-bezier(.16,1,.3,1),transform 420ms cubic-bezier(.16,1,.3,1)}

        @media (prefers-reduced-motion: reduce){
            #bet365-progress-bar{transition:none}
            .bet365-fade-out,.bet365-fade-in{transition:none}
        }
        /* When user initiates navigation to casino/live, show instant skeletons to avoid blank */
        html.betx7-next-casino #cl-skeletons,
        html.betx7-next-casino .x2-skel-grid,
        html.betx7-next-casino #sk-popular, html.betx7-next-casino #sk-new, html.betx7-next-casino #sk-reco {
            display: grid !important; opacity: 1 !important; visibility: visible !important;
        }
        html.betx7-next-live #cl-skeletons,
        html.betx7-next-live .x2-skel-grid {
            display: grid !important; opacity: 1 !important; visibility: visible !important;
        }
    
        /* Scope to navigation transition class added by SPA nav */
        html.betx7-next-live {
            --live-accent: #096641;
            --live-accent-dark: #074f37;
        }

        /* Apply to common accent usages (links, buttons, badges, active navs, pagination, dots, footers) */
        html.betx7-next-live a,
        html.betx7-next-live .text-primary,
        html.betx7-next-live .user-hud,
        html.betx7-next-live .footer-title,
        html.betx7-next-live .widget-title,
        html.betx7-next-live .badge-primary,
        html.betx7-next-live .nav-game-category-icon,
        html.betx7-next-live .nav-link-game-category.active,
        html.betx7-next-live .nav-pills .nav-link.active,
        html.betx7-next-live .page-link,
        html.betx7-next-live .page-item.active .page-link,
        html.betx7-next-live .dropdown-item.active,
        html.betx7-next-live .btn-transfer.active,
        html.betx7-next-live .selected-btn-tranfer,
        html.betx7-next-live .btn-white-outline,
        html.betx7-next-live .btn-white-outline:focus,
        html.betx7-next-live .btn-white-outline:hover,
        html.betx7-next-live .btn-primary,
        html.betx7-next-live .btn-primary-fancy,
        html.betx7-next-live .btn-primary-fancy:focus,
        html.betx7-next-live .btn-primary-fancy:hover,
        html.betx7-next-live .teaser-item,
        html.betx7-next-live .footer-copyright-top {
            color: var(--live-accent) !important;
            background-color: var(--live-accent) !important;
            border-color: var(--live-accent) !important;
        }

        /* Progress bar / carousel dots */
        html.betx7-next-live #bet365-progress-bar{background:var(--live-accent) !important; box-shadow:0 6px 16px rgba(9,102,65,0.12) !important}
        html.betx7-next-live .slick-dots .slick-active button{background:var(--live-accent) !important}
        html.betx7-next-live .slideshow-nav .slick-current:before{border-top-color:var(--live-accent) !important}

        /* Buttons: keep readable foreground */
        html.betx7-next-live .btn-primary,
        html.betx7-next-live .btn-primary-fancy,
        html.betx7-next-live .selected-btn-tranfer,
        html.betx7-next-live .btn-transfer.active {
            color:#fff !important;
            background: linear-gradient(180deg,var(--live-accent),var(--live-accent-dark)) !important;
            border-color: var(--live-accent) !important;
        }

        /* Ensure icon colors update */
        html.betx7-next-live .icon_promotions, html.betx7-next-live .icon-social { color: var(--live-accent) !important }

        /* Make underline / decorative accents consistent */
        html.betx7-next-live .navigation-main .nav-link.active,
        html.betx7-next-live .navigation-main .nav-link:hover {
            text-decoration: solid underline var(--live-accent) 5px !important;
        }

        /* Fallback: aggressively replace some specific hard-coded orange classes */
        html.betx7-next-live .bg-primary{background-color:var(--live-accent) !important}
        html.betx7-next-live .text-warning, html.betx7-next-live .badge-warning{color:var(--live-accent) !important}
    
        /* Card surface */
        .bet-card{display:block;text-decoration:none;color:inherit}
        .bet-thumb{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#0b0b0b;border:1px solid rgba(255,255,255,0.04);will-change:transform,opacity}
        .bet-thumb img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform .22s ease,opacity .22s ease}
        .bet-skel{position:absolute;inset:0;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,0.02) 0%,rgba(255,255,255,0.03) 40%,rgba(255,255,255,0.02) 100%);background-size:200% 100%;animation:skel-shimmer 1.1s linear infinite;z-index:2}
        @keyframes skel-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
        .bet-thumb.loaded .bet-skel{opacity:0;transition:opacity .22s ease;pointer-events:none}

        /* Overlay + title */
        .bet-title{position:absolute;left:10px;right:10px;bottom:10px;padding:6px 8px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 60%);color:#fff;font-size:13px;font-weight:700;border-radius:8px;backdrop-filter:blur(2px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

        /* Play CTA */
        .bet-play{position:absolute;top:10px;right:10px;z-index:6;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:#0B7A3E;color:#fff;font-weight:800;font-size:14px;box-shadow:0 6px 18px rgba(11,122,62,0.12);opacity:1;transition:opacity .18s ease,transform .18s ease}
        /* On desktop keep CTA subtle until hover */
        @media(min-width:768px){
            .bet-play{opacity:0;transform:translateY(-4px)}
            .bet-thumb:hover .bet-play,.bet-thumb:focus-within .bet-play{opacity:1;transform:none}
        }

        /* Hover elevation */
        .bet-card:hover .bet-thumb{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,0.45)}

          /* Responsive density — rely on page-scoped CSS Grid rules.
              Avoid declaring layout here to prevent conflicts. */
          .x2-game-grid{margin:0}
          .x2-game-col{padding:0}

        /* Respect reduced motion */
        @media (prefers-reduced-motion: reduce){
            .bet-thumb img,.bet-play{transition:none}
            .bet-skel{animation:none}
        }
        /* Provider bar sticky */
        .x2-prov-block{position:sticky;top:64px;z-index:900;background:transparent;padding-top:10px;padding-bottom:10px}
        .x2-prov-grid{display:flex;gap:8px;overflow:auto;padding:6px;-webkit-overflow-scrolling:touch}
        .x2-prov-tile{flex:0 0 auto;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:#BDBDBD;font-weight:700;transition:transform .12s ease}
        .x2-prov-tile.active{background:#0B7A3E;color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(11,122,62,0.12)}

        /* Category pills */
        .x2-cat-menu{display:flex;gap:10px;padding:8px 0;overflow:auto;-webkit-overflow-scrolling:touch}
        .x2-cat-item{padding:8px 12px;border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:#BDBDBD;font-weight:700}
        .x2-cat-item.active{background:#1FAE5B;color:#000;border-color:transparent}
    
        body {
            background: #000000 !important;
        }

/* ╔════════════════════════════════════════════════════════════╗
   ║        PREMIUM NAVBAR — Bet365 Style Orange Branding      ║
   ║     Dark #1A1A1A · Orange #FFD700 · Premium Spacing       ║
   ╚════════════════════════════════════════════════════════════╝ */

        /* ── Header Base ── */
        .header {
            /* Premium gradient background - matches mobile sidebar */
            background: linear-gradient(
                180deg,
                #2F6C6D 0%,
                #38797A 45%,
                #5AA17E 100%
            ) !important;
            border-bottom: 1px solid rgba(255,255,255,.05) !important;
            box-shadow: 0 4px 18px rgba(0,0,0,.18);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .head-master {
            /* Premium gradient background - matches mobile sidebar */
            background: linear-gradient(
                180deg,
                #2F6C6D 0%,
                #38797A 45%,
                #5AA17E 100%
            ) !important;
            padding: 10px 0 !important;
            border-bottom: 1px solid rgba(255,255,255,.05) !important;
        }

        /* ── Logo Area ── */
        .logo-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 6px 0 !important;
        }

        .site-logo {
            margin: 0 !important;
            display: flex;
            align-items: center;
        }

        .site-logo img {
            /* Enlarged logo for better visibility on desktop */
            max-height: 64px !important;
            width: auto;
            display: block;
        }

        .site-logo a {
            display: flex;
            align-items: center;
        }

        /* ── Mobile Buttons ── */
        .btn-mobile-trigger,
        .btn-user-trigger {
            background: rgba(2, 147, 96, 0.12) !important; /* #029360 @ 12% */
            border: 1px solid rgba(2, 147, 96, 0.38) !important; /* #029360 @ 38% */
            color: #029360 !important; /* icon/foreground */
            border-radius: 8px;
            transition: all 200ms ease !important;
            font-size: 16px !important;
            width: 40px !important;
            height: 40px !important;
            padding: 0 !important;
            align-items: center;
            justify-content: center;
        }

        .btn-user-trigger { display: flex !important; }
        .btn-mobile-trigger:hover,
        .btn-user-trigger:hover {
            background: rgba(2, 147, 96, 0.22) !important;
            border-color: rgba(2, 147, 96, 0.55) !important;
            color: #02b37a !important;
        }

        .back-to-casino {
            color: #A1A1AA !important;
            font-size: 12px !important;
            font-weight: 500 !important;
            transition: color 200ms ease !important;
            text-decoration: none !important;
            padding: 4px 8px;
            border-radius: 6px;
        }

        .back-to-casino:hover {
            color: #FFD700 !important;
        }

        .back-to-casino i {
            margin-right: 3px;
        }

        /* ── Login/User Section ── */
        .form-login {
            display: flex !important;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }

        .input-group.on-dark {
            background: rgba(255, 255, 255, 0.04) !important;
            border: 1px solid rgba(255,215,0, 0.2) !important;
            border-radius: 8px !important;
            transition: border-color 200ms ease, box-shadow 200ms ease !important;
        }

        .input-group.on-dark:focus-within {
            border-color: rgba(255,215,0, 0.5) !important;
            box-shadow: 0 0 0 3px rgba(255,215,0, 0.08) !important;
        }

        .form-control {
            background: transparent !important;
            border: none !important;
            color: #EAEAEA !important;
            font-size: 13px !important;
            font-weight: 500 !important;
        }

        .form-control::placeholder {
            color: #9CA3AF !important;
            font-weight: 500 !important;
        }

        .form-control:focus {
            color: #EAEAEA !important;
            outline: none !important;
            box-shadow: none !important;
        }

        .input-group-addon {
            background: transparent !important;
            border: none !important;
            color: #A1A1AA !important;
        }

        /* ── Premium Buttons ── */
        .btn-primary {
            background: #FFD700 !important;
            border: none !important;
            color: #000 !important;
            font-weight: 700 !important;
            font-size: 13px !important;
            padding: 8px 20px !important;
            border-radius: 8px !important;
            transition: all 200ms ease !important;
            letter-spacing: 0.3px;
        }

        .btn-primary:hover {
            background: #FFC14D !important;
            color: #000 !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(255,215,0, 0.25) !important;
        }

        .btn-primary:active {
            transform: translateY(0);
        }

        .btn-white-outline {
            color: #EAEAEA !important;
            border: 1px solid rgba(255,215,0, 0.25) !important;
            background: rgba(255,215,0, 0.06) !important;
            border-radius: 8px;
            transition: all 200ms ease !important;
        }

        .btn-white-outline:hover {
            color: #FFD700 !important;
            border-color: rgba(255,215,0, 0.4) !important;
            background: rgba(255,215,0, 0.12) !important;
        }

        /* ── Header Nav ── */
        .head-nav-wrap {
            background: #1A1A1A !important;
            border-top: 1px solid rgba(255,215,0, 0.08) !important;
            padding: 0 !important;
        }

        .navigation-main {
            display: flex !important;
            gap: 0 !important;
            align-items: center !important;
            flex: 1;
        }

        .nav-item {
            margin: 0 !important;
            padding: 0 !important;
            position: relative;
        }

        .nav-link {
            color: #A1A1AA !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            padding: 14px 18px !important;
            display: block !important;
            transition: all 200ms ease !important;
            border-bottom: 3px solid transparent;
            text-decoration: none !important;
            letter-spacing: 0.3px;
        }

        .nav-link:hover {
            color: #FFD700 !important;
            background: rgba(255,215,0, 0.06) !important;
        }

        .nav-link.active {
            color: #FFD700 !important;
            border-bottom-color: #FFD700 !important;
            background: rgba(255,215,0, 0.05) !important;
        }

        /* ── Navigation Right (Language) ── */
        .navigation-right {
            margin-left: auto;
        }

        .language-list {
            display: flex !important;
            gap: 12px;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .language-list-item {
            color: #A1A1AA !important;
            font-size: 12px !important;
            font-weight: 600 !important;
            padding: 8px 12px !important;
            border-radius: 8px;
            transition: all 200ms ease !important;
            text-decoration: none !important;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .language-list-item:hover {
            color: #FFD700 !important;
            background: rgba(255,215,0, 0.08) !important;
        }

        .flag {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-size: cover;
        }

        .language-arrow {
            font-size: 10px;
            transition: transform 200ms ease;
        }

        /* ── Dropdowns ── */
        .dropdown-menu {
            background: #252525 !important;
            border: 1px solid rgba(255,215,0, 0.15) !important;
            border-radius: 12px !important;
            padding: 8px 0 !important;
            min-width: 200px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
        }

        .dropdown-item {
            color: #A1A1AA !important;
            font-size: 13px !important;
            font-weight: 500 !important;
            padding: 10px 16px !important;
            transition: all 200ms ease !important;
            text-decoration: none !important;
            border-left: 3px solid transparent;
        }

        .dropdown-item:hover {
            background: rgba(255,215,0, 0.1) !important;
            color: #FFD700 !important;
            border-left-color: #FFD700;
        }

        .dropdown-item.active {
            background: rgba(255,215,0, 0.08) !important;
            color: #FFD700 !important;
        }

        .dropdown-divider {
            border-color: rgba(255,215,0, 0.1) !important;
        }

        /* ── User HUD ── */
        .user-hud {
            display: flex !important;
            gap: 8px;
            align-items: center;
        }

        .btn-group {
            position: relative;
        }

        .user-hud-balance {
            display: flex !important;
        }

        .user-hud-balance .btn {
            background: rgba(255,215,0, 0.08) !important;
            border: 1px solid rgba(255,215,0, 0.25) !important;
            color: #FFD700 !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            padding: 8px 14px !important;
            border-radius: 8px;
            transition: all 200ms ease !important;
        }

        .user-hud-balance .btn:hover {
            background: rgba(255,215,0, 0.15) !important;
            border-color: rgba(255,215,0, 0.4) !important;
        }

        /* ── Mobile Menu (mmenu) ── */
        #nav-mobile {
            background: #1A1A1A !important;
            border-right: 1px solid rgba(255,215,0, 0.12) !important;
        }

        #nav-mobile ul {
            background: #1A1A1A !important;
        }

        #nav-mobile li {
            border-bottom: 1px solid rgba(255,215,0, 0.06) !important;
        }

        #nav-mobile a {
            color: #A1A1AA !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            padding: 14px 16px !important;
            display: block !important;
            transition: all 200ms ease !important;
            text-decoration: none !important;
        }

        #nav-mobile a:hover {
            background: rgba(255,215,0, 0.08) !important;
            color: #FFD700 !important;
            padding-left: 18px;
        }

        .nav-mobile-logo {
            padding: 14px 16px !important;
            display: flex;
            align-items: center;
        }

        .logo-mobile {
            max-height: 32px;
            width: auto;
        }

        /* ── Mobile User Menu ── */
        #nav-mobile-user {
            background: #1A1A1A !important;
            border-right: 1px solid rgba(255,215,0, 0.12) !important;
        }

        #nav-mobile-user ul {
            background: #1A1A1A !important;
        }

        #nav-mobile-user li {
            border-bottom: 1px solid rgba(255,215,0, 0.06) !important;
        }

        #nav-mobile-user a {
            color: #A1A1AA !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            padding: 12px 16px !important;
            display: flex !important;
            align-items: center;
            gap: 10px;
            transition: all 200ms ease !important;
            text-decoration: none !important;
        }

        #nav-mobile-user a:hover {
            background: rgba(255,215,0, 0.08) !important;
            color: #FFD700 !important;
        }

        #nav-mobile-user i {
            font-size: 16px;
            flex-shrink: 0;
        }

        .nav-mobile-user-info {
            padding: 14px 16px !important;
            display: block;
            font-size: 12px;
        }

        .nav-mobile-user-info .clear {
            display: block;
            margin-bottom: 8px;
            color: #A1A1AA;
        }

        .nav-mobile-user-info b {
            color: #EAEAEA;
            margin-right: 6px;
        }

        .nav-mobile-user-login {
            padding: 14px 16px !important;
            display: block;
        }

        .nav-mobile-user-login .form-login {
            flex-direction: column !important;
        }

        .nav-mobile-user-login .input-group {
            width: 100%;
        }

        /* ── Footer ── */
        .footer {
            color: #fbfbfb !important;
            background: #1A1A1A !important;
        }

        .mm-menu .mm-navbar {
            background-color: #1A1A1A !important;
        }

        /* ── Mobile header fixes ── */
        @media(max-width:768px){
            .head-master{padding:8px 0!important;border-bottom:1px solid rgba(255,215,0,.12)!important}
            .logo-wrap{padding-bottom:0!important;min-height:unset!important;gap:8px!important}
            .back-to-casino{display:none!important}
            .site-logo{display:inline-flex!important;margin:0!important;max-width:100px}
            .site-logo img{max-height:32px!important}
            .btn-mobile-trigger{width:40px!important;height:40px!important;padding:0!important;align-items:center;justify-content:center;font-size:16px}
            .btn-user-trigger{padding:4px 10px!important;font-size:12px!important;display:flex!important;align-items:center;gap:6px!important}
            .head-nav-wrap{display:none!important}
            dic.main,.main{padding:0!important;margin:0!important}
            #overlay{display:none}
            .form-login{flex-direction:column!important}
            .input-group.on-dark{width:100%!important}
        }

        .btn-white-outline {
            color: #EAEAEA !important;
            border-color: rgba(255,215,0, 0.25) !important;
        }