.lotvue-map-wrapper {
  position: relative;
  width: 100%;
  background-color: #f3f4f6; 
  border-radius: 1rem;       
  overflow: hidden;
  
  /* Aspect Ratio - Desktop */
  aspect-ratio: 1280 / 550;
}

/* Make the map taller on mobile screens (768px and below) */
@media (max-width: 768px) {
  .lotvue-map-wrapper {
    /* Changes ratio to a square on mobile for much more height. 
       You can also try 'aspect-ratio: 4 / 3;' if you want it slightly shorter. */
    aspect-ratio: 1 / 1; 
  }
}

/* Fallbacks for older browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1280 / 550) {
  .lotvue-map-wrapper {
    height: 0;
    padding-bottom: 42.9%; /* Desktop fallback */
  }
  
  @media (max-width: 768px) {
    .lotvue-map-wrapper {
      padding-bottom: 100%; /* Mobile fallback (1:1 ratio) */
    }
  }

  .lotvue-frame {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.lotvue-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.lotvue-editor-note {
  background: #f5f5f5;
  padding: 40px;
  text-align: center;
  border: 1px dashed #ccc;
  margin: 20px auto;
  max-width: 800px;
  border-radius: 8px;
}