/* Alpenlodge Booking Overlay – v4
   Ziel:
   - Overlay NICHT mehr "mittig riesig", sondern direkt unter dem Header andocken
   - Höhe kompakt halten (Iframe kann cross-domain nicht auto-resizen)
   - Keine HTML-/Pfad-/Asset-Namen ändern
   - Nutzt --al-header-h (gesetzt via alpenlodge-header-height.js)
*/

:root{
  --al-booking-z: 9999;
  --al-booking-gap: 16px;
  --al-booking-radius: 18px;
  --al-booking-shadow: 0 30px 90px rgba(0,0,0,.35);
  --al-booking-top-gap: 12px; /* Abstand unter Header */
}

.al-booking-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--al-booking-z) !important;
  display: none;
}
.al-booking-overlay.is-open{ display:block !important; }

.al-booking-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
}

/* Stage: zentriert horizontal, aber STARTET unter Header */
.al-booking-stage{
  position:absolute;
  inset:0;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;

  /* oben Platz für Header */
  padding-left: clamp(10px, 2vw, 24px) !important;
  padding-right: clamp(10px, 2vw, 24px) !important;
  padding-bottom: clamp(10px, 2vw, 24px) !important;
  padding-top: calc(var(--al-header-h, 76px) + var(--al-booking-top-gap)) !important;
}

/* Panel autosize */
.al-booking-panel{
  background:#fff;
  border-radius: var(--al-booking-radius);
  box-shadow: var(--al-booking-shadow);
  overflow:hidden;

  /* Breite responsiv */
  width: min(1000px, calc(100vw - 2*clamp(10px,2vw,24px))) !important;

  /* Höhe: Viewport minus Header */
  max-height: calc(100vh - var(--al-header-h, 76px) - var(--al-booking-top-gap) - 2*clamp(10px,2vw,24px)) !important;

  display:flex;
  flex-direction:column;
}

.al-booking-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.95);
}

.al-booking-title{
  font-weight: 700;
  font-size: 14px;
  opacity: .9;
}

.al-booking-close{
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  border-radius: 999px;
  padding: 7px 10px;
  cursor: pointer;
  font-weight: 600;
}

.al-booking-body{
  padding: 0;
  overflow:auto;
}

/* Iframe: kompakt, damit nicht 80% leer ist */
.al-booking-body iframe{
  display:block;
  width: 100% !important;
  border:0 !important;
  height: clamp(240px, 42vh, 520px) !important;
}

/* Falls Widget doch inline rendert */
.al-booking-body > :not(iframe){
  padding: 10px 12px;
}

/* Hintergrund sperren */
body.al-booking-lock{
  overflow:hidden !important;
}

/* v21: ensure iframe visible + scrollable */
#apartmentIframeAll{width:100%; height:100%; min-height:560px; overflow:auto; -webkit-overflow-scrolling:touch;}
#apartmentIframeAll iframe{width:100%!important; height:100%!important; min-height:560px!important; border:0!important; display:block!important;}