display: flex;
	  justify-content: center;
	  width:100%;
	}
		
.area {
	/*max-width: 50%;*/
}
	
/** {
border-style:solid;
}*/

@media (max-width: 350px) {
	.no-margin-mobile {
	margin-left: 0 !important;
	margin-right: 0 !important;        
}
}

h2 {
	text-align: center; 
}
html {
	font-family: sans-serif, Arial;
	font-size: 14px;
	/*padding: 20px;*/
	background-color: #F8F9F9;
	color: #688c8c;
}
.section_detail {
	width:90%;
	float:left;
	/*text-align: center;*/
	margin-left: 6%;
}

/*
 * CHANGE 2026-09-12 (America/Toronto): v23 Step 09 mobile result-card alignment.
 * Match the known-working test-site mobile portrait results width.
 * Desktop/default .section_detail behavior above remains unchanged.
 */
@media (max-width: 600px) {
	.section_detail {
		width: calc(100% - 10px);
		margin-left: 5px;
		margin-right: 5px;
		float: none;
	}
}
#count {
	text-align: center;
	/*width:30%;*/
}

#section_detail table th{
	/*background: white;*/
	position: sticky;
	top: 0; /* Don't forget this, required for the stickiness */
	box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.4);
	padding: 0.25rem;
	font-size: 13px;
}
th {
	cursor: pointer;
}

#section_detail table td{
	font-size: 12px;
}

#myBtn {
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 20px; /* Place the button at the bottom of the page */
	right: 30px; /* Place the button 30px from the right */
	z-index: 99; /* Make sure it does not overlap */
	border: none; /* Remove borders */
	outline: none; /* Remove outline */
	background-color: red; /* Set a background color */
	color: white; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px; /* Some padding */
	border-radius: 5px; /* Rounded corners */
	font-size: 14px; /* Increase font size */
	opacity: 0.5;
}

#myBtn:hover {
	background-color: #555; /* Add a dark-grey background on hover */
}

table {
	border-collapse: collapse;
	width: auto;
}
td, th {
	padding: 5px;
}
/*th {
	background-color: #54585d;
	color: #ffffff;
	font-weight: bold;
	font-size: 13px;
	border: 1px solid #54585d;
}*/
td {
	color: #636363;
	border: 1px solid #dddfe1;
}
tr {
	background-color: #f9fafb;
}
tr:nth-child(odd) {
	background-color: #ffffff;
}

a:link {
	text-decoration: none;
	color: red;
	font-weight: bold;
	}
a:visited {
	text-decoration: none;
	color: red;
	}
a:hover {
	text-decoration: none;
	color: #000000;
	}
a:active {
	text-decoration: none;
	color: red;
	}
/*button:focus{
	background:red;
	}*/

