/* استيراد الخط */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

/* 1. تنظيف الإعدادات العامة للمتصفح */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* لمنع ظهور شريط تمرير أفقي */
    -webkit-tap-highlight-color: transparent;
}

/* 1. جعل الخلفية بيضاء لـ main-container-inner */
/*#main-container-inner {*/
/*    background-color: #ffffff !important;*/
/*}*/

/* 2. إزالة الظل، الحواف الدائرية، والبادينج من الديف المحدد */
/*.region-inner.main-box-inner.sidebar-box-main-inner.fade-inner.region-left.region-xxl {*/
/*    box-shadow: none !important;*/
/*    border-radius: 0 !important;*/
/*    padding: 0 !important;*/
/*}*/

/* 2. تصفير الحاويات الأبوية لضمان عدم وجود قيود على العرض */
.field--name-w3css-content-body, 
.field__item {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

/* 3. تنسيق القسم الأساسي (alissa-app-main-wrapper) */
.alissa-app-main-wrapper {
    width: 100% !important;
    max-width: 100vw; /* يضمن عدم تجاوز عرض الشاشة */
    margin: 0 auto !important; /* التوسيط التلقائي من اليمين واليسار */
    display: block;
    position: relative;
    
    /* إضافة لون الخلفية الذي طلبته سابقاً */
    background: linear-gradient(45deg, #ffffff, #e6e8e8) !important;
    
    /* إذا أردت تحديد عرض أقصى للمحتوى الداخلي مع التوسيط */
    /* max-width: 1600px !important; */ 
}

/* إذا كان القسم الأب محصوراً في عرض ضيق (مثل 1200px) وتريد لهذا القسم أن يمتد لكامل الشاشة */
@media (min-width: 992px) {
    .alissa-app-main-wrapper.full-width-breakout {
        width: 100vw !important;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }
}
        
/* 1. فرض خط Tajawal على كل شيء داخل الحاوية بلا استثناء */
.alissa-app-main-wrapper, 
.alissa-app-main-wrapper *, 
.alissa-app-main-wrapper h1, 
.alissa-app-main-wrapper h2, 
.alissa-app-main-wrapper h3, 
.alissa-app-main-wrapper h4, 
.alissa-app-main-wrapper p, 
.alissa-app-main-wrapper a, 
.alissa-app-main-wrapper span, 
.alissa-app-main-wrapper div {
    font-family: "Noto Sans Arabic", sans-serif !important;
}

/* 2. الاستثناء الوحيد: خط Amiri للعناصر المحددة في الهيرو فقط */
#AlissaHeroSection .alissa-app-hero-title, 
#AlissaHeroSection .alissa-app-hero-title span,
#AlissaHeroSection .alissa-app-hero-p {
    font-family: 'Amiri', serif !important;
}

/* الإعدادات الأساسية للحاوية */
.alissa-app-main-wrapper {
    direction: rtl;
    --alissa-primary: #141438;
    --alissa-secondary: #76b5e5;
    --alissa-accent: #ae9967;
    --alissa-light-bg: #fcfcfc;
    --alissa-card-gray: #e6e8e8;
    --alissa-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.6;
    color: var(--alissa-primary);
    background: #fff;
    overflow-x: hidden;
    
    
}

#main-container {
    background: linear-gradient(45deg, #ffffff, #e6e8e8) !important;
}

   /* 2. حصر خط Amiri فقط للعناصر المطلوبة عبر هذا الكلاس */
    .alissa-app-font-serif { 
        font-family: 'Amiri', serif !important; 
    }

    /* أنيميشن مخصص */
    @keyframes alissaFadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .alissa-app-animate {
        animation: alissaFadeInUp 1s ease forwards;
    }

    .alissa-app-container {
        margin: 0 auto;
        padding: 0 4rem;
        
    }
    
    @media (max-width: 767px) {
   
    /* ملاحظة هامة: في الجوال الـ 4rem ستجعل المحتوى ضيقاً جداً، يفضل تقليلها */
   .alissa-app-container {
        padding: 0 1rem !important; 
    }
}

    /* قسم الهيرو - Hero */
    /* --- تحديث قسم الهيرو ليتطابق مع Tailwind المطلوب --- */
.alissa-app-hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #141438;
    overflow: hidden;
    /* ضمان ظهور النص باللون الأبيض حتى لو وجد ستايل خارجي */
    color: #ffffff !important; 
}

.alissa-app-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.alissa-app-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7); /* تعتيم الصورة بنسبة 50% */
}

/* التدرج اللوني (Gradient) ليطابق Tailwind بالضبط */
.alissa-app-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(20, 20, 56, 0.9) 0%, transparent 100%);
}

.alissa-app-hero-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 10;
}

.alissa-app-hero-content {
    max-width: 800px;
    text-align: right;
}

/* النص العلوي (شخصية عالمية رائدة) */
.alissa-app-hero-label {
    color: #76b5e5 !important;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 0.875rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: block;
}

/* العنوان الرئيسي */
/* العنوان الرئيسي - خط Amiri */
    .alissa-app-hero-title {
        font-family: 'Amiri', serif !important;
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        font-weight: 700;
        line-height: 1.1;
        margin-bottom: 1.5rem;
        color: #ffffff !important;
    }

    /* الاقتباس في الهيرو - خط Amiri */
    .alissa-app-hero-p {
        font-family: 'Amiri', serif !important;
        font-size: 1.25rem;
        color: #d1d5db !important;
        margin-bottom: 2rem;
        max-width: 600px;
        line-height: 1.7;
        font-style: italic;
    }

.alissa-app-hero-title span {
    color: #ffffff !important;
}


/* حاوية الأزرار */
.alissa-app-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* زر اكتشف الرؤية (الأحمر) */
.alissa-app-hero-btn-red {
    background-color: #ae9967 !important;
    color: #ffffff !important;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.alissa-app-hero-btn-red:hover {
    background-color: #76b5e5 !important;
    transform: translateY(-2px);
}

