/**
 * Styles for template-parts/category-filter-bar.php
 * The active-chip color (--ss-chip-active-bg) is the site's real
 * brand red. The rest are still neutral placeholders — swap them
 * in too if you want a closer match to your exact palette.
 */

:root {
	--ss-filter-bg: #ffffff;
	--ss-filter-border: #e5e5e5;
	--ss-chip-border: #d4d4d4;
	--ss-chip-text: #333333;
	--ss-chip-active-bg: #cf2e2e;
	--ss-chip-active-text: #ffffff;
}

.ss-filter-bar {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--ss-filter-bg);
	border-bottom: 1px solid var(--ss-filter-border);
}

.ss-filter-bar .ss-chip-view {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 16px;
}

.ss-filter-bar .ss-filter-scroll {
	flex: 1;
	min-width: 0;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ss-filter-bar .ss-filter-scroll::-webkit-scrollbar {
	display: none;
}

.ss-filter-bar .ss-chip {
	flex-shrink: 0;
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid var(--ss-chip-border);
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ss-chip-text);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ss-filter-bar .ss-chip:hover {
	border-color: var(--ss-chip-text);
}

.ss-filter-bar .ss-chip:focus-visible {
	outline: 2px solid var(--ss-chip-active-bg);
	outline-offset: 2px;
}

.ss-filter-bar .ss-chip.is-active {
	background: var(--ss-chip-active-bg);
	border-color: var(--ss-chip-active-bg);
	color: var(--ss-chip-active-text);
}

.ss-filter-bar .ss-search-toggle {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--ss-chip-border);
	background: transparent;
	color: var(--ss-chip-text);
	cursor: pointer;
}

.ss-filter-bar .ss-search-view {
	display: none;
	align-items: center;
	gap: 8px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 16px;
}

.ss-filter-bar .ss-search-view input {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--ss-chip-border);
	border-radius: 20px;
	padding: 6px 14px;
	font-size: 13px;
	outline: none;
}

.ss-filter-bar .ss-search-view input:focus {
	border-color: var(--ss-chip-active-bg);
}

.ss-filter-bar .ss-search-close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--ss-chip-text);
	cursor: pointer;
}

.ss-filter-bar .ss-search-toggle img,
.ss-filter-bar .ss-search-close img {
	display: block !important;
	width: 14px !important;
	height: 14px !important;
	max-width: none !important;
	visibility: visible !important;
	opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
	.ss-filter-bar .ss-chip {
		transition: none;
	}
}
.single .ss-filter-bar {
	position: static;
}