* {
	/*border-style:solid;*/
}

/*
 * CHANGE 2026-09-14 (America/Toronto): v24 Step 03 - AJAX panel containment.
 * detail.css is now registered by the parent index page, so the old standalone
 * html rule must apply only to the AJAX-loaded detail content. This preserves
 * the original detail font/padding/background without changing the results page.
 */
#listing-detail-panel-content {
	font-family: sans-serif, Arial;
	font-size: 14px;
	padding: 5px;
	background-color: #F8F9F9;
	color: #688c8c;
	/* CHANGE 2026-09-24 (America/Toronto): v25 Step 02d - keep iPhone landscape text at the same size as portrait. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.section {
	/*width:auto;
	margin: auto;
	float:left;
	padding:1px;
	display: flex;
	flex-direction: column;
	margin-left: 7%;*/
	display: flex;
	justify-content: center;
	width: 100%;
}

.section_top {
	/*width:80%;
	margin: auto;
	float:left;
	padding:1px;
	justify-content: center;*/
	gap: 5px;
	width: 95%;
	justify-content: center;
}



/*
 * CHANGE 2026-09-15 (America/Toronto): v24 Step 06 cleanup.
 * Removed legacy standalone-detail #myBtn and #backBtn styles. The AJAX panel
 * now owns its Back and Top controls in main.css.
 */

#close {
	color: white;
	border-radius: 5px;
	font-size: 20px;
	background-color: red;
	width: 80px;
	height: 40px;
}

#close:hover {
	background-color: #555; /* Add a dark-grey background on hover */
}
/*
 * CHANGE 2026-09-14 (America/Toronto): v24 Step 03.
 * Keep the original empty-detail-element behavior inside the detail panel only.
 */
#listing-detail-panel-content div:empty {
	display:none; /* tried this to try and get center alignment when the second or 3rd divs in grid-container-detail don't have any values - I think display-flex keeps the first element to the left anyway - when using display: grid or display: inline-block can't seem get the cards center aligned or they stack vertically*/
}


.section-remarks {
	display: flex;
	justify-content: center;
	width: 100%;
	/*display: none;
	text-align:center;
	margin-left: 6%;*/
}

.section-remarks-grid {
	/*display: grid;*/
	/*display: inline-block;*/
	/*grid-template-columns: repeat(3, 1fr);*/
	/*grid-template-rows: minmax(3, 1fr);*/
	gap: 5px;
	width: 95%;
	justify-content: center;
}
.wrapper-realtor {
	display: flex;
	justify-content: center;
	width:100%;
}
.grid-container-realtor {
	/*display: grid;*/
	/*display: inline-block;*/
	/*grid-template-columns: repeat(3, 1fr);*/
	/*grid-template-rows: minmax(3, 1fr);*/
	gap: 5px;
	width: 85%;
	/*justify-content: center;*/
}

