/* =========================================================
   London Baby 2026 - Trip Map Functional Restoration Pass
   Scope: Trip Map only.
   Fixes: map centering, filter order support, normal panel scrolling,
   and restored phone-call button color.
========================================================= */

/* Trip Map should scroll as one sheet. The map is normal content, not a frozen pane. */
html body .trip-map-panel {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

html body .trip-map-header,
html body .trip-map-legend,
html body #tripMap,
html body .trip-map-list {
  position: relative !important;
  flex: none !important;
  z-index: auto !important;
}

/* Keep the category filters readable and scrollable without clipping. */
html body .trip-map-legend {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 70px !important;
  padding: 12px 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scroll-padding-inline: 18px !important;
  border-bottom: 1px solid rgba(201,154,46,.24) !important;
  background: rgba(255,255,255,.58) !important;
}

html body .trip-map-legend-item {
  flex: 0 0 auto !important;
  max-width: none !important;
}

/* Center and contain the map inside the Trip Map sheet. */
html body #tripMap.trip-map,
html body .trip-map-panel > .trip-map {
  width: calc(100% - 36px) !important;
  max-width: calc(100% - 36px) !important;
  height: min(44dvh, 430px) !important;
  min-height: 330px !important;
  margin: 16px auto 0 !important;
  box-sizing: border-box !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
}

html body #tripMap .leaflet-container,
html body #tripMap .leaflet-pane,
html body #tripMap .leaflet-map-pane {
  max-width: 100% !important;
}

/* Details belong underneath the map and should scroll naturally with the sheet. */
html body .trip-map-list {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  padding: 16px 18px 28px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

html body .trip-map-location-card {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

/* Restore the distinctive, readable phone-call button treatment inside Trip Map. */
html body .trip-map-panel .action-call,
html body .trip-map-panel .call-button,
html body .trip-map-location-card .action-call,
html body .trip-map-location-card .call-button,
html body .trip-map-popup .action-call,
html body .trip-map-popup .call-button {
  background: linear-gradient(135deg, #06358a 0%, #0a4fb8 58%, #0f63d6 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,.70) !important;
  box-shadow: 0 12px 24px rgba(10,79,184,.22), inset 0 1px 0 rgba(255,255,255,.32) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html body .trip-map-panel .action-call .action-label,
html body .trip-map-panel .call-button .action-label,
html body .trip-map-panel .action-call .action-icon,
html body .trip-map-panel .call-button .action-icon {
  color: #ffffff !important;
  opacity: 1 !important;
}

@media (max-width: 720px) {
  html body .trip-map-panel {
    width: calc(100vw - 20px) !important;
    height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
  }

  html body .trip-map-header {
    min-height: 104px !important;
  }

  html body .trip-map-legend {
    min-height: 66px !important;
    padding: 10px 14px !important;
    scroll-padding-inline: 14px !important;
  }

  html body #tripMap.trip-map,
  html body .trip-map-panel > .trip-map {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    height: min(40dvh, 390px) !important;
    min-height: 310px !important;
    margin: 14px auto 0 !important;
    border-radius: 24px !important;
  }

  html body .trip-map-list {
    padding: 14px 14px 26px !important;
  }
}

/* Trip Map category order/active-state restoration - 2026-05-18
   Scope: Trip Map only. Removes old purple/neon selected styling and ensures
   the selected filter, not Show All, receives the active visual state. */
html body .trip-map-legend .trip-map-filter-button,
html body .trip-map-legend .trip-map-legend-item {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,250,255,.82)) !important;
  color: #07142a !important;
  border: 1.5px solid rgba(201,154,46,.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 8px 18px rgba(7,20,42,.06) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html body .trip-map-legend .trip-map-filter-button:first-child:not(.is-active),
html body .trip-map-legend .trip-map-legend-item:first-child:not(.is-active),
html body .trip-map-legend .trip-map-filter-button[aria-pressed="false"],
html body .trip-map-legend .trip-map-legend-item[aria-pressed="false"] {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,250,255,.82)) !important;
  color: #07142a !important;
  border-color: rgba(201,154,46,.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 8px 18px rgba(7,20,42,.06) !important;
}

html body .trip-map-legend .trip-map-filter-button.is-active,
html body .trip-map-legend .trip-map-filter-button[aria-pressed="true"],
html body .trip-map-legend .trip-map-legend-item.is-active,
html body .trip-map-legend .trip-map-legend-item[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,248,225,.90) 48%, rgba(233,188,75,.36)) !important;
  color: #07142a !important;
  border-color: rgba(201,154,46,.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 0 0 1px rgba(201,154,46,.16), 0 10px 24px rgba(201,154,46,.16) !important;
}

html body .trip-map-legend .show-all-filter:not(.is-active) .trip-map-legend-all-icon {
  opacity: .35 !important;
}

html body .trip-map-legend .show-all-filter.is-active .trip-map-legend-all-icon,
html body .trip-map-legend .show-all-filter[aria-pressed="true"] .trip-map-legend-all-icon {
  opacity: 1 !important;
}