<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* ═══════════════════════════════════════════════
   CONTRACT / AGREEMENT — Formal Legal Document
   ═══════════════════════════════════════════════ */

/* ── Print-ready page setup ── */
@page {
    size: {{ style.page_format | default('Letter') }};
    margin: {{ style.margin_top | default('20mm') }} {{ style.margin_right | default('22mm') }} {{ style.margin_bottom | default('20mm') }} {{ style.margin_left | default('22mm') }};
    @bottom-center {
        content: "Page " counter(page) " of " counter(pages);
        font-size: 9px;
        color: #94a3b8;
        font-family: {{ style.font_family | default('Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif') }};
    }
}

:root {
    --primary: {{ style.primary_color | default('#1e293b') }};
    --primary-dark: {{ style.primary_dark | default('#0f172a') }};
    --primary-light: {{ style.primary_light | default('#e2e8f0') }};
    --primary-faint: {{ style.primary_faint | default('#f8fafc') }};
    --accent: {{ style.accent_color | default('#475569') }};
    --font: {{ style.font_family | default('Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif') }};
    --font-serif: {{ style.serif_font | default('Georgia, "Times New Roman", Times, serif') }};
    --text-heading: {{ style.text_primary | default('#0f172a') }};
    --text-body: {{ style.text_secondary | default('#334155') }};
    --text-muted: {{ style.text_tertiary | default('#94a3b8') }};
    --border: {{ style.border_color | default('#cbd5e1') }};
    --border-light: {{ style.border_light | default('#e2e8f0') }};
    --bg-subtle: {{ style.bg_subtle | default('#f8fafc') }};
    --bg-card: #ffffff;
}

/* ── Print color preservation ── */
*, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    -print-color-adjust: exact !important;
    color-adjust: exact !important;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-serif);
    font-size: 11.5px;
    color: var(--text-body);
    line-height: 1.7;
    background: #eef2f7;
    padding: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════
   DOCUMENT SHELL
   ═══════════════════════════════════════════════ */
.document {
    max-width: 720px;
    margin: 0 auto;
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════════════
   TOP RULE
   ═══════════════════════════════════════════════ */
.top-rule {
    height: 4px;
    background: var(--primary);
}

/* ═══════════════════════════════════════════════
   TITLE BLOCK
   ═══════════════════════════════════════════════ */
.title-block {
    padding: 32px 44px 24px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.title-block .logo-row {
    margin-bottom: 20px;
}

.title-block .logo {
    max-width: 130px;
    max-height: 40px;
    display: block;
    margin: 0 auto;
}

.title-block .doc-type-label {
    font-family: var(--font);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.title-block .doc-title {
    font-family: var(--font);
    font-size: 24px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 1.15;
    margin-bottom: 14px;
}

.title-meta {
    display: flex;
    justify-content: center;
    gap: 32px;
    font-family: var(--font);
}

.title-meta .meta-item {
    text-align: center;
}

.title-meta .meta-label {
    font-size: 8.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.title-meta .meta-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-heading);
}

/* ═══════════════════════════════════════════════
   CONTENT AREA
   ═══════════════════════════════════════════════ */
.content {
    padding: 28px 44px 32px;
}

/* ═══════════════════════════════════════════════
   PARTIES SECTION
   ═══════════════════════════════════════════════ */
.parties-section {
    margin-bottom: 24px;
}

.parties-intro {
    font-size: 11.5px;
    color: var(--text-body);
    font-style: italic;
    margin-bottom: 16px;
    text-align: center;
    line-height: 1.7;
}

.parties-grid {
    display: flex;
    gap: 24px;
}

.party-block {
    flex: 1;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-subtle);
}

.party-label {
    font-family: var(--font);
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--primary);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-light);
}

.party-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 4px;
    line-height: 1.3;
}

.party-address {
    font-size: 10.5px;
    color: var(--text-body);
    line-height: 1.55;
}

.party-email, .party-phone {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════
   RECITALS / PREAMBLE
   ═══════════════════════════════════════════════ */
.recitals-section {
    margin-bottom: 24px;
}

.recitals-text {
    font-size: 11.5px;
    color: var(--text-body);
    line-height: 1.75;
    text-align: justify;
    padding: 16px 22px;
    background: var(--bg-subtle);
    border-left: 3px solid var(--primary);
    border-radius: 0 4px 4px 0;
}

/* ═══════════════════════════════════════════════
   TERMS — Numbered Sections
   ═══════════════════════════════════════════════ */
.terms-section {
    margin-bottom: 24px;
}

.terms-heading {
    font-family: var(--font);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary);
    margin-bottom: 16px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--primary);
}

