/* ========================================
   1. SAFE AREA BLACK LAYER
   ======================================== */

#safe-area-black {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #000;
    z-index: 299;
    pointer-events: none;
    display: none;
}

@media (max-width: 992px) {
    body.keyboard-open #flbar,
    body.keyboard-open #safe-area-black,
    body.keyboard-open #offersbarscont,
    body.keyboard-open #offersbarscont-shadow {
        opacity: 0;
        visibility: hidden;
        translate: 0 10px;
    }

    #flbar,
    #safe-area-black,
    #offersbarscont,
    #offersbarscont-shadow {
        transition: opacity 0.2s, visibility 0.2s, translate 0.2s;
    }

    body.ios.chrome #flbar,
    body.ios.chrome #safe-area-black,
    body.ios.chrome #offersbarscont,
    body.ios.chrome #offersbarscont-shadow {
        transition: opacity 0.2s !important;
    }

    body.ios.chrome.keyboard-open #flbar,
    body.ios.chrome.keyboard-open #safe-area-black,
    body.ios.chrome.keyboard-open #offersbarscont,
    body.ios.chrome.keyboard-open #offersbarscont-shadow {
        transition: opacity 0.2s !important;
    }
}


/* ========================================
   2. FOOTER BAR CONTAINER
   ======================================== */

#flbar {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    margin-inline: 0;
    z-index: 300;
    width: 100%;
    overflow: unset;
    border-top: 1px solid #1F56F1;
    background: #00002A;
    transition: opacity 0.2s;
    height: 90px;
    min-height: 90px;
    max-height: 90px;
}

body.ios #flbar {
    bottom: max(0px, env(safe-area-inset-bottom, 0px));
    position: fixed;
    transform: translateZ(0);
    transition: opacity 0.2s, bottom 0.15s ease-out;
}

body.ios:not(.chrome) #flbar {
    will-change: bottom;
}

body.ios.ios-viewport-collapsed #flbar {
    bottom: max(0px, env(safe-area-inset-bottom, 0px));
}

body.ios.ios-viewport-expanded #flbar {
    /*bottom: max(6px, calc(6px + env(safe-area-inset-bottom, 0px)));*/
    bottom: calc(env(safe-area-inset-bottom) - 1px);
}

body.ios.chrome #flbar {
    bottom: max(0px, env(safe-area-inset-bottom, 0px));
    transition: opacity 0.2s !important;
    transform: translateZ(0);
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
}

body.ios.chrome.scrolled #flbar {
    bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
    transition: none !important;
}

body.ios #offersbarscont {
    bottom: max(120px, calc(120px + env(safe-area-inset-bottom, 0px)));
}

body.ios.ios-viewport-collapsed #offersbarscont {
    bottom: max(120px, calc(120px + env(safe-area-inset-bottom, 0px)));
}

body.ios.ios-viewport-expanded #offersbarscont {
    bottom: max(126px, calc(126px + env(safe-area-inset-bottom, 0px)));
}

body.ios.scrolled #offersbarscont,
body.scrolled.ios #offersbarscont,
body.ios.scrolled.ios-viewport-expanded #offersbarscont,
body.ios.ios-viewport-expanded.scrolled #offersbarscont,
body.scrolled.ios.ios-viewport-expanded #offersbarscont {
    bottom: 119px !important;
}

body.ios.chrome #offersbarscont {
    bottom: max(120px, calc(120px + env(safe-area-inset-bottom, 0px)));
}

body.ios.chrome.scrolled #offersbarscont,
body.scrolled.ios.chrome #offersbarscont,
body.chrome.ios.scrolled #offersbarscont {
    bottom: max(120px, calc(120px + env(safe-area-inset-bottom, 0px))) !important;
}

.loggedout #flbar,
.loggedout #safe-area-black,
.loggedout #offersbarscont,
.loggedout #offersbarscont-shadow {
    display: none !important;
}

/* Hide widgets when sidebar/menu is open - mobile only */
@media (max-width: 992px) {
    body.openMenu #offersbarscont,
    body.openMenu #offersbarscont-shadow {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
    }
}


/* ========================================
   3. FOOTER BAR LIST & ITEMS
   ======================================== */

.flbarul {
    width: 100%;
    height: 100%;
    margin: 0;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 6px 0;
}

.flb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    flex: 1;
    text-transform: capitalize;
}

/* Mobile menu specific */
#mbmenu {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

#mbmenu a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
}

#mbmenu a .bars {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Bet counter badge */
.flb .bets_num {
    top: 0;
    left: auto;
    margin-left: 40px;
}

