/**
 * Iron MapGeo Lazyload — loading placeholder.
 *
 * The Interactive Geo Maps container (#map_X) carries the `map_loading`
 * class until amCharts finishes rendering, at which point the plugin removes
 * it (app.js). We bind a centered spinner to that state, so it appears while
 * the map is deferred and clears itself once the map draws. The wrapper
 * already reserves height via padding-top, so there is no layout shift.
 */
.map_render.map_loading {
	position: relative;
	min-height: 60px;
}

.map_render.map_loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1; /* sit behind the map so it's covered as the map renders in */
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid rgba(0, 0, 0, 0.12);
	border-top-color: rgba(0, 0, 0, 0.45);
	border-radius: 50%;
	animation: iron-mapgeo-spin 0.8s linear infinite;
}

@keyframes iron-mapgeo-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.map_render.map_loading::after {
		animation-duration: 2s;
	}
}