.pagination {
	/*list-style-type: none;
	padding: 5px 0;
	display: inline-flex;
	justify-content: space-between;
	box-sizing: border-box;*/
	justify-content: center;
	width:100%;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.pagination li {
	/*box-sizing: border-box;
	padding-right: 10px;*/
	margin-bottom: 10px;
    color:#eee;
    padding: 10px 20px;
    background:#e2e6e6;
    font-size:16px;
    font-weight: bold;
    
    border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
/*.pagination li a {
	box-sizing: border-box;
	background-color: #e2e6e6;
	padding: 8px;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	color: #616872;
	border-radius: 4px;
}*/
.pagination li a:hover {
	background-color: #d4dada;
}
.pagination .next a, .pagination .prev a {
	text-transform: uppercase;
	font-size: 12px;
}
.pagination .currentpage a {
	background-color: #518acb;
	color: #fff;
}
.pagination .currentpage a:hover {
	background-color: #518acb;
}

.letterlist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.letterlist a {
    margin-bottom: 10px;
    color:#eee;
    padding: 10px 20px;
    background:#3c66ad;
    font-size:16px;
    font-weight: bold;
    
    border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.wrapper {
	display: flex;
	justify-content: center;
	width:100%;
	/*width: 90%;*/
	margin-left: 0%;
}

.wrapper_range {
	display: flex;
	/*justify-content: center;*/
	width:100%;
}

.wrapper-pages {
	/*display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width:70%;
	width: 90%;
	margin-left: 0%;
	gap: 6px;*/
	width:70%;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wrapper-pages  li {
    margin-bottom: 10px;
    color:#eee;
    padding: 10px 20px;
    background:#3c66ad;
    font-size:16px;
    font-weight: bold;
    
    border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

/*.grid-container {
	width: 100%;
}*/

/*.card {
	width: 33%;
}*/

.grid-container {
	/*display: grid;*/
	/*display: inline-block;*/
	/*grid-template-columns: repeat(3, 1fr);*/
	/*grid-template-rows: minmax(3, 1fr);*/
	/*gap: 25px;
	width: 90%;*/
}

/*.grid-container {
	display: grid;
	width:auto;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}*/

/*
 * CHANGE 2026-09-12 (America/Toronto): Result-card styles moved to result_card.css.
 * Original declarations remain below commented out for reference; no Step-06 mobile CSS is used.
 */
.card {
/* Add shadows to create the "card" effect */
	/* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */
	/* transition: 0.3s; */
	/* display: inline-block; */
	/* max-width: 290px; */
	/* height: 315px; */
	/*margin: 10px;*/
	/* margin-left: 10px; */
	/* margin-right: 10px; */
	/* margin-bottom: 20px; */
	/* margin-top: 0; */
	/* border-radius: 8px; */
	/* overflow: hidden; */
	/* cursor: pointer; */
	/* color: #688c8c; */
	/* line-height: normal; */
}

/* On mouse-over, add a deeper shadow */
.card:hover {
	/* box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5); */
	/* color: #69707a; */
}



.image {
	/* width:290px; */
	/* height:200px; */
	/* border-radius: 8px; */
	/*object-fit: cover;*/
	/*background-color: lightgrey;*/
	/* background-image: url('../images/photo_unavail.jpg'); */
}

img {
	/* display: block; */
	/* margin-left: auto; */
	/* margin-right: auto; */
	/*max-width: 290px;*/
	/* width: 100%; */
	/*height: 200px;*/
	/* height: 100%; */
	/* object-fit: cover; */
	/* border-radius: 8px; */
	/* vertical-align: middle !important; */
}

/*img {
	background: #3A6F9A;
	vertical-align: bottom !important;
	height: 250px;
	max-width: 300px;
}*/

/* Add some padding inside the card container */
.container {
	/* padding: 2px 16px 2px 5px; */
	/*width:280px;
	height:230px;
	display:inline-block;
	max-width: 190px;
	min-width:100px;*/
	  /*vertical-align: bottom;*/
	/*text-overflow: ellipsis;
	overflow: hidden;*/
}

.address {
	/* overflow: hidden; */
	/* display: -webkit-box; */
	/* -webkit-line-clamp: 1; */ /* number of lines to show */
	/*line-clamp: 1;*/ 
	/* -webkit-box-orient: vertical; */
}

.remarks {
	/* overflow: clip; */
	/* display: -webkit-box; */
	/* -webkit-line-clamp: 3; */ /* number of lines to show */
	/*line-clamp: 3;*/
	/* -webkit-box-orient: vertical; */
	/* font-size: 11px; */
}
body {
	/*margin-top:0px;
	margin-left:15px;
	margin-right:15px;*/
}

.overlay{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999;
	background: rgba(255,255,255,0.8) url("../images/loader.gif") center no-repeat;
}
.listings-lease{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999;
	background: rgba(255,255,255,0.8) url("../images/loader.gif") center no-repeat;
}
body{
	/*text-align: center;*/
}
/* Turn off scrollbar when body element has the loading class */
body.loading{
	overflow: hidden;   
}
/* Make spinner image visible when body element has the loading class */
body.loading .overlay{
	display: block;
}

/* Apply this within a media query for mobile devices */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
  input[type="radio"] {
    transform: scale(1.1); /* Scales the radio button to 150% of its original size */
    /* You might need to adjust margin or positioning if scaling causes overlap */
    /*margin-right: 10px;*/ /* Example adjustment */
  }
}

.radio-group {
  white-space: nowrap;
  width:100%;
}

/* New pagination presentation block begins */
.pagination-block-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 18px 0;
}

.pagination-block {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #b8b8b8;
    border-radius: 24px;
    padding: 4px 8px;
    background: #fff;
}

.pagination-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e2e2;
    color: #333;
    font-weight: bold;
    line-height: 1;
}

.pagination-circle:hover {
    background: #d4d4d4;
    color: #333;
}

.pagination-disabled {
    color: #999;
    cursor: default;
}

.pagination-page-label {
    font-weight: bold;
    color: #333;
}

.pagination-page-select {
    min-width: 58px;
    padding: 4px 6px;
    border: 1px solid #b8b8b8;
    border-radius: 4px;
    font-weight: bold;
    background: #fff;
    color: #333;
}

.pagination-total {
    font-weight: bold;
    color: #333;
}
/* New pagination presentation block ends */

/*
2026-07-27 - Step 2e: Phone-size filter stacking
On screens 600px wide or smaller, stack the existing filter wrappers and
controls vertically so the form stays within the viewport and does not create
horizontal page scrolling. Desktop and tablet-width rules above are unchanged.
*/
@media (max-width: 600px) {
	.wrapper_form {
		flex-direction: column;
		width: 100%;
		margin-left: 0;
	}

	#section_forms {
		width: 100%;
		float: none;
	}

	.form_line_1 {
		flex-direction: column;
		width: 100%;
	}

	.wrapper_radio {
		flex-wrap: wrap;
	}

	.wrapper_range_sale,
	.wrapper_range_lease {
		flex-direction: column;
		width: 100%;
	}

	.wrapper_form select,
	.wrapper_form input,
	.wrapper_form button {
		max-width: 100%;
		box-sizing: border-box;
	}
}

/*
 * Filter bar and panel layout.
 * The former labelled single-row primary-filter-bar, radio-style Property
 * Type controls and combined three-control secondary panel were replaced by
 * the revised two-row filter layout below.
 *
 * CHANGE 2026-07-28 (America/Toronto): Package 4 step 2 revised filter layout,
 * discrete Price sliders, Per/Pg Filters panel and results-header alignment.
 */
:root {
	/* Adjust these three values to resize the two filter rows. */
	--location-control-height: 40px;
	--secondary-control-height: 25px;
	--secondary-control-font-size: 11px;
}

.search-results-header,
.top-pagination-summary-row {
	width: 92%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.search-filter-shell {
	margin-bottom: 10px;
}

.location-filter-row,
.secondary-filter-bar {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.location-filter-row {
	padding: 0 0 8px 0;
	flex-wrap: wrap;
}

.secondary-filter-bar {
	align-items: center;
	gap: 7px;
	padding: 0;
}

.area-typeahead {
	position: relative;
	width: 33.333%;
	min-width: 280px;
}

.filter-input,
.filter-select {
	width: 100%;
	padding: 8px 10px;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #aeb5b5;
	border-radius: 4px;
	color: #303535;
	font-size: 14px;
}

.area-search-input {
	min-height: var(--location-control-height);
	padding-right: 42px;
	background: #ecefef;
	border: 0;
	border-radius: 999px;
	font-size: 16px;
}

/*
 * CHANGE 2026-07-31 (America/Toronto): Package 5 Step 4 UI Polish, Step 1.
 * Draw the Area search magnifying glass with CSS so no image or icon library
 * is required. The icon is decorative and does not intercept input clicks.
 *
 * CHANGE 2026-07-31 (America/Toronto): Package 5 Step 4 UI Polish, Step 1a.
 * Replace the CSS-drawn magnifying glass with the project image asset.
 */
.area-search-input {
	background-image: url('../images/mag_glass.svg');
	background-position: right 15px center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
}

.secondary-filter-bar .filter-select,
.secondary-filter-bar .filter-button {
	min-height: var(--secondary-control-height);
	font-size: var(--secondary-control-font-size);
}

/*
 * CHANGE 2026-09-01 (America/Toronto): v17 Step 01 places the three existing
 * Property Type choices directly in the desktop primary filter row.
 */
.primary-type-filter-options {
	flex-wrap: nowrap;
	flex: 0 0 auto;
}

.primary-type-filter-options .filter-button {
	flex: 0 0 auto;
}

.filter-input:focus,
.filter-select:focus,
/* 2026-09-26 15:20 America/Toronto - listing/filter buttons use their intentional selected/inactive styling; do not apply the shared external focus outline. */
.area-suggestion:focus,
.filter-panel-close:focus,
.price-slider:focus {
	outline: 2px solid #697272;
	outline-offset: 2px;
}

/*
 * CHANGE 2026-07-31 (America/Toronto): Package 5 Step 4 UI Polish, Step 1a.
 * Keep a subtle focus indicator on the Area search box without the heavier
 * browser outline that appeared after the control was used.
 */
.area-search-input:focus,
.area-search-input:focus-visible {
	border: 1px solid #c7cccc;
	outline: 0;
	box-shadow: none;
}

.area-search-input.has-invalid-area {
	border-color: #777f7f;
	box-shadow: inset 0 0 0 1px #777f7f;
}

.area-suggestions {
	position: absolute;
	top: calc(100% + 3px);
	left: 0;
	right: 0;
	z-index: 50;
	max-height: 260px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
	background: #ffffff;
	border: 1px solid #aeb5b5;
	border-radius: 4px;
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
}

/*
 * CHANGE 2026-07-31 (America/Toronto): Package 5 Step 4 UI Polish, Step 2.
 * Keep the Area list heading and Cancel action visible while suggestions
 * scroll beneath them.
 */
.area-suggestions-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	background: #ffffff;
	border: 0;
	border-bottom: 1px solid #d8dddd;
	color: #303535;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.area-suggestions-header:hover,
.area-suggestions-header:focus {
	background: #f3f5f5;
}

.area-suggestions-header:active {
	background: #e9eded;
}

.area-suggestions-header:focus {
	outline: 2px solid #697272;
	outline-offset: -2px;
}

/*
 * CHANGE 2026-07-31 (America/Toronto): Package 5 Step 4 UI Polish, Step 2c.
 * Cancel is display text within the full-row control, not a separate link.
 */
.area-suggestions-cancel {
	color: inherit;
	text-decoration: none;
}

.area-suggestions-header:hover .area-suggestions-cancel,
.area-suggestions-header:focus .area-suggestions-cancel {
	color: inherit;
	text-decoration: none;
}

.area-suggestion {
	display: block;
	width: 100%;
	padding: 9px 11px;
	background: #ffffff;
	border: 0;
	border-bottom: 1px solid #e1e4e4;
	color: #303535;
	text-align: left;
	cursor: pointer;
}

/*
 * CHANGE 2026-07-30 (America/Toronto): allow the Area type-ahead JavaScript
 * to hide non-matching pre-generated list items while the user types.
 */
.area-suggestion[hidden] {
	display: none;
}

.area-suggestion:last-child {
	border-bottom: 0;
}

.area-suggestion:hover,
.area-suggestion:focus {
	background: #ecefef;
}

/*
 * CHANGE 2026-08-12 (America/Toronto): Phase 3 Step 4 visually preserves
 * the County/City/CityRegion hierarchy in the client-side location list.
 */
.area-suggestion.location-level-county {
	font-weight: 600;
}

.area-suggestion.location-level-city {
	padding-left: 24px;
	font-weight: 600;
}

.area-suggestion.location-level-cityregion {
	padding-left: 40px;
}

.salelease-options {
	display: flex;
	align-items: center;
	gap: 5px;
}

.filter-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--secondary-control-height);
	padding: 7px 12px;
	box-sizing: border-box;
	background: #f4f5f5;
	border: 1px solid #aeb5b5;
	border-radius: 4px;
	color: #303535;
	font-size: var(--secondary-control-font-size);
	font-weight: bold;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
}

.filter-button:hover {
	background: #e4e7e7;
}

.filter-button.is-active {
	background: #596161;
	border-color: #454c4c;
	color: #ffffff;
}

/*
 * CHANGE 2026-09-26 14:15 (America/Toronto): v26 Step 06 carries the same
 * light-selected / darker-unselected grey contrast from the mode tabs into
 * the other form buttons. Existing is-active behavior is reused; no form or
 * JavaScript selection logic is changed.
 */
/*
 * CHANGE 2026-09-28 17:19 (America/Toronto): v27 Step 01.
 * Restyle only the secondary filter-row controls as simple rounded-end
 * buttons. Preserve the existing row sizing/wrapping behavior.
 */
/*
 * CHANGE 2026-09-30 22:43 (America/Toronto): v27 Step 11a.
 * Give unselected filter-row buttons a white background. The existing
 * is-active rule below remains unchanged so selected buttons keep their
 * established colour.
 */
.secondary-filter-bar .filter-button {
	background: #ffffff;
	border-color: #b8bdbd;
	border-radius: 999px;
	color: #303535;
}

.secondary-filter-bar .filter-button:hover {
	background: #f3f4f4;
}

.secondary-filter-bar .filter-button.is-active {
	background: #e4e6e6;
	border-color: #aeb4b4;
	color: #303535;
	box-shadow: none;
}

/*
 * CHANGE 2026-09-05 (America/Toronto): v20 Sold Step 02 gives the existing
 * Available/Sold controls a simple manila-folder-tab treatment. This is
 * intentionally scoped to the new mode controls so established filter-button
 * styling elsewhere remains unchanged.
 *
 * CHANGE 2026-09-26 14:15 (America/Toronto): v26 Step 06 replaces the
 * earlier flared-bottom folder silhouette with a connected browser-tab style.
 * The full-width tab strip provides the common grey background, while the
 * active tab joins visually to the lighter surface at the bottom of the row.
 */
.listing-mode-tabs {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin: 0 0 6px 0;
	padding: 5px 12px 0 12px;
	background: #c9cdcd;
	border-bottom: 6px solid #f1f2f2;
	border-radius: 6px 6px 0 0;
}

.listing-mode-tab.filter-button {
	position: relative;
	z-index: 1;
	min-height: 30px;
	margin: 0 3px;
	padding: 5px 18px;
	background: #d7dada;
	border: 1px solid #b8bdbd;
	border-bottom-color: #c3c7c7;
	border-radius: 8px 8px 0 0;
	color: #303535;
}

.listing-mode-tab.filter-button:hover {
	background: #e4e6e6;
}

.listing-mode-tab.filter-button.is-active {
	z-index: 2;
	background: #f1f2f2;
	border-color: #b8bdbd;
	border-bottom-color: #f1f2f2;
	color: #303535;
	top: 0;
}

/*
 * CHANGE 2026-09-25 17:55 (America/Toronto): v26 Step 01 previously used
 * skewed pseudo-elements to make the lower edge of each tab flare outward.
 * That treatment is intentionally retired in Step 06. The replacement below
 * uses the same pseudo-elements only on the active tab to create the small
 * inward/concave shoulders where the tab meets the full-width surface.
 */
.listing-mode-tab.filter-button::before,
.listing-mode-tab.filter-button::after {
	content: none;
}

.listing-mode-tab.filter-button.is-active::before,
.listing-mode-tab.filter-button.is-active::after {
	content: "";
	position: absolute;
	bottom: -1px;
	width: 10px;
	height: 10px;
	background: transparent;
	pointer-events: none;
}

.listing-mode-tab.filter-button.is-active::before {
	left: -10px;
	border-radius: 0 0 10px 0;
	box-shadow: 5px 5px 0 5px #f1f2f2;
}

.listing-mode-tab.filter-button.is-active::after {
	right: -10px;
	border-radius: 0 0 0 10px;
	box-shadow: -5px 5px 0 5px #f1f2f2;
}

/*
 * CHANGE 2026-09-17 (America/Toronto): v25 Step 01 aligns the logged-in
 * message with the right edge of the Location entry box while leaving the
 * Available/Sold tabs in their existing position.
 */
/*.listing-mode-tabs .logged {
	margin-left: auto;
	text-align: right;
}*/
/*gb moved in form*/
.landscape-filter-controls .logged {
	margin-right: auto;
	text-align: center;
	color: grey;
}

/*
 * CHANGE 2026-09-05 (America/Toronto): v20 Sold Step 02 keeps the Sold
 * timeframe choices visible in one horizontal filter-style row beneath the
 * normal controls. The radios remain real/selectable controls for testing.
 */
.sold-timeframe-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	font-size: var(--secondary-control-font-size);
}

