.payment-receipt { --receipt-green: #245b36; --receipt-gold: #c4a13a; max-width: 650px; padding: 22px; color: #20372b; background: white; font: 12px/1.55 "Segoe UI", "Myanmar Text", sans-serif; }
.payment-receipt .receipt-brand { display: flex; align-items: center; gap: 18px; border-top: 4px solid var(--receipt-green); border-bottom: 1px solid #c4a13a; padding: 14px 0 12px; }
.payment-receipt .receipt-brand-mark:empty { display: none; }
.payment-receipt .receipt-logo { display: block; width: 76px; height: 76px; object-fit: contain; }
.payment-receipt .receipt-brand-text { flex: 1; min-width: 0; }
.payment-receipt .receipt-brand h2 { margin: 0 0 3px; font-size: 20px; line-height: 1.35; letter-spacing: 0; }
.payment-receipt .receipt-brand p { margin: 2px 0; font-size: 11px; color: #5c6d61; white-space: pre-line; }
.payment-receipt .receipt-branch { display: inline-block; font-size: 10px; color: #40604a; margin-top: 3px; }
.payment-receipt .receipt-document-heading { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 13px 0; }
.payment-receipt .receipt-document-heading small { color: #6b785f; font-size: 10px; }
.payment-receipt .receipt-document-heading h3 { margin: 3px 0 0; font-size: 14px; line-height: 1.5; }
.payment-receipt .receipt-number { text-align: right; flex-shrink: 0; }
.payment-receipt .receipt-number strong { display: block; font-size: 14px; letter-spacing: .3px; }
.payment-receipt .receipt-copy-label { color: #64735e; border: 1px solid #dbe1d4; border-radius: 4px; padding: 3px 8px; display: inline-block; font-size: 9px; margin-bottom: 8px; }
.payment-receipt .receipt-meta { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; margin: 0 0 14px; padding: 12px 14px; background: #f5f7f0; border: 1px solid #e2e7db; border-radius: 6px; font-size: 11px; }
.payment-receipt .receipt-meta small { display: block; color: #6a785f; font-size: 9px; margin-bottom: 4px; }
.payment-receipt .receipt-meta strong { display: block; font-size: 13px; margin-bottom: 3px; }
.payment-receipt .receipt-meta span { display: block; font-size: 10px; }
.payment-receipt .receipt-items { width: 100%; border-collapse: collapse; white-space: normal; }
.payment-receipt .receipt-items th { background: #245b36; color: white; text-transform: none; letter-spacing: 0; font-size: 10px; padding: 8px 10px; border: 0; }
.payment-receipt .receipt-items td { padding: 8px 10px; font-size: 11px; vertical-align: middle; border-bottom: 1px solid #e4e8df; }
.payment-receipt .receipt-items td strong { display: block; font-size: 11px; font-weight: 600; }
.payment-receipt .receipt-items td small { display: block; color: #6f7d68; font-size: 9px; margin-top: 2px; }
.payment-receipt .receipt-items .quantity { width: 12%; text-align: center; }
.payment-receipt .receipt-items .money { width: 28%; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payment-receipt .receipt-settlement { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; padding: 15px 0; }
.payment-receipt .receipt-payment-details > small { display: block; color: #6a785f; font-size: 9px; margin-bottom: 5px; }
.payment-receipt .receipt-payment-details strong { font-size: 10px; font-weight: 600; }
.payment-receipt .receipt-payment-details div + div { margin-top: 7px; }
.payment-receipt .receipt-payment-details div small { display: block; font-size: 9px; color: #6f7d68; overflow-wrap: anywhere; }
.payment-receipt .receipt-grand-total { padding: 10px 14px; border: 1px solid #d9e3d1; border-left: 3px solid #c4a13a; background: #f5f7f0; text-align: right; border-radius: 4px; }
.payment-receipt .receipt-grand-total small { display: block; font-size: 10px; }
.payment-receipt .receipt-grand-total strong { display: block; color: #245b36; font-size: 25px; font-weight: 750; line-height: 1.3; font-variant-numeric: tabular-nums; }
.payment-receipt .receipt-grand-total span { display: block; color: #6a785f; font-size: 9px; }
.payment-receipt .receipt-note { margin: 0 0 10px; font-size: 10px; overflow-wrap: anywhere; white-space: pre-wrap; }
.payment-receipt .receipt-footer { border-top: 1px solid #dce3d4; margin-top: 0; padding-top: 10px; text-align: center; font-size: 10px; white-space: normal; }
.payment-receipt .receipt-footer > p { margin: 0 0 12px; white-space: pre-line; }
.payment-receipt .receipt-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: center; }
.payment-receipt .receipt-signatures span, .payment-receipt .receipt-signatures strong, .payment-receipt .receipt-signatures small { display: block; font-size: 9px; }
.payment-receipt .receipt-signatures strong { min-height: 18px; font-weight: 500; }
.payment-receipt .receipt-signatures small { color: #93a08a; }
.payment-receipt .receipt-footer-line { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 6px; border-top: 1px solid #e7eadf; color: #8b9684; font-size: 8px; }
.payment-receipt.thermal { max-width: 302px; padding: 8px; }
.payment-receipt.thermal .receipt-brand { flex-direction: column; text-align: center; gap: 6px; }
.payment-receipt.thermal .receipt-logo { width: 56px; height: 56px; }
.payment-receipt.thermal .receipt-brand h2 { font-size: 16px; }
.payment-receipt.thermal .receipt-document-heading, .payment-receipt.thermal .receipt-settlement { display: block; }
.payment-receipt.thermal .receipt-number { text-align: left; margin-top: 7px; }
.payment-receipt.thermal .receipt-meta { grid-template-columns: 1fr; }
.payment-receipt.thermal .receipt-grand-total { margin-top: 10px; }
.payment-receipt.thermal .receipt-items td, .payment-receipt.thermal .receipt-items th { padding: 6px 3px; }
@page school-receipt { size: A5 portrait; margin: 8mm; }
@page school-thermal { size: auto; margin: 4mm; }
@media print {
  html, body { background: white !important; }
  #print-area .payment-receipt { page: school-receipt; width: 100%; max-width: none; padding: 0; }
  #print-area .payment-receipt:not(.thermal) { font-size: 11px; line-height: 1.4; }
  #print-area .payment-receipt:not(.thermal) .receipt-brand { padding: 8px 0; gap: 14px; }
  #print-area .payment-receipt:not(.thermal) .receipt-logo { width: 70px; height: 70px; }
  #print-area .payment-receipt:not(.thermal) .receipt-brand h2 { font-size: 18px; }
  #print-area .payment-receipt:not(.thermal) .receipt-brand p { font-size: 10px; }
  #print-area .payment-receipt:not(.thermal) .receipt-document-heading { padding: 9px 0; }
  #print-area .payment-receipt:not(.thermal) .receipt-document-heading h3 { font-size: 13px; }
  #print-area .payment-receipt:not(.thermal) .receipt-copy-label { font-size: 8px; margin-bottom: 5px; }
  #print-area .payment-receipt:not(.thermal) .receipt-meta { grid-template-columns: 1.35fr 1fr !important; }
  #print-area .payment-receipt:not(.thermal) .receipt-meta { padding: 8px 10px; margin-bottom: 10px; gap: 12px; }
  #print-area .payment-receipt:not(.thermal) .receipt-meta strong { font-size: 12px; margin-bottom: 2px; }
  #print-area .payment-receipt:not(.thermal) .receipt-meta small { font-size: 8px; margin-bottom: 2px; }
  #print-area .payment-receipt:not(.thermal) .receipt-items td { padding: 5px 8px; font-size: 10px; }
  #print-area .payment-receipt:not(.thermal) .receipt-items td strong { font-size: 10px; }
  #print-area .payment-receipt:not(.thermal) .receipt-items td small { font-size: 8px; margin-top: 1px; }
  #print-area .payment-receipt:not(.thermal) .receipt-items th { padding: 6px 8px; font-size: 9px; }
  #print-area .payment-receipt:not(.thermal) .receipt-settlement { padding: 10px 0; }
  #print-area .payment-receipt:not(.thermal) .receipt-grand-total { padding: 8px 10px; }
  #print-area .payment-receipt:not(.thermal) .receipt-grand-total strong { font-size: 23px; }
  #print-area .payment-receipt:not(.thermal) .receipt-footer > p { margin-bottom: 8px; }
  #print-area .payment-receipt:not(.thermal) .receipt-signatures strong { min-height: 14px; }
  #print-area .payment-receipt:not(.thermal) .receipt-footer-line { margin-top: 8px; }
  .payment-receipt .receipt-brand, .payment-receipt .receipt-document-heading, .payment-receipt .receipt-meta, .payment-receipt .receipt-settlement, .payment-receipt .receipt-footer { break-inside: avoid; }
  .payment-receipt .receipt-items thead { display: table-header-group; }
  .payment-receipt .receipt-items tr { break-inside: avoid; }
  #print-area .payment-receipt.thermal { page: school-thermal; width: 72mm; max-width: 72mm; }
}