/* ═══════════════════════════════════════════════════════════════════
 *  صفحة الأسئلة الشائعة الكاملة — M8.2
 * ═══════════════════════════════════════════════════════════════════
 *
 *  ⚠️ .faq-item / .faq-summary / .faq-answer / .faq-grid كلها في
 *     wolf-home-faq.css (بنحمّله في الصفحة دي). هنا التخطيط الخاص
 *     بالكتالوج بس — الفهرس وعناوين الفئات.
 *
 *  ⚠️ مابنستخدمش .section__inner لأنها معرّفة في CSS خاص بالرئيسية
 *     (home-trial / home-whyus) ومش مضمونة هنا.
 */

.faqp {
    padding: var(--sp-8) var(--sp-4) var(--sp-16);
}

.faqp__inner {
    max-width: 860px;
    margin-inline: auto;
}

/* ── الترويسة ────────────────────────────────────────────────────── */
.faqp__head {
    text-align: center;
    margin-bottom: var(--sp-8);
}

.faqp__title {
    font-size: clamp(26px, 5vw, 38px);
    font-weight: 900;
    margin-bottom: var(--sp-3);
}

.faqp__sub {
    font-size: 15px;
    color: var(--text-soft);
    line-height: 1.8;
}

.faqp__sub a { color: var(--brand-soft); text-decoration: underline; }

/* ── فهرس الفئات ─────────────────────────────────────────────────── */
/* 🔴 مش زينة: مع 40+ سؤال، التمرير وحده بيخلّي الصفحة غير قابلة
      للاستخدام على الموبايل. */
.faqp__toc {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-2);
    margin-bottom: var(--sp-10);
    padding: var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
}

.faqp__toc-link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-soft);
    transition: background .2s, color .2s;
}

.faqp__toc-link:hover {
    background: var(--brand-tint);
    color: var(--text);
}

.faqp__toc-link .icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    fill: currentColor;
}

.faqp__toc-link span:nth-of-type(1) { flex: 1; }

.faqp__toc-count {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--brand-soft);
    background: var(--brand-tint);
    padding: 2px 8px;
    border-radius: 999px;
}

/* ── أقسام الفئات ────────────────────────────────────────────────── */
.faqp__cat {
    margin-bottom: var(--sp-10);
    /* الهامش ده بيمنع العنوان يتخبّى تحت الناف بار عند القفز بالمرساة */
    scroll-margin-top: calc(var(--nav-h, 76px) + 24px);
}

.faqp__cat-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 20px;
    font-weight: 900;
    margin-bottom: var(--sp-2);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-strong);
}

.faqp__cat-title .icon {
    width: 21px;
    height: 21px;
    fill: var(--brand-soft);
}

.faqp__cat-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
}

/* ── نداء ختامي ──────────────────────────────────────────────────── */
.faqp__cta {
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--border-brand);
    border-radius: 18px;
    scroll-margin-top: calc(var(--nav-h, 76px) + 24px);
}

.faqp__cta-title {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: var(--sp-2);
}

.faqp__cta-text {
    font-size: 14px;
    color: var(--text-soft);
    margin-bottom: var(--sp-5);
}

@media (max-width: 480px) {
    .faqp { padding: var(--sp-6) var(--sp-3) var(--sp-12); }
    .faqp__toc { grid-template-columns: 1fr; }
    .faqp__cta .btn { width: 100%; }
}