/* Styles für [weather_search] – "Das Wetter in ..."-Suchfeld mit Autocomplete */

.weather-search-widget {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	font-size: 1.2em;
	max-width: 32em;
}

.weather-search-label {
	font-weight: 600;
	white-space: nowrap;
}

.weather-search-input-wrap {
	position: relative;
	flex: 1;
	min-width: 10em;
}

.weather-search-input {
	width: 100%;
	box-sizing: border-box;
	font-size: 1em;
	padding: 0.4em 0.6em;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.weather-search-suggestions {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	right: 0;
	margin: 0.2em 0 0;
	padding: 0.2em 0;
	list-style: none;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
	max-height: 16em;
	overflow-y: auto;
}

.weather-search-option {
	padding: 0.5em 0.7em;
	font-size: 0.9em;
	cursor: pointer;
}

.weather-search-option.is-active,
.weather-search-option:hover {
	background: #eef4ff;
}

.weather-search-loading {
	padding: 0.5em 0.7em;
	font-size: 0.9em;
	color: #777;
	font-style: italic;
	cursor: default;
}

.weather-search-hint {
	flex-basis: 100%;
	margin: 0.3em 0 0;
	font-size: 0.75em;
	color: #a00;
}