.sold-timeframe-row[hidden] {
	display: none;
}

/*
 * CHANGE 2026-09-28 17:19 (America/Toronto): v27 Step 01.
 * Keep the Sold timeframe choices together and place each radio indicator
 * to the right of its label text without changing the PHP markup.
 */
.sold-timeframe-options {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: nowrap;
}

.sold-timeframe-options label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.sold-timeframe-options label input[type="radio"] {
	order: 2;
}

.map-placeholder,
.map-placeholder:hover,
.map-placeholder:focus {
	background: #eeeeee;
	border-color: #c5caca;
	color: #7a8080;
	cursor: not-allowed;
	opacity: 0.8;
}

.future-label {
	margin-left: 5px;
	font-size: 9px;
	font-weight: normal;
	text-transform: uppercase;
}


.filter-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	color: #303535;
}

.filter-panel-close {
	min-width: 36px;
	min-height: 36px;
	padding: 0;
	background: transparent;
	border: 0;
	color: #4f5757;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.price-slider-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(220px, 1fr));
	gap: 24px;
}

.price-slider-control label,
.per-page-filter-control label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	color: #303535;
}

.price-slider {
	width: 100%;
}

.per-page-filter-control {
	max-width: 220px;
}

.filter-panel-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 14px;
}

.apply-price:hover,
.apply-price:focus,
.apply-filters:hover,
.apply-filters:focus {
	background: #454c4c;
	color: #ffffff;
}

.standalone-filter-tools {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 6px;
	font-size: 11px;
}

.standalone-filter-tools .filter-select {
	width: auto;
	min-height: 30px;
	padding: 4px 7px;
	font-size: 11px;
}

.search-results-header {
	margin-top: 0;
	margin-bottom: 4px;
	padding: 6px 0 0 0;
	text-align: left;
}

/*gb*/
.search-results-main-line {
	/*font-size: 18px;*/
	font-weight: bold;
	/*line-height: 1.35;*/
	color: #303535;
}

.additional-listings-row {
	margin-top: 3px;
}

.additional-listings-message {
	color: red;
	font-size: 13px;
	font-weight: 900;
}

.top-pagination-summary-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	margin-top: 6px;
	margin-bottom: 8px;
}

.pagination-position-top {
	flex: 0 1 auto;
}

.pagination-position-top .pagination-block-wrap {
	justify-content: flex-end;
	margin: 0;
}

.per-page-summary {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: bold;
	color: #4f5757;
	white-space: nowrap;
}

.pagination-position-bottom {
	width: 100%;
	clear: both;
}

@media (max-width: 900px) {
	/*
	 * CHANGE 2026-09-27 16:57 (America/Toronto): v26 Step 12a.
	 * Keep the complete secondary button row on one line above the existing
	 * portrait layout. The previous flex-wrap declaration allowed Map to wrap
	 * by itself in the 601-900px range. Portrait <=600px remains unchanged.
	 */
.top-pagination-summary-row {
		flex-wrap: wrap;
	}
}

@media (max-width: 600px) {
	/*
	 * PHASE 5 - STEP 8b:
	 * Persistent panel actions remain button-sized and visibly anchored on
	 * mobile rather than inheriting the full-width action-row behavior.
	 */
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}

	.search-results-header,
	.top-pagination-summary-row {
		width: calc(100% - 16px);
	}

	.secondary-filter-bar {
		align-items: stretch;
	}

	.secondary-filter-bar > .filter-button {
		flex: 1 1 calc(50% - 7px);
		width: auto;
	}

	/*
	 * CHANGE 2026-09-28 17:19 (America/Toronto): v27 Step 01.
	 * On portrait-width screens keep the Sold timeframe choices on one row
	 * and move the existing Sort controls beneath them.
	 */
	.sold-timeframe-row {
		flex-wrap: wrap;
	}

	.sold-sort-controls {
		flex-basis: 100%;
	}

	
	.price-slider-grid {
		grid-template-columns: 1fr;
	}

	.filter-panel-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.per-page-filter-control {
		max-width: none;
	}

	.standalone-filter-tools {
		justify-content: flex-start;
	}

	.top-pagination-summary-row {
		justify-content: flex-start;
	}

	.pagination-position-top {
		width: 100%;
	}

	.pagination-position-top .pagination-block-wrap {
		justify-content: flex-start;
	}

	.per-page-summary {
		white-space: normal;
	}
}

/*
 * CHANGE 2026-07-28 (America/Toronto): Package 4 step 3 alignment and panel
 * corrections. Previous Package 4 rules above remain preserved unchanged.
 * These overrides remove the filter-section framing, constrain Location to
 * one-third width on desktop, align pre-template content with the listing-card
 * area, and support the Type and expanded Filters panels.
 */
.search-filter-shell,
.results-summary-pagination-row {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}

.search-filter-shell {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.type-filter-panel,
.price-filter-panel,
.secondary-filter-panel {
	margin-top: 8px;
	padding: 14px;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #b8bebe;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.type-filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.filters-preview-label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: bold;
	color: #303535;
}

.results-summary-pagination-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-top: 0;
	margin-bottom: 8px;
}

