/*
 * pos-receipt-print.css
 *
 * Fallback @media print styles for the slip preview panel.
 * The real thermal print job goes through thermal-print.ts (iframe) —
 * these rules only fire if window.print() is called on the main page directly.
 */

@media print {
  /* 80 mm roll — height tracks the content, zero blank tail */
  @page {
    size: 80mm auto;
    margin: 0;
  }

  /* Force RTL and thermal width on the document root */
  html {
    direction: rtl !important;
    width: 80mm !important;
  }

  /* Hide everything except the slip */
  body > * {
    display: none !important;
  }

  /* The modal overlay needs to be block but transparent */
  body > *:has(#pos-slip-print-area) {
    display: block !important;
    position: static !important;
    background: transparent !important;
  }

  #pos-slip-print-area,
  #pos-slip-print-area * {
    visibility: visible !important;
  }

  #pos-slip-print-area {
    display: block !important;
    position: static !important;
    width: 80mm !important;
    margin: 0 !important;
    padding: 3mm 4mm !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* ── Screen preview styles ───────────────────────────────────────────────── */

#pos-slip-print-area {
  width: 100%;
  max-width: 76mm;
  font-family: "Vazirmatn", "Tahoma", "Arial", sans-serif;
  font-size: 12px;
  direction: rtl;
  text-align: right;
}

.receipt-divider {
  border-top: 1px dashed #000;
  margin: 3mm 0;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.receipt-total {
  font-weight: bold;
  font-size: 14px;
}