/* زر شاهد الكلمات (الشفاف مع Blur) */
.alissa-app-hero-btn-blur {
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.alissa-app-hero-btn-blur:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* أنيميشن الدخول من اليسار ليطابق AOS fade-left في RTL */
@keyframes alissaFadeLeft {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

.alissa-app-hero-animate {
    animation: alissaFadeLeft 1s ease-out forwards;
}

/* تعديل للهواتف */
@media (max-width: 768px) {
    .alissa-app-hero-gradient {
        background: linear-gradient(to top, rgba(20, 20, 56, 0.95), rgba(20, 20, 56, 0.5));
    }
    .alissa-app-hero-content {
        text-align: center;
    }
    .alissa-app-hero-btns {
        justify-content: center;
    }
    .alissa-app-hero-p {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- كلاسات دعم الإنجليزية (LTR) --- */

/* 1. تغيير اتجاه المحاذاة */
.alissa-is-ltr .alissa-app-hero-content {
    text-align: left;
}

/* 2. عكس التدرج اللوني ليصبح الظل الداكن على اليسار */
.alissa-is-ltr .alissa-app-hero-gradient {
    background: linear-gradient(to right, rgba(20, 20, 56, 0.9) 0%, transparent 100%);
}

/* 3. تعديل أنيميشن الدخول ليأتي من اليسار */
@keyframes alissaFadeRight {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

.alissa-is-ltr .alissa-app-hero-animate {
    animation: alissaFadeRight 1s ease-out forwards;
}

/* 4. تعديل الهوامش للأزرار في الجوال */
@media (max-width: 768px) {
    .alissa-is-ltr .alissa-app-hero-gradient {
        background: linear-gradient(to top, rgba(20, 20, 56, 0.95), rgba(20, 20, 56, 0.5));
    }
}

 .alissa-app-section-head {
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    width: 100%;
}

    .alissa-app-title-center {
        text-align: center;
        width: 100%;
        margin-bottom: 3rem;
    }

   .alissa-app-title-main {
    font-size: 2.2rem;
    font-weight: 800;
    position: relative;
    padding-bottom: 15px;
    display: inline-block;
    color: #000 !important;
}

    .alissa-app-title-main::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 4px;
    background: var(--alissa-accent);
}

.alissa-app-section-head p {
    color: #888;
    margin: 0;
    max-width: 600px;
}

 /* بطاقات الاقتباسات - Quotes */
.alissa-app-quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    /* التأكد من تمدد العناصر لتتساوى في الطول */
    align-items: stretch; 
    padding: 0 4rem;
}

  
    
    @media (max-width: 767px) {
   
    /* ملاحظة هامة: في الجوال الـ 4rem ستجعل المحتوى ضيقاً جداً، يفضل تقليلها */
   .alissa-app-quote-grid {
        padding: 0 1rem !important; 
    }
}

.alissa-app-quote-card {
    background: var(--alissa-card-gray);
    padding: 2.5rem;
    border-radius: 20px;
    border-top: 5px solid var(--alissa-accent);
    
    /* التعديل الجوهري هنا: اجعلها 100% لتملأ خلية الشبكة بالكامل */
    height: 100%; 
    
    display: flex;
    flex-direction: column;
    transition: var(--alissa-transition);
    text-align: center;
    box-sizing: border-box; /* لضمان عدم خروج الحواف بسبب Padding */
}

/*.alissa-app-quote-card:hover {*/
/*    background: var(--alissa-primary);*/
/*    transform: translateY(-10px);*/
/*}*/

/*.alissa-app-quote-card:hover p { color: white; }*/
/*.alissa-app-quote-card:hover .alissa-app-quote-icon { color: rgba(255,255,255,0.2); }*/

.alissa-app-quote-icon { 
    color: var(--alissa-accent); 
    margin-bottom: 1.5rem; 
    transition: 0.3s; 
}

.alissa-app-quote-text { 
    font-size: 1.15rem; 
    font-style: italic; 
    margin-bottom: 2rem; 
    line-height: 1.8; 
    /* هذا سيجعل النص يأخذ المساحة المتاحة ويدفع التذييل للأسفل */
    flex-grow: 1; 
}

.alissa-app-quote-footer {
    /* سيبقى دائماً في الأسفل بفضل flex-direction: column و margin-top: auto */
    margin-top: auto;
    font-weight: 700;
    color: var(--alissa-accent);
    font-size: 0.95rem;
    padding-top: 1rem;
}

    /* قسم قالوا عنه - Testimonials */
    .alissa-app-testi-sec {
    background: var(--alissa-light-bg);
     padding-top: 6rem;
    padding-bottom: 6rem; /* استبدل 2rem بالقيمة التي تريدها للأسفل */
}

    .alissa-app-testi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 2rem;
    }

    .alissa-app-testi-card {
        background: #fff;
        padding: 2.5rem;
        border-radius: 15px;
        border-right: 5px solid var(--alissa-accent);
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
        transition: var(--alissa-transition);
    }

    .alissa-app-testi-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    }

    .alissa-app-user-info { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }

    .alissa-app-avatar-circle {
        width: 60px;
        height: 60px;
        background: var(--alissa-card-gray);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--alissa-accent);
    }

    .alissa-app-testi-text { font-style: italic; color: #555; font-size: 1.1rem; line-height: 1.7; }
    

    /* الأزرار الروابط */
    .alissa-app-btn-more {
        background: none;
        border: none;
        font-weight: 800;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 1rem;
        transition: 0.3s;
        text-decoration: none;
        color : #ae9967 !important;
    }

    .alissa-app-btn-more:hover { gap: 12px; transform: translateX(-5px); }

    /* التجاوب */
    @media (max-width: 768px) {
        .alissa-app-testi-grid { grid-template-columns: 1fr; }
        .alissa-app-section-head { flex-direction: column; text-align: center; }
        .alissa-app-title-main { font-size: 1.8rem; }
    }

  /* 1. زيادة ارتفاع صل) */
.alissa-app-news-img { 
    width: 100%; 
    height: 350; ك */
    object-fit: cover; 
}

/* 2. إضافة مسافة أسفل البطاقة في شاشات الجوال فقط */
@media (max-width: 768px) {
    .alissa-app-news-card {
        margin-bottom: 1.5rem; /* مسافة إضافية لتجنب التصاق البطاقات عند الترتيب الرأسي */
    }
}

.alissa-app-news-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 2rem; 
}
.alissa-app-news-card { 
    border-radius: 20px; 
    overflow: hidden; 
    border: 1px solid #eee; 
    transition: 0.4s; 
    background: #fff; 
    display: flex; 
    flex-direction: column; 
}
.alissa-app-news-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 20px 30px rgba(0,0,0,0.05); 
}
.alissa-app-news-body { 
    padding: 1.5rem; 
    flex-grow: 1; 
}
/* --- التنسيق الأساسي --- */
.alissa-app-news-body h3, 
.alissa-app-news-body h3 a {
    color: #000000 !important;
    font-weight: normal !important;
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 16px; /* الحجم الافتراضي للجوال */
    
   
    overflow: hidden;
    margin-bottom: 5px;
}

/* --- تأثير الهوفر --- */
.alissa-app-news-body h3:hover,
.alissa-app-news-body h3 a:hover {
    color: #76b5e5 !important;
    cursor: auto;
}

/* --- التحكم بالأحجام عبر Media Queries (تم التعديل هنا) --- */

/* الشاشات المتوسطة (تابلت) */
@media (min-width: 768px) {
    .alissa-app-news-body h3,
    .alissa-app-news-body h3 a {
        font-size: 18px;
    }
}

/* الشاشات الكبيرة (لابتوب) */
@media (min-width: 992px) {
    .alissa-app-news-body h3,
    .alissa-app-news-body h3 a {
        font-size: 20px;
    }
}

/* الشاشات الضخمة */
@media (min-width: 1200px) {
    .alissa-app-news-body h3,
    .alissa-app-news-body h3 a {
        font-size: 22px;
    }
}

/* --- تنسيق وصف الخبر (الفقرة) --- */
.alissa-app-news-body p {
    /* تغيير اللون ليكون رمادي غامق لتمييزه عن العنوان الأسود */
    color: #555555 !important; 
    
    /* حجم خط أصغر من العنوان ليعطي انطباع أنه وصف */
    font-size: 14px; 
    
    /* تباعد أسطر ممتاز للنصوص العربية */
    line-height: 1.7;
    
    /* مسافة بسيطة بين العنوان والوصف */
    margin-bottom: 15px;
    
    /* تحديد عدد الأسطر (سطرين أو ثلاثة) ليظل شكل البطاقات متناسق */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* يظهر 3 أسطر فقط ثم يضع نقاط ... */
    -webkit-box-orient: vertical;
    overflow: hidden;
    
    /* وزن الخط عادي (عكس العنوان الذي قد يكون أسمك) */
    font-weight: normal !important;
}

/* --- التحكم بحجم الوصف في الشاشات الأكبر --- */
@media (min-width: 992px) {
    .alissa-app-news-body p {
        font-size: 15px; /* تكبير بسيط للشاشات الكبيرة */
    }
}

    /* --- قسم المكتبة المرئية --- */
.alissa-app-video-sec .views-field-title,
.alissa-app-video-sec .views-field-title .field-content {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.125rem;
  margin-top: 1rem;
  display: block;
  transition: color 0.3s ease;
}

/* Hover color */
.alissa-app-video-item:hover .views-field-title,
.alissa-app-video-item:hover .views-field-title .field-content {
  color: #76b5e5 !important;
}

.alissa-app-video-header {
    margin-bottom: 4rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

/* الزر العلوي يسار (يظهر في الكمبيوتر فوق وفي الجوال تحت العنوان) */
.alissa-app-video-btn-top {
    position: relative;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .alissa-app-video-btn-top {
        position: absolute;
        left: 0;
        top: 0;
        margin-top: 0;
    }
}

.alissa-app-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    text-align: right;
}

