/**
 * HomeRunner Toolkit — Map Controls
 *
 * Airbnb-style explorer map chrome. Everything is scoped under
 * .hrtk-mapctl-on, which map-controls.js stamps on the .hfse container, so
 * a disabled module (or a page whose script never ran) renders untouched
 * core UI. Desktop-only pieces (collapse toggle, show-map pill, header
 * button suppression) gate on the plugin's own 960px map breakpoint;
 * the search-as-move pill and the retirement of home/prev/next apply at
 * every width.
 */

/* ------------------------------------------------------------------ *
 * Core control strip retirement
 * ------------------------------------------------------------------ */

/* Hide the plugin's on-map control strip (home / prev / next / fullscreen /
 * zoom). Zoom lives on as our proxy stack; the search control is relocated
 * out of .hfse-map by the script before this rule can matter to it. */
.hfse.hrtk-mapctl-on:not(#\9):not(#\9) .hfse-map .map-control {
	display: none !important;
}

/* Hiding the children leaves core's L.Control container (.hfse-map-controls)
 * parked in the corner: transparent and empty, but still carrying core's
 * disableClickPropagation, so it swallows real clicks on our collapse button
 * beneath it (elementFromPoint at the chevron resolves to the container —
 * programmatic .click() works, mouse clicks no-op). Let clicks fall through,
 * and restore them on the adopted fullscreen button, the one child keep-fs
 * may leave visible. */
.hfse.hrtk-mapctl-on:not(#\9):not(#\9) .hfse-map .hfse-map-controls {
	pointer-events: none;
}

.hfse.hrtk-mapctl-on:not(#\9):not(#\9) .hfse-map .hfse-map-controls .map-control.control-fullscreen {
	pointer-events: auto;
}

/* Opt-in: keep core's fullscreen button (it targets a node inside the map
 * element, so it keeps working in fullscreen where our overlay — a sibling
 * of the map element — would vanish). Restyled to match the new chrome and
 * nudged below our collapse button's corner slot. */
.hfse.hrtk-mapctl-on.hrtk-mapctl-keep-fs:not(#\9):not(#\9) .hfse-map .map-control.control-fullscreen {
	display: inline-flex !important;
	position: relative; /* anchors the shared hover tooltip */
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 64px 0 0 16px;
	padding: 0;
	border-radius: 8px;
	background-color: #fff;
	color: #222;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* On Leaflet the button sits inside core's L.Control container, which adds
 * Leaflet's own 10px corner margin on top of the offsets above — landing it
 * 10px right of and 10px below the collapse button's 16px column. Deduct
 * that corner margin so both align (16px inset, 8px gap). */
.hfse.hrtk-mapctl-on.hrtk-mapctl-keep-fs:not(#\9):not(#\9) .hfse-map .leaflet-control.hfse-map-controls .map-control.control-fullscreen {
	margin: 54px 0 0 6px;
}

/* ------------------------------------------------------------------ *
 * Overlay + shared button chrome
 * ------------------------------------------------------------------ */

.hfse:not(#\9):not(#\9) .hrtk-mapctl {
	position: absolute;
	inset: 0;
	z-index: 850; /* above Leaflet's control pane (800); below site modals */
	pointer-events: none; /* the map underneath stays fully interactive */
}

.hfse:not(#\9):not(#\9) .hrtk-mapctl > * {
	pointer-events: auto;
}

.hfse:not(#\9):not(#\9) .hrtk-mapctl-btn {
	-moz-appearance: none;
	     appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: #fff;
	color: #222;
	cursor: pointer;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.18);
	transition: box-shadow 0.15s ease;
}

.hfse:not(#\9):not(#\9) .hrtk-mapctl-btn:hover {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.24);
}

