/* ==========================================================================
   Компонент: филтрите на /jobs/ – Bricks Query Filters (мокъп v1.14: .ih-filters, .ih-chip)
   Маркировката е на Bricks (includes/elements/filter-*.php, 2.4.5):
     div.brxe-filter-search.ih-filters__search > input[type=search]
     select.brxe-filter-select.ih-filters__select > option
     fieldset.brxe-filter-radio.ih-filters__chips[data-mode=button] > legend.brx-filter-legend +
       ul.brx-filter-options > li(.brx-option-active) > label > input[type=radio] + span.brx-option-text.bricks-button
   Подредбата (решетка 2fr 1fr auto) е в глобалния клас ih-filters.
   ========================================================================== */

/* Полетата – като .ih-form__input */
.ih-filters__search input[type="search"],
select.ih-filters__select {
	width: 100%;
	min-height: 4.8rem;
	margin: 0;
	padding: var(--ih-space-s) var(--ih-space-m);
	border: 1px solid var(--ih-color-border);
	border-radius: var(--ih-radius-s);
	background-color: var(--ih-color-surface);
	color: var(--ih-color-text);
	font: inherit;
	font-size: var(--ih-text-m);
	line-height: 1.6;
	transition: border-color .2s;
}

/* Падащото меню – със същата височина като търсенето (отстъпи + ред 1.6), място за стрелката вдясно. */
select.ih-filters__select {
	height: auto;
	padding-right: calc(var(--ih-space-m) + 2.4rem);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235A6577' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--ih-space-m) center;
	background-size: 1.2rem .8rem;
	text-overflow: ellipsis;
	cursor: pointer;
}

.ih-filters__search input[type="search"]:hover,
select.ih-filters__select:hover {
	border-color: var(--ih-color-text-muted);
}

.ih-filters__search input[type="search"]:focus-visible,
select.ih-filters__select:focus-visible {
	outline: 2px solid var(--ih-color-accent);
	outline-offset: 1px;
	border-color: var(--ih-color-accent);
}

.ih-filters__search input::placeholder {
	color: var(--ih-color-text-muted);
	opacity: 1;
}

.ih-filters__search {
	width: 100%;
}

/* Чиповете (Radio в режим Button) – като .ih-chip */
.ih-filters__chips {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.ih-filters__chips .brx-filter-legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.ih-filters__chips .brx-filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ih-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ih-filters__chips li {
	position: relative;
	margin: 0;
}

.ih-filters__chips label {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
}

.ih-filters__chips input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ih-filters__chips .brx-option-text {
	display: inline-flex;
	align-items: center;
	min-height: 4.4rem;
	padding: 0 var(--ih-space-m);
	border: 1px solid var(--ih-color-border);
	border-radius: var(--ih-radius-pill);
	background: var(--ih-color-surface);
	color: var(--ih-color-text);
	font: inherit;
	font-size: var(--ih-text-s);
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	transition: background-color .2s, color .2s;
}

.ih-filters__chips input:checked + .brx-option-text,
.ih-filters__chips .brx-option-text.brx-option-active {
	border-color: var(--ih-color-ink);
	background: var(--ih-color-ink);
	color: var(--ih-color-surface);
}

.ih-filters__chips input:focus-visible + .brx-option-text {
	outline: 2px solid var(--ih-color-accent);
	outline-offset: 2px;
}

/* Брояч (Query Results Summary) – текстът е в глобалния клас ih-filters__count */
.ih-filters__count {
	margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ih-filters__chips .brx-option-text,
	.ih-filters__search input,
	select.ih-filters__select {
		transition: none;
	}
}