/* Чек: документ, который отдают клиенту.

   Выглядит нарочно иначе, чем экран кабинета: одна светлая полоса
   сверху вниз — шапка продавца, позиции, итог, знак. Так его узнают
   с одного взгляда и не путают с записью о продаже, из которой он
   сделан.

   Разделители — линии, а не рамки вокруг каждой позиции: чек читают
   подряд, сверху вниз, и коробки в нём сбивали бы порядок чтения.

   Один вид на кабинет и на страницу по коду: документ, который двое
   сверяют глазами, стоя друг напротив друга, не может выглядеть
   у них по-разному. */

.receipt {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* Кто продал — крупно и по центру: с этого чек читают, и это
   единственное имя на нём. */
.receipt__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
}

.receipt__shop {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
}

.receipt__kind {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* Номер и время — по краям одной строки: их называют вслух, когда
   ищут чек, и стоять они должны там, где глаз их находит сразу. */
.receipt__marks {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.receipt__number {
  font-weight: 650;
  color: var(--text);
}

.receipt__lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.receipt__line {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.receipt__line + .receipt__line {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}

/* Наименование — главное в позиции: его читают, по нему спорят,
   его ищут глазами в списке. */
.receipt__what {
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.3;
}

.receipt__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* «2 × 1 200 ₽» — приглушённо: по цене за штуку сверяют ценник,
   но платят по сумме справа. */
.receipt__count {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.receipt__sum {
  font-size: var(--fs-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Итог — то, ради чего чек и берут в руки: крупнее всего на нём,
   отделён линией. */
.receipt__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.receipt__total-name {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.receipt__total-value {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Знак чека: QR и код под ним. Код набирают руками, когда камеру
   не достать, — телефон разряжен, руки заняты, свет плохой. */
.receipt__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.receipt__qr {
  width: 46cqw;
  max-width: 100%;
  padding: var(--sp-3);
  /* Белое поле обязательно: без него камера не находит границу кода
     (assets/css/components/qr.css). */
  background: var(--qr-paper);
  border-radius: var(--r-md);
  color: var(--qr-ink);
}

.receipt__code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent-text);
}

/* «Чек не фискальный» — мелким и приглушённо, но обязательно:
   продукт не выдаёт фискальных документов ни в одной стране,
   и молчание об этом читалось бы как обещание. */
.receipt__note {
  text-align: center;
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}