/* ============================================================
   وناااسة — Question categories (strip + drawer)
   ============================================================ */

/* ───────── Section wrapper ───────── */
.wa-cats-section {
  margin: 56px 0 64px;
}

.wa-cats-section .wa-section-hdr {
  margin-bottom: 22px;
}

.wa-cats-more {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: var(--ink); color: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.wa-cats-more:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.wa-cats-more:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--ink); }
.wa-cats-more > span { color: #fff; }
.wa-cats-more svg { width: 16px; height: 16px; color: var(--w-yellow); stroke: var(--w-yellow); }
.wa-cats-more em {
  font-style: normal;
  background: var(--w-yellow); color: var(--ink);
  padding: 2px 8px; border-radius: 8px;
  font-size: 13px;
  border: 1.5px solid var(--ink);
}

/* ───────── Horizontal scroll strip ───────── */
.wa-cats-strip-wrap {
  position: relative;
}
.wa-cats-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 168px;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 4px 28px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
}
.wa-cats-strip::-webkit-scrollbar { height: 8px; }
.wa-cats-strip::-webkit-scrollbar-track { background: transparent; }
.wa-cats-strip::-webkit-scrollbar-thumb {
  background: var(--ink);
  border-radius: 4px;
}

/* ───────── Category tile — Flip card structure ─────────
 * الكرت يتكوّن من 3 عناصر:
 *  .cat-tile          → container (perspective + hover transforms)
 *  .cat-tile-inner    → rotating layer (preserve-3d)
 *  .cat-tile-front    → الواجهة (صورة + اسم + عدد)
 *  .cat-tile-back     → الخلفية (شرح + pills)
 * ضغطة → toggle .is-flipped ← في wa-categories.js
 */
/* [2026-08-29 بلاغ المالك] الميلان كان يرسم حوافاً مسنّنة على iOS — ترويض
   التسنين بطبقة GPU + backface (بلا تغيير بصري) + هزة لمس بالأسفل */
.cat-tile {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  outline: 1px solid transparent;
  position: relative;
  scroll-snap-align: start;
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  padding: 0;
  height: 200px;
  perspective: 1200px;
  /* hover & tilt transitions على الـ container — لا تتعارض مع 3D للـ inner */
  transition: transform .18s var(--ease), rotate .18s var(--ease);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* لا overflow:hidden هنا — يكسر الـ 3D context */
}
.cat-tile:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 18px;
}
.cat-tile:not(.is-flipped):hover {
  transform: translate(-3px, -3px);
  rotate: -1.5deg;
}
.cat-tile:not(.is-flipped):active { transform: translate3d(0, 0, 0); }  /* [تدقيق ذاتي] كان translate(0,0) يسقط ترقية الطبقة أثناء الضغط فترجع الحافّة مسنّنة تحت الإصبع */
.cat-tile.is-flipped {
  z-index: 5; /* يطلع فوق الكروت المجاورة أثناء العرض */
}

/* layer داخلي يحمل rotateY — Spring animation */
.cat-tile-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.34, 1.56, .64, 1); /* spring */
  will-change: transform;
}
.cat-tile.is-flipped .cat-tile-inner {
  transform: rotateY(180deg);
}