.wrapper-photos {
	/* CHANGE 2026-09-24 (America/Toronto): v25 Step 02 - photos start hidden. */
	display: none;
	justify-content: center;
	width:100%;
}
.grid-container-photos {
	/*display: grid;*/
	/*display: inline-block;*/
	/*grid-template-columns: repeat(3, 1fr);*/
	/*grid-template-rows: minmax(3, 1fr);*/
	gap: 5px;
	width:auto;
	/*justify-content: center;*/
}
.card-photos {
	/* 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;
	  
	  /*float: left;*/
	/*
	 * CHANGE 2026-09-13 (America/Toronto): v23 Step 11 - desktop photo frame.
	 * Previous desktop sizes retained below for easy comparison/revert.
	 *
	 * Original desktop size:
	 * width: 290px;
	 * height: 250px;
	 *
	 * Initial Step 11 test size:
	 * width: 290px;
	 * height: 218px;
	 */
	 width: 500px;
	 height: 375px;
	 margin: 5px;
	 border-radius: 8px;
	 /*padding: 2px;*/
	 /*vertical-align: top;*/
	 /*text-overflow: ellipsis;*/
	 overflow: hidden;
	 cursor: pointer;
	 color: #688c8c;
}

	.wrapper-detail_details {
	   display: flex;
	   justify-content: center;
	   width: 100%;
	   /*display: none;
	   text-align:center;*/
	}
	
	.grid-container-detail-details {
			/*display: grid;*/
			display: inline-block;
			/*grid-template-columns: repeat(3, 1fr);*/
			/*grid-template-rows: minmax(3, 1fr);*/
			gap: 0px;
			width: 100%;
			/*justify-content: center;*/
		}
		
	.card-detail-details {
		/* 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;
		  /*float: left;*/
		 max-width: 300px;
		 max-height: 250px;
		 /*margin-left: 5px;*/
		 margin-top: 3px;
		 /*padding: 1px;*/
		 vertical-align: top;
		 /*text-overflow: ellipsis;*/
		 overflow: hidden;
		 cursor: pointer;
		 color: #688c8c;
		 border-left: 1px solid silver;
	}
	
		.wrapper-detail-plus {
	   display: flex;
	   justify-content: center;
	   width: 100%;
	   /*display: none;
	   text-align:center;*/
	}
	
	.grid-container-detail-plus {
			/*display: grid;*/
			display: inline-block;
			/*grid-template-columns: repeat(3, 1fr);*/
			/*grid-template-rows: minmax(3, 1fr);*/
			gap: 0px;
			width: 100%;
			/*justify-content: center;*/
		}
		
	.card-detail-plus {
		/* 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;
		  /*float: left;*/
		 max-width: 300px;
		 max-height: 250px;
		 /*margin-left: 5px;*/
		 margin-top: 3px;
		 /*padding: 1px;*/
		 vertical-align: top;
		 /*text-overflow: ellipsis;*/
		 overflow: hidden;
		 cursor: pointer;
		 color: #688c8c;
		 border-left: 1px solid silver;
	}
	
	.wrapper-detail_features {
		   /*display: flex;*/
		   justify-content: left;
		   width: 100%;
		   /*display: none;*/
		}

		.grid-container-detail {
			/*display: grid;*/
			display: inline-block;
			/*grid-template-columns: repeat(3, 1fr);*/
			/*grid-template-rows: minmax(3, 1fr);*/
			gap: 0px;
			width: 100%;
			/*justify-content: center;*/
		}
		
		.card-detail-features {
			/* 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;
			  /*display: flex;*/
			  float: left !important;
			 /*max-width: 80%;
			 max-height: 250px;
			 margin: 2px;*/
			 margin-top: 3px;
			 /*padding: 2px;
			 vertical-align: top;
			 text-overflow: ellipsis;
			 overflow: hidden;*/
			 cursor: pointer;
			 color: #688c8c;
			 /*justify-content: left;*/
		}
		.card-detail-features table {
			/*display: inline;
			float: left;
			vertical-align: top !important;*/
			border-left: 1px solid silver;
		}
		
		/*.card-detail-features table:before {
			display: inline;
			float: left;
			vertical-align: top !important;
			border-left: 1px solid silver;
			content: '';
			margin-bottom: 20%; 
			height: 80%; 
		}*/
		
		.card-detail-features td {
			word-wrap:break-word;
			/*max-width: 90%;*/
			border: none;
			background: none;
			background-color: none;
		}
		.card-detail-features th {
			text-align: left !important;
			vertical-align: top !important;
			/*word-wrap: break-word;*/
		}
		
	.wrapper-map {
	   /*display: flex;*/
	   justify-content: center;
	   width: 100%;
	   /*display: none;
	   text-align:center;*/
	}
	
	#map {
		width: auto;
		height: 400px;
		
	}
	
	

/*
 * CHANGE 2026-09-13 (America/Toronto): v23 Step 11 - desktop detail photo proportions.
 * WHY: Keep every desktop photo/card the same 500px x 375px footprint while preserving
 * the source photo aspect ratio. object-fit:cover fills the common frame and crops only
 * the excess required by differing source aspect ratios.
 *
 * Previous desktop setup retained here for comparison/revert:
 *
 * .image {
 *     max-width:300px;
 *     height:250px;
 *     border-radius: 8px;
 * }
 * img {
 *     display: block;
 *     margin-left: auto;
 *     margin-right: auto;
 *     height: 250px;
 *     max-width: 300px;
 *     border-radius: 8px;
 *     vertical-align: middle !important;
 * }
 */
.card-photos .image {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	overflow: hidden;
}

.card-photos .image img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 8px;
	vertical-align: middle !important;
}

.section-buttons {
	display: flex;
	justify-content: center;
	width: 100%;
	/*display: none;
	text-align:center;*/
}

.section-buttons-grid {
	/*display: grid;*/
	/*display: inline-block;*/
	/*grid-template-columns: repeat(3, 1fr);*/
	/*grid-template-rows: minmax(3, 1fr);*/
	/*gap: 5px;*/
	width: 95%;
	/*justify-content: center;*/
}

