/**
 * Layout: Interactive Locations Map — Regions (night map).
 *
 * One dark stage: the Leaflet night map (NASA Black Marble city lights,
 * warmed to amber) with glowing pins, and the legend laid over its lower
 * edge as a row of ring icons. Pins and rings take their colour from --gm-r.
 *
 * @package GagaMuller
 */

/* Full width, edge to edge (outside the container). */
.gm-regions__stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	isolation: isolate;
	background: #03060f;
}

.gm-regions__map {
	position: relative;
	height: clamp(24rem, 15rem + 22vw, 36rem);
}

.gm-regions__legend {
	max-width: var(--gm-container-max, 80rem);
	margin-inline: auto;
}

.gm-regions__canvas {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 40%, rgb(30 60 140 / 0.25) 0%, rgb(3 6 15 / 0) 55%),
		radial-gradient(ellipse at 75% 35%, rgb(30 60 140 / 0.2) 0%, rgb(3 6 15 / 0) 50%),
		#03060f;
}

/* Leaflet surface: city lights warmed to amber, deep navy oceans. */
.gm-regions .leaflet-container {
	background: #03060f;
	font: inherit;
	outline: 0;
}

.gm-regions .leaflet-tile-pane {
	filter: sepia(0.35) saturate(1.7) hue-rotate(-8deg) brightness(1.12) contrast(1.08);
}

/* Soft vignette so the legend reads over the map. */
.gm-regions__map::after {
	position: absolute;
	z-index: 400;
	inset: 0;
	background:
		linear-gradient(180deg, rgb(3 6 15 / 0) 55%, rgb(3 6 15 / 0.85) 100%),
		radial-gradient(ellipse at center, rgb(3 6 15 / 0) 60%, rgb(3 6 15 / 0.45) 100%);
	content: "";
	pointer-events: none;
}

.gm-regions .leaflet-control-zoom {
	border: 0;
	box-shadow: none;
}

.gm-regions .leaflet-control-zoom a {
	width: 2rem;
	height: 2rem;
	margin-bottom: 4px;
	border: 1px solid rgb(255 255 255 / 0.2);
	border-radius: var(--gm-radius-round);
	background: rgb(3 6 15 / 0.6);
	color: var(--gm-color-white);
	line-height: 1.9rem;
	backdrop-filter: blur(6px);
}

.gm-regions .leaflet-control-zoom a:hover {
	background: var(--gm-color-purple);
}

.gm-regions .leaflet-control-attribution {
	background: rgb(3 6 15 / 0.55);
	color: rgb(255 255 255 / 0.55);
	font-size: 0.625rem;
}

.gm-regions .leaflet-control-attribution a {
	color: rgb(255 255 255 / 0.75);
}

/* ---- Pins: GagaMuller shape with a soft neon glow --------------------------- */

.gm-pin {
	--gm-r: var(--gm-color-light-purple);

	position: relative;
	display: block;
	width: 20px;
	height: 20px;
	color: var(--gm-r);
	filter: drop-shadow(0 0 3px var(--gm-r));
	transition: transform 450ms var(--gm-ease), opacity 450ms var(--gm-ease), filter 450ms var(--gm-ease);
}

.gm-pin svg {
	display: block;
	width: 100%;
	height: 100%;
}

.gm-pin::after {
	position: absolute;
	inset: -6px;
	border: 1px solid var(--gm-r);
	border-radius: 50%;
	opacity: 0;
	content: "";
}

.gm-regions.has-active .gm-pin {
	opacity: 0.3;
	transform: scale(0.85);
}

.gm-regions.has-active .gm-pin.is-active {
	opacity: 1;
	transform: scale(1.15);
	filter: drop-shadow(0 0 6px var(--gm-r));
}

.gm-pin.is-active::after {
	animation: gm-pin-pulse 1.8s var(--gm-ease) infinite;
}

@keyframes gm-pin-pulse {
	0% {
		opacity: 0.8;
		transform: scale(0.6);
	}

	100% {
		opacity: 0;
		transform: scale(1.6);
	}
}

/* ---- Legend: ring icons along the lower edge ------------------------------ */

.gm-regions__legend {
	position: relative;
	z-index: 500;
	margin-top: -4.5rem;
	padding: 0 clamp(1rem, 0.5rem + 2vw, 2.5rem) clamp(1.25rem, 1rem + 1vw, 2rem);
}

.gm-regions__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gm-space-8) clamp(0.5rem, 0.2rem + 1vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-regions__item {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 2.5rem;
	padding: 0 0.875rem 0 0.5rem;
	border: 1px solid transparent;
	border-radius: var(--gm-radius-pill);
	background: transparent;
	color: rgb(255 255 255 / 0.82);
	font: inherit;
	font-size: var(--gm-text-sm);
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: color 250ms var(--gm-ease), background-color 250ms var(--gm-ease), border-color 250ms var(--gm-ease);
}

.gm-regions__item:hover,
.gm-regions__item.is-active {
	border-color: rgb(255 255 255 / 0.16);
	background: rgb(255 255 255 / 0.07);
	color: var(--gm-color-white);
}

.gm-regions__item:focus-visible {
	outline: var(--gm-focus-width) solid var(--gm-color-light-purple);
	outline-offset: 2px;
}

.gm-regions__ring {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	color: var(--gm-r);
	filter: drop-shadow(0 0 2px var(--gm-r));
}

.gm-regions__ring svg {
	display: block;
	width: 100%;
	height: 100%;
}

.gm-regions__hint {
	margin: var(--gm-space-16) 0 0;
	color: var(--gm-text-secondary);
	font-size: var(--gm-text-caption);
	text-align: center;
}

@media (max-width: 599px) {
	.gm-regions__map {
		height: 22rem;
	}

	.gm-regions__legend {
		margin-top: 0;
		padding-top: var(--gm-space-16);
	}

	.gm-regions__list {
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gm-pin,
	.gm-regions__item {
		transition: none;
	}

	.gm-pin.is-active::after {
		animation: none;
	}
}