/* /css/mobile-category-bar.css */

.mobile-category-nav {
    display: none; /* Hidden by default, shown via media query */
    position: fixed;
    /* REVISED: Position directly below the main header, no gap */
    /* top is now handled dynamically by JS for smooth transition and correct positioning */
    left: 0;
    width: 100%;
    background-color: var(--surface-color); /* White background */
    z-index: 990; /* Below main header, above main content */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    overflow-x: auto; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    white-space: nowrap; /* Prevent items from wrapping */
    
    /* NEW: Add top and bottom borders */
    border-top: 1px solid var(--border-color); /* Add top border */
    border-bottom: none; /* Changed from 1px solid var(--border-color) to none */
    
    /* Hide scrollbar for cleaner look */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.mobile-category-nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.mobile-category-nav a {
    display: inline-flex; /* Allow items to be side-by-side */
    align-items: center;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--text-light-color);
    font-weight: 500;
    transition: all 0.2s ease;
    flex-shrink: 0; /* Prevent items from shrinking */
    gap: 0.25rem; /* Space between icon and text */
}

.mobile-category-nav a svg {
    width: 20px;
    height: 20px;
    fill: currentColor; /* Inherit color from parent */
}

.mobile-category-nav a:first-child {
    padding-left: 5%; /* Align first item with main content padding */
}

.mobile-category-nav a:last-child {
    padding-right: 5%; /* Align last item with main content padding */
}

.mobile-category-nav a:hover {
    color: var(--secondary-color);
}

.mobile-category-nav a.active {
    color: var(--secondary-color);
    font-weight: 600;
    border-bottom: 2px solid var(--secondary-color);
    /* REMOVE THIS LINE: padding-bottom: calc(0.5rem - 2px); */
    /* Ensure its padding is consistent with non-active links (0.5rem bottom) */
    padding-bottom: 0.5rem; /* Explicitly set or remove line if already 0.5rem from .mobile-category-nav a */
}

/* --- Media Query to show on mobile only --- */
@media (max-width: 768px) {
    .mobile-category-nav {
        display: flex; /* Show the nav on mobile */
    }
}