/* ==========================================================================
   Map Stacking — Stacked marker badges + spiderfy
   All colors reference CSS custom properties set via inline style by Core.php
   ========================================================================== */

/* --- Marker zoom tracking ------------------------------------------------ */

/* Theme globals (YOOtheme/UIkit) apply `transition: all` to every element,
   including .leaflet-marker-icon. Leaflet repositions markers by setting their
   transform once per zoom and lets the map pane animate the visual zoom; a
   transition on the marker's own transform makes each pin glide on top of that,
   so they lag instead of tracking the zoom. Reset it. The intentional spider
   slide (.hrtk-spider-animating, !important) and markercluster zoom animation
   (.leaflet-cluster-anim .leaflet-marker-icon, higher specificity) still win. */
.leaflet-marker-icon {
	transition: none;
}

/* --- Stacked marker badge ------------------------------------------------ */

.hrtk-stacked-marker-wrapper {
	background: transparent !important;
	border: none !important;
	width: auto !important;
	overflow: visible !important;
}

.hfse-map-badge-stacked {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--hrtk-badge-bg, #1a1a2e);
	color: var(--hrtk-badge-text, #fff);
	padding: 6px 10px;
	border-radius: 20px;
	/* Match the core price pill typeface (.hfse-map-badge-price: 14px/600/lh 1).
	   Family already matches (both inherit Google's Roboto from .gm-style). */
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.25),
		3px 3px 0 -1px #e0e0e0,
		3px 3px 0 0 #ccc;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.hfse-map-badge-stacked:hover {
	transform: scale(1.08);
}