.hfse:not(#\9):not(#\9) .hrtk-mapctl-btn svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* ------------------------------------------------------------------ *
 * Zoom stack + collapse toggle (desktop map only)
 * ------------------------------------------------------------------ */

.hfse:not(#\9):not(#\9) .hrtk-mapctl-zoom,
.hfse:not(#\9):not(#\9) .hrtk-mapctl-collapse {
	display: none;
}

@media screen and (min-width: 960px) {
	/* Zoom: one white pill, + over −, in the top corner AWAY from the
	 * results column. Buttons lose their individual shadow; the pill
	 * carries it. */
	.hfse:not(#\9):not(#\9) .hrtk-mapctl-zoom {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 16px;
		right: 16px;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.18);
	}

	.hfse.map-left:not(#\9):not(#\9) .hrtk-mapctl-zoom {
		right: auto;
		left: 16px;
	}

	.hfse:not(#\9):not(#\9) .hrtk-mapctl-zoom .hrtk-mapctl-btn {
		border-radius: 0;
		box-shadow: none;
	}

	.hfse:not(#\9):not(#\9) .hrtk-mapctl-zoom .hrtk-mapctl-btn:hover {
		background-color: #f7f7f7;
	}

	.hfse:not(#\9):not(#\9) .hrtk-mapctl-zoom .hrtk-mapctl-btn + .hrtk-mapctl-btn {
		border-top: 1px solid rgba(0, 0, 0, 0.08);
	}

	/* Collapse: the grid-adjacent top corner, chevrons pointing INTO the
	 * map (the direction it will fold away). Default layout is map-right,
	 * so the grid-adjacent corner is the left one; map-left flips both the
	 * corner and the chevron direction. */
	.hfse:not(#\9):not(#\9) .hrtk-mapctl-collapse {
		display: flex;
		position: absolute;
		top: 16px;
		left: 16px;
	}

	.hfse.map-left:not(#\9):not(#\9) .hrtk-mapctl-collapse {
		left: auto;
		right: 16px;
	}

	.hfse.map-left:not(#\9):not(#\9) .hrtk-mapctl-collapse svg {
		transform: scaleX(-1);
	}

	/* The old HIDE MAP text button (Searchbar Pro results header or the
	 * legacy filter pane) leaves the desktop layout — the on-map collapse
	 * and the edge show-tab replace it. It stays untouched at mobile
	 * widths, where it remains the only map toggle. */
	.hfse.hrtk-mapctl-on:not(#\9):not(#\9) .hfse-form-map-toggle-btn {
		display: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * Search-as-I-move pill (all widths)
 * ------------------------------------------------------------------ */

/* The relocated core control: sits outside .hfse-map after the move, so
 * core's own .hfse-map .map-control styling no longer reaches it and the
 * pill look is fully ours. */
.hfse:not(#\9):not(#\9) .hrtk-mapctl-search {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
}

.hfse:not(#\9):not(#\9) .hrtk-mapctl-search .map-control {
	display: flex;
	align-items: center;
	padding: 9px 16px;
	border-radius: 999px;
	background-color: #fff;
	color: #222;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.18);
	white-space: nowrap;
}

.hfse:not(#\9):not(#\9) .hrtk-mapctl-search .map-control-input-container {
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
}

.hfse:not(#\9):not(#\9) .hrtk-mapctl-search .map-control-input-container label {
	margin: 0 !important;
	cursor: pointer;
}

.hfse:not(#\9):not(#\9) .hrtk-mapctl-search .map-control-checkbox,
.hfse:not(#\9):not(#\9) .hrtk-mapctl-search input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * "Search this area" pill (opt-in, all widths)
 * ------------------------------------------------------------------ */

/* One-shot refilter offer, top-center directly under the search-as-move
 * pill; the script shows it only after a genuine pan/zoom while that
 * checkbox is unchecked. Same white-pill chrome as the relocated search
 * control — it's a map tool, not a state-restoring control. */
.hfse:not(#\9):not(#\9) .hrtk-mapctl-searcharea {
	-moz-appearance: none;
	     appearance: none;
	-webkit-appearance: none;
	display: none;
	align-items: center;
	gap: 6px;
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	padding: 9px 16px;
	border: 0;
	border-radius: 999px;
	background-color: #fff;
	color: #222;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.18);
	white-space: nowrap;
	transition: box-shadow 0.15s ease;
}

.hfse:not(#\9):not(#\9) .hrtk-mapctl-searcharea:hover {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.24);
}

.hfse:not(#\9):not(#\9) .hrtk-mapctl-searcharea svg {
	display: block;
	width: 14px;
	height: 14px;
}

.hfse:not(#\9):not(#\9) .hrtk-mapctl-searcharea-show {
	display: inline-flex;
}

/* ------------------------------------------------------------------ *
 * "Show map" edge tab (desktop, only while the map is hidden)
 * ------------------------------------------------------------------ */

/* Mirrors the hide button: same chrome, chevrons flipped the other way
 * plus a map glyph, flush to the window edge the map collapsed toward, at
 * the same viewport Y (top is set live by the script — sticky offset +
 * 16px, clamped to the explorer). Rounded away from the edge only, so it
 * reads as a tab. */
.hfse:not(#\9):not(#\9) .hrtk-mapctl-showtab {
	display: none;
	position: fixed;
	right: 0;
	z-index: 990;
	width: auto;
	height: 40px;
	padding: 0 12px;
	gap: 5px;
	border-radius: 8px 0 0 8px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Chevrons point back toward the results (opposite of the hide arrows):
 * default map-right hid with » so the tab shows «. The map glyph
 * (second icon) never flips. */
.hfse:not(#\9):not(#\9) .hrtk-mapctl-showtab svg:first-child {
	transform: scaleX(-1);
}

.hfse.map-left:not(#\9):not(#\9) .hrtk-mapctl-showtab {
	right: auto;
	left: 0;
	border-radius: 0 8px 8px 0;
}

.hfse.map-left:not(#\9):not(#\9) .hrtk-mapctl-showtab svg:first-child {
	transform: none;
}

/* Hover/focus tooltip, shared by the hide/show/fullscreen controls (zoom
 * stays bare — + and − explain themselves). Rendered from aria-label so
 * the markup stays icon-only; the script strips native titles on tipped
 * controls to avoid a doubled tooltip. Vertically centered on the button;
 * each control aims it at the free space beside it, mirrored on map-left
 * layouts. */
.hfse:not(#\9):not(#\9) .hrtk-mapctl-tip::after {
	content: attr(aria-label);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 7px 11px;
	border-radius: 6px;
	background-color: #222;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.hfse:not(#\9):not(#\9) .hrtk-mapctl-tip:hover::after,
.hfse:not(#\9):not(#\9) .hrtk-mapctl-tip:focus-visible::after {
	opacity: 1;
}

/* Show tab: toward the results. */
.hfse:not(#\9):not(#\9) .hrtk-mapctl-showtab::after {
	right: calc(100% + 10px);
}

.hfse.map-left:not(#\9):not(#\9) .hrtk-mapctl-showtab::after {
	right: auto;
	left: calc(100% + 10px);
}

/* Hide button: into the map. */
.hfse:not(#\9):not(#\9) .hrtk-mapctl-collapse::after {
	left: calc(100% + 10px);
}

.hfse.map-left:not(#\9):not(#\9) .hrtk-mapctl-collapse::after {
	left: auto;
	right: calc(100% + 10px);
}

/* Kept fullscreen button: into the map, like the hide button above it. */
.hfse:not(#\9):not(#\9) .control-fullscreen.hrtk-mapctl-tip::after {
	left: calc(100% + 10px);
}

@media screen and (min-width: 960px) {
	/* Both gates matter: map-hidden (core's toggle state) and inview —
	 * a fixed tab must not float over the footer once the visitor
	 * scrolls past the explorer. The slide-in replays every time the
	 * display flips back to flex, announcing the tab without touching
	 * layout (transform-only — the width-slide experiment that animated
	 * the whole panel reflowed the grid per frame and was dropped). */
	.hfse.map-hidden.hrtk-mapctl-inview:not(#\9):not(#\9) .hrtk-mapctl-showtab {
		display: flex;
		animation: hrtk-mapctl-tab-in 0.25s ease-out;
	}

	.hfse.map-left.map-hidden.hrtk-mapctl-inview:not(#\9):not(#\9) .hrtk-mapctl-showtab {
		animation-name: hrtk-mapctl-tab-in-left;
	}
}

@keyframes hrtk-mapctl-tab-in {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}

@keyframes hrtk-mapctl-tab-in-left {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hfse:not(#\9):not(#\9) .hrtk-mapctl-showtab {
		animation: none !important;
	}
}