/* Trip Map marker popup fit fix, scoped only to Trip Map.
   Keeps marker popups usable on iPhone by sizing the popup inside the map and making the popup content scroll internally when needed. */
html body .trip-map .leaflet-popup.trip-map-mobile-safe-popup {
  max-width: min(88vw, 300px) !important;
}

html body .trip-map .leaflet-popup.trip-map-mobile-safe-popup .leaflet-popup-content-wrapper {
  max-width: min(88vw, 300px) !important;
  max-height: min(54vh, 310px) !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

html body .trip-map .leaflet-popup.trip-map-mobile-safe-popup .leaflet-popup-content {
  width: auto !important;
  max-width: min(76vw, 268px) !important;
  max-height: min(46vh, 252px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  margin: 12px !important;
}

html body .trip-map .leaflet-popup.trip-map-mobile-safe-popup .trip-map-popup {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html body .trip-map .leaflet-popup.trip-map-mobile-safe-popup .trip-map-popup-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
}

html body .trip-map .leaflet-popup.trip-map-mobile-safe-popup .trip-map-popup-actions .action-link {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 10px 12px !important;
  justify-content: space-between !important;
  font-size: 15px !important;
  white-space: normal !important;
}

html body .trip-map .leaflet-popup.trip-map-mobile-safe-popup .trip-map-popup-actions .action-label {
  min-width: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

@media (max-width: 520px) {
  html body .trip-map .leaflet-popup.trip-map-mobile-safe-popup .leaflet-popup-content-wrapper {
    max-height: min(50vh, 285px) !important;
  }

  html body .trip-map .leaflet-popup.trip-map-mobile-safe-popup .leaflet-popup-content {
    max-width: min(74vw, 254px) !important;
    max-height: min(42vh, 230px) !important;
  }
}