/* ===== 80mm 热敏小票打印样式 =====
   适用范围: window.print() + 系统打印机(80mm 系列热敏小票机)
   任何品牌小票机只要在 Windows 装好驱动,选择 80mm 纸张即可
*/

/* 屏幕上看不见,只用于打印 */
@media screen {
  .receipt {
    display: none;
  }
}

@media print {
  body * { visibility: hidden; }
  .receipt, .receipt * { visibility: visible; }
  .receipt {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 80mm;
    padding: 4mm 5mm;
    font-family: "Microsoft YaHei", "PingFang SC", "Courier New", monospace;
    font-size: 11pt;
    color: #000;
    background: #fff;
    line-height: 1.4;
  }

  @page {
    size: 80mm auto;
    margin: 0;
  }

  .receipt .shop-name {
    text-align: center;
    font-size: 16pt;
    font-weight: 700;
    margin-bottom: 2mm;
  }
  .receipt .shop-sub {
    text-align: center;
    font-size: 9pt;
    color: #555;
    margin-bottom: 3mm;
  }
  .receipt .sep {
    border-top: 1px dashed #000;
    margin: 2mm 0;
  }
  .receipt .sep-solid {
    border-top: 1px solid #000;
    margin: 2mm 0;
  }
  .receipt .meta {
    display: flex;
    justify-content: space-between;
    font-size: 10pt;
    margin: 1mm 0;
  }
  .receipt .meta .label { color: #333; }
  .receipt .meta .val { font-weight: 600; }

  .receipt table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
    margin: 2mm 0;
  }
  .receipt th {
    text-align: left;
    font-weight: 600;
    padding: 1mm 0;
    border-bottom: 1px dashed #000;
  }
  .receipt th.r, .receipt td.r { text-align: right; }
  .receipt th.c, .receipt td.c { text-align: center; }
  .receipt td { padding: 1mm 0; vertical-align: top; }
  .receipt .item-name { width: 50%; }
  .receipt .item-qty { width: 12%; }
  .receipt .item-price { width: 18%; }
  .receipt .item-sub { width: 20%; }

  .receipt .total {
    display: flex;
    justify-content: space-between;
    font-size: 14pt;
    font-weight: 700;
    margin: 2mm 0 1mm;
  }
  .receipt .total .label { font-size: 12pt; }

  .receipt .footer {
    text-align: center;
    font-size: 10pt;
    margin-top: 4mm;
  }
  .receipt .footer .thanks { font-size: 12pt; font-weight: 600; }
  .receipt .qr-tip { text-align: center; font-size: 9pt; color: #666; margin-top: 2mm; }

  /* 模拟切纸位置视觉提示(打印时不影响,屏幕调试可见) */
  .receipt .cut-hint {
    text-align: center;
    font-size: 8pt;
    color: #999;
    margin-top: 3mm;
  }
}