/* Base map surface and attribution only. No filters or transforms on Leaflet's
 * panes: the Esri tiles are already grey, and anything that restyles a pane
 * risks interfering with dragging. */
.leaflet-container {
	background: #f9f9f9;
	font-family: inherit;
}

.leaflet-container .leaflet-control-attribution {
	background: #f9f9f9;
	color: #262626;
	font-size: 11px;
}

.leaflet-container .leaflet-control-attribution a {
	color: #262626;
	text-decoration: underline;
}

/* Pins: a solid disc with a soft glow edge, the reference map's proportions
 * (20px core, 6px spread), breathing 1 -> 1.25 -> 1 over 3s, linear.
 *
 * The pulse changes the icon's width, height and margin. It must NOT use
 * `scale` or `transform`: Leaflet positions every marker with
 * transform: translate(x, y), and a `scale` is applied on top of that, so it
 * multiplies each pin's offset from the map corner and pins swing across the map.
 *
 * One registered custom property is animated once, on the map container, and
 * every pin reads it, so all pins stay in phase (including markers added later). */
@property --oad-pulse {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

@keyframes oad-pulse {
	0%,
	100% {
		--oad-pulse: 1;
	}
	50% {
		--oad-pulse: 1.25;
	}
}

.leaflet-container {
	animation: oad-pulse 3s linear infinite;
}

/* Centred on its point (GeoDirectory anchors icons at the bottom). */
.leaflet-marker-icon[src*="oad_pin"] {
	width: calc(44px * var(--oad-pulse)) !important;
	height: calc(44px * var(--oad-pulse)) !important;
	margin: calc(-22px * var(--oad-pulse)) 0 0 calc(-22px * var(--oad-pulse)) !important;
}

/* The user's own position: the same disc in black, in place of the blue ball. Event pins are theme coloured, so black is only ever "you".
 * Its wrap is inside the icon, so scaling it cannot move the marker. */
.geodir-near-marker .geodir-near-marker-img,
.geodir-near-marker .geodir-near-marker-animate {
	display: none !important;
}

.geodir-near-marker .geodir-near-marker-wrap {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border-radius: 50%;
	background: #000000;
	box-shadow: 0 0 5px 6px #000000;
	scale: var(--oad-pulse);
}

@media (prefers-reduced-motion: reduce) {
	.leaflet-container {
		animation: none;
	}
}

/* Spiderfied clusters: hide the legs from the centre dot to the fanned-out pins.
 * The legs are OverlappingMarkerSpiderfier polylines, stroke #222. */
.leaflet-overlay-pane path[stroke="#222"],
.leaflet-overlay-pane path[stroke="#f00"],
.leaflet-overlay-pane path[stroke="#ff0000"],
.leaflet-overlay-pane path:not(.leaflet-interactive) {
	display: none !important;
}