/*
For the public side of the website
*/

td.ListingPhotosCell {
	width: auto;
}

/* Always display the stats under the photo on public side */
.VitalStatsBottom {
	display: block;
}
#DynamicContentFixed.mapplus{
    /* Firefox */
    height: -moz-calc(100% - 134px);
    /* WebKit */
    height: -webkit-calc(100% - 134px);
    /* Opera */
    height: -o-calc(100% - 134px);
    /* Standard */
    height: calc(100% - 134px)
}

.mapplus #DynamicContentFixed{
    height: 100% !important;
}

#PublicSearchContent.mapplus{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: var(--mls-public-map-top, var(--mls-public-search-offset, 98px));
	height: auto !important;
	max-height: calc(100dvh - var(--mls-public-map-top, var(--mls-public-search-offset, 98px)));
	width: 100%;
	overflow: hidden;
	z-index: 10;
}

html.mls-public-map-active,
html.mls-public-map-active body {
	overflow: hidden !important;
	overscroll-behavior: none;
	height: 100%;
	height: 100dvh;
}
html.mls-public-map-active #HeaderTop {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
}
/* Pin under the header in every view. Mobile/tablet styles.mobile.css uses
 * position:inherit on #SearchBarPublic, which stacks top:50px on top of
 * #BodyWrapper and leaves a blank band under the logo until map view forces
 * position:fixed — keep the bar fixed in list and map. */
div#SearchBarPublic {
	position: fixed !important;
	top: var(--mls-public-header-offset, 50px) !important;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 101;
}
html.mls-public-map-active #SearchBarPublic,
html.mls-public-map-active div#SearchBarPublic {
	overflow: visible !important;
}
/* List/thumbnail: the search bar is position:fixed at every width, so pad content below it.
 * Offset is viewport top→bar bottom; BodyWrapper already clears the fixed header,
 * so subtract header height to avoid a ~50px blank band under the toolbar. */
#PublicSearchContent:not(.mapplus) {
	padding-top: calc(var(--mls-public-search-offset, 98px) - var(--mls-public-header-offset, 50px) + 15px);
	box-sizing: border-box;
}
#PublicSearchContent.mapplus > div,
#PublicSearchContent.mapplus #HomeMainContent,
#PublicSearchContent.mapplus #DynamicContentFixed {
	height: 100% !important;
	min-height: 0;
	position: relative;
	overflow: hidden;
	padding-top: 0 !important;
	margin: 0 !important;
}
#PublicSearchContent.mapplus #MapResultsWrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: auto !important;
	min-height: 0 !important;
	min-width: 0 !important;
	overflow: hidden;
}
.mapplus #PageNavigationTop,
html:not(.mls-public-map-only) .mapplus #PageNavigationTop,
html:not(.mls-public-map-only) #PublicSearchContent.mapplus #PageNavigationTop {
	position: fixed;
	top: calc(var(--mls-public-search-offset, 98px) + 0px);
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* List/thumbnail: prod-like grey pagination bar + normal font */
#PublicSearchContent:not(.mapplus) #PageNavigationTop,
#PublicSearchContent.list #PageNavigationTop,
#PublicSearchContent.thumbnails #PageNavigationTop,
#PublicSearchContent:not(.mapplus) #PagedListingsTop,
#PublicSearchContent.list #PagedListingsTop,
#PublicSearchContent.thumbnails #PagedListingsTop {
	background: #eee !important;
	background-color: #eee !important;
	box-shadow: none;
	position: relative !important;
	top: auto !important;
	display: block !important;
	visibility: visible !important;
	pointer-events: auto !important;
	padding: 0 !important;
	min-height: 0 !important;
	height: auto !important;
}
#PublicSearchContent:not(.mapplus) #PageNavigationTop form[id^="PagedListings"],
#PublicSearchContent.list #PageNavigationTop form[id^="PagedListings"],
#PublicSearchContent.thumbnails #PageNavigationTop form[id^="PagedListings"] {
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
#PublicSearchContent:not(.mapplus) #PageNavigationTop .PageNavigation,
#PublicSearchContent.list #PageNavigationTop .PageNavigation,
#PublicSearchContent.thumbnails #PageNavigationTop .PageNavigation {
	display: block !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: #333 !important;
	margin: 0 !important;
	padding: 4px 8px !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	background: transparent !important;
}
#PublicSearchContent:not(.mapplus) #PageNavigationTop .PageNavigation,
#PublicSearchContent:not(.mapplus) #PageNavigationTop .PageNavigation span,
#PublicSearchContent:not(.mapplus) #PageNavigationTop .PageNavigation a,
#PublicSearchContent:not(.mapplus) #PageNavigationTop .PageNavigation i,
#PublicSearchContent:not(.mapplus) #PageNavigationTop .PageNavigation input,
#PublicSearchContent.list #PageNavigationTop .PageNavigation,
#PublicSearchContent.list #PageNavigationTop .PageNavigation span,
#PublicSearchContent.list #PageNavigationTop .PageNavigation a,
#PublicSearchContent.list #PageNavigationTop .PageNavigation i,
#PublicSearchContent.list #PageNavigationTop .PageNavigation input,
#PublicSearchContent.thumbnails #PageNavigationTop .PageNavigation,
#PublicSearchContent.thumbnails #PageNavigationTop .PageNavigation span,
#PublicSearchContent.thumbnails #PageNavigationTop .PageNavigation a,
#PublicSearchContent.thumbnails #PageNavigationTop .PageNavigation i,
#PublicSearchContent.thumbnails #PageNavigationTop .PageNavigation input {
	font-size: 16px !important;
	color: #333 !important;
}

