/* Invoice paper — A4 landscape, 1123 x 794 px. Used by preview + PDF. */
@font-face { font-family: 'YekanBakh'; font-weight: 400; src: url('./fonts/yb-en-regular.ttf'); }
@font-face { font-family: 'YekanBakh'; font-weight: 700; src: url('./fonts/yb-en-bold.ttf'); }

.page {
  position: relative; width: 1123px; height: 794px; background: #fff; overflow: hidden;
  direction: rtl; font-family: 'YekanBakh', 'Segoe UI', Tahoma, sans-serif; color: #3a3a3a;
  --line: #d9d9d6; --head: #f2f2f0;
}
.page .hd { position: absolute; top: 24px; right: 30px; text-align: right; font-size: 12.5px; color: #6a6a6a; line-height: 20px; }
.page .hd .l { height: 20px; margin-bottom: 1px; white-space: nowrap; }
.page .hd .cust { font-weight: 700; color: #333; }
.page .hd .n { font-size: 12.5px; }
.page .no { position: absolute; top: 24px; left: 30px; font-size: 12.5px; line-height: 20px; color: #6a6a6a; white-space: nowrap; }
.page .no b { font-weight: 700; color: #333; }
.page .logo { position: absolute; top: 50px; left: 50%; width: 122px; transform: translateX(-50%); }
.page .rule { position: absolute; top: 132px; left: 30px; right: 30px; border-top: 1px solid #d0d0cd; }

.page .tbl { position: absolute; top: 144px; left: 30px; right: 30px; border: 1px solid var(--line); border-bottom: 0; }
.page .th, .page .r {
  display: grid; grid-template-columns: 46px 160px 465px 81px 158px 1fr; direction: rtl;
}
.page .th { height: 32px; background: var(--head); border-bottom: 1px solid var(--line); font-size: 11.5px; color: #777; }
.page .r { height: 79px; overflow: hidden; border-bottom: 1px solid var(--line); }
.page .c { display: flex; align-items: center; justify-content: center; text-align: center; border-left: 1px solid var(--line); min-width: 0; }
.page .c:last-child { border-left: 0; }
.page .th .c { border-left-color: var(--line); }
.page .idx { font-size: 13px; color: #555; }
.page .img { padding: 5px; }
.page .img { overflow: hidden; }
.page .img img { max-width: 148px; max-height: 67px; object-fit: contain; }
.page .desc { flex-direction: column; padding: 0 14px; }
.page .nm { font-size: 14.5px; color: #333; line-height: 1.5; max-width: 100%; }
.page .cd { margin-top: 12px; font-family: 'Segoe UI', 'Lato', sans-serif; font-size: 11.5px; color: #8e8e8e; direction: ltr; letter-spacing: .1px; }
.page .tbl.disc .th, .page .tbl.disc .r { grid-template-columns: 46px 150px 385px 66px 150px 74px 1fr; }
.page .dsc { font-size: 13px; color: #9a9a96; }
.page .dsc.on { color: #b0392b; font-weight: 700; }
.page .qty { font-size: 14.5px; color: #555; }
.page .num { font-size: 13.5px; font-weight: 700; color: #444; }

.page .sum {
  position: absolute; top: 583px; left: 30px; right: 30px; height: 37px; border: 1px solid var(--line); background: var(--head);
  font-size: 14.5px; color: #333; line-height: 35px;
}
.page .sum .lb { position: absolute; right: 350px; top: 0; transform: translateX(50%); white-space: nowrap; }
.page .sum .am { position: absolute; left: 334px; top: 0; transform: translateX(-50%); white-space: nowrap; }

.page .note { display: grid; grid-template-columns: 206px 1fr; direction: rtl; border-bottom: 1px solid var(--line); background: #fff; }
.page .note .nl { background: var(--head); border-left: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #777; }
.page .note .nt { padding: 10px 18px; line-height: 1.95; color: #444; white-space: pre-line; text-align: right; overflow-wrap: anywhere; }
.page .sum.dis { height: 34px; line-height: 32px; }
.page .sum.two { top: 621px; }
.page .ftr { position: absolute; left: 162px; top: 667px; width: 794px; }

@media print {
  @page { size: 297mm 210mm; margin: 0; }
  html, body { margin: 0; background: #fff; }
  .page { width: 1122px; height: 793px; page-break-after: always; break-after: page; }
  .page:last-child { page-break-after: auto; break-after: auto; }
}