/* London Baby 2026 — Safari card exit X consistency fix
   Purpose: keep the individual card close control visible and reachable at all times
   in iPhone Safari and Add-to-Home-Screen mode without changing card content. */

.detail-backdrop {
  align-items: flex-end !important;
  justify-content: center !important;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.detail-sheet {
  position: relative !important;
  width: min(100%, 860px) !important;
  max-height: calc(100dvh - max(20px, env(safe-area-inset-top, 0px)) - max(20px, env(safe-area-inset-bottom, 0px))) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  border-radius: 30px !important;
}

/* The X now lives as a direct child of the backdrop, not inside the scrolling card.
   This prevents Safari from treating it as part of the card's scrollable content. */
.close-btn.detail-global-close,
#closeDetail.detail-global-close {
  position: fixed !important;
  top: max(14px, calc(env(safe-area-inset-top, 0px) + 10px)) !important;
  right: max(14px, calc(env(safe-area-inset-right, 0px) + 10px)) !important;
  z-index: 2147483647 !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255,255,255,.95) !important;
  background: rgba(255,255,255,.96) !important;
  color: #002d87 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(0,45,135,.08) !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
}

.close-btn.detail-global-close::before,
#closeDetail.detail-global-close::before {
  content: "" !important;
  position: absolute !important;
  inset: -12px !important;
  border-radius: 999px !important;
}

.detail-backdrop[hidden] .close-btn.detail-global-close,
.detail-backdrop[hidden] #closeDetail.detail-global-close {
  display: none !important;
}

.detail-hero {
  border-radius: 30px 30px 0 0 !important;
}

.detail-hero h2 {
  right: 24px !important;
}

@media (min-width: 700px) {
  .detail-backdrop {
    align-items: center !important;
  }

  .close-btn.detail-global-close,
  #closeDetail.detail-global-close {
    top: max(20px, calc(env(safe-area-inset-top, 0px) + 18px)) !important;
    right: max(20px, calc(env(safe-area-inset-right, 0px) + 18px)) !important;
  }
}

/* Keep the other full-screen module close controls consistently visible too. */
.trip-map-header,
.nearby-concierge-header,
.tier1-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
}

.trip-map-close,
.nearby-concierge-close,
.tier1-close {
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: 32px !important;
  line-height: 1 !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  z-index: 10001 !important;
}