/**
 * Explorer Mobile Sheet — v2 (toolkit-owned bottom sheet).
 *
 * Scoped to `.hfse.hrtk-msheet` (added by the module JS on mobile) under a
 * max-width media query, so desktop and non-activated explorers are untouched.
 * The toolkit owns the sheet/topbar/FAB; the plugin's map (`.hfse-sidebar`) is
 * the full-bleed backdrop and only the card wrapper is moved into the sheet.
 * `!important` is needed because YOOtheme/UIkit responsive rules otherwise win
 * at real device widths. `html.hrtk-msheet-on` hides theme chrome + locks scroll.
 */

@media ( max-width: 768px ) {

	/* ---- Lock the page; the sheet + map own the viewport. ---- */
	html.hrtk-msheet-on,
	html.hrtk-msheet-on body {
		overflow: hidden !important;
		overscroll-behavior: none;
	}

	/* ---- Hide the theme's visible header bar so the map is full-bleed, but keep
	   the mobile offcanvas menu (#tm-dialog-mobile) reachable from our own
	   hamburger — so hide the navbar bar, NOT the whole .tm-header-mobile. ---- */
	html.hrtk-msheet-on .tm-header-mobile .uk-navbar-container,
	html.hrtk-msheet-on .tm-header,
	html.hrtk-msheet-on .uk-sticky-placeholder {
		display: none !important;
	}
	html.hrtk-msheet-on .uk-sticky-fixed,
	html.hrtk-msheet-on [uk-sticky],
	html.hrtk-msheet-on [data-uk-sticky] {
		position: static !important;
		top: auto !important;
		transform: none !important;
		box-shadow: none !important;
	}

	/* ---- Kill iOS focus auto-zoom at the source: any form control under 16px
	   triggers Safari's zoom-on-focus (filter inputs are 12px, sort 14px). This
	   is the primary no-zoom fix; the viewport lock is the backup. Covers the
	   plugin's body-appended modals (.hk-scope-modal) too. ---- */
	.hfse.hrtk-msheet input,
	.hfse.hrtk-msheet select,
	.hfse.hrtk-msheet textarea,
	html.hrtk-msheet-on .hk-scope-modal input,
	html.hrtk-msheet-on .hk-scope-modal select,
	html.hrtk-msheet-on .hk-scope-modal textarea {
		font-size: 16px !important;
	}

	/* ---- Neutralise a transformed ancestor that would trap the fixed sheet. ---- */
	.hrtk-msheet-untransform {
		transform: none !important;
		filter: none !important;
		perspective: none !important;
		will-change: auto !important;
		contain: none !important;
	}

	/* ---- Map backdrop: the plugin's sidebar fills the viewport. ---- */
	.hfse.hrtk-msheet .hfse-sidebar {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		height: 100vh !important; /* fallback */
		height: 100dvh !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		z-index: 1 !important;
	}
	.hfse.hrtk-msheet .hfse-map-container {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}
	.hfse.hrtk-msheet .hfse-map,
	.hfse.hrtk-msheet #map {
		height: 100% !important;
		min-height: 100% !important;
	}

	/* Hide map controls on mobile: they collide with the search pill and aren't
	   needed (pinch zoom via the gestures module). .control-home stays in the
	   DOM and is still clicked programmatically for the one-time reframe -
	   display:none elements still receive .click(). */
	.hfse.hrtk-msheet .map-control,
	.hfse.hrtk-msheet .map-control-input-container,
	.hfse.hrtk-msheet .gm-fullscreen-control,
	.hfse.hrtk-msheet .gm-bundled-control,
	.hfse.hrtk-msheet .gmnoprint {
		display: none !important;
	}

	/* ---- Hide the plugin's original body column (cards moved out; filters are
	   revealed on demand by the search pill). ---- */
	.hfse.hrtk-msheet .hfse-body {
		position: fixed !important;
		inset: 0 !important;
		z-index: 45 !important;
		margin: 0 !important;
		padding: 64px 16px 24px !important;
		background: #fff !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		transform: translateY( -102% );
		transition: transform 0.32s cubic-bezier( 0.22, 0.61, 0.36, 1 );
		visibility: hidden;
	}
	.hfse.hrtk-msheet.hrtk-msheet-filters-open .hfse-body {
		transform: translateY( 0 );
		visibility: visible;
	}
	/* The loader must never block the map. */
	.hfse.hrtk-msheet .hfse-loader {
		z-index: 50 !important;
	}

	/* The toolkit FAB owns Map <-> List; hide the plugin's own map-toggle so a
	   user can't blank our backdrop (we still click it programmatically to keep
	   the map visible — display:none elements still receive .click()). */
	.hfse.hrtk-msheet .hfse-form-map-toggle-btn {
		display: none !important;
	}

	/* ---- Floating close button for the filter panel. ---- */
	.hrtk-msheet-filter-close {
		display: none;
		position: fixed;
		top: 14px;
		right: 14px;
		z-index: 47;
		width: 40px;
		height: 40px;
		border: none;
		border-radius: 50%;
		background: #fff;
		color: #222;
		font-size: 18px;
		line-height: 1;
		box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.2 );
		cursor: pointer;
	}
	.hfse.hrtk-msheet.hrtk-msheet-filters-open .hrtk-msheet-filter-close {
		display: block;
	}

	/* ---- Sticky top: the search/filter pill. ---- */
	.hrtk-msheet-topbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 30;
		padding: 10px 12px 8px;
		pointer-events: none;
	}
	.hrtk-msheet-bar {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	/* Favicon logo (left). */
	.hrtk-msheet-logo {
		pointer-events: auto;
		flex: 0 0 auto;
		width: 42px;
		height: 42px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.16 );
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	.hrtk-msheet-logo img {
		width: 26px;
		height: 26px;
		object-fit: contain;
		display: block;
	}
	/* Hamburger menu (right). */
	.hrtk-msheet-menu {
		pointer-events: auto;
		flex: 0 0 auto;
		width: 42px;
		height: 42px;
		border: none;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.16 );
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		cursor: pointer;
		padding: 0;
	}
	.hrtk-msheet-menu span {
		display: block;
		width: 18px;
		height: 2px;
		border-radius: 2px;
		background: #222;
	}
	.hrtk-msheet-pill {
		pointer-events: auto;
		flex: 1 1 auto;
		min-width: 0;
		background: #fff;
		border: none;
		border-radius: 30px;
		box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.16 );
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 14px;
		cursor: pointer;
		text-align: center;
	}
	.hrtk-msheet-pill-ico {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		color: #222;
	}
	.hrtk-msheet-pill-main {
		flex: 1;
		min-width: 0;
	}
	.hrtk-msheet-pill-title {
		display: block;
		font-weight: 600;
		font-size: 15px;
		line-height: 1.15;
		color: #222;
	}
	.hrtk-msheet-pill-sub {
		display: block;
		font-size: 12px;
		color: #717171;
		margin-top: 2px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.hrtk-msheet-pill-filt {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		color: #222;
	}
	.hfse.hrtk-msheet.hrtk-msheet-filters-open .hrtk-msheet-topbar {
		display: none;
	}

	/* ---- Bottom sheet. ---- */
	.hrtk-msheet-sheet {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100vh; /* fallback */
		height: 100dvh;
		background: #fff;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -6px 24px rgba( 0, 0, 0, 0.18 );
		z-index: 40;
		transform: translateY( 52vh );
		will-change: transform;
		touch-action: none;
		transition: transform 0.34s cubic-bezier( 0.22, 0.61, 0.36, 1 );
		display: flex;
		flex-direction: column;
	}
	.hrtk-msheet-sheet.is-dragging {
		transition: none;
	}
	.hrtk-msheet-grab {
		flex: 0 0 auto;
		padding: 10px 0 6px;
		display: flex;
		justify-content: center;
	}
	.hrtk-msheet-grab i {
		width: 36px;
		height: 5px;
		border-radius: 3px;
		background: #d0d0d0;
		display: block;
	}
	.hrtk-msheet-head {
		flex: 0 0 auto;
		text-align: center;
		padding: 2px 16px 12px;
		border-bottom: 1px solid #ebebeb;
	}
	.hrtk-msheet-count {
		font-weight: 700;
		font-size: 16px;
		color: #222;
	}
	.hrtk-msheet-sub {
		font-size: 12.5px;
		color: #717171;
		margin-top: 3px;
	}
	.hrtk-msheet-scroll {
		flex: 1 1 auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		touch-action: pan-y;
		padding: 8px 14px 96px;
	}

	/* ---- Force the moved card wrapper into a clean vertical list. ---- */
	.hrtk-msheet-scroll .hfse-properties-container {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		transform: none !important;
	}
	.hrtk-msheet-scroll .hfse-properties {
		display: block !important;
		transform: none !important;
	}
	.hrtk-msheet-scroll .hfse-property-container,
	.hrtk-msheet-scroll .property-item {
		width: 100% !important;
		max-width: none !important;
		margin: 0 0 18px !important;
		float: none !important;
	}
	/* Hide any leftover slider nav arrows. */
	.hrtk-msheet-scroll .hfse-properties-slider-prev-btn,
	.hrtk-msheet-scroll .hfse-properties-slider-next-btn {
		display: none !important;
	}

	/* Card photo slideshow. The plugin's media is a 1:1 square that dominates
	   the sheet, and after the container was moved UIkit left the inactive
	   slides at 0x0 - so swiping/tapping advanced to a 0-height slide and the
	   image vanished. Force a shorter aspect ratio and size EVERY slide + image
	   deterministically so all photos render and the carousel works. */
	.hrtk-msheet-scroll .hfse-property-media,
	.hrtk-msheet-scroll .hfse-property-media > div,
	.hrtk-msheet-scroll .hk-slideshow-items {
		width: 100% !important;
		height: 232px !important;
		min-height: 0 !important;
		max-height: 232px !important;
		overflow: hidden;
		position: relative;
	}
	/* The slides are position:absolute with no explicit width, so they shrink to
	   the image's intrinsic size (a ~square on wider phones), leaving the photo
	   not filling the card. Pin them to the full media box. */
	.hrtk-msheet-scroll .hk-slideshow-items > li,
	.hrtk-msheet-scroll .hfse-property-slideshow-item {
		width: 100% !important;
		height: 232px !important;
		min-height: 0 !important;
		left: 0 !important;
		right: 0 !important;
	}
	.hrtk-msheet-scroll .hfse-property-slideshow-image,
	.hrtk-msheet-scroll .hfse-property-media img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
	/* Keep the dot nav pinned to the bottom of the shorter media. */
	.hrtk-msheet-scroll .hfse-property-media .hk-slideshow-nav {
		position: absolute !important;
		bottom: 6px;
		left: 0;
		right: 0;
		margin: 0 !important;
	}

	.hrtk-msheet-fab-ico {
		display: inline-flex;
		align-items: center;
	}

	/* ---- Floating Map/List toggle. ---- */
	.hrtk-msheet-fab {
		position: fixed;
		left: 50%;
		bottom: 26px;
		transform: translateX( -50% );
		z-index: 60;
		background: #222;
		color: #fff;
		border: none;
		border-radius: 24px;
		padding: 13px 20px;
		font-size: 14px;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 8px;
		box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.3 );
		cursor: pointer;
		transition: opacity 0.25s, transform 0.25s;
	}
	.hrtk-msheet-fab.hrtk-msheet-fab-hidden {
		opacity: 0;
		transform: translate( -50%, 12px ) scale( 0.9 );
		pointer-events: none;
	}
	.hfse.hrtk-msheet.hrtk-msheet-filters-open .hrtk-msheet-fab {
		display: none;
	}
}

/* Never show toolkit-owned mobile chrome outside mobile. */
@media ( min-width: 769px ) {
	.hrtk-msheet-sheet,
	.hrtk-msheet-topbar,
	.hrtk-msheet-fab,
	.hrtk-msheet-filter-close {
		display: none !important;
	}
}