/* Adapted from the local Spirit map, in SportKonf's palette and frame. */
.route-registration .map-frame,
.route-registration .map-frame #mapa {
  clip-path: none;
  border-radius: 70px 8px 70px 8px;
}
.route-registration .map-frame {
  padding: 1px;
  overflow: hidden;
  background: rgba(135, 183, 200, 0.16);
  box-shadow: 0 28px 80px -40px rgba(0, 0, 0, 0.7);
}
.route-registration .map-frame #mapa {
  background: #101a22;
  font-family: "Inter", sans-serif;
  isolation: isolate;
}
.route-registration .map-frame-label {
  display: flex;
  align-items: center;
  gap: 10px;
  top: auto;
  right: auto;
  left: 24px;
  bottom: 20px;
  padding: 10px 13px;
  border: 1px solid rgba(142, 190, 209, 0.12);
  border-radius: 10px 3px 10px 3px;
  background: rgba(10, 28, 38, 0.92);
  color: #a1bbc8;
  font-size: 9px;
  z-index: 2;
}
.map-frame-label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 9px rgba(1, 244, 255, 0.5);
}
.map-boundary-note {
  position: absolute;
  right: 31px;
  bottom: 37px;
  z-index: 2;
  max-width: 370px;
  margin: 0;
  padding: 5px 9px;
  border-radius: 4px;
  background: rgba(8, 19, 27, 0.87);
  color: #95aab7;
  font:
    9px/1.6 "Inter",
    sans-serif;
  text-align: right;
  pointer-events: none;
}
#mapa .maplibregl-canvas {
  outline: none;
}
#mapa .representative-pin {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: none;
}
.representative-pin-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #59e1ec;
  box-shadow: 0 0 8px rgba(1, 244, 255, 0.6);
  pointer-events: auto;
  transition:
    background 220ms,
    box-shadow 220ms;
}
.representative-pin-ring {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(89, 225, 236, 0.55);
  border-radius: 50%;
  animation: representative-pulse 2.8s ease-out infinite;
  animation-delay: var(--pulse-delay);
  pointer-events: none;
  animation-play-state: paused;
}
.map-is-visible .representative-pin-ring {
  animation-play-state: running;
}
.representative-pin:hover .representative-pin-dot,
.representative-pin[aria-expanded="true"] .representative-pin-dot {
  background: #dcfcff;
  box-shadow: 0 0 14px rgba(1, 244, 255, 0.75);
}
#mapa .representative-pin:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 3px;
}
@keyframes representative-pulse {
  0% {
    transform: scale(0.45);
    opacity: 0.7;
  }
  78%,
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
#mapa .maplibregl-ctrl-attrib {
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 8px 0 0 0;
  background: rgba(8, 19, 27, 0.94);
  color: #91a8b7;
  font:
    9px/1.7 "Inter",
    sans-serif;
}
#mapa .maplibregl-ctrl-attrib a {
  color: #a8c6d4;
}
#mapa .maplibregl-ctrl-attrib a:hover {
  text-decoration: underline;
}
#mapa .maplibregl-ctrl-bottom-right {
  right: 30px;
  bottom: 7px;
  max-width: 62%;
}
#mapa .representative-popup {
  z-index: 4;
}
#mapa .representative-popup .maplibregl-popup-content {
  padding: 19px 24px 17px 19px;
  border: 1px solid rgba(89, 225, 236, 0.25);
  border-radius: 14px 4px 14px 4px;
  background: #0e202c;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  color: var(--tekst);
}
#mapa .maplibregl-popup-close-button {
  top: 5px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #9ec4d3;
  font-size: 20px;
}
#mapa .maplibregl-popup-close-button:hover {
  background: rgba(89, 225, 236, 0.1);
}
#mapa .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
#mapa .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
#mapa .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: #0e202c;
}
#mapa .maplibregl-popup-anchor-top .maplibregl-popup-tip,
#mapa .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
#mapa .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: #0e202c;
}
#mapa .maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: #0e202c;
}
#mapa .maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: #0e202c;
}
#mapa .mapa-popup-grad {
  font-size: 10px;
  letter-spacing: 0.13em;
}
#mapa .mapa-popup strong {
  font-size: 14px;
}
#mapa .mapa-popup {
  min-width: 0;
}
#mapa .mapa-popup span {
  font-size: 11px;
  line-height: 1.6;
}
#mapa .mapa-popup-kontakti a {
  font-size: 11px;
  overflow-wrap: anywhere;
}
.map-unavailable {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 15px;
  padding: 30px;
  background: #101a22;
  text-align: center;
  font-size: 14px;
}
.map-unavailable a {
  color: var(--cyan);
  text-decoration: underline;
}
@media (max-width: 600px) {
  .route-registration .map-frame,
  .route-registration .map-frame #mapa {
    border-radius: 42px 5px 42px 5px;
  }
  .route-registration .map-frame-label {
    left: 12px;
    bottom: 88px;
    padding: 8px 9px;
    font-size: 8px;
  }
  #mapa .maplibregl-ctrl-bottom-right {
    right: 15px;
    bottom: 8px;
    max-width: calc(100% - 28px);
  }
  #mapa .maplibregl-ctrl-attrib {
    font-size: 8px;
  }
  .map-boundary-note {
    right: 15px;
    bottom: 42px;
    max-width: calc(100% - 28px);
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .representative-pin-ring {
    animation: none;
    opacity: 0.35;
  }
}