/**
 * IDX Search — component styles.
 *
 * The bar reuses Components/Archive/Luxe/search.css's own classes, and the
 * result cards reuse Components/Archive/Luxe/style.css's own
 * mshm-archive-card--luxe classes plus the theme's mshm-archive.css grid
 * (all enqueued as dependencies — see IdxSearch.php). This file only adds
 * what genuinely has no Havenlytics/Luxe equivalent to reuse:
 *  - .mshm-idx-search-bar   — a thin wrapper tweak (no heading/watermark
 *    section here, unlike the archive page, so the bar needs its own
 *    top-level spacing instead of inheriting .mshm-luxe-heading's).
 *  - .mshm-idx-card__badge / __mls — the IDX badge and MLS# line have no
 *    equivalent on a native Havenlytics card.
 *  - .mshm-idx-results__notice/__compliance — the empty/error states and
 *    the required MLS attribution footer.
 */

.mshm-idx-search-bar:not(.mshm-luxe-search--homepage) {
	width: min(1140px, calc(100vw - 64px));
	margin: 0 auto 28px;
	padding: 26px 0;
}

@media (max-width: 900px) {
	.mshm-idx-search-bar:not(.mshm-luxe-search--homepage) {
		width: calc(100vw - 28px);
	}
}

/* Bar placed on a page (e.g. the homepage): width/inset come from the shared
   .mshm-luxe-search--homepage rule so it lines up with the native bar above
   it; only the vertical padding is tighter, since they stack. */
.mshm-idx-search-bar.mshm-luxe-search--homepage {
	padding-top: 26px;
}

.mshm-idx-results {
	width: min(1140px, calc(100vw - 64px));
	margin: 0 auto 60px;
}

@media (max-width: 900px) {
	.mshm-idx-results {
		width: calc(100vw - 28px);
	}
}

/* Phones: one card per row. The theme's own one-column rule only matches grids
   that also carry Havenlytics' .hvnly-property-grid-view classes (native grids do,
   this one doesn't), so without this the IDX grid stays at two columns and the
   card text doesn't fit. Specificity beats the theme's two-column !important rule. */
@media (max-width: 640px) {
	.mshm-idx-results .mshm-archive-grid.mshm-idx-results__grid:not(.hvnly-list-view):not(.map-view) {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	.mshm-idx-results .mshm-archive-grid.mshm-idx-results__grid > .mshm-idx-card {
		width: 100% !important;
		max-width: 100% !important;
	}
}

.mshm-idx-results__notice {
	font: 300 15px/1.5 "Roboto", Arial, Helvetica, sans-serif;
	color: #6d6d6d;
	padding: 40px 0;
	text-align: center;
}

.mshm-idx-results__notice--admin {
	color: #b3261e;
	font-size: 12px;
}

/* The MyStateMLS IDX logo (supplied by MyStateMLS) on a white chip so it stays
   legible over any photo. */
/* Top-right: the left-aligned status tag / price / address stack on the hover overlay can grow
   upward on short cards, which used to slide the tag under a top-left logo. */
.mshm-idx-card__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	display: block;
	padding: 3.5px 6px;
	border-radius: 5px;
	background: #ffffff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
	z-index: 2;
}

.mshm-idx-card__badge img {
	display: block;
	width: auto;
	height: 12.6px; /* 30% smaller than the first version (18px) */
	max-width: none;
}

/* Logo above the required notices (results + detail footers). */
.mshm-idx-logo {
	display: block;
	width: auto;
	height: 28px;
	margin: 0 auto 12px;
}

.mshm-idx-results .mshm-idx-card .mshm-idx-card__mls {
	/* Space above so the line doesn't touch the photo card; tiny gap below so
	   it reads as one two-line caption with the courtesy line. The theme gives
	   every <p> a 32px bottom margin, hence the explicit margins/specificity. */
	margin: 12px 2px 0;
	font: 300 12px/1.4 "Roboto", Arial, Helvetica, sans-serif;
	color: #9a9a9a;
}

.mshm-idx-results .mshm-idx-results__compliance {
	margin: 0;
	font: 300 11px/1.5 "Roboto", Arial, Helvetica, sans-serif;
	color: #9a9a9a;
}

/* Centered divider (60% of the content width) between the pager and the MLS
   attribution text. */
.mshm-idx-results .mshm-idx-results__compliance::before {
	content: "";
	display: block;
	width: 60%;
	margin: 0 auto 24px;
	border-top: 1px solid #d8d8d8;
}

.mshm-idx-results .mshm-idx-results__count {
	margin: 32px 0 12px;
	font: 300 12px/1.4 "Roboto", Arial, Helvetica, sans-serif;
	color: #6d6d6d;
	text-align: center;
}

