/* Interactive Map — frontend hover-tooltip */
.imap-map {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	line-height: 0;
	--imap-size: 30px;
}
.imap-map.imap-has-zoom { overflow: hidden; touch-action: pan-y; }
.imap-map.imap-has-zoom.is-panning { cursor: grabbing; }
.imap-map__stage {
	position: relative;
	transform-origin: 0 0;
	transition: transform .18s ease-out;
	will-change: transform;
}
.imap-map.is-panning .imap-map__stage { transition: none; }
.imap-map__image { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.imap-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.imap-map__controls {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	display: inline-flex;
	gap: 6px;
	padding: 6px;
	background: rgba(255,255,255,.92);
	border-radius: 999px;
	box-shadow: 0 4px 16px rgba(15,23,42,.18);
	z-index: 5;
	line-height: 1;
}
.imap-map__ctrl {
	appearance: none;
	border: 0;
	background: #384253;
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, transform .15s ease;
	padding: 0;
	font-size: 0;
	line-height: 0;
}
.imap-map__ctrl:hover { background: #2a6675; transform: translateY(-1px); }
.imap-map__ctrl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.imap-map__ctrl::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	        mask-size: contain;
}
.imap-map__ctrl[data-act="in"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>");
}
.imap-map__ctrl[data-act="out"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>");
}
.imap-map__ctrl[data-act="reset"]::before {
	width: 18px;
	height: 18px;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 12a8 8 0 1 1-2.34-5.66' stroke='black' stroke-width='2.2' stroke-linecap='round' fill='none'/><path d='M20 4v5h-5' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 12a8 8 0 1 1-2.34-5.66' stroke='black' stroke-width='2.2' stroke-linecap='round' fill='none'/><path d='M20 4v5h-5' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
}

.imap-map__polygon {
	fill: var(--imap-color, #384253);
	fill-opacity: var(--imap-opacity, 0.4);
	stroke: var(--imap-color, #384253);
	stroke-width: 0.3;
	vector-effect: non-scaling-stroke;
	pointer-events: all;
	cursor: pointer;
	transition: fill-opacity .25s ease, fill .25s ease;
}
.imap-map__polygon.imap-anim-none { transition: none; }
.imap-map__polygon:hover,
.imap-map__polygon:focus {
	fill: var(--imap-hover, #2a323f);
	fill-opacity: var(--imap-hover-opacity, 0.65);
	outline: none;
}

.imap-map__hotspot {
	position: absolute;
	transform: translate(-50%, -50%);
	background: var(--imap-bg, #384253);
	opacity: var(--imap-bg-opacity, 1);
	color: var(--imap-fg, #fff);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0,0,0,.25);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	width: var(--imap-size, 44px);
	height: var(--imap-size, 44px);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.imap-map__hotspot:hover,
.imap-map__hotspot:focus {
	background: var(--imap-hover-bg, var(--imap-bg, #384253));
	color: var(--imap-hover-fg, var(--imap-fg, #fff));
	opacity: 1;
	box-shadow: 0 6px 18px rgba(0,0,0,.35);
	outline: none;
}
.imap-map__hotspot.imap-anim-scale:hover { transform: translate(-50%, -50%) scale(1.15); }
.imap-map__hotspot.imap-anim-bounce:hover { animation: imap-bounce .5s ease; }
.imap-map__hotspot.imap-anim-none { transition: none; }
@keyframes imap-bounce {
	0%,100% { transform: translate(-50%, -50%) scale(1); }
	30% { transform: translate(-50%, -55%) scale(1.1); }
	60% { transform: translate(-50%, -48%) scale(.95); }
}
.imap-map__hotspot-icon { display: inline-flex; align-items: center; justify-content: center; width: 60%; height: 60%; transition: opacity .2s ease; }
.imap-map__hotspot-icon svg { width: 100%; height: 100%; }
.imap-map__hotspot-icon .imap-map__icon-img,
.imap-map__hotspot-icon img { width: 100%; height: 100%; object-fit: contain; }
.imap-map__hotspot-icon--hover { position: absolute; inset: 0; margin: auto; opacity: 0; }
.imap-map__hotspot:hover .imap-map__hotspot-icon--hover,
.imap-map__hotspot:focus .imap-map__hotspot-icon--hover { opacity: 1; }

.imap-map__tooltip {
	position: absolute;
	min-width: 260px;
	background: #ffffff;
	color: #111827;
	padding: 14px 16px;
	border-radius: 10px;
	box-shadow: 0 18px 40px -12px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.08);
	font-size: 15px;
	line-height: 1.45;
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease;
	z-index: 10;
}
.imap-map__tooltip.is-open { opacity: 1; transform: translateY(0); }
.imap-map__tt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.imap-map__tt-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.imap-map__tt-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--imap-status-color, #384253);
	box-shadow: 0 0 0 2.4px color-mix(in srgb, var(--imap-status-color, #384253) 20%, transparent);
	flex: none;
}
.imap-status--available { --imap-status-color: #609004; }
.imap-status--option { --imap-status-color: #f59e0b; }
.imap-status--sold { --imap-status-color: #ef4444; }
.imap-status--none { --imap-status-color: #9ca3af; }
.imap-map__tt-rows { margin: 0; padding: 0; display: flex; flex-direction: column; }
.imap-map__tt-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--imap-tt-divider, #e5e7eb); }
.imap-map__tt-row:first-child { border-top: 0; padding-top: 0; }
.imap-map__tt-row:last-child { padding-bottom: 0; }
.imap-map__tt-row dt { margin: 0; color: var(--imap-tt-label, #6b7280); font-weight: 400; }
.imap-map__tt-row dd { margin: 0; font-weight: 600; text-align: right; }

@media (max-width: 640px) {
	.imap-map {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.imap-map__controls { gap: 4px; padding: 3px; left: auto; right: 8px; bottom: 8px; transform: none; }
	.imap-map__ctrl { width: 26px; height: 26px; }
	.imap-map__ctrl::before { width: 13px; height: 13px; }
	.imap-map__hotspot { width: calc(var(--imap-size, 44px) * 0.30) !important; height: calc(var(--imap-size, 44px) * 0.30) !important; }
	/* Tooltip klik-transparant op mobiel, zodat je direct op een andere polygon eronder kan tikken. Alleen de losstaande sluitknop vangt taps. */
	.imap-map__tooltip { min-width: 0; max-width: none; font-size: 12px; padding: 6px 10px; border-radius: 12px; line-height: 1.35; pointer-events: none; overflow: visible; }
	.imap-map__tooltip .imap-map__tt-close { pointer-events: auto; }
	.imap-map__tt-row { padding: 3px 0; }
	.imap-map__tt-row dt, .imap-map__tt-row dd { font-size: 12px; }
	/* Sluitknop als losstaande ronde pill boven de tooltip, rechts uitgelijnd. */
	.imap-map__tt-close {
		position: absolute; top: -46px; right: 4px;
		width: 36px; height: 36px; border-radius: 50%;
		background: #F1EADE; color: #194241;
		border: 1px solid rgba(25, 66, 65, 0.15);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
		padding: 0; cursor: pointer;
		display: inline-flex; align-items: center; justify-content: center;
		transition: transform .12s ease, filter .12s ease;
	}
	.imap-map__tt-close:hover { filter: brightness(0.96); }
	.imap-map__tt-close:active { transform: scale(0.94); }
	.imap-map__tt-close svg { display: block; }
}
.imap-map__tt-close { display: none; }
@media (max-width: 640px) { .imap-map__tooltip .imap-map__tt-close { display: inline-flex; } }