/* Bottom Navbar Styles for Mobile App View */

/* Default: Hide on desktop */
.mobile-bottom-nav {
    display: none !important;
}

/* Only apply these styles on devices smaller than desktop (standard Bootstrap breakpoint) */
@media (max-width: 1199px) {

    /* Show on mobile */
    .mobile-bottom-nav {
        display: block !important;
    }

    /* 1. Hide the mobile toggle button since nav is always visible */
    .mobile-nav-toggle {
        display: none !important;
    }

    /* 2. Position the navbar fixed at the bottom */
    .navmenu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background-color: #ffffff !important;
        /* White background like standard apps */
        box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1) !important;
        /* Shadow on top */
        z-index: 9999 !important;
        padding: 0 !important;
        height: auto !important;
        border-top: 1px solid #e0e0e0;
        display: block !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        /* Handle iPhone X+ safe area */
    }

    /* 3. Style the UL as a flex container */
    .navmenu ul {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        /* Distribute items evenly */
        align-items: center !important;
        margin: 0 !important;
        padding: 8px 0 !important;
        list-style: none !important;
        background: transparent !important;
        position: static !important;
        inset: auto !important;
        border: none !important;
        width: 100% !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* 4. Style individual List Items */
    .navmenu ul li {
        padding: 0 !important;
        margin: 0 !important;
        flex: 1 !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        width: auto !important;
    }

    /* 5. Style Links (Icons + Text) */
    .navmenu ul li a {
        display: flex !important;
        flex-direction: column !important;
        /* Stack icon above text */
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
        /* Smaller text for app labels */
        color: #6c757d !important;
        /* Inactive color */
        padding: 5px !important;
        text-transform: capitalize !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
        background: transparent !important;
        width: 100% !important;
    }

    /* 6. Icon Styles */
    .navmenu ul li a i {
        font-size: 20px !important;
        margin-bottom: 2px !important;
        margin-left: 0 !important;
        /* Reset any margin from desktop styles */
        display: block !important;
        color: inherit !important;
        /* Reset mobile menu styles from main.css */
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    /* Reset hover/focus/active backgrounds */
    .navmenu ul li a:hover,
    .navmenu ul li a:focus,
    .navmenu ul li a.active {
        background-color: transparent !important;
        color: var(--accent-color, #12a16b) !important;
    }

    /* Fix for active icon background being green circle */
    .navmenu ul li a.active i {
        background-color: transparent !important;
        color: var(--accent-color, #12a16b) !important;
    }

    /* Remove any pseudo-elements (underlines used in desktop) */
    .navmenu ul li a:before {
        display: none !important;
    }

    /* Prevent rotation and add better animation for active state */
    .navmenu .active i,
    .navmenu .active:focus i {
        transform: none !important;
        /* Override the 180deg rotation from main.css */
        transform: scale(1.15) !important;
        /* Add subtle pop/scale effect */
        color: var(--accent-color) !important;
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        /* Bouncy transition */
    }

    /* Adjust body padding so content doesn't hide behind navbar */
    body {
        padding-bottom: 80px !important;
    }

    /* Hide dropdown arrows/functionality for main nav items if they complicate the "App Bar" look 
     For this specific request, checking if we need dropdowns. 
     Usually app bottom bars don't have dropdowns. 
     We'll hide the chevron down icons for cleaner look */
    .navmenu ul li a .toggle-dropdown {
        display: none !important;
    }

    /* Ensure dropdowns (if any remain) don't pop up strangely, or disable them.
     For this specific task of "Mobile App Look", deep nested menus are usually bad in bottom nav.
     We will hide submenus for now to keep it clean, as user asked for "bottom bar" like app.
  */
    .navmenu ul li ul {
        display: none !important;
    }

    /* Floating WhatsApp button adjustment */
    .float {
        bottom: 80px !important;
        /* Move it up above the navbar */
    }
}