/**
 * Mobile Navbar Layer Fix
 * Ensures mobile navbar goes behind modals without breaking anything else
 */

/* Lower mobile navbar z-index to reasonable level */
.mobile-bottom-bar,
.mobile-navbar-bar,
.mobile-navbar-content,
.mobile-bar-content,
#mobileNavbarMain,
#mobileNavbarMain.mobile-navbar-container,
.mobile-navbar-container {
    z-index: 100 !important;
}

/* Override any inline styles with higher specificity */
nav.mobile-bottom-bar.mobile-navbar-bar {
    z-index: 100 !important;
}

/* Target the specific navbar element */
body nav.mobile-bottom-bar {
    z-index: 100 !important;
}

/* Ensure modals are above navbar */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}

.modal-dialog {
    z-index: 1051 !important;
}

/* Specific fix for deposit popup */
#depositPopup {
    z-index: 1060 !important;
}

#depositPopup .modal-dialog {
    z-index: 1061 !important;
}

/* Other modals */
#withdrawModal,
#kycModal,
#historyModal {
    z-index: 1060 !important;
}

/* Dropdowns and menus */
.dropdown-menu {
    z-index: 1070 !important;
}

/* When modal is open, lower navbar even more */
body.modal-open .mobile-bottom-bar,
body.modal-open .mobile-navbar-bar,
body.modal-open #mobileNavbarMain {
    z-index: 50 !important;
}

/* Mobile specific */
@media (max-width: 768px) {
    .mobile-bottom-bar,
    .mobile-navbar-bar {
        position: fixed !important;
        bottom: 0 !important;
        z-index: 100 !important;
    }

    /* Ensure modals create proper stacking context on mobile */
    .modal {
        position: fixed !important;
        z-index: 1050 !important;
    }
}