/* ============================================================================
   Dimbo — filtr ofert (shortcode [dimbo_filtr_oferty]). TYLKO funkcjonalne reguły.
   Estetyka (kolory, fonty, paddingi, ramki, tła) — po stronie motywu.

   Klasy do dyspozycji motywu:
     Wrapper       .dimbo-filtr-oferty  .dimbo-filtr-row
     Selecty       .dimbo-filtr-field  .dimbo-filtr-field-kierunek
                   .dimbo-filtr-field-wyzywienie  .dimbo-filtr-select
                   .dimbo-filtr-icon  .dimbo-filtr-chevron
     Buttony       .dimbo-filtr-buttons  .dimbo-filtr-buttons-typ
                   .dimbo-filtr-buttons-gw  .dimbo-filtr-buttons-label
                   .dimbo-filtr-btn  .dimbo-filtr-btn-sm  .is-active
     States        .dimbo-is-loading (na <form> w trakcie AJAX)
   ========================================================================= */

.dimbo-filtr-oferty {
	display: block;
	width: 100%;
}
.dimbo-filtr-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}

/* Selecty — wrapper relatywny, ikona+chevron absolutne */
.dimbo-filtr-field {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 1 1 160px;
	min-width: 160px;
	/* Select nigdy węższy niż jego najdłuższa opcja (+ padding na ikonę/chevron) —
	   inaczej przy 3 selectach (archiwum z regionem) tekst był ucinany („Dowolne wyży…”).
	   Działa niezależnie od flex-grow ustawianego przez motyw; nadmiar zawija się do nowej linii. */
	min-width: max-content;
}
/* Atrybut hidden (np. select regionu bez podkategorii) musi wygrać z display:inline-flex. */
.dimbo-filtr-field[hidden] {
	display: none !important;
}
.dimbo-filtr-icon {
	position: absolute;
	left: .75rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	line-height: 1;
}
.dimbo-filtr-chevron {
	position: absolute;
	right: .75rem;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: .5em;
	height: .5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	pointer-events: none;
	opacity: .6;
}
.dimbo-filtr-select {
	width: 100%;
	padding: .625rem 2rem .625rem 2.25rem;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	background: transparent;
}

/* Buttony — flex row, wspólny line */
.dimbo-filtr-buttons {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	flex-wrap: wrap;
}
.dimbo-filtr-buttons-gw {
	margin-left: auto; /* sekcja gwiazdek wyrównana do prawej (jak w mockupie) */
}
.dimbo-filtr-buttons-label {
	font-size: .85em;
	opacity: .7;
	margin-right: .25rem;
}
.dimbo-filtr-btn {
	display: inline-block;
	padding: .625rem 1rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	line-height: 1;
}
.dimbo-filtr-btn-sm {
	padding: .375rem .625rem;
	font-size: .85em;
}

/* States */
.dimbo-filtr-oferty.dimbo-is-loading {
	opacity: .7;
	pointer-events: none;
}

/* Submit fallback (noscript) */
.dimbo-filtr-submit {
	margin-top: .75rem;
	padding: .625rem 1.25rem;
	cursor: pointer;
}

/* Mobile: 1 kolumna, gwiazdki na pełną szerokość, bez auto-margin */
@media (max-width: 700px) {
	.dimbo-filtr-row { flex-direction: column; align-items: stretch; }
	.dimbo-filtr-buttons { width: 100%; }
	.dimbo-filtr-buttons-gw { margin-left: 0; }
	/* flex:0 0 auto — w kolumnie flex-basis 160px dawał ~120 px pustego miejsca pod selectem. */
	.dimbo-filtr-field { width: 100%; min-width: 0; }
	.dimbo-filtr-row > .dimbo-filtr-field { flex: 0 0 auto !important; } /* wygrywa z flex:1/2 !important z CSS motywu */
	/* Długa nazwa regionu: select nie szerszy niż kontener, tekst ucięty wielokropkiem. */
	.dimbo-filtr-select { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Stan błędu AJAX filtra (oferty-filter.js → [data-dimbo-filtr-status]). */
.dimbo-filtr-status {
	margin: 12px 0 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: #fef2f2;
	color: #991b1b;
	font-size: 14px;
}
.dimbo-filtr-status a { color: inherit; text-decoration: underline; }