html,body{
margin:0;
padding:0;
font-family:system-ui;
}

#map{
height:100vh;
}

/* PANEL */

#panel{

position:fixed;

bottom:0;
left:0;
right:0;

background:white;

padding:16px;

border-radius:20px 20px 0 0;

box-shadow:0 -4px 20px rgba(0,0,0,0.25);

max-height:65vh;

overflow:auto;

z-index:1000;

}

/* HANDLE */

#panel-handle{

width:40px;
height:5px;

background:#ccc;

margin:auto;

border-radius:10px;

margin-bottom:12px;

}

/* INPUT */

#search{
width:80%;
padding:10px;
font-size:16px;
border-radius:8px;
border:1px solid #ccc;
margin-bottom:10px;

}

/* BUTTON */

#locate{

width:100%;

padding:10px;

border:none;

border-radius:8px;

background:#2e86de;

color:white;

font-size:15px;

margin-bottom:10px;

}

/* TOTAL */

#total{
font-weight:bold;
margin-bottom:10px;
}

/* FILTERS */

#filters{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:10px;
}

.chip{

background:#eee;

padding:6px 10px;

border-radius:20px;

font-size:13px;

cursor:pointer;

}

.chip.active{
background:#2e86de;
color:white;
}

/* STATS */

#stats{
font-size:13px;
line-height:1.5;
}

/* LABELS */

.map-label{

background:rgba(0,0,0,0.75);
color:white;

padding:3px 8px;

border-radius:6px;

font-size:11px;

border:none;

}

.leaflet-tooltip-top:before{
display:none;
}

/* DESKTOP */

@media(min-width:900px){

#panel{
	top:10px;
	bottom:auto;
	width:340px;
	left:10px;
	border-radius:12px;
	max-height:90vh;
	overflow:auto;
	font-size:15px;
}

#panel-handle{
	display:none;
}

}

/* cluster */
.cluster-wrapper{
  background:none;
}

.cluster-icon{

  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;

  width:50px;
  height:50px;

  border-radius:50%;

  background:#2e86de;
  color:white;

  font-weight:bold;

  box-shadow:0 3px 10px rgba(0,0,0,0.3);
}

.cluster-icon span{
  font-size:13px;
}

.cluster-icon.small{
  background:#2e86de;
}

.cluster-icon.medium{
  background:#e67e22;
}

.cluster-icon.large{
  background:#e74c3c;
}