/*
 * The sale screen's sheets (POS-UX1): the payment, the discount and the sale's «done» card, over the screen
 * and never below the fold — with a numeric keypad, quick-cash buttons and the change in large type. Every
 * colour is a token (tokens.css). A sheet is a panel of its own: its backdrop closes it, so does its close
 * button and Escape. On a phone it rises from the bottom edge and takes the full width.
 */

.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}
.sheet {
  position: relative;
  width: min(100%, 28rem);
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem 1.25rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sheet);
  box-shadow: var(--e2);
}
.sheet--wide {
  width: min(100%, 46rem);
}
.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.sheet__head h2 {
  margin: 0;
  font-size: 1.25rem;
}
.sheet__close {
  min-width: var(--tap-sm);
  min-height: var(--tap-sm);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/*
 * Till UX slice 4: a sheet's head and foot are pinned — the title and its close button at the top, the sheet's
 * message and its commit button at the bottom — and only what is between them scrolls. «إتمام البيع» is in view
 * without scrolling at 1920×1080, 1366×768, 1180×820, 1024×768, 820×1180 and 800×600.
 */
.sheet__head {
  position: sticky;
  top: -1rem;
  z-index: 1;
  margin: -1rem -1.25rem 0;
  padding: 1rem 1.25rem 0.5rem;
  background: var(--surface);
}
.sheet__foot {
  position: sticky;
  bottom: -1.25rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 -1.25rem -1.25rem;
  padding: 0.6rem 1.25rem 1.25rem;
  background: var(--surface);
  border-block-start: 1px solid var(--line);
}
.sheet__foot .btn {
  margin: 0;
}
.sheet__foot [role='alert']:empty {
  display: none;
}

/* ---------------------------------------------------------------- the keypad */

.keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.key {
  min-height: var(--key);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.key:active {
  background: var(--accent-soft);
}
.key--op {
  background: var(--accent-soft);
}
.key--blank {
  visibility: hidden;
}

/* ---------------------------------------------------------------- the payment sheet */

.pay {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pay__due {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--bg);
}
.pay__due-amount {
  font-size: 2.75rem;
  line-height: 1.1;
}
/* r42c N2: the order type the sale will be recorded under, read before the money is taken */
.pay__type {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 1.125rem;
}
.pay__methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.method {
  min-height: var(--tap);
  padding: 0 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.method--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.pay__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
  gap: 1rem;
  align-items: start;
}
.pay[data-method='CARD'] .pay__body {
  grid-template-columns: minmax(0, 1fr);
}
.pay__fields {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.pay__entry {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.85rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.pay__given {
  font-size: 2rem;
  font-weight: 700;
}
.pay__quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.quick {
  min-height: var(--tap);
  padding: 0 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.quick--exact {
  grid-column: 1 / -1;
  background: var(--accent-soft);
}
.quick__amount {
  font-weight: 700;
}
.pay__change {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
}
.pay__change--ok {
  background: var(--good-bg);
  color: var(--good-ink);
}
.pay__change--ok strong {
  font-size: 2rem;
}
.pay__change--short {
  background: var(--stop-bg);
  color: var(--stop);
  font-weight: 700;
}
.pay__parts {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.2rem;
}
.pay__ref {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 600;
}
.pay__ref input {
  min-width: 0;
}
#pay-msg:empty,
#d-msg:empty {
  display: none;
}
#pay-msg .notice,
#d-msg .notice {
  margin: 0;
}

/* ---------------------------------------------------------------- the done card */

.done {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
}
.done__title {
  margin: 0;
  color: var(--good-ink);
  font-size: 1.6rem;
  font-weight: 700;
}
.done__receipt {
  margin: 0;
  color: var(--ink-soft);
}
.done__change {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--good-bg);
  color: var(--good-ink);
  font-size: 1.1rem;
}
.done__change strong {
  font-size: 3rem;
  line-height: 1.1;
}
.done__change--none {
  background: var(--surface-2);
  color: var(--ink-soft);
}
.done__actions {
  display: grid;
  gap: 0.5rem;
}
.done__actions .btn {
  margin: 0;
}

/* ---------------------------------------------------------------- the discount popup */

.discount {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.discount__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.discount__pick,
.discount__entry {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.discount .seg {
  display: flex;
}
.discount .seg__btn {
  flex: 1;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chip-btn {
  min-height: var(--tap-sm);
  padding: 0 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.chip-btn--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 700;
}
.reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.reasons legend {
  margin-bottom: 0.35rem;
  padding: 0;
  font-weight: 600;
}
.reason {
  min-height: var(--tap);
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.reason--on {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  font-weight: 700;
}
.disc__value {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 2rem;
  font-weight: 700;
}
.disc__unit {
  color: var(--ink-soft);
  font-size: 1.1rem;
}
.disc__figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
}
.disc__figures dt {
  color: var(--ink-soft);
}
.disc__figures dd {
  margin: 0;
  font-weight: 700;
}
.cap-hint {
  margin: 0;
  color: var(--ink-soft);
}
.cap-over {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  background: var(--stop-bg);
  color: var(--stop);
  font-weight: 700;
}
.discount__actions {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.5rem;
}
.discount__actions .btn {
  margin: 0;
}

/*
 * Till UX slice 4: the five ways to pay in one segmented row on a sheet wide enough for them; a short landscape
 * screen (an iPad or a laptop at 768 to 820 px high) draws the pay sheet in two columns — what is paid on the start
 * side, the keypad on the end side — and a short screen (≤ 680 px: the 800×600 cashier screen) tightens it.
 */
@media (min-width: 40rem) {
  .pay__methods {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
@media (min-width: 62.5rem) and (max-height: 51.25rem) {
  .sheet--wide {
    width: min(100%, 60rem);
  }
  .pay:not([data-method='CARD']) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
    column-gap: 1.25rem;
    row-gap: 0.6rem;
    align-items: start;
  }
  .pay:not([data-method='CARD']) > * {
    grid-column: 1;
  }
  .pay:not([data-method='CARD']) > .pay__body:not(.pay__body--split) {
    display: contents;
  }
  .pay:not([data-method='CARD']) .pay__fields {
    grid-column: 1;
  }
  .pay:not([data-method='CARD']) > .pay__body > .keypad {
    grid-column: 2;
    grid-row: 1 / span 5;
  }
  .pay:not([data-method='CARD']) > .pay__foot {
    grid-column: 1 / -1;
  }
}
@media (max-height: 42.5rem) {
  .sheet-layer {
    padding: 0.4rem;
  }
  .sheet {
    gap: 0.5rem;
  }
  .pay {
    gap: 0.5rem;
  }
  .pay__due {
    padding: 0.4rem 0.85rem;
  }
  .pay__due-amount {
    font-size: 2rem;
  }
  .pay .key {
    min-height: 2.9rem;
  }
  .pay__quick .quick {
    min-height: var(--tap-sm);
  }
}

/* ---------------------------------------------------------------- the phone: a sheet from the bottom edge */

@media (max-width: 30rem) {
  .sheet-layer {
    align-items: flex-end;
    padding: 0;
  }
  .sheet {
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 0.75rem 0.85rem 1rem;
  }
  .sheet__head {
    top: -0.75rem;
    margin: -0.75rem -0.85rem 0;
    padding: 0.75rem 0.85rem 0.5rem;
  }
  .sheet__foot {
    bottom: -1rem;
    margin: 0 -0.85rem -1rem;
    padding: 0.6rem 0.85rem 1rem;
  }
  .pay__body,
  .discount__cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .pay__due-amount {
    font-size: 2.25rem;
  }
}