/* Map Container & Markers */
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Use aspect-ratio to maintain map proportions if needed, or rely on image */

  @media (max-width: 1200px) {
    height: 700px;
  }
  @media (max-width: 1024px) {
    height: 750px;
  }

  @media (max-width: 768px) {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

.map-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.map-marker {
  position: absolute;
  /* 
     Fixing anchor point:
     1. Center on the coordinate (50% + pos)
     2. Subtract half the size of the dot (6px) to center the element visually
     This prevents drift when content size changes
  */
  --marker-size: 12px;
  --marker-radius: calc(var(--marker-size) / 2);

  left: calc(50% + var(--x-pos) - var(--marker-radius));
  top: calc(50% + var(--y-pos) - var(--marker-radius));

  width: var(--marker-size);
  height: var(--marker-size);

  /* Flex used to center dot, but label is absolute now */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  
  /* Make interactive for mobile Safari */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Increase touch area for mobile */
.map-marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  z-index: -1;
}

.map-marker-dot {
  width: 100%;
  height: 100%;
  background-color: #0d0140; /* brand-dark */
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  scale: 2;
}

.map-marker-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  background-color: rgba(13, 1, 64, 0.9);
  color: white;
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  pointer-events: none; /* Prevent blocking clicks on overlapping areas */
}

/* Tooltip Positioning relative to the centralized marker */
.map-marker-label.left {
  right: 100%;
  margin-right: 0.5rem;
}
.map-marker-label.right {
  left: 100%;
  margin-left: 0.5rem;
}

.map-marker:hover .map-marker-label,
.map-marker:active .map-marker-label,
.map-marker:focus .map-marker-label,
.map-marker:focus-within .map-marker-label,
.map-marker.active .map-marker-label {
  opacity: 1;
}

/* Custom Pulse Animation matches Tailwind animate-pulse */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Marker Coordinates via nth-child */
/* Moscow */
.map-marker:nth-child(2) {
  --x-pos: 59px;
  --y-pos: -258px;

  @media (max-width: 1200px) {
    --x-pos: 67px;
    --y-pos: -296px;
  }

  @media (max-width: 1024px) {
    --x-pos: 72px;
    --y-pos: -318px;
  }

  @media (max-width: 767px) {
    /* Calculated percentages to fix drift on square aspect ratio */
    --x-pos: 10%;
    --y-pos: -43.7%;
  }
}
/* Vienna */
.map-marker:nth-child(3) {
  --x-pos: -48px;
  --y-pos: -194px;

  @media (max-width: 1200px) {
    --x-pos: -56px;
    --y-pos: -227px;
  }

  @media (max-width: 1024px) {
    --x-pos: -60px;
    --y-pos: -243px;
  }

  @media (max-width: 767px) {
    --x-pos: -8.2%;
    --y-pos: -33%;
  }
}
/* Milan */
.map-marker:nth-child(4) {
  --x-pos: -84px;
  --y-pos: -171px;

  @media (max-width: 1200px) {
    --x-pos: -98px;
    --y-pos: -200px;
  }

  @media (max-width: 1024px) {
    --x-pos: -105px;
    --y-pos: -218px;
  }

  @media (max-width: 767px) {
    --x-pos: -14.5%;
    --y-pos: -29%;
  }
}
/* Cairo */
.map-marker:nth-child(5) {
  --x-pos: 26px;
  --y-pos: -74px;

  @media (max-width: 1200px) {
    --x-pos: 31px;
    --y-pos: -88px;
  }

  @media (max-width: 1024px) {
    --x-pos: 33px;
    --y-pos: -94px;
  }

  @media (max-width: 767px) {
    --x-pos: 4.5%;
    --y-pos: -12%;
  }
}
/* Riyadh */
.map-marker:nth-child(6) {
  --x-pos: 105px;
  --y-pos: -43px;

  @media (max-width: 1200px) {
    --x-pos: 120.5px;
    --y-pos: -53px;
  }

  @media (max-width: 1024px) {
    --x-pos: 128.5px;
    --y-pos: -57px;
  }

  @media (max-width: 767px) {
    --x-pos: 18%;
    --y-pos: -7%;
  }
}
/* Dubai */
.map-marker:nth-child(7) {
  --x-pos: 147px;
  --y-pos: -47px;

  @media (max-width: 1200px) {
    --x-pos: 170px;
    --y-pos: -58px;
  }

  @media (max-width: 1024px) {
    --x-pos: 182px;
    --y-pos: -59px;
  }

  @media (max-width: 767px) {
    --x-pos: 25%;
    --y-pos: -8%;
  }
}
/* Lagos */
.map-marker:nth-child(8) {
  --x-pos: -114px;
  --y-pos: 50px;

  @media (max-width: 1200px) {
    --x-pos: -132px;
    --y-pos: 57px;
  }

  @media (max-width: 1024px) {
    --x-pos: -141px;
    --y-pos: 59px;
  }

  @media (max-width: 767px) {
    --x-pos: -19.5%;
    --y-pos: 9%;
  }
}
/* Cape Town */
.map-marker:nth-child(9) {
  --x-pos: -38px;
  --y-pos: 265px;

  @media (max-width: 1200px) {
    --x-pos: -44px;
    --y-pos: 304px;
  }

  @media (max-width: 1024px) {
    --x-pos: -47px;
    --y-pos: 327px;
  }

  @media (max-width: 767px) {
    --x-pos: -6.5%;
    --y-pos: 45%;
  }
}