/* Keep touch forms inside the visible viewport without disabling pinch zoom. */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
  .booking-dialog .booking-input,
  .booking-dialog .booking-select {
    font-size: 16px;
    max-width: 100%;
    box-sizing: border-box;
  }

  dialog.booking-dialog[open] {
    position: fixed;
    inset: auto;
    top: calc(var(--booking-viewport-top, 0px) + 12px);
    left: calc(var(--booking-viewport-left, 0px) + var(--booking-viewport-width, 100vw) / 2);
    transform: translateX(-50%);
    margin: 0;
    height: auto;
    max-width: calc(var(--booking-viewport-width, 100vw) - 24px);
    max-height: calc(var(--booking-viewport-height, 100vh) - 24px);
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .booking-dialog .booking-shell {
    height: auto;
    max-height: none;
    min-width: 0;
  }
}