/* The route map, shared by the travel agent, agency and corporate portals.
   The pickup / drop-off chips sit on the map, which is where the corporate
   portal has always had them, and they take the portal's own surface so a dark
   pill never lands on a cream page. */
.map-shell{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.map-shell .map-canvas,.map-shell .trip-map{height:280px;border:0;border-radius:0}
.map-shell img{display:block;width:100%;height:100%;object-fit:cover}

.map-shell .map-legend,.map-shell .trip-legend{
  position:absolute;left:12px;bottom:12px;z-index:5;pointer-events:none;
  display:flex;flex-direction:column;gap:6px;max-width:calc(100% - 24px);margin:0
}
.map-shell .map-legend .leg,.map-shell .trip-legend .leg{
  display:flex;align-items:center;gap:8px;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:9px;padding:6px 11px 6px 7px;
  font-size:11.5px;color:var(--muted);max-width:100%
}
/* A browser without color-mix still gets a readable chip. */
@supports not (background:color-mix(in srgb,#000 50%,transparent)){
  .map-shell .map-legend .leg,.map-shell .trip-legend .leg{background:var(--panel)}
}
.map-shell .map-legend .leg .b,.map-shell .trip-legend .leg .b{
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-fill-2),var(--gold-fill));
  color:#0B0A08;font-weight:700;font-size:10px;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0
}
.map-shell .map-legend .leg .t,.map-shell .trip-legend .leg .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-shell .map-legend .leg .t b,.map-shell .trip-legend .leg .t b{color:var(--cream);font-weight:600;margin-right:5px}

@media (max-width:560px){
  .map-shell .map-canvas,.map-shell .trip-map{height:230px}
  .map-shell .map-legend .leg,.map-shell .trip-legend .leg{font-size:11px;padding:5px 9px 5px 6px}
}