.mshm-idx-results {
	scroll-margin-top: 130px;
}

.mshm-idx-results__pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 8px 0 0;
	padding-bottom: 30px;
}

.mshm-idx-results__pager .mshm-idx-pager__num,
.mshm-idx-results__pager .mshm-idx-pager__edge,
.mshm-idx-results__pager .mshm-idx-pager__gap {
	font: 400 13px/1 "Roboto", Arial, Helvetica, sans-serif;
	letter-spacing: 0.08em;
	color: #171717;
	text-decoration: none;
}

.mshm-idx-results__pager .mshm-idx-pager__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	border: 1px solid #e3e3e3;
	border-radius: 19px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mshm-idx-results__pager a.mshm-idx-pager__num:hover {
	border-color: #171717;
}

.mshm-idx-results__pager .mshm-idx-pager__num.is-current {
	background: #171717;
	border-color: #171717;
	color: #fff;
}

.mshm-idx-results__pager .mshm-idx-pager__edge {
	padding: 0 10px 4px;
	text-transform: uppercase;
	border-bottom: 1px solid var(--mainsail-color-accent, #24bef5);
}

.mshm-idx-results__pager .mshm-idx-pager__gap {
	padding: 0 4px;
	color: #9a9a9a;
}

/* ---------- Card: listing broker line ---------- */
.mshm-idx-results .mshm-idx-card .mshm-idx-card__broker {
	margin: 2px 2px 0;
	font: 300 11px/1.4 "Roboto", Arial, Helvetica, sans-serif;
	color: #9a9a9a;
}

/* ---------- Phones / touch: details line, collapsible filters, compact pager ---------- */

/* Beds/baths/sqft + city under the photo — only where the hover overlay (the
   only other place they appear) can't be used. */
.mshm-idx-results .mshm-idx-card .mshm-idx-card__facts {
	display: none;
	margin: 12px 2px 0;
	font: 400 13px/1.45 "Roboto", Arial, Helvetica, sans-serif;
	color: #171717;
}

.mshm-idx-card__facts span {
	display: block;
}

.mshm-idx-card__locale {
	font-weight: 500;
}

@media (max-width: 640px), (hover: none) {
	.mshm-idx-results .mshm-idx-card .mshm-idx-card__facts {
		display: block;
	}

	.mshm-idx-results .mshm-idx-card .mshm-idx-card__facts + .mshm-idx-card__mls,
	.mshm-idx-results .mshm-idx-card .mshm-idx-card__facts ~ .mshm-idx-card__mls {
		margin-top: 6px;
	}
}

/* Filters toggle: hidden on larger screens (the bar is simply visible). */
.mshm-idx-filter-toggle {
	display: none;
}

@media (max-width: 640px) {
	.mshm-idx-search-bar[data-mshm-idx-collapsible] .mshm-idx-filter-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 0;
		padding: 0 18px;
		height: 46px;
		border: 1px solid #d8d8d8;
		border-radius: 23px;
		background: #fff;
		color: #171717;
		font: 400 13px/1 "Roboto", Arial, Helvetica, sans-serif;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.mshm-idx-filter-toggle svg {
		width: 20px;
		height: 20px;
		fill: none;
		stroke: var(--mainsail-color-accent, #24bef5);
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: transform 0.2s ease;
	}

	.mshm-idx-search-bar.is-filters-open .mshm-idx-filter-toggle svg {
		transform: rotate(180deg);
	}

	.mshm-idx-search-bar[data-mshm-idx-collapsible] .mshm-luxe-search__form {
		display: none;
		margin-top: 18px;
	}

	.mshm-idx-search-bar[data-mshm-idx-collapsible].is-filters-open .mshm-luxe-search__form {
		display: flex;
	}

	/* Compact pager: « ‹ [current] › » — the page count above already says
	   "Page 3 of 115", so the in-between numbers are dropped. */
	.mshm-idx-results__pager .mshm-idx-pager__num:not(.is-current),
	.mshm-idx-results__pager .mshm-idx-pager__gap,
	.mshm-idx-results__pager .mshm-idx-pager__txt {
		display: none;
	}

	.mshm-idx-results__pager {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.mshm-idx-results__pager .mshm-idx-pager__edge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid #e3e3e3;
		border-radius: 50%;
		font-size: 20px;
		line-height: 1;
	}

	.mshm-idx-results__pager .mshm-idx-pager__num.is-current {
		min-width: 52px;
		height: 44px;
		border-radius: 22px;
	}
}

/* ---------- Grid / Map view ---------- */
.mshm-idx-viewbar {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: 0 0 16px;
}

.mshm-idx-viewbar .mshm-idx-viewbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid #d8d8d8;
	border-radius: 20px;
	background: #fff;
	color: #171717;
	font: 400 12px/1 "Roboto", Arial, Helvetica, sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.mshm-idx-viewbtn svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linejoin: round;
}

.mshm-idx-viewbar .mshm-idx-viewbtn.is-active {
	background: #222222;
	border-color: #222222;
	color: #fff;
}

.mshm-idx-results .mshm-idx-map {
	height: 620px;
	max-height: 75vh;
	margin: 0 0 24px;
	border-radius: 16px;
	overflow: hidden;
	background: #eceae6;
}

.mshm-idx-results .mshm-idx-map[hidden] {
	display: none;
}

.mshm-idx-results.is-map-view .mshm-idx-results__grid {
	display: none;
}

.mshm-idx-pin {
	background: none;
	border: 0;
}

.mshm-idx-pin span {
	display: block;
	width: max-content;
	transform: translate(-50%, -100%);
	padding: 6px 10px;
	border-radius: 14px;
	background: #222222;
	color: #fff;
	font: 500 12px/1 "Roboto", Arial, Helvetica, sans-serif;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.mshm-idx-pin:hover span {
	background: var(--mainsail-color-accent-deep, #40a2d9);
}

.mshm-idx-map .mshm-idx-popup {
	display: block;
	width: 200px;
	color: #171717;
	text-decoration: none;
	font: 400 13px/1.4 "Roboto", Arial, Helvetica, sans-serif;
}

.mshm-idx-popup img {
	display: block;
	width: 200px;
	height: 130px;
	margin: 0 0 8px;
	object-fit: cover;
	border-radius: 8px;
}

.mshm-idx-popup strong {
	display: block;
	font-size: 15px;
}

@media (max-width: 640px) {
	.mshm-idx-results .mshm-idx-map {
		height: 70vh;
		border-radius: 12px;
	}
}

/* Hover strip (beds / baths / sqft): the page's `.single-content ul` rule adds
   2em left padding, which pushed it in from the address and price. Same
   specificity bump as the other card rules above, so it lines up with the title
   exactly like the native archive. Icons use the brand accent, a touch heavier
   so the thin line art doesn't look washed out. */
.mshm-idx-results .mshm-archive-card--luxe__stats {
	padding: 0;
	margin: 0;
}

.mshm-idx-results .mshm-archive-card--luxe__stats svg {
	stroke: var(--mainsail-color-accent, #24bef5);
	stroke-width: 2;
}

/* Results-page bar has two more fields (listing # and min size): on wide
   screens keep all of them and the Search button on ONE row. Narrower screens
   keep the normal wrapping layout. */
@media (min-width: 1200px) {
	.mshm-idx-search-bar:not(.mshm-luxe-search--homepage) .mshm-luxe-search__form {
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 18px;
	}

	.mshm-idx-search-bar:not(.mshm-luxe-search--homepage) .mshm-luxe-search__field {
		min-width: 0;
	}

	.mshm-idx-search-bar:not(.mshm-luxe-search--homepage) .mshm-luxe-search__field--price {
		flex: 1.3 1 190px;
		min-width: 170px;
	}

	.mshm-idx-search-bar:not(.mshm-luxe-search--homepage) .mshm-luxe-search__field--caret {
		flex: 1 1 140px;
	}

	.mshm-idx-search-bar:not(.mshm-luxe-search--homepage) .mshm-luxe-search__field--address {
		flex: 1.2 1 150px;
	}

	.mshm-idx-search-bar:not(.mshm-luxe-search--homepage) .mshm-luxe-search__field--submit {
		flex: 0 0 auto;
	}

	.mshm-idx-search-bar:not(.mshm-luxe-search--homepage) .mshm-luxe-search__field--submit button {
		padding: 0 22px;
	}
}

/* Hover overlay: a long address wrapping onto a second line pushed the status tag up under the
   MyStateMLS logo. One line, ellipsis for the rest (full address is on the card and the detail page). */
.mshm-idx-results__grid .mshm-archive-card--luxe__hover-address {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* On the short MLS photo the full stack (tag, price, address, beds/baths row) is only just
   too tall, which pushes the status tag up under the logo. A little tighter spacing gives
   it clear room. */
.mshm-idx-results__grid .mshm-archive-card--luxe__hover {
	padding-bottom: 16px;
}

.mshm-idx-results__grid .mshm-archive-card--luxe__hover .mshm-archive-card--luxe__status {
	margin-bottom: 6px;
}

.mshm-idx-results__grid .mshm-archive-card--luxe__hover-price {
	font-size: 1.5rem;
	padding-bottom: 8px;
	margin-bottom: 10px;
}

.mshm-idx-results__grid .mshm-archive-card--luxe__hover-address {
	margin-bottom: 10px;
}