/* V173 — Chrome-safe scrolling for Lên đơn hàng. Visual/scroll behavior only. */
.order-dialog-content {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  min-height: 0 !important;
  max-height: 100dvh !important;
}

.order-dialog-content > * {
  min-width: 0;
}

/* Chrome desktop: keep the dialog inside the viewport and make the dialog itself the scroll container. */
@media (min-width: 640px) {
  .order-dialog-content {
    height: calc(100dvh - 2rem) !important;
    max-height: calc(100dvh - 2rem) !important;
  }
}

/* Phones/tablets: use dynamic viewport height so Chrome address bar does not trap the bottom of the form. */
@media (max-width: 639px) {
  .order-dialog-content {
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  }

  .order-mobile-workflow {
    position: sticky !important;
    top: 0 !important;
  }
}

/* Fallback for older Chrome versions without dvh. */
@supports not (height: 100dvh) {
  .order-dialog-content {
    height: 100vh !important;
    max-height: 100vh !important;
  }
  @media (min-width: 640px) {
    .order-dialog-content {
      height: calc(100vh - 2rem) !important;
      max-height: calc(100vh - 2rem) !important;
    }
  }
}