.aspa-map{
  --aspa-blue:#0b5cff;
  --aspa-orange:#ff8613;
  --aspa-popup:#777e8d;
  width:100%;
  padding:38px 4% 42px;
  overflow:hidden;
  border-radius:22px;
  background:#fff;
  color:#090d1d;
  box-sizing:border-box;
  font-family:Inter,Arial,sans-serif;
}
.aspa-map *{box-sizing:border-box}
.aspa-map__instruction{
  position:relative;
  z-index:4;
  margin:0 0 18px;
  color:#747b88;
  font-size:16px;
  font-weight:700;
  line-height:1.35;
  text-align:center;
}
.aspa-map__stage{
  position:relative;
  width:100%;
  aspect-ratio:2/1;
}
.aspa-map__image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:1;
  user-select:none;
  -webkit-user-drag:none;
}

.aspa-map__pins{position:absolute;inset:0}
.aspa-map__pin{
  position:absolute;
  z-index:2;
  left:var(--pin-x);
  top:var(--pin-y);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  min-width:44px;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--aspa-blue);
  font:inherit;
  cursor:pointer;
  transform:translate(-50%,-100%);
  transition:color .22s ease,filter .22s ease;
}
.aspa-map__pin:hover,.aspa-map__pin:focus-visible{filter:brightness(.9)}
.aspa-map__pin:focus-visible .aspa-map__marker{outline:3px solid rgba(11,92,255,.28);outline-offset:5px}
.aspa-map__pin.is-active{z-index:5;color:var(--aspa-orange)}
.aspa-map__marker{
  position:relative;
  display:block;
  width:36px;
  height:36px;
  border:9px solid currentColor;
  border-radius:50% 50% 50% 0;
  background:#fff;
  box-shadow:0 2px 7px rgba(9,13,29,.12);
  transform:rotate(-45deg);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),color .2s;
}
.aspa-map__pin:hover .aspa-map__marker,.aspa-map__pin.is-active .aspa-map__marker{transform:rotate(-45deg) scale(1.1)}
.aspa-map__marker i{position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:currentColor}
.aspa-map__pin-label{
  color:currentColor;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}
.aspa-map__popup{
  --popup-x:16.5%;
  --popup-y:57%;
  position:absolute;
  z-index:4;
  left:var(--popup-x);
  top:var(--popup-y);
  width:min(300px,30%);
  padding:21px 22px;
  border-radius:16px;
  background:var(--aspa-popup);
  color:#fff;
  box-shadow:0 18px 38px rgba(9,13,29,.2);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(14px) scale(.96);
  transform-origin:top left;
  transition:opacity .22s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s;
}
.aspa-map__popup.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition-delay:0s;
}
.aspa-map__popup-heading{display:flex;align-items:center;gap:9px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.42)}
.aspa-map__popup-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--aspa-orange)}
.aspa-map__popup-heading strong{font-size:18px;line-height:1.2}
.aspa-map__popup-heading small{margin-left:auto;color:#e6e8ed;font-size:11px;white-space:nowrap}
.aspa-map__popup-content{display:flex;align-items:flex-end;gap:16px;padding-top:13px}
.aspa-map__popup-content p{flex:1;margin:0;color:#fff;font-size:14px;line-height:1.5;white-space:pre-line}
.aspa-map__popup-content a{display:grid;flex:0 0 45px;width:45px;height:45px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff!important;font-size:22px;place-items:center;text-decoration:none!important;transition:background .2s,transform .2s}
.aspa-map__popup-content a:hover,.aspa-map__popup-content a:focus-visible{background:rgba(255,255,255,.34);transform:translateX(2px)}
@media(max-width:900px){
  .aspa-map{padding:30px 3% 32px}
  .aspa-map__marker{width:30px;height:30px;border-width:7px}
  .aspa-map__marker i{width:7px;height:7px}
  .aspa-map__pin-label{font-size:8px;letter-spacing:.6px}
  .aspa-map__popup{width:260px;padding:17px}
}
@media(max-width:700px){
  .aspa-map{padding:25px 12px 18px;border-radius:16px}
  .aspa-map__instruction{margin-bottom:12px;font-size:13px}
  .aspa-map__stage{aspect-ratio:2/1;padding-bottom:150px}
  .aspa-map__image,.aspa-map__pins{height:100px}
  .aspa-map__popup{left:10px!important;right:10px;top:auto!important;bottom:0;width:auto;transform-origin:bottom center;transform:translateY(12px) scale(.98)}
  .aspa-map__popup.is-open{transform:none}
  .aspa-map__pin-label{display:none}
	.aspa-map__stage {
		padding-bottom:0px
	}
}
@media(prefers-reduced-motion:reduce){.aspa-map__pin,.aspa-map__marker,.aspa-map__popup,.aspa-map__popup-content a{transition:none!important}}