/* ========================================
   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: 6px;
    inset-inline: 0;
    margin-inline: auto;
    z-index: 300;
    width: 99%;
    overflow: unset;
    border: 1px solid #444;
    border-radius: 50px;
    box-shadow: 
        0 3px 14px rgba(0, 0, 0, 0.6), 
        inset 0 1px 2px rgba(192, 192, 192, 0.4), 
        inset 0 -1px 2px rgba(255, 255, 255, 0.2);
    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)));
}

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

#flbar.glass-effect {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.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%;
    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: rgba(255, 255, 255, 0.5);
    opacity: 0.8;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
}

.flb.active a {
    opacity: 1;
}

.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;
}

.flb.active span {
    color: #6eec89;
    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/150/icons/mobile/logo-nav.png) center no-repeat;
}

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

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

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

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

/* Active state - when menu is closed */
body:not(.openMenu) #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 {
    transform: scale(1.08);
}

body:not(.openMenu) #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 {
    transform: scale(2);
    top: 10px;
    position: relative;
}

body:not(.openMenu) #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 {
    transform: scale(1.2);
}

/* Active icon images */
body:not(.openMenu) #flbar .flb.active .flbhome {
    background: url(/img/150/icons/mobile/logo-nav-active.png) center no-repeat;
}

body:not(.openMenu) #flbar .flb.active .fastore {
    background: url(/img/150/icons/mobile/store-icon-active.png) center no-repeat;
}

body:not(.openMenu) #flbar .flb.active .fafreespins {
    background: url(/img/150/icons/mobile/free-icon-active.png) center no-repeat;
}

body:not(.openMenu) #flbar .flb.active .faredeem {
    background: url(/img/150/icons/mobile/redeem-icon-active.png) center no-repeat;
}

body:not(.openMenu) #flbar .flb.active .fareffriend {
    background: url(/img/150/icons/mobile/ref-icon-active.png) center no-repeat;
}

body:not(.openMenu) #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 0px 0px 0px;
}

/* When menu is open - neutralize active state */
body.openMenu #flbar .flb.active span {
    color: rgba(255, 255, 255, 0.5);
    font-weight: normal;
}

/* 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: 100%;
    height: 450px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 30%, transparent 100%);
    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;
    }
}

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: #f70000;
    color: #fff;
    height: 24px;
    width: 24px;
    text-align: center;
    display: none;
    justify-content: center;
    align-items: center;
    font-family: "Heebo", sans-serif;
    font-size: 14px;
    position: absolute;
}

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

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

/* Account button badge - smaller size */
#mbaccount .mbadge {
    height: 18px;
    width: 18px;
    top: 2px;
    right: 4px;
}

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

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

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


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