.dec-listing-search {
	--dec-bg: #ffffff;
	--dec-border: rgba(0, 0, 0, 0.07);
	--dec-text-muted: #6b7280;
	--dec-icon: #9ca3af;
	--dec-filter-bg: #b6ca58;
	--dec-filter-text: #ffffff;
	--dec-radius: 14px;
	--dec-shadow: none;
	--dec-filter-radius: 999px;
}

.dec-listing-search *,
.dec-listing-search *::before,
.dec-listing-search *::after {
	box-sizing: border-box;
}

.dec-listing-search__inner {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 58px;
	padding: 8px 10px 8px 14px;
	background: var(--dec-bg);
	border: 1px solid var(--dec-border);
	border-radius: var(--dec-radius);
	box-shadow: var(--dec-shadow);
}

.dec-listing-search__field {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.dec-listing-search__icon {
	color: var(--dec-icon);
	display: inline-flex;
}

.dec-listing-search__icon svg {
	width: 21px;
	height: 21px;
}

.dec-listing-search__input {
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 16px;
	flex: 1 1 auto;
	min-width: 0;
	color: #111827;
}

.dec-listing-search__input::placeholder {
	color: var(--dec-text-muted);
	opacity: 1;
}

.dec-listing-search__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: none;
	border-radius: var(--dec-filter-radius);
	text-decoration: none;
	background: var(--dec-filter-bg);
	color: var(--dec-filter-text);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.dec-listing-search__button svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 640px) {
	.dec-listing-search__inner {
		flex-wrap: wrap;
	}

	.dec-listing-search__button {
		width: 100%;
		justify-content: center;
	}
}