/* بطاقة الفيديو */
.alissa-app-video-item {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.alissa-app-video-thumb {
    position: relative;
    height: 240px;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

.alissa-app-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.alissa-app-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.alissa-app-video-play-btn {
    width: 64px;
    height: 64px;
    background-color: #ae9967;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* تأثيرات الحوّم (Hover) */
.alissa-app-video-item:hover .alissa-app-video-thumb img {
    transform: scale(1.1);
}

.alissa-app-video-item:hover .alissa-app-video-overlay {
    background: rgba(0, 0, 0, 0.2);
}

.alissa-app-video-item:hover .alissa-app-video-play-btn {
    transform: scale(1.1);
}

.alissa-app-video-item:hover h4 {
    color: #76b5e5 !important;
}

.alissa-app-video-title-card {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.4;
    transition: color 0.3s ease;
    color: #ffffff !important;
    margin: 0;
}
/* --- ALISSA HEADER V2026 - COMPLETE STYLESHEET --- */
/* --- ALISSA HEADER V2026 - COMPLETE FINAL STYLE --- */


#alissa-v2026-header-wrapper {
    direction: rtl;
    font-family: "Noto Sans Arabic", sans-serif;
}

/* تصفير أي تنسيقات مسبقة قد تتداخل من القالب */
#alissa-v2026-header-wrapper ul,
#alissa-v2026-header-wrapper li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* الهيدر الأساسي */
.alissa-v2026-navbar {
    position: sticky;
    top: 0; left: 0; right: 0; width: 100%;
    z-index: 10000;
    padding: 20px 0;
    transition: all 0.4s ease;
    background-color: #141438; /* اللون الكحلي الأساسي */
}

/* تأثير الشفافية عند السكرول للمتصفحات الحديثة */
@supports (animation-timeline: scroll()) {
    .alissa-v2026-navbar {
        background-color: transparent;
        animation: alissa-v2026-scroll-anim linear both;
        animation-timeline: scroll();
        animation-range: 0px 100px;
    }
}



@keyframes alissa-v2026-scroll-anim {
    to { 
        background-color: rgba(20, 20, 56, 0.98); 
        padding: 10px 0; 
        box-shadow: 0 5px 25px rgba(0,0,0,0.4); 
    }
}

.alissa-v2026-container {
    width: 100% !important; /* يأخذ كامل عرض الشاشة */
    max-width: 2000px !important; /* أقصى عرض للمحتوى في الشاشات الكبيرة جداً */
    margin: 0 auto !important; /* توسيط المحتوى */
    padding: 0 30px !important; /* هوامش جانبية بسيطة لكي لا يلتصق الكلام بالحافة */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box; /* لضمان حساب العرض مع البادينج بشكل صحيح */
}

/* القائمة الرئيسية */
.alissa-v2026-nav-list { display: flex !important; gap: 15px; }
.alissa-v2026-nav-list > li { position: relative; }
.alissa-v2026-nav-list > li > a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 15px; font-weight: 500; padding: 10px 8px; display: block; transition: 0.3s;
}
.alissa-v2026-nav-list > li > a:hover,
.alissa-v2026-nav-list > li.is-active > a {
    color: #ae9967 !important; /* اللون الذهبي */
}
/* --- إصلاح شفافية القائمة المنسدلة --- */

/* نكرر المعرف لضمان كسر أي ستايل خارجي */
#alissa-v2026-header-wrapper .alissa-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    
    /* تغيير اللون هنا - تأكد أنه ليس transparent */
    background-color: #141438 !important; 
    background: #141438 !important; 
    
    min-width: 230px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    
    /* إضافة ظل قوي ليظهر التباين */
    box-shadow: 0 15px 35px rgba(0,0,0,0.6) !important;
    
    border-radius: 4px !important;
    border-top: 3px solid #ae9967 !important;
    
    /* التأكد من الظهور */
    display: block !important; 
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s ease-in-out !important;
    z-index: 99999 !important;
}

/* التأكد من أن الخلفية لا تتغير عند الوقوف على العنصر الأب */
#alissa-v2026-header-wrapper .alissa-v2026-nav-list li:hover > .alissa-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    background-color: #141438 !important;
}

/* روابط القائمة الفرعية - التأكد من اللون الأبيض وعدم الشفافية */
#alissa-v2026-header-wrapper .alissa-dropdown-menu li {
    background: transparent !important; /* الخلفية تعتمد على الـ UL الأب */
    width: 100% !important;
    display: block !important;
}

#alissa-v2026-header-wrapper .alissa-dropdown-menu li a {
    color: #ffffff !important;
    background-color: transparent !important;
    display: block !important;
    opacity: 1 !important;
    padding: 12px 20px !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* هوفر الروابط الفرعية */
#alissa-v2026-header-wrapper .alissa-dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ae9967 !important;
}

/* إظهار القائمة الفرعية عند تمرير الماوس */
.alissa-v2026-nav-list li:hover > .alissa-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* زر التواصل */
.alissa-v2026-btn {
    background-color: #ae9967 !important;
    color: #ffffff !important;
    padding: 10px 25px !important;
    border-radius: 50px !important;
    font-weight: 700; font-size: 14px; 
    text-decoration: none !important; 
    transition: 0.3s;
    white-space: nowrap;
}
.alissa-v2026-btn:hover {
    background-color: #76b5e5  !important; color: #fffff !important; transform: translateY(-2px);
}

/* إخفاء أيقونة القائمة في الشاشات التي عرضها أكبر من 992 بكسل */
@media (min-width: 992px) {
    .alissa-v2026-menu-icon {
        display: none !important;
    }
}

/* --- إصلاح قائمة الجوال (Mobile Menu Fix) --- */
@media (max-width: 992px) {
    /* 1. إخفاء العناصر غير الضرورية */
    #alissa-v2026-header-wrapper .alissa-v2026-btn {
        display: none !important;
    }

    /* 2. أيقونة المنيو */
    #alissa-v2026-header-wrapper .alissa-v2026-menu-icon {
        display: block !important;
        order: 1;
    }

    /* 3. حاوية القائمة الرئيسية */
    #alissa-v2026-header-wrapper .alissa-v2026-nav-wrapper {
        display: none; 
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: #141438 !important;
        z-index: 9999 !important;
        max-height: 85vh;
        overflow-y: auto;
    }

    /* إظهار القائمة الرئيسية عند النقر على الهامبرغر */
    #alissa-v2026-header-wrapper #alissa-v2026-mobile-toggle:checked ~ .alissa-v2026-container .alissa-v2026-nav-wrapper {
        display: block !important;
    }

    #alissa-v2026-header-wrapper .alissa-v2026-nav-list {
        flex-direction: column !important;
        display: flex !important;
        width: 100% !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    #alissa-v2026-header-wrapper .alissa-v2026-nav-list > li {
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        position: relative;
    }

    #alissa-v2026-header-wrapper .alissa-v2026-nav-list > li > a {
        padding: 15px 20px !important;
        display: block !important;
        width: 100% !important;
    }

    /* 4. القائمة الفرعية (Dropdown) - مغلقة افتراضياً */
    #alissa-v2026-header-wrapper .alissa-dropdown-menu {
        display: none !important; /* إخفاء افتراضي */
        position: static !important;
        width: 100% !important;
        background-color: rgba(0, 0, 0, 0.3) !important;
        padding: 0 !important;
        border: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* 5. إظهار القائمة الفرعية فقط عند النقر/اللمس على العنصر الأب */
    /* في الجوال، اللمسة الأولى تعتبر Hover */
    #alissa-v2026-header-wrapper .alissa-v2026-nav-list li:hover > .alissa-dropdown-menu,
    #alissa-v2026-header-wrapper .alissa-v2026-nav-list li:focus-within > .alissa-dropdown-menu {
        display: block !important;
    }

    /* 6. إضافة سهم صغير بجانب العناصر التي تحتوي على قائمة فرعية */
    #alissa-v2026-header-wrapper .has-dropdown > a::after {
        content: ' ▾';
        font-size: 12px;
        float: left;
        color: rgba(255,255,255,0.5);
    }

    /* 7. روابط القائمة الفرعية */
    #alissa-v2026-header-wrapper .alissa-dropdown-menu li a {
        padding: 12px 40px 12px 20px !important;
        font-size: 14px !important;
        color: rgba(255,255,255,0.8) !important;
        background: transparent !important;
    }
}

/* ================================================================
   Alissa V2026 Header - LTR Version (English)
   ================================================================ */

#alissa-v2026-header-wrapper-ltr {
    direction: ltr !important;
    font-family: "Noto Sans Arabic", sans-serif;
}

/* تصفير أي تنسيقات مسبقة قد تتداخل من القالب */
#alissa-v2026-header-wrapper-ltr ul,
#alissa-v2026-header-wrapper-ltr li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* الهيدر الأساسي */
.alissa-v2026-navbar-ltr {
    position: sticky;
    top: 0; left: 0; right: 0; width: 100%;
    z-index: 10000;
    padding: 20px 0;
    transition: all 0.4s ease;
    background-color: #141438; /* اللون الكحلي */
}

/* تأثير الشفافية عند السكرول */
@supports (animation-timeline: scroll()) {
    .alissa-v2026-navbar-ltr {
        background-color: transparent;
        animation: alissa-v2026-scroll-anim-ltr linear both;
        animation-timeline: scroll();
        animation-range: 0px 100px;
    }
}

@keyframes alissa-v2026-scroll-anim-ltr {
    to { 
        background-color: rgba(20, 20, 56, 0.98); 
        padding: 10px 0; 
        box-shadow: 0 5px 25px rgba(0,0,0,0.4); 
    }
}

