/* Quick mobile layout fixes to prevent header overlap and oversized hero
              Removed top padding so hero banners sit flush beneath the sticky header
              (header is positioned sticky and has its own height/z-index). */
          .hm{padding-top:0;box-sizing:border-box}

        /* Ensure hero images are constrained on small viewports */
        .hm-hero-slide img{height:180px!important;max-height:260px!important;object-fit:cover!important}

        /* Prevent tiles from being pushed under header */
        .hm-tiles{margin-top:10px!important}

        /* Small spacer adjustment to keep footer/nav clear */
        .hm-spacer{height:100px!important}

        @media(min-width:769px){
            .hm{padding-top:0}
            .hm-hero-slide img{height:300px!important}
            .hm-spacer{height:80px!important}
        }
    
        /* ── Base overlay ── */
        #page-loader {
            position: fixed;
            inset: 0;
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Warm dark radial centre — feels like a premium dark stage */
            background: radial-gradient(
                ellipse 90% 80% at 50% 50%,
                #0e0500 0%, #060200 50%, #000000 100%
            );
            opacity: 1;
            pointer-events: all;
            user-select: none;
            overflow: hidden;
            /* Cinematic exit: opacity fade + subtle zoom bloom */
            transition: opacity 0.5s cubic-bezier(0.4, 0, 1, 1),
                        transform 0.5s cubic-bezier(0.4, 0, 1, 1);
            will-change: opacity, transform;
        }

        /* Internal full-page navigations can skip loader via session marker */
        .pl-skip-loader #page-loader {
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        /* Cinematic exit state */
        #page-loader.pl-fade {
            opacity: 0;
            transform: scale(1.04);
            pointer-events: none;
        }

        /* Vignette + centre bloom */
        #page-loader::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 55% 55% at 50% 48%,
                    rgba(255, 106, 0, 0.065) 0%,
                    rgba(255, 106, 0, 0.02) 45%,
                    transparent 70%),
                radial-gradient(ellipse 100% 100% at 50% 50%,
                    transparent 55%,
                    rgba(0, 0, 0, 0.5) 100%);
            pointer-events: none;
            z-index: 0;
        }

        /* Ultra-subtle static grain (CSS-only, zero animation cost) */
        #page-loader::after {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 0.016;
            background-image:
                repeating-linear-gradient(0deg,
                    transparent, transparent 1px,
                    rgba(255,255,255,0.55) 1px, rgba(255,255,255,0.55) 2px),
                repeating-linear-gradient(90deg,
                    transparent, transparent 3px,
                    rgba(255,255,255,0.12) 3px, rgba(255,255,255,0.12) 4px);
            pointer-events: none;
            z-index: 0;
        }

        /* ── Drifting ambient background glows (transform+opacity only) ── */
        .pl-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
        }

        .pl-bg-glow {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .pl-bg-glow-1 {
            width: 45vw; height: 45vw;
            top: 5%; left: 15%;
            background: radial-gradient(circle, rgba(255,106,0,0.055) 0%, transparent 70%);
            animation: plBgDrift1 14s ease-in-out infinite;
            will-change: transform, opacity;
        }

        .pl-bg-glow-2 {
            width: 38vw; height: 38vw;
            bottom: 8%; right: 10%;
            background: radial-gradient(circle, rgba(255,106,0,0.04) 0%, transparent 70%);
            animation: plBgDrift2 18s ease-in-out infinite;
            will-change: transform, opacity;
        }

        @keyframes plBgDrift1 {
            0%, 100% { transform: translate(0,0) scale(1);      opacity: 0.55; }
            33%       { transform: translate(3vw,-2vw) scale(1.08); opacity: 1; }
            66%       { transform: translate(-2vw,2vw) scale(0.93); opacity: 0.65; }
        }

        @keyframes plBgDrift2 {
            0%, 100% { transform: translate(0,0) scale(1);       opacity: 0.5; }
            40%       { transform: translate(-3vw,2vw) scale(1.1);  opacity: 0.9; }
            70%       { transform: translate(2vw,-2vw) scale(0.95); opacity: 0.6; }
        }

        /* ── Full-screen cinematic light sweep ── */
        .pl-sweep {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                108deg,
                transparent 38%,
                rgba(255, 190, 80, 0.038) 50%,
                transparent 62%
            );
            transform: translateX(-110%);
            animation: plSweep 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            will-change: transform;
            pointer-events: none;
            z-index: 4;
        }

        @keyframes plSweep {
            0%   { transform: translateX(-110%); }
            38%  { transform: translateX(110%); }
            100% { transform: translateX(110%); }
        }

        /* ── Neon particle dust (CSS-only, 10 elements, transform+opacity) ── */
        .pl-particles {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }

        .pl-p {
            position: absolute;
            width: 2px; height: 2px;
            border-radius: 50%;
            background: rgba(255, 106, 0, 0.8);
            opacity: 0;
            will-change: transform, opacity;
        }

        .pl-p:nth-child(1)  { left:12%; bottom:20%; animation: plFloat  8s 1.8s ease-in-out infinite; }
        .pl-p:nth-child(2)  { left:25%; bottom:15%; animation: plFloat 10s 0.4s ease-in-out infinite; width:2.5px; height:2.5px; }
        .pl-p:nth-child(3)  { left:40%; bottom:22%; animation: plFloat  7s 3.1s ease-in-out infinite; }
        .pl-p:nth-child(4)  { left:55%; bottom:18%; animation: plFloat  9s 1.1s ease-in-out infinite; width:2.5px; height:2.5px; }
        .pl-p:nth-child(5)  { left:68%; bottom:25%; animation: plFloat 11s 0.7s ease-in-out infinite; }
        .pl-p:nth-child(6)  { left:82%; bottom:20%; animation: plFloat  8s 4.2s ease-in-out infinite; }
        .pl-p:nth-child(7)  { left:18%; top:22%;    animation: plFloat  9s 2.5s ease-in-out infinite reverse; }
        .pl-p:nth-child(8)  { left:75%; top:28%;    animation: plFloat  7s 5.1s ease-in-out infinite reverse; width:2.5px; height:2.5px; }
        .pl-p:nth-child(9)  { left:48%; bottom:10%; animation: plFloat 12s 1.6s ease-in-out infinite; }
        .pl-p:nth-child(10) { left:33%; top:18%;    animation: plFloat  8s 3.8s ease-in-out infinite reverse; width:3px; height:3px; }

        @keyframes plFloat {
            0%   { transform: translateY(0)    translateX(0);    opacity: 0; }
            8%   { opacity: 0.55; }
            50%  { transform: translateY(-50px) translateX(6px);  opacity: 0.3; }
            92%  { opacity: 0.4; }
            100% { transform: translateY(-95px) translateX(-5px); opacity: 0; }
        }

        /* ── Center container — entry animation ── */
        .pl-inner {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            z-index: 2;
            /* Initial hidden state — JS adds .pl-entered to trigger ignition */
            transform: scale(0.9);
            opacity: 0;
        }

        #page-loader.pl-entered .pl-inner {
            transform: scale(1);
            opacity: 1;
            transition: opacity  0.85s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* ── Logo zone — multi-layer neon bloom halo ── */
        .pl-logo-zone {
            position: relative;
            width: 160px;
            height: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Outermost soft ambient aura */
        .pl-logo-aura {
            position: absolute;
            top: 50%; left: 50%;
            width: 280px; height: 280px;
            border-radius: 50%;
            background: radial-gradient(circle,
                rgba(255, 106, 0, 0.14) 0%,
                rgba(255, 106, 0, 0.04) 50%,
                transparent 70%);
            animation: plAuraPulse 3.8s ease-in-out infinite;
            will-change: transform, opacity;
            pointer-events: none;
        }

        @keyframes plAuraPulse {
            0%, 100% { transform: translate(-50%,-50%) scale(1);    opacity: 0.45; }
            50%       { transform: translate(-50%,-50%) scale(1.22); opacity: 1; }
        }

        /* Rotating neon halo ring */
        .pl-logo-ring {
            position: absolute;
            top: 50%; left: 50%;
            width: 192px; height: 192px;
            border-radius: 50%;
            border: 1px solid rgba(255, 106, 0, 0.35);
            box-shadow:
                0 0  8px rgba(255, 106, 0, 0.45),
                0 0 20px rgba(255, 106, 0, 0.16),
                inset 0 0 6px rgba(255, 106, 0, 0.08);
            animation: plRingBreath 3.8s ease-in-out infinite,
                       plRingSpin   24s   linear     infinite;
            will-change: transform, opacity;
            pointer-events: none;
        }

        @keyframes plRingBreath {
            0%, 100% { opacity: 0.4; }
            50%       { opacity: 1; }
        }

        @keyframes plRingSpin {
            to { transform: translate(-50%,-50%) rotate(360deg); }
        }

        /* Inner core glow disc */
        .pl-logo-core {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 172px; height: 172px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,106,0,0.1) 0%, transparent 70%);
            animation: plCorePulse 3.8s ease-in-out infinite;
            will-change: opacity;
            pointer-events: none;
        }

        @keyframes plCorePulse {
            0%, 100% { opacity: 0.35; }
            50%       { opacity: 1; }
        }

        /* ── Brand diamond mark — ultra neon bloom (static filter, no anim cost) ── */
        .pl-logo-mark {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            /* 4-layer bloom: sharp inner → mid → soft outer → faint ambient */
            filter:
                drop-shadow(0 0  5px rgba(255, 106, 0, 1.0))
                drop-shadow(0 0 16px rgba(255, 106, 0, 0.62))
                drop-shadow(0 0 38px rgba(255, 106, 0, 0.28))
                drop-shadow(0 0 65px rgba(255, 106, 0, 0.09));
        }

        /* ── Spinner wrap ── */
        .pl-spinner-wrap {
            position: relative;
            width: 80px;
            height: 80px;
        }

        /* Outer slow counter-spin accent ring */
        .pl-ring-slow {
            position: absolute;
            inset: -7px;
            border-radius: 50%;
            border: 1px solid transparent;
            border-top-color:    rgba(255, 106, 0, 0.42);
            border-right-color:  rgba(255, 106, 0, 0.14);
            border-bottom-color: rgba(255, 106, 0, 0.04);
            box-shadow: 0 0 10px rgba(255, 106, 0, 0.12);
            animation: plSpinSlow 20s linear infinite reverse;
            will-change: transform;
        }

        /* Expanding pulse ring */
        .pl-spinner-wrap::before {
            content: '';
            position: absolute;
            inset: -16px;
            border-radius: 50%;
            border: 1px solid rgba(255, 106, 0, 0.05);
            animation: plRingPulse 3s ease-in-out infinite;
            will-change: transform, opacity;
        }

        @keyframes plRingPulse {
            0%, 100% { opacity: 0.7; transform: scale(1); }
            50%       { opacity: 0;   transform: scale(1.22); }
        }

        /* Main fast arc spinner */
        .pl-spinner {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 2.5px solid rgba(255, 106, 0, 0.07);
            border-top-color:    #ff6a00;
            border-right-color:  rgba(255, 106, 0, 0.48);
            border-bottom-color: rgba(255, 106, 0, 0.16);
            box-shadow:
                0 0  1px rgba(255, 106, 0, 0.05),
                0 0 24px rgba(255, 106, 0, 0.22),
                inset 0 0 10px rgba(255, 106, 0, 0.04);
            animation: plSpinFast 850ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
            will-change: transform;
        }

        @keyframes plSpinFast { to { transform: rotate(360deg); } }
        @keyframes plSpinSlow { to { transform: rotate(360deg); } }

        /* ── Loading label ── */
        .pl-label {
            font-family: 'Roboto Condensed', 'Roboto', sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 5px;
            text-transform: uppercase;
            color: rgba(255, 106, 0, 0.45);
            display: flex;
            align-items: center;
            padding-left: 5px; /* optical kerning for trailing letter-space */
        }

        /* ── Fluid animated dots — cubic-bezier, no jitter ── */
        .pl-d1, .pl-d2, .pl-d3 {
            display: inline-block;
            animation: plDot 1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
            color: rgba(255, 106, 0, 0.45);
        }
        .pl-d2 { animation-delay: 0.3s; }
        .pl-d3 { animation-delay: 0.6s; }

        @keyframes plDot {
            0%, 55%, 100% { opacity: 0.12; transform: translateY(0); }
            27%            { opacity: 1;    transform: translateY(-2.5px); }
        }

        /* ── Bottom progress bar (GPU-safe scaleX) ── */
        .pl-progress {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 3px;
            background: transparent;
            z-index: 10;
            pointer-events: none;
        }

        .pl-progress-bar {
            height: 100%;
            width: 100%;
            transform: scaleX(0);
            transform-origin: left center;
            background: #146c4b;
            box-shadow: 0 0 6px rgba(20,108,75,0.12);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s linear;
            will-change: transform, opacity;
        }

        /* Suppress old helper (kept in DOM for safety) */
        .pl-glass { display: none !important; }

        /* ── BETX7 logo image ── */
        .pl-logo-img {
            width: 150px;
            height: auto;
            display: block;
            object-fit: contain;
            position: relative;
            z-index: 2;
            /* Preserve PNG transparency */
            -webkit-user-drag: none;
        }

        /* ── Entry flash burst: 1s subtle orange/warm bloom ── */
        .pl-flash {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 6;
            background: radial-gradient(ellipse 50% 50% at 50% 50%,
                rgba(255, 210, 90, 0.26) 0%,
                rgba(255, 106, 0, 0.12) 35%,
                transparent 65%);
            opacity: 0;
            transform: scale(0.75);
            animation: plFlash 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.06s forwards;
            will-change: opacity, transform;
        }

        @keyframes plFlash {
            0%   { opacity: 0;    transform: scale(0.75); }
            18%  { opacity: 1;    transform: scale(1.03); }
            55%  { opacity: 0.45; transform: scale(1.01); }
            100% { opacity: 0;    transform: scale(1.1); }
        }

        /* ── Single-loader guard: suppress #overlay and #vload while
           page-loader is active — prevents double-spinner rendering ── */
        body:not(.pl-app-ready) #overlay,
        body:not(.pl-app-ready) #vload {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
      /*==================================================
BET365 BLACK + YELLOW OVERRIDE
PART 1
==================================================*/

