/* ========== RESPONSIVE IFRAME STYLES ========== */

/* Container for the iframe */
.map-container {
  position: relative;
  width: 100%;
  max-width: 800px; /* Maximum width for larger screens */
  margin: 0 auto; /* Center the container */
  padding: 20px;
  box-sizing: border-box;
}

/* Responsive iframe wrapper technique */
.map-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (450/800 = 56.25%) */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 3px solid var(--hot-pink);
}

/* Style the iframe itself */
#maps-id {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: 8px;
}

/* Alternative direct styling if you don't want to use wrapper */
.direct-responsive-iframe {
  width: 100%;
  max-width: 1000px;
  height: 450px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 3px solid var(--hot-pink);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .map-container {
    padding: 15px;
  }
  
  .map-wrapper {
    padding-bottom: 75%; /* Adjust aspect ratio for mobile (more square) */
    border-radius: 8px;
  }
  
  #maps-id {
    border-radius: 5px;
  }
  
  /* For direct styling approach */
  .direct-responsive-iframe {
    height: 300px; /* Smaller height on mobile */
    border-radius: 8px;
  }
}

@media (max-width: 480px) {
  .map-container {
    padding: 10px;
  }
  
  .map-wrapper {
    padding-bottom: 80%; /* Even more square on very small screens */
  }
  
  /* For direct styling approach */
  .direct-responsive-iframe {
    height: 250px;
  }
}