.customer-invoice{--brown:#744e35;--dark-brown:#622e10;--text:#2f2118;--muted:#8b7567;--border:#e2d7d0;font-family:Arial,sans-serif;font-size:14px;max-width:480px;margin:auto}
.customer-invoice .status-banner{
      display: flex;
      align-items: flex-start;
      gap: 9px;
      padding: 10px 12px;
      border-left: 3px solid;
      border-radius: 0 10px 10px 0;
      font-size: 12px;
      line-height: 1.5;
      margin-top: 12px;
      margin-bottom: 14px;
    }
.customer-invoice .status-banner svg{
      flex-shrink: 0;
      margin-top: 1px;
    }
.customer-invoice .status-banner-loading{
      background: #e8f4fd;
      border-color: #378ADD;
      color: #185FA5;
    }
.customer-invoice .status-banner-success{
      background: #eaf3de;
      border-color: #639922;
      color: #3B6D11;
    }
.customer-invoice .status-banner-error{
      background: #fcebeb;
      border-color: #E24B4A;
      color: #A32D2D;
    }
.customer-invoice .total-box{
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-top: 1px solid var(--border);
      margin-top: 12px;
      font-size: 15px;
      font-weight: 800;
      color: var(--dark-brown);
    }
.customer-invoice .status-pill{
      display: inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
    }
.customer-invoice .status-new{ background: #fde8e8; color: #b91c1c; }
.customer-invoice .status-paid{ background: #fef9c3; color: #92400e; }
.customer-invoice .status-confirmed{ background: #dcfce7; color: #166534; }
.customer-invoice .status-ready{ background: #dcfce7; color: #166534; }
.customer-invoice .status-out{ background: #dcfce7; color: #166534; }
.customer-invoice .status-completed{ background: #14532d; color: #f0fdf4; }
.customer-invoice .status-cancelled{ background: #f3f4f6; color: #6b7280; }
.customer-invoice .status-default{ background: #f0e4dc; color: var(--dark-brown); }
.customer-invoice .invoice{
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 18px;
      margin: 14px 0;
      color: var(--text);
    }
.customer-invoice .invoice-header{
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-bottom: 14px;
      margin-bottom: 14px;
      border-bottom: 1px solid var(--border);
      gap: 6px;
    }
.customer-invoice .invoice-logo{
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--dark-brown);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 900;
      overflow: hidden;
      border: 1px solid var(--border);
      margin-bottom: 4px;
    }
.customer-invoice .invoice-logo img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
.customer-invoice .invoice-shop-name{
      font-size: 18px;
      font-weight: 900;
      color: var(--dark-brown);
      margin: 0;
      letter-spacing: 0.5px;
    }
.customer-invoice .invoice-slogan{
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.5px;
      margin: 0;
      font-style: italic;
    }
.customer-invoice .invoice-status-row{
      margin-top: 6px;
    }
.customer-invoice .invoice h3{
      margin: 0 0 8px;
      color: var(--dark-brown);
    }
.customer-invoice .invoice-order-badge{
      display: block;
      width: fit-content;
      margin: 0 auto 14px;
      padding: 8px 18px;
      background: var(--dark-brown);
      color: #fff;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.5px;
      text-align: center;
    }
.customer-invoice .invoice-footer{
      text-align: center;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px dashed var(--border);
      font-size: 12px;
      color: var(--muted);
      line-height: 1.5;
    }
.customer-invoice .invoice-row{
      display: flex;
      justify-content: space-between;
      gap: 14px;
      margin: 7px 0;
      font-size: 14px;
    }
.customer-invoice .invoice-row strong{
      color: var(--dark-brown);
    }
.customer-invoice .invoice-items{
      margin-top: 12px;
      border-top: 1px solid var(--border);
      padding-top: 10px;
    }
.customer-invoice .total-box:not(:where(#invoiceBox,.customer-invoice .status-pill:not(:where(#invoiceBox{ font-weight: 600; }
.customer-invoice #invoicePickupFind){ margin-top: 12px; }
.customer-invoice #invoicePickupFind)[hidden],.customer-invoice #invoicePickupFind) [hidden]{ display: none; }
.customer-invoice #invoicePickupPanelFind){ margin-top: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.customer-invoice #invoicePickupAddressLinkFind),.customer-invoice #invoicePickupAddressTextFind){ display: block; margin: 10px 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; color: var(--dark-brown); user-select: text; }
.customer-invoice #invoicePickupAddressLinkFind){ text-decoration: underline; text-underline-offset: 3px; }
.customer-invoice #pickupCopyStatusFind){ display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.customer-invoice .pricing-summary{ margin-top: 12px; border-top: 1px solid var(--border); }
.customer-invoice .pricing-row{ display: flex; justify-content: space-between; gap: 18px; padding: 8px 0 0; color: var(--muted); font-size: 13px; }
.customer-invoice .pricing-discount{ color: #6f5a2c; font-weight: 700; }
.customer-invoice .pricing-summary .total-box{ margin-top: 8px; }

.customer-invoice .invoice-preserve-text{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}