/* ═════════════════════════════
   BOTTOM NAV — Mobile Casino
═════════════════════════════ */
.x2-btm-nav{
    display:none;position:fixed;bottom:0;left:0;right:0;z-index:9990;
    background:linear-gradient(180deg,rgba(11,11,11,.92),rgba(9,9,9,.9));
    border-top:1px solid rgba(255,255,255,.06);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,6px));
    -webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);
    justify-content:space-around;align-items:center;
    /* Local accent to avoid inheriting global orange */
    --x2-btm-accent:#0B7A3E;
}
@media(max-width:768px){.x2-btm-nav{display:flex}}

.x2-btm-item{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    text-decoration:none;color:#9CA3AF;
    flex:1;padding:6px 0 4px;min-height:44px;
    transition:color .22s ease, transform .18s ease;position:relative;-webkit-tap-highlight-color:transparent;
}
.x2-btm-item:hover{color:#999;text-decoration:none}
.x2-btm-item:active{transform:translateY(1px)}
.x2-btm-item.active{color:var(--x2-btm-accent)}
.x2-btm-item.active .x2-btm-icon{stroke:var(--x2-btm-accent)}

.x2-btm-icon{transition:all .22s ease}
.x2-btm-icon-img{width:22px;height:22px;object-fit:contain;display:block;filter:brightness(0) invert(.55) saturate(0);transition:filter .22s ease,transform .22s ease}
.x2-btm-item:hover .x2-btm-icon-img{filter:brightness(0) invert(.78);transform:translateY(-1px)}
.x2-btm-item.active .x2-btm-icon-img{filter:none;transform:translateY(-1px) scale(1.08)}
.x2-btm-label{font-size:10px;font-weight:700;letter-spacing:.25px;line-height:1;white-space:nowrap;color:#A3A3A3}
.x2-btm-item.active .x2-btm-label{color:#fff}

/* Home — elevated circle */
.x2-btm-home{margin-top:-18px}
.x2-btm-home-ring{
    display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:50%;
    background:var(--x2-btm-accent);color:#000;
    box-shadow:0 4px 16px rgba(11,122,62,.35),0 0 0 3px rgba(0,0,0,1);
    transition:all .2s ease;
}
.x2-btm-home-ring svg{stroke:#000;stroke-width:2.2}
.x2-btm-home:hover .x2-btm-home-ring{
    transform:scale(1.06);
    box-shadow:0 6px 20px rgba(11,122,62,.45),0 0 0 3px rgba(0,0,0,1);
}
.x2-btm-home .x2-btm-label{color:var(--x2-btm-accent);margin-top:2px}

/* Active dot indicator */
.x2-btm-item.active::after{
    content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
    width:22px;height:4px;border-radius:999px;background:var(--x2-btm-accent);
    box-shadow:0 0 10px rgba(11,122,62,.35);
}
.x2-btm-home.active::after{display:none}

/* Pad body so content doesn't hide behind nav */
@media(max-width:768px){
    body{padding-bottom:68px!important}
  
}
  /*=========================================
BET365 BOTTOM NAV (NO HOME)
=========================================*/

.x2-btm-nav{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    align-items:center;

    height:58px;

    background:#111;

    border-top:1px solid #2B2B2B;

    box-shadow:0 -2px 8px rgba(0,0,0,.25);

    z-index:99999;

}

/* Hide Home */

.x2-btm-home{

    display:none !important;

}

/* Items */

.x2-btm-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    height:58px;

    text-decoration:none;

    color:#8A8A8A;

    position:relative;

    transition:.15s;

}

/* Icons */

.x2-btm-icon-img{

    width:22px;

    height:22px;

    object-fit:contain;

    filter:brightness(.8) grayscale(100%);

    transition:.15s;

}

/* Labels */

.x2-btm-label{

    font-size:10px;

    font-weight:600;

    line-height:1;

}

/* Active */

.x2-btm-item.active{

    color:#FFD400;

}

.x2-btm-item.active .x2-btm-label{

    color:#FFD400;

}

.x2-btm-item.active .x2-btm-icon-img{

    filter:none;

}

.x2-btm-item.active::before{

    content:"";

    position:absolute;

    top:0;

    left:18%;

    width:64%;

    height:3px;

    background:#FFD400;

    border-radius:0 0 4px 4px;

}

/* Hover */

.x2-btm-item:hover{

    color:#FFD400;

}

.x2-btm-item:hover .x2-btm-icon-img{

    filter:none;

}

/* Desktop */

@media(min-width:769px){

    .x2-btm-nav{

        display:none;

    }

}
/*==================================================
PREMIUM BOTTOM NAV
BLACK + NEON YELLOW
==================================================*/

.x2-btm-nav{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:space-around;

    background:#0B0B0B;

    border-top:1px solid rgba(255,255,0,.15);

    box-shadow:
        0 -6px 30px rgba(0,0,0,.55);

    z-index:999999;

}

/* Hide Home */

.x2-btm-home{

    display:none !important;

}

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

.x2-btm-item{

    flex:1;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    color:#7E7E7E;

    text-decoration:none;

    position:relative;

    transition:.18s ease;

}

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

.x2-btm-icon-img{

    width:22px;

    height:22px;

    object-fit:contain;

    filter:
        grayscale(100%)
        brightness(.65);

    transition:.18s ease;

}

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

.x2-btm-label{

    font-size:10px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

}

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

.x2-btm-item.active{

    color:#FFFF00;

}

.x2-btm-item.active .x2-btm-label{

    color:#FFFF00;

}

.x2-btm-item.active .x2-btm-icon-img{

    filter:none;

    transform:translateY(-2px);

    filter:

        drop-shadow(0 0 3px rgba(255,255,0,.75))

        drop-shadow(0 0 8px rgba(255,255,0,.35));

}

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

.x2-btm-item.active::before{

    content:"";

    position:absolute;

    top:0;

    left:18%;

    width:64%;

    height:3px;

    border-radius:0 0 6px 6px;

    background:#FFFF00;

    box-shadow:

        0 0 8px rgba(255,255,0,.85),

        0 0 18px rgba(255,255,0,.45);

}

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

.x2-btm-item:hover{

    color:#FFFF00;

}

.x2-btm-item:hover .x2-btm-icon-img{

    filter:

        drop-shadow(0 0 2px rgba(255,255,0,.7));

}

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

.x2-btm-nav::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:1px;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,0,.65),

        transparent

    );

}

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

