/* FIT100 public Live Tracking — isolated scroll surface for iPhone/Safari/WhatsApp. */
html:has(main[data-live-public="true"]),
body:has(main[data-live-public="true"]) {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background: #ffffff !important;
}

body:has(main[data-live-public="true"]) #root {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

body:has(main[data-live-public="true"])::before,
body:has(main[data-live-public="true"])::after {
  display: none !important;
}

main[data-live-public="true"] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: block !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  overflow-anchor: none !important;
  touch-action: pan-y !important;
  background: #ffffff !important;
  color: #06162a !important;
  isolation: isolate !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

main[data-live-public="true"] > * {
  max-width: 100% !important;
}

main[data-live-public="true"] [data-live-map],
main[data-live-public="true"] [data-live-map] .maplibregl-map,
main[data-live-public="true"] [data-live-map] .maplibregl-canvas-container,
main[data-live-public="true"] [data-live-map] .maplibregl-canvas {
  background: #ffffff !important;
}

/* Match the public live map colors to the in-app running map exactly. */
main[data-live-public="true"] [data-live-map] .maplibregl-canvas {
  filter: none !important;
  -webkit-filter: none !important;
}

main[data-live-public="true"] [data-live-map] {
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}

main[data-live-public="true"] [data-live-map] .maplibregl-canvas-container,
main[data-live-public="true"] [data-live-map] .maplibregl-canvas {
  pointer-events: none !important;
  touch-action: pan-y !important;
}

@supports (-webkit-touch-callout: none) {
  main[data-live-public="true"] {
    height: -webkit-fill-available !important;
    min-height: -webkit-fill-available !important;
  }
}