/*
  Mainstop Properties - archive filtering.

  DESIGN.md: "Filter sidebar. Left column on desktop, full-screen sheet on
  mobile with a sticky Show N properties button. Groups separated by hairlines,
  not cards. Selected filters appear as removable pills above the results."

  Below 1025px a toolbar (Filters, Search, layout toggle) fronts the sheet.
  Below 768px the results default to two cards per row; body.ms-view-list
  switches to one, and filters.js remembers the choice per visitor.
*/

.ms-filters-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 4px;
}
.ms-filters-head h2 {
	font: 700 22px/1.2 var(--ms-font-head);
	color: var(--ms-ink);
	margin: 0;
}
.ms-filters-clear {
	font: 500 14px/1 var(--ms-font-body);
	color: var(--ms-muted);
	text-decoration: underline;
}
.ms-filters-clear:hover { color: var(--ms-critical); }

/* Desktop has no sheet, so these only exist on small screens */
.ms-filters-close,
.ms-toolbar,
.ms-filters-apply { display: none; }

/* ------------------------------------------------------------------ search */
.ms-search-form {
	display: flex;
	gap: 8px;
	margin: 10px 0 6px;
}
.ms-search-form input {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--ms-white);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	padding: 9px 12px;
	font: 400 15px/1.3 var(--ms-font-body);
	color: var(--ms-ink);
	min-height: 42px;
}
.ms-search-form input:focus {
	outline: 2px solid var(--ms-forest);
	outline-offset: 1px;
	border-color: var(--ms-forest);
}
.ms-search-form button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	min-height: 42px;
	background: var(--ms-forest);
	color: var(--ms-bone);
	border: 0;
	border-radius: var(--ms-radius);
	cursor: pointer;
}
.ms-search-form button .ms-i { font-size: 17px; }
.ms-search-form button:hover { background: var(--ms-deep); }

.ms-filter-group {
	padding: 18px 0;
	border-bottom: 1px solid var(--ms-border);
}
.ms-filter-group:last-of-type { border-bottom: 0; }
.ms-filter-group h3 {
	font: 700 13px/1 var(--ms-font-body);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ms-muted);
	margin: 0 0 12px;
}
.ms-filter-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-opt a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	text-decoration: none;
	color: var(--ms-ink);
	font: 400 15px/1.4 var(--ms-font-body);
	min-height: 34px;
}
.ms-opt.is-child a { padding-left: 18px; }

.ms-opt-box {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius-sm);
	background: var(--ms-white);
	position: relative;
}
.ms-opt.is-on .ms-opt-box {
	background: var(--ms-forest);
	border-color: var(--ms-forest);
}
.ms-opt.is-on .ms-opt-box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid var(--ms-bone);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ms-opt-label { flex: 1 1 auto; }
.ms-opt.is-on .ms-opt-label {
	font-weight: 600;
	color: var(--ms-forest);
}
.ms-opt-count {
	color: var(--ms-muted);
	font-size: 13px;
}
.ms-opt a:hover .ms-opt-label { color: var(--ms-forest); }

.ms-price-form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ms-price-form input {
	flex: 1 1 88px;
	min-width: 0;
	background: var(--ms-white);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	padding: 9px 11px;
	font: 400 15px/1.3 var(--ms-font-body);
	color: var(--ms-ink);
	min-height: 40px;
}
.ms-price-form input:focus {
	outline: 2px solid var(--ms-forest);
	outline-offset: 1px;
	border-color: var(--ms-forest);
}
.ms-price-form button {
	flex: 0 0 auto;
	background: var(--ms-forest);
	color: var(--ms-bone);
	border: 0;
	border-radius: var(--ms-radius);
	padding: 0 16px;
	min-height: 40px;
	font: 600 14px/1 var(--ms-font-body);
	cursor: pointer;
}
.ms-price-form button:hover { background: var(--ms-deep); }
.ms-filter-note {
	font: 400 12px/1.5 var(--ms-font-body);
	color: var(--ms-muted);
	margin: 8px 0 0;
}

/* Selected filters, above the results */
.ms-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.ms-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--ms-sage);
	color: var(--ms-forest);
	border-radius: var(--ms-radius-pill);
	padding: 7px 14px;
	font: 500 14px/1 var(--ms-font-body);
	text-decoration: none;
	min-height: 34px;
}
.ms-pill:hover { background: var(--ms-forest); color: var(--ms-bone); }
.ms-pill-clear {
	background: transparent;
	color: var(--ms-muted);
	text-decoration: underline;
}
.ms-pill-clear:hover { background: transparent; color: var(--ms-critical); }

