/* ══════════════════════════════════════════════════════════════════════════
   zl-search-ux.css — حالة «لا نتائج» الموحّدة (ZL)
   هوية هادئة: عنوان Deep Sea · وصف بترولي باهت · تفصيل ذهبي صغير · اقتراحات
   بسيطة. بلا رسوم ضخمة، بلا إيموجي، بلا عدسة بحث عملاقة، بلا وجه حزين —
   الحالة جزء من المنتج لا رسالة خطأ. (المالكة 2026-08-10)
   ══════════════════════════════════════════════════════════════════════════ */
.zsx-empty{
  --zsx-deep:#0E2F3D; --zsx-sea:#004F6C; --zsx-gold:#E6B563;
  --zsx-sand:#F6F2E9; --zsx-line:#e4dccb; --zsx-muted:#5f7480;
  font-family:var(--zl-font,'IBM Plex Sans Arabic','Tajawal',sans-serif);
  text-align:center; padding:clamp(30px,4vw,52px) 20px; margin:0 auto;
  max-width:640px; grid-column:1/-1;
}
/* التفصيل الذهبي الصغير — بديل الرسمة الضخمة */
.zsx-rule{ display:block; width:44px; height:2px; margin:0 auto 16px;
  background:linear-gradient(90deg,transparent,var(--zsx-gold),transparent); }
.zsx-title{ margin:0; color:var(--zsx-deep); font-weight:800;
  font-size:clamp(1.05rem,1.9vw,1.32rem); line-height:1.5; letter-spacing:-.01em; }
.zsx-sub{ margin:9px 0 0; color:var(--zsx-muted); font-weight:400;
  font-size:clamp(.88rem,1.2vw,.98rem); line-height:1.75; }

/* «هل تقصد: فرسان؟» — اقتراح لا تصحيح صامت */
.zsx-dym{ margin:15px 0 0; color:var(--zsx-deep); font-size:.95rem; font-weight:600; }
.zsx-dym-btn{ background:none; border:0; border-bottom:1.5px solid var(--zsx-gold);
  color:var(--zsx-sea); font-family:inherit; font-size:1em; font-weight:800;
  padding:0 2px 1px; cursor:pointer; transition:.18s; }
.zsx-dym-btn:hover{ color:var(--zsx-deep); border-bottom-color:var(--zsx-deep); }

/* الاقتراحات — ٣ كحدّ أقصى، لا شبكة كاملة */
/* عنوان قسم المقترحات — كتلة مستقلّة واضحة (نمط جرير/إكسترا): فاصل علوي ثم
   عنوان بارز، فيفهم المستخدم أن ما تحته اقتراحات لا نتائج بحثه. */
.zsx-sgs-h{ margin:24px 0 12px; padding-top:18px; border-top:1px solid var(--zsx-line);
  color:var(--zsx-deep); font-size:.98rem; font-weight:800; text-align:start; }
.zsx-sgs-h::before{ content:""; display:inline-block; width:14px; height:2px; vertical-align:middle;
  margin-inline-end:8px; background:var(--zsx-gold); border-radius:2px; }
.zsx-sgs{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.zsx-sg{ display:inline-flex; align-items:center; gap:7px; background:#fff;
  border:1.5px solid var(--zsx-line); border-radius:100px; padding:9px 17px;
  font-family:inherit; font-size:.9rem; font-weight:700; color:var(--zsx-deep);
  cursor:pointer; transition:.18s; max-width:100%; }
.zsx-sg:hover{ border-color:var(--zsx-gold); background:#fffdf8; transform:translateY(-1px); }
.zsx-sg-l{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:34ch; }
.zsx-sg-m{ color:var(--zsx-muted); font-weight:600; font-size:.82em; flex:none; }

/* بطاقات اقتراح صغيرة — صورة + اسم + منطقة + سعر (طلب المالكة 2026-08-10:
   «بطاقات صغيرة» بدل شرائح نصّية مقصوصة) */
.zsx-cards{ display:grid; gap:12px; margin-top:4px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.zsx-card{ display:flex; flex-direction:column; text-align:start; padding:0; overflow:hidden;
  background:#fff; border:1px solid var(--zsx-line); border-radius:16px; cursor:pointer;
  font-family:inherit; transition:.2s; }
.zsx-card:hover{ border-color:var(--zsx-gold); transform:translateY(-2px);
  box-shadow:0 12px 26px -18px rgba(14,47,61,.45); }
.zsx-card-img{ display:block; position:relative; height:96px; background:#ece2d0; overflow:hidden; }
.zsx-card-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.zsx-card-b{ display:block; padding:10px 12px 12px; }
.zsx-card-t{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:var(--zsx-deep); font-weight:800; font-size:.88rem; line-height:1.45; }
.zsx-card-m{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; }
.zsx-card-r{ color:var(--zsx-muted); font-size:.76rem; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.zsx-card-p{ color:var(--zsx-deep); font-weight:900; font-size:.82rem; white-space:nowrap; }

/* أفعال التعافي */
.zsx-acts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px; }
.zsx-btn{ font-family:inherit; font-size:.92rem; font-weight:800; border-radius:100px;
  padding:11px 22px; cursor:pointer; transition:.18s;
  background:#fff; border:1.5px solid var(--zsx-line); color:var(--zsx-deep); }
.zsx-btn:hover{ border-color:var(--zsx-sea); }
.zsx-btn.primary{ background:var(--zsx-gold); border-color:var(--zsx-gold); color:#3a2b0e; }
.zsx-btn.primary:hover{ filter:brightness(.96); }
.zsx-btn:focus-visible,.zsx-sg:focus-visible,.zsx-dym-btn:focus-visible{
  outline:2px solid var(--zsx-sea); outline-offset:2px; }

/* على خلفية داكنة (الخريطة/الأقسام البترولية) */
.zsx-on-dark .zsx-title{ color:#fff; }
.zsx-on-dark .zsx-sub{ color:rgba(243,239,230,.8); }
.zsx-on-dark .zsx-dym{ color:#f3efe6; }

/* الجوال: لا تُترك الشاشة فارغة — نص أصغر وأفعال بعرض كامل */
@media (max-width:640px){
  .zsx-empty{ padding:26px 16px 30px; }
  .zsx-title{ font-size:1.02rem; }
  .zsx-sub{ font-size:.88rem; }
  .zsx-sgs{ flex-direction:column; align-items:stretch; }
  .zsx-sg{ justify-content:space-between; }
  .zsx-acts{ flex-direction:column; }
  .zsx-btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){ .zsx-sg,.zsx-btn,.zsx-dym-btn{ transition:none; } }