h2 {
	padding: 0 1em;
	text-align: center;
}

x-search {
	display: contents;
}

x-search-form,
x-places {
	display: block;
	width: 30em;
	max-width: calc(100% - 2em);
	margin: 0 auto;
}

x-search-form form {
	display: flex;
	align-items: center;
	width: 100%;
}

x-search-form label {
	flex: 1;
	width: 100%;
}

x-search-form input {
	width: 100%;
	border-radius: 0.2em 0 0 0.2em;
}

x-search-form button {
	flex: none;
	border-radius: 0 0.2em 0.2em 0;
}

@media (width < 30em) {
	x-search-form form {
		flex-direction: column;
		align-items: stretch;
	}

	x-search-form input {
		border-radius: 0.2em 0.2em 0 0;
	}

	x-search-form button {
		border-radius: 0 0 0.2em 0.2em;
	}
}

x-places,
x-places ul:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

x-places li {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

x-places button:first-child {
	justify-content: flex-start;
	width: 100%;
}

x-places button:first-child:not(:hover):not(:focus-visible) {
	--input-color: transparent;
	--input-text-color: inherit;
}

x-search-results .no-results {
	text-align: center;
}