:root {
  --lm-modal-gutter: clamp(12px, 3vw, 28px);
  --lm-modal-safe-top: max(var(--lm-modal-gutter), env(safe-area-inset-top));
  --lm-modal-safe-right: max(var(--lm-modal-gutter), env(safe-area-inset-right));
  --lm-modal-safe-bottom: max(var(--lm-modal-gutter), env(safe-area-inset-bottom));
  --lm-modal-safe-left: max(var(--lm-modal-gutter), env(safe-area-inset-left));
  --lm-modal-backdrop: rgba(18, 41, 58, 0.48);
  --lm-modal-radius: clamp(18px, 4vw, 26px);
}

/* The POI preview is a true viewport-centred modal on every template. */
#poi-panel.poi-panel {
  position: fixed !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: var(--lm-modal-safe-top) var(--lm-modal-safe-right) var(--lm-modal-safe-bottom) var(--lm-modal-safe-left) !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  animation: none !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: var(--lm-modal-backdrop) !important;
  box-shadow: none !important;
  z-index: 50000 !important;
}

#poi-panel.poi-panel.lm-modal-open {
  display: flex !important;
}

#poi-panel .poi-content {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(520px, 100%) !important;
  max-width: 100% !important;
  max-height: calc(100vh - var(--lm-modal-safe-top) - var(--lm-modal-safe-bottom)) !important;
  max-height: calc(100dvh - var(--lm-modal-safe-top) - var(--lm-modal-safe-bottom)) !important;
  margin: 0 !important;
  padding: clamp(64px, 8vw, 76px) clamp(18px, 5vw, 28px) clamp(20px, 5vw, 30px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff !important;
  border-radius: var(--lm-modal-radius) !important;
  box-shadow: 0 24px 70px rgba(18, 41, 58, 0.28) !important;
}

#poi-panel #close-panel,
.contact-modal__close,
.lost-boost-modal__close,
.lost-contact-modal__close,
.modal .btn-close {
  box-sizing: border-box !important;
  min-width: 48px !important;
  min-height: 48px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  touch-action: manipulation;
  cursor: pointer !important;
  z-index: 4 !important;
}

#poi-panel #close-panel {
  top: clamp(10px, 3vw, 16px) !important;
  right: clamp(10px, 3vw, 16px) !important;
  width: 48px !important;
  height: 48px !important;
  opacity: 1 !important;
  border: 4px solid #d8e9f7 !important;
  border-radius: 50% !important;
  background-color: #159bd7 !important;
  background-size: 18px 18px !important;
  box-shadow: 0 8px 20px rgba(21, 155, 215, 0.25) !important;
}

#poi-panel #close-panel:focus-visible,
.contact-modal__close:focus-visible,
.lost-boost-modal__close:focus-visible,
.lost-contact-modal__close:focus-visible,
.maps-action-sheet-cancel:focus-visible {
  outline: 3px solid #ff745f !important;
  outline-offset: 3px !important;
}

/* Commercial, contact and lost-pet dialogs share the same safe viewport frame. */
.contact-modal.is-open,
.lost-boost-modal.is-open,
.lost-contact-modal.is-open,
.modal.show {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  padding: var(--lm-modal-safe-top) var(--lm-modal-safe-right) var(--lm-modal-safe-bottom) var(--lm-modal-safe-left) !important;
  overflow: hidden !important;
}

.contact-modal__dialog,
.lost-boost-modal__dialog,
.lost-contact-modal__dialog,
.modal.show .modal-dialog {
  box-sizing: border-box !important;
  width: min(560px, 100%) !important;
  max-width: 100% !important;
  max-height: calc(100vh - var(--lm-modal-safe-top) - var(--lm-modal-safe-bottom)) !important;
  max-height: calc(100dvh - var(--lm-modal-safe-top) - var(--lm-modal-safe-bottom)) !important;
  margin: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--lm-modal-radius) !important;
}

.contact-modal__dialog,
.lost-boost-modal__dialog,
.lost-contact-modal__dialog {
  padding: clamp(22px, 5vw, 30px) !important;
  padding-top: clamp(64px, 9vw, 74px) !important;
}

.contact-modal__close,
.lost-boost-modal__close,
.lost-contact-modal__close {
  top: 10px !important;
  right: 10px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  color: #17384d !important;
  background: #eef7fc !important;
}

/* Map choice is also kept inside the visible safe area instead of touching the bottom edge. */
.maps-action-sheet-backdrop {
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--lm-modal-safe-top) var(--lm-modal-safe-right) var(--lm-modal-safe-bottom) var(--lm-modal-safe-left) !important;
}

.maps-action-sheet-wrap {
  width: min(560px, 100%) !important;
  max-height: calc(100vh - var(--lm-modal-safe-top) - var(--lm-modal-safe-bottom)) !important;
  max-height: calc(100dvh - var(--lm-modal-safe-top) - var(--lm-modal-safe-bottom)) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

.maps-action-sheet-option,
.maps-action-sheet-cancel {
  min-height: 48px !important;
  touch-action: manipulation;
}

dialog[open] {
  box-sizing: border-box;
  max-width: calc(100vw - (2 * var(--lm-modal-gutter)));
  max-height: calc(100dvh - (2 * var(--lm-modal-gutter)));
  overflow: auto;
}

body.lm-modal-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
}

@media (max-width: 480px) {
  :root {
    --lm-modal-gutter: 12px;
  }

  #poi-panel .poi-content {
    width: 100% !important;
  }

  .contact-modal__actions,
  .lost-boost-modal__actions,
  .lost-contact-modal__actions {
    width: 100%;
  }

  .contact-modal__actions > *,
  .lost-boost-modal__actions > *,
  .lost-contact-modal__actions > * {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #poi-panel,
  .maps-action-sheet-wrap,
  .contact-modal__dialog,
  .lost-boost-modal__dialog,
  .lost-contact-modal__dialog {
    animation: none !important;
    transition: none !important;
  }
}