.cpf-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 30px;
	align-items: center;
}

/*
 * Stacked layout: one control per row, full width. Add the class
 * "cpf-stacked" to the filter bar's shortcode via layout="stacked"
 * (see PHP) — useful for narrow sidebar columns.
 */
.cpf-filter-bar.cpf-stacked {
	flex-direction: column;
	align-items: stretch;
}

.cpf-filter-bar.cpf-stacked select,
.cpf-filter-bar.cpf-stacked input[type="search"] {
	width: 100%;
}

.cpf-filter-bar select,
.cpf-filter-bar input[type="search"] {
	padding: 10px 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 15px;
	background: #fff;
}

.cpf-filter-bar select {
	min-width: 180px;
}

.cpf-filter-bar input[type="search"] {
	flex-grow: 1;
	min-width: 200px;
}

.cpf-results {
	position: relative;
	min-height: 100px;
	transition: opacity 0.15s ease;
}

.cpf-results.cpf-loading {
	opacity: 0.4;
	pointer-events: none;
}

@media (max-width: 600px) {
	.cpf-filter-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.cpf-filter-bar select,
	.cpf-filter-bar input[type="search"] {
		width: 100%;
	}
}

/*
 * Optional: if your builder column doesn't offer a native "sticky" option,
 * add this class to the Fusion Builder column (or wrap the filter bar
 * shortcode in a <div class="cpf-sticky-sidebar">...</div> via a Code
 * element) to make it stick as the page scrolls.
 */
.cpf-sticky-sidebar {
	position: -webkit-sticky;
	position: sticky;
	top: 100px; /* adjust to sit below your fixed header, if any */
	align-self: flex-start;
}

@media (max-width: 800px) {
	.cpf-sticky-sidebar {
		position: static; /* don't stick on smaller screens where columns stack */
	}
}