/*
 * Apex Spotz Map Styling 1.1.0-mvp.2
 * Scope is intentionally limited to approved public map containers added by JS.
 */

.apex-spotz-map {
	--apex-teal: #2DD4BF;
	--apex-ink: #0B0D0E;
	--apex-marker-glyph: #FFFFFF;
	--apex-control-surface: rgba(255, 255, 255, .96);
	--apex-control-border: #DDE2E3;
	--apex-control-icon: #0B0D0E;
	--apex-control-shadow: 0 5px 16px rgba(11, 13, 14, .14);
	position: relative;
}

.apex-spotz-map.apex-map-theme-dark {
	--apex-marker-glyph: #0B0D0E;
	--apex-control-surface: rgba(11, 13, 14, .88);
	--apex-control-border: rgba(255, 255, 255, .12);
	--apex-control-icon: #FFFFFF;
	--apex-control-shadow: 0 5px 16px rgba(0, 0, 0, .36);
}

/* Remove the Listeo flip while retaining its existing marker markup and anchor. */
.apex-spotz-map .listeo-marker-icon,
.apex-spotz-map .leaflet-marker-icon,
.apex-spotz-map .map-marker-container {
	overflow: visible !important;
}

.apex-spotz-map .listeo-marker-icon {
	background: transparent !important;
	border: 0 !important;
}

.apex-spotz-map .marker-container,
body.no-map-marker-icon .apex-spotz-map .marker-container,
.apex-spotz-map .marker-container.no-marker-icon {
	position: relative !important;
	width: 42px !important;
	height: 42px !important;
	margin: 10px auto !important;
	top: -5px;
	border-radius: 50%;
	perspective: none !important;
	transform: none !important;
	overflow: visible !important;
	will-change: transform;
}

.apex-spotz-map .marker-card,
.apex-spotz-map .marker-container:hover .marker-card,
.apex-spotz-map .clicked .marker-container .marker-card,
.apex-spotz-map .map-marker-container.clicked .marker-card,
body.no-map-marker-icon .apex-spotz-map .marker-container:hover .marker-card,
body.no-map-marker-icon .apex-spotz-map .map-marker-container.clicked .marker-card {
	position: relative !important;
	z-index: 2 !important;
	width: 100%;
	height: 100%;
	transform: none !important;
	transform-style: flat !important;
	transition: transform 150ms ease;
}

.apex-spotz-map .marker-container:hover .marker-card {
	transform: scale(1.035) !important;
}

.apex-spotz-map .face,
.apex-spotz-map .face.front,
.apex-spotz-map .face.back,
body.no-map-marker-icon .apex-spotz-map .face.front,
body.no-map-marker-icon .apex-spotz-map .face.back {
	box-sizing: border-box;
	width: 42px !important;
	height: 42px !important;
	border: 0 !important;
	border-radius: 50% !important;
	backface-visibility: visible !important;
	color: var(--apex-ink) !important;
}

.apex-spotz-map .face.front {
	position: relative !important;
	z-index: 2 !important;
	background: var(--apex-teal) !important;
	box-shadow: 0 4px 12px rgba(11, 13, 14, .26);
}

.apex-spotz-map .face.back,
body.no-map-marker-icon .apex-spotz-map .face.back {
	display: none !important;
}

.apex-spotz-map .face i {
	color: var(--apex-marker-glyph) !important;
	font-size: 19px;
	line-height: 42px !important;
	transform: none !important;
}

.apex-spotz-map .marker-container .front.face svg {
	display: block;
	width: auto;
	height: 20px;
	margin: 0;
}

.apex-spotz-map .marker-container .front.face svg *,
.apex-spotz-map .marker-container .front.face svg g,
.apex-spotz-map .marker-container .front.face svg path,
.apex-spotz-map .marker-container .front.face svg circle,
.apex-spotz-map .marker-container .front.face svg rect {
	fill: var(--apex-marker-glyph) !important;
	stroke: var(--apex-marker-glyph) !important;
}

.apex-spotz-map .marker-arrow {
	position: absolute;
	z-index: 2;
	top: 40px;
	left: 50%;
	width: 0;
	height: 0;
	border-width: 8px 5px 0;
	border-style: solid;
	border-color: var(--apex-teal) transparent transparent;
	border-radius: 0;
	transform: translateX(-50%);
}

/*
 * Apex Signal is explicit DOM instead of vendor-child pseudo-elements. The
 * outer marker shell and host are deliberately overflow-visible; rings are
 * behind the marker-card and never receive pointer input.
 */
