بطاقة تسعير

<span class="rtlok pricing-card" data-ar="RTL مُختبَر" data-en="RTL verified">RTL مُختبَر</span>
        <div class="mini price">
          <span class="flag" data-ar="الأكثر طلبًا" data-en="Most popular">الأكثر طلبًا</span>
          <div style="font-size:10px" data-ar="خطة المصمّم" data-en="Designer">خطة المصمّم</div>
          <div class="amt"><span data-ar="746 ر.س" data-en="$199">746 ر.س</span></div>
          <div style="font-size:8px;color:var(--pt-text-muted)" data-ar="دفعة واحدة" data-en="one time">دفعة واحدة</div>
          <ul>
            <li data-ar="الكود المصدري كاملًا" data-en="Full source code">الكود المصدري كاملًا</li>
            <li data-ar="كل البرومبتات" data-en="All AI prompts">كل البرومبتات</li>
            <li data-ar="سجلّ التثبيت" data-en="Install registry">سجلّ التثبيت</li>
          </ul>
          <div class="buy" data-ar="اشترِ الآن" data-en="Buy now">اشترِ الآن</div>
        </div>

/* pt-scoped */
/* تسعير */
.pricing-card .price{width:100%;max-width:170px;background:var(--pt-surface);border:1px solid var(--pt-accent);
  border-radius:var(--pt-radius-md);padding:var(--pt-space-4);text-align:center;position:relative}
.pricing-card .price .flag{position:absolute;inset-block-start:-9px;inset-inline-start:50%;transform:translateX(50%);
  background:var(--pt-accent);color:var(--pt-on-accent);font-size:8px;font-weight:800;
  padding:2px 9px;border-radius:var(--pt-radius-xs);white-space:nowrap}
.pricing-card [dir=ltr] .price .flag{transform:translateX(-50%)}
.pricing-card .price .amt{font-size:26px;font-weight:var(--pt-font-weight-extrabold);color:var(--pt-accent);
  margin:6px 0 2px}
.pricing-card .price ul{list-style:none;margin:10px 0;display:flex;flex-direction:column;gap:5px;text-align:start}
.pricing-card .price li{font-size:9px;color:var(--pt-text-muted);display:flex;gap:5px}
.pricing-card .price li::before{content:'✓';color:var(--pt-color-success-400)}
.pricing-card .price .buy{height:26px;border-radius:var(--pt-radius-md);background:var(--pt-accent);
  color:var(--pt-on-accent);font-size:9px;font-weight:700;display:grid;place-items:center}

# Pricing Card

**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:** Pricing Card — Pricing

**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.