/* Ensure the iframe gets a real viewport and the map fills it */
* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; background: #0f1b24; }

/* Map fills the iframe viewport; absolute works more reliably than fixed here */
#map {
  position: absolute;
  inset: 0;
  min-height: 320px; /* safety for odd hosts */
}

/* Bottom CTA pill */
.embed-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
  z-index: 5; pointer-events: none;
}
.embed-cta a {
  pointer-events: auto;
  display: inline-block;
  height: 44px; line-height: 44px;
  padding: 0 16px; border-radius: 12px;
  background: linear-gradient(180deg,#1b2733,#0f1922);
  color: #f2f6fa; text-decoration: none; font-weight: 800; letter-spacing: .2px;
  border: 1px solid rgba(8,25,42,.28);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.embed-cta a:hover { filter: brightness(1.06) }
.embed-cta a:active { transform: translateY(1px) }
/* Prevent the embed from grabbing touch/trackpad gestures */
html, body {
  overscroll-behavior: none;   /* no weird bounce inside the iframe */
}
#map {
  touch-action: none;          /* don’t interpret scroll/pinch as map gestures */
}