/* الوجهين — يتشاركان الستايل الأساسي */
.cat-tile-front,
.cat-tile-back {
  /* 🩸 [تدقيق ذاتي 2026-08-29] «الميلان بخطوط متقطعة»: الترويض السابق كان على
     الحاوية `.cat-tile` — لكن الحدّ والزوايا يرسمهما **الوجهان** داخل سياق
     `preserve-3d`، والحاوية لا تسطّح أبناءها، فبقيت حافّة الكرت المائل مسنّنة.
     الترقية هنا على العنصر الراسم نفسه. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  outline: 1px solid transparent;
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ink);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cat-tile:not(.is-flipped):hover .cat-tile-front,
.cat-tile:not(.is-flipped):hover .cat-tile-back {
  box-shadow: 7px 7px 0 var(--ink);
  transition: box-shadow .18s var(--ease);
}

/* الواجهة الأماميّة — كما كانت سابقاً (تصميم cat-tile الأصلي) */
.cat-tile-front {
  background: #88BAA9;
}

/* ── إصلاح iOS Safari فقط ──────────────────────────────────────────────
 * سفاري الآيفون/الآيباد عنده بَق معروف: لا يحترم backface-visibility:hidden
 * دائماً، فتنطبع كبسولة العدّاد الأمامية (.cat-tile-count) مقلوبة فوق الوجه
 * الخلفي عند قلب الكرت (تظهر كرقم معكوس جنب العنوان). نخفيها صراحةً عند القلب.
 * @supports (-webkit-touch-callout: none) ينطبق على iOS فقط → صفر أثر على
 * سفاري ماك/كروم/سطح المكتب أو على الحالة غير المقلوبة. */
@supports (-webkit-touch-callout: none) {
  .cat-tile.is-flipped .cat-tile-count { opacity: 0; }
}

/* الخلفيّة — شرح التصنيف + pills */
.cat-tile-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, var(--surface) 0%, #fff8e8 100%);
  padding: 14px 14px 12px;
  text-align: right;
  /* لا justify-content: space-between لأنه يكسر flex: 1 على الـ desc.
   * بدلاً منه: title + desc(flex:1) + pills ← تخطيط طبيعي */
}
.cat-tile-back-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--t-primary);
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.cat-tile-back-desc {
  /* flex: 1 + min-height:0 يخلّي الـ desc يأخذ كل المساحة المتبقية بين
   * العنوان والـ pills، ويتيح للـ overflow:hidden يقطع النص الزائد */
  flex: 1 1 0;
  min-height: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 10px;
  overflow: hidden;
  word-wrap: break-word;
  /* fade gradient في الأسفل عشان القطع يبيّن طبيعياً */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
}
.cat-tile-pills {
  display: flex;
  flex-direction: column; /* عمودي افتراضياً — يلائم portrait orientation للكروت */
  align-items: flex-end;  /* يحاذي يمين بسبب RTL */
  gap: 5px;
  flex-shrink: 0;
}
.cat-pill {
  background: var(--bg-cream, #f2eadf);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cat-pill--num {
  background: var(--w-yellow, #f9d82e);
}

/* image / placeholder area */
.cat-tile-img {
  position: relative;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-bottom: 2.5px solid var(--ink);
}
.cat-tile-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity .25s ease;
}
/* ⚠️ لا تُرجِعها display:none — كانت تُقفِل التحميل قفلاً متبادلاً مع loading="lazy":
   الصورة مخفية بـdisplay:none ⇒ بلا صندوق ⇒ ما تدخل الشاشة أبداً ⇒ المتصفح لا يحمّلها
   ⇒ onload ما يشتغل ⇒ is-missing ما تُنزَع ⇒ تبقى مخفية للأبد. النتيجة كانت **٥١ من ٥١
   صورة تصنيف مختفية** بالإنتاج (مُشخَّص 2026-07-26: complete=false · naturalWidth=0).
   opacity:0 يحفظ للصورة صندوقها فيشتغل الـlazy صح، ويظل الإيموجي هو الظاهر لين تجهز. */
.cat-tile-img.is-missing img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .cat-tile-img img { transition: none; }
}

/* placeholder symbol — visible until image loads */
.cat-tile-sym {
  font-size: 56px; line-height: 1; display: inline-flex;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.18));
  position: relative; z-index: 1;
  pointer-events: none;
}
.cat-tile-sym svg { width: 1em; height: 1em; display: block; }   /* 🎨 [2026-09-13] رمزُ التصنيف SVG بمقاس الخطّ — وسط صندوق الصورة فلا يتحرّك شيء */
.cat-tile-img:not(.is-missing) .cat-tile-sym { display: none; }

/* dotted backdrop on placeholder */
.cat-tile-img.is-missing::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0,0,0,.12) 1.2px, transparent 1.4px);
  background-size: 14px 14px;
  pointer-events: none;
}

/* footer band */
.cat-tile-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 11px;
  background: var(--surface);
}
.cat-tile-name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-tile-count {
  flex-shrink: 0;
  font-size: 12px; font-weight: 700;
  color: var(--ink);
  background: var(--w-yellow);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1.5px solid var(--ink);
  font-variant-numeric: tabular-nums;
}

/* every-other tile: subtle tilt for rhythm */
.wa-cats-strip .cat-tile:nth-child(3n+2) { rotate: 1deg; }
.wa-cats-strip .cat-tile:nth-child(3n+2):hover { rotate: -1deg; }
.wa-cats-strip .cat-tile:nth-child(4n+3) { rotate: -1.2deg; }
.wa-cats-strip .cat-tile:nth-child(4n+3):hover { rotate: 1.2deg; }

/* ───────── Drawer (full grid) ───────── */
.cats-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 14, 8, 0.55);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.cats-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cats-drawer {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: min(720px, 92vw);
  background: var(--surface);
  border-right: 4px solid var(--ink);
  box-shadow: 8px 0 0 rgba(0,0,0,.18);
  z-index: 100;
  transform: translateX(-105%);
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
}
.cats-drawer.is-open { transform: translateX(0); }