/* Links */
.flb a {
    color: #68A4FF;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    font-weight: 400;
}

.flb.active a {
    font-weight: 700;
}

.flb a:focus,
.flb a:hover {
    text-decoration: none;
}

.flb a > img {
    width: 100%;
    height: auto;
}

/* Text labels */
.flbarul > .flb span {
    margin-top: 3px;
    font-size: 16px;
}

.flb span {
    font-size: 12px;
}

body.pg_freespins .flb.active span,
body.pg_redeem .flb.active span,
.flb.active span {
    color: #FFF;
    /*font-weight: bold;*/
}

/* Icons */
.flb svg {
    height: 32px;
    text-align: center;
    display: block;
    margin: 0 auto;
}

.flb i {
    font-size: 18px;
    display: block;
}

.flb #mbetslip_but i {
    font-size: 40px;
}

.flb .fa-stack {
    height: 32px;
}

.flb i.stack {
    font-size: 18px;
    margin-left: 9px;
    color: #757171;
    margin-top: 12px;
}

.flb .bt {
    font-size: 2px;
}

/* Badge - not active state */
.flb:not(.active) .mbadge.badgeon {
    display: flex;
}


/* ========================================
   4. FOOTER ICONS & ACTIVE STATES
   ======================================== */

/* Icon container */
.footer-mobile-bar-item > a > div {
    width: 65px;
    aspect-ratio: 190/179;
    background-size: contain;
    margin: 0 auto;
}

/* Default icon states */
.flbhome {
    background: url(/img/120/icons/mobile/home.svg) center no-repeat;
}

.fareffriend {
    background: url(/img/120/icons/mobile/ref-icon.svg) no-repeat center;
}

.faredeem {
    background: url(/img/120/icons/mobile/redeem-icon.svg) no-repeat center;
}

.fastore {
    background: url(/img/120/icons/mobile/store-icon.svg) no-repeat center;
}

.fafreespins {
    background: url(/img/120/icons/mobile/free-icon.svg) no-repeat center;
}

/* Active state - when menu is closed */
body:not(.openMenu) #flbar .flb.active > .footer-mobile-bar-item > a > div,
body.pg_redeem #flbar .flb.active > .footer-mobile-bar-item > a > div,
body.pg_freespins #flbar .flb.active > .footer-mobile-bar-item > a > div {
    background-size: contain;
    margin: 0 auto;
    filter: drop-shadow(0px -3px 4px #000);
    -webkit-filter: drop-shadow(0px -3px 4px #000);
    transform-origin: bottom center;
}

/* Individual icon scales */
/*body:not(.openMenu) #flbar .flb.active > .footer-mobile-bar-item > a > div.fastore,*/
/*body.pg_redeem #flbar .flb.active > .footer-mobile-bar-item > a > div.fastore,*/
/*body.pg_freespins #flbar .flb.active > .footer-mobile-bar-item > a > div.fastore {*/
/*    transform: scale(1.08);*/
/*}*/

/*body:not(.openMenu) #flbar .flb.active > .footer-mobile-bar-item > a > div.faredeem,*/
/*body.pg_redeem #flbar .flb.active > .footer-mobile-bar-item > a > div.faredeem,*/
/*body.pg_freespins #flbar .flb.active > .footer-mobile-bar-item > a > div.faredeem {*/
/*    transform: scale(1.6);*/
/*}*/

/*body:not(.openMenu) #flbar .flb.active > .footer-mobile-bar-item > a > div.flbhome,*/
/*body.pg_redeem #flbar .flb.active > .footer-mobile-bar-item > a > div.flbhome,*/
/*body.pg_freespins #flbar .flb.active > .footer-mobile-bar-item > a > div.flbhome {*/
/*    transform: scale(2);*/
/*    top: 10px;*/
/*    position: relative;*/
/*}*/

/*body:not(.openMenu) #flbar .flb.active > .footer-mobile-bar-item > a > div.fareffriend,*/
/*body.pg_redeem #flbar .flb.active > .footer-mobile-bar-item > a > div.fareffriend,*/
/*body.pg_freespins #flbar .flb.active > .footer-mobile-bar-item > a > div.fareffriend {*/
/*    transform: scale(1.6);*/
/*}*/

/*body:not(.openMenu) #flbar .flb.active > .footer-mobile-bar-item > a > div.fafreespins,*/
/*body.pg_redeem #flbar .flb.active > .footer-mobile-bar-item > a > div.fafreespins,*/
/*body.pg_freespins #flbar .flb.active > .footer-mobile-bar-item > a > div.fafreespins {*/
/*    transform: scale(1.2);*/
/*}*/

/* Active icon images */
body:not(.openMenu) #flbar .flb.active .flbhome,
body.pg_redeem #flbar .flb.active .flbhome,
body.pg_freespins #flbar .flb.active .flbhome {
    background: url(/img/120/icons/mobile/home-active.svg) center no-repeat;
}

