.custom-marker {
  position: relative;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.custom-marker::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 9999px;
  background: rgba(59, 130, 246, 0.18);
  animation: marker-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

.custom-marker::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: white;
  border: 2px solid rgba(37, 99, 235, 0.9);
  box-shadow:
    0 6px 20px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.08) inset;
  transition: transform 140ms ease-out;
}

.custom-marker:hover::after {
  transform: scale(1.12);
}

@keyframes marker-pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { opacity: 0; }
}

.marker-tooltip {
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);

  padding: 4px 8px;
  font-size: 11px;
  color: white;

  background: rgba(17,24,39,0.95);
  border-radius: 6px;

  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;

  opacity: 0;                /* 👈 hidden by default */
  pointer-events: none;

  transition: all 120ms ease;
}

.custom-marker:hover .marker-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 480ms; /* 👈 delay only when appearing */
}





#layer-panel input:checked + div .dot {
  transform: translateX(16px);
}

/* Default: clean crosshair */
.maplibregl-canvas {
  cursor: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">\
<circle cx="16" cy="16" r="1" fill="black"/>\
<line x1="16" y1="6" x2="16" y2="26" stroke="black" stroke-width="1" opacity="0.5"/>\
<line x1="6" y1="16" x2="26" y2="16" stroke="black" stroke-width="1" opacity="0.5"/>\
</svg>') 16 16, crosshair;
}

/* Hover (subtle upgrade) */
.maplibregl-canvas:hover {
  cursor: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">\
<circle cx="16" cy="16" r="1.3" fill="black"/>\
<line x1="16" y1="4" x2="16" y2="28" stroke="black" stroke-width="1" opacity="0.7"/>\
<line x1="4" y1="16" x2="28" y2="16" stroke="black" stroke-width="1" opacity="0.7"/>\
</svg>') 16 16, crosshair;
}

/* Dragging (the key bit) */
.maplibregl-canvas.pan-mode {
  cursor: grab !important;
}
.maplibregl-canvas.pan-mode.dragging {
  cursor: grabbing !important;
}

#info-panel {
  position: fixed;
  top: 64px;
  left: 8px;

  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;

  z-index: 1000;
}


.panel-title {
  font-weight: bold;
  margin-bottom: 6px;
}



#info-panel {
  position: fixed;
  top: 64px;
  left: 8px;
  z-index: 1000;
}

/* 👇 MOBILE MODE */
@media (max-width: 640px) {
  #info-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    max-height: 90vh;

    display: flex;
    justify-content: center;

    pointer-events: none; /* allow map interaction outside */
  }

  #info-panel > * {
    pointer-events: auto;

    width: 100%;
    border-radius: 16px 16px 0 0;

    transform: translateY(300px);
    transition: transform 0.25s ease;
  }

  #info-panel.open > * {
    transform: translateY(0px);
  }
}


.drag-handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 999px;
  margin: 8px auto 4px auto; /* 👈 centers it */
}

/* 👇 hide on desktop */
@media (min-width: 641px) {
  .drag-handle {
    display: none;
  }
}

body { 
  margin: 0;
  background-color: #9aa7bb;
  overscroll-behavior: none;
}
#map { width: 100%; height: 100%; }

@media (max-width: 640px) {
  .drag-zone {
    overscroll-behavior: none;
    cursor: grab;
  }
}



/* new jazz  */

.maplibregl-ctrl-bottom-right {
  right: 0;
  transition: right 0.3s ease;
}

.panel-open .maplibregl-ctrl-bottom-right {
  right: 20rem;
}