.bottom-nav {
    display: none; /* Hidden by default, shown on mobile */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Standard height for bottom nav */
    background-color: #fff; /* White background */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
}

.bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888; /* Default text color */
    text-decoration: none;
    font-size: 0.75em;
    font-weight: 500;
    padding: 5px 0;
    flex-grow: 1;
    transition: color 0.3s ease;
}

.bottom-nav-link .nav-icon {
    font-size: 1.5em; /* Icon size */
    margin-bottom: 2px;
}

.bottom-nav-link.active {
    color: #667eea; /* Active color, matches primary brand color */
}

.bottom-nav-link:hover {
    color: #4a5ee5; /* Hover color */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .bottom-nav {
        display: flex; /* Show on mobile */
    }
}

/* Hide desktop header and show mobile nav buttons on small screens */
@media (max-width: 768px) {
    .navbar.header .nav-menu {
        display: none; /* Hide desktop nav menu */
    }

    .navbar.header #auth-buttons {
        display: none !important; /* Hide desktop auth buttons */
    }

    .navbar.header .container.header-inner {
        justify-content: space-between; /* Adjust alignment */
    }
    
    .navbar.header .logo {
        margin-right: auto; /* Push logo to left */
    }

    #desktop-header {
        display: none; /* Hide desktop header entirely */
    }

    /* Show the mobile elements */
    .menu-toggle {
        display: none !important; /* Hide hamburger menu */
    }

    #mobile-nav-buttons {
        display: none !important; /* Hide mobile login/register buttons */
        order: 2; /* Position after logo */
    }
    
    /* Adjust main content padding for bottom nav */
    body {
        padding-bottom: 60px; /* Space for the fixed bottom nav */
    }
}