.apex-spotz-map .apex-spot-marker,
.apex-spotz-map .apex-signal-host {
	overflow: visible !important;
}

.apex-spotz-map .apex-signal-host {
	position: relative !important;
}

.apex-spotz-map .apex-signal-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: visible;
	pointer-events: none;
}

.apex-spotz-map .apex-signal-ring {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	border: 1px solid rgba(45, 212, 191, .27);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transform: scale(.58);
	transform-origin: 50% 50%;
	will-change: transform, opacity;
	animation: apex-spotz-signal 4.6s ease-out infinite;
}

.apex-spotz-map .apex-signal-ring-a {
	animation-delay: var(--apex-signal-delay-a, 0s);
}

.apex-spotz-map .apex-signal-ring-b {
	animation-delay: var(--apex-signal-delay-b, -1.8s);
}

@keyframes apex-spotz-signal {
	0%,
	8% {
		opacity: 0;
		transform: scale(.58);
	}
	12% {
		opacity: .27;
		transform: scale(.65);
	}
	36% {
		opacity: 0;
		transform: scale(1.92);
	}
	100% {
		opacity: 0;
		transform: scale(1.92);
	}
}

/* Native Listeo selected/popup classes: signal pauses; focus becomes clear. */
.apex-spotz-map .leaflet-marker-icon.clicked .marker-card,
.apex-spotz-map .map-marker-container.clicked .marker-card,
.apex-spotz-map .map-marker-container.infoBox-opened .marker-card {
	transform: scale(1.06) !important;
}

.apex-spotz-map .leaflet-marker-icon.clicked .front.face,
.apex-spotz-map .map-marker-container.clicked .front.face,
.apex-spotz-map .map-marker-container.infoBox-opened .front.face,
.apex-spotz-map .leaflet-marker-icon:focus-visible .front.face,
.apex-spotz-map .map-marker-container:focus-visible .front.face {
	box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px #0B0D0E, 0 4px 12px rgba(11, 13, 14, .26);
}

.apex-spotz-map .leaflet-marker-icon.clicked .apex-signal-layer,
.apex-spotz-map .map-marker-container.clicked .apex-signal-layer,
.apex-spotz-map .map-marker-container.infoBox-opened .apex-signal-layer {
	visibility: hidden;
}

.apex-spotz-map .leaflet-marker-icon.clicked .apex-signal-ring,
.apex-spotz-map .map-marker-container.clicked .apex-signal-ring,
.apex-spotz-map .map-marker-container.infoBox-opened .apex-signal-ring {
	animation-play-state: paused;
}

/* Clusters are intentionally calm: teal is permitted, Signal is never added. */
.apex-spotz-map .marker-cluster,
.apex-spotz-map .marker-cluster-small,
.apex-spotz-map .marker-cluster-medium,
.apex-spotz-map .marker-cluster-large {
	background: transparent !important;
}

.apex-spotz-map .marker-cluster div,
.apex-spotz-map .marker-cluster-small div,
.apex-spotz-map .marker-cluster-medium div,
.apex-spotz-map .marker-cluster-large div {
	background: var(--apex-teal) !important;
	color: var(--apex-ink) !important;
	box-shadow: 0 3px 10px rgba(11, 13, 14, .20);
}

.apex-spotz-map .marker-cluster div::before {
	display: none !important;
	animation: none !important;
}

.apex-spotz-map .marker-cluster span {
	color: var(--apex-ink) !important;
	font-weight: 700;
}

/* Defensive performance valve for unusually dense individual marker output. */
.apex-spotz-map.apex-signal-throttled .apex-signal-layer {
	display: none;
}

/* Light/Dark-aware functional controls. Attribution is intentionally untouched. */
.apex-spotz-map .leaflet-control-zoom {
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: var(--apex-control-shadow) !important;
	overflow: visible;
}