/* Back to Original Results: strip above map, below search/filter dropdowns */
html.mls-public-map-active #MapplusPanel,
#MapplusPanel {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--mls-public-search-offset, 98px);
	z-index: 50 !important;
	background: #f5f5f5;
	padding: 0;
	box-sizing: border-box;
	border-bottom: 1px solid #ddd;
	pointer-events: auto;
	height: auto !important;
	min-height: 0;
	overflow: visible !important;
}
html.mls-public-map-active #MapplusPanel {
	display: block !important;
}
html:not(.mls-public-map-active) #MapplusPanel,
html:not(.mls-public-map-active) #BackToOrigResultsContainer {
	display: none !important;
}
html.mls-public-map-active #MapplusPanel #BackToOrigResultsContainer,
html.mls-public-map-active #BackToOrigResultsContainer,
#MapplusPanel #BackToOrigResultsContainer {
	position: static !important;
	display: inline-block !important;
	visibility: visible !important;
	margin: 4px 8px !important;
	margin-top: 4px !important;
	margin-left: 8px !important;
	z-index: 103 !important;
	color: #000;
	font-size: 12px;
	border: 1px solid #aaaaaa;
	background: #fff;
	pointer-events: auto !important;
}
.mapplus #SearchResults {
	padding-top: 0;
}

.mapplus #ListingsList {
	width: 755px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	overflow: auto;
	margin: 0 0 0 20px;
	z-index: 2;
}

.mapplus #LoadMapWrapper {
	position: absolute !important;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	width: -webkit-calc(100% - 755px);
	width: calc(100% - 755px);
	height: auto !important;
	padding-top: 0 !important;
	background: none !important;
	overflow: hidden;
}

.mapplus #MapCanvasSR {
	margin: 0;
	padding: 0;
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100% !important;
	height: 100% !important;
	min-height: 180px !important;
}
/* Only hide sibling toolbar items when More Filters is open in desktop layout */
@media (min-width: 1024px) and (max-width: 1422px) {
	html.mls-more-filters-open #SearchBarPublic .menu_list_item:not(.more_item):not(#LocationBox) {
		visibility: hidden;
		pointer-events: none;
	}
}
html.mls-more-filters-open #MoreFiltersWrapper {
	z-index: 5000;
	overflow-x: hidden;
	/* droplist2.css fixes the height (400/600px); keep it within the viewport below the fixed toolbar
	 * and scroll inside, since map mode locks body scrolling */
	max-height: calc(100vh - var(--mls-public-search-offset, 98px) - 8px) !important;
	max-height: calc(100dvh - var(--mls-public-search-offset, 98px) - 8px) !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
