/* V39 — tarif berdasarkan jarak + picker peta yang jelas & bisa digeser */
.location-picker.map-mode{
  background:#e9e7eb!important;
}
.location-picker.map-mode .maxim-picker-top{
  top:calc(8px + env(safe-area-inset-top))!important;
  left:10px!important;right:10px!important;
  min-height:62px!important;height:62px!important;
  padding:4px 7px!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  gap:6px!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 8px 24px rgba(30,17,42,.16)!important;
  backdrop-filter:blur(12px)!important;
}
.location-picker.map-mode .picker-back{
  width:46px!important;height:46px!important;
  font-size:38px!important;
}
.location-picker.map-mode .picker-search-wrap{
  border:1px solid #ebe5ef!important;
  border-radius:17px!important;
  box-shadow:none!important;
  background:#faf8fb!important;
}
.location-picker.map-mode .maxim-search-line{
  grid-template-columns:minmax(0,1fr) 42px!important;
}
.location-picker.map-mode #pickerSearch{
  height:46px!important;
  font-size:15px!important;
  border-radius:17px 0 0 17px!important;
  padding-left:14px!important;
}
.location-picker.map-mode .picker-clear{
  width:42px!important;height:46px!important;font-size:27px!important;
}
.location-picker.map-mode #pickerMap{
  top:0!important;bottom:0!important;left:0!important;right:0!important;
  visibility:visible!important;pointer-events:auto!important;
}
.location-picker.map-mode #pickerMap .leaflet-control-zoom{
  margin-top:calc(88px + env(safe-area-inset-top))!important;
  margin-left:10px!important;
}
.location-picker.map-mode #pickerMap .leaflet-control-attribution{
  bottom:176px!important;
}
.location-picker.map-mode .picker-center-pin{display:none!important}
.location-picker.map-mode::after{
  content:"Geser peta atau tarik pin ungu untuk menentukan titik";
  position:absolute;
  z-index:3040;
  top:calc(82px + env(safe-area-inset-top));
  left:50%;transform:translateX(-50%);
  max-width:calc(100% - 36px);
  padding:7px 11px;border-radius:999px;
  background:rgba(38,25,48,.82);
  color:#fff;font-size:11px;font-weight:750;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
  box-shadow:0 5px 15px rgba(0,0,0,.14);
}
.v39-drag-pin{
  position:relative;width:54px;height:66px;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 7px 8px rgba(47,18,72,.28));
  cursor:grab;
}
.v39-drag-pin:active{cursor:grabbing}
.v39-drag-pin span{
  position:absolute;top:4px;left:9px;
  width:36px;height:36px;
  border-radius:50% 50% 50% 7px;
  transform:rotate(-45deg);
  background:linear-gradient(135deg,#5b21b6,#7c3aed 62%,#a855f7);
  border:4px solid #fff;
}
.v39-drag-pin span::after{
  content:"";position:absolute;left:9px;top:9px;width:10px;height:10px;
  border-radius:50%;background:#fff;
}
.v39-drag-pin b{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  padding:2px 6px;border-radius:999px;
  background:#fff;color:#5b21b6;
  font-size:8px;font-weight:900;white-space:nowrap;
  box-shadow:0 3px 8px rgba(0,0,0,.14);
}
.location-picker.map-mode .picker-sheet{
  left:8px!important;right:8px!important;bottom:8px!important;
  border-radius:23px!important;
  padding:9px 12px calc(10px + env(safe-area-inset-bottom))!important;
  box-shadow:0 -4px 28px rgba(36,18,48,.18)!important;
  background:rgba(255,255,255,.98)!important;
}
.location-picker.map-mode .picker-handle{
  width:45px!important;height:4px!important;margin-bottom:8px!important;
}
.location-picker.map-mode .picker-picked{
  grid-template-columns:36px minmax(0,1fr)!important;gap:8px!important;
}
.location-picker.map-mode .picker-picked>span{
  width:34px!important;height:34px!important;font-size:16px!important;
}
.location-picker.map-mode .picker-picked small{font-size:8px!important}
.location-picker.map-mode .picker-picked b{
  font-size:12px!important;line-height:1.25!important;
  max-height:32px!important;overflow:hidden!important;
}
.location-picker.map-mode .picker-coord{
  margin:7px 0 4px!important;padding:6px 8px!important;
  font-size:8px!important;
}
.location-picker.map-mode .picker-accuracy{
  margin:0 0 7px!important;font-size:9px!important;color:#6f6477!important;
}
.location-picker.map-mode .picker-use{
  min-height:48px!important;height:48px!important;border-radius:14px!important;
  font-size:14px!important;
}

/* Search stays separate: selecting a result returns to map for visual confirmation */
.location-picker.search-mode .picker-search-results{
  top:calc(208px + env(safe-area-inset-top))!important;
}
.location-picker.search-mode .picker-search-status{
  top:calc(208px + env(safe-area-inset-top))!important;
}

/* Fare must never look valid when both points are the same */
.fare-checkout b:empty::after{content:"—"}

@media(max-width:420px){
  .location-picker.map-mode::after{font-size:10px;top:calc(78px + env(safe-area-inset-top))}
  .location-picker.map-mode .picker-sheet{left:6px!important;right:6px!important;bottom:6px!important}
}