/* NAAS Receipt Designer — printable receipt visibility rules. The actual layout is a free-form canvas of absolutely-positioned elements, generated inline by JS from the Receipt Designer template (NAAS Receipts settings page). As of the PDF-generation update, the "Download Receipt" button no longer uses window.print() as its primary path — it rasterizes the receipt and builds a real PDF file directly (see downloadReceiptAsPdf() in naas-rd-frontend.js), since mobile browsers' print pipelines commonly ignore the custom @page size below and clamp to standard A4/Letter. These @media print rules are kept only as the fallback path for the rare case where the PDF libraries fail to load (e.g. blocked script, offline). */ .naas-print-receipt { display: none; } /* Explicit white background on the receipt container itself. Without this the container is transparent, and depending on the site theme's own page background and the visitor's browser "print background graphics" setting, the site's own dark page background can show through underneath the receipt on the printed/PDF output — making dark receipt text unreadable against it. This guarantees a plain white page underneath the design no matter what the surrounding site looks like. */ .naas-print-receipt { background: #ffffff !important; } /* Without this, browsers strip background-color / background-image on any element unless the user has manually ticked "Background graphics" in the print dialog — which is off by default. That silently drops the receipt's colored rectangles and divider lines even though the design/JS is 100% correct. Forcing it here makes the printed/PDF output match the designer regardless of that setting. */ .naas-print-receipt, .naas-print-receipt * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } @media print { body > * { display: none !important; } /* Force the page itself white too — belt and braces alongside the .naas-print-receipt background above, in case a theme's own print stylesheet has set a dark background-color directly on or with !important, which would otherwise still win over a background set only on the receipt container. */ html, body { background: #ffffff !important; } .naas-print-receipt { display: block !important; margin: 0 !important; } /* No @page rule here — the page size is set dynamically in JS to match the design's actual canvas dimensions (slip size, A4, or whatever custom size was saved), via a