/**
 * MFV Explore — phone filter sheet, keyboard-safe inputs, distance unit toggle.
 * Pairs with assets/js/mfv-explore-mobile-inputs.js and mfv-explore-units.js.
 *
 * Everything phone-specific sits inside the ≤1023px query, which is the
 * breakpoint the rest of the explore phone work uses (mfv-list-view.css,
 * style.css §"Explore page map toggle"). Desktop keeps the theme's floating
 * panel and body-attached dropdowns untouched.
 */

/* ── mi | km toggle on the proximity control (all widths) ─────────────── */
.explore-filter.proximity-filter {
	position: relative;
}
.explore-filter.proximity-filter .mylisting-range-slider .amount {
	padding-right: 92px;
}
.mfv-unit-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	padding: 2px;
	border: 1px solid var(--mfv-slate-200, #e2e8f0);
	border-radius: 999px;
	background: #fff;
	line-height: 1;
}
.mfv-unit-toggle__btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	padding: 6px 10px;
	border-radius: 999px;
	background: transparent;
	color: var(--mfv-slate-500, #64748b);
	font-family: var(--mfl-font-heading, 'Poppins', sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.mfv-unit-toggle__btn:hover {
	color: var(--mfl-primary, #0e7490);
}
.mfv-unit-toggle__btn:focus-visible {
	outline: 2px solid var(--mfl-primary, #0e7490);
	outline-offset: 1px;
}
.mfv-unit-toggle__btn.is-active {
	background: var(--mfl-primary, #0e7490);
	color: #fff;
}
.explore-classic-sidebar .mfv-unit-toggle {
	top: 16px;
}

@media (max-width: 1023px) {

	/* ── The filter panel becomes a full-screen sheet ──────────────────
	   The theme positions it absolutely inside the Elementor column, which
	   has overflow:auto — a 774px nested scroller for a 1280px panel, with
	   the page itself only able to move 87px. A fixed sheet with its own
	   scroll is what a phone expects, and it is what lets the field-focus
	   logic scroll "to the top of the sheet". */
	body.mfv-filters-open {
		overflow: hidden !important;
	}
	/* The sheet cannot out-stack the site chrome: #c27-explore-listings is a
	   z-index:99 stacking context inside #c27-site-wrapper (z-index:999), while
	   the header nav is 1000, the app nav 99999 and the chatbot button 99998 at
	   body level. A modal covers the chrome, so hide it while the sheet is open;
	   visibility keeps their layout and their scripts untouched. */
	body.mfv-filters-open #mfl-header-nav,
	body.mfv-filters-open #mfl-mobile-nav,
	body.mfv-filters-open #mfv-chatbot-stub,
	/* The onboarding help beacon — the round "?" at bottom-left. It is
	   `position: fixed` at z-index 999980, so it sat on top of the filter
	   panel. Matched by ID on purpose: the template gives it
	   `id="mfv-onb-beacon"`, and the onboarding sheet already styles it
	   through `#mfv-onb-beacon[hidden]` at (1,1,0) — a class selector here
	   could be outranked, an ID cannot. `visibility` rather than `display`
	   for the same reason the rest of this list uses it: it cannot be undone
	   by a display rule, and it leaves the beacon's own script alone.

	   ⚠️ DEFENSIVE ONLY, and it is not the round "?" the operator reported.
	   `MFV_Onb_Help_Beacon::render()` returns immediately — the beacon was
	   switched off in code ("causes visual clutter with notification bell and
	   chatbot widgets"), so it cannot be on screen. Verified: no `?` control in
	   the served HTML logged out, none rendered signed in as admin, and the
	   only visible fixed elements over an open sheet are the sheet, this
	   action bar and the cookie banner. Whatever that button is, it is not
	   this — the rule stays because it belongs in this list if the beacon is
	   ever re-enabled. */
	body.mfv-filters-open #mfv-onb-beacon,
	/* Support Genix's floating help widget — the round "?" bottom-left. Both
	   `support-genix` and `support-genix-lite` are active and each hooks
	   `wp_footer` to print `#support-genix-chatbot-iframe-container`, a fixed
	   launcher in an iframe. It is gated by the plugin's own settings so it does
	   not render for a logged-out visitor or in my admin session, which is why
	   it took three attempts to identify: the onboarding beacon looked like the
	   obvious culprit and is in fact disabled in code. Matched by ID so the
	   plugin's own styles cannot outrank it. */
	body.mfv-filters-open #support-genix-chatbot-iframe-container,
	body.mfv-filters-open #support-genix-chatbot-iframe,
	body.mfv-filters-open .mfl-fab-scrim,
	body.mfv-filters-open .mfl-fab-backdrop {
		visibility: hidden !important;
	}
	/* ── A drawer, not the whole screen ─────────────────────────────────────
	   Leaving a strip of the page visible says what the panel is sitting on
	   and gives somewhere to tap to dismiss. `left` rather than `width` so the
	   sheet keeps its own right edge and the fixed action bar inside it does
	   not need re-anchoring. */
	.mobile-tab-filters #finderSearch.finder-search {
		position: fixed !important;
		top: 0 !important;
		left: 48px !important;
		right: 0 !important;
		bottom: 0 !important;
		border-radius: 18px 0 0 18px !important;
		box-shadow: -12px 0 32px rgba(15, 23, 42, 0.22) !important;
		width: auto !important;
		max-width: none !important;   /* style.css pins .finder-search to 300px !important */
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		padding: 0 16px calc(32px + env(safe-area-inset-bottom, 0px)) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		z-index: 100000 !important;
		background: #fff !important;
		/* ⚠️ This block used to end with `box-shadow: none; border-radius: 0`,
		   correct when the sheet filled the screen and wrong now it is a
		   drawer. They sat BELOW the drawer values added at the top of the same
		   rule, so a later declaration in the same block quietly won and the
		   corners stayed square — no specificity fight, no other stylesheet,
		   just source order within one selector. */
		float: none !important;
	}
	.mobile-tab-filters #finderSearch .finder-tabs,
	.mobile-tab-filters #finderSearch .tab-content,
	.mobile-tab-filters #finderSearch .tab-pane {
		float: none !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* ── The action bar rides at the BOTTOM ────────────────────────────────
	   It used to be sticky at the top. The sheet's content is ~1,200px in a
	   915px viewport, so by the time you reach Rating, Location or Tags the
	   button that applies them is off-screen ABOVE you — you have to scroll
	   back up to a control you cannot see to find out whether anything
	   happened. A footer bar is in view for the whole of the filtering.

	   ⚠️ `bottom: 0` on a `position: fixed` sheet, not the viewport: the sheet
	   is `position: fixed; inset: 0; overflow-y: auto`, so sticky resolves
	   against that scroller. */
	/* ⚠️ `fixed`, not `sticky`. `.fc-search` is the FIRST child of its type
	   panel, and sticky-bottom only holds an element back from scrolling up out
	   of the bottom edge — an element already at the top of 1,200px of content
	   is nowhere near that edge, so `bottom: 0` moved it not at all and it
	   stayed pinned at the top (measured: top 28px). The sheet is itself
	   `position: fixed; inset: 0`, so a viewport-fixed bar is the right shape.
	   There is one `.fc-search` per listing type; the inactive panels are zero
	   height, so only the live one paints. */
	.mobile-tab-filters #finderSearch .form-group.fc-search {
		position: fixed !important;
		top: auto !important;
		left: 48px !important;   /* matches the drawer's edge */
		right: 0 !important;
		bottom: 0 !important;
		z-index: 6 !important;
		margin: 0 !important;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
		/* ⚠️ The apply link carries `.full-width`, which is `width: 100%` of the
		   BAR — so alongside the reset button it ran past the drawer's right
		   edge and the label was clipped. A flex row with the button taking
		   what is left keeps it inside. */
		display: flex !important;
		align-items: center;
		gap: 10px;
		box-sizing: border-box !important;
		/* ⚠️ `left: 48px` + `right: 0` is not enough: the theme also sets a
		   width on this bar, which with a left offset pushed it 48px past the
		   viewport and took the apply button's right edge off screen with it.
		   Measured 412px wide starting at x=48 on a 412px screen. */
		width: auto !important;
		max-width: none !important;
	}
	.mobile-tab-filters #finderSearch .fc-search .c27-explore-search-button {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
	.mobile-tab-filters #finderSearch .fc-search .reset-results-27 {
		flex: 0 0 auto !important;
		width: 44px !important;
		min-width: 44px !important;
		/* A light ground, not white. The sheet behind it is white, so a white
		   bar had nothing but a shadow separating it and the whole strip read
		   as part of the last filter. */
		background: var(--mfv-slate-100, #f1f5f9) !important;
		border-top: 1px solid var(--mfv-slate-200, #e2e8f0) !important;
		box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.10);
		/* The bar spans the drawer's full width, so it is what actually draws
		   the bottom-left corner — without this it squares off the radius the
		   drawer sets. */
		border-bottom-left-radius: 18px;
		overflow: hidden;
	}
	/* The reset and close controls sit ON that ground, so they take the white. */
	.mobile-tab-filters #finderSearch .fc-search .reset-results-27,
	.mobile-tab-filters #finderSearch .fc-search .close-filters-27 {
		background: #fff !important;
	}
	/* ── A filter with no options is a label floating in space ──────────────
	   Services renders four of them: Pricing Model, Mobile Service, Free
	   Estimates and Licensed & Insured are each
	   `<label>…</label><ul class="tags-nav"></ul>` — an EMPTY list. 35px of
	   heading with nothing under it, which reads as broken rather than as
	   "nothing to choose". Same principle as the empty category tile: do not
	   render a control that leads nowhere.

	   `:not(:has(li))` rather than `:empty`, because `:empty` fails on a single
	   whitespace text node inside the <ul>. */
	.mobile-tab-filters #finderSearch .explore-filter:has(ul.tags-nav):not(:has(ul.tags-nav li)) {
		display: none !important;
	}

	/* ── The tour beacon sits on top of the sheet ───────────────────────────
	   `.mfv-onb-beacon` is `position: fixed; bottom: 24px; left: 24px` at
	   z-index 999980 — far above the filter sheet, which cannot be lifted over
	   the site chrome at all (see the note at the top of this file). So it
	   covered the bottom-left of the filter panel. It is not needed while a
	   modal sheet is open; `body.mfv-filters-open` is already set by
	   `syncLock()`, so this is one rule. */

	/* Room for it, or the last filter sits under the bar.
	   ⚠️ Measured 32px without the !important — the theme's own padding on
	   #finderSearch was winning and the final filter hid behind the bar. */
	.mobile-tab-filters #finderSearch,
	.mobile-tab-filters #finderSearch.finder-search {
		padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
	}

	/* The accordion that used to live here is gone. It shipped rows that opened
	   onto nothing and, worse, a refresh bound to both `change` and `click` with
	   no debounce — every tap queued another full re-scan of every field until
	   the sheet stopped responding. The filter layout is the theme's own again;
	   what stays below is the sticky apply bar and the count of filters set. */


	/* ── The apply button says what it will do, and looks like the action ───
	   Teal is the site's chrome colour — the header, the chips, the links and
	   the selected states are all teal, so a teal button in a teal sheet is
	   just more chrome. Orange is used nowhere else here, which is exactly
	   why it works: it is the only thing on screen that is not scenery.

	   It goes orange only once something has CHANGED and not yet been
	   applied. A permanently orange button is decoration; one that lights up
	   is a message. `.mfv-filters-dirty` is set by the sheet's change
	   listener and cleared on submit. */
	/* ⚠️ The label sits off-centre without this. The button is an <a> whose
	   line-height comes from the theme, so a `min-height` alone just adds space
	   underneath the text rather than around it — flex centring is what puts the
	   magnifier and the words on the same axis, vertically and horizontally. */
	.mobile-tab-filters #finderSearch .c27-explore-search-button {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px;
		min-height: 48px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		line-height: 1 !important;
		font-weight: 700 !important;
		transition: background-color .18s ease, box-shadow .18s ease;
	}
	.mobile-tab-filters #finderSearch .c27-explore-search-button i,
	.mobile-tab-filters #finderSearch .c27-explore-search-button svg {
		flex: none;
		margin: 0 !important;
	}
	.mobile-tab-filters.mfv-filters-dirty #finderSearch .c27-explore-search-button {
		background: var(--mfv-accent, #F97316) !important;
		border-color: var(--mfv-accent, #F97316) !important;
		color: #fff !important;
		box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35) !important;
	}
	/* The count is the real affordance: it says the filter did something AND
	   that this button is the next step. Injected by the sheet script. */
	.mfv-apply-count {
		display: inline-block;
		margin-left: 6px;
		font-variant-numeric: tabular-nums;
		opacity: .92;
	}
	.mobile-tab-filters #finderSearch .form-group.fc-search:before {
		display: none !important;
	}

	/* ── Location suggestions flow under the field ─────────────────────── */
	.mfv-ac-inline {
		position: relative;
	}
	.mfv-ac-inline .cts-autocomplete-dropdown {
		position: static !important;
		display: none;
		width: 100% !important;
		z-index: auto;
	}
	.mfv-ac-inline .cts-autocomplete-dropdown.active {
		display: block;
	}
	.mfv-ac-inline .cts-autocomplete-dropdown .suggestions-list {
		position: static !important;
		top: auto !important;
		max-height: 46vh;
		overflow-y: auto;
		margin-top: 6px;
		border: 1px solid var(--mfv-slate-200, #e2e8f0) !important;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 8px 24px rgba(5, 18, 43, .08);
	}
	.mfv-ac-inline .cts-autocomplete-dropdown .suggestion {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 48px;
		padding: 10px 14px;
		font-size: 15px;
		line-height: 1.35;
		color: var(--mfv-slate-800, #1e293b);
		border-bottom: 1px solid var(--mfl-border-light, #f1f5f9);
	}
	.mfv-ac-inline .cts-autocomplete-dropdown .suggestion:last-child {
		border-bottom: 0;
	}
	.mfv-ac-inline .cts-autocomplete-dropdown .suggestion.active,
	.mfv-ac-inline .cts-autocomplete-dropdown .suggestion:active {
		background: rgba(14, 116, 144, .08);
	}
	.mfv-ac-inline .cts-autocomplete-dropdown .suggestion i {
		flex: 0 0 auto;
		font-size: 20px;
		color: var(--mfl-primary, #0e7490);
	}

	/* ── select2 lists live inside their filter, not on <body> ─────────── */
	#finderSearch .form-group {
		position: relative;
	}
	#finderSearch .select2-container--open .select2-dropdown {
		z-index: 20;
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(5, 18, 43, .1);
	}
	#finderSearch .select2-results__options {
		max-height: 42vh;
	}
	#finderSearch .select2-results__option {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	#finderSearch .select2-search--dropdown .select2-search__field[readonly] {
		cursor: pointer;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Filter drawer — scrim, header, contrast, truncated option lists
   Built to the operator's reference: a side drawer over a dimmed page, an X in
   the top corner, dark labels and field borders, and long option lists cut to
   the first five with a "Show all".
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
	/* The scrim sits under the sheet (z 100000) and over everything else. */
	#mfv-filters-scrim { display: none; }
	/* ⚠️ Below the sheet's 100000, and INSIDE its stacking context — the JS
	   appends it next to `#finderSearch`, not to body. A body-level scrim
	   covers the drawer no matter how low its z-index, because the sheet's own
	   100000 is scoped to `#c27-explore-listings` (99) inside
	   `#c27-site-wrapper` (999). */
	body.mfv-filters-open #mfv-filters-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99999;
		/* Blur carries "this is behind something" on its own; the dark wash is
		   only there so white page content does not glare through. 0.45 read as
		   a grey sheet rather than a blurred page. */
		background: rgba(15, 23, 42, 0.18);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}

	/* ── The close control moves to the top corner ──────────────────────────
	   It is the theme's own `.close-filters-27`, repositioned rather than
	   replaced, so its handler and the Vue state it drives are untouched.
	   Pulling it out of the footer bar leaves reset + apply there, which is
	   the pairing that belongs at the bottom. */
	.mobile-tab-filters #finderSearch .fc-search .close-filters-27 {
		position: fixed !important;
		top: 10px !important;
		right: 12px !important;
		left: auto !important;
		bottom: auto !important;
		z-index: 8 !important;
		width: 40px !important;
		height: 40px !important;
		min-height: 40px !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		border-radius: 50% !important;
		background: #fff !important;
		border: 1px solid var(--mfv-slate-200, #e2e8f0) !important;
		box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12) !important;
		color: var(--mfv-slate-800, #1e293b) !important;
	}
	/* Room for it, so the first filter does not sit under the button. */
	.mobile-tab-filters #finderSearch { padding-top: 58px !important; }

	/* ── Contrast ───────────────────────────────────────────────────────────
	   Labels were slate-500 on white and the field borders were barely there.
	   Both go darker: the labels to slate-700, the borders to slate-300, which
	   is the lightest border that still reads as an edge on a phone screen in
	   daylight. */
	.mobile-tab-filters #finderSearch .explore-filter > label,
	.mobile-tab-filters #finderSearch .form-group > label {
		color: var(--mfv-slate-700, #334155) !important;
		font-weight: 700 !important;
	}
	.mobile-tab-filters #finderSearch input[type="text"],
	.mobile-tab-filters #finderSearch input[type="search"],
	.mobile-tab-filters #finderSearch input[type="number"],
	.mobile-tab-filters #finderSearch select,
	.mobile-tab-filters #finderSearch .select2-selection,
	.mobile-tab-filters #finderSearch .select-wrapper {
		border-color: var(--mfv-slate-300, #cbd5e1) !important;
		color: var(--mfv-slate-800, #1e293b) !important;
	}
	.mobile-tab-filters #finderSearch input::placeholder {
		color: var(--mfv-slate-500, #64748b) !important;
	}
	.mobile-tab-filters #finderSearch .md-checkbox label {
		color: var(--mfv-slate-800, #1e293b) !important;
	}

	/* ── First five, then "Show all" ────────────────────────────────────────
	   The theme already orders these by popularity (`order_by: count`), so the
	   five that survive are the five most used. */
	.mobile-tab-filters #finderSearch ul.mfv-trunc > li:nth-child(n + 6) { display: none; }
	.mobile-tab-filters #finderSearch ul.mfv-trunc.mfv-trunc--open > li:nth-child(n + 6) { display: list-item; }
	.mfv-show-all {
		display: inline-block;
		margin: 2px 0 4px;
		padding: 0;
		border: 0;
		background: none;
		font-family: 'Poppins', sans-serif;
		font-size: 0.8rem;
		font-weight: 600;
		color: var(--mfv-primary);
		text-decoration: underline;
		cursor: pointer;
	}
}