.alissa-v2026-container-ltr {
    width: 100% !important;
    max-width: 2000px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

/* تنسيق منطقة الشعار */
/* إصلاح منطقة الشعار ومنع تمددها */
.alissa-v2026-brand {
    display: block !important;
    width: 180px !important; /* حدد عرضاً ثابتاً ومناسباً للشعار */
    height: auto !important;
    flex-shrink: 0 !important; /* يمنع الشعار من التصغير أو التمدد */
    overflow: hidden;
    margin-left: 20px; /* مسافة بين الشعار والقائمة */
}

/* إصلاح الصورة نفسها داخل الرابط */
.alissa-v2026-logo-img {
    width: 100% !important;
    max-width: 180px !important;
    height: auto !important;
    max-height: 60px !important;
    display: block !important;
    object-fit: contain; /* يحافظ على أبعاد الصورة داخل الإطار */
}

.alissa-v2026-brand-ltr {
    display: block !important;
    width: 180px !important; /* حدد عرضاً ثابتاً ومناسباً للشعار */
    height: auto !important;
    flex-shrink: 0 !important; /* يمنع الشعار من التصغير أو التمدد */
    overflow: hidden;
    margin-left: 20px; 
}

/* إصلاح الصورة نفسها داخل الرابط */
.alissa-v2026-logo-img-ltr {
    width: 100% !important;
    max-width: 180px !important;
    height: auto !important;
    max-height: 60px !important;
    display: block !important;
    object-fit: contain; /* يحافظ على أبعاد الصورة داخل الإطار */
}

/* تأكد أن الحاوية الرئيسية لا تترك الشعار يتمدد */
.alissa-v2026-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
/* تصغير الشعار قليلاً عند السكرول (اختياري ليتماشى مع حركة الهيدر) */
@keyframes alissa-v2026-scroll-anim {
    to { 
        background-color: rgba(20, 20, 56, 0.98); 
        padding: 10px 0; 
        box-shadow: 0 5px 25px rgba(0,0,0,0.4); 
    }
}

/* للهواتف: تصغير الشعار ليتناسب مع الشاشات الصغيرة */
@media (max-width: 768px) {
    .alissa-v2026-logo-img {
        max-height: 45px; 
    }
}

/* القائمة الرئيسية (Desktop) */
.alissa-v2026-nav-list-ltr { 
    display: flex !important; 
    gap: 15px; 
}

.alissa-v2026-nav-list-ltr > li { 
    position: relative; 
}

.alissa-v2026-nav-list-ltr > li > a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 15px; 
    font-weight: 500; 
    padding: 10px 8px; 
    display: block; 
    transition: 0.3s;
}

.alissa-v2026-nav-list-ltr > li > a:hover,
.alissa-v2026-nav-list-ltr > li.is-active-ltr > a {
    color: #ae9967 !important; /* اللون الذهبي */
}

/* القائمة المنسدلة (Dropdown Desktop) */
#alissa-v2026-header-wrapper-ltr .alissa-dropdown-menu-ltr {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important; /* تبدأ من اليسار في LTR */
    background-color: #141438 !important; 
    min-width: 230px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6) !important;
    border-radius: 4px !important;
    border-top: 3px solid #ae9967 !important;
    
    display: block !important; 
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s ease-in-out !important;
    z-index: 99999 !important;
}

/* إظهار القائمة المنسدلة عند الهوفر */
#alissa-v2026-header-wrapper-ltr .alissa-v2026-nav-list-ltr li:hover > .alissa-dropdown-menu-ltr {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

#alissa-v2026-header-wrapper-ltr .alissa-dropdown-menu-ltr li a {
    color: #ffffff !important;
    display: block !important;
    padding: 12px 20px !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-align: left !important; /* محاذاة النص لليسار */
}

#alissa-v2026-header-wrapper-ltr .alissa-dropdown-menu-ltr li a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ae9967 !important;
}

/* زر التواصل */
.alissa-v2026-btn-ltr {
    background-color: #ae9967 !important;
    color: #ffffff !important;
    padding: 10px 25px !important;
    border-radius: 50px !important;
    font-weight: 700; 
    font-size: 14px; 
    text-decoration: none !important; 
    transition: 0.3s;
    white-space: nowrap;
}

.alissa-v2026-btn-ltr:hover {
    background-color: #76b5e5 !important; 
    color: #fffff !important; 
    transform: translateY(-2px);
}

/* أيقونة المنيو (تظهر في الجوال فقط) */
@media (min-width: 992px) {
    .alissa-v2026-menu-icon-ltr {
        display: none !important;
    }
}

/* ================================================================
   تنسيقات الجوال (Mobile LTR)
   ================================================================ */

@media (max-width: 992px) {
    /* إخفاء زر التواصل في الجوال لترك مساحة للوجو والمنيو */
    #alissa-v2026-header-wrapper-ltr .alissa-v2026-btn-ltr {
        display: none !important;
    }

    /* أيقونة الهامبرغر */
    #alissa-v2026-header-wrapper-ltr .alissa-v2026-menu-icon-ltr {
        display: block !important;
        order: 2; /* وضعها في أقصى اليمين */
        cursor: pointer;
        color: #fff;
    }

    /* حاوية القائمة في الجوال */
    #alissa-v2026-header-wrapper-ltr .alissa-v2026-nav-wrapper-ltr {
        display: none; 
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: #141438 !important;
        z-index: 9999 !important;
        max-height: 85vh;
        overflow-y: auto;
    }

    /* إظهار المنيو عند تفعيل التوجل */
    #alissa-v2026-header-wrapper-ltr #alissa-v2026-mobile-toggle-ltr:checked ~ .alissa-v2026-container-ltr .alissa-v2026-nav-wrapper-ltr {
        display: block !important;
    }

    #alissa-v2026-header-wrapper-ltr .alissa-v2026-nav-list-ltr {
        flex-direction: column !important;
        display: flex !important;
        width: 100% !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    #alissa-v2026-header-wrapper-ltr .alissa-v2026-nav-list-ltr > li {
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }

    #alissa-v2026-header-wrapper-ltr .alissa-v2026-nav-list-ltr > li > a {
        padding: 15px 20px !important;
        text-align: left !important;
    }

    /* القائمة المنسدلة في الجوال */
    #alissa-v2026-header-wrapper-ltr .alissa-dropdown-menu-ltr {
        display: none !important;
        position: static !important;
        width: 100% !important;
        background-color: rgba(0, 0, 0, 0.3) !important;
        padding: 0 !important;
        border: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* إظهار القائمة الفرعية عند الضغط (Hover/Focus) */
    #alissa-v2026-header-wrapper-ltr .alissa-v2026-nav-list-ltr li:hover > .alissa-dropdown-menu-ltr,
    #alissa-v2026-header-wrapper-ltr .alissa-v2026-nav-list-ltr li:focus-within > .alissa-dropdown-menu-ltr {
        display: block !important;
    }

    /* سهم القائمة المنسدلة في الجوال */
    #alissa-v2026-header-wrapper-ltr .has-dropdown-ltr > a::after {
        content: ' ▾';
        font-size: 12px;
        float: right; /* السهم جهة اليمين في LTR */
        color: rgba(255,255,255,0.5);
    }

    /* روابط القائمة الفرعية في الجوال */
    #alissa-v2026-header-wrapper-ltr .alissa-dropdown-menu-ltr li a {
        padding: 12px 20px 12px 40px !important; /* إزاحة النص لليمين قليلاً لبيان التبعية */
        font-size: 14px !important;
    }
}
/* --- التنسيق الذكي للشاشات المتوسطة (1275px وأخواتها) للجهتين RTL & LTR --- */
@media (max-width: 1350px) and (min-width: 993px) {
    
    /* 1. الحاوية الأساسية: السماح بالالتفاف لإنشاء الصف الثاني */
    #alissa-v2026-header-wrapper .alissa-v2026-container,
    #alissa-v2026-header-wrapper-ltr .alissa-v2026-container-ltr {
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        padding: 10px 30px !important;
    }

    /* 2. القائمة: إجبارها على النزول لصف مستقل في الأسفل وتوسيطها */
    #alissa-v2026-header-wrapper .alissa-v2026-nav-wrapper,
    #alissa-v2026-header-wrapper-ltr .alissa-v2026-nav-wrapper-ltr {
        order: 3 !important; /* لضمان ظهورها بعد اللوجو والزر */
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 15px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 10px !important;
    }

    /* 3. الزر: الحفاظ على حجمه الطبيعي ومنعه من التمدد في الصف العلوي */
    #alissa-v2026-header-wrapper .alissa-v2026-btn,
    #alissa-v2026-header-wrapper-ltr .alissa-v2026-btn-ltr {
        width: fit-content !important;
        display: inline-block !important;
        padding: 8px 20px !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    /* 4. قائمة الروابط: التأكد من ترتيبها الأفقي وتوسيطها */
    #alissa-v2026-header-wrapper .alissa-v2026-nav-list,
    #alissa-v2026-header-wrapper-ltr .alissa-v2026-nav-list-ltr {
        flex-direction: row !important;
        display: flex !important;
        gap: 15px !important;
        justify-content: center !important;
        flex-wrap: wrap !important; /* في حال كانت الروابط كثيرة جداً لا تخرج عن الإطار */
    }

    /* 5. الروابط الفردية: تحسين حجم الخط ليتناسب مع الصف الجديد */
    #alissa-v2026-header-wrapper .alissa-v2026-nav-list > li > a,
    #alissa-v2026-header-wrapper-ltr .alissa-v2026-nav-list-ltr > li > a {
        font-size: 14px !important;
        padding: 5px 8px !important;
        white-space: nowrap !important;
    }
}
.quotes-grid .quote-card{
  background:#ffffff;
  border:1px solid #ececec;
  border-radius:16px;
  padding:40px;
  transition:all .4s ease;
  height:100%;
  font-size:1.1rem;
  line-height:1.8;
  font-style:italic;
  color:#141438;
 
}

