/* ==========================================================================
   Map Layout & Containers
   ========================================================================== */

/* Map Container */
.map-container {
  position: relative;
  width: 95%;
  min-height: 90vh;
  max-height: 60rem;
  background-color: var(--rich-black);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  /* Initial state is handled by GSAP */
  opacity: 0.4;
  will-change: opacity;
  margin: 4rem auto; /* Center the map container */
}

/* Map Header & Heading */
.map-header {
  text-align: left; /* Change from center to left */
  padding: 1rem 0 8rem; /* Adjust padding to align with map edge */
  width: 100%;
  max-width: none; /* Remove max-width restriction */
  margin: 0 auto; /* Remove automatic margins */
}

.map-header .section-title {
  margin-bottom: 0;
  text-align: left; /* Ensure the text is left-aligned */
}

/* Map Element & Wrapper */
#map {
  width: 100%;
  height: 100%;
  max-height: 60rem;
  position: relative;
  flex-grow: 1;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Map wrapper - initial state set by GSAP */
.map-wrapper {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
  /* Initial values are set by GSAP now */
  transform-origin: center center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  /* Ensure child absolute elements stay within bounds */
  contain: layout paint;
  will-change: transform, opacity, border-radius;
}

/* Hide Google logo/branding images */
img[alt="Google"],
div:has(> img[alt="Google"]),
.gm-style a[href^="https://maps.google.com/maps"]
{
  opacity: 0 !important;
  display: none !important;
  visibility: hidden !important;
}

/* Additional hiding for Google Terms/Data text elements */
.gmnoprint:has(a[href^="https://maps.google.com"]),
.gm-style-cc:has(a[href^="https://www.google.com/intl"])
{
  display: none !important;
}

/* Shimmer effect - keep this as CSS animation */
.map-wrapper:before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

.map-wrapper.shimmer:before {
  animation: shimmerEffect 1.5s ease-in-out;
}

@keyframes shimmerEffect {
  0% {
    opacity: 0;
    transform: translate(-30%, -30%) rotate(30deg);
  }
  20% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(30%, 30%) rotate(30deg);
  }
}

/* Hide the bottom-right map data and terms container */
div[style*='position: absolute; right: 0px; bottom: 0px;'] {
  display: none !important;
}

/* ==========================================================================
   Enhanced map markers
   ========================================================================== */

.gm-style-iw {
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

.gm-style img[src*='marker'] {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
}

/* Marker animation */
@keyframes markerPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.gm-style img[src*='selected-marker'] {
  animation: markerPulse 1.5s infinite ease-in-out;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
  .map-container {
    padding: 1.5rem !important; /* Reduce padding on mobile */
    width: 100%;
  }

  .map-header h1 {
    font-size: 2.5rem;
  }

  .map-subheading {
    font-size: 1rem;
  }

  #map {
    height: 80vh;
  }

  .map-wrapper {
    height: 80vh; /* Match the map height */
  }

  .popup-image {
    height: 120px;
  }

  .popup-details {
    flex-direction: column;
    gap: 5px;
  }
}

/* Additional mobile optimizations */
@media (max-width: 480px) {
  .map-container {
    padding: 1rem;
  }

  .map-header {
    padding: 0.5rem 1rem 2rem;
  }

  .map-header h1 {
    font-size: 2rem;
  }
}