/*
 * CHANGE 2026-09-14 (America/Toronto): v24 Step 03.
 * Keep the existing detail HR styling from affecting the parent results page.
 */
#listing-detail-panel-content hr {
	border-top: 1px solid silver;
	width: 100%;
	opacity: 0.2;
}
#show_more_details {
	font-size: 15px;
}
.show_more_details {
	/*text-align:center;*/
	display: none;
}
#show_less_details {
	font-size: 15px;
}
.show_less_details {
	/*text-align:center;*/	
}

#show_more_details_plus {
	font-size: 15px;
}
.show_more_details_plus {
	/*text-align:center;*/
}
#show_less_details_plus {
	font-size: 15px;
}
.show_less_details_plus {
	/*text-align:center;*/
	display: none;
}

#show_more_features {
	font-size: 15px;
}
.show_more_features {
	/*text-align:center;*/
}
#show_less_features {
	font-size: 15px;
}
.show_less_features {
	/*text-align:center;*/
	display: none;
}
/*#wrapper_details {
	text-align:center;
	display: none;
}*/

/*.wrapper_map {
	text-align:center;
	display: none;
}*/

#show_map {
	font-size: 15px;
}
.show_map {
	/*text-align:center;*/
}
#hide_map {
	font-size: 15px;
}
.hide_map {
	/*text-align:center;*/
	display: none;
}
#show_photos {
	font-size: 15px;
}
.show_photos {
	/*text-align:center;*/
}
#hide_photos {
	font-size: 15px;
}
.hide_photos {
	/*text-align:center;*/
	display: none;
}
/*
 * CHANGE 2026-09-24 (America/Toronto): v25 Step 02d - mobile Remarks collapse.
 * Use CSS line-clamping for the visible Remarks text; JavaScript only toggles
 * collapsed/expanded state. Desktop Remarks remain unchanged and all Remarks
 * typography inherits the normal detail-page font and line-height.
 */
.remarks-more,
.remarks-less {
	display: none;
}

/*
 * CHANGE 2026-09-24 (America/Toronto): v25 Step 02d - apply the complete
 * Remarks clamp/control rules to both phone portrait and phone landscape.
 * iPhone landscape can be wider than 600px, so width alone is not sufficient.
 */
@media (max-width: 600px),
       (orientation: landscape) and (max-height: 600px) {
	.listing-remarks-wrap {
		position: relative;
	}

	.listing-remarks.remarks-collapsed {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 8; /* PORTRAIT: change this number to adjust visible Remarks lines. */
		line-clamp: 8;
		overflow: hidden;
	}

	.remarks-more.remarks-toggle-visible,
	.remarks-less.remarks-toggle-visible {
		display: inline;
		font: inherit;
		font-weight: bold;
		color: inherit;
		padding: 0;
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		text-decoration: none;
		appearance: none;
		-webkit-appearance: none;
		cursor: pointer;
	}

	/*
	 * Keep ...More visually at the end of the final clamped line. The flat
	 * panel-colour patch hides only the text beneath the control; no button
	 * background, border or radius is used.
	 */
	.remarks-more.remarks-toggle-visible {
		position: absolute;
		right: 0;
		bottom: 0;
		background-color: #F8F9F9;
	}
}

/* Phone landscape: fewer visible lines because the viewport is much shorter. */
@media (orientation: landscape) and (max-height: 600px) {
	.listing-remarks.remarks-collapsed {
		-webkit-line-clamp: 5; /* LANDSCAPE: change this number to adjust visible Remarks lines. */
		line-clamp: 5;
	}
}

/*
 * CHANGE 2026-09-11 (America/Toronto): v23 Step 07a - mobile/phone-landscape detail photos.
 * The desktop detail/photo sizing above is intentionally left unchanged.
 * Apply the mobile single-column photo layout both to narrow portrait screens
 * and to phone-sized landscape screens whose width may exceed 600px.
 * This prevents the desktop 290px inline-block photo cards from returning in
 * landscape and placing two photos across.
 */
