لا نتائج مع مخرج

<div class="fb fbn"><div class="wrap">
  <h4 data-ar="لا عقار يطابق بحثك" data-en="No property matches your search">لا عقار يطابق بحثك</h4>
  <p class="why"></p>
  <div class="chips"></div>
  <div class="acts">
    <button class="clr" data-ar="امسح كل المرشّحات" data-en="Clear all filters">امسح كل المرشّحات</button>
    <button class="alert" data-ar="نبّهني عند توفّر عقار" data-en="Alert me when one appears">نبّهني عند توفّر عقار</button>
  </div>
  <p class="done" role="status" hidden></p>
</div></div>

/* pt-scoped */
/* feedback-nodata — منصّة عقارية */
.fbn{width:100%;height:100%;display:flex;flex-direction:column;
  font-size:10px;color:var(--pt-text-secondary);overflow:hidden}
.fbn h4{margin:0;font-size:11px;color:var(--pt-text-primary);font-weight:600;line-height:1.5}
.fbn p{margin:0;font-size:9px;line-height:1.85;color:var(--pt-text-muted)}
.fbn .num{font-variant-numeric:tabular-nums}
.fbn button{font:inherit;cursor:pointer}
.fbn button:focus-visible, .fbn input:focus-visible, .fbn a:focus-visible{
  outline:2px solid var(--pt-focus-ring);outline-offset:2px}
.fbn button:disabled{cursor:not-allowed;opacity:.45}
/* كل حالة تُعلَن لقارئ الشاشة: تغيّرٌ لا يُرى ولا يُسمَع لم يحدث */
.fbn [role=status], .fbn [role=alert]{display:block}
@media(pointer:coarse){.fbn button{min-height:44px}
}
/* شخصية: بطاقة محدَّدة، رقاقات قابلة للحذف، انحناء متوسّط */
.fbn{align-items:center;justify-content:center;padding:13px}
.fbn .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  max-width:290px;padding:13px 15px;border-radius:var(--pt-radius-md);
  background:var(--pt-bg-inset);border:1px dashed var(--pt-border-strong)}
.fbn .why{font-size:8.5px}
.fbn .chips{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.fbn .chip{display:inline-flex;align-items:center;gap:4px;padding:2px 5px 2px 8px;
  border-radius:var(--pt-radius-full);background:var(--pt-surface);
  border:1px solid var(--pt-border-default);color:var(--pt-text-secondary);font-size:8px}
.fbn .chip button{width:13px;height:13px;min-height:0;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--pt-text-muted);font-size:8px;display:grid;place-items:center}
.fbn .chip button:hover{background:var(--pt-surface-hover);color:var(--pt-color-danger-400)}
.fbn .acts{display:flex;gap:5px;margin-top:2px;flex-wrap:wrap;justify-content:center}
.fbn .acts button{padding:6px 12px;border-radius:var(--pt-radius-md);font-size:8.5px}
.fbn .clr{border:0;background:var(--pt-accent);color:var(--pt-color-ink-900);font-weight:600}
.fbn .alert{border:1px solid var(--pt-border-default);background:transparent;
  color:var(--pt-text-secondary)}
.fbn .alert:hover{border-color:var(--pt-accent);color:var(--pt-accent)}
.fbn .done{font-size:8px;color:var(--pt-accent);min-height:10px}