.results-summary-pagination-row .search-results-header {
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.results-summary-pagination-row .top-pagination-summary-row {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	justify-content: flex-end;
}

@media (max-width: 900px) {
	.area-typeahead {
		width: 50%;
	}

	.listing-mode-tabs {
		width: 100%;
	}

	.filters-preview-grid {
		grid-template-columns: 1fr;
	}

	.results-summary-pagination-row {
		flex-wrap: wrap;
	}

	.results-summary-pagination-row .top-pagination-summary-row {
		width: 100%;
		justify-content: flex-start;
	}
}

@media (max-width: 600px) {
	/*
	 * CHANGE 2026-07-31 (America/Toronto): Package 5 Step 4 UI Polish,
	 * Step 3. Sale, Lease, Type and Price remain available inside Filters,
	 * so hide only their primary-row controls on small screens. Area remains
	 * on its own row; Filters and Map Future remain together beneath it.
	 */
	#wrapper_sale_lease,
	.primary-type-filter-options,
	.type-toggle,
	.price-toggle {
		display: none;
	}

	.results-summary-pagination-row {
		width: 100%;
		padding-left: 8px;
		padding-right: 8px;
	}

	.area-typeahead {
		width: 100%;
		min-width: 0;
	}

	.listing-mode-tabs {
		width: 100%;
		min-width: 0;
	}

}

/*
 * CHANGE 2026-07-28 (America/Toronto): Package 4 step 5 independent fluid
 * gutters. The filter section and results/pagination section are intentionally
 * separate so their horizontal positions can be adjusted independently.
 */

/*
 * FILTER SECTION POSITION:
 * Increase margin-left to move the filter section farther right.
 * Keep width + margin-left + margin-right at approximately 100%.
 */
/*
 * CHANGE 2026-09-01 (America/Toronto): v17 Step 01 widens the desktop
 * filter container so Sale/Lease, the three Property Type choices, Price,
 * Filters and Map can remain on one row. The existing mobile override below
 * remains unchanged.
 */
.search-filter-shell {
	width: 96%;
	max-width: none;
	margin-left: 2%;
	margin-right: 2%;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

/*
 * CHANGE 2026-09-26 21:57 (America/Toronto): v26 Step 10 desktop results-summary alignment.
 * Center the results summary/pagination container as a block on desktop while
 * preserving the existing alignment of the lines and controls inside it.
 * Mobile positioning remains controlled by the existing mobile rules below.
 */
@media (min-width: 901px) {
	.results-summary-pagination-row {
		width: calc(100% - 20px);
		max-width: 1240px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;
	}
}

@media (max-width: 600px) {
	.search-filter-shell {
		width: calc(100% - 16px);
		margin-left: 8px;
		margin-right: 8px;
		padding-left: 0;
		padding-right: 0;
	}

	.results-summary-pagination-row {
		width: calc(100% - 16px);
		margin-left: 8px;
		margin-right: 8px;
		padding-left: 0;
		padding-right: 0;
	}
}

/*
 * CHANGE 2026-07-29 (America/Toronto): Package 5 Step 1 filter-panel layout.
 * Existing Package 4 rules above remain preserved. These localized overrides
 * keep Type, Price and Filters out of document flow, constrain each panel to
 * the Area control width, stack the Filters content and provide compact Min /
 * Max controls in both Price locations.
 */
.search-filter-shell {
	position: relative;
}

.type-filter-panel,
.price-filter-panel,
.secondary-filter-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	width: 33.333%;
	min-width: 280px;
	max-width: 100%;
	margin-top: 8px;
	overflow-y: auto;
}

/*
 * CHANGE 2026-09-30 11:20 (America/Toronto): v27 Step 09.
 * Center only the desktop Filters panel near the top of its existing opening
 * area. Preserve its width, internal scrolling and all mobile positioning.
 * The existing sticky state removes the centering transform after scrolling
 * fixes the panel to the captured viewport coordinates.
 */
@media (min-width: 901px) {
	.secondary-filter-panel {
		left: 50%;
		transform: translateX(-50%);
	}

	.secondary-filter-panel.filters-panel-is-stuck {
		transform: none;
	}
}

.secondary-filter-panel .type-filter-options,
.secondary-filter-panel .salelease-options {
	width: 100%;
}

.compact-price-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
}

.compact-price-control {
	min-width: 0;
}

.compact-price-control label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: bold;
	color: #303535;
}

.compact-price-select {
	width: 100%;
	min-width: 0;
}

.filter-panel-open::before {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
	background: rgba(0, 0, 0, 0.18);
}

@media (max-width: 900px) {
	.type-filter-panel,
	.price-filter-panel,
	.secondary-filter-panel {
		width: 50%;
	}
}

@media (max-width: 600px) {
	.type-filter-panel,
	.price-filter-panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: auto;
		bottom: auto;
		width: 100%;
		min-width: 0;
		max-height: calc(100vh - 16px);
		margin-top: 8px;
	}

	.compact-price-controls {
		grid-template-columns: 1fr 1fr;
	}
}

/* Package 5 Step 1: keep the controls within each Filters group vertical. */
/*
 * CHANGE 2026-07-29 (America/Toronto): Package 5 Step 1a control sizing.
 * Keep Sale/Lease and Type controls at their normal filter-bar button size,
 * allow those groups to share a row, keep Per/Pg content-width, and present
 * Price as compact synchronized sliders rather than full-width selects.
 */
.secondary-filter-panel .filters-price-group {
	width: 100%;
}
.secondary-filter-panel .per-page-filter-control {
	width: auto;
	max-width: max-content;
}

.secondary-filter-panel .per-page-filter-control .filter-select {
	width: auto;
	min-width: 5.5em;
}

.compact-price-slider {
	width: 100%;
	min-width: 0;
}


/*
 * Stack the Filters-panel preview groups vertically while keeping each
 * group's controls responsible for their own internal layout.
 */
.secondary-filter-panel .filters-preview-grid {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 14px;
	margin-bottom: 14px;
}

.secondary-filter-panel .filters-preview-group {
	min-width: 0;
	width: 100%;
	max-width: none;
}

.secondary-filter-panel .type-filter-options,
.secondary-filter-panel .salelease-options {
	width: auto;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

.secondary-filter-panel .type-filter-options .filter-button,
.secondary-filter-panel .salelease-options .filter-button {
	width: auto;
	flex: 0 0 auto;
}

/*
 * CHANGE 2026-07-29 (America/Toronto): Package 5 Step 1b filter stacking.
 * Keep each Filters-panel filter on its own vertical row while retaining the
 * buttons within Sale/Lease and Type on a single horizontal line.
 */
@media (max-width: 600px) {
	.secondary-filter-panel .filters-preview-group:not(.filters-price-group) {
		flex: 0 0 auto;
	}
}

/*
 * CHANGE 2026-07-31 (America/Toronto): Package 5 Step 4 UI Polish Step 4.
 * Show a desktop-only preview bubble above the compact Price slider track.
 * Mobile track taps are blocked in JavaScript; the native thumbs remain usable.
 */
.compact-price-control {
	position: relative;
}

.compact-price-hover-bubble {
	position: absolute;
	bottom: 24px;
	z-index: 2;
	transform: translateX(-50%);
	padding: 3px 6px;
	border: 1px solid #c7cccc;
	border-radius: 4px;
	background: #ffffff;
	color: #4f5757;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
}

.compact-price-hover-bubble[hidden] {
	display: none;
}

@media (max-width: 600px), (hover: none), (pointer: coarse) {
	.compact-price-hover-bubble {
		display: none !important;
	}
}

/*
 * CHANGE 2026-07-31 (America/Toronto): Mobile zero-results Filters-panel fix.
 * A later Package 5 override changed the small-screen panels back to absolute
 * positioning. Keep the Filters panel tied to the viewport so its available
 * height does not collapse when the results section contains no listings.
 * Desktop and the standalone Type / Price panels are unchanged.
 */
@media (max-width: 600px) {
	.secondary-filter-panel {
		position: fixed;
		top: 8px;
		right: 8px;
		bottom: 8px;
		left: 8px;
		width: auto;
		min-width: 0;
		max-height: none;
		margin: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/*
 * PHASE 5 - STEP 3:
 * Generic Additional Filters presentation inside the existing Filters panel.
 */
.phase5-additional-filters {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #d8dddd;
}

.phase5-additional-filters-heading {
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: bold;
	color: #303535;
}

.phase5-additional-filters-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(180px, 1fr));
	gap: 12px 16px;
}

.phase5-filter-control {
	position: relative;
	min-width: 0;
}

.phase5-filter-label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	color: #303535;
}

.phase5-select,
.phase5-range-input,
.phase5-multi-toggle {
	width: 100%;
	box-sizing: border-box;
}