@media (max-width: 600px),
       (orientation: landscape) and (max-height: 600px) {
	/*
	 * This is the common parent around the detail sections, including Photos.
	 * Desktop remains at 95%; mobile/phone-landscape can use the full width
	 * available inside the existing html padding.
	 */
	.section-buttons-grid {
		width: 100%;
	}

	/* Allow the Photos wrappers to pass the full mobile width down to the cards. */
	.wrapper-photos {
		width: 100%;
		box-sizing: border-box;
		padding-left: 5px;
		padding-right: 5px;
	}

	.grid-container-photos {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/*
	 * Remove the fixed desktop card width/height and inline-block behavior.
	 * display:block keeps one photo card per row in portrait and phone landscape.
	 * Horizontal margin is zero because html already supplies the 5px buffer.
	 */
	.card-photos {
		display: block;
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
		height: auto;
		margin-left: 0;
		margin-right: 0;
	}

	/* Remove the fixed desktop image-layer dimensions. */
	.card-photos .image {
		width: auto;
		max-width: none;
		height: auto;
	}

	/*
	 * OPTION 1 - ACTIVE: NATURAL ASPECT RATIO.
	 * The image fills the available width and its height adjusts naturally.
	 * Photos may have different heights, but no part of the image is cropped.
	 */
	.card-photos .image img {
		width: 100%;
		max-width: none;
		height: auto;
	}

	/*
	 * OPTION 2 - ALTERNATIVE: UNIFORM 250px HEIGHT / CROPPED AS NEEDED.
	 * To test this version, comment out the active .image img block immediately
	 * above and uncomment this block.
	 *
	.card-photos .image img {
		width: 100%;
		max-width: none;
		height: 250px;
		object-fit: cover;
	}
	 */
}

/*
 * CHANGE 2026-09-13 (America/Toronto): v23 Step 10 - phone landscape photo height limit.
 * WHY: In phone landscape, a full-width photo can become taller than the usable viewport.
 * Keep the existing Step 07a mobile/phone-landscape setup above intact for comparison/revert.
 * To revert this Step 10 test, comment out only this media block; the prior behavior remains above.
 *
 * The photo height is limited to the viewport height minus a 20px total buffer.
 * Width is automatic so the image keeps its natural aspect ratio. max-width:100% prevents
 * a very wide image from exceeding the existing photo/card area.
 */
@media (orientation: landscape) and (max-height: 600px) {
	.card-photos .image img {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: calc(100dvh - 20px);
	}
}

/*
 * CHANGE 2026-09-28 20:40 (America/Toronto): v27 Step 03 - listing-detail slideshow.
 * The slideshow sits above Description and shows one photo at a time. These rules
 * are separate from the existing View Photos styles, which remain unchanged for
 * this testing step.
 * CHANGE 2026-09-28 21:43 (America/Toronto): v27 Step 03a - slideshow sizing.
 * Preserve the complete source photo (including the brokerage watermark) without
 * distortion. Desktop is constrained by both panel width and viewport height; the
 * frame shrink-wraps to the rendered image so arrows/count stay over the photo.
 */
.listing-detail-slideshow {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.listing-detail-slideshow-frame {
	position: relative;
	display: inline-flex;
	justify-content: center;
	max-width: 85%;
	max-height: calc(100vh - 80px);
	overflow: hidden;
	border-radius: 8px;
}

.listing-detail-slideshow-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - 80px);
	object-fit: contain;
	object-position: center;
}

.listing-detail-slideshow-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: white;
	font-size: 28px;
	line-height: 1;
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
}

.listing-detail-slideshow-prev {
	left: 10px;
}

.listing-detail-slideshow-next {
	right: 10px;
}

.listing-detail-slideshow-count {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	z-index: 2;
	padding: 4px 10px;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.55);
	color: white;
	font-size: 14px;
}

.listing-detail-slideshow-unavailable {
	width: 85%;
	text-align: center;
	padding: 20px 5px;
}

/* Phone portrait: width is the primary slideshow constraint. */
@media (max-width: 600px) and (orientation: portrait) {
	.listing-detail-slideshow-frame {
		max-width: calc(100% - 10px);
		max-height: none;
	}

	.listing-detail-slideshow-image {
		width: 100%;
		height: auto;
		max-height: none;
	}

	.listing-detail-slideshow-unavailable {
		width: calc(100% - 10px);
	}
}

/* Phone landscape: height is the primary slideshow constraint. */
@media (orientation: landscape) and (max-height: 600px) {
	.listing-detail-slideshow-frame {
		max-width: 90%;
		max-height: calc(100vh - 40px);
	}

	.listing-detail-slideshow-image {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: calc(100vh - 40px);
	}

	.listing-detail-slideshow-unavailable {
		width: 90%;
	}
}