/* ============================================================================
   APILOX RECEIPT (thermal slip)
   ----------------------------------------------------------------------------
   The narrow receipt printed at the POS counter, lifted out of pos.html so
   every surface that acknowledges a payment prints the SAME slip -- POS
   sales, wholesale invoice settlements, and anything added later.

   This is deliberately not the A4 document in apilox-doc.css. They are
   different objects: an invoice is a demand for money on a full page, a
   receipt is proof money changed hands, printed on an 80mm roll. The one
   thing a receipt must carry that an invoice cannot is the METHOD of
   payment -- that only exists once payment is confirmed.
   ============================================================================ */

:root{
  --rcpt-accent:#bcf49d;
  --rcpt-ink:#1f4842;
  --rcpt-text:#1a1a1a;
  --rcpt-muted:#6b6f6e;
  --rcpt-line:#e6e6e6;
  --rcpt-panel:#f7f7f8;
}

.rcpt-slip{
  width:80mm; max-width:100%; box-sizing:border-box;
  background:#fff; padding:20px;
  font-family:'Google Sans Flex Variable', -apple-system, BlinkMacSystemFont,
              "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:12.5px; color:var(--rcpt-text); line-height:1.4;
}
.rcpt-viewport{ background:#ecf4e9; padding:18px 12px; }

.rcpt-slip .r-logo{ max-height:32px; max-width:60%; width:auto; display:block; margin-bottom:16px; }
.rcpt-slip .r-logo-fallback{
  font-size:15px; font-weight:800; letter-spacing:.03em; color:var(--rcpt-ink); margin-bottom:16px;
}
.rcpt-slip .r-hello{ font-size:13px; font-weight:700; color:var(--rcpt-ink); margin-bottom:3px; }
.rcpt-slip .r-headline{ font-size:15px; font-weight:700; margin-bottom:5px; }
.rcpt-slip .r-desc{ font-size:12px; color:var(--rcpt-muted); line-height:1.5; margin-bottom:16px; }
.rcpt-slip .r-dashed{ border-top:1px dashed var(--rcpt-line); margin-bottom:14px; }
.rcpt-slip .r-section-label{ font-size:12px; font-weight:700; color:var(--rcpt-ink); margin-bottom:4px; }
.rcpt-slip .r-order-row{ display:flex; align-items:baseline; gap:4px; font-size:12.5px; margin-bottom:14px; }
.rcpt-slip .r-order-row span:last-child{ font-weight:700; color:var(--rcpt-ink); }

.rcpt-slip .r-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.rcpt-slip .r-item-info{ flex:1; min-width:0; }
.rcpt-slip .r-item-name{ font-size:12.5px; font-weight:600; color:var(--rcpt-ink); }
.rcpt-slip .r-item-meta{ font-size:10.5px; color:var(--rcpt-muted); margin-top:1px; }
.rcpt-slip .r-item-total{ font-size:12.5px; font-weight:700; flex-shrink:0; color:var(--rcpt-ink); }

.rcpt-slip .r-box{ background:var(--rcpt-panel); padding:14px; margin-top:2px; }
.rcpt-slip .r-box-label{ font-size:11.5px; color:var(--rcpt-muted); }
.rcpt-slip .r-box-date{ font-size:14px; font-weight:700; margin-top:2px; margin-bottom:12px; }
.rcpt-slip .r-box .r-dashed{ margin-bottom:12px; }
.rcpt-slip .r-plain-row{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:6px; }
.rcpt-slip .r-plain-row span:first-child{ color:var(--rcpt-muted); }
.rcpt-slip .r-plain-row span:last-child{ font-weight:600; color:var(--rcpt-ink); }
.rcpt-slip .r-order-total-row{ display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; }
.rcpt-slip .r-order-total-label{ font-size:13.5px; font-weight:700; color:var(--rcpt-ink); }
.rcpt-slip .r-order-total-value{ font-size:14.5px; font-weight:800; color:var(--rcpt-ink); }

/* The payment method is the reason this document exists -- it is what
   separates a receipt from a copy of the invoice, so it is given its own
   emphasised band rather than being another quiet row. */
.rcpt-slip .r-paid-band{
  margin-top:12px; padding:9px 12px; background:var(--rcpt-accent); color:var(--rcpt-ink);
  display:flex; justify-content:space-between; align-items:baseline; font-weight:800; font-size:12.5px;
}
.rcpt-slip .r-paid-band .m{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
/* Wholesale settlements print without the accent fill -- a wholesale
   invoice is already stamped "Paid" on its own document, so the receipt
   doesn't need the same emphasis a POS counter sale does. */
.rcpt-slip .r-paid-band.plain{ background:var(--rcpt-panel); color:var(--rcpt-text); }

.rcpt-slip .r-shopfrom-label{ font-size:11.5px; color:var(--rcpt-muted); margin-top:18px; margin-bottom:2px; }
.rcpt-slip .r-shopfrom-name{ font-size:13.5px; font-weight:700; color:var(--rcpt-ink); }
.rcpt-slip .r-shopfrom-sub{ font-size:11.5px; color:var(--rcpt-muted); }
.rcpt-slip .r-barcode{ display:flex; justify-content:center; align-items:flex-end; gap:1px; height:36px; margin-top:20px; }
.rcpt-slip .r-barcode span{ display:inline-block; background:var(--rcpt-text); height:100%; }
.rcpt-slip .r-footer{
  margin:18px -20px -20px; padding:12px 20px; text-align:center;
  background:var(--rcpt-panel); font-size:10px; color:var(--rcpt-muted);
}

/* ── Print ───────────────────────────────────────────────────────────────
   Shares the .doc-print-root show/hide mechanism with apilox-doc.css so the
   two templates can live on the same page without fighting. The page size
   is injected at print time (see js/apilox-receipt.js) because @page cannot
   be scoped per document type. */
@media print{
  .rcpt-viewport{ background:#fff !important; padding:0 !important; }
  /* Fixed width, matching what print.js measures against: 80mm roll less
     the 4mm margins. Leaving it `auto` let print reflow the slip narrower
     than the measured height assumed, and it spilled onto a second page. */
  .rcpt-slip{ width:72mm; padding:4mm; }
  .rcpt-slip .r-paid-band, .rcpt-slip .r-box, .rcpt-slip .r-footer{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
}