/* ==========================================
   REELSXPRESS — Booking Popup
   ========================================== */

.rx-booking-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--rx-vp-top) var(--rx-page-gutter) var(--rx-vp-bottom);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear var(--rx-duration), opacity var(--rx-duration) var(--rx-ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.rx-booking-popup.is-open {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity var(--rx-duration) var(--rx-ease);
}

.rx-booking-popup__backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--rx-text-main) 36%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.rx-booking-popup__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 580px;
  background: var(--rx-home-surface-fill-strong);
  border: 1px solid var(--rx-home-surface-border);
  border-radius: var(--rx-panel-radius, 12px);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin: auto;
  box-shadow: var(--rx-shadow-lg);
  transform: translateY(1rem);
  transition: transform var(--rx-duration) var(--rx-ease);
}

.rx-booking-popup.is-open .rx-booking-popup__dialog {
  transform: translateY(0);
}

.rx-booking-popup__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--rx-home-control-fill);
  border: 1px solid var(--rx-home-surface-border);
  border-radius: 50%;
  color: var(--rx-text-main);
  cursor: pointer;
  transition: background var(--rx-duration) var(--rx-ease), color var(--rx-duration) var(--rx-ease);
  padding: 0;
}

.rx-booking-popup__close:hover,
.rx-booking-popup__close:focus-visible {
  background: var(--rx-home-control-fill-hover);
  color: var(--rx-primary);
  outline: none;
}

.rx-booking-popup__header {
  text-align: center;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  padding-right: 2.5rem;
}

.rx-booking-popup__title {
  font-family: var(--rx-font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--rx-text-main);
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

.rx-booking-popup__subtitle {
  font-family: var(--rx-font-body);
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  color: var(--rx-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.rx-booking-popup__body .rx-booking-form-wrap {
  padding: 0;
  background: none;
  border: none;
}

.rx-booking-popup__body .rx-booking-form__notice {
  margin-bottom: 1rem;
  color: var(--rx-text-secondary);
  border-color: var(--rx-home-surface-border);
  background: var(--rx-home-surface-fill-soft);
}

.rx-booking-popup__body .rx-booking-form__notice.is-success {
  border-color: rgba(31, 121, 114, 0.28);
  background: rgba(31, 121, 114, 0.08);
  color: #1f615c;
}

.rx-booking-popup__body .rx-booking-form__notice.is-error {
  border-color: rgba(199, 53, 101, 0.28);
  background: rgba(199, 53, 101, 0.08);
  color: var(--rx-primary);
}

/* ─── Body scroll lock ─── */
body.rx-popup-open {
  overflow: hidden;
}

/* ─── Mobile ─── */
@media (max-width: 639px) {
  .rx-booking-popup {
    align-items: flex-end;
    padding: 0;
  }

  .rx-booking-popup__dialog {
    max-width: 100%;
    border-radius: var(--rx-panel-radius, 12px) var(--rx-panel-radius, 12px) 0 0;
    padding: clamp(1.25rem, 4vw, 2rem) clamp(1rem, 3vw, 1.5rem) clamp(1.5rem, 5vw, 2.5rem);
    margin: 0;
    max-height: 88svh;
    overflow-y: auto;
    transform: translateY(1rem);
  }

  .rx-booking-popup.is-open .rx-booking-popup__dialog {
    transform: translateY(0);
  }

  .rx-booking-popup__header {
    padding-right: 2rem;
  }
}