/*
 * SIA Global Map — container, shaped pins (dot / double pulsing ring),
 * styled popups, and legend.
 *
 * Tunables (driven by Elementor controls on {{WRAPPER}} .sia-gm):
 *   --sia-gm-pin           pin color (fill + ring). default: theme Primary
 *   --sia-gm-pin-size      inner dot diameter (default 16px)
 *   --sia-gm-pin-border    contour color around the dot (default #fff)
 *   --sia-gm-pin-border-w  contour width (default 2px)
 *   --sia-gm-pulse-dur     pulse duration on double pins (default 2.4s)
 *   --sia-gm-popup-*        popup background / title / text / radius
 */

/* ─── Container ───
   `isolation: isolate` fences Leaflet's internal z-indexes (panes go up to
   ~1000) inside the widget so the map never floats above sticky headers,
   modals or the Elementor editor UI. */
.sia-gm {
	position: relative;
	isolation: isolate;
	z-index: 0;
}
.sia-gm__map {
	width: 100%;
	height: 520px;
	overflow: hidden;
	background: #e8ecef; /* neutral while tiles load */
}

/* Editor/empty placeholder */
.sia-gm--empty {
	padding: 24px;
	text-align: center;
	color: #9ca3af;
	font-style: italic;
	border: 1px dashed #d1d5db;
	background: #f9fafb;
	border-radius: 12px;
}

/* ─── Shaped pins (divIcon) ───
   The Leaflet marker element (.sia-gm__pin-wrap) carries the box size; the
   inner .sia-gm__pin fills it and centers the shapes. */
.sia-gm__pin-wrap {
	background: none;
	border: none;
}
.sia-gm__pin {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Inner dot — shared by simple pins, double pins, and legend swatches. */
.sia-gm__dot {
	position: relative;
	z-index: 2;
	width: var(--sia-gm-pin-size, 16px);
	height: var(--sia-gm-pin-size, 16px);
	border-radius: 50%;
	background: var(--sia-gm-pin, var(--sia-color-primary, #6EC1E4));
	border: var(--sia-gm-pin-border-w, 2px) solid var(--sia-gm-pin-border, #fff);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	box-sizing: border-box;
}

/* Outer ring + pulse are absolutely positioned. Centering via top/left 50%
   plus a negative margin of half their own size — NOT transform — so the
   pulse's scale animation stays free (an absolute child of a flex box is not
   auto-centered by the flex box). Their size is 2× the dot, so half = 1× dot. */
.sia-gm__ring,
.sia-gm__pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--sia-gm-pin-size, 16px) * 2);
	height: calc(var(--sia-gm-pin-size, 16px) * 2);
	margin: calc(var(--sia-gm-pin-size, 16px) * -1) 0 0 calc(var(--sia-gm-pin-size, 16px) * -1);
	border-radius: 50%;
	box-sizing: border-box;
}

/* Static outer ring — gives the double pin its "double circle" read.
   Ring color falls back to the dot color (--sia-gm-pin) when not set. */
.sia-gm__ring {
	z-index: 1;
	border: 2px solid var(--sia-gm-ring, var(--sia-gm-pin, var(--sia-color-primary, #6EC1E4)));
	opacity: 0.65;
}

/* Expanding radar pulse — the animated part of double pins.
   Pulse color falls back to the dot color when not set. */
.sia-gm__pulse {
	z-index: 0;
	background: var(--sia-gm-pulse-color, var(--sia-gm-pin, var(--sia-color-primary, #6EC1E4)));
	opacity: 0.4;
	transform: scale(0.5);
	animation: sia-gm-pulse var(--sia-gm-pulse-dur, 2.4s) ease-out infinite;
}
@keyframes sia-gm-pulse {
	0%   { transform: scale(0.5); opacity: 0.5; }
	70%  { opacity: 0; }
	100% { transform: scale(1.9); opacity: 0; }
}

/* Pulse off (toggle) or reduced motion → hide the animated ring. */
.sia-gm__map.is-no-pulse .sia-gm__pulse {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.sia-gm__pulse { animation: none; display: none; }
}

/* ─── Popup (Leaflet chrome restyled, scoped to our widget) ─── */
.sia-gm .leaflet-popup-content-wrapper {
	background: var(--sia-gm-popup-bg, #ffffff);
	color: var(--sia-gm-popup-text, var(--sia-color-text, #1A1718));
	border-radius: var(--sia-gm-popup-radius, 10px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.sia-gm .leaflet-popup-tip {
	background: var(--sia-gm-popup-bg, #ffffff);
}
.sia-gm .leaflet-popup-content {
	margin: 14px 16px;
	line-height: 1.5;
}
.sia-gm__popup-title {
	font-weight: 700;
	font-size: 15px;
	margin: 0 0 var(--sia-gm-popup-title-gap, 6px);
	color: var(--sia-gm-popup-title, var(--sia-color-text, #1A1718));
}
.sia-gm__popup-desc {
	margin: 0;
	font-size: 13px;
	opacity: 0.8;
}
.sia-gm__popup-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sia-color-primary, #6EC1E4);
	text-decoration: none;
}
.sia-gm__popup-link:hover {
	text-decoration: underline;
}

/* ─── Legend ─── */
.sia-gm__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin-top: 16px;
}
.sia-gm__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	line-height: 1.2;
	color: var(--sia-color-text, #1A1718);
}
/* Small static swatch reusing the dot/ring shapes (no pulse). Its own tiny
   pin size for a tidy legend line, but it INHERITS the global contour
   (--sia-gm-pin-border / -w) and gets its color from the same per-variant
   Style controls as the map pins, so the legend always matches the pins. */
.sia-gm__legend-marker {
	--sia-gm-pin-size: 12px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
}
/* No drop shadow on the flat legend background — it reads as a stray ring;
   the map pins keep their shadow to pop against the tiles. */
.sia-gm__legend-marker .sia-gm__dot {
	box-shadow: none;
}
.sia-gm__legend-label {
	white-space: nowrap;
}