/* ==========================================
   PlayTube Custom Bottom Navigation Bar CSS
   ========================================== */

/* 1. Hide Native Blue FAB Button Visually BUT Keep Accessible for JS */
.btn-fab, 
a.btn-fab, 
#upload-btn-floating,
.floating-upload-btn,
.fab-button {
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    z-index: -1 !important;
}

/* Hide Old PlayTube Footer Bars Completely */
footer.mobile-fixed-footer,
.mobile-bottom-nav,
.youplay-mobile-nav,
.yp_footer,
.yp_fixed_nav,
div[class*="footer-fixed"],
.mobile-menu-bottom {
    display: none !important;
}

/* 2. Custom Black Floating Capsule Bar */
.custom-bottom-nav {
    position: fixed !important;
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 280px !important;
    height: 54px !important;
    background-color: #000000 !important;
    border-radius: 20px !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.6) !important;
}

/* 3. High-Quality Vector Icons Styling */
.custom-bottom-nav .nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 0.85;
    transition: all 0.2s ease-in-out;
}

.custom-bottom-nav .nav-item:hover,
.custom-bottom-nav .nav-item:active {
    opacity: 1;
    transform: scale(1.1);
}

.custom-bottom-nav .nav-item svg {
    stroke: #ffffff !important;
}

/* Custom (+) Plus Upload Button Styling */
.custom-bottom-nav .nav-upload .upload-btn-inner {
    width: 28px !important;
    height: 28px !important;
    border: 2px solid #ffffff !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent;
}

/* 4. Responsive View Rules */
@media screen and (min-width: 992px) {
    .custom-bottom-nav {
        display: none !important;
    }
}