/**********************************************************************/
/****************************** Mini map *******************************/
/**********************************************************************/

#mini-map {
  position: absolute;
  isolation: isolate;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  width: 220px;
  height: 170px;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(10, 18, 34, 0.58);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  /* opacity: 0.62; */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  cursor: grab;
  transition:
    width 0.22s,
    height 0.22s,
    opacity 0.22s,
    background 0.2s;
}

body.map-ready #mini-map {
  opacity: 0.82;
  pointer-events: auto;
}

#mini-map:hover {
  opacity: 1;
  background: rgba(8,12,16,0.58);
}

#mini-map .leaflet-container {
  width: 100%;
  height: 100%;
  background: transparent;
}

#mini-map .leaflet-control-container {
  display: none;
}

#mini-map .leaflet-image-layer {
  opacity: 0.9;
}


/* .mini-map-marker {
  background: transparent;
  border: none;
}

.mini-map-marker span {
  display: block;

  width: 8px;
  height: 8px;

  border-radius: 999px;

  background: rgba(217, 184, 95, 0.55);

  box-shadow:
    0 0 0 4px rgba(217, 184, 95, 0.08),
    0 0 12px rgba(217, 184, 95, 0.28);
}

.mini-map-marker.is-current span {
  width: 11px;
  height: 11px;

  background: #d9b85f;

  box-shadow:
    0 0 0 6px rgba(217, 184, 95, 0.16),
    0 0 18px rgba(217, 184, 95, 0.55);
} */

.leaflet-tooltip {
  background: rgba(8, 12, 16, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: white;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
}

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

#mini-map:active {
  cursor: grabbing;
}

#mini-map-expand {
  position: absolute;
  top: 10px;
  right: 10px;

  z-index: 99999;
  pointer-events: auto;

  width: 28px;
  height: 28px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);

  background: rgba(8,12,16,0.42);
  color: rgba(255,255,255,0.72);

  font-size: 13px;
  cursor: pointer;

  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#mini-map-expand:hover {
  background: rgba(255,255,255,0.08);
  color: white;
  border-color: rgba(217,184,95,0.35);
}

#mini-map-expand svg {
  width: 14px;
  height: 14px;
  display: block;
}

#mini-map.is-expanded {
  width: min(700px, 50vw);
  height: min(500px, 50vh);
}

body:has(#elevation-panel.is-open) #mini-map,
body:has(#elevation-panel.is-open) #mini-map.is-expanded {
  width: 170px;
  height: 128px;
  bottom: calc(var(--elevation-panel-height, 260px) + 40px);
  opacity: 0.58;
}

#mini-map .leaflet-pane,
#mini-map .leaflet-control-container {
  transition: opacity 0.12s ease;
}

#mini-map.is-resizing .leaflet-pane,
#mini-map.is-resizing .leaflet-control-container {
  opacity: 0;
}

.mountain-marker span {
  width: 9px;
  height: 9px;
}

.mountain-marker.is-current span {
  background: #ff2b2b;

  box-shadow:
    0 0 0 10px rgba(255,43,43,0.18),
    0 0 30px rgba(255,43,43,0.82),
    0 0 64px rgba(255,43,43,0.45);

  transform: scale(1.28);
}