@media(max-width:768px){

.x2-btm-nav{

height:60px;

}

.x2-btm-icon-img{

width:21px;

height:21px;

}

.x2-btm-label{

font-size:9px;

}

} 
  /*==================================================
PREMIUM BET365 BOTTOM NAV V2
==================================================*/

.x2-btm-nav{

    position:fixed;

    left:10px;

    right:10px;

    bottom:10px;

    height:64px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    align-items:center;

    background:rgba(10,10,10,.96);

    border:1px solid rgba(255,255,0,.12);

    border-radius:18px;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:

        0 10px 35px rgba(0,0,0,.55),

        inset 0 1px 0 rgba(255,255,255,.03);

    z-index:999999;

}

/* Hide Home */

.x2-btm-home{

    display:none !important;

}

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

.x2-btm-item{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    text-decoration:none;

    color:#6F6F6F;

    transition:.18s;

}

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

.x2-btm-icon-img{

    width:23px;

    height:23px;

    object-fit:contain;

    filter:brightness(.65) grayscale(100%);

    transition:.18s;

}

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

.x2-btm-label{

    font-size:10px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

}

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

.x2-btm-item.active{

    color:#FFFF00;

}

.x2-btm-item.active .x2-btm-label{

    color:#FFFF00;

}

.x2-btm-item.active .x2-btm-icon-img{

    filter:none;

    transform:translateY(-3px) scale(1.08);

    filter:

        drop-shadow(0 0 4px rgba(255,255,0,.8))

        drop-shadow(0 0 12px rgba(255,255,0,.45));

}

/* Neon Dot */

.x2-btm-item.active::before{

    content:"";

    position:absolute;

    top:6px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#FFFF00;

    box-shadow:

        0 0 8px #FFFF00,

        0 0 20px rgba(255,255,0,.6);

}

/*======================================
Hover
======================================*/

.x2-btm-item:hover{

    color:#FFFF00;

}

.x2-btm-item:hover .x2-btm-icon-img{

    filter:

        drop-shadow(0 0 4px rgba(255,255,0,.55));

}

/*======================================
Top Glow Line
======================================*/

.x2-btm-nav::before{

    content:"";

    position:absolute;

    left:25px;

    right:25px;

    top:0;

    height:1px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,0,.9),

            transparent

        );

}

