/* ============================================================
   GLOBAL FILTER BAR — v17q (2026-05-13)
   ============================================================
   Single source of truth for filter UI across 6 pages:
   - /tootekategooria/  (Bränd, Kategooria, Profiil, Järjesta, search)
   - /referentsid/      (Kategooria, Bränd — with counts in option labels)
   - /nouanded/         (Teemad, Järjesta, search)  [migrated from .advice-filter]
   - /materjalid/       (Tüüp, search)              [migrated from .materjalid-filter]
   - /videod/           (Kategooria)
   - /uudised/          (Aasta)

   Canonical class namespace: .global-filter, .global-filter__*

   Style is ported from v17l .advice-filter (which itself was ported from the
   catalog .catalog__sort pattern). Visual identity: pill-rounded native <select>
   with custom inline-SVG chevron + JetBrains Mono uppercase label + cream
   background. Sticky to top when scrolled past, mobile-fit (no horizontal
   scroll, wraps to 2 rows at <480px).
   ============================================================ */

.global-filter {
	background: var(--cream, #fdfbf7);
	border-bottom: 1px solid var(--line, #e6ddc9);
	position: sticky;
	top: 72px;
	z-index: 40;
}

.global-filter__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	flex-wrap: wrap;
	overflow-x: auto;
	scrollbar-width: none;
}
.global-filter__inner::-webkit-scrollbar {
	display: none;
}

.global-filter__group {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.global-filter__label {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--grey, #6a5b4f);
	white-space: nowrap;
}

.global-filter__select {
	font:
		600 12px / 1 "JetBrains Mono",
		monospace;
	padding: 7px 30px 7px 12px;
	background: #fdfbf7
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23201614' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>")
		no-repeat right 10px center;
	border: 1px solid var(--line, #e6ddc9);
	border-radius: 999px;
	color: var(--ink, #201614);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	min-width: 0;
}
.global-filter__select:hover {
	border-color: var(--ink, #201614);
}
.global-filter__select:focus {
	outline: 2px solid var(--ink, #201614);
	outline-offset: 2px;
}

.global-filter__search {
	/* v17bl: search flows inline with dropdowns, left-aligned via parent gap. */
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--line, #e6ddc9);
	border-radius: 999px;
	padding: 0 14px;
	min-width: 160px;
	background: #fdfbf7;
	flex-shrink: 1;
}

/* v17bl — Right cluster wrapper now flows inline with the dropdowns (no
   margin-left:auto). Groups [view-toggle + search] together so they wrap as a
   unit on narrow viewports, but stays left-aligned with the rest of the row. */
.global-filter__right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 1;
	min-width: 0;
}
.global-filter__right .global-filter__search {
	margin-left: 0;
}
.global-filter__search svg {
	width: 14px;
	height: 14px;
	color: var(--grey, #6a5b4f);
	flex-shrink: 0;
}
.global-filter__search input {
	border: 0;
	outline: none;
	font:
		600 12px / 1 "JetBrains Mono",
		monospace;
	padding: 8px 0;
	width: 100%;
	background: transparent;
	color: var(--ink, #201614);
}
.global-filter__search input::placeholder {
	color: var(--grey, #6a5b4f);
}

/* v17t — Grid/list view toggle (used on /tootekategooria/, future filter pages). */
.global-filter__view-toggle {
	display: inline-flex;
	border: 1px solid var(--line, #e6ddc9);
	border-radius: 999px;
	overflow: hidden;
	flex-shrink: 0;
}
.view-toggle__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	color: var(--grey, #6a5b4f);
	border: 0;
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
}
.view-toggle__btn.is-active {
	background: var(--ink, #201614);
	color: #fdfbf7;
}
.view-toggle__btn:hover:not(.is-active) {
	background: var(--cream-warm, #f4ede2);
	color: var(--ink, #201614);
}
.view-toggle__btn:focus {
	outline: 2px solid var(--ink, #201614);
	outline-offset: 2px;
}

/* Mobile <768px: tighten gaps and font, search shrinks to flex:1 in remaining space */
@media (max-width: 768px) {
	.global-filter__inner {
		gap: 10px;
		padding: 10px 0;
	}
	.global-filter__label {
		font-size: 10px;
	}
	.global-filter__select {
		font-size: 11px;
		padding: 6px 26px 6px 10px;
	}
	.global-filter__search {
		min-width: 0;
		flex: 1;
	}
}

/* Mobile <480px: search wraps to its own full-width row below the dropdowns */
@media (max-width: 480px) {
	.global-filter__search {
		width: 100%;
		margin-left: 0;
		flex: 1 1 100%;
	}
}