.term-section {
    margin-bottom: 18px;
    page-break-inside: avoid;
}

.term-section:last-child {
    margin-bottom: 0;
}

.term-heading {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 6px;
    line-height: 1.4;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.term-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}

.term-content {
    font-size: 11px;
    color: var(--text-body);
    line-height: 1.75;
    text-align: justify;
    padding-left: 32px;
}

.term-content p {
    margin-bottom: 6px;
}

.term-content p:last-child {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════
   SIGNATURES
   ═══════════════════════════════════════════════ */
.signatures-section {
    margin-top: 36px;
    page-break-inside: avoid;
}

.signatures-heading {
    font-family: var(--font);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary);
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 8px;
}

.signatures-grid {
    display: flex;
    gap: 48px;
}

.signature-block {
    flex: 1;
}

.sig-party-label {
    font-family: var(--font);
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.sig-party-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 2px;
}

.sig-party-title {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 16px;
}

.sig-line {
    border-top: 1.5px solid var(--border);
    margin-bottom: 4px;
    padding-top: 4px;
    margin-top: 40px;
}

.sig-field {
    font-family: var(--font);
    font-size: 8.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.sig-underlined {
    border-bottom: 1px solid var(--border);
    min-width: 200px;
    display: inline-block;
    padding: 2px 0;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.footer {
    padding: 16px 44px;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 9.5px;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════
   PAGE BREAKS
   ═══════════════════════════════════════════════ */
.signatures-section, .term-section, .party-block {
    page-break-inside: avoid;
}

/* ═══════════════════════════════════════════════
   WATERMARK
   ═══════════════════════════════════════════════ */
.watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 60px;
    font-weight: 900;
    color: var(--primary);
    opacity: 0.06;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 8px;
}

{% if style.show_watermark | default(false) | to_bool %}
<div class="watermark">{{ style.watermark_text | default('DRAFT') }}</div>
{% endif %}
</style>
</head>
<body>
<div class="document">

    <!-- ════════════════════════════════════════
         TOP RULE
         ════════════════════════════════════════ -->
    <div class="top-rule"></div>

    <!-- ════════════════════════════════════════
         TITLE BLOCK
         ════════════════════════════════════════ -->
    <div class="title-block">
        <div class="logo-row">
            {% if style.logo_url %}
            <img src="{{ style.logo_url }}" alt="Logo" class="logo">
            {% endif %}
        </div>
        <div class="doc-type-label">
            {% if data.contract_type %}{{ data.contract_type }}{% else %}Legal Document{% endif %}
        </div>
        <div class="doc-title">
            {{ data.contract_title | default('SERVICE AGREEMENT') }}
        </div>
        <div class="title-meta">
            {% if data.document_number or data.contract_number %}
            <div class="meta-item">
                <div class="meta-label">Contract No.</div>
                <div class="meta-value">{{ data.contract_number | default(data.document_number) }}</div>
            </div>
            {% endif %}
            {% if data.effective_date %}
            <div class="meta-item">
                <div class="meta-label">Effective Date</div>
                <div class="meta-value">{{ data.effective_date | date_format }}</div>
            </div>
            {% endif %}
            {% if data.issue_date %}
            <div class="meta-item">
                <div class="meta-label">Date Issued</div>
                <div class="meta-value">{{ data.issue_date | date_format }}</div>
            </div>
            {% endif %}
        </div>
    </div>

    <div class="content">

        <!-- ════════════════════════════════════
             PARTIES
             ════════════════════════════════════ -->
        <div class="parties-section">
            <div class="parties-intro">
                This agreement is entered into by and between the following parties:
            </div>
            <div class="parties-grid">
                <!-- Party A (Provider / Company) -->
                <div class="party-block">
                    <div class="party-label">Party A — {{ data.from.title | default('Service Provider') }}</div>
                    {% if data.from.name %}
                    <div class="party-name">{{ data.from.name }}</div>
                    {% endif %}
                    {% if data.from.address %}
                    <div class="party-address">{{ data.from.address | nl2br }}</div>
                    {% endif %}
                    {% if data.from.email %}
                    <div class="party-email">{{ data.from.email }}</div>
                    {% endif %}
                    {% if data.from.phone %}
                    <div class="party-phone">{{ data.from.phone }}</div>
                    {% endif %}
                    {% if not data.from.name and not data.from.address %}
                    <div class="party-address" style="color:var(--text-muted); font-style:italic;">Party details to be provided</div>
                    {% endif %}
                </div>
                <!-- Party B (Client) -->
                <div class="party-block">
                    <div class="party-label">Party B — {{ data.to.title | default('Client') }}</div>
                    {% if data.to.name %}
                    <div class="party-name">{{ data.to.name }}</div>
                    {% endif %}
                    {% if data.to.address %}
                    <div class="party-address">{{ data.to.address | nl2br }}</div>
                    {% endif %}
                    {% if data.to.email %}
                    <div class="party-email">{{ data.to.email }}</div>
                    {% endif %}
                    {% if data.to.phone %}
                    <div class="party-phone">{{ data.to.phone }}</div>
                    {% endif %}
                    {% if not data.to.name and not data.to.address %}
                    <div class="party-address" style="color:var(--text-muted); font-style:italic;">Party details to be provided</div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- ════════════════════════════════════
             RECITALS / PREAMBLE
             ════════════════════════════════════ -->
        {% if data.preamble %}
        <div class="recitals-section">
            <div class="terms-heading">Preamble</div>
            <div class="recitals-text">
                {{ data.preamble | nl2br }}
            </div>
        </div>
        {% endif %}

        <!-- ════════════════════════════════════
             TERMS — Numbered Sections
             ════════════════════════════════════ -->
        {% if data.terms_sections %}
        <div class="terms-section">
            <div class="terms-heading">Terms and Conditions</div>
            {% for section in data.terms_sections %}
            <div class="term-section">
                <div class="term-heading">
                    <span class="term-number">{{ loop.index }}</span>
                    {{ section.title | default('Section ' ~ loop.index) }}
                </div>
                <div class="term-content">
                    {{ section.content | default('') | nl2br }}
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!-- ════════════════════════════════════
             ADDITIONAL TERMS (fallback)
             ════════════════════════════════════ -->
        {% if data.terms and not data.terms_sections %}
        <div class="terms-section">
            <div class="terms-heading">Terms and Conditions</div>
            <div class="term-content" style="padding-left:0;">
                {{ data.terms | nl2br }}
            </div>
        </div>
        {% endif %}

        <!-- ════════════════════════════════════
             SIGNATURES
             ════════════════════════════════════ -->
        <div class="signatures-section">
            <div class="signatures-heading">In Witness Whereof, the Parties Execute This Agreement</div>
            <div class="signatures-grid">
                <!-- Party A Signature -->
                <div class="signature-block">
                    <div class="sig-party-label">Party A</div>
                    {% if data.from.name %}
                    <div class="sig-party-name">{{ data.from.name }}</div>
                    {% endif %}
                    {% if data.from.title %}
                    <div class="sig-party-title">{{ data.from.title }}</div>
                    {% endif %}
                    <div class="sig-line"></div>
                    <div class="sig-field">Signature</div>
                    <div class="sig-field">Printed Name</div>
                    <div class="sig-underlined">{% if data.from.name %}{{ data.from.name }}{% else %}&nbsp;{% endif %}</div>
                    <br>
                    <div class="sig-field">Date</div>
                    <div class="sig-underlined">{% if data.issue_date %}{{ data.issue_date | date_format }}{% else %}&nbsp;{% endif %}</div>
                </div>
                <!-- Party B Signature -->
                <div class="signature-block">
                    <div class="sig-party-label">Party B</div>
                    {% if data.to.name %}
                    <div class="sig-party-name">{{ data.to.name }}</div>
                    {% endif %}
                    {% if data.to.title %}
                    <div class="sig-party-title">{{ data.to.title }}</div>
                    {% endif %}
                    <div class="sig-line"></div>
                    <div class="sig-field">Signature</div>
                    <div class="sig-field">Printed Name</div>
                    <div class="sig-underlined">&nbsp;</div>
                    <br>
                    <div class="sig-field">Date</div>
                    <div class="sig-underlined">&nbsp;</div>
                </div>
            </div>
        </div>

    </div>

    <!-- ════════════════════════════════════════
         FOOTER
         ════════════════════════════════════════ -->
    <div class="footer">
        This document constitutes the entire agreement between the parties and supersedes all prior discussions, agreements, and understandings, whether written or oral.
    </div>

</div>
</body>
</html>