.phase5-range-control {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.phase5-multi-select {
	position: relative;
}

.phase5-multi-toggle {
	justify-content: flex-start;
	text-align: left;
	font-weight: normal;
}

.phase5-multi-summary {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.phase5-multi-options {
	position: absolute;
	top: calc(100% + 3px);
	left: 0;
	right: 0;
	z-index: 70;
	max-height: 240px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #ffffff;
	border: 1px solid #aeb5b5;
	border-radius: 4px;
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
}

.phase5-multi-option {
	display: block;
	width: 100%;
	min-height: 42px;
	padding: 10px 12px;
	background: #ffffff;
	border: 0;
	border-bottom: 1px solid #e1e4e4;
	color: #303535;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.phase5-multi-option:last-child {
	border-bottom: 0;
}

.phase5-multi-option:hover,
.phase5-multi-option:focus {
	background: #ecefef;
}

.phase5-multi-option.is-selected {
	font-weight: bold;
	background: #e4e7e7;
}

@media (max-width: 600px) {
	.phase5-additional-filters-grid {
		grid-template-columns: 1fr;
	}

	.phase5-range-control {
		grid-template-columns: 1fr 1fr;
	}

	.phase5-multi-option {
		min-height: 48px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

/*
 * PHASE 5 - STEP 8a:
 * Persistent Filters Close and multi-select Done controls reuse the existing
 * #myBtn visual treatment while remaining independently positioned.
 */
.phase5-floating-action {
	position: fixed;
	z-index: 1100;
	border: none;
	outline: none;
	background-color: red;
	color: white;
	cursor: pointer;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 5px;
	font-size: 14px;
	opacity: 0.5;
}

.phase5-floating-action:hover,
.phase5-floating-action:focus {
	background-color: #555;
}

.filters-persistent-reset {
	top: 20px;
	right: 30px;
}

.filters-persistent-close {
	right: 30px;
	bottom: 20px;
}

/*
 * PHASE 5 - STEP 8b:
 * Keep the persistent Reset / Close controls above open multi-select lists.
 */
.filters-persistent-reset,
.filters-persistent-close {
	z-index: 1200;
}

/*
 * Keep multi-select choices scrollable while the Done control remains visible
 * at the bottom-right of the open list.
 */
.phase5-multi-options {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.phase5-multi-options[hidden] {
	display: none;
}

.phase5-multi-options-list {
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.phase5-multi-options-footer {
	display: flex;
	justify-content: flex-start;
	flex: 0 0 auto;
	padding: 6px;
	background: #ffffff;
	border-top: 1px solid #e1e4e4;
}

.phase5-multi-options-footer .phase5-multi-done {
	position: static;
	display: inline-block;
	width: auto;
	min-width: 0;
	flex: 0 0 auto;
	border: none;
	outline: none;
	background-color: red;
	color: white;
	cursor: pointer;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 5px;
	font-size: 14px;
	opacity: 0.5;
}

.phase5-multi-options-footer .phase5-multi-done:hover,
.phase5-multi-options-footer .phase5-multi-done:focus {
	background-color: #555;
	color: white;
}

/* Match choices stack for clearer desktop and mobile interaction. */
.phase5-multiple-match {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-top: 6px;
}

.phase5-multiple-match label {
	display: block;
}

.phase5-multi-options {
	z-index: 1150;
	max-height: min(240px, calc(100vh - 140px));
}

.phase5-multi-options-footer {
	position: sticky;
	bottom: 0;
	z-index: 1;
}

/*
 * PHASE 5 - STEP 8d:
 * Done is always visible at the top-left of an open multi-select list.
 * These overrides intentionally supersede earlier Step 8a-8c positioning.
 */
.phase5-multi-options-footer {
	order: -1;
	justify-content: flex-start;
	position: sticky;
	top: 0;
	bottom: auto;
	z-index: 2;
	border-top: 0;
	border-bottom: 1px solid #e1e4e4;
}

.phase5-multi-options-footer .phase5-multi-done {
	width: auto !important;
	margin-left: 0;
	margin-right: auto;
}

/*
 * Active additional filters display directly below the main results sentence.
 * Match the login-message font size while retaining normal/default text color.
 */
.phase5-active-filter-summary {
	margin-top: 3px;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.35;
	color: inherit;
	white-space: normal;
	overflow-wrap: anywhere;
}

.phase5-active-filter-summary[hidden] {
	display: none;
}

/*
 * STEP 03b - 2026-09-02 (America/Toronto):
 * Bold only the filter name in the active-filter results summary; keep the
 * user's selected value at the summary's normal font weight.
 */
.phase5-active-filter-label {
	font-weight: bold;
}

/*
 * V15 CLEAN UP - STEP 02:
 * Reset and Close are genuine children of the Filters panel. The panel's
 * existing desktop/mobile positioning and scrolling rules are unchanged.
 */
.secondary-filter-panel > .filter-panel-header {
	position: sticky;
	top: 0;
	z-index: 1200;
	background: #ffffff;
}

.secondary-filter-panel > .filters-panel-sticky-footer {
	position: sticky;
	bottom: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: #ffffff;
}

/*
 * Preserve the existing red/semi-transparent Top-button treatment, but stop
 * Reset and Close from using viewport-fixed positioning now that their panel
 * wrappers control where they remain visible.
 */
.secondary-filter-panel .filters-persistent-reset,
.secondary-filter-panel .filters-persistent-close {
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	display: inline-block;
	width: auto;
	min-width: 0;
	border: none;
	outline: none;
	background-color: red;
	color: white;
	cursor: pointer;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 5px;
	font-size: 14px;
	opacity: 0.5;
}

.secondary-filter-panel .filters-persistent-reset:hover,
.secondary-filter-panel .filters-persistent-reset:focus,
.secondary-filter-panel .filters-persistent-close:hover,
.secondary-filter-panel .filters-persistent-close:focus {
	background-color: #555;
	color: white;
}



/*
 * V15 CLEAN UP - STEP 03:
 * DESKTOP FILTERS PANEL STICKY OFFSET
 *
 * This controls where the top of the Filters panel stops after the user has
 * scrolled far enough for the panel to reach the sticky position.
 *
 * Standalone test site / no persistent header:
 *     --filters-sticky-top: 0px;
 *
 * WordPress site with a persistent header:
 *     Set this to the visible height of that header, for example:
 *     --filters-sticky-top: 72px;
 *
 * DESKTOP ONLY. Mobile Filters-panel behavior is unchanged.
 */
:root {
	--filters-sticky-top: 0px;
}

.filters-panel-sticky-marker {
	position: absolute;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
	visibility: hidden;
}

@media (min-width: 601px) {
	.secondary-filter-panel.filters-panel-is-stuck {
		position: fixed;
		top: var(--filters-sticky-top);
		left: var(--filters-stuck-left);
		right: auto;
		bottom: auto;
		width: var(--filters-stuck-width);
		height: min(
			var(--filters-open-height),
			calc(100vh - var(--filters-sticky-top))
		);
		max-height: calc(100vh - var(--filters-sticky-top));
		margin-top: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
}


/*
 * V15 CLEAN UP - STEP 05:
 * Multi-selects normally open below their control. JavaScript adds the
 * phase5-multi-options-up class when the usable space above is preferable.
 * The existing flex/list structure keeps Done visible while choices scroll.
 */
.phase5-multi-options.phase5-multi-options-up {
    top: auto;
    bottom: calc(100% + 3px);
}

/*
 * V15 CLEAN UP - STEP 06:
 * Multi-select filter grouping.
 *
 * A very light background visually ties the filter label, selector and
 * Match Any/All choice together without adding another heavy bordered panel.
 * This applies only to multi-select filters.
 */
.phase5-filter-control-multi {
	padding: 8px;
	background: #eceeee;
	border-radius: 4px;
}

/*
 * Match Any/All belongs to this specific multi-select filter.
 * Keep the wording compact and the Any / All choices on one line.
 */
.phase5-filter-control-multi .phase5-multiple-match {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px;
	margin-top: 7px;
	font-size: 12px;
	line-height: 1.2;
	white-space: nowrap;
}

.phase5-filter-control-multi .phase5-multiple-match-label {
	flex: 0 1 auto;
	font-weight: normal;
}

.phase5-filter-control-multi .phase5-multiple-match-options {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 6px;
}

.phase5-filter-control-multi .phase5-multiple-match-options label {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	white-space: nowrap;
}

/*
 * Slightly reduce Match text in narrower filter containers before allowing
 * the control to become cramped. The filter label and selected-value control
 * retain their existing sizes.
 */
@media (max-width: 900px) {
	.phase5-filter-control-multi .phase5-multiple-match {
		font-size: 11px;
		gap: 4px;
	}

	.phase5-filter-control-multi .phase5-multiple-match-options {
		gap: 4px;
	}
}

@media (max-width: 600px) {
	.phase5-filter-control-multi .phase5-multiple-match {
		font-size: 10.5px;
	}
}



/*
 * V16 CLIENT STEP 11b:
 * Login-required filters remain visible to non-logged visitors, but cannot be
 * used. The wrapper receives hover/focus context for the login-required title.
 */
.phase5-filter-control-login-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.phase5-filter-control-login-disabled input,
.phase5-filter-control-login-disabled select,
.phase5-filter-control-login-disabled button {
    pointer-events: none;
    cursor: not-allowed;
}

/*
 * CHANGE 2026-09-01 (America/Toronto): Zero-results page-height placeholder.
 * The container is emitted by results.php only when a valid search returns
 * zero listings. Its minimum height preserves enough page scroll for the
 * existing desktop Filters-panel sticky/scroll behavior without changing that
 * behavior. The element may later contain user-facing zero-results content.
 */
#no-results-placeholder {
	min-height: 100vh;
	display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


/*
 * CHANGE 2026-09-05 (America/Toronto): v20 Sold Step 03 keeps the Sold
 * timeframe radios and the new Sort by controls together on one responsive
 * horizontal row. The established filter-select styling is reused.
 *
 * CHANGE 2026-09-05 (America/Toronto): v20 Sold Step 03a keeps Sort by
 * immediately adjacent to the timeframe radio buttons and sizes both Sold
 * sort selects in keeping with the existing secondary filter buttons.
 */
.sold-sort-controls {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: 0;
	white-space: nowrap;
}

.sold-sort-controls > label {
	font-weight: bold;
}

.sold-sort-controls .filter-select {
	width: auto;
	min-height: var(--secondary-control-height);
	padding: 3px 8px;
	font-size: var(--secondary-control-font-size);
}

#sold_sort_field {
	min-width: 92px;
}

#sold_sort_direction {
	min-width: 62px;
}

/*
 * CHANGE 2026-09-05 (America/Toronto): v20 Sold Step 03 Commercial Sold
 * Board-rule notice displayed under the Sold results heading.
 */
.sold-commercial-warning {
	margin-top: 4px;
	color: #b00020;
	font-weight: bold;
}

/*
 * CHANGE 2026-09-10 (America/Toronto): v23 UI Enhancements Step 01.
 * Align the desktop filter section with the actual page-level left/right
 * edges of the results/pagination row. The results row is 96% wide with 2%
 * side margins inside #listings, while #listings itself is 90% wide and
 * begins at a 6% left margin. Matching those effective edges here keeps the
 * form, results heading, pagination and per-page text in one visual column.
 * Mobile keeps the existing layout unchanged.
 */
@media (min-width: 601px) {
	.search-filter-shell {
		width: 86.4%;
		margin-left: 7.8%;
		margin-right: 5.8%;
	}
}

/*
 * CHANGE 2026-09-10 (America/Toronto): v23 UI Enhancements Step 01a.
 * On desktop, keep the existing top pagination selector in its current right-
 * aligned position and place the per-page summary directly beneath it. The
 * standalone test login control remains inside #filter-form so its existing
 * change handling is preserved; its existing right alignment now places it
 * above the pagination selector because Step 01 aligned the form/results
 * gutters. Mobile retains its existing layout unchanged.
 */
@media (min-width: 601px) {
	.top-pagination-summary-row {
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-start;
		gap: 3px;
	}

	.per-page-summary {
		text-align: right;
	}

	.standalone-filter-tools {
		margin-bottom: 3px;
	}
}


/*
 * CHANGE 2026-09-10 (America/Toronto): v23 UI Enhancements Step 01b.
 * The standalone test login selector now lives beside Map/Future in the
 * existing secondary filter row. On desktop it behaves like the neighboring
 * compact controls. The top pagination block is no longer a right-hand column:
 * center it beneath the results heading so its horizontal position matches the
 * existing centered bottom pagination. Keep its per-page text directly below.
 */
@media (min-width: 601px) {
	.secondary-filter-bar .standalone-filter-tools {
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		margin: 0;
		gap: 0;
	}

	.secondary-filter-bar .standalone-filter-tools .filter-select {
		min-height: var(--secondary-control-height);
		font-size: var(--secondary-control-font-size);
	}

	.results-summary-pagination-row {
		display: block;
	}

	.results-summary-pagination-row .top-pagination-summary-row {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		margin-top: 6px;
		margin-bottom: 8px;
	}

	.pagination-position-top {
		width: 100%;
	}

	.pagination-position-top .pagination-block-wrap {
		justify-content: center;
	}

	.per-page-summary {
		text-align: center;
	}
}

@media (max-width: 600px) {
	.secondary-filter-bar .standalone-filter-tools {
		flex: 1 1 100%;
		width: 100%;
	}
}

/*
 * CHANGE 2026-09-10 (America/Toronto): v23 UI Enhancements Step 01c.
 * Restore the desktop results heading and top pagination to one horizontal
 * row. Keep the per-page summary immediately to the right of the top
 * pagination control. Also reduce the shared pagination presentation by
 * approximately 30% so the top and bottom controls remain identical and
 * more compact. Existing mobile layout rules remain in control below 601px.
 */
.pagination-block {
	gap: 6px;
	border-radius: 17px;
	padding: 3px 6px;
}

.pagination-circle {
	width: 22px;
	height: 22px;
	font-size: 70%;
}

.pagination-page-label,
.pagination-total {
	font-size: 70%;
}

.pagination-page-select {
	min-width: 41px;
	padding: 3px 4px;
	font-size: 70%;
}

@media (min-width: 601px) {
	.results-summary-pagination-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 20px;
	}

	.results-summary-pagination-row .search-results-header {
		flex: 1 1 auto;
		min-width: 0;
	}

	.results-summary-pagination-row .top-pagination-summary-row {
		display: flex;
		flex: 0 0 auto;
		width: auto;
		align-items: center;
		justify-content: flex-end;
		flex-direction: row;
		gap: 8px;
		margin: 0;
	}

	.pagination-position-top {
		width: auto;
	}

	.pagination-position-top .pagination-block-wrap {
		justify-content: flex-end;
		margin: 0;
	}

	.per-page-summary {
		text-align: left;
		white-space: nowrap;
	}
}


/*
 * CHANGE 2026-09-10 (America/Toronto): v23 UI Enhancements Step 01c correction.
 * Place the top pagination directly after the results heading text instead of
 * using space-between/right alignment. This makes its horizontal position
 * follow the end of the heading itself. The per-page text remains immediately
 * to the right of the selector. Bottom pagination sizing remains unchanged.
 */
@media (min-width: 601px) {
	.results-summary-pagination-row {
		display: block;
	}

	.search-results-main-line {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		flex-wrap: wrap;
	}

	.search-results-main-text {
		flex: 0 1 auto;
	}

	.search-results-main-line .top-pagination-summary-row {
		display: inline-flex;
		flex: 0 0 auto;
		width: auto;
		align-items: center;
		justify-content: flex-start;
		flex-direction: row;
		gap: 8px;
		margin: 0;
	}

	.search-results-main-line .pagination-position-top {
		width: auto;
	}

	.search-results-main-line .pagination-position-top .pagination-block-wrap {
		justify-content: flex-start;
		width: auto;
		margin: 0;
	}

	.search-results-main-line .per-page-summary {
		text-align: left;
		white-space: nowrap;
	}
}


/*
 * CHANGE 2026-09-10 (America/Toronto): v23 UI Enhancements Step 02.
 * Commercial remains visible in Sold mode, but is unavailable for searching.
 * Pointer events stay enabled so an attempted click can show the user message.
 */
.sold-commercial-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.sold-commercial-disabled:hover {
    background: #f4f5f5;
}


/*
 * CHANGE 2026-09-11 (America/Toronto): v23 UI Enhancements Step 05.
 * Keep the results heading and Sold-price message together as one summary
 * group. On desktop pagination remains the adjacent sibling; on mobile the
 * normal document flow places pagination below the complete summary group.
 */
@media (min-width: 601px) {
	.search-results-heading-group {
		flex: 0 1 auto;
		min-width: 0;
	}
}

@media (max-width: 600px) {
	.search-results-heading-group {
		width: 100%;
	}

	.search-results-main-line .top-pagination-summary-row {
		width: 100%;
	}
}

/* Preserve the existing desktop appearance after grouping the Sold summary. */
@media (min-width: 601px) {
	.search-results-main-line {
		align-items: flex-start;
	}
}

.sold-price-summary {
	font-weight: normal;
}

/*
 * CHANGE 2026-09-30 11:20 (America/Toronto): v27 Step 09.
 * The Sold statistic values and separators use normal weight; only the
 * statistic labels remain bold through their existing <strong> markup.
 */
.sold-statistics-summary {
	font-weight: normal;
}

/*
 * CHANGE 2026-09-29 13:00 (America/Toronto): v27 Step 06.
 * Price wording and active additional filters now share one results-summary
 * line. The line may wrap naturally, but each complete Filter: Value pair is
 * kept together as one unit.
 */
.results-price-filter-summary {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 4px;
}

.results-price-filter-summary .phase5-active-filter-summary {
	display: inline;
	margin-top: 0;
}

.phase5-active-filter-unit {
	display: inline-block;
	white-space: nowrap;
}

/*
 * CHANGE 2026-09-11 (America/Toronto): v23 UI Enhancements Step 05.
 * The top listings count and pagination control now live in their own row
 * immediately before the listing cards. Keep that row at 75% of its parent,
 * with the count at the left edge and pagination at the right edge.
 * The former header-area pagination/text containers remain empty above.
 */
.search-results-main-line .top-pagination-summary-row {
	margin: 0;
}

.pre-template-pagination-row {
	width: 75%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}

.pre-template-per-page-summary {
	text-align: left;
	white-space: nowrap;
}

.pre-template-pagination-position {
	margin-left: auto;
}

.pre-template-pagination-position .pagination-block-wrap {
	justify-content: flex-end;
	margin: 0;
}

/*
 * CHANGE 2026-09-14 (America/Toronto): v24 Step 02 - AJAX listing detail panel.
 * Desktop keeps the panel at approximately 80% of the viewport width so the
 * existing results page remains visible at the sides. Mobile uses the full
 * available viewport width. The page behind the panel is locked while open.
 */
#listing-detail-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.25);
}

#listing-detail-overlay.listing-detail-overlay-active {
	display: flex;
	justify-content: center;
	align-items: stretch;
}

/*
 * CHANGE 2026-09-14 (America/Toronto): v24 Step 03 - detail panel presentation.
 * Keep the desktop panel at approximately 80% of the viewport, contain all
 * horizontal overflow inside the panel, and use the dynamic viewport height
 * where supported. The results page remains visible at the desktop sides.
 */
#listing-detail-panel {
	position: relative;
	width: 80vw;
	max-width: 100%;
	height: 100vh;
	height: 100dvh;
	box-sizing: border-box;
	overflow: hidden;
	background: #F8F9F9;
}

.listing-detail-panel-toolbar {
	/* CHANGE 2026-09-14 (America/Toronto): Step 04 fix - keep panel controls
	 * positioned against #listing-detail-panel rather than this toolbar. */
	position: static;
	z-index: 2;
	box-sizing: border-box;
	/* CHANGE 2026-09-29 15:35 (America/Toronto): v27 Step 07 - retain the legacy
	 * detail-panel toolbar/anchor, but reduce its reserved vertical space to 2px. (was 42px) */
	min-height: 2px;
	height: 2px;
	padding: 0;
	background: #F8F9F9;
	border-bottom: 1px solid #d7dddd;
}

/*
 * CHANGE 2026-09-14 (America/Toronto): v24 Step 03b - panel-anchored Back control.
 * Keep Back visually independent of the full-width top toolbar, but anchor it
 * to the detail panel rather than calculating its position from the viewport.
 * The detail content scrolls underneath while Back remains inside the panel.
 */
#listing-detail-close {
	position: absolute;
	top: 52px;
	right: 30px;
	z-index: 10001;
	border: none;
	outline: none;
	background-color: red;
	color: white;
	cursor: pointer;
	padding: 2px 5px;
	border-radius: 5px;
	font-size: 20px;
	opacity: 0.5;
}