/* COLORS */

:root{

    --yellow:#FFD400;
    --yellow-hover:#FFE24A;

    --bg:#111111;
    --bg2:#181818;
    --bg3:#222222;

    --border:#2B2B2B;

    --text:#F3F3F3;
    --muted:#8D8D8D;

}

/*==================================================*/

html,
body{

    background:#111 !important;

    color:var(--text) !important;

}

/*==================================================
HEADER
==================================================*/

header.header{

    height:var(--header-height,64px) !important;

    /* 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) !important;

    backdrop-filter:blur(14px) !important;

    -webkit-backdrop-filter:blur(14px) !important;

    padding:0 10px !important;

}
@media (min-width:768px){header.header{padding:0 20px !important}}
@media (min-width:1024px){header.header{padding:0 24px !important}}

/*==================================================
LOGO
==================================================*/

.logo img{

    height:30px !important;

    width:auto !important;

}

/*==================================================
LEFT
==================================================*/

.header-left{

    display:flex !important;

    align-items:center !important;

    gap:12px !important;

}

/*==================================================
MOBILE BUTTON
==================================================*/

.btn-mobile-trigger{

    width:40px !important;

    height:40px !important;

    border-radius:6px !important;

    background:#1B1B1B !important;

    border:1px solid var(--border) !important;

    color:var(--yellow) !important;

    box-shadow:none !important;

}

.btn-mobile-trigger:hover{

    background:#252525 !important;

    border-color:var(--yellow) !important;

}

/*==================================================
DESKTOP NAV
==================================================*/

.desktop-nav{

    gap:0 !important;

    margin-inline-start:20px !important;

}

.desktop-nav a{

    position:relative;

    display:flex !important;

    align-items:center !important;

    gap:8px !important;

    height:56px !important;

    padding:0 14px !important;

    color:#D6D6D6 !important;

    background:none !important;

    border:none !important;

    border-radius:0 !important;

    font-size:12px !important;

    font-weight:700 !important;

    text-transform:uppercase;

    transition:.15s;

}

.desktop-nav a img{

    width:18px !important;

    height:18px !important;

}

.desktop-nav a:hover{

    color:var(--yellow) !important;

}

.desktop-nav a.active{

    color:var(--yellow) !important;

}

.desktop-nav a::after{

    content:"";

    position:absolute;

    left:14px;

    right:14px;

    bottom:0;

    height:2px;

    background:var(--yellow);

    transform:scaleX(0);

    transition:.15s;

}

.desktop-nav a:hover::after,
.desktop-nav a.active::after{

    transform:scaleX(1);

}

/*==================================================
RIGHT
==================================================*/

.header-actions{

    margin-left:auto !important;

    display:flex !important;

    align-items:center !important;

    gap:8px !important;

}
      /*==================================================
BET365 OVERRIDE
PART 2
WALLET + LOGIN + USER
==================================================*/

/* HEADER RIGHT */

.header-actions{

    display:flex !important;

    align-items:center !important;

    gap:8px !important;

    margin-left:auto !important;

}

/*==================================================
WALLET
==================================================*/

.wallet-box{

    display:flex !important;

    align-items:center !important;

    gap:10px !important;

    height:38px !important;

    padding:0 14px !important;

    background:#1A1A1A !important;

    border:1px solid #2B2B2B !important;

    border-radius:6px !important;

    box-shadow:none !important;

    cursor:pointer;

    transition:.15s;

}

.wallet-box:hover{

    background:#232323 !important;

    border-color:#FFD400 !important;

}

/* ICON */

.wallet-box>i{

    color:#FFD400 !important;

    font-size:15px !important;

    width:18px;

    text-align:center;

    flex-shrink:0;

}

/* INFO */

.wallet-info{

    display:flex !important;

    flex-direction:column !important;

    justify-content:center;

    line-height:1.1;

}

.wallet-info small{

    color:#888 !important;

    font-size:9px !important;

    font-weight:600;

    letter-spacing:.5px;

    text-transform:uppercase;

    margin-bottom:2px;

}

.wallet-info span{

    color:#FFD400 !important;

    font-size:13px !important;

    font-weight:700;

    white-space:nowrap;

}

/*==================================================
LOGIN
==================================================*/

.login-btn,

.btn-login,

.header-login{

    display:flex !important;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:34px !important;

    padding:0 18px !important;

    background:#FFD400 !important;

    color:#111 !important;

    border:none !important;

    border-radius:6px !important;

    font-size:13px !important;

    font-weight:700 !important;

    box-shadow:none !important;

    transition:.15s;

}

.login-btn:hover,

.btn-login:hover,

.header-login:hover{

    background:#FFE24A !important;

}

/*==================================================
USER BUTTON
==================================================*/

.menu-btn,

.profile-btn,

.user-btn{

    width:38px !important;

    height:38px !important;

    display:flex !important;

    align-items:center;

    justify-content:center;

    background:#1A1A1A !important;

    color:#FFD400 !important;

    border:1px solid #2B2B2B !important;

    border-radius:6px !important;

    box-shadow:none !important;

    transition:.15s;

}

.menu-btn:hover,

.profile-btn:hover,

.user-btn:hover{

    background:#232323 !important;

    border-color:#FFD400 !important;

}

/*==================================================
BADGE
==================================================*/

.badge,

.notification-badge{

    background:#FFD400 !important;

    color:#111 !important;

    border:none !important;

}

/*==================================================
REMOVE OLD EFFECTS
==================================================*/

.wallet-box,

.login-btn,

.menu-btn,

.profile-btn{

    backdrop-filter:none !important;

    -webkit-backdrop-filter:none !important;

    text-shadow:none !important;

}

/*==================================================
MOBILE
==================================================*/

@media(max-width:768px){

    .wallet-box{

        height:34px !important;

        padding:0 10px !important;

        gap:8px !important;

    }

    .wallet-info small{

        display:none !important;

    }

    .wallet-info span{

        font-size:12px !important;

    }

    .login-btn,

    .btn-login,

    .header-login{

        height:34px !important;

        padding:0 12px !important;

        font-size:12px !important;

    }

    .menu-btn,

    .profile-btn,

    .user-btn{

        width:34px !important;

        height:34px !important;

    }

}
      /*==================================================
BET365 OVERRIDE
PART 3
USER DROPDOWN
==================================================*/

.user-menu,
.dropdown-menu,
.account-dropdown{

    position:absolute;

    top:58px !important;

    right:0;

    width:260px;

    background:#181818 !important;

    border:1px solid #2B2B2B !important;

    border-radius:8px !important;

    box-shadow:0 12px 30px rgba(0,0,0,.45) !important;

    overflow:hidden;

    padding:0 !important;

    z-index:9999;

}

/*==================================================
PROFILE HEADER
==================================================*/

.user-profile,
.dropdown-header,
.account-header{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px !important;

    background:#202020 !important;

    border-bottom:1px solid #2B2B2B;

}

/*==================================================
AVATAR
==================================================*/

.user-avatar,
.avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#2A2A2A;

    color:#FFD400;

    font-size:18px;

    flex-shrink:0;

}