/* يعمل داخل إطار معزول — لا يعتمد على شيء خارجه */
/* pt-remount — يعاد التركيب عند تبديل اللغة */
(function () {
  var host = document.querySelector('.fbn');
  if (!host) return;
  var snapshot = host.innerHTML;
  var timers = [];
  var ac = null;

  /* الجسم كما كتبه المولِّد. يستقبل بدائل مظلَّلة لـ root وdocument
     والمؤقّتات، فينظّف نفسه دون أن يعرف أنه قابل لإعادة التركيب. */
  function run(root, document, setTimeout, setInterval) {
    var ar = document.documentElement.lang !== 'en';
    var n = function (v, d) { return Number(v).toLocaleString('en-US', {
      minimumFractionDigits: d || 0, maximumFractionDigits: d || 0 }); };
    /* المرشّحات هي سبب الفراغ — فعرضها وحذفها أسرع طريق للعودة إلى نتائج */
    var ALL = [
      { k: 'city',  ar: 'الرياض',            en: 'Riyadh' },
      { k: 'type',  ar: 'فيلا',              en: 'Villa' },
      { k: 'price', ar: 'أقلّ من 500,000',   en: 'Under 500,000' },
      { k: 'beds',  ar: '5 غرف فأكثر',       en: '5+ bedrooms' },
      { k: 'age',   ar: 'أقلّ من سنتين',     en: 'Under 2 years' }
    ];
    var live = ALL.slice();
    var chips = root.querySelector('.chips'), why = root.querySelector('.why');
    var done = root.querySelector('.done'), clr = root.querySelector('.clr');
    function draw() {
      chips.innerHTML = live.map(function (f, i) {
        return '<span class="chip">' + (ar ? f.ar : f.en) +
          '<button type="button" data-i="' + i + '" aria-label="احذف ' + (ar ? f.ar : f.en) +
          '">✕</button></span>';
      }).join('');
      why.textContent = live.length
        ? (ar ? live.length + ' مرشّحات فعّالة ضيّقت النتيجة إلى صفر'
              : live.length + ' active filters narrowed this to zero')
        : (ar ? 'لا مرشّحات — وسّع نطاق البحث أو غيّر المدينة'
              : 'No filters left — widen the area or change city');
      clr.disabled = live.length === 0;
    }
    chips.addEventListener('click', function (e) {
      var b = e.target.closest('button');
      if (!b) return;
      var f = live.splice(+b.dataset.i, 1)[0];
      draw();
      done.hidden = false;
      done.textContent = (ar ? 'حُذف: ' : 'Removed: ') + (ar ? f.ar : f.en);
    });
    clr.addEventListener('click', function () {
      live = []; draw();
      done.hidden = false;
      done.textContent = ar ? 'مُسحت كل المرشّحات' : 'All filters cleared';
    });
    root.querySelector('.alert').addEventListener('click', function () {
      done.hidden = false;
      done.textContent = ar ? '✓ سننبّهك فور توفّر عقار مطابق' : '✓ We will alert you when one appears';
    });
    draw();
  }

  function mount() {
    ac = new AbortController();
    var real = window.document;
    /* وسيط يمرّر كل شيء إلى المستند الحقيقي، ويعلّق كل مستمع بإشارة
       تُقطع عند إعادة التركيب — فلا يبقى مستمع من نسخة ماتت. */
    var doc = new Proxy(real, {
      get: function (t, k) {
        if (k === 'addEventListener') {
          return function (type, fn, opts) {
            var o = (opts && typeof opts === 'object') ? Object.assign({}, opts)
                                                       : { capture: !!opts };
            o.signal = ac.signal;
            return t.addEventListener(type, fn, o);
          };
        }
        var v = t[k];
        return typeof v === 'function' ? v.bind(t) : v;
      }
    });
    function track(fn) {
      return function (f, ms) { var id = fn(f, ms); timers.push(id); return id; };
    }
    run(host, doc, track(window.setTimeout.bind(window)),
        track(window.setInterval.bind(window)));
  }

  function unmount() {
    if (ac) ac.abort();
    // المعرّفان يتشاركان فضاءً واحدًا في المتصفّح، فالإلغاء المزدوج آمن
    timers.forEach(function (id) { window.clearTimeout(id); window.clearInterval(id); });
    timers = [];
    host.innerHTML = snapshot;
  }

  mount();
  addEventListener('pt-lang', function () { unmount(); mount(); });
})();

# No Results with an Exit

**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:** No Results with an Exit — Shows the filters that narrowed the result and lets you drop them one by one

**Why this component matters:** Never dead-end on “no results”. Show which filters are active and let the user remove them individually — the fastest path back to results is undoing one constraint, not starting over.

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