/*======================================
Safe Area
======================================*/

@supports (padding: max(0px)){

.x2-btm-nav{

padding-bottom:max(0px,env(safe-area-inset-bottom));

}

}

/*======================================
Desktop
======================================*/

@media(min-width:769px){

.x2-btm-nav{

display:none;

}

}
  /* Mobile Bottom Navigation */

.x2-btm-nav{
    position:fixed;
    bottom:10px;
    left:10px;
    right:10px;
    height:62px;
    background:#3b3b3b;
    border-radius:12px 12px 0 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:4px;
    z-index:9999;
    box-shadow:0 -3px 15px rgba(0,0,0,.45);
}

.x2-btm-item{
    flex:1;
    height:54px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    color:#fff;
    border-radius:8px;
    transition:.25s;
}

.x2-btm-item:hover{
    background:#505050;
}

.x2-btm-item.active{
    background:#ffc400;
    color:#111;
}

.x2-btm-item.active img{
    filter:brightness(0);
}

.x2-btm-icon-img{
    width:20px;
    height:20px;
    object-fit:contain;
    margin-bottom:3px;
}

.x2-btm-label{
    font-size:10px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
}

/* Home button */

.x2-btm-home{
    background:#ffc400;
    color:#111;
}

.x2-btm-home .x2-home-circle{
    width:32px;
    height:32px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.x2-btm-home svg{
    width:22px;
    height:22px;
    stroke:#111;
}

/* Hide on desktop */

@media(min-width:992px){
    .x2-btm-nav{
        display:none;
    }
}
  .x2-btm-nav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    height:64px;
    display:flex;
    justify-content:space-between;
    align-items:center;

    background:rgba(255,255,255,.12);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    border-radius:14px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 8px 25px rgba(0,0,0,.25);

    z-index:9999;
}

.x2-btm-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#fff;
    font-size:10px;
    font-weight:500;
    gap:3px;
}

.x2-btm-icon,
.x2-btm-icon-img{
    width:22px;
    height:22px;
    object-fit:contain;
    color:#fff;
}

.x2-btm-label{
    font-size:10px;
    line-height:1;
}

.x2-btm-item.active{
    color:#fff;
}

.x2-btm-item.active .x2-btm-icon,
.x2-btm-item.active .x2-btm-icon-img{
    transform:scale(1.08);
    filter:drop-shadow(0 0 6px rgba(255,255,255,.45));
}

.x2-btm-item img{
    filter:brightness(0) invert(1);
}
  /* ===== Floating Bottom Navigation Override ===== */

#x2-btm-nav{
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    bottom:10px !important;

    height:62px !important;
    padding:0 6px !important;

    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;

    border-radius:14px !important;

    background:rgba(255,255,255,.10) !important;
    backdrop-filter:blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(180%) !important;

    border:1px solid rgba(255,255,255,.08) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.30),
        inset 0 1px rgba(255,255,255,.08) !important;

    z-index:999999 !important;
}

#x2-btm-nav .x2-btm-item{
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;

    gap:4px !important;

    color:rgba(255,255,255,.75) !important;
    text-decoration:none !important;

    transition:all .25s ease !important;
}

#x2-btm-nav .x2-btm-icon-img,
#x2-btm-nav svg{
    width:22px !important;
    height:22px !important;

    object-fit:contain !important;

    filter:brightness(0) invert(1) !important;

    transition:all .25s ease !important;
}

#x2-btm-nav .x2-btm-label{
    font-size:10px !important;
    font-weight:500 !important;
    color:#fff !important;
    line-height:1 !important;
}

#x2-btm-nav .x2-btm-item.active{
    color:#fff !important;
}

#x2-btm-nav .x2-btm-item.active .x2-btm-icon-img,
#x2-btm-nav .x2-btm-item.active svg{
    transform:translateY(-2px) scale(1.12) !important;
    filter:
        brightness(0) invert(1)
        drop-shadow(0 0 6px rgba(255,255,255,.5)) !important;
}

#x2-btm-nav .x2-btm-item.active .x2-btm-label{
    font-weight:700 !important;
}

#x2-btm-nav .x2-btm-item:active{
    transform:scale(.92) !important;
}

@media (min-width:768px){
    #x2-btm-nav{
        max-width:420px;
        left:50% !important;
        right:auto !important;
        transform:translateX(-50%);
    }
}