/* Categories Section v2 */
.categories-section-v2 {
    margin: 1rem 0;
}

.categories-heading-v2 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

/* Tags Bar v2 */
.tags-bar-v2 {
    display: flex;
    flex-wrap: wrap;        /* desktop default: allow multiple rows */
    gap: 0.75rem;           /* slightly bigger gap */
    position: relative;
}

/* Chip Styling */
.tag-v2 {
    background: #f3f4f6;
    border: 2px solid #2563eb;   /* blue border for non-active */
    border-radius: 24px;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.tag-v2:hover {
    background: #e0e7ff;
    color: #1e3a8a;
}

.tag-v2:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Active chip */
.tag-v2.active {
    background: #2563eb;   /* filled blue */
    color: #fff;           /* white text */
    font-weight: 600;
    border-color: #2563eb; /* keep border consistent */
}

/* Mobile: horizontal scroll with snap + hidden scrollbar */
@media (max-width: 768px) {
    .tags-bar-v2 {
        flex-wrap: nowrap;              /* force single row */
        overflow-x: auto;               /* enable horizontal scroll */
        white-space: nowrap;            /* prevent text wrapping */
        scroll-snap-type: x mandatory;  /* snap chips neatly */
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;

        /* Hide scrollbar across browsers */
        scrollbar-width: none;          /* Firefox */
    }
    .tags-bar-v2::-webkit-scrollbar {
        display: none;                  /* Chrome, Safari, Edge */
    }

    .tag-v2 {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}