/* faq.css */
.faq-page-wrapper { background-color: #000; color: #fff; padding: 120px 0; min-height: 100vh; font-family: 'Tajawal', sans-serif; }
.faq-hero h1 { font-size: 3.5rem; font-weight: 900; margin-bottom: 20px; text-align: center; }
.faq-hero h1 span { color: var(--primary); }
.faq-hero p { color: #aaa; font-size: 1.2rem; margin-bottom: 50px; text-align: center; }

/* البحث المتوهج */
.search-box-container { position: relative; max-width: 700px; margin: 0 auto 80px; }
#faqInput {
    width: 100%; padding: 20px 30px; border-radius: 50px; background: #111;
    border: 2px solid #222; color: #fff; font-size: 1.1rem; outline: none;
    position: relative; z-index: 2; transition: 0.3s;
}
.search-glow {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--primary); filter: blur(25px); opacity: 0;
    transition: 0.3s; border-radius: 50px; z-index: 1;
}
#faqInput:focus { border-color: var(--primary); }
#faqInput:focus + .search-glow { opacity: 0.3; }

/* التصنيفات والأسئلة */
.cat-title { color: var(--primary); font-size: 1.8rem; margin: 60px 0 30px; border-right: 5px solid var(--primary); padding-right: 20px; }
.faq-card { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 15px; margin-bottom: 15px; transition: 0.3s; overflow: hidden; }
.faq-header { padding: 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-header h3 { font-size: 1.15rem; margin: 0; color: #efefef; line-height: 1.5; }
.faq-icon { color: var(--primary); transition: 0.3s; }

.faq-body { max-height: 0; overflow: hidden; transition: 0.4s ease-in-out; background: #000; }
.faq-body-content { padding: 0 25px 25px; color: #b0b0b0; line-height: 1.8; font-size: 1rem; }

/* الحالة النشطة (Active) */
.faq-card.active { border-color: var(--primary); box-shadow: 0 0 20px rgba(217, 4, 41, 0.2); }
.faq-card.active .faq-body { max-height: 5000px; padding-bottom: 25px; }
.faq-card.active .faq-icon { transform: rotate(45deg); }
.faq-card.active .faq-header h3 { color: var(--primary); }

@media (max-width: 768px) {
    .faq-hero h1 { font-size: 2.2rem; }
    #faqInput { padding: 15px 20px; font-size: 0.95rem; }
}

/* تنسيق الكلمة المميزة عند البحث */
mark.faq-highlight {
    background: rgba(217, 4, 41, 0.2); /* خلفية حمراء شفافة جداً */
    color: var(--primary);            /* لون النص أحمر */
    font-weight: bold;
    padding: 0 2px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(217, 4, 41, 0.4); /* توهج أحمر خفيف */
}