@font-face {
  font-family: "Urbanist";
  src: url("assets/assets/fonts/Urbanist-Variable.ttf") format("truetype");
  font-display: swap;
}

.receipt-root {
  --receipt-width: 80mm;
  box-sizing: border-box;
  width: min(var(--receipt-width), 100%);
  margin: 0 auto;
  padding: 6mm;
  color: #162126;
  background: #fdfcf9;
  font: 13px/1.35 "Urbanist", system-ui, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
}

.receipt-root h1,
.receipt-root p {
  margin: 0 0 3px;
}

.receipt-muted {
  color: #5b676c;
}

.receipt-location {
  margin-top: 8px !important;
}

.receipt-meta,
.receipt-lines,
.receipt-total,
.receipt-footer {
  border-top: 1px solid #cbd0d2;
  margin-top: 12px;
  padding-top: 10px;
}

.receipt-meta span,
.receipt-meta strong,
.receipt-row > div span {
  display: block;
}

.receipt-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}

.receipt-number {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.receipt-total {
  font-size: 17px;
}

.receipt-payment {
  color: #37464c;
}

.receipt-footer {
  text-align: center;
}

@page {
  size: var(--receipt-width) auto;
  margin: 0;
}

@media print {
  body {
    margin: 0;
    background: #fdfcf9 !important;
  }

  .receipt-root {
    width: var(--receipt-width);
    min-height: 0;
  }
}