.cats-drawer-hdr {
  flex-shrink: 0;
  /* الحافّةُ الآمنة (٠ بالموقع — يعرّفها غلاف التطبيق وحده) داخل حشوة الرأس: هو اللي يمتدّ تحت الساعة لا الورقة */
  padding: calc(22px + var(--wn-safe-top, 0px)) 24px 18px;
  border-bottom: 1.5px solid rgba(44, 62, 80, .12);
  background: rgba(250, 249, 247, .92);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  display: flex; align-items: center; gap: 14px;
  position: relative;
  z-index: 2;
}
.cats-drawer-title {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 900;
  color: var(--ink);
  margin: 0;
  flex: 1;
  display: inline-flex; align-items: center; gap: 10px;
}
.cats-drawer-title > .lbl {
  background: var(--t-primary); color: #fff;
  padding: 4px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 16px;
}
.cats-drawer-title em {
  font-style: normal;
  font-size: 14px;
  padding: 3px 12px;
  background: var(--w-yellow); color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  vertical-align: middle;
}
/* 🩸 **كودٌ ميّتٌ كسر التتالي (كُشف 2026-08-23).** كان هنا ستُّ تصريحاتٍ
   **بلا محدِّد** (شارةُ عدٍّ داكنة من تصميمٍ سابق، ضاع محدِّدها في تعديلٍ قديم).
   ومحلّل CSS حين يلقى تصريحاً مكان محدِّد يبتلع كلَّ ما يليه حتى أوّل `{` —
   أي **يُسقط القاعدة التالية كاملة**. فبقيت قاعدةُ زرّ الإغلاق ساقطةً بصمت،
   وتشخيصُها بالقياس: تعداد `document.styleSheets` لم يُظهر إلا `:hover`
   و`:active` بلا القاعدة الأمّ. والعدّ الحاليّ يأتي من `.cats-drawer-title em`
   أعلاه (الكبسولة الصفراء) فلا شيء يُفقد بالحذف. */
/* 🎓 بلاغ المالك (2026-08-23): «الإكس في عرض الفئات شكله غلط — المستطيل مب
   جيد، خلّه إكس بدون حواف». وكان للزرّ **قاعدتان** في هذا الملفّ: أولى بلا
   حواف وثانيةٌ مصندقة تغلبها بترتيب المصدر — فوُحّدتا في واحدة.
   ⚠️ والمقاس يبقى ٤٤×٤٤: الحدود تختفي بصرياً لا هدفُ اللمس (معيار آبل). */
.cats-drawer-close {
  width: 44px; height: 44px;
  margin: -3px -6px -3px 0;          /* يبتلع الحشوة فلا يزيح ما حوله */
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1;
  font-family: var(--font-display); font-weight: 900;
  color: var(--ink);
  transition: transform .15s var(--ease), color .15s var(--ease);
}
.cats-drawer-close:hover { color: var(--t-primary); transform: scale(1.12); }
.cats-drawer-close:active { transform: scale(.94); }

.cats-drawer-search {
  flex-shrink: 0;
  padding: 18px 24px 16px;
  border-bottom: 2.5px solid var(--ink);
  background: var(--t-page);
}
.cats-drawer-search input {
  width: 100%;
  padding: 12px 16px;
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.06);
  outline: none;
}
.cats-drawer-search input:focus {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--ink), 3px 3px 0 var(--w-yellow);
}

.cats-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px 32px;
  background: var(--t-page);
}
.cats-drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.cats-drawer-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-muted);
  font-size: 15px;
  font-weight: 600;
}

/* drawer tiles slightly smaller and never tilted */
/* width:auto — البطاقة تملأ عمودها بالورقة كما باللابتوب. عرضُ ١٣٠px بـdash2.css (≤٧٢٠) لشريط التصنيفات الأفقيّ كان يتسرّب هنا
   فتلتصق البطاقة بطرف عمودها (١٩٧px) ويبقى ٦٧px فاضياً بجانبها — شبكةٌ مائلة (ملاحظة المالك على ٢٣٠: «تأكّد من تصميمها بالكامل») */
.cats-drawer-grid .cat-tile {
  width: auto;
  height: 175px;
  rotate: 0deg !important;
}
.cats-drawer-grid .cat-tile:hover { rotate: -1deg !important; }