#listing-detail-close:hover,
#listing-detail-close:focus {
	background-color: #555;
}

/*
 * CHANGE 2026-09-14 (America/Toronto): v24 Step 04 - panel-anchored detail Top control.
 * Top belongs to the AJAX detail panel and remains inside the panel while the
 * detail content scrolls independently underneath it.
 */
#listing-detail-top {
	display: none;
	position: absolute;
	bottom: 20px;
	right: 30px;
	z-index: 10001;
	border: none;
	outline: none;
	background-color: red;
	color: white;
	cursor: pointer;
	padding: 2px 5px;
	border-radius: 5px;
	font-size: 20px;
	opacity: 0.5;
}

#listing-detail-top:hover,
#listing-detail-top:focus {
	background-color: #555;
}

#listing-detail-panel-content {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	/* CHANGE 2026-09-29 15:35 (America/Toronto): v27 Step 07 - match the retained
	 * 2px .listing-detail-panel-toolbar, above, so the recovered 40px is available to the scrolling detail content. (was 100% - 42px)*/
	height: calc(100% - 2px);
	min-height: 1px;
	overflow-x: hidden;
	overflow-y: auto;
}

.listing-detail-loading,
.listing-detail-load-error {
	padding: 15px;
}

body.listing-detail-panel-open {
	overflow: hidden;
}

