/* The wrappers are transparent to the approved mobile/standalone overview. */
.order-scroll,
.order-checkout { display: contents; }

@media (min-width: 1000px) {
  .booking-layout > .order-aside { min-height: 0; }
  .booking-layout > .order-aside > .order-card:not(.order-awaiting) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(var(--app-height, 100dvh) - 212px);
    overflow: hidden;
  }
  .booking-layout > .order-aside .order-scroll {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scroll-padding-block: 8px;
    padding: 3px 4px 16px 2px;
  }
  .booking-layout > .order-aside .order-checkout {
    display: block;
    flex: 0 0 auto;
    min-width: 0;
    background: #fff;
  }
  .booking-layout > .order-aside .order-scroll .order-line { padding-right: 44px; }
  .booking-layout > .order-aside .order-scroll .order-remove { right: 0; }
  .booking-layout > .order-aside .order-checkout .order-total {
    margin-top: 0;
    padding-top: 14px;
  }
  .booking-layout > .order-aside .order-checkout .desktop-cta { margin-top: 14px; }
  .booking-layout > .order-aside .order-checkout .order-foot {
    padding-top: 10px;
    font-size: 13px;
    line-height: 1.4;
  }
  /* A wide touch device can lose visible height without changing CSS height. */
  body[data-keyboard="true"] .booking-layout > .order-aside { position: static; }
  body[data-keyboard="true"] .booking-layout > .order-aside > .order-card:not(.order-awaiting) { max-height: none; overflow: visible; }
  body[data-keyboard="true"] .booking-layout > .order-aside .order-scroll { overflow: visible; }
}

/* Keep the action usable on short laptop windows without starving the list. */
@media (min-width: 1000px) and (max-height: 600px) {
  .booking-layout > .order-aside > .order-card:not(.order-awaiting) { padding: 16px; }
  .booking-layout > .order-aside .order-checkout .order-total { padding-top: 10px; }
  .booking-layout > .order-aside .order-checkout .desktop-cta { margin-top: 10px; }
  .booking-layout > .order-aside .order-checkout .order-foot { display: none; }
}

/* At extreme heights, normal page scrolling keeps every action reachable. */
@media (min-width: 1000px) and (max-height: 480px) {
  .booking-layout > .order-aside { position: static; }
  .booking-layout > .order-aside > .order-card:not(.order-awaiting) { max-height: none; overflow: visible; }
  .booking-layout > .order-aside .order-scroll { overflow: visible; }
}