.hrtk-stack-count {
	background: var(--hrtk-count-bg, #e74c3c);
	border-radius: 50%;
	min-width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	padding: 0 2px;
}

/* --- Cluster-mode hover highlight (inverse pin) -------------------------- */

/* Mirror core's active/focus state (.hfse-map .hfse-map-badge-parent-focus:
   price pill goes white-on-black, lifted) for an individually-shown cluster pin
   when its property card is hovered. Self-contained on .leaflet-marker-icon so it
   applies inside the Leaflet map container without the core's .hfse-map ancestor. */
.leaflet-marker-icon.hfse-map-badge-parent-focus {
	z-index: 9999 !important;
}
.leaflet-marker-icon.hfse-map-badge-parent-focus .hfse-map-badge-price {
	color: #fff;
	background: #000;
}

/* --- Leaflet clustering (markercluster) ---------------------------------- */

.hrtk-leaflet-cluster-wrap {
	background: transparent !important;
	border: none !important;
}

.hrtk-leaflet-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Fallback fill when no cluster icon image is configured. */
.hrtk-leaflet-cluster:not([style*="background-image"]) {
	background-color: var(--hrtk-count-bg, #e74c3c);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* --- Center dot (when spiderfied) ---------------------------------------- */

.hrtk-spider-center-wrapper {
	background: transparent !important;
	border: none !important;
}

.hrtk-spider-center {
	width: 12px;
	height: 12px;
	background: var(--hrtk-center-dot, #1a1a2e);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.hrtk-spider-center:hover {
	transform: scale(1.2);
}

/* --- Spider markers ------------------------------------------------------ */

.hrtk-spider-marker {
	background: transparent !important;
	border: none !important;
}

/* Ensure spider legs render above other overlays */
.hrtk-spider-leg {
	stroke: var(--hrtk-connector, #1a1a2e);
	stroke-dasharray: 4 2;
}

.hrtk-spider-animating {
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* --- Focus highlight for grid hover on spiderfied marker ----------------- */

.hrtk-spider-marker-highlight .hfse-map-badge,
.hrtk-spider-marker-highlight .hfse-map-badge-image {
	outline: 3px solid var(--hrtk-focus, #3b82f6);
	outline-offset: 2px;
	border-radius: 20px;
}

/* --- Stacked marker focus from grid hover -------------------------------- */

.hrtk-stacked-marker-wrapper.hfse-map-badge-parent-focus .hfse-map-badge-stacked {
	outline: 3px solid var(--hrtk-focus, #3b82f6);
	outline-offset: 2px;
}

/* ==========================================================================
   Google Maps variant (map-stacking-google.js)
   Our DOM lives in an OverlayView floatPane child (.hrtk-gstack-layer).
   ========================================================================== */

/* Connector legs: thin rotated divs drawn from the spider center to each leaf
   (left/top/width/rotate set inline by JS; transform-origin 0 0 = center end).
   A zero-height div with a dashed top border is the line. */
.hrtk-gstack-layer .hrtk-spider-leg {
	height: 0;
	border-top: 1.5px dashed var(--hrtk-connector, #1a1a2e);
	opacity: 0.4;
	z-index: 1;
	pointer-events: none;
}

/* Slide-out animation target is left/top (vs Leaflet's transform). */
.hrtk-gstack-layer .hrtk-spider-animating {
	transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		top 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Anchor offsets. The stacked badge keeps Leaflet's left-edge / vertical-center
   anchor (speech-bubble style). The spider center dot and leaves center ON their
   point via translate(-50%, -50%) so variable-width price pills stay symmetric
   around the spider regardless of pill width (a fixed px offset only centers a
   fixed-width badge). */
.hrtk-gstack-layer .hrtk-stacked-marker-wrapper {
	transform: translate(0, -18px);
}
.hrtk-gstack-layer .hrtk-spider-center-wrapper {
	transform: translate(-50%, -50%);
}
.hrtk-gstack-layer .hrtk-spider-marker {
	transform: translate(-50%, -50%);
}

/* While a spider is open, fade everything except the open spider itself:
   core price badges, icon-image badges (no .hfse-map-badge token), and the
   OTHER stacked-badge wrappers. */
.hrtk-gstack-dimmed .hfse-map-badge:not(.hfse-map-badge-stacked),
.hrtk-gstack-dimmed .hfse-map-badge-image,
.hrtk-gstack-dimmed .hrtk-stacked-marker-wrapper {
	opacity: var(--hrtk-fade, 0.4);
	transition: opacity 0.2s ease;
}
/* Keep the open spider's leaves + center fully opaque (legs keep their own
   0.4 dashed faintness). The open stack's own badge is display:none anyway. */
.hrtk-gstack-dimmed .hrtk-spider-marker,
.hrtk-gstack-dimmed .hrtk-spider-center-wrapper,
.hrtk-gstack-dimmed .hrtk-spider-marker .hfse-map-badge,
.hrtk-gstack-dimmed .hrtk-spider-marker .hfse-map-badge-image,
.hrtk-gstack-dimmed .hrtk-spider-marker .hfse-map-badge-price {
	opacity: 1 !important;
}

/* Google spider popup (DOM, not a Leaflet popup). */
.hrtk-spider-popup {
	transform: translate(-50%, calc(-100% - 15px));
}
.hrtk-spider-popup-inner {
	position: relative;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	width: 280px;
	max-width: 320px;
	overflow: hidden;
}
.hrtk-spider-popup-close {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #333;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.hrtk-spider-popup .hfse-property-infowindow-header {
	width: 100% !important;
	max-width: 100% !important;
	height: 160px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.hrtk-spider-popup .hfse-property-infowindow-header img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
}
.hrtk-spider-popup .hfse-property-infowindow-body {
	padding: 12px 16px;
}
.hrtk-spider-popup .hfse-property-title {
	font-size: 14px;
	line-height: 1.3;
}
.hrtk-spider-popup .hk-card {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* --- Spider popup (Leaflet popup override) ------------------------------- */

.hrtk-spider-popup .leaflet-popup-content-wrapper {
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	padding: 0;
	overflow: hidden;
}

.hrtk-spider-popup .leaflet-popup-content {
	margin: 0;
	width: 280px !important;
}

.hrtk-spider-popup .leaflet-popup-tip {
	background: #fff;
}

/* --- Spider popup property card image fix -------------------------------- */

.hrtk-spider-popup .hfse-property-infowindow-header {
	width: 100% !important;
	max-width: 100% !important;
	height: 160px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.hrtk-spider-popup .hfse-property-infowindow-header img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
}

.hrtk-spider-popup .hfse-property-infowindow-body {
	padding: 12px 16px;
}

.hrtk-spider-popup .hfse-property-title {
	font-size: 14px;
	line-height: 1.3;
}

.hrtk-spider-popup .hk-card {
	text-decoration: none;
	color: inherit;
	display: block;
}