/* Thermal receipt styling */ .receipt-font { font-family: 'Courier New', Courier, monospace; font-size: 10px; line-height: 1.1; width: 80mm; height: auto; min-height: 297mm; margin: 0 auto; padding: 5mm; white-space: pre; overflow: hidden; background-color: white; color: black; box-shadow: 0 0 5px rgba(0,0,0,0.1); word-wrap: break-word; } .receipt-font:hover { box-shadow: 0 0 10px rgba(0,0,0,0.2); } .receipt-font .header { text-align: center; margin-bottom: 1em; } .receipt-font .logo-container { text-align: center; margin-bottom: 10px; } .receipt-font .logo { max-width: 60mm; max-height: 20mm; object-fit: contain; } .receipt-font .divider { border-top: 1px dashed #000; margin: 0.5em 0; } .receipt-font .item-row { display: flex; justify-content: space-between; } .receipt-font .item-name { flex: 2; overflow: hidden; text-overflow: ellipsis; } .receipt-font .item-price { flex: 1; text-align: right; } .receipt-font .total-row { font-weight: bold; margin-top: 0.5em; } .receipt-font .footer { margin-top: 1em; text-align: center; font-size: 9pt; } /* Form styling */ #productList { border: 1px solid #e2e8f0; border-radius: 0.375rem; padding: 1rem; margin-bottom: 1rem; } .product-item { display: flex; gap: 1rem; margin-bottom: 0.5rem; align-items: center; } .product-item input { flex: 1; } .remove-product { color: #ef4444; cursor: pointer; } /* Responsive adjustments */ @media print { body * { display: none; } #receiptPreview { display: block !important; position: fixed; left: 0; top: 0; width: 80mm; height: auto; min-height: 297mm; margin: 0; padding: 5mm; background: white; color: black; font-family: 'Courier New', Courier, monospace; font-size: 10px; line-height: 1.1; box-shadow: none; } @page { size: 80mm 297mm; margin: 0; } }