.quotes-grid .quote-card:hover{
  transform:translateY(-10px);
  border-color:#ae9967;
  box-shadow:0 20px 40px -15px rgba(20,20,56,.1);
}

/* quote icon */
.quotes-grid .quote-card::before{
  content:"❝";
  font-size:60px;
  color:rgba(174,153,103,.2);
  position:absolute;
  top:40px;
  left:20px;
}
.quote-footer{
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid #eee;
}

.quote-source{
  color:#ae9967;
  font-weight:bold;
  font-size:22px;
  text-align: center;
}

.quote-location{
  color:#999;
  font-size:22px;
}
/* 1. الحاوية الرئيسية */
.testimonials-grid.row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -15px !important;
  align-items: stretch !important;
}

/* 2. حاوية البطاقة - ضبط المسافات والتموضع */
.testimonial-card.col-lg-4, 
.testimonial-card.col-md-6,
.testimonial-card.col-12 {
  display: flex !important;
  flex-direction: column !important;
  background-color: transparent !important;
  border: none !important;
  padding: 20px !important; /* المسافة بين الصناديق */
  position: relative !important;
  text-align: center !important;
  z-index: 1;
}

/* 3. جسم البطاقة (الخلفية والحدود) - قمنا بتحسينه ليظهر فوق الطبقات الأخرى */
.testimonial-card::after {
  content: "";
  position: absolute;
  top: 20px; bottom: 20px; left: 20px; right: 20px;
  
  /* --- هنا تغير لون الخلفية --- */
  background-color: #fcfcfc !important; 
  
  /* حدود رمادية خفيفة جداً في الحالة العادية */
  border: 1px solid #e1e1e1 !important; 
  border-radius: 16px !important;
  
  /* التأكد من أنه تحت النص مباشرة */
  z-index: -1; 
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
  display: block !important;
}

/* 4. تأثير الهوفر (الحدود الذهبية والرفع) */
.testimonial-card:hover::after {
  /* --- لون وحدود الهوفر --- */
  background-color: #ffffff !important; /* يتغير لونه للأبيض الصريح عند الهوفر */
  border: 2px solid #ae9967 !important; /* حدود ذهبية واضحة */
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(174, 153, 103, 0.2);
}

/* 5. أيقونة الاقتباس */
.testimonial-card::before {
  content: "❝";
  font-size: 38px;
  color: #ae9967;
  opacity: 0.5;
  display: block;
  margin: 15px auto 5px auto;
  line-height: 1;
  position: relative;
  z-index: 2;
}

/* 6. النص الأساسي */
.testimonial-text {
  font-size: 17px !important;
  line-height: 1.8 !important;
  color: #333 !important;
  padding: 0 20px;
  margin-bottom: 30px !important;
  flex-grow: 1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* 7. الخط الفاصل الذهبي */
.testimonial-name::before {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background-color: #ae9967 !important;
  margin: 0 auto 20px auto;
  transition: width 0.4s ease-in-out;
}

.testimonial-card:hover .testimonial-name::before {
  width: 70px;
}

/* 8. اسم القائل والمنصب */
.testimonial-name {
  font-weight: 700 !important;
  color: #141438 !important;
  font-size: 14px !important;
  margin-top: auto !important;
  margin-bottom: 5px !important;
  display: block;
  position: relative;
  z-index: 2;
}

.testimonial-position {
  color: #76b5e5 !important;
  font-size: 13px !important;
  display: block;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

/* 10. إخفاء التكرار والروابط المشوهة */
.testimonial-card a {
  display: none !important;
}

.alissa-app-btn-more a {
    color: #ae9967 !important;
}

.page-title-text a {
    color: #ffffff !important;
}

#sidebar-box-main .region-inner, 
#sidebar-box-second .region-inner {
    border-radius: 15px;
    overflow: hidden;
}

#sidebar-box-main img, 
#sidebar-box-second img {
    border-radius: 15px;
}

/* العناوين باللون الأسود */
.view-id-related_items .views-row a {
    color: #000000 !important;
}

/* الحفاظ على لون إقرأ المزيد ذهبي */
.view-id-related_items .solo-text-center, 
.view-id-related_items .solo-text-center a {
    color: #ae9967 !important;
}

#main-container, 
#main-container-inner {
    background-color: #FCFCFC !important;
}

  .alissa-v2026-neutral-section {
      
        background-color: var(--alissa-light-bg);
        padding: 80px 20px;
        text-align: center; /* توحيد المحاذاة للمنتصف */
    }

    .alissa-v2026-neutral-container {
        max-width: 1500px;
        margin: 0 auto;
    }

    /* الجزء العلوي - محايد تماماً */
    .alissa-v2026-neutral-header {
        max-width: 800px;
        margin: 0 auto 0px auto;
    }

    .alissa-v2026-neutral-top-tag {
        display: inline-flex;
        align-items: center;
        gap: 15px;
        color: var(--alissa-secondary);
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 20px;
    }

    .alissa-v2026-neutral-top-tag::before,
    .alissa-v2026-neutral-top-tag::after {
        content: "";
        width: 26px;
        height: 2px;
        background-color: var(--alissa-accent);
    }

    .alissa-v2026-neutral-heading {
        color: #000000 !important;
        font-size: clamp(25px, 5vw, 35px);
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 25px;
    }

    .alissa-v2026-neutral-heading span {
        color: var(--alissa-accent);
    }

    .alissa-v2026-neutral-lead-text {
        color: #555 !important;
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 40px;
    }

    /* بطاقة الاقتباس - تصميم متوازن */
    .alissa-v2026-neutral-quote-box {
        background: #fff;
        padding: 30px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        border-bottom: 4px solid var(--alissa-accent); /* حد سفلي بدلاً من جانبي */
        display: inline-block;
        max-width: 700px;
        margin-bottom: 70px;
    }

    .alissa-v2026-neutral-quote-box p {
        font-style: italic;
        color: var(--alissa-primary);
        font-size: 17px;
        margin: 0 0 10px 0;
        font-weight: 500;
    }

    /* شبكة الركائز - محايدة الاتجاه */
    .alissa-v2026-neutral-pillars-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 25px;
    }

    .alissa-v2026-neutral-pillar-card {
        background: #ffffff;
        border: 1px solid var(--alissa-card-gray);
        padding: 35px 25px;
        border-radius: 24px;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center; /* توسيط المحتوى داخل البطاقة */
    }

    .alissa-v2026-neutral-pillar-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(20, 20, 56, 0.08);
        border-color: var(--alissa-secondary);
    }

    .alissa-v2026-neutral-icon-circle {
        width: 70px;
        height: 70px;
        background-color: var(--alissa-light-bg);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        transition: 0.3s;
        border: 1px solid var(--alissa-card-gray);
    }

    .alissa-v2026-neutral-pillar-card:hover .alissa-v2026-neutral-icon-circle {
        background-color: var(--alissa-primary);
    }

    .alissa-v2026-neutral-icon-circle svg {
        width: 30px;
        height: 30px;
        stroke: var(--alissa-accent);
        fill: none;
        stroke-width: 1.5;
    }

    .alissa-v2026-neutral-pillar-card:hover svg {
        stroke: #fff;
    }

    .alissa-v2026-neutral-pillar-card h3 {
        margin: 0 0 12px 0;
        color: var(--alissa-primary);
        font-size: 20px;
        font-weight: 700;
    }

    .alissa-v2026-neutral-pillar-card p {
        margin: 0;
        color: #666;
        font-size: 15px;
        line-height: 1.6;
    }

    @media (max-width: 768px) {
        .alissa-v2026-neutral-section { padding: 50px 15px; }
        .alissa-v2026-neutral-pillars-grid { grid-template-columns: 1fr; }
    }
    
 /* 1. دمج تنسيق منطقة الشعار (الرابط) لمنع التمدد في الجهتين */
#alissa-v2026-header-wrapper .alissa-v2026-brand,
#alissa-v2026-header-wrapper a.alissa-v2026-brand.img--is-clickable,
#alissa-v2026-header-wrapper-ltr .alissa-v2026-brand-ltr,
#alissa-v2026-header-wrapper-ltr a.alissa-v2026-brand-ltr.img--is-clickable {
    display: flex !important;
    align-items: center !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    flex: 0 0 220px !important; /* القفل النهائي للمساحة */
    height: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: hidden !important;
}

