إشعارات

<span class="rtlok toast-stack" data-ar="RTL مُختبَر" data-en="RTL verified">RTL مُختبَر</span>
        <div class="mini toasts" id="toasts">
          <div class="toast"><i class="ok">✓</i><span data-ar="تم حفظ التغييرات" data-en="Changes saved">تم حفظ التغييرات</span></div>
          <div class="toast"><i class="wr">!</i><span data-ar="الاشتراك ينتهي بعد 3 أيام" data-en="Plan expires in 3 days">الاشتراك ينتهي بعد 3 أيام</span></div>
          <div class="toast"><i class="er">✕</i><span data-ar="تعذّر رفع الملف" data-en="Upload failed">تعذّر رفع الملف</span></div>
        </div>

/* pt-scoped */
/* إشعارات — تنزلق من الجهة الصحيحة */
.toast-stack .toasts{width:100%;display:flex;flex-direction:column;gap:7px;align-items:stretch}
.toast-stack .toast{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--pt-radius-sm);
  background:var(--pt-surface);border:1px solid var(--pt-border-default);font-size:9px;
  animation:slideIn var(--pt-motion-duration-slow) var(--pt-motion-easing-enter) both}
.toast-stack .toast:nth-child(2){animation-delay:.12s}
.toast-stack .toast:nth-child(3){animation-delay:.24s}
.toast-stack .toast i{width:16px;height:16px;border-radius:var(--pt-radius-full);display:grid;place-items:center;
  font-size:9px;flex-shrink:0}
.toast-stack .toast .ok{background:color-mix(in srgb,var(--pt-color-success-500) 25%,transparent);color:var(--pt-color-success-300)}
.toast-stack .toast .wr{background:color-mix(in srgb,var(--pt-color-warning-500) 25%,transparent);color:var(--pt-color-warning-300)}
.toast-stack .toast .er{background:color-mix(in srgb,var(--pt-color-danger-500) 25%,transparent);color:var(--pt-color-danger-300)}
.toast-stack [dir=ltr] .toasts{--slide:-24px}

# Toasts

**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:** Toasts — Slide from the correct side

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