/* ── 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: #F5A623;
            box-shadow: 0 0 6px rgba(245,166,35,0.25);
            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{

    height:64px !important;

    /* Premium dark background */
    background: #17191D !important;

    border-bottom:1px solid rgba(255,255,255,.06) !important;

    box-shadow:0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) !important;

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

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

    padding:0 16px !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:36px !important;

    height:36px !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-left: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:38px !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{

    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{

    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%;

    }

}