/* Sremske Nekretnine V2 - archive.css (mobile-first filter traka + arhiva) */
.sn-archive { padding-block: var(--sn-space-5); }
.sn-archive__title { margin-bottom: var(--sn-space-3); }
.sn-archive__title-loc { color: var(--sn-ink-500); font-family: var(--sn-font-sans); }
.sn-archive__title,
.sn-archive__count,
.sn-filter-bar,
.sn-listing-grid,
.sn-pagination {
	max-width: 1290px;
	margin-inline: auto;
}
.sn-archive__count { color: var(--sn-ink-500); font-size: var(--sn-text-sm); margin-bottom: var(--sn-space-4); }

.sn-filter-bar {
	background: var(--sn-ink-50);
	border: var(--sn-border-width) solid var(--sn-border-color);
	padding: var(--sn-space-3);
	margin-bottom: var(--sn-space-4);
	display: flex; flex-direction: column; gap: var(--sn-space-3);
}
.sn-filter-bar__row { display: flex; flex-direction: column; gap: var(--sn-space-2); }
.sn-filter-bar__field { display: flex; flex-direction: column; gap: var(--sn-space-1); flex: 1; }
.sn-filter-bar__field label { font-size: var(--sn-text-sm); color: var(--sn-ink-500); }
.sn-filter-bar select, .sn-filter-bar input {
	height: 44px; padding-inline: var(--sn-space-2);
	border: var(--sn-border-width) solid var(--sn-border-color);
	background: var(--sn-white);
}
.sn-filter-bar__row--actions {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sn-space-2);
}
.sn-filter-bar__actions-left {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sn-space-2);
}
.sn-filter-bar__actions-right {
	display: flex;
}
.sn-filter-bar__actions-right .sn-filter-bar__field--toggle { flex: 0 0 auto; }
.sn-filter-bar .sn-btn { min-width: 140px; }

.sn-pagination { display: flex; flex-wrap: wrap; gap: var(--sn-space-2); margin-top: var(--sn-space-5); }
.sn-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding-inline: var(--sn-space-2);
	border: var(--sn-border-width) solid var(--sn-border-color);
	color: var(--sn-ink-900);
}
.sn-pagination .page-numbers.current { background: var(--sn-primary); border-color: var(--sn-primary); color: var(--sn-white); }
.sn-pagination .page-numbers:hover { border-color: var(--sn-primary); }

@media (min-width: 768px) {
	.sn-filter-bar__row { flex-direction: row; flex-wrap: wrap; }
	.sn-filter-bar__field--price { flex: 0 1 140px; }
}
.sn-filter-bar__field--checkboxes { flex: 1 1 100%; }
.sn-checkbox-group { display: flex; flex-wrap: wrap; gap: var(--sn-space-2); }
.sn-checkbox-chip {
	display: inline-flex; align-items: center; gap: var(--sn-space-1);
	border: var(--sn-border-width) solid var(--sn-border-color); background: var(--sn-white);
	padding: var(--sn-space-1) var(--sn-space-2); font-size: var(--sn-text-sm); cursor: pointer;
	min-height: 36px;
}
.sn-checkbox-chip input { width: auto; height: auto; }

/* Osnovni/napredni filteri - "Vise filtera" toggle (zahtev korisnika: skratiti
   vizuelno preopterecenu traku, ostaviti samo osnovne filtere uvek vidljive). */
.sn-filter-bar__field--toggle { justify-content: flex-end; }
.sn-filter-bar__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-space-1);
	height: 44px;
	padding-inline: var(--sn-space-3);
	background: var(--sn-white);
	border: var(--sn-border-width) solid var(--sn-border-color);
	color: var(--sn-ink-700);
	font-family: var(--sn-font-sans);
	font-size: var(--sn-text-sm);
	font-weight: 500;
	cursor: pointer;
	width: 100%;
	justify-content: center;
}
.sn-filter-bar__toggle:hover { border-color: var(--sn-primary); color: var(--sn-primary); }
.sn-filter-bar__toggle svg {
	width: 16px;
	height: 16px;
	transition: transform .15s ease;
}
.sn-filter-bar__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.sn-filter-bar__advanced {
	display: flex;
	flex-direction: column;
	gap: var(--sn-space-3);
	padding-top: var(--sn-space-3);
	border-top: var(--sn-border-width) dashed var(--sn-border-color);
}
.sn-filter-bar__advanced[hidden] { display: none; }

@media (min-width: 768px) {
	.sn-filter-bar__field--toggle { flex: 0 0 auto; align-self: end; }
	.sn-filter-bar__toggle { width: auto; }
}