/* ==========================================================================
   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:not(#\9):not(#\9) {
	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);
}

/* Price display "none": no price text — shrink the pill to a circle
   hugging the count bubble */
.hfse-map-badge-stacked.hrtk-stack-count-only:not(#\9):not(#\9) {
	padding: 4px;
	border-radius: 50%;
}

.hrtk-stack-count:not(#\9):not(#\9) {
	background: var(--hrtk-count-bg, #058ef9);
	color: var(--hrtk-count-text, #fff);
	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:not(#\9):not(#\9) {
	background: transparent !important;
	border: none !important;
}

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

/* Bundled cluster marker.
 *
 * The marker ships as ONE scalable SVG and is painted as a MASK, not an image:
 * only the alpha of the artwork is read, and the visible colour comes from
 * --hrtk-cluster-N. That is what lets a single hex in settings recolour the
 * solid core and all three halo opacities together, at every tier, with no
 * per-colour asset to regenerate.
 *
 * PHP inlines that SVG into --hrtk-cluster-mask as a data: URI, so the mask is
 * never a second network request — one that could 404, be blocked, or come back
 * with the wrong content type, any of which masks the element away completely
 * and turns every cluster on the map invisible.
 *
 * Applied only when PHP resolved a bundled marker (the .hrtk-leaflet-cluster--t*
 * class). A site that has not turned the bundled marker on, or that has its own
 * cluster icon images, keeps the background-image path above and never reaches
 * these rules. */
.hrtk-leaflet-cluster[class*="hrtk-leaflet-cluster--t"]:not(#\9):not(#\9) {
	/* The round geometry is declared here as well as carried by the mask, so
	 * that losing the mask costs the halo rings and nothing else. Without it a
	 * cluster whose --hrtk-cluster-mask never arrived — an inline \3c style> block
	 * stripped by a CSP or an optimiser — paints its tier colour across the full
	 * box and reads as a hard square. Under a working mask this is free: the
	 * radius lands on the artwork's outermost halo, which is already a circle. */
	border-radius: 50%;

	-webkit-mask-image: var(--hrtk-cluster-mask);
	mask-image: var(--hrtk-cluster-mask);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Where masking is unavailable outright, the tier colour is the whole marker,
 * so it needs the edge treatment the artwork would otherwise have supplied —
 * the same border and shadow the no-tier fallback below uses. Kept behind
 * @supports because under a live mask both would be clipped by the halo alpha
 * and muddy it. Both properties are tested: a browser with only the prefixed
 * form still masks correctly and must not match. */
@supports not (((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none)) {
	.hrtk-leaflet-cluster[class*="hrtk-leaflet-cluster--t"]:not(#\9):not(#\9) {
		border: 2px solid #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	}
}

.hrtk-leaflet-cluster--t1:not(#\9):not(#\9) { background-color: var(--hrtk-cluster-1, #058ef9); }
.hrtk-leaflet-cluster--t2:not(#\9):not(#\9) { background-color: var(--hrtk-cluster-2, #0b7fd4); }
.hrtk-leaflet-cluster--t3:not(#\9):not(#\9) { background-color: var(--hrtk-cluster-3, #7a5cd6); }
.hrtk-leaflet-cluster--t4:not(#\9):not(#\9) { background-color: var(--hrtk-cluster-4, #d1568a); }
.hrtk-leaflet-cluster--t5:not(#\9):not(#\9) { background-color: var(--hrtk-cluster-5, #e2603f); }

/* The count is inside the masked subtree, which is fine: it sits centred on the
 * solid core (r=7 of a 32 viewBox, so 44% of the marker) where mask alpha is
 * 1.0, and stays fully opaque. Two digits clear the core at the smallest tier;
 * three-digit counts only occur at t5, which is 90px. */

/* Fallback fill for a cluster with neither an icon image nor a bundled tier —
 * the bundled marker is off and the site configured no cluster icons of its own.
 * A tier that resolved but lost its mask is handled by the rules above, not
 * here, which is why this excludes the tier classes. */
.hrtk-leaflet-cluster:not([style*="background-image"]):not([class*="hrtk-leaflet-cluster--t"]):not(#\9):not(#\9) {
	background-color: var(--hrtk-count-bg, #058ef9);
	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:not(#\9):not(#\9) {
	background: transparent !important;
	border: none !important;
}

.hrtk-spider-center:not(#\9):not(#\9) {
	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:not(#\9):not(#\9) {
	transform: scale(1.2);
}

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

.hrtk-spider-marker:not(#\9):not(#\9) {
	background: transparent !important;
	border: none !important;
}

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

.hrtk-spider-animating:not(#\9):not(#\9) {
	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:not(#\9):not(#\9) .hfse-map-badge,
.hrtk-spider-marker-highlight:not(#\9):not(#\9) .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:not(#\9):not(#\9) .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:not(#\9):not(#\9) .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:not(#\9):not(#\9) .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:not(#\9):not(#\9) .hrtk-stacked-marker-wrapper {
	transform: translate(0, -18px);
}
.hrtk-gstack-layer:not(#\9):not(#\9) .hrtk-spider-center-wrapper {
	transform: translate(-50%, -50%);
}
.hrtk-gstack-layer:not(#\9):not(#\9) .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:not(#\9):not(#\9) .hfse-map-badge:not(.hfse-map-badge-stacked),
.hrtk-gstack-dimmed:not(#\9):not(#\9) .hfse-map-badge-image,
.hrtk-gstack-dimmed:not(#\9):not(#\9) .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:not(#\9):not(#\9) .hrtk-spider-marker,
.hrtk-gstack-dimmed:not(#\9):not(#\9) .hrtk-spider-center-wrapper,
.hrtk-gstack-dimmed:not(#\9):not(#\9) .hrtk-spider-marker .hfse-map-badge,
.hrtk-gstack-dimmed:not(#\9):not(#\9) .hrtk-spider-marker .hfse-map-badge-image,
.hrtk-gstack-dimmed:not(#\9):not(#\9) .hrtk-spider-marker .hfse-map-badge-price {
	opacity: 1 !important;
}

/* Google spider popup (DOM, not a Leaflet popup). */
.hrtk-spider-popup:not(#\9):not(#\9) {
	transform: translate(-50%, calc(-100% - 15px));
}
.hrtk-spider-popup-inner:not(#\9):not(#\9) {
	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:not(#\9):not(#\9) {
	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:not(#\9):not(#\9) .hfse-property-infowindow-header {
	width: 100% !important;
	max-width: 100% !important;
	height: 160px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.hrtk-spider-popup:not(#\9):not(#\9) .hfse-property-infowindow-header img {
	width: 100%;
	height: 160px;
	-o-object-fit: cover;
	   object-fit: cover;
	display: block;
}
.hrtk-spider-popup:not(#\9):not(#\9) .hfse-property-infowindow-body {
	padding: 12px 16px;
}
.hrtk-spider-popup:not(#\9):not(#\9) .hfse-property-title {
	font-size: 14px;
	line-height: 1.3;
}
.hrtk-spider-popup:not(#\9):not(#\9) .hk-card {
	text-decoration: none;
	color: inherit;
	display: block;
}

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

.hrtk-spider-popup:not(#\9):not(#\9) .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:not(#\9):not(#\9) .leaflet-popup-content {
	margin: 0;
	width: 280px !important;
}

.hrtk-spider-popup:not(#\9):not(#\9) .leaflet-popup-tip {
	background: #fff;
}

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

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

.hrtk-spider-popup:not(#\9):not(#\9) .hfse-property-infowindow-header img {
	width: 100%;
	height: 160px;
	-o-object-fit: cover;
	   object-fit: cover;
	display: block;
}

.hrtk-spider-popup:not(#\9):not(#\9) .hfse-property-infowindow-body {
	padding: 12px 16px;
}

.hrtk-spider-popup:not(#\9):not(#\9) .hfse-property-title {
	font-size: 14px;
	line-height: 1.3;
}

.hrtk-spider-popup:not(#\9):not(#\9) .hk-card {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* --- Marker cycler removal ----------------------------------------------- */

/* The core map's < / > control buttons open one marker's price tooltip at a
   time. Under stacking (clusters, spiderfy stacks, all-pins dots) the target
   marker is usually inside a cluster, so showTooltip() renders nothing and
   the pair reads as dead UI. Hide them; Home, fullscreen, and zoom stay. */
.hfse-map-controls .control-prev,
.hfse-map-controls .control-next {
	display: none;
}