.apex-spotz-map .leaflet-control-zoom a,
.apex-spotz-map .custom-zoom-in,
.apex-spotz-map .custom-zoom-out,
.apex-spotz-map .gm-control-active {
	box-sizing: border-box;
	min-width: 40px !important;
	min-height: 40px !important;
	width: 40px !important;
	height: 40px !important;
	border: 1px solid var(--apex-control-border) !important;
	border-radius: 50% !important;
	background: var(--apex-control-surface) !important;
	box-shadow: var(--apex-control-shadow) !important;
	color: var(--apex-control-icon) !important;
	line-height: 38px !important;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.apex-spotz-map .leaflet-control-zoom a + a {
	margin-top: 7px;
}

.apex-spotz-map .leaflet-control-zoom a:hover,
.apex-spotz-map .leaflet-control-zoom a:focus,
.apex-spotz-map .custom-zoom-in:hover,
.apex-spotz-map .custom-zoom-in:focus,
.apex-spotz-map .custom-zoom-out:hover,
.apex-spotz-map .custom-zoom-out:focus,
.apex-spotz-map .gm-control-active:hover,
.apex-spotz-map .gm-control-active:focus {
	border-color: var(--apex-teal) !important;
	background: var(--apex-teal) !important;
	color: var(--apex-ink) !important;
	outline: 0;
}

.apex-spotz-map .leaflet-control-zoom a:focus-visible,
.apex-spotz-map .custom-zoom-in:focus-visible,
.apex-spotz-map .custom-zoom-out:focus-visible,
.apex-spotz-map .gm-control-active:focus-visible,
.apex-map-expand-control:focus-visible {
	outline: 3px solid rgba(45, 212, 191, .65);
	outline-offset: 2px;
}

/* Optional existing-instance Expand map control for the discovery surfaces. */
.apex-map-control-dock {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 1005;
	pointer-events: none;
}

.apex-map-expand-control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 14px;
	border: 1px solid #DDE2E3;
	border-radius: 13px;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 5px 16px rgba(11, 13, 14, .14);
	color: #0B0D0E;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	pointer-events: auto;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.apex-map-expand-control:hover,
.apex-map-expand-control:focus {
	border-color: #0B0D0E;
	background: #0B0D0E;
	color: #FFFFFF;
	outline: 0;
}

html.apex-map-fullscreen-active,
body.apex-map-fullscreen-active {
	overflow: hidden !important;
}

.apex-map-expanded-host {
	position: fixed !important;
	inset: 0 !important;
	z-index: 2147480000 !important;
	width: 100vw !important;
	height: 100vh !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	background: #F4F6F6;
}

@supports (height: 100dvh) {
	.apex-map-expanded-host {
		height: 100dvh !important;
	}
}

#map-container.apex-map-expanded-host > #map,
#map-container.apex-map-expanded-host > #bigmap,
.apex-map-expanded-canvas {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
}

/* #bigmap is its own host; keep that canvas fixed rather than absolute. */
.apex-map-expanded-host.apex-map-expanded-canvas {
	position: fixed !important;
}

.apex-map-expanded-host .apex-map-control-dock {
	top: calc(16px + env(safe-area-inset-top, 0px));
	right: calc(16px + env(safe-area-inset-right, 0px));
}

.apex-map-expanded-host .mobile-map-toggle-btn,
.apex-map-expanded-host .mobile-map-collapse-btn,
body.apex-map-fullscreen-active #show-map-button {
	display: none !important;
}

/*
 * Listeo owns the normal 120px/500px mobile map lifecycle. These overrides
 * activate only when Apex takes the same outer host into fullscreen.
 */
@media (max-width: 1008px) {
	#map-container.mobile-map-collapsible.apex-map-expanded-host,
	#map-container.mobile-map-collapsible.expanded.apex-map-expanded-host {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		max-height: none !important;
		overflow: visible !important;
	}

	@supports (height: 100dvh) {
		#map-container.mobile-map-collapsible.apex-map-expanded-host,
		#map-container.mobile-map-collapsible.expanded.apex-map-expanded-host {
			height: 100dvh !important;
		}
	}

	#map-container.mobile-map-collapsible.apex-map-expanded-host::after {
		content: none !important;
		display: none !important;
	}

	#map-container.mobile-map-collapsible:not(.expanded):not(.apex-map-expanded-host) .apex-map-control-dock,
	.apex-map-control-dock.apex-map-control-hidden {
		display: none !important;
	}
}

@media (max-width: 1008px) {
	.apex-map-control-dock {
		top: 12px;
		right: 12px;
	}

	.apex-map-expand-control {
		min-height: 44px;
		padding: 0 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.apex-spotz-map .apex-signal-ring {
		display: none;
		animation: none !important;
	}

	.apex-spotz-map .marker-card,
	.apex-spotz-map .leaflet-control-zoom a,
	.apex-spotz-map .custom-zoom-in,
	.apex-spotz-map .custom-zoom-out,
	.apex-spotz-map .gm-control-active,
	.apex-map-expand-control {
		transition: none !important;
	}
}