<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Invoice</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* Core Styles */
        * { 
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            line-height: 1.3;
            color: #111;
            background: #fff;
            font-size: 14px;
        }

        /* Layout */
        .zbs-invoice {
            max-width: 795px;
            margin: 0 auto;
            padding: 25px;
            background: #fff;
            position: relative;
        }

        /* Tables */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        /* Header Section */
        .invoice-header {
            border-bottom: 3px solid #111;
            padding: 15px;
            margin-bottom: 15px;
            display: table;
            width: 100%;
        }

        #zbs_invoice_logos {
            width: 50%;
            float: left;
        }

        #wh-logo-set-img {
            max-width: 60%;
            max-height: 140px;
        }

        .invoice-meta {
            width: 50%;
            float: right;
            padding-top: 0;
            margin-top:-10px;
        }

        .invoice-meta table td {
            padding: 3px 0;
            line-height: 1.3;
            font-size: 11pt;
        }

        .invoice-meta table td:last-child {
            text-align: right;
        }

        .zbs-invoice-number {
            display: inline-block;
            border-bottom: 2px solid #e1def3;
        }

        /* Business Info Section */
        .invoice-infos {
            padding: 0 15px;
            margin-bottom: 20px;
            display: table;
            width: 100%;
        }

        .business-from,
        .business-to {
            width: 50%;
            float: left;
        }

        .business-to {
            float: right;
        }

        .invoice-title4 {
            font-size: 13px;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .business-to .invoice-title4 {
            text-align: right;
        }

        .business-infos {
            font-size: 14px;
            line-height: 1.4;
        }

        /* Line Items Table */
        .striped {
            margin-top: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #e1def3;
        }

        .striped th {
            padding: 12px 10px;
            text-transform: uppercase;
            border-bottom: 2px solid #111;
            font-weight: 600;
            text-align: left;
            font-size: 13px;
        }

        .striped td {
            padding: 10px;
            line-height: 1.3;
            font-size: 14px;
            vertical-align: top;
        }

        .striped tbody tr:nth-child(odd) {
            background: #f6f5fb;
        }

        /* Line Items Styling */
        .jpcrm-invoice-lineitem-description {
            width: 50%;
            text-align: left;
            padding-right: 20px;
        }

        .jpcrm-invoice-lineitem-description .title {
            font-weight: bold;
            margin-bottom: 6px;
            font-size: 15px;
            line-height: 16px;
        }

        .jpcrm-invoice-lineitem-description .subtitle {
            font-size: 14px;
            color: #555;
            line-height: 17px;
        }

        .jpcrm-invoice-lineitem-quantity,
        .jpcrm-invoice-lineitem-price,
        .jpcrm-invoice-lineitem-amount {
            width: 15%;
            text-align: right;
            font-size: 14px;
            vertical-align: middle;
        }

        /* Totals Table */
        .zbs_grand_total td {
            padding: 15px 10px;
            font-size: 16px;
        }

        .zbs-total {
            font-size: 16px;
            font-weight: bold;
        }

        /* Payment Details */
        .zbs-payment-details {
            margin-top: 20px;
            width: 100%;
        }

        .deets {
            text-align: center;
            padding: 25px;
            border: 1px solid #111;
            width: 80%;
            margin-right:20%;
        }

        .deets h2 {
            margin-top: 0;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 20px;
            margin-bottom: 15px;
            color: #111;
        }

        #invoice-payments{
            text-align: right !important;
        }

        .striped tbody tr:nth-child(even) {
            background-color: #f5f5f5;
        }

        .striped tbody tr:nth-child(odd) {
            background-color: #ffffff;
        }

        .striped tbody tr {
            transition: background-color 0.2s ease;
            padding: 5px;
        }

        .striped tbody tr:hover {
            background-color: #e9e9e9;
        }
        .zbs-minitotal{
            font-weight:bold !important;
            text-align: right;
        }
        

        .deets-line {
            font-size: 14px;
            margin: 6px 0;
            line-height: 1.5;
        }

        /* Utility Classes */
        .clear {
            clear: both;
        }

        /* Print Styles */
        @media print {
            body {
                background: white;
            }
            .zbs-invoice {
                margin: 0;
                padding: 10px;
            }
            .striped tbody tr:nth-child(odd) {
                background-color: #f6f5fb !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }
    </style>
</head>

<body>
    <div class="zbs-invoice">
        <div class="invoice-header">
            <div id="zbs_invoice_logos">
                <div class="wh-logo-set">
                    <img id="wh-logo-set-img" src="##LOGO-URL##" alt="Company Logo" />
                </div>
            </div>
            
            <div class="invoice-meta">
                <table>
                    <tr class="wh-large">
                        <td><label>##INVOICE-LABEL-INV-NUMBER##</label></td>
                        <td><div class="zbs-invoice-number">###INVOICE-NUMBER##</div></td>
                    </tr>
                    <tr>
                        <td><label>##INVOICE-LABEL-INV-REF##</label></td>
                        <td>##INVOICE-REF##</td>
                    </tr>
                    <tr>
                        <td><label>##INVOICE-LABEL-INV-DATE##</label></td>
                        <td>##INVOICE-DATE##</td>
                    </tr>
                    <tr>
                        <td><label>##INVOICE-LABEL-DUE-DATE##</label></td>
                        <td>##INVOICE-DUE-DATE##</td>
                    </tr>
                    <tr>
                        <td><label>##INVOICE-LABEL-STATUS##</label></td>
                        <td>##INVOICE-HTML-STATUS##</td>
                    </tr>
                    ##INV-CUSTOM-FIELDS##
                </table>
            </div>
            <div class="clear"></div>
        </div>

        <div class="invoice-infos">
            <div class="business-from">
                <h4 class="invoice-title4">##INVOICE-LABEL-FROM##</h4>
                <div class="business-infos">##BIZ-INFO##</div>
            </div>
            
            <div class="business-to">
                <h4 class="invoice-title4">##INVOICE-LABEL-TO##</h4>
                <div class="business-infos" style="text-align: right;">##INVOICE-CUSTOMER-INFO##</div>
            </div>
            <div class="clear"></div>
        </div>

        <table class="striped">
            <thead id="jpcrm-invoice-lineitems-header">
                ##INVOICE-TABLE-HEADERS##
            </thead>
            <tbody id="jpcrm-invoice-lineitems">
                ##INVOICE-LINE-ITEMS##
            </tbody>
        </table>

        <div>##INVOICE-TOTALS-TABLE##</div>

        <div id="crm-invoice-partials">
            <table>
                <tr>
                    <td style="width:50%">##PRE-INVOICE-PAYMENT-DETAILS##</td>
                    <td>##INVOICE-PARTIALS-TABLE##</td>
                </tr>
            </table>
        </div>

        <div class="zbs-payment-details">
            ##INVOICE-PAYMENT-DETAILS##
            <div class="clear"></div>
        </div>
    </div>
</body>
</html>