#MoreFiltersWrapper .more_baths_beds_item,
#MoreFiltersWrapper .more_order_by_item,
#MoreFiltersWrapper .more_sr_item,
#MoreFiltersWrapper .more_pt_item {
	float: none !important;
	clear: both;
	width: 100% !important;
	display: block;
	position: relative;
	z-index: 0;
}
#MoreFiltersWrapper dl,
#MoreFiltersWrapper .more_beds_item,
#MoreFiltersWrapper .more_baths_item {
	position: relative;
	z-index: 0;
}
#MoreFiltersWrapper .nice-select {
	position: relative;
	z-index: 1;
}
#MoreFiltersWrapper .nice-select.open,
#MoreFiltersWrapper dl:has(.nice-select.open),
#MoreFiltersWrapper dl.mls-dropdown-open,
#MoreFiltersWrapper .more_beds_item:has(.nice-select.open),
#MoreFiltersWrapper .more_baths_item:has(.nice-select.open),
#MoreFiltersWrapper .more_beds_item.mls-dropdown-open,
#MoreFiltersWrapper .more_baths_item.mls-dropdown-open,
#MoreFiltersWrapper .more_sr_item.mls-dropdown-open,
#MoreFiltersWrapper .more_order_by_item.mls-dropdown-open {
	z-index: 50;
}
#MoreFiltersWrapper .nice-select .list {
	z-index: 200 !important;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 240px;
}
.menu_view_type_item .nice-select .list,
.menu_mobile_view_type_item .nice-select .list {
	z-index: 200 !important;
	overflow: auto;
	max-height: 240px;
}

@media  (max-width: 1199px) {
    .mapplus #ListingsList {
        width: 400px;
    }
    .mapplus #LoadMapWrapper {
        width: -webkit-calc(100% - 400px);
        width: calc(100% - 400px);
    }
    div#DynamicContentFixed {
        min-width: 100%;
    }
}

@media  (max-width: 885px), (max-height: 500px) {
    #MapResultsWrapper {
        min-width: 0;
        overflow: hidden;
        position: relative;
    }
    div#DynamicContentFixed {
        min-width: 0;
    }
    #PublicSearchContent:not(.mapplus) div#ListingsList {
        width: 100% !important;
        height: 100%;
        top: 0;
        left: 0;
        margin: 0 !important;
        position: relative;
        overflow: auto;
    }
    .mapplus #ListingsList {
        display: none !important;
    }
    .mapplus #LoadMapWrapper,
    .mapplus #MapCanvasSR {
        display: block !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
}

@media (max-width: 765px) {
    .mapplus #MapCanvasSR,
    .mapplus #LoadMapWrapper {
        width: 100% !important;
    }
    .mapplus #ListingsList {
        display: none !important;
    }
}
@media (max-width: 770px) {
    div#DynamicContentFixed {
        min-width: unset;
    }
}
@media (max-width: 782px) {
    li.menu_list_single_item:not(.menu_mobile_save_search_item){
        float: right;
        padding-left: 0px;
    }
    li.menu_list_single_item.menu_mobile_save_search_item {
        float: none !important;
    }
}

@media  (max-width: 1422px) {
    li.menu_pt_item{
        display: none !important;
    }
    li.menu_order_by_item{
        display: none !important;
    }
    .more_pt_item{
        display: block !important;
    }
    .more_order_by_item{
        display: block !important;
    }


}

@media (max-width: 1167px) {
/*
   li.menu_baths_item,  .menu_pt_item {
        display: none !important;
    }
		*/
}

/* Mobile-only Map/List switcher (shown in media queries below) */
.menu_mobile_view_type_item {
	display: none !important;
}

