/* Filters Section in Sidebar */
.filters-section {
    margin-bottom: var(--space-8); /* More space below filters */
}

.filter-group {
    margin-bottom: var(--space-6);
}

.filter-group label { /* Shared label style for filter groups */
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: var(--space-2);
}

/* Active Filters Display */
.active-filters {
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: var(--gray-50); /* Light background for distinction */
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.filter-tags {
    display: flex;
    flex-wrap: wrap; /* Allow tags to wrap */
    gap: var(--space-2);
}

.filter-tag {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius-full); /* Pill shape */
    font-size: var(--font-size-xs);
    animation: slideIn 0.3s ease; /* Subtle animation for new tags */
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.filter-tag-remove {
    background: none;
    border: none;
    color: var(--white); /* Ensure contrast with tag background */
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.filter-tag-remove:hover {
    background: rgba(255, 255, 255, 0.2); /* Slight hover effect */
}

.filter-tag-remove i {
    font-size: 10px; /* Adjust icon size if needed */
}