#map-root {
  position: relative;
  background: var(--map-floor, #d1d5db);
  touch-action: none;
  overflow: hidden;
}

#map-root .map-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: grab;
  touch-action: none;
}

#map-root .map-canvas:active {
  cursor: grabbing;
}

/* HTML overlay: layer ignores pan; dots capture clicks only */
.map-markers {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* [hidden] must win over display:grid/flex on markers */
.map-markers [hidden] {
  display: none !important;
}

/* Exhibit — Figma web/maps-point variant pr: grey disc + red dot */
.map-marker--exhibit {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-muted, #f2f3f3);
  box-shadow: var(--shadow-pin);
  pointer-events: auto;
  cursor: pointer;
  display: grid;
  place-items: center;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  will-change: transform;
}

.map-marker--exhibit::after {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-selected, #d73f2b);
}

.map-marker--exhibit:hover,
.map-marker--exhibit:focus-visible {
  outline: none;
  background: #e8eaea;
}

.map-marker--exhibit.is-active {
  background: var(--color-selected, #d73f2b);
  box-shadow: var(--shadow-pin);
}

.map-marker--exhibit.is-active::after {
  background: var(--color-on-accent, #ffffff);
}

/* Cluster — Figma web/maps-point 70: grey disc, 44/600.
   Exhibits: text/acc. Точки интереса: ink (#353735), один общий пул. */
.map-marker--cluster {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 70px;
  height: 70px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-muted, #f2f3f3);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  color: var(--color-selected, #d73f2b);
  font-family: var(--font-family);
  font-size: 44px;
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: auto;
  cursor: pointer;
  display: grid;
  place-items: center;
  user-select: none;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  will-change: transform;
}

.map-marker--cluster[data-digits='3'],
.map-marker--cluster[data-digits='4'] {
  font-size: 28px;
}

.map-marker--cluster-filter {
  color: var(--color-ink, #353735);
}

.map-marker--cluster:hover,
.map-marker--cluster:focus-visible {
  outline: none;
  background: #e8eaea;
}

/* Panorama node — red ring (pano map modal) */
.map-marker--pano {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-selected, #d73f2b);
  box-shadow: var(--shadow-pin);
  pointer-events: auto;
  cursor: pointer;
  display: grid;
  place-items: center;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  will-change: transform;
}

.map-marker--pano::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 0 0 2.5px var(--color-selected, #d73f2b);
}

.map-marker--pano.is-active {
  width: 32px;
  height: 32px;
  background: var(--color-selected, #d73f2b);
  box-shadow:
    var(--shadow-pin),
    0 0 0 3px rgba(215, 63, 43, 0.35),
    0 0 12px rgba(215, 63, 43, 0.45);
}

.map-marker--pano.is-active::after {
  width: 12px;
  height: 12px;
  background: #ffffff;
  box-shadow: none;
}

.map-markers--pano {
  z-index: 3;
  /* Крайние panos у top/edge — не резать диск маркера overflow'ом слоя. */
  overflow: visible;
}

/* Service — круг как maps-point, иконка-контур */
.map-marker--service {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  margin: 0;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--color-surface-muted, #f2f3f3);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
  cursor: pointer;
  display: grid;
  place-items: center;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  will-change: transform;
}

.map-marker__icon {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: 0 0 auto;
  background-color: var(--color-ink);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* CP PNG белый на прозрачном: brightness(0) → чёрный глиф, альфа цела. */
.map-marker__icon--raster {
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
  filter: brightness(0);
}

.map-marker--service.is-active {
  background: var(--color-selected, #d73f2b);
}

.map-marker--service.is-active .map-marker__icon:not(.map-marker__icon--raster) {
  background-color: var(--color-on-accent, #ffffff);
}

.map-marker--service.is-active .map-marker__icon--raster {
  filter: none;
  background-color: transparent;
}

.service-callout {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border-radius: 24px;
  background: var(--color-surface, #ffffff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  color: var(--color-ink, #353735);
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0;
  line-height: 20px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate3d(-100px, -100px, 0) translate(-50%, calc(-100% - 28px));
}

.service-callout__label {
  padding: 24px;
}

.service-callout__close {
  width: 40px;
  height: 40px;
  margin: 0 12px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--color-surface-muted, #f2f3f3);
  color: var(--color-ink, #353735);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.service-callout__close-icon {
  width: 16px;
  height: 16px;
  display: block;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.map-marker--service-unmapped {
  outline: 1px dashed color-mix(in srgb, var(--color-accent, #e84934) 55%, transparent);
}

/* Фейд-видимость точек при фильтрах (вместо жёсткого [hidden]). */
.map-marker {
  transition:
    opacity 280ms ease,
    background-color 280ms ease,
    box-shadow 280ms ease;
}

.map-marker.is-filtered-out {
  opacity: 0;
  pointer-events: none;
}

/* Точки выбранного фильтра — постоянно красные (не вспышка → белый). */
.map-marker--service.is-filter-lit {
  background: var(--color-selected, #d73f2b);
}

.map-marker--service.is-filter-lit .map-marker__icon:not(.map-marker__icon--raster) {
  background-color: var(--color-on-accent, #ffffff);
}

.map-marker--service.is-filter-lit .map-marker__icon--raster {
  filter: none;
  background-color: transparent;
}

@media (max-width: 1200px) {
  .map-marker--cluster {
    width: 64px;
    height: 64px;
    font-size: 40px;
  }

  .map-marker--cluster[data-digits='3'],
  .map-marker--cluster[data-digits='4'] {
    font-size: 24px;
  }
}

@media (max-width: 440px) {
  .map-marker--exhibit {
    width: 40px;
    height: 40px;
  }

  .map-marker--exhibit::after {
    width: 12px;
    height: 12px;
  }

  .map-marker--service {
    width: 40px;
    height: 40px;
    padding: 0;
  }
}