Booking.system

<!-- Book Now Button -->
<button onclick="document.getElementById('sc-modal').style.display='flex'"
        style="background:#4ecdc4;color:#050e1a;padding:16px 36px;border:none;
               border-radius:100px;font-weight:700;font-size:1rem;cursor:pointer;
               box-shadow:0 8px 24px rgba(78,205,196,0.35)">
  🏄 Book Your Stay
</button>

<!-- Popup Modal -->
<div id="sc-modal"
     style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.8);
            z-index:9999;align-items:center;justify-content:center;padding:20px"
     onclick="if(event.target===this)this.style.display='none'">
  <div style="background:#fff;border-radius:20px;width:100%;max-width:900px;
               height:90vh;overflow:hidden;position:relative">
    <button onclick="document.getElementById('sc-modal').style.display='none'"
            style="position:absolute;top:12px;right:16px;background:rgba(0,0,0,0.1);
                   border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;
                   font-size:1.1rem;z-index:10">✕</button>
    <iframe src="https://yourdomain.com/surfcamp-booking-form.html"
            style="width:100%;height:100%;border:none;border-radius:20px"></iframe>
  </div>
</div>