/*==================================================
NAME
==================================================*/

.user-name,
.account-name{

    color:#FFFFFF !important;

    font-size:14px;

    font-weight:700;

}

.user-email,
.account-level{

    color:#FFD400 !important;

    font-size:11px;

    margin-top:3px;

}

/*==================================================
MENU LIST
==================================================*/

.user-menu ul,
.dropdown-menu ul{

    margin:0;

    padding:0;

    list-style:none;

}

.user-menu li,
.dropdown-menu li{

    margin:0;

    padding:0;

}

.user-menu li+li,
.dropdown-menu li+li{

    border-top:1px solid #252525;

}

/*==================================================
LINKS
==================================================*/

.user-menu a,
.dropdown-menu a{

    display:flex;

    align-items:center;

    gap:12px;

    height:46px;

    padding:0 16px;

    text-decoration:none;

    color:#DDDDDD !important;

    font-size:13px;

    font-weight:600;

    transition:.15s;

}

.user-menu a:hover,
.dropdown-menu a:hover{

    background:#242424 !important;

    color:#FFD400 !important;

}

/*==================================================
ICONS
==================================================*/

.user-menu a i,
.dropdown-menu a i{

    width:18px;

    text-align:center;

    color:#FFD400;

    font-size:14px;

}

/*==================================================
ACTIVE
==================================================*/

