/* 29 January 2026 11:56 am */
@media(min-width: 1024px){
	.hide-desktop{
		display: none !important;
	}
}
@media(min-width: 810px){
	.hide-tablet{
		display: none !important;
	}
}
.button-style{
	display: inline-block;
	padding: 8px 20px;
	background-color: #9189c2;
	color: #fff;
	border-radius: 5px;
	text-transform: uppercase;
}
#mapFilterToggle{
	padding: 12px;
	width: fit-content;
	position: relative;
 	z-index: 99;
	background-color: #0E1C49;
	color: white;
	cursor: pointer;
	&::after{
		content: 'Filters';
	}
	&.active::after{
		content: 'Close Filters';
	}
}
#map-wrap{
	.inner{
		position: relative;
		min-height: 80vh;
	}
}
.map {
	position: absolute;
	inset: 0;
}
.sidebar {
	position: absolute;
	z-index: 2;
	width: 425px;
	height: 600px;
	top: 50px;
	left: 50px;
	overflow: auto;
	background-color: #0E1C49;
	padding: 50px;
	border-top-left-radius: 32px;
	border-bottom-right-radius: 32px;

	.filter-group{
		min-height:0;
		color: white;
		margin-bottom: 20px;
		.toggler{
			cursor: pointer;
			&::after{
				content: "\f345";
				font-family: 'dashicons';
				display: inline-block;
				vertical-align: bottom;
				padding-left: 10px;
			}
			&.active::after{
				content: "\f347";
			}
		}
		.filter-label{
			font-size: var(--h4fontsize);
			margin-bottom: 10px;
		}
		.filter-choices{
			display: none;
			.checkbox-control{
				cursor: pointer;
				text-decoration: underline;
				font-size: 14px;
				margin-right: 10px;
			}
		}
	}
	.filter-group.filter-listings{
		.listings {
			overflow: auto;
			max-height: 100%;
			border: solid 1px rgba(255, 255, 255, 0.3);
			.item {
				border-bottom: solid 1px rgba(255, 255, 255, 0.2);
				padding: 10px;
				text-decoration: none;
				&:last-child {
					border-bottom: none;
				}
				&.active {
					background-color: #50BBD6;
				}
				&:hover {
					background-color: #84c0cf;
				}
				.title {
					display: block;
					color: white;
					small {
						font-weight: 400;
					}
				}
			}
		}
	}
	.filter-group #searchBox{
		input.mapboxgl-ctrl-geocoder--input{
			background-color: #0E1C49;
			border: solid 1px white;
			color: white;
		}
	}
}
/* Markers */
	.marker {
		border: none;
		cursor: pointer;
		height: 15px;
		width: 15px;
		background-image: url('marker.png');
		background-size: contain;
	}

/* Marker Popups */
	.mapboxgl-popup{
		position: relative;
		font-size: 15px;

		.mapboxgl-popup-close-button {
			width: 36px;
			height: 36px;
			font-size: 24px;
			padding: 8px;
			border-radius: 50%;
			background-color: black;
			color:white;
			aspect-ratio: 1;
			display: grid;
			place-content: center;
			cursor: pointer;
			z-index: 99999;
			top: -10px;
			right: -10px;
			&:hover{
				background-color: gray;
			}
		}
		.mapboxgl-popup-content {
			padding: 20px;
			width: 350px;
			box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
			border-radius: 4px;
		}
		.title{
			font-weight: bold;
			font-size: 18px;
		}
		.header{
			display: flex;
			gap: 10px;
			justify-content: space-between;
			align-items: start;
			.logo{
				max-width: 90px;
				img{
					object-fit: contain;
				}
			}
			.logo:empty{
				width: 65px;
				height: 65px;
				background-color: rgba(0, 0, 0, 0.1);
			}
		}
		.footer{
			display: flex;
			gap: 10px;
			justify-content: space-between;
			margin-top: 20px;
			align-items: end;
			padding: 0;
			background-color: transparent;

		}
		.web,.phone{
			display: flex;
			flex-direction: column;
			text-align: center;
			&::before{
				font-family: 'dashicons';
				display: block;
				margin-bottom: 5px;
				color: #1d2b57;
				font-size: 20px;
			}
			a{
				text-decoration: underline;
			}
		}
		.web::before{content: "\f103";}
		.phone::before{content: "\f525";}

		a.post-link{
			font-size: 14px;
			font-weight: 500;
			background: #54c3bd;
			color: #1d2b57;
			text-transform: uppercase;
			padding: 8px 16px;
			border-radius: 4px;
			&:hover{
				color: white;
			}
		}
		.mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
			margin-top: 15px;
		}
		.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
			border-bottom-color: #91c949;
		}
	}

/* ## RESPONSIVE
================================= */
@media(min-width: 811px){
	.sidebar #mobile-close-filters{
		display: none;
	}
}
@media(max-width: 810px){
	body:has(#mapFilterToggle.active){
		overflow-y: clip;
	}
	.sidebar{
		position: fixed;
		height: 90vh;
		padding-bottom: 16vh; /* allow for iphone address bar */
		width: auto;
		border-top-left-radius: 0;
		border-bottom-right-radius: 0;
		display: none;
		top: 75px;
		bottom: 50px;
		left: 5px;
		right: 5px;
		z-index: 99;
		#mobile-close-filters{
			position: fixed;
			right: 7px;
			top: 76px;
			background-color: #9189c2;
			color: #0e1c49;
			padding: 10px;
			font-size: 30px;
			cursor: pointer;
		}
		.filter-group.filter-listings #listings{
			overflow-y: scroll;
			max-height: 350px;
			border-bottom: 6px solid #9189c2;
		}
	}
}