/* 2. دمج تنسيق صورة الشعار داخل الرابط */
#alissa-v2026-header-wrapper .alissa-v2026-logo-img,
#alissa-v2026-header-wrapper-ltr .alissa-v2026-logo-img-ltr {
    width: 100% !important;
    height: auto !important;
    max-height: 55px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}

/* 3. دمج تنسيق الحاوية الرئيسية */
.alissa-v2026-container,
.alissa-v2026-container-ltr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px;
}

/* 4. دمج تنسيق حاوية المنيو لضمان التوسيط ومنع مزاحمة الشعار */
.alissa-v2026-nav-wrapper,
.alissa-v2026-nav-wrapper-ltr {
    flex-grow: 1 !important;
    display: flex !important;
    justify-content: center !important;
}

/* 5. ضبط الهوامش بناءً على الاتجاه (اختياري لتناسق المسافات) */
#alissa-v2026-header-wrapper .alissa-v2026-brand {
    margin-left: 20px !important; /* مسافة للشعار في العربي */
}
#alissa-v2026-header-wrapper-ltr .alissa-v2026-brand-ltr {
    margin-right: 20px !important; /* مسافة للشعار في الإنجليزي */
}

/* --- 1. إصلاح الشعار (يعمل في كل الشاشات واللغتين) --- */
#alissa-v2026-header-wrapper .alissa-v2026-brand,
#alissa-v2026-header-wrapper a.alissa-v2026-brand.img--is-clickable,
#alissa-v2026-header-wrapper-ltr .alissa-v2026-brand-ltr,
#alissa-v2026-header-wrapper-ltr a.alissa-v2026-brand-ltr.img--is-clickable {
    display: flex !important;
    align-items: center !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    flex: 0 0 220px !important; 
    height: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow: hidden !important;
}

#alissa-v2026-header-wrapper .alissa-v2026-logo-img,
#alissa-v2026-header-wrapper-ltr .alissa-v2026-logo-img-ltr {
    width: 100% !important;
    height: auto !important;
    max-height: 55px !important;
    object-fit: contain !important;
    display: block !important;
}

/* --- 2. تنسيق الحاوية --- */
.alissa-v2026-container,
.alissa-v2026-container-ltr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 15px;
}

/* --- 3. تنسيق المنيو للشاشات الكبيرة فقط (أكبر من 992px) --- */
/* هذا القسم كان يسبب المشكلة في الجوال، الآن حصرناه في الديسكتاب فقط */
@media (min-width: 992.1px) {
    .alissa-v2026-nav-wrapper,
    .alissa-v2026-nav-wrapper-ltr {
        flex-grow: 1 !important;
        display: flex !important;
        justify-content: center !important;
    }
}

/* --- 4. تأكيد إخفاء المنيو في الجوال عند التحميل --- */
@media (max-width: 992px) {
    #alissa-v2026-header-wrapper .alissa-v2026-nav-wrapper,
    #alissa-v2026-header-wrapper-ltr .alissa-v2026-nav-wrapper-ltr {
        display: none !important; /* مخفي افتراضياً في الجوال */
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: #141438 !important;
    }

    /* إظهار المنيو فقط عند النقر على الزر (Checkbox Checked) */
    #alissa-v2026-header-wrapper #alissa-v2026-mobile-toggle:checked ~ .alissa-v2026-container .alissa-v2026-nav-wrapper,
    #alissa-v2026-header-wrapper-ltr #alissa-v2026-mobile-toggle-ltr:checked ~ .alissa-v2026-container-ltr .alissa-v2026-nav-wrapper-ltr {
        display: block !important;
    }
    
    /* تصغير مساحة الشعار قليلاً في الجوال ليعطي مساحة للأيقونات */
    #alissa-v2026-header-wrapper .alissa-v2026-brand,
    #alissa-v2026-header-wrapper-ltr .alissa-v2026-brand-ltr {
        width: 160px !important;
        min-width: 160px !important;
        flex: 0 0 160px !important;
    }
}

/* إزالة المسافة من منطقة الترحيب */
#welcome-text.solo-outer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* إزالة المسافة السفلية من القائمة */
#primary-menu.solo-outer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* التأكد من تصفير المسافات الداخلية في العناصر الفرعية */
#welcome-text-inner {
    padding-top: 0 !important;
}

/* إزالة الهوامش والعرض المحدد من الحاوية الداخلية */
#welcome-text-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* هذا السطر يلغي تحديد العرض الذي يضعه القالب */
    width: 100% !important;
}

/* إزالة أي مسافات من الحاوية الكبرى المحيطة بها */
#welcome-text {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    
}


.alissa-app-video-btn-top

 {
    padding: 0 4rem !important;
}

/* 1. التنسيق العام والمسافات (Padding) */
#views-bootstrap-front-page-news-block-1,
#views-bootstrap-front-page-videos-block-1 {
    padding: 0 4rem !important;
}

/* --- التحكم في عدد البطاقات في الصف الواحد --- */

/* شاشات الكمبيوتر (Desktop): 4 بطاقات في الصف */
@media (min-width: 992px) {
    #views-bootstrap-front-page-news-block-1 .row > div,
    #views-bootstrap-front-page-videos-block-1 .row > div {
        flex: 0 0 25% !important; /* 100 / 4 = 25% */
        max-width: 25% !important;
    }
}

/* شاشات الجوال (Mobile): بطاقتين في الصف */
@media (max-width: 767px) {
    #views-bootstrap-front-page-news-block-1 .row > div,
    #views-bootstrap-front-page-videos-block-1 .row > div {
        flex: 0 0 50% !important; /* 100 / 2 = 50% */
        max-width: 50% !important;
    }
    
    /* ملاحظة هامة: في الجوال الـ 4rem ستجعل المحتوى ضيقاً جداً، يفضل تقليلها */
    #views-bootstrap-front-page-news-block-1,
    #views-bootstrap-front-page-videos-block-1 {
        padding: 0 1rem !important; 
    }
}

#block-molo-subtheme-views-block-related-items-block-2-2 .solo-block-title {
    text-align: center;
}

/* 1. اجعل الأعمدة حاويات مرنة لتسمح لما بداخلها بالتمدد */
#views-bootstrap-front-page-news-block-1 [class*="col-"] {
    display: flex;
    flex-direction: column;
}

/* 2. اجعل مغلفات دروبال الداخلية تأخذ الطول الكامل وتعمل كـ flex */
#views-bootstrap-front-page-news-block-1 .views-field,
#views-bootstrap-front-page-news-block-1 .field-content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

/* 3. اجعل البطاقة نفسها تأخذ الطول الكامل */
.alissa-app-news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}



#views-bootstrap-front-page-news-block-1 {
    margin-bottom: 10px !important;
}

/* 1. تأكد أن حاوية النص تعمل بنظام flex لتسمح بدفع العناصر */
.alissa-app-news-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* لجعل منطقة النص تتمدد وتدفع الزر للأسفل */
    
    /* هذا هو الجزء المسؤول عن حل مشكلتك */
    text-align: start;       /* يحاذي النص لليمين في العربي ولليسار في الإنجليزي تلقائياً */
    align-items: flex-start; /* يضمن محاذاة العناصر (مثل الزر والعنوان) لجهة البداية */
}


/* 2. دفع حاوية الزر إلى أسفل المساحة المتوفرة */
.alissa-app-btn-more {
    margin-top: auto; 
    display: block; /* لضمان عمل المارجن بشكل صحيح */
    padding-top: 15px; /* اختيارياً: لإضافة مسافة بسيطة فوق الزر */
}
/* 1️⃣ Make search form flexible */
.search-form {
  display: flex;
  flex-wrap: wrap;         /* allow wrapping on small screens */
  gap: 10px;
  align-items: center;
}

/* 2️⃣ Input field grows */
.search-form input[type="search"],
.search-form input[type="text"] {
  flex: 1 1 200px;        /* grows, min width 200px */
  min-width: 0;            /* prevents overflow */
}

/* 3️⃣ Button styling */
.search-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;     /* prevent text wrap */
  word-break: keep-all;    /* extra protection */
  flex-shrink: 0;          /* prevent shrinking */
  height: 48px;
  padding: 0 16px;
  min-width: 99px;
}

/* 4️⃣ Mobile: button below input */
@media (max-width: 576px) {
  .search-form {
    flex-direction: column;  /* stack vertically */
    align-items: stretch;
  }

  .search-form__submit {
    width: 100%;             /* full width */
    text-align: center;
  }
}

.path-search form.search-form>.form-wrapper>.form-submit {
    position: relative;
    right: 0;
    bottom: -3px;
    margin: 0 !important;
    width: 100%;
    padding: 8px 16px;
}

