/* --- Bootstrap-friendly layout helpers --- */
/* Give the parent a real height; map is absolute inside it */
.map-wrap {
  position: relative;
  height: 100vh;                 /* or any explicit height */
}

/* If your map div uses Bootstrap's position-absolute */
#map.position-absolute {
  inset: 0;                      /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
}

/* Leaflet container can also be absolute (ensure it fills) */
#map.leaflet-container.position-absolute {
  position: absolute !important;
}

/* Optional host div inside the map where swipe UI mounts */
.leaflet-swipe-host {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;          /* only the range captures input */
  z-index: 650;
}

/* --- Swipe UI --- */
.leaflet-swipe {
  position: absolute;            /* pin to host/map container */
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 650;                  /* below Leaflet controls (1000) */
}

/* Full-surface range input; transparent track; captures drag */
.leaflet-swipe-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  margin: 0;
  z-index: 651;                  /* above divider, below Leaflet controls */
}

/* Hide native track visuals */
.leaflet-swipe-range::-webkit-slider-runnable-track { background: transparent; }
.leaflet-swipe-range::-moz-range-track { background: transparent; }

/* Thumb (visual handle). Match JS options.thumbSize (default 42px). */
.leaflet-swipe-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.689);
  background: rgb(255, 255, 255);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.leaflet-swipe-range::-moz-range-thumb {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.25);
  background: rgba(255,255,255,0);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* Divider line that follows the split */
.leaflet-swipe-divider {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: rgb(255, 255, 255);
  pointer-events: none;
  z-index: 650;
}

/* If the map lives in Bootstrap modals/tabs/accordions, avoid odd clipping */
.modal-body #map,
.tab-pane #map,
.accordion-body #map {
  contain: layout paint style;
}