/* Filter Bar Block Frontend Styles */
.wp-block-crates-filter-bar {
    border-bottom: 1px solid #374151; /* border-gray-800 */
    padding-bottom: 1.5rem; /* pb-6 */
    margin-bottom: 2.5rem;
}

.crates-filter-bar__container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* gap-6 */
}

@media (min-width: 768px) {
    .crates-filter-bar__container {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

.crates-filter-bar__section {
    flex: 1;
}

.crates-filter-bar__title {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    margin-bottom: 0.75rem; /* mb-3 */
    color: #D1D5DB; /* text-gray-300 */
}

.crates-filter-bar__tags,
.crates-filter-bar__brands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem; /* gap-2.5 */
}

.crates-filter-bar__tag,
.crates-filter-bar__brand {
    font-size: 0.75rem; /* text-xs */
    padding: 0.375rem 0.875rem; /* px-3.5 py-1.5 */
    border-radius: 9999px; /* rounded-full */
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* transition-colors */
    background-color: #0F2922; /* bg-[#233730] - using theme colors */
    color: #D1D5DB; /* text-gray-300 */
}

.crates-filter-bar__tag:hover,
.crates-filter-bar__brand:hover {
    background-color: #163832; /* hover:bg-[#2D4840] - using theme colors */
}

.crates-filter-bar__tag.active {
    background-color: #F39A76; /* bg-[#F47458] - using theme orange */
    color: #ffffff; /* text-white */
}

.crates-filter-bar__tag.active:hover {
    background-color: #f38a5e; /* hover:bg-[#E36347] - using theme orange hover */
}

/* JavaScript interaction styles */
.crates-filter-bar__tag[data-active="true"] {
    background-color: #F39A76;
    color: #ffffff;
}

.crates-filter-bar__brand[data-active="true"] {
    background-color: #F39A76;
    color: #ffffff;
}