.btn-custom-center {
    margin: 20px auto;        /* لتوسيط الزر في المنتصف */
    background-color: #ae9967; /* اللون الأساسي */
    color: #ffffff;           /* لون النص أبيض */
    transition: background-color 0.3s ease; /* حركة ناعمة عند تغيير اللون */
    cursor: pointer;
}

.btn-custom-center:hover {
    background-color: #76b5e5; /* اللون عند مرور الماوس */
    color: #ffffff;           /* التأكد من بقاء النص أبيض عند الهوفر */
}

/* لضمان أن النص داخل الـ span يظهر بالأبيض أيضاً */
.btn-custom-center .btn-text {
    color: #ffffff;
}
/* 1. التنسيقات العامة للبطاقة (لا تتغير) */
#views-bootstrap-front-page-videos-block-1 .w3-border, 
#views-bootstrap-front-page-videos-block-1 .w3-round,
#views-bootstrap-front-page-videos-block-1 .col-12 {
    border: none !important; 
    background: #ffffff !important;
    border-radius: 15px !important; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; 
    transition: all 0.3s ease !important;
    overflow: hidden; 
    margin-bottom: 25px !important;
}

/* 2. تنسيق العنوان (أسود افتراضياً) */
#views-bootstrap-front-page-videos-block-1 .views-field-title a {
    color: #000000 !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 1.05rem;
    display: block;
    padding: 15px 10px !important; 
    line-height: 1.4;
    text-align: center;
    transition: color 0.3s ease !important;
}

/* 3. الهوفر (سماوي ورفع البطاقة) */
#views-bootstrap-front-page-videos-block-1 .col-12:hover {
    transform: translateY(-5px); 
}
#views-bootstrap-front-page-videos-block-1 .col-12:hover .views-field-title a {
    color: #76b5e5 !important;
}

/* ------------------------------------------------ */
/* 4. إعدادات الشاشات الكبيرة (الكمبيوتر) */
@media (min-width: 768px) {
    #views-bootstrap-front-page-videos-block-1 .col-12 {
        width: calc(33.333% - 20px) !important;
        margin-right: 10px;
        margin-left: 10px;
        float: right;
    }
}

/* 5. إعدادات الجوال (الطلبات الجديدة هنا) */
/* 5. إعدادات الجوال (التعديل هنا لضمان وجود المسافة 1rem) */
@media (max-width: 767px) {
    /* استهداف الحاوية للتأكد أنها لا تخرج عن حدود الشاشة */
    #views-bootstrap-front-page-videos-block-1 {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #views-bootstrap-front-page-videos-block-1 .col-12 {
        /* بدلاً من البادينج للقسم، نضع مارجن للبطاقة نفسها */
        width: calc(100% - 2rem) !important; /* العرض الكامل ناقص المسافة المطلوبة (1rem يمين و 1rem يسار) */
        margin-left: auto !important;
        margin-right: auto !important;
        
        /* حل مشكلة التصاق الفيديو بالأعلى */
        padding: 15px !important; 
        display: block !important;
        float: none !important;
    }
    
    /* التأكد من أن الفيديو والصورة تأخذ العرض المتاح داخل البطاقة */
    #views-bootstrap-front-page-videos-block-1 .col-12 img,
    #views-bootstrap-front-page-videos-block-1 .col-12 iframe,
    #views-bootstrap-front-page-videos-block-1 .col-12 .video-embed-field-responsive-video {
        width: 100% !important;
        border-radius: 10px !important;
    }
}
/* ------------------------------------------------ */

/* 6. تنسيق زر "عرض جميع الفيديوهات" */
.view-display-id-block_1 .more-link a {
    background-color: var(--alissa-accent) !important;
    border-radius: 25px !important;
    padding: 8px 25px !important;
    box-shadow: 0 4px 10px rgba(174, 153, 103, 0.3) !important;
    border: none !important;
    color: #fff !important;
}

/* 1. التنسيق الأساسي لبطاقة الفيديو (الخلفية، الظل، الزوايا) */
#views-bootstrap-video-listing-display-block-1 .mb-3 {
    border: none !important; 
    background: #ffffff !important;
    border-radius: 15px !important; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; 
    transition: all 0.3s ease !important;
    overflow: hidden; 
    margin-bottom: 25px !important;
    padding: 0 !important; /* لضمان ملء الفيديو للبطاقة */
}

/* 2. تنسيق العنوان (أسود افتراضياً) */
#views-bootstrap-video-listing-display-block-1 .views-field-title a {
    color: #000000 !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 1.05rem;
    display: block;
    padding: 15px 10px !important; 
    line-height: 1.4;
    text-align: center;
    transition: color 0.3s ease !important;
}

/* 3. تأثير الهوفر (رفع البطاقة وتغيير لون النص) */
#views-bootstrap-video-listing-display-block-1 .mb-3:hover {
    transform: translateY(-5px); 
}

#views-bootstrap-video-listing-display-block-1 .mb-3:hover .views-field-title a {
    color: #76b5e5 !important;
}

/* 4. تنسيق عناصر الفيديو والصور لملء البطاقة */
#views-bootstrap-video-listing-display-block-1 .views-field-field-embed-video iframe,
#views-bootstrap-video-listing-display-block-1 .views-field-field-embed-video img,
#views-bootstrap-video-listing-display-block-1 .video-embed-field-responsive-video {
    width: 100% !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom: none !important;
}
/* --- إعدادات الشاشات المتوسطة والكبيرة (التابلت والكمبيوتر) --- */

/* شاشات التابلت (عرضين في السطر) */
@media (min-width: 768px) and (max-width: 991px) {
    #views-bootstrap-video-listing-display-block-1 .mb-3 {
        width: calc(50% - 20px) !important; /* نص العرض ناقص الهوامش */
        margin-left: 10px !important;
        margin-right: 10px !important;
        float: right !important;
    }
}

/* شاشات الكمبيوتر (3 عروض في السطر) */
@media (min-width: 992px) {
    #views-bootstrap-video-listing-display-block-1 .mb-3 {
        /* تقليل العرض من 33.33% إلى قيمة تسمح بوجود مسافات */
        width: calc(33.333% - 20px) !important; 
        
        /* إضافة مسافة 10px من اليمين و 10px من اليسار */
        margin-left: 10px !important;
        margin-right: 10px !important;
        
        /* التأكد من محاذاة البطاقات لليمين لأن الموقع عربي */
        float: right !important;
        display: inline-block !important;
        vertical-align: top;
    }

    /* لإلغاء أي تداخل ناتج عن الـ Row الأصلي */
    #views-bootstrap-video-listing-display-block-1 .grid.views-view-grid.row {
        display: block !important; 
        overflow: hidden;
    }
}

/* --- إعدادات الجوال (كما هي مع تحسين بسيط) --- */
@media (max-width: 767px) {
    #views-bootstrap-video-listing-display-block-1 .mb-3 {
        width: calc(100% - 30px) !important; /* مسافة واضحة من الجانبين في الجوال */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 20px !important;
        float: none !important;
        display: block !important;
    }
}

/* 1. الحاوية الأساسية للبطاقة */
#views-bootstrap-all-infograph-block-1 .mb-3 {
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden; /* لقص الصورة عند الزوايا */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; /* ظل خفيف جداً */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border: 1px solid #eee !important; /* إطار خفيف جداً */
    margin-bottom: 30px !important;
}

/* 2. تأثير الهوفر (الارتفاع وزيادة الظل) */
#views-bootstrap-all-infograph-block-1 .mb-3:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
    border-color: #76b5e5 !important; /* تغيير لون الإطار عند الهوفر */
}

/* 3. تنسيق صورة الانفوجرافيك */
#views-bootstrap-all-infograph-block-1 .views-field-field-image img,
#views-bootstrap-all-infograph-block-1 .views-field-field-infograph-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
    transition: transform 0.5s ease;
    margin-top:5px;
}

/* زووم بسيط للصورة عند الهوفر */
#views-bootstrap-all-infograph-block-1 .mb-3:hover img {
    transform: scale(1.05);
}

/* 4. تنسيق العنوان تحت الصورة */
#views-bootstrap-all-infograph-block-1 .views-field-title {
    padding: 15px !important;
    background: #fff;
}

#views-bootstrap-all-infograph-block-1 .views-field-title a {
    color: #333 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* عرض سطرين فقط للعنوان */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    transition: color 0.3s ease;
}

#views-bootstrap-all-infograph-block-1 .mb-3:hover .views-field-title a {
    color: #76b5e5 !important;
}

/* ------------------------------------------------ */
/* 5. ضبط المسافات والتجاوب (Responsive Grid) */