/* Compact 2-row toolbar through tablet widths (search on row 1; More/Map/Save on row 2) */
@media (max-width: 1023px) {
	#SearchBarPublic,
	#cssplay_menuwrap,
	#cssplay_menu {
		overflow: visible !important;
	}
	#cssplay_menu {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-rows: auto auto;
		grid-template-areas:
			"location location location"
			"more view save";
		align-items: center;
		column-gap: 6px;
		row-gap: 0;
		width: 100%;
	}
	#cssplay_menu > li#LocationBox {
		grid-area: location;
		width: 100%;
		max-width: 100%;
	}
	/* Keep desktop toolbar items out of the mobile action row; the legacy view selector is hidden only when
	 * the theme has the mobile replacement (html.mls-has-mobile-view-selector rule) */
	#cssplay_menu > li.menu_list_item:not(#LocationBox):not(.more_item):not(.menu_mobile_view_type_item):not(.menu_view_type_item) {
		display: none !important;
	}
	html:not(.mls-has-mobile-view-selector) #cssplay_menu > li.menu_view_type_item {
		grid-area: view;
	}
	#cssplay_menu > li.more_item {
		grid-area: more;
		position: relative;
		overflow: visible !important;
		min-width: 0;
		z-index: 2;
	}
	#cssplay_menu > li.more_item > span#more_filter {
		display: block;
		position: relative;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 13px;
	}
	#cssplay_menu > li.more_item div.menu_main_div {
		transition: none !important;
	}
	#cssplay_menu input[id*="cssplay_div"]:checked ~ div.menu_main_div {
		transition: none !important;
	}
	html.mls-more-filters-open #cssplay_menu > li.more_item {
		z-index: 5001;
	}
	#cssplay_menu > li.menu_mobile_view_type_item {
		grid-area: view;
		display: inline-block !important;
		float: none !important;
		white-space: nowrap;
		z-index: 1;
	}
	#cssplay_menu > li.menu_mobile_view_type_item .nice-select {
		min-width: 60px;
		max-width: 88px;
		float: none;
	}
	#cssplay_menu > li.menu_list_single_item.menu_mobile_save_search_item {
		grid-area: save;
		display: inline-block !important;
		float: none !important;
		padding-left: 0;
		padding-right: 0;
		white-space: nowrap;
		z-index: 1;
		justify-self: end;
	}
	#cssplay_menu > li.menu_list_single_item.menu_mobile_save_search_item .single_item,
	#cssplay_menu > li.menu_list_single_item.menu_mobile_save_search_item #SavePublicSearchButton {
		display: inline-block !important;
		line-height: 40px;
		font-size: 12px;
		visibility: visible !important;
	}
}

@media (max-width: 1023px) {
    /* legacy selector stays when the theme has no mobile Map/List selector (class set by publicsearch.js) */
    html.mls-has-mobile-view-selector li.menu_view_type_item{
        display: none !important;
    }
    dl.more_view_type_item{
        display: none !important;
    }
    #LocationBox {
        width: 100% !important;
        max-width: none !important;
    }
    #MoreFiltersWrapper {
        left: 0;
    }
}
@media (max-width: 650px) {
    dl.more_view_type_item{
        display: none !important;
    }
}


.JoinAdImage {
	width: 100%;
	text-align: center;
	overflow: hidden;
	max-height: 300px;
	object-fit: cover;
}

.cycle-wizard {
	top: 0;
	position: relative;
	border: 1px solid #ccc;
	padding: 0px 2rem 2rem 2rem;
}

.cycle-wizard, .card.cycle-card, .card.cycle-card .card-header {
	background: #f0f0f0 !important;
}

#CycleForm {
	max-width:750px;
}

.cycle-select.selected {
	border: var(--turquoise-bg) solid 2px;
}

.ccbutton {
	background: #0056b3; 
	color: #fff; 
	font-weight:bold; 
	border-radius: 4px; 
	border:none; 
	min-height:45px; 
	max-height:55px; 
	height: 55px;
	width: 100%;
	min-width: 200px;
	max-width: 750px;
}

.ccbutton:hover {
	filter: brightness(0.95);
}

.ccbutton span {
	vertical-align: middle;
	height: 100%;
	text-align: left;
	width:auto; 
	font-size: 21px;
}

.ppbutton {
	margin-top:1rem;
}
@media (max-width: 1024px) and (min-height: 500px)  {
    #st-2  > div {
        clear: right !important;
        float: right !important;
    }
    #st-2 {
        display: inline-table !important;
        top: 160px !important;
        position: fixed !important;
    }
}@media (max-width: 1024px) and (max-height: 499px)  {
    #st-2  > div {
        clear: none !important;
        float: none !important;
    }
    #st-2 {
        display: block !important;
    }
}

/* Short landscape: do NOT inflate pagination form height (caused huge list gap).
 * Also keep pagination in document flow so listings sit directly under it
 * (fixed #PageNavigationTop + tall form was the gray empty band). */
@media (max-height: 500px), (max-width: 900px) {
    #PublicSearchContent:not(.mapplus) #PageNavigationTop {
        position: relative !important;
        top: auto !important;
    }
    #newPageNavigationTop,
    #PagedListingsTop {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* Map-only (same breakpoints as the side-list hide): grey bar + 16px, no JS class required */
