/* ═══════════════════════════════════════════════════════════════════
   صفحات المواضيع
   ═══════════════════════════════════════════════════════════════════ */

.acf-tag-crumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 12px;
  font-size: 11.5px;
  color: #8b9ab2;
  flex-wrap: wrap;
}
.acf-tag-crumbs a { color: #93c5fd; text-decoration: none; }
.acf-tag-crumbs b { color: #e2e8f0; font-weight: 800; }

.acf-tag-hero {
  padding: 18px 16px;
  margin: 0 0 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 22px;
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(124, 58, 237, .20), transparent 62%),
    radial-gradient(360px 200px at 0% 100%, rgba(6, 182, 212, .14), transparent 62%),
    rgba(255, 255, 255, .03);
}

.acf-tag-hero h1 {
  margin: 0 0 8px;
  font-size: 25px;
  line-height: 1.35;
  letter-spacing: -.3px;
}

/* المقدّمة هي ما يميّز الصفحة عن أخواتها في عين محرّك البحث */
.acf-tag-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.95;
  color: #aab5c8;
}

.acf-tag-count {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 800;
  color: #6ee7d3;
}

.acf-tag-list { display: grid; gap: 10px; }

.acf-tag-card {
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(37, 55, 96, .48), rgba(12, 18, 32, .62));
  transition: border-color .15s ease;
}

.acf-tag-card:hover { border-color: rgba(124, 58, 237, .42); }
.acf-tag-card > a { display: block; padding: 13px 15px; text-decoration: none; color: inherit; }

.acf-tag-card p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.85;
  color: #eef2fa;
}

.acf-tag-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: #8fa0ba;
}
.acf-tag-card-meta em { font-style: normal; color: #93c5fd; }

.acf-tag-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 4px;
  font-size: 13px;
  color: #aab5c8;
}
.acf-tag-pager a {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: #e2e8f0;
  text-decoration: none;
  font-weight: 800;
}
.acf-tag-pager a:hover { border-color: rgba(124, 58, 237, .45); }

.acf-tag-related { margin: 20px 0 4px; }
.acf-tag-related h2 { margin: 0 0 10px; font-size: 15px; }

.acf-tag-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.acf-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .045);
  color: #dbe3f0;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
}
.acf-tag-chip:hover { border-color: rgba(124, 58, 237, .5); background: rgba(124, 58, 237, .14); }
.acf-tag-chip i { font-style: normal; font-size: 10.5px; color: #8fa0ba; }

/* ── فهرس المواضيع ── */
.acf-tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

.acf-tag-tile {
  display: grid;
  gap: 5px;
  padding: 14px 15px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
  text-decoration: none;
  color: inherit;
}
.acf-tag-tile:hover { border-color: rgba(124, 58, 237, .45); background: rgba(124, 58, 237, .09); }
.acf-tag-tile b { font-size: 15px; font-weight: 900; color: #f1f5fb; }
.acf-tag-tile span { font-size: 12px; line-height: 1.7; color: #94a3b8; }
.acf-tag-tile em { font-style: normal; font-size: 11px; font-weight: 800; color: #6ee7d3; }

/* ── وسوم المنشور ── */
.acf-post-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 4px;
}
.acf-post-tags > b {
  font-size: 11.5px;
  font-weight: 800;
  color: #8fa0ba;
  margin-inline-end: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   سكّة المواضيع
   على الشاشة الواسعة صندوق تحت الشريط الجانبي، رقائقه جنب بعضها لا فوقه.
   على الهاتف لسان على الحافّة يفتح لوحاً منزلقاً — والمواضيع بابُ تصفّح،
   فلا داعي أن تشغل مساحة دائمة فوق ما جاء القارئ ليقرأه.
   ═══════════════════════════════════════════════════════════════════ */

/* ── الهاتف: درج يُسحب من الحافّة ──
   اللسان مقبض الدرج لا زرّ ثابت بجانبه: الوحدة كلها (لوحٌ ومقبضه على وجهه)
   تتحرّك معاً. مطويّة تزيح نفسها بعرض اللوح فيختفي ويبقى المقبض على الحافّة،
   ومفتوحة تعود إلى مكانها فيدخل اللوح ويمشي المقبض معه. */
.acf-topics-rail {
  --acf-topics-w: min(290px, 78vw);

  position: fixed;
  z-index: 130;
  top: 46%;
  right: 0;
  left: auto;
  display: flex;
  /* المقبض على الوجه الداخلي للّوح: عكس اتجاه الصفّ يضعه يساره */
  flex-direction: row-reverse;
  align-items: center;
  transform: translate(var(--acf-topics-w), -50%);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.acf-topics-rail.is-open {
  transform: translate(0, -50%);
}

.acf-topics-tab {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  gap: 5px;
  width: 38px;
  padding: 18px 0;
  border: 1px solid rgba(124, 58, 237, .30);
  border-inline-end: 0;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(160deg, rgba(30, 22, 60, .97), rgba(13, 19, 33, .97));
  backdrop-filter: blur(14px);
  color: #c4b5fd;
  cursor: pointer;
  box-shadow: -8px 0 24px rgba(0, 0, 0, .45);
}

.acf-topics-tab-icon { font-size: 17px; font-weight: 900; line-height: 1; }

/* الاسم عمودياً: عرض المقبض لا يتّسع لسطر أفقي */
.acf-topics-tab-text {
  writing-mode: vertical-rl;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .5px;
}

.acf-topics-panel {
  flex: 0 0 auto;
  width: var(--acf-topics-w);
  max-height: 68vh;
  overflow-y: auto;
  padding: 14px 14px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-inline-start: 0;
  border-radius: 0 18px 18px 0;
  background: rgba(9, 13, 24, .985);
  backdrop-filter: blur(18px);
  box-shadow: -14px 0 44px rgba(0, 0, 0, .55);
}

/* العنوان في طرف اللوح البعيد عن المقبض */
.acf-topics-head {
  display: block;
  margin-bottom: 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  text-align: right;
  text-decoration: none;
  color: inherit;
}
.acf-topics-head h2 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 900;
  color: #ddd6fe;
}

/* ── الشاشة الواسعة: صندوق ثابت تحت الشريط ── */
@media (min-width: 1024px) {
  .acf-topics-rail {
    position: static;
    transform: none !important;
    display: block;
    width: 100%;
    margin-top: 10px;
  }

  /* اللسان للهاتف وحده: هنا الصندوق مفتوح دائماً */
  .acf-topics-tab { display: none; }

  .acf-topics-panel {
    /* على الهاتف اللوح مطلقٌ بإحداثيات الحافّة. هنا يعود إلى التدفّق، وإلا
       بقي معلّقاً عند right:38px وtop:50% فطفا خارج عمود الشريط. */
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    max-height: none;
    overflow: visible;
    transform: none !important;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 20px;
    background: rgba(255, 255, 255, .035);
    box-shadow: none;
    backdrop-filter: none;
    padding: 13px 14px 14px;
  }

  /* الرقائق جنب بعضها وتلتفّ على عرض الشريط، لا واحدة فوق أخرى */
  .acf-topics-head { text-align: right; }

  .acf-topics-panel .acf-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .acf-topics-panel .acf-tag-chip {
    padding: 6px 11px;
    font-size: 11.5px;
  }
}

/* السمة hidden لا تكفي وحدها: قاعدة display في صنف تغلب أنماط المتصفّح. */
.acf-topics-rail[hidden] { display: none !important; }