/*
 * CHANGE 2026-09-14 (America/Toronto): v24 Step 03 - mobile panel width.
 * On phones there is no need to expose the results page beside the detail.
 * Use the overlay's available width rather than 100vw so panel padding/content
 * cannot create the small horizontal overrun seen during Step 02 testing.
 */
@media (max-width: 600px) {
	#listing-detail-panel {
		width: 100%;
		max-width: 100%;
	}

}

/*
 * CHANGE 2026-09-14 (America/Toronto): v24 Step 03b - mobile landscape panel width.
 * Cover more of the underlying results interface on mobile landscape without
 * changing the existing detail-photo sizing or proportions.
 */
@media (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
	#listing-detail-panel {
		width: 95vw;
	}
}


/*
 * CHANGE 2026-09-17 (America/Toronto): v25 Step 01 mobile-landscape filter layout.
 * Let the Available/Sold/login row and Location control use the full filter
 * width in mobile landscape. Keep the mode-tab labels on one line. This is
 * scoped only to these filter controls and does not alter result cards/photos
 * or the listing-detail panel layout.
 */
@media (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
	/*
	 * CHANGE 2026-09-28 22:44 (America/Toronto): v27 Step 04.
	 * Treat the Filters panel as a landscape workspace rather than leaving the
	 * narrower desktop/tablet panel floating from the left side. Keep it tied
	 * to the viewport with modest side insets and the available landscape
	 * height. Apply the same geometry if the existing desktop sticky logic has
	 * already marked the panel as stuck, so scrolling cannot change its size or
	 * position. Portrait and normal desktop Filters-panel behavior are unchanged.
	 */
	/*
	 * CHANGE 2026-09-29 00:03 (America/Toronto): v27 Step 05.
	 * Give the standalone Price panel the same deliberate mobile-landscape
	 * workspace geometry accepted for the Filters panel in Step 04. This affects
	 * only the Price popup opened from the button row; desktop and portrait stay
	 * on their existing rules.
	 */
	.price-filter-panel {
		position: fixed;
		top: 8px;
		right: 5vw;
		bottom: 8px;
		left: 5vw;
		width: auto;
		min-width: 0;
		max-width: none;
		height: auto;
		max-height: none;
		margin: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * CHANGE 2026-09-29 00:03 (America/Toronto): v27 Step 05.
	 * Slightly enlarge the native compact Price slider thumbs on mobile
	 * landscape so they are easier to acquire without changing the track,
	 * slider values or surrounding Price-control layout.
	 */
	.compact-price-slider::-webkit-slider-thumb {
		transform: scale(1.18);
	}

	.compact-price-slider::-moz-range-thumb {
		transform: scale(1.18);
	}

	.secondary-filter-panel,
	.secondary-filter-panel.filters-panel-is-stuck {
		position: fixed;
		top: 8px;
		right: 5vw;
		bottom: 8px;
		left: 5vw;
		width: auto;
		min-width: 0;
		max-width: none;
		height: auto;
		max-height: none;
		margin: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * CHANGE 2026-09-17 (America/Toronto): v25 Step 01a.
	 * Shrink-wrap only the three upper filter rows to the existing filter-button
	 * row width in mobile landscape. Desktop, portrait, results/cards/photos and
	 * listing-detail layout remain outside this rule.
	 */
	.landscape-filter-controls {
		display: block;
		width: fit-content;
		max-width: 100%;
	}

	.landscape-filter-controls .secondary-filter-bar {
		width: auto;
	}

	.landscape-filter-controls .location-filter-row {
		width: 100%;
		min-width: 0;
	}

	.landscape-filter-controls .area-typeahead {
		width: 100%;
	}

	.landscape-filter-controls .listing-mode-tabs {
		width: 100%;
		min-width: 0;
	}

	.listing-mode-tab.filter-button {
		white-space: nowrap;
	}

	/*
	 * CHANGE 2026-09-26 16:26 (America/Toronto): v26 Step 08a.
	 * Mobile landscape only: carry the accepted desktop secondary-button tab
	 * treatment into the existing landscape filter row. Portrait remains
	 * unchanged. Keep existing button widths and spacing.
	 */
	.landscape-filter-controls .secondary-filter-bar {
		align-items: flex-end;
		padding: 5px 12px 0 12px;
		background: transparent;
		border-bottom: 6px solid transparent;
		border-radius: 0;
	}

	.landscape-filter-controls .secondary-filter-bar .filter-button {
		position: relative;
		z-index: 1;
		border-radius: 999px;
		border-bottom-color: #b8bdbd;
	}

	.landscape-filter-controls .secondary-filter-bar .filter-button.is-active {
		z-index: 2;
		border-bottom-color: #aeb4b4;
	}

	.landscape-filter-controls .secondary-filter-bar .filter-button::before,
	.landscape-filter-controls .secondary-filter-bar .filter-button::after {
		content: none;
	}

	.landscape-filter-controls .secondary-filter-bar .filter-button.is-active::before,
	.landscape-filter-controls .secondary-filter-bar .filter-button.is-active::after {
		content: none;
		position: absolute;
		bottom: -1px;
		width: 7px;
		height: 7px;
		background: transparent;
		pointer-events: none;
	}

	.landscape-filter-controls .secondary-filter-bar .filter-button.is-active::before {
		left: -7px;
		border-radius: 0 0 7px 0;
		box-shadow: 4px 4px 0 4px #f1f2f2;
	}

	.landscape-filter-controls .secondary-filter-bar .filter-button.is-active::after {
		right: -7px;
		border-radius: 0 0 0 7px;
		box-shadow: -4px 4px 0 4px #f1f2f2;
	}
}

.neighbourhood {
	font-weight: bold; 
	font-size: 11px;
}
/*
 * CHANGE 2026-09-26 16:26 (America/Toronto): v26 Step 07 desktop filter-button
 * tab treatment. Keep the existing button widths and spacing, but give the
 * secondary filter row its own persistent grey strip and light lower surface,
 * matching the listing-mode tab concept. Each selected button keeps its own
 * pair of concave shoulders; adjacent selected buttons remain separate controls.
 * CHANGE 2026-09-27 16:57: Step 12a extends this accepted surface through the
 * full-button 601px+ range so it does not disappear before portrait mode.
 */
@media (min-width: 601px) {
	.secondary-filter-bar {
		/* CHANGE 2026-09-27 16:57 (America/Toronto): v26 Step 12a.
		 * Preserve the accepted Step 07/08 grey button-strip treatment throughout
		 * the full-button layout (601px and wider). Previously this began at 901px,
		 * causing the strip background to disappear from 601-900px. The existing
		 * <=600px portrait Filters + Map layout remains outside this rule.
		 */
		width: fit-content;
		align-items: flex-end;
		padding: 5px 12px 0 12px;
		background: transparent;
		border-bottom: 6px solid transparent;
		border-radius: 0;
	}

	.secondary-filter-bar .filter-button {
		position: relative;
		z-index: 1;
		border-radius: 999px;
		border-bottom-color: #b8bdbd;
	}

	.secondary-filter-bar .filter-button.is-active {
		z-index: 2;
		border-bottom-color: #aeb4b4;
	}

	.secondary-filter-bar .filter-button::before,
	.secondary-filter-bar .filter-button::after {
		content: none;
	}

	.secondary-filter-bar .filter-button.is-active::before,
	.secondary-filter-bar .filter-button.is-active::after {
		content: none;
		position: absolute;
		bottom: -1px;
		width: 7px;
		height: 7px;
		background: transparent;
		pointer-events: none;
	}

	.secondary-filter-bar .filter-button.is-active::before {
		left: -7px;
		border-radius: 0 0 7px 0;
		box-shadow: 4px 4px 0 4px #f1f2f2;
	}

	.secondary-filter-bar .filter-button.is-active::after {
		right: -7px;
		border-radius: 0 0 0 7px;
		box-shadow: -4px 4px 0 4px #f1f2f2;
	}
}

/*
 * CHANGE 2026-09-26 19:04 (America/Toronto): v26 Step 09 desktop-only
 * result-card alignment. Center each wrapped row of existing inline-block
 * result cards without changing the form position, card dimensions, or mobile.
 */
@media (min-width: 901px) {
	.grid-container {
		text-align: center;
	}

	.card-results {
		text-align: left;
	}
}

/*
 * CHANGE 2026-09-30 11:20 (America/Toronto): v27 Step 09a.
 * Keep each complete Sold statistic label/value together as one wrapping unit,
 * matching the established selected-filter unit wrapping behavior.
 */
.sold-statistics-unit {
	display: inline-block;
	white-space: nowrap;
}

/*
 * CHANGE 2026-09-30 21:29 (America/Toronto): v27 Step 11.
 * When enabled by configuration, keep only the Location + filter-button row
 * visible while the page scrolls. global.js adds the stuck class and supplies
 * the configured top offset plus the row's captured viewport geometry.
 * Existing wrapping and control styling remain unchanged.
 */
.sticky-filter-row-placeholder {
	display: block;
	width: 100%;
	height: 0;
}

.sticky-filter-row-placeholder.is-active {
	height: var(--sticky-filter-placeholder-height, 0px);
}

.location-filter-row.sticky-filter-row-enabled.sticky-filter-row-is-stuck {
	position: fixed;
	top: var(--sticky-filter-row-top, 0px);
	left: var(--sticky-filter-row-left, 0px);
	width: var(--sticky-filter-row-width, 100%);
	z-index: 900;
}

/*
 * CHANGE 2026-10-06 16:01 America/Toronto - Step 03h.
 * Generic wrapper presentation for individually placed Outside filters.
 * Each target identifies one filter with data-phase5-outside-filter="filter_key".
 * Keep this styling deliberately minimal; individual filter control types retain
 * their existing generic control styling.
 */
[data-phase5-outside-filter] {
	display: inline-flex;
	align-items: flex-end;
}

[data-phase5-outside-filter] .phase5-filter-control {
	min-width: 180px;
}


/*
 * CHANGE 2026-10-07 15:27 America/Toronto - Step 03l.
 * Generic width for select controls rendered at an Outside-filter target.
 *
 * Initial/current use:
 * - filter_form.php: the Outside target immediately below listing-mode-tabs.
 * - data-phase5-outside-filter="list_office_key": its generated multi-select.
 *
 * The normal Phase 5 panel grid supplies width to these controls. An Outside
 * target is not in that grid, and an inline label/control layout can otherwise
 * allow the select itself to shrink to only a few characters. Apply the same
 * 180px minimum already used by the generic Outside filter-control wrapper to
 * the actual single- or multi-select element. This rule is generic to Outside
 * placement and does not alter select widths inside the Filters panel.
 */
[data-phase5-outside-filter] .phase5-select,
[data-phase5-outside-filter] .phase5-multi-select {
	min-width: 180px;
}

/*
 * CHANGE 2026-10-06 10:02 America/Toronto - Step 03b: the Location list
 * header now contains separate Clear and Cancel actions. The Step 03 X control
 * has been removed; retain the existing search icon/input spacing.
 */
.area-suggestions-clear,
.area-suggestions-cancel {
	border: 0;
	background: transparent;
	padding: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.area-suggestions-clear {
	font-weight: 600;
}

/*
 * CHANGE 2026-10-06 12:29 America/Toronto - Step 03d: keep Clear and Cancel
 * inside the Location-list header on desktop and mobile. The header already
 * uses width: 100%; border-box makes its horizontal padding part of that width
 * instead of creating horizontal overflow. Prevent the two actions from
 * shrinking into each other.
 */
.area-suggestions-clear,
.area-suggestions-cancel {
	flex: 0 0 auto;
}

/*Add for filters outside of filter panel*/

/*
These rules are scoped to:
    .filter-tabs-outside-row.office-filter-row
so another Outside filter at another physical location is unaffected.
*/

/*WHY:
OurListings populates the target, so the row displays.
MLS Search/Sold leave the target empty, so the complete row disappears.
This prevents a blank row under the tabs.
*/
.filter-tabs-outside-row.office-filter-row:not(
	:has(
		[data-phase5-outside-filter="list_office_key"]
		> .phase5-filter-control:not([hidden])
	)
) {
	display: none;
}
/*WHAT THIS RULE MEANS:
Show the outer Office row only when its list_office_key Outside target contains
a .phase5-filter-control that does NOT have the hidden property.
Otherwise hide the whole row.
*/

/*Also add
*/

.filter-tabs-outside-row.office-filter-row .phase5-filter-control {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* And
*/
.filter-tabs-outside-row.office-filter-row .phase5-filter-label {
	margin-bottom: 0;
}

/*WHY:
The standard Phase 5 label/control layout is vertical.
The first rule changes only this placement to horizontal.
The second removes the label's normal bottom margin, which was intended for the
vertical layout.
*/
/*
 * CHANGE 2026-10-08 12:42 (America/Toronto): v30 Step 01.
 * DESKTOP/TABLET FILTER PANEL OPENING POSITION.
 *
 * --filters-panel-open-top is the one value to change if the desired buffer
 * between the top of the viewport and the open Filters panel needs adjustment.
 * Example: 8px moves it closer to the top; 16px moves it farther down.
 *
 * Keep mobile/mobile-landscape geometry on its existing rules. On larger
 * viewports the Filters panel now opens at this viewport position immediately,
 * while retaining its existing internal overflow scrolling and the page's
 * existing external scrolling beneath it.
 */
:root {
	--filters-panel-open-top: 10px;
}

@media (min-width: 601px) and (min-height: 601px) {
	.secondary-filter-panel,
	.secondary-filter-panel.filters-panel-is-stuck {
		position: fixed;
		top: var(--filters-panel-open-top);
		left: 50%;
		right: auto;
		bottom: auto;
		transform: translateX(-50%);
		height: auto;
		max-height: calc(100vh - (var(--filters-panel-open-top) * 2));
		margin-top: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * v30 Step 01: only the standalone Price Range popup opened from the
	 * button row is centered in the viewport. The compact Price controls inside
	 * the Filters panel keep their existing layout and behavior.
	 */
	.price-filter-panel {
		position: fixed;
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
		transform: translate(-50%, -50%);
		margin-top: 0;
		max-height: calc(100vh - 20px);
		overflow-y: auto;
	}
}

/*
 * CHANGE 2026-10-08 12:42 (America/Toronto): v30 Step 01.
 * Additional Filters heading action. This Clear button belongs to the
 * config_filters controls presented in the panel only; JavaScript deliberately
 * excludes Outside-only controls and all hard-coded Main filters.
 */
.phase5-additional-filters-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.phase5-additional-filters-clear {
	width: auto;
	min-width: 0;
	border: none;
	outline: none;
	background-color: red;
	color: white;
	cursor: pointer;
	padding: 2px 5px;
	border-radius: 5px;
	font-size: 14px;
	opacity: 0.5;
}

.phase5-additional-filters-clear:hover,
.phase5-additional-filters-clear:focus {
	background-color: #555;
	color: white;
}

/*
 * v30 Step 01: multi-select popups that remain open until Done now have an
 * individual Clear at top-left and keep Done at top-right. Both reuse the
 * existing red action treatment; their JavaScript behavior remains distinct.
 */
.phase5-multi-options-footer {
	justify-content: space-between;
	align-items: center;
}

.phase5-multi-options-footer .phase5-multi-clear,
.phase5-multi-options-footer .phase5-multi-done {
	position: static;
	display: inline-block;
	width: auto !important;
	min-width: 0;
	flex: 0 0 auto;
	border: none;
	outline: none;
	background-color: red;
	color: white;
	cursor: pointer;
	padding: 2px 5px;
	border-radius: 5px;
	font-size: 14px;
	opacity: 0.5;
	margin: 0;
}

.phase5-multi-options-footer .phase5-multi-clear:hover,
.phase5-multi-options-footer .phase5-multi-clear:focus,
.phase5-multi-options-footer .phase5-multi-done:hover,
.phase5-multi-options-footer .phase5-multi-done:focus {
	background-color: #555;
	color: white;
}

.phase5-multi-options-footer .phase5-multi-done {
	margin-left: auto;
	margin-right: 0;
}


/*
 * Step 5 - 2026-10-13 20:33 America/Toronto
 * Plugin administration Tab Order control.
 */
.ds-search-tab-order-wrap {
	margin-bottom: 20px;
}

.ds-search-tab-order {
	display: inline-block;
	vertical-align: top;
	min-width: 220px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-search-tab-order li {
	margin: 0 0 6px 0;
	padding: 7px 10px;
	border: 1px solid #c3c4c7;
	background: #fff;
	cursor: move;
}

.ds-search-tab-order li.is-dragging {
	opacity: 0.5;
}

.ds-search-tab-drag-handle {
	display: inline-block;
	margin-right: 6px;
}

.ds-search-tab-message {
	margin: 6px 0 0 155px;
	font-weight: 600;
}