/*
 * Till UX slice 4 (30 Oct 2026) — the sale screen's density, by the size the till runs at: a computer (1920×1080,
 * 1366×768), an iPad (1180×820, 1024×768, 820×1180) or a cashier screen (1024×768, 800×600). Tokens only, logical
 * properties only; every target stays at least 44 px (the pay button at least 60 px).
 *
 *   compact lines   a cart line is its name and total (one tap selects it); the unit price, − / + and the line's
 *                   actions show under the selected line only — about 56 px a line instead of 125
 *   pay row         «نقداً بالمبلغ» (cash, the exact amount, one tap) beside «دفع»
 *   short or narrow at ≤ 680 px high or ≤ 1100 px wide: the categories one scrolling row, smaller tiles, a 48 px bar
 *   wide            at ≥ 1600 px the order panel is wider (it was capped near 392 px on a 1920 screen)
 *   hover           a pointer that hovers sees which control it is over
 */

/* ---------------------------------------------------------------- compact cart lines */

.line {
  gap: 0.25rem;
  padding: 0.3rem 0;
}
.line__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: var(--tap-sm);
  padding: 0.25rem 0.35rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
}
.line__total {
  flex: none;
  white-space: nowrap;
}
.line--sel .line__main {
  background: var(--accent-soft);
}
.line:not(.line--sel) .line__unit,
.line:not(.line--sel) .line__ctl {
  display: none;
}

/* ---------------------------------------------------------------- the pay row */

.cart__payrow {
  display: flex;
  gap: 0.5rem;
}
.cart__payrow .btn--pay {
  flex: 2 1 0;
}
.btn--exact {
  flex: 1 1 0;
  min-height: var(--tap-pay);
  margin: 0;
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 700;
}

/* ---------------------------------------------------------------- the amount due, in the dark theme */

[data-theme='dark'] .pay__due {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

/* ---------------------------------------------------------------- short or narrow screens */

@media (max-height: 42.5rem), (max-width: 68.75rem) {
  .bar {
    min-height: 3rem;
    padding-block: 0.2rem;
  }
  /* Browser drive defect 4: at 800×600 a scrolling row showed no scrollbar and «حلويات» was out of reach. The
     categories WRAP instead: every one is on screen, a 44 px target, whatever the count. */
  .cats {
    display: flex;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 0.4rem;
  }
  .cat {
    flex: 0 1 auto;
    min-width: 5.5rem;
    white-space: nowrap;
  }
  /* the menu's levels, the sale screen's categories: they wrap too (browser drive defect 4 — the same clipped row) */
  .sale:not(.sale--photo) .menu-nav__row {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .sale:not(.sale--photo) .menu-chip {
    flex: 0 1 auto;
    min-height: var(--tap-sm);
    padding-block: 0;
    white-space: nowrap;
  }
  .toolbar {
    gap: 0.35rem;
  }
  .toolbar .btn {
    padding-inline: 0.6rem;
  }
  .search {
    flex-basis: 9rem;
  }
  .cart__payrow .btn--pay {
    flex: 3 1 0;
    white-space: nowrap;
  }
  .btn--exact {
    font-size: 0.95rem;
    line-height: 1.2;
  }
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(7.75rem, 1fr));
    gap: 0.5rem;
  }
  .item,
  .sale--classic .item {
    min-height: 4.5rem;
    padding: 0.55rem 0.65rem;
  }
  .cart__alerts .notice {
    margin-block: 0.25rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
  }
  .line__ctl {
    gap: 0.35rem;
  }
  .totals {
    padding-block: 0.4rem;
    gap: 0.1rem;
  }
  .cart__head h2 {
    font-size: 1.05rem;
  }
}

/* ---------------------------------------------------------------- a wide screen */

@media (min-width: 100rem) {
  :root {
    --order-w: clamp(24rem, 27vw, 32rem);
  }
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
}

/* ---------------------------------------------------------------- hover, for a pointer that hovers */

@media (hover: hover) {
  .item:hover,
  .cat:hover,
  .btn:hover,
  .tab:hover,
  .line__main:hover,
  .quick:hover,
  .method:hover,
  .key:hover {
    filter: brightness(0.95);
  }
  [data-theme='dark'] .item:hover,
  [data-theme='dark'] .btn:hover,
  [data-theme='dark'] .cat:hover,
  [data-theme='dark'] .tab:hover {
    filter: brightness(1.12);
  }
}

/* ---------------------------------------------------------------- the search, never cut */

/* Browser drive defect 4: at 800 px the search shared its row with three buttons and its hint was cut mid-word. Below
   56rem it takes the whole row; the buttons go on the next. */
@media (max-width: 56rem) {
  .search {
    flex-basis: 100%;
  }
}

/* ---------------------------------------------------------------- an unattended screen: no cashier's chrome */

body[data-unattended] .bar {
  display: none;
}

/* ---------------------------------------------------------------- no form wider than the screen */

/* A fieldset is as wide as its widest content by default (receiving and wastage ran 75 to 153 px past the screen at
   1366 to 800 px, a long item name in a select being the widest). It shrinks to its box; a field fits its label. */
fieldset {
  min-inline-size: 0;
}
label > input:not([type='checkbox']):not([type='radio']),
label > select,
label > textarea {
  max-inline-size: 100%;
}
.stage select {
  max-inline-size: 100%;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- the order type, never clipped */

/* Till UX follow-up: in English at 800×600 «Delivery» was cut off — the three buttons were wider than the order
   panel's head. The head wraps: the order type drops under the title when both do not fit, and its three buttons share
   the row. */
.cart__head {
  flex-wrap: wrap;
}
.cart__head .seg {
  flex: 1 1 auto;
  max-inline-size: 100%;
}
.cart__head .seg__btn {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding-inline: 0.4rem;
  gap: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
}