.user-menu a.active,
.dropdown-menu a.active{

    background:#FFD400 !important;

    color:#111 !important;

}

.user-menu a.active i,
.dropdown-menu a.active i{

    color:#111 !important;

}

/*==================================================
LOGOUT
==================================================*/

.logout,

.logout-btn{

    color:#FF7A7A !important;

}

.logout i,
.logout-btn i{

    color:#FF5C5C !important;

}

.logout:hover,
.logout-btn:hover{

    background:#2A1B1B !important;

    color:#FFFFFF !important;

}

/*==================================================
DIVIDER
==================================================*/

.user-divider{

    height:1px;

    background:#2B2B2B;

    margin:0;

}

/*==================================================
SCROLLBAR
==================================================*/

.user-menu::-webkit-scrollbar{

    width:5px;

}

.user-menu::-webkit-scrollbar-thumb{

    background:#FFD400;

    border-radius:20px;

}

.user-menu::-webkit-scrollbar-track{

    background:#181818;

}

/*==================================================
OPEN ANIMATION
==================================================*/

.user-menu{

    animation:userFade .15s ease;

}

@keyframes userFade{

    from{

        opacity:0;

        transform:translateY(-8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
MOBILE
==================================================*/

@media(max-width:768px){

.user-menu,
.dropdown-menu{

    width:235px;

    top:54px !important;

    right:8px;

}

.user-menu a,
.dropdown-menu a{

    height:42px;

    font-size:12px;

}

.user-avatar{

    width:38px;

    height:38px;

}

}
/*==================================================
MAXIMUM PERFORMANCE OVERRIDE
==================================================*/

/* Hide all loaders */

.loader,
.loading,
.loading-overlay,
.loading-screen,
.page-loader,
.preloader,
.pre-loader,
.spinner,
.spin-loader,
.skeleton,
.skeleton-loader,
.lazy-loader,
.progress-loader,
.overlay-loader,
.ajax-loader,
#loader,
#preloader,
#loading,
#page-loader,
#globalLoader,
#loadingOverlay{

    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;

}

/* Fast animations */

*,
*::before,
*::after{

    animation-duration:.08s !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;

    transition-duration:.08s !important;
    transition-delay:0s !important;

}

/* Remove heavy effects */

*{

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    text-shadow:none !important;

}

/* Reduce heavy shadows */

.card,
.modal,
.popup,
.wallet-box,
.user-menu,
.cashback-popup,
header.header{

    box-shadow:0 3px 8px rgba(0,0,0,.18) !important;

}

/* Faster scrolling */

html{

    scroll-behavior:auto !important;

}

/* Better rendering */

img{

    image-rendering:auto;
    transform:translateZ(0);

}

video,
canvas{

    transform:translateZ(0);

}

/* Disable expensive hover transforms */

.game-card:hover,
.card:hover,
.wallet-box:hover{

    transform:none !important;

}

/* GPU acceleration for common elements */

header,
.wallet-box,
.desktop-nav,
.mobile-menu,
.user-menu{

    will-change:auto !important;

}

/* Disable pulse/glow effects */

[class*="pulse"],
[class*="glow"],
[class*="shine"],
[class*="blink"]{

    animation:none !important;

}

/* Disable shimmer loaders */

[class*="skeleton"]::before,
[class*="loading"]::before{

    display:none !important;

}

/* Fast buttons */

button,
.btn,
a{

    transition:
        background-color .08s linear,
        color .08s linear,
        border-color .08s linear !important;

}

/* Prevent opacity animations */

.fade,
.fade-in,
.fade-out{

    animation:none !important;
    transition:none !important;

}

/* Instant dropdowns */

.dropdown,
.dropdown-menu,
.user-menu,
.cashback-popup{

    transition:none !important;

}
   /*==================================================
PERFORMANCE PACK V1
==================================================*/

/* Remove expensive effects */

*,
*::before,
*::after{

    backdrop-filter:none !important;

    -webkit-backdrop-filter:none !important;

    text-shadow:none !important;

    filter:none !important;

}

/* Reduce shadows */

.card,
.wallet-box,
.user-menu,
.cashback-popup,
.modal,
.popup,
header.header{

    box-shadow:0 2px 6px rgba(0,0,0,.12) !important;

}

/* Disable expensive transforms */

.game-card:hover,
.card:hover,
.wallet-box:hover,
button:hover,
.btn:hover{

    transform:none !important;

}

/* Fast animations */

*,
*::before,
*::after{

    animation-duration:.08s !important;

    animation-delay:0s !important;

    animation-fill-mode:both !important;

    transition-duration:.08s !important;

    transition-delay:0s !important;

}

/* Disable shimmer */

[class*=loader],
[class*=loading],
[class*=skeleton]{

    animation:none !important;

}

/* GPU repaint fix */

img,
video,
canvas{

    backface-visibility:hidden;

    transform:translateZ(0);

}

/* Better scrolling */

html{

    scroll-behavior:auto !important;

}

/* Prevent layout shift */

img{

    max-width:100%;

    height:auto;

}

/* Disable opacity fades */

.fade,
.fade-in,
.fade-out{

    transition:none !important;

}

/* Fast dropdowns */

.dropdown,
.dropdown-menu{

    transition:none !important;

}

/* Fast buttons */

button,
.btn{

    transition:

    background-color .08s linear,

    color .08s linear,

    border-color .08s linear !important;

}

/* Remove glow */

[class*=glow],

[class*=shine],

[class*=pulse]{

    animation:none !important;

}
 /*=========================================
DISABLE ALL LOADERS
=========================================*/

/* Common loaders */

.loader,
.loading,
.loading-screen,
.loading-overlay,
.loading-wrapper,
.page-loader,
.preloader,
.pre-loader,
.spinner,
.spinner-border,
.spinner-grow,
.skeleton,
.skeleton-loader,
.shimmer,
.progress-loader,
.ajax-loader,
.overlay-loader,
.site-loader,
.screen-loader,
.fullscreen-loader,
.global-loader,
.lazy-loader,
.waiting-loader,
.block-loader,

/* IDs */

#loader,
#loading,
#preloader,
#page-loader,
#loading-screen,
#loadingOverlay,
#globalLoader,
#siteLoader,
#spinner,
#ajaxLoader{

    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;

    pointer-events:none !important;

    animation:none !important;
    transition:none !important;

}

/* Hide anything containing loader/loading */

[class*="loader"],
[class*="Loader"],
[class*="loading"],
[class*="Loading"],
[class*="spinner"],
[class*="Spinner"],
[class*="preloader"],
[class*="Preloader"],
[class*="skeleton"],
[class*="Skeleton"],
[class*="shimmer"],
[id*="loader"],
[id*="Loader"],
[id*="loading"],
[id*="Loading"]{

    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;

    pointer-events:none !important;

    animation:none !important;
    transition:none !important;

}

/* Disable pseudo-element loaders */

[class*="loader"]::before,
[class*="loader"]::after,
[class*="loading"]::before,
[class*="loading"]::after,
[class*="spinner"]::before,
[class*="spinner"]::after{

    display:none !important;

    content:none !important;

}    
    /*=========================================
BET365 HEADER PROGRESS BAR
=========================================*/

.bet365-progress{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:#1A1A1A;

    z-index:999999;

    overflow:hidden;

}

/* Progress */

.bet365-progress-bar{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #FFD400 0%,
        #FFE54D 50%,
        #FFD400 100%
    );

    transition:width .15s linear;

}

/* Optional shine */

.bet365-progress-bar::after{

    content:"";

    position:absolute;

    top:0;

    right:-40px;

    width:40px;

    height:100%;

    background:rgba(255,255,255,.25);

    transform:skewX(-20deg);

    animation:bet365Progress 1.2s linear infinite;

}

@keyframes bet365Progress{

    from{

        right:-40px;

    }

    to{

        right:100%;

    }

}