#expo-exhibitormap {
  width: 100%;
  height: 50vh;
  border: 1px solid #303624;
}

#expo-map {
  width: 100%;
  height: 600px;
  border: 1px solid #303624;
}

.map-key {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 270px;
  border: 1px solid rgb(0 0 0 / 15%);
  border-radius: 3px;
  overflow: hidden;
  padding-bottom: 6px;
  flex: none;
  min-width: 200px;
}

.map-key p {
  margin: 0;
  background: rgb(0 0 0 / 15%);
  padding: 6px;
  font-size: 1rem;
  font-weight: 700;
}
.map-key div {
  display: flex;
  gap: 8px;
  padding: 0 6px;
  font-size: 1rem;
}
.map-key span {
  width: 50px;
  border-radius: 3px;
}
@media (min-width: 1200px) {
  .map-container {
    display: flex;
    align-items: flex-start;
    gap: 30px;
  }
  .map-key {
    margin: 0;
  }
}
#expo-3d {
  width: 100%;
  display: block;
  height: 50vh;
  border: 1px solid #303624;
}

/** Hover affordance */
.leaflet-container path.leaflet-interactive {
  cursor: pointer;
}

.label-wrap {
  pointer-events: none;
}

.label-stand-code-body,
.label-exhib-name-body {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 2px 6px;
  line-height: 1.15;
  font-weight: 600;
  color: #1d1d1f;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* put in your frontend-map/styles.css */
.stand-label {
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.12);
  font:
    600 13px/1.25 system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
  color: #111;
  white-space: pre-line; /* so \n makes a new line */
  text-align: center;
  pointer-events: none; /* don't steal clicks */
  transform: translate(-50%, -50%); /* center over anchor */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  max-width: 180px;
}
.stand-label .muted {
  font-weight: 500;
  color: #333;
}

.leaflet-tooltip.dim-label {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  padding: 2px 6px;
  font:
    12px/1.2 system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  color: #111;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  pointer-events: none;
}

/* Centred hint + soft dim. Never intercepts clicks/drag. */
.map-zoom-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* critical: never block the map */
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 450; /* above tiles, below markers/tooltips */
}
.map-zoom-overlay.visible {
  opacity: 1;
}

/* Soft page-dimming layer */
.map-zoom-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.575);
  border-radius: inherit;
}

/* The centred pill message */
.map-zoom-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.12);
  font:
    600 13px/1.2 system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  color: #111;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  pointer-events: none; /* don’t steal events */
}

/* Extra polish: prevent scroll-chain nudges */
.leaflet-container {
  overscroll-behavior: contain;
}