/**
 * RDCFE Pro Filter Bar — Front-end Stylesheet
 *
 * Same CSS-variable surface as `rdcfe-pro-listings.css` so themes that
 * already override `--rdcfe-primary` / `--rdcfe-border` / etc. get the
 * filter bar colored automatically.
 *
 * @package RoxDynamicCPTFieldsEnginePro
 */

.rdcfe-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	padding: 16px;
	margin-bottom: 20px;
	background: var(--rdcfe-bg, #fff);
	border: 1px solid var(--rdcfe-border, #e2e4e7);
	border-radius: 8px;
}

.rdcfe-filter-bar__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 160px;
}

.rdcfe-filter-bar__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--rdcfe-text-muted, #646970);
}

.rdcfe-filter-bar__input,
.rdcfe-filter-bar__select {
	padding: 6px 10px;
	border: 1px solid var(--rdcfe-border, #e2e4e7);
	border-radius: 4px;
	font-size: 14px;
	min-height: 36px;
}

.rdcfe-filter-bar__range {
	display: flex;
	align-items: center;
	gap: 6px;
}

.rdcfe-filter-bar__range .rdcfe-filter-bar__input {
	width: 90px;
}

.rdcfe-filter-bar__range-sep {
	color: var(--rdcfe-text-muted, #646970);
}

.rdcfe-filter-bar__checklist {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	max-width: 320px;
}

.rdcfe-filter-bar__checklist-item {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 400;
}

.rdcfe-filter-bar__submit {
	padding: 8px 20px;
	min-height: 36px;
	background: var(--rdcfe-primary, #675dd8);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.rdcfe-filter-bar__submit:hover {
	background: var(--rdcfe-primary-hover, #4f46c1);
}

.rdcfe-filter-bar--placeholder,
.rdcfe-filter-bar--pro-required {
	padding: 16px;
	background: var(--rdcfe-primary-bg, #f3f1fc);
	border: 1px dashed var(--rdcfe-border, #e2e4e7);
	border-radius: 8px;
	color: var(--rdcfe-text-muted, #646970);
}