/**
 * Unified filter bar (assets/js/filters.js + template-parts/filterbar.php).
 *
 * Row 1: keyword search (clear × + divider + clickable green search icon) and,
 * on tablet/mobile, a Filters button. Row 2: Categories · Location · Price ·
 * Currency · Date · Sort — every filter a tap-to-expand combo, green with an ×
 * when set. Desktop lays them inline; tablet/mobile folds Price/Currency/Date into
 * the Filters popover. Brand green runs through focus, hover, active and scrollbars.
 */

/* ── Sticky shell ───────────────────────────────────────────────────────── */
/* Sits just below the sticky header. When the header hides on scroll
 * (body.ize-header-hidden, set by header.js) the bar slides up to the very top
 * so it — and the location autocomplete — get the full screen. */
.ize-filterbar {
	position: sticky;
	top: var(--ize-header-bar-h, 56px);
	z-index: var(--ize-z-header, 1000);
	background: var(--ize-surface, #fff);
	box-shadow: var(--ize-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
	/* Contains the filters band's full-bleed (50vw) breakout so it can't add a
	   horizontal scrollbar; `clip` (unlike hidden) leaves the dropdowns, which open
	   downward / fixed, unclipped. */
	overflow-x: clip;
	/* Matches the header's collapse timing so the two stay flush — no gap opens
	 * between them as the header hides/returns. */
	transition: top 0.25s var(--ize-ease, ease), background-color 0.25s var(--ize-ease, ease);
}
/* When the header slides away, the search bar rises to the very top and borrows
   the header's colour around the search pill (the pill itself stays white); it
   fades back to white when the header returns. */
body.ize-header-hidden .ize-filterbar { top: 0; background: var(--ize-topbar, #42bf62); }
.ize-fb__inner { max-width: 1200px; margin: 0 auto; padding: 10px 16px 0; }
/* The full bar's grey filters band sits flush at the bottom (no inner bottom
   padding). The lite bar (search only, no band) has nothing to sit flush, so
   restore a gap below its search row. */
.ize-filterbar--lite .ize-fb__inner { padding-bottom: 12px; }

/* Green scrollbars everywhere the bar scrolls. */
.ize-fb__menu,
.ize-fb__suggestions,
.ize-fb__extras { scrollbar-width: thin; scrollbar-color: var(--ize-topbar, #42bf62) transparent; }
.ize-fb__menu::-webkit-scrollbar,
.ize-fb__suggestions::-webkit-scrollbar,
.ize-fb__extras::-webkit-scrollbar { width: 8px; }
.ize-fb__menu::-webkit-scrollbar-thumb,
.ize-fb__suggestions::-webkit-scrollbar-thumb,
.ize-fb__extras::-webkit-scrollbar-thumb { background: var(--ize-topbar, #42bf62); border-radius: 4px; }

/* ── Row 1: search + filters button ─────────────────────────────────────── */
.ize-fb__top { display: flex; align-items: center; gap: 8px; }

.ize-fb__search {
	flex: 1;
	display: flex;
	align-items: center;
	height: 46px;
	padding-left: 18px;
	/* Standalone pill: fully rounded with a complete border — no longer fused to
	   the filters row, which is now its own open grey section below. */
	border: 1px solid var(--ize-line, #e6e8eb);
	border-radius: 999px;
	background: var(--ize-surface, #fff);
}
/* Neutral focus outline — no theme-coloured (green) border on the search field. */
.ize-fb__search:focus-within { border-color: var(--ize-ink-3, #9aa4ac); }
.ize-fb__keyword {
	flex: 1;
	min-width: 0;
	height: 100%;
	/* Strip the native search-field chrome (the inset rounded box browsers draw
	   around the text) so only our own search-bar border shows. */
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: transparent;
	font-size: var(--ize-fs-base, 16px);
	color: var(--ize-ink, #1b1f23);
}
.ize-fb__keyword:focus { outline: none; box-shadow: none; }
/* Filter-bar inputs show focus via their container's border (:focus-within), so
 * the inputs themselves must not draw the global offset focus ring — it sticks
 * out past the rounded search box. */
.ize-filterbar input:focus,
.ize-filterbar input:focus-visible,
.ize-filterbar button:focus,
.ize-filterbar button:focus-visible,
.ize-filterbar select:focus,
.ize-filterbar select:focus-visible { outline: none; box-shadow: none; }
.ize-filterbar input,
.ize-filterbar button,
.ize-filterbar select { -webkit-tap-highlight-color: transparent; }
.ize-fb__keyword::-webkit-search-cancel-button,
.ize-fb__keyword::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.ize-fb__kw-clear {
	flex: 0 0 auto;
	width: 32px;
	border: 0;
	background: transparent;
	color: var(--ize-ink-3, #9aa0a6);
	font-size: var(--ize-fs-md);
	line-height: 1;
	cursor: pointer;
}
.ize-fb__kw-clear:hover { color: var(--ize-ink, #1b1f23); }
/* Invisible button (same surface as the field) — only the green icon shows it's
   clickable; a divider line marks the clickable area. */
.ize-fb__search-btn {
	flex: 0 0 auto;
	width: 50px;
	align-self: stretch;
	border: 0;
	border-left: 1px solid #eef0f3;   /* faint divider before the search icon */
	background: transparent;
	color: var(--ize-topbar, #42bf62);
	font-size: var(--ize-fs-md);
	cursor: pointer;
}

/* ── Row 2 ──────────────────────────────────────────────────────────────── */
/* Row 2 is one bordered "Filters" group in three parts: a leading label, the
   filters strip, and Sort. The label and Sort sit on the ends; only the filters
   strip (.ize-fb__scroll) flexes — wrapping on desktop, scrolling sideways on
   mobile (see the tablet/mobile block at the foot of this file). */
.ize-fb__row {
	position: relative;          /* anchors the scroll indicator */
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	/* No box: the filters sit out in the open on a full-width, slightly darker grey
	   band that reads as one section (no border above or below). The band bleeds to
	   the screen edges; the padding re-insets its content to line up with the search
	   bar above (centred max-1200 container, 16px gutter). */
	margin-top: 8px;
	margin-inline: calc(50% - 50vw);
	padding-block: 8px;
	padding-inline: max(16px, calc(50vw - 584px));
	background: #edeef1;
}
/* The filters live in their own strip between the label and Sort. */
/* The scroll strip + its scrollbar share one relative wrapper so the scrollbar
   spans only the scrolling filters — not the fixed Filters label or Sort. */
.ize-fb__scrollwrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
}
.ize-fb__scroll {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.ize-fb__extras { display: contents; } /* currency/date sit inline among the filters */

/* Scroll indicator: a thin themed bar at the bottom of the filter group whose
   green thumb mirrors the strip's scroll. Shown only while the strip overflows
   (filters.js sets is-scrollable), with a little extra row padding to seat it. */
.ize-fb__scrollbar {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -9px;
	height: 3px;
	border-radius: 3px;
	background: rgba( 16, 24, 40, 0.10 );
	pointer-events: none;
}
.ize-fb__scrollbar-thumb {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 25%;
	border-radius: 3px;
	background: var(--ize-topbar, #42bf62);
}
.ize-filterbar.is-scrollable .ize-fb__scrollbar { display: block; }
.ize-filterbar.is-scrollable .ize-fb__row { padding-bottom: 14px; }

/* Shared control surface */
.ize-fb__combo-btn,
.ize-fb__sort {
	height: 40px;
	border: 1px solid var(--ize-line, #e6e8eb);
	border-radius: 10px;
	background: var(--ize-surface, #fff);
	font-size: var(--ize-fs-sm);   /* stepped down from base toward original 15 + 2 */
	color: var(--ize-ink, #1b1f23);
	box-sizing: border-box;
}

/* ── Combos (all filters) ───────────────────────────────────────────────── */
.ize-fb__combo { position: relative; flex: 0 0 auto; }
.ize-fb__combo-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* Same fixed-width rectangle for every box, sized to fit the longest label
	   ("Categories") snugly so its caret sits just after the word; shorter labels
	   share that width. A long chosen value truncates with an ellipsis. */
	width: 119px;
	padding: 0 10px;
	border-radius: 0;
	cursor: pointer;
}
.ize-fb__combo-btn:hover { border-color: var(--ize-topbar, #42bf62); color: var(--ize-topbar, #42bf62); }
.ize-fb__combo-label { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ize-fb__caret { color: var(--ize-ink-3, #6b7280); font-size: 0.85em; }

/* Active = green */
.ize-fb__combo.is-selected .ize-fb__combo-btn {
	border-color: var(--ize-topbar, #42bf62);
	color: var(--ize-topbar, #42bf62);
	background: rgba(66, 191, 98, 0.08);
}
.ize-fb__combo.is-selected .ize-fb__caret { display: none; }
.ize-fb__combo:not(.ize-fb__combo--location).is-selected .ize-fb__combo-btn { padding-right: 30px; }

.ize-fb__clear {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	height: 40px;
	width: 30px;
	border: 0;
	background: transparent;
	color: var(--ize-topbar, #42bf62);
	font-size: var(--ize-fs-md);
	line-height: 1;
	cursor: pointer;
}
/* The location tab has no × — it's cleared from inside its box. */
.ize-fb__combo:not(.ize-fb__combo--location).is-selected .ize-fb__clear { display: block; }

/* Dropdown menu */
.ize-fb__menu {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 40;
	min-width: 220px;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	background: var(--ize-surface, #fff);
	border: 1px solid var(--ize-line, #e6e8eb);
	border-radius: 10px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}
/* Padding only. Display is intentionally NOT set here: a bare display value on
   this shared class has the same specificity as `.ize-fb__menu { display:none }`
   but comes later, so it would override the hidden default and leave every padded
   menu (Location, Price, Currency, Date) permanently open. Visibility stays with
   the open-state rules below. */
.ize-fb__menu--pad { padding: 12px; }
.ize-fb__apply {
	flex: 0 0 auto;
	height: 42px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background: var(--ize-topbar, #42bf62);
	color: var(--ize-topbar-ink, #0c2f17);
	font-size: var(--ize-fs-sm, 14px);
	font-weight: 600;
	cursor: pointer;
}
.ize-fb__apply:hover { background: var(--ize-topbar-hover, #38a955); }
.ize-fb__combo.is-open .ize-fb__menu { display: block; }
/* Currency: the input and Apply button read as one control — flush, no gap, with
   the touching corners squared (rules below). Laid out as a row both inline
   (desktop, .is-open) and inside the mobile Filters popover, where the combo never
   gets .is-open so it's keyed off the open popover instead. Gated on those open
   states so it never overrides the hidden default like a bare display:flex would. */
.ize-fb__combo[data-filter="currency"].is-open .ize-fb__menu--pad {
	display: flex;
	gap: 0;
	align-items: stretch;
}
/* Square the corners where the input meets the button so they look like one unit. */
.ize-fb__combo[data-filter="currency"] .ize-fb__currency {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.ize-fb__currency-apply {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.ize-fb__option {
	display: block;
	width: 100%;
	text-align: left;
	padding: 9px 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--ize-ink, #1b1f23);
	font-size: var(--ize-fs-sm, 14px);
	cursor: pointer;
}
.ize-fb__option:hover { background: var(--ize-surface-2, #f5f6f8); color: var(--ize-topbar, #42bf62); }

/* Close × inside an overlay (shown only when a menu becomes a mobile overlay) */
.ize-fb__menu-close {
	display: none;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--ize-surface-2, #f5f6f8);
	color: var(--ize-ink-2, #545b62);
	font-size: var(--ize-fs-md);
	line-height: 1;
	cursor: pointer;
}

/* ── Location box (place search + radius) + suggestions ─────────────────── */
.ize-fb__combo--location .ize-fb__menu { min-width: 340px; }
.ize-fb__locbox {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--ize-line, #e6e8eb);
	border-radius: 8px;
	overflow: hidden;
}
.ize-fb__locbox:focus-within { border-color: var(--ize-topbar, #42bf62); }
.ize-fb__location {
	flex: 1;
	min-width: 0;
	height: 42px;
	padding: 0 10px;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: var(--ize-surface, #fff);
	font-size: var(--ize-fs-sm, 14px);
	color: var(--ize-ink, #1b1f23);
}
.ize-fb__location:focus { outline: none; }
.ize-fb__loc-clear {
	flex: 0 0 auto;
	width: 30px;
	border: 0;
	background: transparent;
	color: var(--ize-ink-3, #9aa0a6);
	font-size: var(--ize-fs-md);
	line-height: 1;
	cursor: pointer;
}
.ize-fb__loc-clear:hover { color: var(--ize-topbar, #42bf62); }
.ize-fb__radius {
	flex: 0 0 auto;
	max-width: 150px;
	height: 42px;
	padding: 0 8px;
	border: 0;
	border-left: 1px solid #eef0f3;   /* faint divider before the radius select */
	background: var(--ize-surface, #fff);
	font-size: var(--ize-fs-sm, 14px);
	color: var(--ize-ink, #1b1f23);
	cursor: pointer;
}
.ize-fb__radius:focus { outline: none; }
.ize-fb__radius:disabled { color: var(--ize-ink-3, #9aa0a6); background: var(--ize-surface-2, #f5f6f8); cursor: default; }

.ize-fb__suggestions {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	max-height: 240px;
	overflow-y: auto;
	border: 1px solid var(--ize-line, #e6e8eb);
	border-radius: 8px;
}
.ize-fb__suggestions[hidden] { display: none; }
.ize-fb__suggestion {
	display: block;
	width: 100%;
	text-align: left;
	padding: 11px 12px;
	border: 0;
	border-bottom: 1px solid var(--ize-line, #e6e8eb);
	background: transparent;
	color: var(--ize-ink, #1b1f23);
	font-size: var(--ize-fs-sm, 14px);
	cursor: pointer;
}
.ize-fb__suggestions li:last-child .ize-fb__suggestion { border-bottom: 0; }
.ize-fb__suggestion:hover { background: var(--ize-surface-2, #f5f6f8); color: var(--ize-topbar, #42bf62); }
.ize-fb__poweredby { margin: 6px 2px 0; font-size: var(--ize-fs-xs); color: var(--ize-ink-3, #9aa0a6); text-align: right; }
.ize-fb__poweredby[hidden] { display: none; }

/* "Use my location" — triggers the browser geolocation prompt. */
.ize-fb__geo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 6px 2px;
	border: 0;
	background: transparent;
	color: var(--ize-topbar, #42bf62);
	font-size: var(--ize-fs-sm, 14px);
	font-weight: 600;
	cursor: pointer;
}
.ize-fb__geo:hover { text-decoration: underline; }
.ize-fb__geo.is-loading { opacity: 0.6; pointer-events: none; }

/* ── Price (segmented), currency, dates ─────────────────────────────────── */
.ize-fb__seg { display: flex; border: 1px solid var(--ize-line, #e6e8eb); border-radius: 8px; overflow: hidden; }
.ize-fb__seg-opt {
	flex: 1;
	padding: 9px 12px;
	border: 0;
	border-left: 1px solid var(--ize-line, #e6e8eb);
	background: var(--ize-surface, #fff);
	color: var(--ize-ink, #1b1f23);
	font-size: var(--ize-fs-sm, 14px);
	white-space: nowrap;
	cursor: pointer;
}
.ize-fb__seg-opt:first-child { border-left: 0; }
.ize-fb__seg-opt:hover { background: var(--ize-surface-2, #f5f6f8); }
.ize-fb__seg-opt.is-active { background: var(--ize-topbar, #42bf62); color: #fff; }

.ize-fb__currency {
	flex: 1;
	width: 100%;       /* fills the block layout on mobile; flex-basis wins in the desktop row */
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var(--ize-line, #e6e8eb);
	border-radius: 8px;
	background: var(--ize-surface, #fff);
	font-size: var(--ize-fs-sm, 14px);
	color: var(--ize-ink, #1b1f23);
	box-sizing: border-box;
}

.ize-fb__dates { display: flex; align-items: center; gap: 8px; }
.ize-fb__dates input {
	flex: 1;
	min-width: 0;
	height: 42px;
	padding: 0 8px;
	border: 1px solid var(--ize-line, #e6e8eb);
	border-radius: 8px;
	background: var(--ize-surface, #fff);
	font-size: var(--ize-fs-sm, 14px);
	color: var(--ize-ink, #1b1f23);
	accent-color: var(--ize-topbar, #42bf62);
	color-scheme: light;
}
.ize-fb__dates-sep { color: var(--ize-ink-3, #6b7280); }

/* The dd/mm/yyyy hint inside a date field is drawn by the browser; some mobile
   engines render the empty placeholder almost invisibly. Force a visible colour
   and full opacity so the format shows on phones like it does on desktop. */
.ize-fb__dates input::-webkit-datetime-edit,
.ize-fb__dates input::-webkit-datetime-edit-fields-wrapper { color: var(--ize-ink, #1b1f23); opacity: 1; }

/* Focus keeps a clear (green) border — never let it vanish. */
.ize-fb__currency:focus,
.ize-fb__dates input:focus {
	outline: none;
	border: 1px solid var(--ize-topbar, #42bf62);
	box-shadow: 0 0 0 1px var(--ize-topbar, #42bf62);
}

/* ── Sort (always last; pushed to the end on desktop). One self-explanatory
 *    control: a visible "Sort" label + explicit options, no direction toggle. ─ */
.ize-fb__sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	border: 0;
	border-left: 1px solid var(--ize-ink-3, #6b7280);   /* divider — mirrors the Filters label; darker so it shows on the grey band */
	border-radius: 0;
	background: transparent;
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 12px;
}
.ize-fb__sort-field {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	min-width: 56px;
	padding: 0 20px 0 4px;   /* right room for the up/down sort glyph */
	height: 100%;
	cursor: pointer;
	/* Up/down arrows (a "sort" glyph) instead of a plain dropdown chevron, so the
	   control reads as a sort toggle now that the icon + "Sort" label are gone. */
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%2342bf62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2.5V13.5'/%3E%3Cpath d='M2.5 10.5L5 13.5 7.5 10.5'/%3E%3Cpath d='M11 13.5V2.5'/%3E%3Cpath d='M8.5 5.5L11 2.5 13.5 5.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 2px center;
	font-size: var(--ize-fs-sm, 14px);
	color: var(--ize-ink, #1b1f23);
}
.ize-fb__sort-field:focus { outline: none; }
.ize-fb__sort:focus-within { border-color: var(--ize-topbar, #42bf62); }

/* ── Lite bar (sellers, categories, blogs): search + sort toggle ────────── */
.ize-fb__litesort { display: flex; align-items: stretch; gap: 8px; flex: 0 0 auto; }
.ize-fb__lite-dir,
.ize-fb__lite-mode {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--ize-line, #e6e8eb);
	border-radius: 10px;
	background: var(--ize-surface, #fff);
	color: var(--ize-ink, #1b1f23);
	font-size: var(--ize-fs-sm, 14px);
	white-space: nowrap;
	cursor: pointer;
}
.ize-fb__lite-dir:hover,
.ize-fb__lite-mode:hover { border-color: var(--ize-topbar, #42bf62); color: var(--ize-topbar, #42bf62); }
.ize-fb__lite-arrow { color: var(--ize-topbar, #42bf62); font-size: 0.9em; }
.ize-fb__lite-dir.is-desc .ize-fb__lite-arrow { transform: rotate(180deg); }

/* ── Results states ─────────────────────────────────────────────────────── */
.ize-fb__empty { padding: 40px 0; text-align: center; }
.ize-fb__loading { grid-column: 1 / -1; flex-basis: 100%; width: 100%; display: flex; justify-content: center; padding: 48px 0; }
.ize-fb__spinner {
	width: 30px;
	height: 30px;
	border: 3px solid var(--ize-line, #e6e8eb);
	border-top-color: var(--ize-topbar, #42bf62);
	border-radius: 50%;
	animation: ize-fb-spin 0.7s linear infinite;
}
@keyframes ize-fb-spin { to { transform: rotate(360deg); } }

/* ── Tablet + mobile ────────────────────────────────────────────────────── */
@media ( max-width: 1024px ) {
	/* Only the filters strip scrolls sideways; the Filters label and Sort stay
	   put on the ends, so chips never slide past the label. */
	.ize-fb__scroll {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.ize-fb__scroll::-webkit-scrollbar { display: none; }
	.ize-fb__scroll > * { flex: 0 0 auto; }   /* chips keep their size; the strip scrolls */

	/* Each filter opens as a fixed sheet pinned just under the bar (its top is set
	   at runtime by placeOverlay). A horizontal scroll container would otherwise
	   clip an absolute dropdown; fixed escapes the scroll box. */
	.ize-fb__combo.is-open .ize-fb__menu {
		position: fixed;
		top: 120px; /* refined at runtime */
		left: 12px;
		right: auto;
		width: min( 320px, calc( 100vw - 24px ) );  /* compact, not full-width */
		max-height: 46vh;                            /* shorter than a full-screen sheet */
		overflow-y: auto;
		z-index: 1200;
	}
	/* Location keeps the full-width sheet — it holds the place search + suggestions. */
	.ize-fb__combo--location.is-open .ize-fb__menu {
		right: 12px;
		width: auto;
		min-width: 0;
		max-height: 72vh;
		padding-top: 34px;
	}
	.ize-fb__combo--location.is-open .ize-fb__menu-close { display: flex; }
}

/* ── Phones: chips hug their own label ──────────────────────────────────────
 * On the smaller phone font, space is tight, so drop the desktop fixed width and
 * let each filter box size to its own text (the caret sits right after the word)
 * — the most compact they can be, and "Categories" can never clip. The cap stops
 * a long chosen value (e.g. a place name) from stretching one chip too wide. */
@media ( max-width: 767.98px ) {
	.ize-fb__combo-btn { width: auto; max-width: 180px; }
}