/* ───────── Mobile ───────── */
@media (max-width: 720px) {
  .wa-cats-strip { grid-auto-columns: 148px; gap: 12px; }
  .cat-tile { height: 178px; position: relative; }
  .cat-tile-sym { font-size: 48px; }
  /* 🩸 [ملاحظة المالك على ٢٣٠ بلقطة: «فيه جايه مغطيه على بعض»] ٩٢vw تُبقي شريطاً من الصفحة بجانب الورقة (٣٥px على ٤٤٠).
     قاعدةُ الجوال كانت بـdash2.css (≤٤٢٠ فقط، وهذه الورقة تُحمَّل بعدها فتدهسها) — ميّتةٌ مرّتين، فانتقلت لهنا */
  .cats-drawer { width: 100vw; border-right: 0; box-shadow: none; }
  /* 🩸 [ملاحظة المالك على ٢٣٢: «ليش دبل هيدر؟ … كأنه ٣ هيدر»] كانت ثلاث طبقات: حافّةٌ بلون الورقة · رأسٌ زجاجيّ بخطّ ·
     شرائحُ بيجٍ بخطٍّ أغمق. الرأسُ والشرائح الحين سطحٌ واحد بلون الصفحة وخطٌّ واحدٌ خفيف تحت الشرائح — نفس هيدر الداشبورد. */
  .cats-drawer-hdr {
    padding: calc(18px + var(--wn-safe-top, 0px)) 18px 8px;
    background: var(--t-page); border-bottom: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .cats-drawer-title { font-size: 20px; }
  .cats-drawer-search, .cats-drawer-body { padding-inline: 18px; }
  .cats-drawer-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Solution D — count كـ corner badge فوق الصورة + الاسم وسط الـ footer
   * يحل مشكلة قطع الأسماء الطويلة (الجغرافيا / الثقافة العامة / إلخ) في الشاشات الصغيرة */
  .cat-tile-foot {
    justify-content: center;
    padding: 9px 10px 10px;
  }
  .cat-tile-name {
    font-size: 14px;
    text-align: center;
    width: 100%;
  }
  .cat-tile-count {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    z-index: 2;
    font-size: 10.5px;
    padding: 3px 8px;
    box-shadow: 2px 2px 0 var(--ink);
  }

  /* ----- Back face — تكييف للجوّال (148px width × 178px height) ----- */
  .cat-tile-back { padding: 10px 11px 10px; }
  .cat-tile-back-title {
    font-size: 14px;
    margin: 0 0 6px;
    padding-bottom: 5px;
    border-bottom-width: 1.5px;
  }
  .cat-tile-back-desc {
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 8px;
  }
  /* الـ pills عمودية بالفعل افتراضياً — فقط نقلّل المقاسات */
  .cat-tile-pills { gap: 4px; }
  .cat-pill {
    padding: 2px 8px;
    font-size: 12px;
    border-width: 1.2px;
  }
}

/* ───────── بطاقة النهاية «شوف الكل» ─────────
   ٥١ بطاقة × ١٦٨px ≈ ٨٬٢٠٠px عرضاً والظاهر ~٧ — فمن يسحب للآخر كان يصطدم
   بفراغ ويرجع لأعلى القسم. هذي مخرج عند نقطة النهاية نفسها.
   تأخذ مقاس الكرت وحدوده وظله حرفياً فتبان جزءاً من الشريط لا لاصقاً عليه،
   وتتميّز بالحبر المصمت (نفس زر الترويسة) فتُقرأ كـ«إجراء» لا كتصنيف. */
.cat-tile--all .cat-tile-front {
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.cat-tile-all-body {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px; text-align: center;
}
.cat-tile-all-num {
  font-family: var(--font-display);
  font-size: 40px; font-weight: 900; line-height: 1;
  color: var(--cta, #f9d82e);
  font-variant-numeric: tabular-nums;
}
.cat-tile-all-lbl {
  font-weight: 800; font-size: 13px;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 8px;
}
.cat-tile-all-cta {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--cta, #f9d82e); color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px; padding: 6px 13px;
  font-weight: 900; font-size: 13px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
}
.cat-tile--all:hover .cat-tile-all-cta { transform: translate(-1px, -1px); }
.cat-tile--all:active { transform: translate(2px, 2px); }
/* لا قلب لهذي البطاقة — هي زر لا تصنيف */
.cat-tile--all .cat-tile-inner { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cat-tile--all, .cat-tile--all .cat-tile-all-cta { transition: none; }
}

/* 🫨 هزة اللمس (قرار المالك 04:11) */
@keyframes catShake {
  0%, 100% { translate: 0 0; }
  20% { translate: -3px 0; rotate: -1deg; }
  40% { translate: 3px 0; rotate: 1.4deg; }
  60% { translate: -2px 0; }
  80% { translate: 2px 0; }
}
.cat-tile.is-shaking { animation: catShake .4s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .cat-tile.is-shaking { animation: none; } }