.proximate-route-status {
  position: fixed;
  z-index: 10040;
  left: 50%;
  top: calc(var(--shell-top-nav-height, 100px) + 16px);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid rgba(var(--map-layer-primary-rgb, 255, 215, 0), .3);
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 9, 12, .92);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42);
  font: 750 10px Poppins, sans-serif;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.proximate-route-status.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.proximate-route-status i { color: var(--map-layer-primary, #ffd700); font-size: 18px; animation: proximateRoutePulse 1s ease-in-out infinite; }
@keyframes proximateRoutePulse { 50% { transform: scale(1.16); filter: drop-shadow(0 0 6px var(--map-layer-primary, #ffd700)); } }
@media (prefers-reduced-motion: reduce) { .proximate-route-status i { animation: none; } }

body.proximate-route-focus .leaflet-marker-pane .leaflet-marker-icon {
  transition: opacity .42s ease, filter .42s ease !important;
}
body.proximate-route-focus .leaflet-marker-pane .leaflet-marker-icon:not(.proximate-user-location-marker):not(.proximate-route-destination-marker):not(.preview-selected-marker) {
  opacity: .055 !important;
  filter: grayscale(.95) saturate(.18) blur(.7px) !important;
  pointer-events: none !important;
}
body.proximate-route-focus .leaflet-marker-pane .proximate-user-location-marker,
body.proximate-route-focus .leaflet-marker-pane .proximate-route-destination-marker,
body.proximate-route-focus .leaflet-marker-pane .preview-selected-marker {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.proximate-route-anchor {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  pointer-events: none !important;
}
.proximate-route-anchor-pin {
  position:absolute;
  left:4px;
  top:4px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:0;
  color:var(--route-anchor-colour,#ffd700);
  background:transparent;
  box-shadow:none;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.9)) drop-shadow(0 0 8px color-mix(in srgb,var(--route-anchor-colour,#ffd700) 75%,transparent));
}
.proximate-route-anchor-pin i { font-size:32px;transform:none; }
.proximate-route-anchor-pulse {
  position:absolute;
  left:11px;
  bottom:0;
  width:20px;
  height:10px;
  border:2px solid var(--route-anchor-colour,#ffd700);
  border-radius:50%;
  opacity:.7;
  animation:proximate-route-anchor-pulse 1.5s ease-out infinite;
}
.leaflet-overlay-pane .proximate-route-footpath {
  stroke-dasharray:2 8;
  animation:proximate-route-footpath-flow 1.1s linear infinite;
}
@keyframes proximate-route-footpath-flow { to { stroke-dashoffset:-20; } }
@keyframes proximate-route-anchor-pulse {
  from { transform:scale(.45); opacity:.8; }
  to { transform:scale(1.7); opacity:0; }
}
body.proximate-route-focus .leaflet-marker-pane .proximate-route-destination-marker,
body.proximate-route-focus .leaflet-marker-pane .preview-selected-marker {
  z-index: 3400 !important;
}

@media (min-width: 769px) {
  .unified-service-sheet,
  .unified-event-sheet {
    left: auto !important;
    right: 16px !important;
    bottom: calc(var(--shell-bottom-nav, 72px) + 16px + env(safe-area-inset-bottom)) !important;
    width: min(390px, calc(100vw - 32px)) !important;
    max-height: min(68vh, 620px) !important;
    transform: translateX(calc(100% + 34px)) !important;
  }
  .unified-service-sheet.is-open,
  .unified-event-sheet.is-open { transform: translateX(0) !important; }
}

.proximate-route-destination-pill {
  position: fixed;
  z-index: 10070;
  left: 50%;
  bottom: calc(var(--shell-bottom-nav, 72px) + 96px + env(safe-area-inset-bottom));
  width: min(360px, calc(100% - 28px));
  min-height: 54px;
  padding: 8px 12px;
  border: 1px solid rgba(var(--map-layer-primary-rgb, 255, 215, 0), .38);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  color: #fff;
  background: rgba(6, 10, 13, .94);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .58), 0 0 22px rgba(var(--map-layer-primary-rgb, 255, 215, 0), .08);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px) scale(.97);
  transition: opacity .24s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility .24s ease;
  text-align: left;
}
.proximate-route-destination-pill.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.proximate-route-destination-pill > i:first-child { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 13px; color: #06100b; background: var(--map-layer-primary, #ffd700); }
.proximate-route-destination-pill > i:last-child { color: var(--map-layer-primary, #ffd700); }
.proximate-route-destination-pill small,
.proximate-route-destination-pill strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proximate-route-destination-pill small { color: var(--map-layer-primary, #ffd700); font: 800 7px Poppins, sans-serif; letter-spacing: .9px; }
.proximate-route-destination-pill strong { margin-top: 2px; font: 800 11px Poppins, sans-serif; }

@media (max-width: 768px) {
  #roomPreviewModal.proximate-route-preview-collapsed {
    display: block !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }
  #roomPreviewModal.proximate-route-preview-collapsed .room-preview-sheet,
  .unified-service-sheet.proximate-route-preview-collapsed,
  .unified-event-sheet.proximate-route-preview-collapsed {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, calc(100% + 40px)) scale(.96) !important;
  }
  #roomPreviewModal.proximate-route-preview-collapsed .room-preview-sheet {
    box-shadow: none !important;
  }
}

@media (min-width: 769px) { .proximate-route-destination-pill { display: none; } }