/* ============================================================
   وناااسة — 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
 */
.cat-tile {
  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: 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 {
  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;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.18));
  position: relative; z-index: 1;
  pointer-events: none;
}
.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: 22px 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;
}
.cats-drawer-close {
  background: transparent; color: var(--ink);
  border: 0;
  font-size: 28px;
  box-shadow: none;
  cursor: pointer;
}
.cats-drawer-close:hover { color: var(--t-primary); transform: scale(1.15); }
  background: var(--ink); color: var(--w-yellow);
  padding: 3px 10px;
  border-radius: 8px;
  margin-inline-start: 8px;
  font-variant-numeric: tabular-nums;
}
.cats-drawer-close {
  width: 38px; height: 38px;
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  font-family: var(--font-display); font-weight: 900;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.cats-drawer-close:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }

.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 */
.cats-drawer-grid .cat-tile {
  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; }
  .cats-drawer-hdr { padding: 18px 18px 14px; }
  .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; }
}