/* stylelint-disable no-empty-source */
@import url("./ios-search-no-zoom.css");

/* Booking Box Container Padding Bottom When Sticky */
div.section.booking-box-container {
  position: relative;
  z-index: 100;
}

/* While a mobile step/confirmation modal is open, lift the booking box above
   the sticky site header. The modals render `fixed inset-0` inside this
   section, but its z-index:100 stacking context would otherwise keep them
   below the header (z-index:500 mobile / 1000 ≥768px), covering the modal's
   own header. Scoped to the open state so normal sticky-scroll layering on
   desktop is unaffected. Class toggled by booking-box.js. */
html.booking-box-modal-open div.section.booking-box-container {
  z-index: 1001;
}

/* Bug #1: while a mobile step/confirm modal is open the marquee and the sticky
   site header must never be visible — "the transition must be immediate". The
   full-screen modal already covers them via z-index, but on slower devices the
   modal can paint a frame after the class flips, briefly exposing them. Hiding
   them under the synchronously-applied (useLayoutEffect) modal-open class
   guarantees no flash. `visibility` keeps their layout slot so there is no shift
   when the modal closes and the class is removed. The booking-box step modals
   build their own headers from <div>s, so the bare `header` selector only ever
   targets the site header. */
html.booking-box-modal-open header,
html.booking-box-modal-open .marquesina-global-container {
  visibility: hidden;
}

div.section.booking-box-container.booking-box-next-section {
  transition: padding-bottom 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

div.section.booking-box-container.booking-box-next-section.booking-box-next-section--sticky {
  padding-bottom: 206px;
}

/* Sticky enter: bajar suave desde arriba (desde el header) */
@keyframes booking-box-sticky-enter {
  0% {
    transform: translateY(-80px);
  }
  100% {
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .booking-box-sticky-enter {
    animation: booking-box-sticky-enter 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
}
