/* Build 753: every OM place opens in one stable viewport position. */

@media (min-width: 0px) {
  html body main.app-shell section.map-stage.map-focus.our-map-mode.map-popup-surface-open .our-map-explorer-button,
  html body main.app-shell section.map-stage.map-focus.our-map-mode:has(.maplibregl-popup) .our-map-explorer-button {
    display: none !important;
  }

  html:not(#our-map-popup-v753-a):not(#our-map-popup-v753-b):not(#our-map-popup-v753-c) body main.app-shell section.map-stage.map-focus.map-popup-surface-open #locationBanner.location-banner:not([hidden]),
  html:not(#our-map-popup-v753-a):not(#our-map-popup-v753-b):not(#our-map-popup-v753-c) body main.app-shell section.map-stage.map-focus:has(.maplibregl-popup) #locationBanner.location-banner:not([hidden]),
  html:not(#our-map-popup-v753-a):not(#our-map-popup-v753-b):not(#our-map-popup-v753-c) body main.app-shell section.map-stage.map-focus.map-popup-surface-open #youAreHereMessage.you-are-here-message,
  html:not(#our-map-popup-v753-a):not(#our-map-popup-v753-b):not(#our-map-popup-v753-c) body main.app-shell section.map-stage.map-focus:has(.maplibregl-popup) #youAreHereMessage.you-are-here-message {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body main.app-shell section.map-stage.map-focus.our-map-mode .maplibregl-popup.mymappi-our-map-popup-shell {
    position: fixed !important;
    z-index: 738 !important;
    top: auto !important;
    right: auto !important;
    bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom, 0px) + 16px) !important;
    left: 50% !important;
    box-sizing: border-box !important;
    width: calc(100vw - 24px) !important;
    max-width: 480px !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    animation: ourMapPlaceSheetArrive 190ms ease-out both !important;
  }

  html body main.app-shell section.map-stage.map-focus.our-map-mode .mymappi-our-map-popup-shell .maplibregl-popup-content-wrapper,
  html body main.app-shell section.map-stage.map-focus.our-map-mode .mymappi-our-map-popup-shell .maplibregl-popup-content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 21px !important;
  }

  html body main.app-shell section.map-stage.map-focus.our-map-mode .mymappi-our-map-popup-shell .maplibregl-popup-content {
    max-height: min(62dvh, 520px) !important;
    padding: 17px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }

  html body main.app-shell section.map-stage.map-focus.our-map-mode .mymappi-our-map-popup-shell .our-map-popup {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  html body main.app-shell section.map-stage.map-focus.our-map-mode .mymappi-our-map-popup-shell .maplibregl-popup-tip {
    display: none !important;
  }

  html body main.app-shell section.map-stage.map-focus.our-map-mode .mymappi-our-map-popup-shell .maplibregl-popup-close-button {
    width: 44px !important;
    height: 44px !important;
    margin: 7px !important;
    font-size: 1.15rem !important;
  }

  html body main.app-shell section.map-stage.map-focus.our-map-mode:has(.mymappi-our-map-popup-shell) .our-map-discovery-bar:not([hidden]) {
    display: none !important;
  }
}

@keyframes ourMapPlaceSheetArrive {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html body main.app-shell section.map-stage.map-focus.our-map-mode .maplibregl-popup.mymappi-our-map-popup-shell {
    animation: none !important;
  }
}