/* ------------------------------------------------- mobile: toolbar + sheet */
@media (max-width: 1024px) {
	.ms-toolbar {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.ms-filters-open {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: var(--ms-white);
		color: var(--ms-ink);
		border: 1px solid var(--ms-border);
		border-radius: var(--ms-radius);
		padding: 0 16px;
		min-height: 46px;
		font: 600 15px/1 var(--ms-font-body);
		cursor: pointer;
	}
	.ms-filters-open .ms-i { font-size: 18px; color: var(--ms-forest); }
	.ms-open-search { width: 46px; padding: 0; justify-content: center; }

	.ms-tb-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		border-radius: var(--ms-radius-pill);
		background: var(--ms-brass);
		color: var(--ms-deep);
		font: 700 12px/1 var(--ms-font-body);
	}

	.ms-viewtoggle {
		margin-left: auto;
		display: none;
		border: 1px solid var(--ms-border);
		border-radius: var(--ms-radius);
		overflow: hidden;
		background: var(--ms-white);
	}
	.ms-view-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		min-height: 44px;
		border: 0;
		background: transparent;
		color: var(--ms-muted);
		cursor: pointer;
	}
	.ms-view-btn .ms-i { font-size: 18px; }
	.ms-view-btn.is-on { background: var(--ms-forest); color: var(--ms-bone); }

	.ms-filters {
		position: fixed;
		inset: 0;
		z-index: 9999;
		background: var(--ms-bone);
		overflow-y: auto;
		padding: 20px 24px 96px;
		display: none;
	}
	.ms-filters.is-open { display: block; }
	body.ms-filters-locked { overflow: hidden; }

	.ms-filters-close {
		display: inline-block;
		margin-left: auto;
		background: transparent;
		border: 0;
		color: var(--ms-muted);
		font: 600 15px/1 var(--ms-font-body);
		padding: 10px;
		min-height: 44px;
		cursor: pointer;
	}

	.ms-filters-apply {
		display: block;
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: 16px;
		background: var(--ms-brass);
		color: var(--ms-deep);
		text-align: center;
		text-decoration: none;
		border-radius: var(--ms-radius);
		padding: 15px 20px;
		font: 700 16px/1.2 var(--ms-font-body);
		min-height: 48px;
		box-shadow: 0 8px 24px rgba(18, 36, 29, 0.18);
	}
}

/* --------------------------------------- phones: two per row, compact cards */
@media (max-width: 767px) {
	.ms-viewtoggle { display: inline-flex; }

	.ms-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	body.ms-view-list .ms-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* The 2-up card is compact, DHGate style: photo, price, title, place. */
	body:not(.ms-view-list) .ms-grid .ms-card-body { padding: 10px 12px 12px; }
	body:not(.ms-view-list) .ms-grid .ms-card-body .ms-price { font-size: 16px; }
	body:not(.ms-view-list) .ms-grid .ms-card-title {
		font-size: 13px;
		line-height: 1.35;
		margin: 5px 0 3px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	body:not(.ms-view-list) .ms-grid .ms-card-where { font-size: 12px; }
	body:not(.ms-view-list) .ms-grid .ms-card-rule,
	body:not(.ms-view-list) .ms-grid .ms-card-specs { display: none; }
	body:not(.ms-view-list) .ms-grid .ms-badge { padding: 3px 8px; font-size: 10px; }
	body:not(.ms-view-list) .ms-grid .ms-card-badges { top: 8px; left: 8px; }
	body:not(.ms-view-list) .ms-grid .ms-card-count { bottom: 8px; right: 8px; padding: 2px 9px; font-size: 11px; }
}

/* Sheet controls stay explicit whatever the theme paints on bare buttons. */
button.ms-filters-close{background:transparent;border:0;color:var(--ms-muted);}
button.ms-filters-close:hover,button.ms-filters-close:focus{background:transparent;color:var(--ms-ink);}

/* Instant filtering: the results dim while the next set is on its way. */
.ms-results-busy{opacity:0.45;pointer-events:none;}
@media (prefers-reduced-motion: no-preference){.ms-results-busy{transition:opacity 0.15s ease;}}

/* ------------------------------------------- collapsible district groups */
/* A district keeps its own checkbox and gains a chevron that opens the areas
   inside it. Long area lists stay scannable, and a group opens itself when
   one of its own areas is already ticked. */
.ms-opt-parent {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.ms-opt-parent > a { flex: 1 1 auto; min-width: 0; }

.ms-sub-toggle {
	flex: 0 0 auto;
	position: relative;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ms-muted);
	cursor: pointer;
	border-radius: var(--ms-radius-sm);
}
.ms-sub-toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 7px;
	height: 7px;
	margin: -6px 0 0 -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
	.ms-sub-toggle::after { transition: transform 0.18s ease; }
}
.ms-opt-parent.is-open > .ms-sub-toggle::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}
.ms-sub-toggle:hover { color: var(--ms-forest); background: var(--ms-sage); }

.ms-subopts {
	flex: 0 0 100%;
	list-style: none;
	margin: 2px 0 6px;
	padding: 0;
	border-left: 1px solid var(--ms-border);
	margin-left: 8px;
}
.ms-subopts[hidden] { display: none; }
.ms-subopts .ms-opt a { padding-left: 12px; min-height: 32px; }