/* Keep the full-screen checkout anchored to the viewport. Grid children such as
   the invoice form and footer actions must not enlarge the dialog horizontally. */
.payment-page {
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.payment-page form,
.payment-header,
.payment-content,
.payment-order,
.payment-entry,
.payment-footer {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.payment-page form {
  overflow: hidden;
}

.payment-content {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  overflow: hidden;
}

.payment-order,
.payment-entry {
  overflow-x: hidden;
}

.payment-footer-actions {
  min-width: 0;
  flex-wrap: wrap;
}

@media (min-width: 901px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  #posApp {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .topbar {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
  }

  .pos-shell {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .catalog-pane {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .catalog-heading,
  .search-bar,
  .category-filters,
  .catalog-status {
    flex: 0 0 auto;
  }

  .product-grid {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 5px;
    padding-bottom: 20px;
  }

  .cart-pane {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .cart-heading {
    flex: 0 0 auto;
  }

  .cart-items {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    align-content: start;
    grid-auto-rows: max-content;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
  }

  .cart-line {
    min-height: 70px;
    height: auto;
    align-items: center;
  }

  .cart-totals,
  .cart-actions {
    flex: 0 0 auto;
    background: #fff;
  }

  .cart-actions {
    position: relative;
    z-index: 2;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

@media (max-height: 760px) and (min-width: 901px) {
  .catalog-pane,
  .cart-pane {
    padding-top: 18px;
    padding-bottom: 14px;
  }

  .catalog-heading h1 {
    font-size: 30px;
  }

  .search-bar {
    margin-top: 14px;
    margin-bottom: 9px;
  }

  .search-bar input {
    padding-block: 12px;
  }

  .cart-items {
    margin-block: 10px;
  }

  .cart-totals {
    gap: 6px;
    padding-top: 10px;
  }

  .cart-totals .grand-total {
    padding-top: 8px;
  }

  .grand-total strong {
    font-size: 23px;
  }

  .cart-actions {
    margin-top: 10px;
  }

  .reserve-button,
  .checkout-button {
    min-height: 48px;
  }
}