منتقي تاريخ هجري

<span class="rtlok hijri-datepicker" 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 cal">
          <div class="top">
            <span class="arrow">‹</span>
            <div style="text-align:center"><b data-ar="رجب 1447" data-en="Rajab 1447">رجب 1447</b>
            <span style="display:block" data-ar="يناير 2026" data-en="January 2026">يناير 2026</span></div>
            <span class="arrow">›</span>
          </div>
          <div class="dows"><span>أ</span><span>إ</span><span>ث</span><span>أ</span><span>خ</span><span>ج</span><span>س</span></div>
          <div class="days">
            <b class="dim">28</b><b class="dim">29</b><b>1</b><b>2</b><b>3</b><b>4</b><b>5</b>
            <b>6</b><b>7</b><b>8</b><b>9</b><b>10</b><b>11</b><b>12</b>
            <b>13</b><b>14</b><b class="sel">15</b><b>16</b><b>17</b><b>18</b><b>19</b>
          </div>
          <div class="foot"><span data-ar="هجري" data-en="Hijri">هجري</span><span data-ar="ميلادي ⇄" data-en="⇄ Gregorian">ميلادي ⇄</span></div>
        </div>

/* pt-scoped */
/* تقويم هجري */
.hijri-datepicker .cal{width:100%;max-width:190px;background:var(--pt-surface);border-radius:var(--pt-radius-md);
  padding:10px;border:1px solid var(--pt-border-default)}
.hijri-datepicker .cal .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.hijri-datepicker .cal .top b{font-size:10px}
.hijri-datepicker .cal .top span{font-size:8px;color:var(--pt-text-muted)}
.hijri-datepicker .cal .arrow{transition:transform var(--pt-motion-duration-fast)}
.hijri-datepicker [dir=rtl] .cal .arrow{transform:scaleX(-1)}
.hijri-datepicker .cal .dows, .hijri-datepicker .cal .days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.hijri-datepicker .cal .dows span{font-size:7px;color:var(--pt-text-muted);text-align:center;padding-bottom:3px}
.hijri-datepicker .cal .days b{font-size:8px;text-align:center;padding:3px 0;border-radius:var(--pt-radius-sm);
  font-weight:400;color:var(--pt-text-secondary)}
.hijri-datepicker .cal .days b.sel{background:var(--pt-accent);color:var(--pt-on-accent);font-weight:700}
.hijri-datepicker .cal .days b.dim{color:var(--pt-text-muted);opacity:.4}
.hijri-datepicker .cal .foot{margin-top:7px;padding-top:6px;border-top:1px solid var(--pt-border-subtle);
  font-size:8px;color:var(--pt-text-muted);display:flex;justify-content:space-between}
/* ── التذييل ── */
.hijri-datepicker .foot{border-top:1px solid var(--pt-border-subtle);margin-top:var(--pt-space-8)}
.hijri-datepicker .foot h4{margin:0 0 var(--pt-space-3);font-size:var(--pt-font-size-xs);
  color:var(--pt-text-secondary);font-weight:600}
.hijri-datepicker .foot p, .hijri-datepicker .foot a{font-size:var(--pt-font-size-xs);color:var(--pt-text-muted);line-height:1.95}
.hijri-datepicker .foot a{display:block}
.hijri-datepicker .foot a:hover{color:var(--pt-accent)}

# Hijri Date Picker

**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:** Hijri Date Picker — Exists in no global library

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