/**
 * Property single pages.
 */

/* Avada blog furniture + Estatik's native request form */
.single-properties .single-navigation,
.single-properties .fusion-post-slideshow,
.single-properties .fusion-meta-info,
.single-properties .about-author,
.single-properties .es-request-form,
.single-properties .es-property_section--request_form {
	display: none !important;
}

/* collapsible detail sections */
.single-properties .es-property-section__title {
	background: #f4f8fa;
	border: 1px solid #e3ecf0;
	border-radius: 8px;
	padding: 13px 44px 13px 18px;
	margin: 0 0 14px;
	font-size: 18px;
	cursor: pointer;
	position: relative;
	user-select: none;
	transition: background .2s ease;
}
.single-properties .es-property-section__title:hover {
	background: #eaf4f8;
}
.single-properties .es-property-section__title:after {
	content: "";
	position: absolute;
	right: 19px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid #16add0;
	border-bottom: 2px solid #16add0;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .25s ease;
	pointer-events: none;
}
.single-properties .hd-ps-collapsed > .es-property-section__title:after {
	transform: translateY(-50%) rotate(-45deg);
}

/* height-based hiding: display stays intact so the embedded map
   keeps its layout size and survives collapse/expand cycles */
.single-properties .hd-ps-collapsed > .es-property-section__content {
	max-height: 0 !important;
	overflow: hidden !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 !important;
	border-width: 0 !important;
	min-height: 0 !important;
	opacity: 0;
}
.single-properties .es-property-section {
	margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
 * Section ordering (flex column on the entity wrapper; non-section children
 * keep order 0 and stay on top in DOM order).
 * ------------------------------------------------------------------------ */
.single-properties .es-single {
	display: flex;
	flex-direction: column;
}
.single-properties .es-single > * {
	min-width: 0;
}
.single-properties [class~="es-property_section--description"]        { order: 11; }
.single-properties [class*="es-property_section--location-details"]   { order: 12; }
.single-properties [class*="es-property_section--property-features"]  { order: 13; }
.single-properties [class~="es-property_section--basic-facts"]        { order: 14; }
/* exact token: [class*=] would also swallow location-details */
.single-properties [class~="es-property_section--location"]           { order: 15; }
.single-properties .hd-ps-agent                                        { order: 16; }
.single-properties [class*="es-property_section--courtesy-of"]        { order: 16; }
.single-properties [class*="es-property_section--property-details"]   { order: 17; }
.single-properties [class*="es-property_section--miscellaneous"]      { order: 18; }
.single-properties .hd-ps-office                                       { order: 19; }
.single-properties [class*="es-property_section--rooms-units"]        { order: 20; }
.single-properties [class*="es-property_section--fees-taxes"]         { order: 21; }

/* remax listings: agent section replaces the MLS courtesy block */
.hd-remax-listing [class*="es-property_section--courtesy-of"] {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * Agent contact section: card left, form right.
 * ------------------------------------------------------------------------ */
.hd-ps-agent__title {
	background: #f4f8fa;
	border: 1px solid #e3ecf0;
	border-radius: 8px;
	padding: 13px 18px;
	margin: 0 0 20px;
	font-size: 18px;
}
.hd-ps-agent__grid {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 30px;
	align-items: start;
}
.hd-ps-agent__card .hd-agent-card {
	max-width: 320px;
}
.hd-ps-agent__form .hd-gf-card {
	max-width: none;
	margin: 0;
}
@media (max-width: 860px) {
	.hd-ps-agent__grid { grid-template-columns: 1fr; }
	.hd-ps-agent__card { display: flex; justify-content: center; }
}

/* --------------------------------------------------------------------------
 * Header strip below the gallery: keep stats/price/CTA, drop the duplicate
 * title (the restored page-top H1 owns it) and the term tags.
 * ------------------------------------------------------------------------ */
.single-properties .es-single__header .property-title,
.single-properties .es-single__header-terms {
	display: none !important;
}
.single-properties h1.entry-title.fusion-post-title {
	margin-bottom: 18px;
}

/* breadcrumbs: from plain text links to a proper trail band */
.single-properties .es-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	background: #f4f8fa;
	border: 1px solid #e3ecf0;
	border-radius: 8px;
	padding: 11px 18px;
	margin-bottom: 22px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.single-properties .es-breadcrumbs a {
	color: #16add0;
	text-decoration: none;
	font-weight: 600;
	transition: color .2s ease;
}
.single-properties .es-breadcrumbs a:hover {
	color: #0d8aa8;
}
.single-properties .es-breadcrumbs a:not(:first-child):before,
.single-properties .es-breadcrumbs span:not(:first-child):before {
	content: "\203A";
	color: #90a4ae;
	margin: 0 9px 0 5px;
	font-size: 15px;
	font-weight: 400;
}
.single-properties .es-breadcrumbs > *:last-child {
	color: #546e7a;
	font-weight: 400;
}

/* description: headerless, inline full-width prose */
.single-properties [class~="es-property_section--description"] > .es-property-section__title {
	display: none !important;
}
.single-properties [class~="es-property_section--description"] > .es-property-section__content {
	font-size: 16px;
	line-height: 1.85;
	color: #455a64;
}
.single-properties [class~="es-property_section--description"] {
	margin: 6px 0 26px;
}

/* description: true 16px (estatik's em scaling lands it ~22px) + a taller
   preview before the show-all control */
.single-properties [class~="es-property_section--description"] .es-entity-field__value,
.single-properties [class~="es-property_section--description"] .es-entity-field__value p {
	font-size: 16px !important;
	line-height: 1.8 !important;
}
.single-properties .es-entity-field--post_content.es-entity-field--post_content--collapsed .es-entity-field__value {
	max-height: 178px !important; /* double estatik's 89px preview */
}
.single-properties .es-full-content-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	padding: 7px 18px;
	border: 1px solid #cfd8dc !important;
	border-radius: 6px;
	background: #fff;
	color: #546e7a !important;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none !important;
	transition: all .2s ease;
}
.single-properties .es-full-content-link:hover {
	border-color: #16add0 !important;
	color: #16add0 !important;
}

/* data lists: zebra rows with a label/value grid */
.single-properties .es-property-section__content .es-property-fields {
	display: grid !important;
	grid-template-columns: 1fr 1fr; /* 2-up for density */
	gap: 0 28px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100% !important;
}
.single-properties .es-property-section__content .es-property-fields > li {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 9px 16px;
	margin: 0;
	border-radius: 6px;
}
/* stripe by visual ROW in the 2-col grid: items 1-2, 5-6, 9-10... */
.single-properties .es-property-section__content .es-property-fields > li:nth-child(4n+1),
.single-properties .es-property-section__content .es-property-fields > li:nth-child(4n+2) {
	background: #f6f9fb;
}
@media (max-width: 800px) {
	.single-properties .es-property-section__content .es-property-fields {
		grid-template-columns: 1fr;
	}
	.single-properties .es-property-section__content .es-property-fields > li:nth-child(4n+1),
	.single-properties .es-property-section__content .es-property-fields > li:nth-child(4n+2) {
		background: transparent;
	}
	.single-properties .es-property-section__content .es-property-fields > li:nth-child(odd) {
		background: #f6f9fb;
	}
}
.single-properties .es-property-fields .es-property-field__label {
	display: inline-block;
	width: 44%;
	min-width: 170px;
	max-width: 320px;
	font-weight: 600;
	color: #546e7a;
	font-size: 14px;
}

/* MLS disclaimer block */
.hd-mls-disclaimer {
	max-width: 1230px;
	margin: 34px auto 40px;
	padding: 24px 0 0;
	border-top: 1px solid #e3ecf0;
	color: #78909c;
}
.hd-mls-disclaimer h4 {
	font-size: 15px;
	color: #546e7a;
	margin: 0 0 10px;
}
.hd-mls-disclaimer p,
.hd-mls-disclaimer .es-dymanic-content {
	font-size: 13px;
	line-height: 1.7;
	color: #78909c;
	margin: 0 0 12px;
}
.hd-mls-logo {
	display: block;
	margin-top: 6px;
	width: auto;
	height: auto;
}

/* --------------------------------------------------------------------------
 * Header strip: price + big stats left, larger CTA right.
 * ------------------------------------------------------------------------ */
.single-properties .es-single__header {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "price btn" "meta meta";
	align-items: center;
	gap: 16px 24px;
	padding: 8px 0 4px;
}
.single-properties .es-single__header-left,
.single-properties .es-single__header-right {
	display: contents; /* promote the nested pieces to grid items */
}
.single-properties .es-single__header .es-price-container {
	grid-area: price;
	justify-self: start;
	margin: 0;
}
.single-properties .es-single__header .es-btn--request-info {
	grid-area: btn;
	justify-self: end;
	align-self: center;
}
.single-properties .es-single__header .es-price {
	display: inline-block;
	background: rgba(252, 201, 67, 0.18); /* faint of the palette yellow */
	border-radius: 8px;
	padding: 8px 20px;
	font-size: 32px !important;
	font-weight: 700;
	color: #263238 !important;
	line-height: 1.15;
}

/* stat trio: bigger, colored icons */
.single-properties .es-single__header .es-listing__meta {
	grid-area: meta;
	display: flex;
	align-items: center;
	gap: 44px;
	margin: 0;
	background: #f4f8fa;
	border: 1px solid #e3ecf0;
	border-radius: 8px;
	padding: 0 20px;
	min-height: 38px; /* encompasses the scaled icons */
}
.single-properties .es-single__header .es-listing__meta > div {
	display: flex;
	align-items: center;
	gap: 11px;
}
html body.single-properties .es-single__header .es-listing__meta svg {
	width: 16px !important;   /* natural drawing size... */
	height: 16px !important;
	min-width: 16px;
	transform: scale(1.8);    /* ...scaled visually to ~29px */
	transform-origin: left center;
	margin-right: 16px;       /* reserve the scaled overflow */
	margin-left: 2px;
}
.single-properties .es-single__header .es-listing__meta svg path,
.single-properties .es-single__header .es-listing__meta svg rect,
.single-properties .es-single__header .es-listing__meta svg circle,
.single-properties .es-single__header .es-listing__meta svg polygon {
	fill: #16add0 !important;
	stroke: #16add0;
}
.single-properties .es-single__header .es-listing__meta b {
	font-size: 21px;
	color: #263238;
	font-weight: 700;
	line-height: 1;
}
.single-properties .es-single__header .es-listing__meta b + span,
.single-properties .es-single__header .es-listing__meta span > span {
	font-size: 13px;
	color: #78909c;
	text-transform: uppercase;
	letter-spacing: .4px;
}

@media (max-width: 760px) {
	.single-properties .es-single__header { grid-template-columns: 1fr; grid-template-areas: "price" "btn" "meta"; }
	.single-properties .es-single__header .es-btn--request-info { justify-self: start; }
}

/* tighten gallery -> price row gap (estatik ships 48px) */
.single-properties .es-gallery.js-es-property-gallery {
	margin-bottom: 16px !important;
}

/* description: block layout frees the full width and drops the show-all
   control below the text instead of a full-height side column */
.single-properties .es-property-field--post_content {
	display: block !important;
}
.single-properties [class~="es-property_section--description"] .es-entity-field__value {
	width: 100% !important; /* estatik reserves ~19% for the (empty) label column */
	padding-left: 5px;
	padding-right: 5px;
}

/* section contents: estatik indents them 100px each side; align with the
   full-width header bars instead */
.single-properties .es-property-section__content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* amenities checklist */
.single-properties .hd-ps-amenities { order: 13; }
.hd-amenities {
	list-style: none;
	margin: 0;
	padding: 4px 0 8px;
	display: grid;
	grid-template-columns: repeat(3, minmax(150px, 215px));
	justify-content: center; /* pack the three columns to the middle */
	gap: 12px 36px;
}
.hd-amenities li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 15px;
	color: #37474f;
	margin: 0;
}
.hd-amenities i {
	color: #16add0;
	font-size: 17px;
}
@media (max-width: 800px) {
	.hd-amenities { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.hd-amenities { grid-template-columns: 1fr; }
}

/* office contact section (non-remax listings) */
.hd-ps-office .hd-gf-card {
	max-width: none;
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Gallery lightbox: fill the viewport + drag affordance.
 * ------------------------------------------------------------------------ */
.single-properties .mfp-container {
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.single-properties .mfp-container:before {
	display: none; /* magnific's inline-block centering spacer: a 100vw image
	   can't fit beside it and line-wraps below the viewport */
}
.single-properties .mfp-content {
	max-width: none !important;
	width: 100vw;
	height: 100vh;
	padding: 0 !important; /* estatik reserves 70px for its top bar; we overlay it */
}

/* estatik's native lightbox bar (close / counter / save / share) as a
   fullscreen overlay riding on a gradient scrim */
.single-properties .mfp-top-bar {
	position: fixed !important;
	top: 0 !important;
	z-index: 100011 !important;
	left: 0;
	right: 0;
	z-index: 1046;
	background: linear-gradient(to bottom, rgba(15, 23, 28, 0.65), rgba(15, 23, 28, 0));
	pointer-events: none;
}
.single-properties .mfp-top-bar__inner {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 12px 20px 26px;
	pointer-events: auto;
}
.single-properties .mfp-top-bar .mfp-close {
	position: static !important;
	width: auto !important;
	height: auto !important;
	color: #fff !important;
	background: rgba(15, 23, 28, 0.72) !important; /* solid enough to read on any photo */
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	border-radius: 20px;
	padding: 8px 18px !important;
	font-size: 14px;
	line-height: 1 !important;
	cursor: pointer;
	opacity: 1;
	transition: background .2s ease;
}
.single-properties .mfp-top-bar .mfp-close:hover {
	background: rgba(22, 173, 208, 0.85) !important;
}
.single-properties .mfp-top-bar__inner {
	position: relative;
}
.single-properties .mfp-top-bar .mfp-counter {
	position: absolute !important;
	left: 50%;
	top: 12px;
	transform: translateX(-50%);
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .5px;
	background: rgba(15, 23, 28, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 20px;
	padding: 8px 18px;
	line-height: 1;
}

/* the drag companion frame */
.single-properties .hd-mfp-peek {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	z-index: 100007 !important; /* one above .mfp-content (100006), which was
	   painting its opaque white figure over the peek; below arrows (100010) */
	display: none;
	pointer-events: none;
	background: #0f171c; /* never flash white behind a loading neighbor */
}
.single-properties .mfp-top-bar .es-control .es-btn {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.16) !important;
	border: 0 !important;
	border-radius: 20px;
	transition: background .2s ease;
}
.single-properties .mfp-top-bar .es-control .es-btn:hover {
	background: rgba(22, 173, 208, 0.85) !important;
}
.single-properties .mfp-top-bar .es-control .es-icon {
	color: #fff !important;
}
.single-properties .mfp-figure,
.single-properties .mfp-figure figure {
	margin: 0 !important;
	padding: 0 !important; /* magnific pads the figure ~70px for its chrome */
	height: 100%;
	background: transparent !important; /* estatik paints it opaque white */
}
.single-properties img.mfp-img {
	width: 100vw !important;
	height: 100vh !important;
	max-height: none !important;
	max-width: none !important;
	object-fit: cover; /* true edge-to-edge, top to bottom */
	padding: 0 !important;
	cursor: grab;
	user-select: none;
	-webkit-user-drag: none;
}
.single-properties .mfp-figure:after {
	display: none; /* the boxed white frame */
}

/* estatik's lightbox arrows: prominent circles pinned to the sides */
.single-properties .es-mfp-arrow {
	position: fixed !important;
	top: 50% !important;
	transform: translateY(-50%);
	width: 58px !important;
	height: 58px !important;
	border-radius: 50% !important;
	background: rgba(15, 23, 28, 0.45) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	z-index: 100010 !important; /* the image content stack paints above 4-digit values */
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: background .2s ease;
}
.single-properties .es-mfp-arrow:hover {
	background: rgba(22, 173, 208, 0.85) !important;
}
.single-properties .es-mfp-arrow-left { left: 22px !important; right: auto !important; }
.single-properties .es-mfp-arrow-right { right: 22px !important; left: auto !important; }
.single-properties .es-mfp-arrow .es-icon {
	color: #fff !important;
	font-size: 20px !important;
	width: auto !important;
	height: auto !important;
}

/* drag feedback */
.single-properties .mfp-wrap.hd-dragging img.mfp-img {
	transition: none;
	will-change: transform;
}
.single-properties .mfp-wrap.hd-dragging img.mfp-img {
	cursor: grabbing;
}

/* logged-in admin bar sits over the lightbox chrome: clear it */
body.admin-bar.single-properties .mfp-top-bar {
	top: 32px !important;
}
@media (max-width: 782px) {
	body.admin-bar.single-properties .mfp-top-bar {
		top: 46px !important;
	}
}

/* --------------------------------------------------------------------------
 * Contact Listing Agent off canvas: floating rounded card, inset from the
 * viewport edges (width comes from the off canvas setting: 40%).
 * ------------------------------------------------------------------------ */
#awb-oc-394900 .awb-off-canvas {
	height: 90vh !important;      /* 5% breathing room top and bottom */
	align-self: center !important;
	margin-right: 1.25vw;
	border-radius: 16px;
	overflow-y: auto;             /* the form can outgrow 90vh: scroll, don't
	   amputate (any non-visible overflow still clips to the radius) */
	overflow-x: hidden;
	box-shadow: 0 14px 48px rgba(15, 23, 28, 0.35);
}
@media (max-width: 900px) {
	#awb-oc-394900 {
		--awb-width: 94vw;        /* 40% is a sliver on phones */
	}
	#awb-oc-394900 .awb-off-canvas {
		margin-right: 3vw;
	}
}

/* contact popup: keep the form off the container floor (outer gap) and
   give the scrollable layer matching end-of-scroll breathing room */
#awb-oc-394900 .awb-off-canvas {
	padding-bottom: 30px !important;
	background: #fff !important; /* panel's theme bg is dark - the padding
	   strip exposed it under the white content layer */
}
#awb-oc-394900 .off-canvas-content {
	padding-bottom: 30px !important;
}

/* the always-on header keel tightened the space above the address title:
   restore breathing room */
.single-properties h1.entry-title.fusion-post-title {
	padding-top: 10px;
}