body:not(.openMenu) #flbar .flb.active .fastore,
body.pg_redeem #flbar .flb.active .fastore,
body.pg_freespins #flbar .flb.active .fastore {
    background: url(/img/120/icons/mobile/store-icon-active.svg) center no-repeat;
}

body:not(.openMenu) #flbar .flb.active .fafreespins,
body.pg_redeem #flbar .flb.active .fafreespins,
body.pg_freespins #flbar .flb.active .fafreespins {
    background: url(/img/120/icons/mobile/free-icon-active.svg) center no-repeat;
}

body:not(.openMenu) #flbar .flb.active .faredeem,
body.pg_redeem #flbar .flb.active .faredeem,
body.pg_freespins #flbar .flb.active .faredeem {
    background: url(/img/120/icons/mobile/redeem-icon-active.svg) center no-repeat;
}

body:not(.openMenu) #flbar .flb.active .fareffriend,
body.pg_redeem #flbar .flb.active .fareffriend,
body.pg_freespins #flbar .flb.active .fareffriend {
    background: url(/img/120/icons/mobile/ref-icon-active.svg) center no-repeat;
}

body:not(.openMenu) #flbar .flb.active > .footer-mobile-bar-item > a,
body.pg_redeem #flbar .flb.active > .footer-mobile-bar-item > a,
body.pg_freespins #flbar .flb.active > .footer-mobile-bar-item > a {
    top: -1px;
}

body.scaleM.scaleNavbar #flbar .flb > .footer-mobile-bar-item > a {
    transform: scale(1.3);
    padding: 8px 0 0 0;
}

 /* When menu is open - neutralize active state */
body.openMenu:not(.pg_freespins):not(.pg_redeem) #flbar .flb.active span {
    color: #68A4FF;
    font-weight: 400;
}

body.pg_freespins .mainpageflex,
body.pg_redeem .mainpageflex {
    pointer-events: none;
    display: none;
}

/* Menu bars icon */
.flb .bars {
    opacity: 0.6;
}