@media (max-width: 885px), (max-height: 500px) {
	#PublicSearchContent.mapplus #PageNavigationTop,
	html.mls-public-map-only .mapplus #PageNavigationTop,
	html.mls-public-map-only #PublicSearchContent.mapplus #PageNavigationTop {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		z-index: 20 !important;
		background: #eee !important;
		background-color: #eee !important;
		box-shadow: none;
		border-bottom: 1px solid #ddd;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
		box-sizing: border-box;
		padding: 0 !important;
		font-size: 16px !important;
	}
	#PublicSearchContent.mapplus #PageNavigationTop form,
	#PublicSearchContent.mapplus #PageNavigationTop #PagedListingsTop,
	#PublicSearchContent.mapplus #PageNavigationTop .PageNavigation {
		background: #eee !important;
		background-color: #eee !important;
		font-size: 16px !important;
	}
	#PublicSearchContent.mapplus #PageNavigationTop .PageNavigation,
	html.mls-public-map-only .mapplus #PageNavigationTop .PageNavigation {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 4px 8px;
		visibility: visible !important;
		padding: 8px 10px !important;
		margin: 0 !important;
		font-size: 16px !important;
		line-height: 1.5 !important;
		color: #333 !important;
		font-weight: normal !important;
		text-transform: none !important;
		letter-spacing: normal !important;
		box-sizing: border-box;
		height: auto !important;
		min-height: 42px;
	}
	#PublicSearchContent.mapplus #PageNavigationTop .PageNavigation,
	#PublicSearchContent.mapplus #PageNavigationTop .PageNavigation span,
	#PublicSearchContent.mapplus #PageNavigationTop .PageNavigation a,
	#PublicSearchContent.mapplus #PageNavigationTop .PageNavigation i,
	#PublicSearchContent.mapplus #PageNavigationTop .PageNavigation input {
		font-size: 16px !important;
		color: #333 !important;
	}
	#PublicSearchContent.mapplus #PageNavigationTop .PageNavigation .font-weight-bold {
		font-weight: 700 !important;
		color: #333 !important;
	}
	#PublicSearchContent.mapplus #PageNavigationTop .PageNavigation .PageNavRange {
		white-space: nowrap;
		color: #333 !important;
		font-size: 16px !important;
		font-weight: normal !important;
	}
	#PublicSearchContent.mapplus #PageNavigationTop .PageNavigation .fa-arrow-left,
	#PublicSearchContent.mapplus #PageNavigationTop .PageNavigation .fa-arrow-right {
		padding: 10px !important;
		margin: 0 8px !important;
		font-size: 14px !important;
	}
	#PublicSearchContent.mapplus #PageNavigationTop .PageNavigation input[type="text"],
	#PublicSearchContent.mapplus #PageNavigationTop .PageNavigation input[name="page_num"] {
		padding: 7px 10px !important;
		margin: 0 8px !important;
		max-width: 3.2em;
		font-size: 16px !important;
		color: #333 !important;
		background: #fff !important;
	}
	#PublicSearchContent.mapplus #MapResultsWrapper {
		top: var(--mls-public-map-nav-height, 52px) !important;
	}
}

/* Map + cards (drag-resize / maximize): always hide top pagination even if JS class is stuck */
@media (min-width: 886px) and (min-height: 501px) {
	.mapplus #PageNavigationTop,
	#PublicSearchContent.mapplus #PageNavigationTop,
	html.mls-public-map-only .mapplus #PageNavigationTop,
	html.mls-public-map-only #PublicSearchContent.mapplus #PageNavigationTop,
	html.mls-public-map-desktop .mapplus #PageNavigationTop,
	html.mls-public-map-desktop #PublicSearchContent.mapplus #PageNavigationTop {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
		opacity: 0 !important;
	}
	#PublicSearchContent.mapplus #MapResultsWrapper {
		top: 0 !important;
	}
}







/* .mapProperty, .mapPopDetails, status icons → styles.mapbox-popup-content.css (map-head) */
/* No-results message over the map; only needed when the side list is hidden (map-only) */
#PublicMapNoResults {
	display: none;
}
html.mls-public-map-only #PublicMapNoResults {
	display: block;
	position: absolute;
	top: 12px;
	left: 16px;
	right: 16px;
	z-index: 5;
	padding: 10px 12px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	text-align: center;
}