body, html {
	height: 100%;
	margin: 0;
	padding: 0;
}
#map {
	min-height: 400px;
	height: 100%;
	width: 100%;
}
.sidebar {
	border-right: 1px solid #ddd;
	height: 100%;
	overflow-y: auto;
}

@media (max-width: 767.98px) {
	.sidebar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		z-index: 1050;
		border-right: none;
		border-top: 1px solid #ddd;
		background: #fff;
		box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
		overflow-y: auto;
		transition: height 0.2s;
		touch-action: pan-y;
	}
   .sidebar-drag-handle {
	   position: absolute;
	   top: 0;
	   left: 0;
	   right: 0;
	   height: 24px;
	   z-index: 1100;
	   background: transparent;
	   cursor: ns-resize;
	   user-select: none;
   }
	#map-container {
		height: auto;
		max-height: 100vh;
	}
	.container-fluid > .row {
		height: 100vh;
	}
}

#map-container {
	height: 100%;
}

/* Slider label styling */
.slider-label {
	text-align: center;
	display: block;
	font-family: 'Lobster', cursive;
	color: #78221a;
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}

/* Custom slider styling with bal.png thumb */
.bal-slider {
	-webkit-appearance: none;
	appearance: none;
	height: 8px;
	background: #ddd;
	border-radius: 4px;
	outline: none;
}

/* Chrome, Safari, Edge */
.bal-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 30px;
	height: 30px;
	background-image: url('assets/bal.png');
	background-size: cover;
	background-color: transparent;
	cursor: pointer;
	border-radius: 50%;
	border: none;
}

/* Firefox */
.bal-slider::-moz-range-thumb {
	width: 30px;
	height: 30px;
	background-image: url('assets/bal.png');
	background-size: cover;
	background-color: transparent;
	cursor: pointer;
	border-radius: 50%;
	border: none;
}