/**
 * Mobile Navbar Always Visible Fix
 * Ensures the mobile navbar is visible and sticky at bottom
 */

/* Force mobile navbar to be visible and sticky - NO MEDIA QUERIES */
#mobileNavbarMain {
    /* Critical positioning - ALWAYS FIXED TO BOTTOM */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    
    /* Dimensions */
    width: 100% !important;
    width: 100vw !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* Maximum z-index to stay on top of EVERYTHING */
    z-index: 2147483647 !important;
    
    /* Simple visual appearance - no heavy effects */
    background: #1a1a1a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3) !important;
    
    /* FORCE VISIBILITY */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* No transforms that could move it */
    transform: none !important;
    -webkit-transform: none !important;
    
    /* No animations that could hide it */
    transition: none !important;
    animation: none !important;
}

/* Force inner elements to be visible */
#mobileNavbarMain .mobile-navbar-bar,
#mobileNavbarMain .mobile-bottom-bar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 60px !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 12px !important;
}

#mobileNavbarMain .mobile-navbar-content,
#mobileNavbarMain .mobile-bar-content {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* All children must be visible */
#mobileNavbarMain *:not(script):not(style) {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Balance chips */
#mobileNavbarMain .balance-chip {
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 8px !important;
}

/* Buttons */
#mobileNavbarMain button,
#mobileNavbarMain .primary-cta,
#mobileNavbarMain .qa-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* Guest chip for non-logged users */
#mobileNavbarMain .guest-chip {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
}

/* Body padding to prevent content being hidden */
body {
    padding-bottom: 60px !important;
}

/* Main content padding */
.main-content,
#content,
main {
    padding-bottom: 80px !important;
}

/* Hide on desktop if you want mobile-only */
@media (min-width: 769px) {
    /* Uncomment the line below if you want to hide on desktop */
    /* #mobileNavbarMain { display: none !important; } */
    
    /* OR keep it visible but styled differently for desktop */
    #mobileNavbarMain {
        max-width: 100% !important;
        /* You can adjust desktop-specific styles here */
    }
}

/* Ensure it's not hidden by any parent */
body > #mobileNavbarMain {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
}

/* Nuclear option - override ANY attempt to hide */
#mobileNavbarMain[style*="display: none"],
#mobileNavbarMain[style*="display:none"],
#mobileNavbarMain.d-none,
#mobileNavbarMain.hidden,
#mobileNavbarMain[hidden],
.mobile-navbar-container[style*="display: none"],
.mobile-navbar-container.d-none {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 0 !important;
}

/* Remove ALL transforms from parents that could affect positioning */
html, body, body > div {
    transform: none !important;
    -webkit-transform: none !important;
}

/* Debugging - add a red border to see if element exists */
#mobileNavbarMain {
    /* Uncomment line below for debugging */
    /* border: 3px solid red !important; */
}