/* الشاشات الكبيرة جداً (4 في السطر كما في الصورة) */
@media (min-width: 1200px) {
    #views-bootstrap-all-infograph-block-1 .mb-3 {
        width: calc(25% - 20px) !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        float: right !important;
    }
}

/* الشاشات المتوسطة (3 في السطر) */
@media (min-width: 992px) and (max-width: 1199px) {
    #views-bootstrap-all-infograph-block-1 .mb-3 {
        width: calc(33.333% - 20px) !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        float: right !important;
    }
}

/* التابلت (2 في السطر) */
@media (min-width: 768px) and (max-width: 991px) {
    #views-bootstrap-all-infograph-block-1 .mb-3 {
        width: calc(50% - 20px) !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        float: right !important;
    }
}

/* الجوال (1 في السطر مع ترك مسافة جانبية) */
@media (max-width: 767px) {
    #views-bootstrap-all-infograph-block-1 .mb-3 {
        width: calc(100% - 30px) !important;
        margin: 0 auto 25px auto !important;
        float: none !important;
        display: block !important;
    }
}

/* تنظيف الطفو (Clearfix) */
#views-bootstrap-all-infograph-block-1 .grid.views-view-grid.row {
    display: block !important;
    overflow: hidden;
}

/* 1. تنسيق العنوان الرئيسي (Title) */
.field--name-node-title h2 {
    /* تغيير اللون للأسود الصريح */
    color: #000000 !important;
    
    /* جعل الخط عريضاً ومناسباً لعناوين الأخبار */
    font-weight: 700 !important;
    
    /* ضبط حجم الخط ليكون بارزاً */
    font-size: 28px !important;
    
    /* تحسين تباعد الأسطر للنصوص العربية */
    line-height: 1.5 !important;
    
    /* إضافة مسافة أسفل العنوان لفصله عن المحتوى */
    margin-bottom: 20px !important;
    
    /* إزالة أي خط تحت النص في حال كان رابطاً */
    text-decoration: none !important;
}

/* 2. تنسيق نص الموضوع (Body Content) لزيادة الوضوح */
.node--type-article .field--name-body p, 
.node--type-article .field--name-body {
    /* لون رمادي غامق مريح للعين (أفضل من الأسود الحاد للنصوص الطويلة) */
    color: #333333 !important;
    
    /* حجم خط مريح للقراءة */
    font-size: 18px !important;
    
    /* تباعد أسطر واسع لمنع تداخل الكلمات */
    line-height: 1.8 !important;
    
    /* محاذاة النص */
    text-align: justify;
}

/* 3. تعديل الحجم في شاشات الجوال */
@media (max-width: 767px) {
    .field--name-node-title h2 {
        font-size: 18px !important; /* تصغير العنوان قليلاً في الجوال */
    }
    .node--type-article .field--name-body p {
        font-size: 16px !important;
    }
}

/* 1. تنسيق الحاوية الرئيسية وتوسيط العناوين */
.region-inner.region-left {
    text-align: center !important; /* لتوسيط العناوين وعدد النتائج */
}

/* 2. تنسيق عنوان "نتائج البحث" وعدد النتائج */
h2#page-title, 
.region-inner.region-left h2 {
    color: #000000 !important; /* العنوان باللون الأسود */
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 1.8rem;
}

.region-inner.region-left p {
    color: #141438; /* اللون الأساسي للنص الفرعي */
    font-size: 0.95rem;
    margin-bottom: 25px;
    opacity: 0.8;
}

/* 3. تنسيق محرك البحث (Form) وجعله عصرياً */
form.search-api-page-block-form-bhth {
    display: flex;
    flex-direction: column;
    align-items: center; /* توسيط أفقي */
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin-bottom: 60px;
}

/* 4.  حقل الإدخال (مكة) */
.form-item-keys {
    width: 100%;
    max-width: 600px; /* تحديد عرض مناسب للحقل */
    margin: 0 auto;
}

.form-item-keys input {
    width: 100% !important;
    border-radius: 50px !important; 
    border: 1px solid #ddd !important;
    padding: 16px 30px !important;
    text-align: center; /* توسيط النص داخل الحقل */
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.form-item-keys input:focus {
    border-color: #ae9967 !important; /* لون الأكسنت عند التركيز */
    box-shadow: 0 4px 20px rgba(174, 153, 103, 0.15);
    outline: none;
}

/* 5. تنسيق زر البحث وجعله في المنتصف */
#edit-actions {
    display: flex;
    justify-content: center; /* توسيط الزر */
    width: 100%;
}

#edit-submit {
    background-color: #ae9967 !important; /* اللون الذهبي المطفأ */
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 60px !important; /* عرض متناسب للزر وليس كامل الشاشة */
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: auto !important; /* منع الزر من التمدد كاملاً */
    min-width: 200px;
}

/* تأثير الهوفر بالسماوي للزر */
button#edit-submit:hover {
    background-color: #76b5e5 !important; /* اللون السماوي عند الهوفر */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(118, 181, 229, 0.4);
}

/* 5. تنسيق نتائج البحث الفردية */
article.search-result-item {
    text-align: right; /* بقاء محتوى النتائج لليمين لسهولة القراءة */
    border-bottom: 1px solid #f0f0f0;
    padding: 20px 0;
    transition: background 0.3s;
}

article.search-result-item h2 a {
    color: #000 !important; /* لون النص الأساسي للعنوان */
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

/* الهوفر بالسماوي لعنوان النتيجة */
article.search-result-item h2 a:hover {
    color: #76b5e5 !important; /* السماوي */
}

.search-date {
    color: #ae9967 !important; /* تاريخ النتيجة باللون الذهبي */
    font-size: 0.85rem;
}

@media screen and (min-width: 1024px) and (hover: hover) {
    
    /* تغيير شكل المؤشر لكل الموقع (دائرة مصمتة) */
    html, body {
        /* رقم 10 10 في نهاية الرابط لضمان أن يكون مركز الدائرة هو نقطة الضغط */
        cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="%2376b5e5"/></svg>') 10 10, auto;
    }

   
}
/* 1. الحاوية الرئيسية (زر اللغة + الهامبرغر) - لضمان ظهورهما بجانب بعضهما */
.alissa-v2026-header-actions {
    display: flex !important;
    flex-direction: row !important; /* إجبار العناصر على البقاء بجانب بعضها */
    align-items: center !important;  /* توسيط العناصر عمودياً */
    gap: 15px !important;           /* المسافة بين زر اللغة والهامبرغر */
    justify-content: flex-end !important;
}

/* 2. القواعد العامة والتنظيف */
.alissa-v2026-lang-container,
.alissa-v2026-lang-container * {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 3. إخفاء أيقونة الهامبرغر في الشاشات الكبيرة (Desktop) وإظهارها في الجوال */
.alissa-v2026-menu-icon, 
.alissa-v2026-menu-icon-ltr {
    display: none !important; /* مخفية في الشاشات الكبيرة */
    cursor: pointer !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.alissa-v2026-menu-icon svg,
.alissa-v2026-menu-icon-ltr svg {
    width: 32px !important;
    height: 32px !important;
    stroke: #ffffff !important;
    stroke-width: 2.5;
    display: block !important;
}

/* 4. زر اللغة الذهبي */
.lang-toggle {
    background-color: #ae9967 !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* 5. القائمة المنسدلة - حل مشكلة اللون والشفافية */
.alissa-v2026-language-wrapper .language-list-fix {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    
    background-color: #141438 !important; /* خلفية صلبة */
    background: #141438 !important; 
    
    min-width: 150px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border-radius: 8px !important;
    border: 1px solid #ae9967 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7) !important;
    z-index: 999999 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
}

/* إظهار القائمة عند الهوفر */
.alissa-v2026-language-wrapper:hover .language-list-fix {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

.alissa-v2026-language-wrapper .language-list-fix li,
.alissa-v2026-language-wrapper .language-list-fix li a {
    background-color: #141438 !important;
    color: #ffffff !important;
    display: block !important;
    text-decoration: none !important;
    text-align: center !important;
    padding: 10px 20px !important;
}

.alissa-v2026-language-wrapper .language-list-fix li a:hover {
    color: #ae9967 !important;
}

/* 6. تعديلات الجوال (Mobile) */
@media (max-width: 991px) {
    /* إظهار الهامبرغر وجعله بجانب زر اللغة */
    .alissa-v2026-menu-icon, 
    .alissa-v2026-menu-icon-ltr {
        display: flex !important; /* إظهار في الجوال */
    }

    .alissa-v2026-header-actions {
        gap: 12px !important; /* تقليل المسافة قليلاً في الجوال */
    }

    /* لضمان عدم خروج القائمة المنسدلة عن الشاشة في الجوال */
    .language-list-fix {
        max-width: 90vw;
    }
}