#hm-filter-panel {
  margin-bottom: 1em;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: center;
  font-size: 1em;
}
#hm-filter-panel label {
  font-weight: normal;
}

#hm-map-container {
	height: 75vh; 
	position: relative;
}
#hm-controls {
  position: absolute;
  top: 10px; left: 50px; z-index: 10;
  background: rgba(255,255,255,0.97);
  border-radius: 4px; padding: 10px 14px;
  font-size: 15px; box-shadow: 0 1px 4px #0002;
}

#hm-map { width: 100%; height: 100%; margin: 0; padding: 0; }
/*
.ol-popup {
  background: white; padding: 4px 6px; border: 1px solid #888;
  font-size: 12px; position: absolute; bottom: 12px; left: 12px; display: none;
}
*/

/* Make sure we sit above OL overlays and are clickable */
#hm-route-key {
  position: absolute;
  right: 24px;
  bottom: 50px;
  z-index: 3000;          /* higher than .ol-overlaycontainer-stopevent (~200) */
  pointer-events: none;    /* let map drag happen... */
}
/* ...but allow clicks on children */
#hm-route-key > * { pointer-events: auto; }
/* Popover box (old chrome moved here) */
.hm-key-popover {
  background: rgba(255,255,255,0.96);
  box-shadow: 0 1px 8px rgba(0,0,0,0.15);
  padding: 12px 18px 12px 16px;
  border-radius: 8px;
  font-size: 12px;
  min-width: 200px;
  max-width: 280px;
}

/* Small circular icon */
.hm-key-toggle {
  width: 44px; height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.hm-key-toggle:hover { box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.hm-key-toggle:active { transform: scale(0.98); }
.hm-key-toggle svg { width: 22px; height: 22px; display:block; }

/* Optional header inside popover */
.hm-key-popover-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:8px; }
.hm-key-title { font-weight:600; font-size:14px; }
.hm-key-close { border:none; background:transparent; cursor:pointer; padding:4px; border-radius:8px; }
.hm-key-close:hover { background: rgba(0,0,0,.06); }

/* Keep the existing list/rows/line styles */
.hm-key-popover ul { list-style:none; margin:0; padding:0; line-height:18px; }
.hm-key-row { display:flex; align-items:center; gap:10px; margin-bottom:0; }
.hm-key-line { display:inline-block; width:36px; height:0; border-top-width:4px; border-top-style:solid; margin-right:6px; vertical-align:middle; }



#hm-route-key ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 18px;
}

.hm-key-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0px;
}

.hm-key-line {
  display: inline-block;
  width: 36px;
  height: 0;
  border-top-width: 4px;
  border-top-style: solid;
  margin-right: 6px;
  vertical-align: middle;
}

#popup {
  position: absolute;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #1565c026;
  box-shadow: 0 2px 16px rgba(0,0,0,0.17);
  padding: 14px 16px 10px 16px;
  min-width: 320px;
  max-width: 420px;
  z-index: 4000;
  pointer-events: auto;
  font-size: 1rem;
}

.hm-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hm-toast.show {
  opacity: 1;
}

#hm-filter-clear {
  margin-left: 10px;
}