.pv-search-filter {
	width: 100%;
	margin-block: 0 var(--pv-type-space-xl);
}

.pv-search-filter__top,
.pv-search-filter__dropdowns {
	display: flex;
	width: 100%;
	gap: var(--pv-type-space-md);
	align-items: stretch;
}

.pv-search-filter__top {
	margin-block-end: var(--pv-type-space-md);
}

.pv-search-filter__dropdowns {
	flex-wrap: wrap;
}

.pv-search-filter__label {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.pv-search-filter__input {
	width: 100%;
	height: 48px;
	border: 1px solid var(--pv-color-border);
	border-radius: var(--pv-type-radius-sm);
	background: var(--pv-color-surface);
	color: var(--pv-color-text);
	font-family: var(--pv-font-primary);
	font-size: var(--pv-type-size-base);
	font-weight: var(--pv-type-weight-regular);
	line-height: var(--pv-type-line-base);
	padding: 0 var(--pv-type-space-lg);
}

.pv-search-filter__input:focus {
	border-color: var(--pv-color-accent);
	outline: 2px solid var(--pv-color-accent);
	outline-offset: 1px;
}

.pv-search-filter__button,
.pv-search-filter__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: var(--pv-type-radius-sm);
	font-family: var(--pv-font-primary);
	font-size: var(--pv-type-size-base);
	font-weight: var(--pv-type-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
	padding: 0 var(--pv-type-space-xl);
}

.pv-search-filter__button {
	border: 1px solid var(--pv-color-accent);
	background: #CEC2AB;
	color: black;
	cursor: pointer;
}

.pv-search-filter__reset {
	border: 1px solid var(--pv-color-border);
	background: var(--pv-color-surface-soft);
	color: var(--pv-color-text);
}

.pv-search-filter__dropdown {
	position: relative;
	flex: 1 1 220px;
	min-width: 0;
}

.pv-search-filter__dropdown summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	border: 1px solid var(--pv-color-border);
	border-radius: var(--pv-type-radius-sm);
	background: var(--pv-color-surface);
	color: var(--pv-color-text);
	cursor: pointer;
	font-family: var(--pv-font-primary);
	font-size: var(--pv-type-size-base);
	font-weight: var(--pv-type-weight-medium);
	gap: var(--pv-type-space-sm);
	list-style: none;
	padding: 0 var(--pv-type-space-lg);
}

.pv-search-filter__dropdown summary::-webkit-details-marker {
	display: none;
}

.pv-search-filter__dropdown summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	margin-block-start: -4px;
}

.pv-search-filter__dropdown[open] summary::after {
	margin-block-start: 4px;
	transform: rotate(225deg);
}

.pv-search-filter__dropdown summary small {
	color: var(--pv-color-muted);
	font-size: var(--pv-type-size-xs);
	font-weight: var(--pv-type-weight-regular);
}

.pv-search-filter__panel {
	position: absolute;
	z-index: 20;
	inset-inline: 0;
	top: calc(100% + var(--pv-type-space-xs));
	max-height: 280px;
	overflow: auto;
	border: 1px solid var(--pv-color-border);
	border-radius: var(--pv-type-radius-sm);
	background: var(--pv-color-surface);
	box-shadow: 0 12px 28px rgba(17, 24, 39, 0.12);
	padding: var(--pv-type-space-sm);
}

.pv-search-filter__option {
	display: flex;
	align-items: flex-start;
	gap: var(--pv-type-space-sm);
	color: var(--pv-color-text);
	cursor: pointer;
	font-family: var(--pv-font-primary);
	font-size: var(--pv-type-size-sm);
	font-weight: var(--pv-type-weight-regular);
	line-height: var(--pv-type-line-base);
	padding: var(--pv-type-space-sm);
}

.pv-search-filter__option:hover,
.pv-search-filter__option:focus-within {
	background: var(--pv-color-surface-soft);
}

.pv-search-filter__option input {
	margin-block-start: 3px;
	accent-color: var(--pv-color-accent);
}

@media (max-width: 600px) {
	.pv-search-filter__top,
	.pv-search-filter__dropdowns {
		flex-direction: column;
	}

	.pv-search-filter__button,
	.pv-search-filter__reset {
		width: 100%;
	}
}