/** Champs de recherche */

#query-form {
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100%;
	max-width: 512px;
	gap: 12px
}

.search-fields {
	display: flex;
	flex-direction: column;
	padding: 3px 12px 3px 12px;
	width: 100%;
	max-width: 330px;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	border: solid 1px var(--color-border-lighter)
}

.search-block {
	display: flex;
	align-items: center;
	width: 100%;
}

.search-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: black;
}

.search-fields * {
	margin: 0;
}

.search-bar {
	padding: 8px 16px 8px 16px;
	border: none;
	flex-grow: 1;
	min-width: 0;
}

.search-bar:hover,
.search-bar:focus {
	border: none;
	outline: none;
}

.region-select {
	padding: 8px 14px;
	border-radius: 8px;
	flex-grow: 1;
	text-align: left;
	background-color: white;
	border: none;
	color: rgb(30, 30, 30);
	text-overflow: ellipsis;
}

.region-select:hover,
.region-select:focus {
	border: none;
	outline: none;
}

@media screen AND (min-width: 500px) {
	.search-fields {
		flex-direction: row;
		max-width: none;
		height: 48px;
		border-radius: 32px;
	}

	.search-block {
		width: 0;
		flex-grow: 1;
	}

	.search-location {
		max-width: 190px;
	}
}