.flb.active .bars {
    flex-direction: column !important;
    position: absolute;
    margin-bottom: 20px;
    margin-left: 7px;
    filter: drop-shadow(0px -3px 4px #000);
    -webkit-filter: drop-shadow(0px -3px 4px #000);
    opacity: 1;
}

.flb.active .bars div.icon-bar {
    padding: 5px;
    margin: 2px;
}

/* Old home icon style (deprecated?) */
.flbhomei.d {
    background: url(/img/150/icons/Home_On.png) center no-repeat;
    position: absolute;
    width: 45px;
    top: -18px;
    background-size: 100%;
    aspect-ratio: 1/1;
    filter: drop-shadow(0px -3px 4px #000);
    -webkit-filter: drop-shadow(0px -3px 4px #000);
    margin-left: -5px;
}


/* ========================================
   5. PAGE-SPECIFIC VISIBILITY RULES
   ======================================== */

/* Always hidden */
.flb[data-id="tvgames"] {
    display: none;
}

/* Results page */
.results .flb {
    display: inline-block;
}

.results .flb[data-id="live"] {
    display: none;
}

.results .flb[data-id="sports"] {
    display: inline-block;
}

.results .flb[data-id="mbetslip"] {
    display: inline-block;
}

.results .flb[data-id="betslip"] {
    display: inline-block;
}

.results .flb[data-id="jackpots"] {
    display: inline-block;
}

/* Sports pages */
.virtuals .flb,
.results .flb,
.sports .flb {
    width: 19%;
}

.sports .flb[data-id="sports"],
.sports .flb[data-id="livecasino"] {
    display: none;
}

.sports.livematch .flb[data-id="sports"] {
    display: inline-block;
}

/* Hide betslip/live for casino pages */
.casino .flb[data-id="live"],
.casino .flb[data-id="betslip"],
.casino .flb[data-id="mbetslip"],
.live-casino .flb[data-id="live"],
.live-casino .flb[data-id="betslip"],
.live-casino .flb[data-id="mbetslip"],
.tvgames .flb[data-id="live"],
.tvgames .flb[data-id="betslip"],
.tvgames .flb[data-id="mbetslip"],
.livematch .flb[data-id="live"] {
    display: none;
}

/* Virtuals page - hide casino and live */
.virtuals .flb[data-id="livecasino"],
.virtuals .flb[data-id="casino"],
.virtuals .flb[data-id="live"] {
    display: none;
}


/* ========================================
   6. RESPONSIVE & MOBILE SCALE
   ======================================== */

/* Mobile scale - placeholder for future adjustments */

/* Ingame state - hide footer and widgets */
.ingame #flbar,
.ingame #offersbarscont,
.ingame #offersbarscont-shadow {
    display: none;
}

/* Desktop - hide footer */
@media (min-width: 993px) {
    #flbar {
        display: none;
    }

    /* Force hide safe-area-black on desktop */
    #safe-area-black {
        display: none !important;
    }

    /* Force hide mobile search on desktop - high specificity */
    .mobilesearch,
    .mobilesearch.active,
    .mobilesearch.forcedis,
    div.mobilesearch {
        display: none !important;
    }
}

/* Responsive font sizes */
@media (max-width: 768px) {
    .flbarul > .flb span {
        font-size: 11px;
    }
}

@media (max-width: 490px) {
    .footer-mobile-bar-item > a > div {
        width: 40px;
    }
}

@media (min-width: 500px) and (max-width: 789px) {
/*    .flbarul > .flb.active span {*/
/*        font-size: 17px;*/
/*    }*/

    .flbarul > .flb span {
        font-size: 14px;
    }

    .footer-mobile-bar-item > a > div {
        width: 44px;
        width: clamp(46px, calc(46px + (10 * (100vw - 500px) / 289)), 56px);
    }
}

/* ========================================
   OFFERS BAR SHADOW LAYER
   Shadow element positioned above footer bar
   ======================================== */

#offersbarscont-shadow {
    position: fixed;
    width: 101%;
    height: 393px;
    background: linear-gradient(180deg, rgba(4, 5, 45, 0) -6.02%, rgba(4, 5, 45, 0.88) 30.51%);
    left: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 299;
    display: none;
}

#offersbarscont-shadow.hideit {
    display: none !important;
}

@media (max-width: 992px) {
    body.loggedin #offersbarscont-shadow:not(.hideit) {
        display: block;
        filter: blur(2px);
    }
}

body.ios #offersbarscont-shadow {
    bottom: 0;
}

body.ios.ios-viewport-collapsed #offersbarscont-shadow {
    bottom: 0;
}

body.ios.ios-viewport-expanded #offersbarscont-shadow {
    bottom: 0;
}

body.ios.chrome #offersbarscont-shadow {
    bottom: env(safe-area-inset-bottom, 0px);
    transition: none !important;
}

body.ios.chrome.scrolled #offersbarscont-shadow,
body.scrolled.ios.chrome #offersbarscont-shadow,
body.chrome.ios.scrolled #offersbarscont-shadow {
    bottom: env(safe-area-inset-bottom, 0px);
    transition: none !important;
}

body.ios.scrolled #offersbarscont-shadow {
    bottom: 0;
}

@media (min-width: 993px) {
    #offersbarscont-shadow {
        display: none !important;
    }
}

/* ========================================
   FOOTER BAR BADGES
   Notification badges for footer bar items
   ======================================== */

/* Badge base styles - shared between .mbadge and .fbadge */
.mbadge,
.fbadge {
    border-radius: 50%;
    background: linear-gradient(157deg, #FF555B 28.72%, #DC2626 66.87%);
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.25));
    box-shadow:0 0 4px rgba(0,0,0,0.25);
    color: #fff;
    height: 15px;
    width: 15px;
    text-align: center;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    position: absolute;
}

.fbadge::before,.mbadge::before{
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(255,103,103,0.31);
}

/* Mobile badge specific */
.mbadge {
    float: left;
}

/* Footer badge specific */
.fbadge {
    top: -6px;
    right: 14px;
}

/* Account button badge - smaller size */
#mbaccount .mbadge {
    height: 12px;
    width: 12px;
    top: 5px;
    right: -9px;
}

/* Free spins button positioning */
#freeSpinsBtn {
    position: relative;
}

#freeSpinsBtn .fbadge {
    right: 10px;
    top: 15px;
}

/* Badge active state */
.fbadge.badgeon {
    display: flex;
}


/* ========================================
   END OF FOOTER BAR STYLES
   ======================================== */