/**
 * Unified filter bar (assets/js/filters.js + template-parts/filterbar.php).
 *
 * The app's layout (izebuy-app src/components/Browse.tsx + FilterBar.tsx), on
 * every bar — listings, sellers, categories, blog:
 * Row 1: keyword search — the search icon at the front (a button: it searches),
 * the box, and a clear × while there is text.
 * Row 2: the app's filter chips — rounded pills, 44px tall, each with its icon
 * in front (the app's Ionicons, includes/frontend.php). Sort FIRST, always
 * highlighted (brand tint, dark brand border and bold dark brand text, the
 * app's "selected" chip) and naming the current order — "Featured" by default —
 * then the filters (Categories · Location · Priced as · Currency · Price ·
 * Date), each a tap-to-expand combo that takes the same highlight, with an ×,
 * once set, and the red "Clear all" once anything is. Desktop wraps them; on
 * tablet/mobile the whole row, Sort with it, scrolls sideways as the app's
 * does, with no scrollbar.
 */

/* ── 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);
	/* The page's own grey, as the app: the white search box and chips sit on
	   it, with no band or edge line of their own. */
	background: var(--ize-surface-2, #f5f6f8);
	/* 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);
	/* The app's "selected" chip (colors.brandTint / colors.brandDark), from the
	   brand colour so it follows Theme Options: a 12% tint of it on white
	   (#e8f7ec for the default green) and its dark text shade. */
	--ize-fb-on-bg: color-mix(in srgb, var(--ize-brand, #42bf62) 12%, #fff);
	--ize-fb-on-ink: var(--ize-brand-text, #1f7a3b);
}
/* When the header slides away, the search bar rises to the very top, still on
   the page's grey. */
body.ize-header-hidden .ize-filterbar { top: 0; }
.ize-fb__inner { max-width: 1200px; margin: 0 auto; padding: 10px 16px 0; }
/* Every bar's grey band (Sort + filters) sits flush at the bottom, so the
   inner box has no bottom padding. */

/* Green scrollbars everywhere the bar scrolls. */
.ize-fb__menu,
.ize-fb__suggestions { scrollbar-width: thin; scrollbar-color: var(--ize-topbar, #42bf62) transparent; }
.ize-fb__menu::-webkit-scrollbar,
.ize-fb__suggestions::-webkit-scrollbar { width: 8px; }
.ize-fb__menu::-webkit-scrollbar-thumb,
.ize-fb__suggestions::-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: 0;   /* the search icon button sits at the front */
	/* 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-input, 16px);   /* the app's search box */
	color: var(--ize-ink, #1b1f23);
}
.ize-fb__keyword:focus { outline: none; box-shadow: none; }
/* The filter bar's fields show focus through the box round them — the search
 * pill's border, the location box's — so they draw no ring of their own. The
 * site's keyboard ring (components.css) sat inside the box as a second, darker
 * border, and in the location box it jumped between the place and the radius:
 * a text box or a list counts as keyboard-focused even when it is clicked. It
 * outranks a plain .ize-filterbar rule, so this one is written at its weight.
 * Buttons keep the ring, for the keyboard. */
body.ize .ize-filterbar input:focus-visible,
body.ize .ize-filterbar select:focus-visible { outline: 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; }
/* Clear ×: shown only while there is text (the [hidden] attribute, set by the
   bar's script); a full-height, 44px-wide target at the end of the box. */
.ize-fb__kw-clear {
	flex: 0 0 auto;
	align-self: stretch;
	width: 44px;
	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[hidden] { display: none; }
.ize-fb__kw-clear:hover { color: var(--ize-ink, #1b1f23); }
/* The search icon at the front of the box, as in the app. It is a button
   (Search) on the field's own surface; Enter in the box does the same. */
.ize-fb__search-btn {
	flex: 0 0 auto;
	width: 46px;
	align-self: stretch;
	border: 0;
	border-radius: 999px 0 0 999px;
	background: transparent;
	color: var(--ize-topbar, #42bf62);
	font-size: var(--ize-fs-md);
	cursor: pointer;
}

/* ── Row 2: the chips ──────────────────────────────────────────────────── */
/* One strip (.ize-fb__scroll) holds Sort and every filter: wrapping on desktop,
   scrolling sideways on tablet/mobile (the block at the foot of this file). */
.ize-fb__row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	/* Full width, on the page's grey; the padding lines the chips up with the
	   search box (centred max-1200 container, 16px gutter). */
	margin-inline: calc(50% - 50vw);
	padding-block: 12px;           /* the app's row: spacing.md above and below */
	padding-inline: max(16px, calc(50vw - 584px));
	background: var(--ize-surface-2, #f5f6f8);
}
.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 */

/* ── A chip (FilterBar.tsx styles.chip) ─────────────────────────────────────
 * 44px tall, fully rounded, white with the line border; the icon (16px, muted)
 * then the label (14px, medium). As wide as its words, up to 220px, a long
 * chosen value ending in "…". Written at the weight of the site's button reset
 * (body.ize button { border: none }, components.css), which takes borders away. */
.ize-fb__combo { position: relative; flex: 0 0 auto; }
body.ize .ize-filterbar .ize-fb__combo-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 220px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--ize-line, #e6e8eb);
	border-radius: 999px;
	background: var(--ize-surface, #fff);
	font-size: var(--ize-fs-chip, 14px);
	font-weight: 500;
	color: var(--ize-ink, #1b1f23);
	box-sizing: border-box;
	cursor: pointer;
}
body.ize .ize-filterbar .ize-fb__combo-btn:hover { border-color: var(--ize-ink-3, #6b7280); }
/* The keyboard ring keeps the chip's round shape (the site's ring squares it). */
body.ize .ize-filterbar .ize-fb__combo-btn:focus-visible,
body.ize .ize-filterbar .ize-fb__clear-all:focus-visible { border-radius: 999px; }
.ize-fb__combo-label { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ize-fb__icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ize-ink-2, #545b62); }

/* Active = the app's selected chip: brand tint, dark brand border + bold text.
   The Sort chip always wears it (below). */
/* Written at the weight of the site's button reset (body.ize button
   { border: none }, components.css), which otherwise takes the border away. */
body.ize .ize-filterbar .ize-fb__combo.is-selected .ize-fb__combo-btn {
	border-color: var(--ize-fb-on-ink);
	color: var(--ize-fb-on-ink);
	background: var(--ize-fb-on-bg);
	font-weight: 700;
}
.ize-fb__combo.is-selected .ize-fb__icon { color: var(--ize-fb-on-ink); }
/* Room for the × at the chip's end. */
body.ize .ize-filterbar .ize-fb__combo:not(.ize-fb__combo--location).is-selected .ize-fb__combo-btn { padding-right: 34px; }

.ize-fb__clear {
	display: none;
	position: absolute;
	top: 0;
	right: 2px;
	height: 44px;
	width: 32px;
	border: 0;
	background: transparent;
	color: var(--ize-fb-on-ink);
	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; }

/* "Clear all" (FilterBar.tsx styles.clear): the chip in red, × in front. */
body.ize .ize-filterbar .ize-fb__clear-all {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--ize-danger, #d92d20);
	border-radius: 999px;
	background: var(--ize-surface, #fff);
	color: var(--ize-danger, #d92d20);
	font-size: var(--ize-fs-chip, 14px);
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
}
body.ize .ize-filterbar .ize-fb__clear-all[hidden] { display: none; }
.ize-fb__clear-all .ize-fb__icon { color: inherit; }

/* 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__combo.is-open .ize-fb__menu { display: block; }
.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-input, 16px);
	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;
	/* Its own section by colour alone, not a line. */
	background: var(--ize-surface-2, #f5f6f8);
	font-size: var(--ize-fs-sm, 14px);
	color: var(--ize-ink, #1b1f23);
	cursor: pointer;
}
.ize-fb__radius:focus { outline: none; }
/* Focused, it deepens rather than drawing a ring, and keeps its square
   corners, which the ring's own rule would round. */
body.ize .ize-fb__radius:focus-visible { background: var(--ize-surface-3, #eef0f3); border-radius: 0; }
.ize-fb__radius:disabled { color: var(--ize-ink-3, #9aa0a6); 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; }

/* Stacked variant — used by the Price range presets, whose labels ("MK50,000 –
   MK200,000") are too long to sit side by side. One option per row, left-aligned,
   divided top-to-bottom instead of left-to-right. */
.ize-fb__seg--stack { flex-direction: column; }
.ize-fb__seg--stack .ize-fb__seg-opt { flex: none; border-left: 0; border-top: 1px solid var(--ize-line, #e6e8eb); text-align: left; }
.ize-fb__seg--stack .ize-fb__seg-opt:first-child { border-top: 0; }

/* A hidden filter tab stays hidden even though .ize-fb__combo is a flex item. */
.ize-fb__combo[hidden] { display: none; }

.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__dates input:focus {
	outline: none;
	border: 1px solid var(--ize-topbar, #42bf62);
	box-shadow: 0 0 0 1px var(--ize-topbar, #42bf62);
}

/* ── Sort: first in the row, always highlighted ─────────────────────────────
 * The app's Sort chip (FilterBar.tsx): the swap-vertical icon and the current
 * order's name ("Featured"), always in the selected look, whatever the order.
 * It is a native <select> — keyboard, screen readers and the phone's own picker
 * for free — dressed as the chip; the icon sits over its front and lets clicks
 * through, so the whole chip opens the list. Same box as the filter combos. */
.ize-fb__sort {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 44px;
	color: var(--ize-fb-on-ink);
}
.ize-fb__sort .ize-fb__icon,
.ize-fb__sort-icon {
	position: absolute;
	left: 12px;
	color: inherit;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	pointer-events: none;
}
.ize-fb__sort-field {
	appearance: none;
	-webkit-appearance: none;
	/* As wide as the chosen order's name, like the app's chip (where supported;
	   elsewhere as wide as the longest option). */
	field-sizing: content;
	max-width: 220px;
	height: 44px;
	margin: 0;
	padding: 0 14px 0 34px;   /* room for the icon in front */
	border: 1px solid var(--ize-fb-on-ink);
	border-radius: 999px;
	background: var(--ize-fb-on-bg);
	color: var(--ize-fb-on-ink);
	font-family: inherit;
	font-size: var(--ize-fs-chip, 14px);
	font-weight: 700;
	line-height: 42px;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
}
.ize-fb__sort-field option { color: var(--ize-ink, #1b1f23); background: var(--ize-surface, #fff); font-weight: 400; }
/* The bar's inputs show focus through their box and draw no ring (above); the
   Sort chip is a control in its own right, so the keyboard gets a ring. */
body.ize .ize-filterbar .ize-fb__sort-field:focus-visible {
	outline: 2px solid var(--ize-fb-on-ink);
	outline-offset: 2px;
	border-radius: 999px;
}

/* ── 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 ) {
	/* The whole row — Sort and the filters — scrolls sideways, as the app's,
	   with no scrollbar. */
	.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; }
}