/* ── Post marker — teardrop pin, rotated ────────────────────────────────── */
.vxpoi-post-marker {
	width: var(--pm-size, 44px);
	height: var(--pm-size, 44px);
	background: var(--pm-bg, #1A6B8A);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
	flex-shrink: 0;
}

/* Counter-rotate contents so the icon reads upright */
.vxpoi-post-marker > * {
	transform: rotate(45deg);
	font-size: calc(var(--pm-size, 44px) * 0.45);
	line-height: 1;
}

.vxpoi-post-marker svg {
	width: calc(var(--pm-size, 44px) * 0.45);
	height: calc(var(--pm-size, 44px) * 0.45);
	fill: currentColor;
}

/* ── POI marker — circular badge ────────────────────────────────────────── */
.vxpoi-poi-marker {
	position: relative;
	width: var(--poi-size, 36px);
	height: var(--poi-size, 36px);
	background: var(--poi-bg, #27AE60);
	border-radius: 50%;
	border: 2.5px solid #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	cursor: pointer;
	flex-shrink: 0;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	/* Override Voxel's map.css .map-marker { overflow: hidden } so the
	   absolutely-positioned tooltip is not clipped */
	overflow: visible;
}

.vxpoi-poi-marker:hover {
	transform: scale(1.15);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.vxpoi-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--poi-size, 36px) * 0.48);
	line-height: 1;
	pointer-events: none;
}

.vxpoi-icon svg {
	width: calc(var(--poi-size, 36px) * 0.48);
	height: calc(var(--poi-size, 36px) * 0.48);
	fill: currentColor;
}

/* ── Tooltip — shown on :hover, CSS-only ────────────────────────────────── */
.vxpoi-tooltip {
	display: none;
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background: #1a202c;
	color: #ffffff;
	border-radius: 6px;
	padding: 9px 13px;
	min-width: 160px;
	max-width: 260px;
	font-size: 12px;
	line-height: 1.5;
	white-space: normal;
	text-align: left;
	pointer-events: none;
	z-index: 9999;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Downward caret */
.vxpoi-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #1a202c;
}

.vxpoi-poi-marker:hover .vxpoi-tooltip {
	display: block;
}

.vxpoi-category {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	opacity: 0.65;
	margin-bottom: 4px;
}

.vxpoi-note {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	color: #f7fafc;
}

/* ── Nearby post marker ──────────────────────────────────────────────────── */
.vxpoi-nearby-marker {
	position: relative;
	width: var(--nearby-size, 40px);
	height: var(--nearby-size, 40px);
	background: var(--nearby-bg, #E67E22);
	border-radius: 50%;
	border: 2.5px solid #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	cursor: pointer;
	flex-shrink: 0;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	text-decoration: none;
	/* allow absolutely-positioned tooltip to escape the circle */
	overflow: visible;
}

.vxpoi-nearby-marker:hover {
	transform: scale(1.15);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* Override the generic .vxpoi-icon sizes for the nearby marker's --nearby-size var */
.vxpoi-nearby-marker .vxpoi-icon {
	font-size: calc(var(--nearby-size, 40px) * 0.48);
}

.vxpoi-nearby-marker .vxpoi-icon svg {
	width: calc(var(--nearby-size, 40px) * 0.48);
	height: calc(var(--nearby-size, 40px) * 0.48);
}

.vxpoi-nearby-marker:hover .vxpoi-tooltip {
	display: block;
}

.vxpoi-nearby-title {
	display: block;
	font-weight: 600;
	font-size: 12px;
	color: #f7fafc;
	margin-bottom: 3px;
}

.vxpoi-nearby-distance {
	display: block;
	font-size: 11px;
	opacity: 0.7;
	margin: 0;
}

/* ── Map wrapper ─────────────────────────────────────────────────────────── */
.vxpoi-map-wrap {
	height: 450px; /* fallback — overridden by Elementor selector */
}

/* ── Leaflet container tweak ─────────────────────────────────────────────── */
/* Ensure marker pane allows overflow so tooltips aren't clipped */
.leaflet-marker-pane {
	overflow: visible !important;
}

.vx-leaflet-marker {
	overflow: visible !important;
}