فاتورة ضريبية

<span class="rtlok zatca-invoice" style="background:color-mix(in srgb,var(--pt-accent) 20%,var(--pt-bg-inset));border-color:var(--pt-accent);color:var(--pt-accent)"
              data-ar="★ عربي حصري" data-en="★ Arabic-only">★ عربي حصري</span>
        <div class="mini inv">
          <div class="ihd">
            <div><b data-ar="فاتورة ضريبية" data-en="Tax Invoice">فاتورة ضريبية</b>
              <span style="display:block">INV-<span class="num" data-n="2047">2047</span></span></div>
            <div class="qr"></div>
          </div>
          <div class="il"><span data-ar="اشتراك سنوي" data-en="Annual plan">اشتراك سنوي</span><span class="num" data-n="1,200">1,200</span></div>
          <div class="il"><span data-ar="تركيب وتدريب" data-en="Setup & training">تركيب وتدريب</span><span class="num" data-n="400">400</span></div>
          <div class="tot">
            <div class="il"><span data-ar="المجموع" data-en="Subtotal">المجموع</span><span class="num" data-n="1,600">1,600</span></div>
            <div class="il"><span data-ar="ضريبة القيمة المضافة 15%" data-en="VAT 15%">ضريبة القيمة المضافة 15%</span><span class="num" data-n="240">240</span></div>
            <div class="il big"><span data-ar="الإجمالي" data-en="Total">الإجمالي</span><span><span class="num" data-n="1,840">1,840</span> <span>ر.س</span></span></div>
          </div>
        </div>

/* pt-scoped */
.zatca-invoice .num{font-variant-numeric:tabular-nums}
/* فاتورة ضريبية */
.zatca-invoice .inv{width:100%;max-width:186px;background:var(--pt-surface);border-radius:var(--pt-radius-md);
  padding:10px;border:1px solid var(--pt-border-default);font-size:9px}
.zatca-invoice .inv .ihd{display:flex;justify-content:space-between;align-items:flex-start;
  padding-bottom:7px;border-bottom:1px solid var(--pt-border-subtle);margin-bottom:7px}
.zatca-invoice .inv .ihd b{font-size:10px}
.zatca-invoice .inv .ihd span{font-size:8px;color:var(--pt-text-muted)}
.zatca-invoice .inv .qr{width:26px;height:26px;border-radius:var(--pt-radius-xs);flex-shrink:0;
  background:repeating-conic-gradient(var(--pt-text-primary) 0 25%,transparent 0 50%) 0 0/7px 7px}
.zatca-invoice .inv .il{display:flex;justify-content:space-between;padding:3px 0;color:var(--pt-text-muted)}
.zatca-invoice .inv .tot{margin-top:7px;padding-top:7px;border-top:1px solid var(--pt-border-default)}
.zatca-invoice .inv .tot .il.big{color:var(--pt-accent);font-weight:var(--pt-font-weight-bold);font-size:11px}

# Tax Invoice

**Role:** You are an Arabic-first UI designer and front-end engineer. Read the whole
specification before writing a single line, then follow it literally. If two requirements
conflict, favour usability over visual effect.

**Goal:** Tax Invoice — ZATCA-compliant layout

**Direction:** Genuine RTL — not a mirrored Latin layout. Use logical properties
(`margin-inline-start`, `padding-inline`, `inset-inline-start`, `text-align: start`),
never physical ones (`margin-left`, `left`). The layout must flip with `dir` on its own,
with no duplicated rules.

**Typography:** Cairo for Arabic, IBM Plex Sans for Latin. Arabic line-height must be
`0.18` higher than the Latin equivalent — dots, hamzas and maddas need more vertical room.
Arabic font-size runs `1.06×` the Latin size at the same optical weight.

**Numerals:** Western digits in both languages (`1,234.50`). Only the currency changes:
`ر.س` **after** the number in Arabic, `$` **before** it in English. Jordanian dinar
uses **three** decimal places, not two.

**Colors:** Dark mode — background `#0D142B` · surfaces `#211F54` · borders `#545C91` · text `#918FC2`.
Accent `#ADA9E8` must never exceed 8% of the screen area.

**Language:** Bilingual — every string carries both Arabic and English, and the layout
flips with `dir` automatically.

**States:** `default` · `hover` · `focus` · `active` · `disabled` · `loading` · `error`.
Do not design the resting state alone.

**Accessibility:** Contrast ratio at least `4.5:1`, complete keyboard navigation,
visible focus rings, and honour `prefers-reduced-motion`.

**Output:** Clean HTML and CSS in two separate files. No frameworks, no libraries,
no external dependencies.

**Important:** This component has no equivalent in any global library. Do not imitate a
Latin pattern and translate its labels — build it from Gulf market requirements directly.