/* ============================================================
   1. استيراد الخطوط (خاص برمضان)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@400;700&display=swap');

/* ============================================================
   2. الأساسيات العامة (العناوين - الباجينشن - عرض الموبايل)
   ============================================================ */

/* 🔥 تكبير وتوضيح خط العناوين في البوسترات للكمبيوتر والموبايل */
.BlocksHolder .Block--Info h3, .BlocksHolder .Small--Box .title,.BlocksHolder .Block--Info h3 a,.BlocksHolder .Small--Box .title a,.Block--Item h3,.Block--Item h3 a {
    font-size: 14px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
}

/* إصلاح الأرقام: السماح لها بالنزول لسطر جديد بدلاً من الخروج من الشاشة */
.pagination ul, .page-numbers {
    display: flex;
    flex-wrap: wrap; /* هذا هو السر */
    justify-content: center;
    gap: 5px;
}
/* إخفاء أي زر "عرض المزيد" دخيل */
.load-more-btn, .show-more { display: none !important; }

/* --- إصلاح الموبايل: عرض 2 بجانب بعض (بوسترات الحلقات/المواسم) --- */
@media (max-width: 768px) {
    .BlocksHolder {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 -5px !important;
        float: none !important; /* إلغاء الـ float القديم */
    }

    .Small--Box, .Block--Item {
        width: 50% !important; /* النصف بالظبط */
        padding: 5px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    /* إصلاح أسماء الحلقات لو كانت طويلة */
    .Block--Info h3 {
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* ============================================================
   🎯 شريط رمضان + الزينة + السنوات (شفاف بالكامل)
   ============================================================ */

/* ------------------------------------------------------------
   1. الحاوية الأساسية (شفافة تماماً)
   ------------------------------------------------------------ */
.ramadan-grand-box {
    background: transparent !important;  /* ← إزالة الخلفية السوداء */
    border-bottom: none !important;      /* ← إزالة الحدود السوداء */
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: none !important;         /* ← إزالة الظل */
    border-radius: 0;
}

/* ------------------------------------------------------------
   2. الزينة العلوية (متطابقة تماماً مع عرض الشريط)
   ------------------------------------------------------------ */
body .ramadan-grand-box .r-deco-top {
    position: absolute !important;
    
    /* 👇👇 السر هنا: استخدم أرقام بالسالب عشان تزقها لفوق الصندوق بقوة 👇👇 */
    top: 10px !important; /* حط رقم بالسالب، كل ما الرقم السالب يزيد (مثلاً -30px) هتترفع لفوق أكتر */
    /* 👆👆 -------------------------------------------------------- 👆👆 */
    
    /* السنترة والمقاس (نفس مقاس الشريط بالظبط) */
    width: 100% !important;
    max-width: 820px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important; 
    
    height: 100px !important;
    background-image: url('https://video.showmoviz.com/wp-content/uploads/2026/02/—Pngtree—ramadan-kareem-decoration-with-golden_9029507-1.png');
    background-size: 33.33% 100% !important; 
    background-repeat: repeat-x !important;
    
    z-index: 20 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5)) !important;
}

/* 📱 تظبيط الزينة العلوية في الموبايل 📱 */
@media (max-width: 768px) {
    body .ramadan-grand-box .r-deco-top {
        /* تحكم الموبايل بالسالب برضه عشان ترفعها */
        top: 15px !important; 
        max-width: 95% !important; 
        height: 40px !important;
        background-size: 50% 100% !important; 
        filter: none !important;
    }
}

/* ------------------------------------------------------------
   3. الهيدر والعنوان (توهج نيون ذهبي قوي جداً)
   ------------------------------------------------------------ */
.r-header {
    text-align: center;
    padding-bottom: 45px !important;
    position: relative !important;
    z-index: 2 !important;
    
    /* لوحة تحكم الهيدر بالكامل (الجملة + الهلال) */
    top: 65px !important; 
}

.r-header h2 {
    color: #fff4d4;
    font-size: 28px;
    margin: 0 0 25px;  /* ← زودناها من 10 إلى 25px عشان نفصلهم */
    font-family: 'Tahoma', sans-serif;

    /* 👇👇 توهج ذهبي خالص (بدون أي أحمر أو برتقالي غامق) 👇👇 */
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.9),   /* ذهبي صريح وقوي */
        0 0 20px rgba(255, 220, 50, 0.7),  /* أصفر نيون */
        0 0 35px rgba(218, 165, 32, 0.6),  /* ذهبي غامق شوية لإعطاء عمق */
        0 0 50px rgba(255, 215, 0, 0.4) !important; /* هالة ذهبية واسعة */
}

.r-magic-subtitle {
    font-family: 'Reem Kufi', sans-serif;
    font-size: 22px !important; 
    font-weight: 700;
    letter-spacing: 1px;
    
    /* 🚀 ده السطر اللي هيطلعها لفوق سيكا 🚀 */
    margin-top: -10px !important; 
    
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: relative;
    animation: shine 4s linear infinite;
    
    filter: drop-shadow(0 0 8px rgba(255, 200, 90, 0.5));
}

.r-magic-subtitle::before,
.r-magic-subtitle::after {
    content: "✦";
    color: #d4af37;
    font-size: 12px;
    position: absolute;
    top: 20%;
    transform: translateY(-50%);
    -webkit-text-fill-color: #d4af37;
    
    /* 👇👇 توهج للنجوم اللي جنب الكلمة 👇👇 */
    text-shadow: 0 0 10px #ffc107, 0 0 20px #ff9800 !important;
}

.r-magic-subtitle::before { right: -25px; }
.r-magic-subtitle::after { left: -25px; }

@keyframes shine {
    to { background-position: 200% center; }
}

/* ------------------------------------------------------------
   4. هلال رمضان (متحرك + توهج قوي جداً)
   ------------------------------------------------------------ */
.ramadan-moon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 10px;
    transform: translateY(4px) !important; 
}

.ramadan-moon svg {
    display: block;
    /* غيرنا اسم الأنيميشن عشان نطبق التوهج الجديد */
    animation: rmFloatStrong 2.6s ease-in-out infinite;
}

.ramadan-moon .rm-star {
    transform-origin: 50px 22px;
    /* أنيميشن جديد للنجمة الداخلية */
    animation: rmTwinkleStrong 1.8s ease-in-out infinite;
}

/* 👇👇 أنيميشن التوهج القوي للهلال 👇👇 */
@keyframes rmFloatStrong {
    0%, 100% { 
        transform: translateY(0); 
        filter: drop-shadow(0 0 6px rgba(255, 200, 90, 0.5)); 
    }
    50% { 
        transform: translateY(-3px); 
        /* توهج متراكم يدي إحساس النار/النيون */
        filter: 
            drop-shadow(0 0 15px rgba(255, 200, 90, 0.95))
            drop-shadow(0 0 30px rgba(255, 140, 0, 0.75)); 
    }
}

/* 👇👇 أنيميشن توهج النجمة اللي جوه الهلال 👇👇 */
@keyframes rmTwinkleStrong {
    0%, 100% { 
        opacity: .6; 
        transform: scale(.85) rotate(0deg); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.15) rotate(15deg); 
        filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #ffeb3b);
    }
}
/* 📱 تظبيط الموبايل (نفس الأحجام الكبيرة اللي اتفقنا عليها) 📱 */
@media (max-width: 768px) {
    
    /* 1️⃣ تحكم في الهيدر كله (الكلمتين مع بعض) */
    .r-header {
        top: 20px !important; /* بيحرك الكتلة كلها */
    }

    /* 2️⃣ تحكم في (الهلال + خيمة دراما رمضان) لوحدهم */
    .r-header h2 {
        position: relative !important;
        top: 30px !important; /* 👈 غير الرقم ده عشان تطلع/تنزل الكلمة الكبيرة والهلال */
        
        font-size: 32px !important; 
        margin-bottom: 12px !important;
    }

    /* 3️⃣ تحكم في (الجملة الطويلة) لوحدها */
    .r-magic-subtitle {
        position: relative !important;
        top: 45px !important; /* 👈 غير الرقم ده عشان تطلع/تنزل الجملة الطويلة وتبعدها أو تقربها من اللي فوقها */
        
        font-size: 19px !important; 
        line-height: 1.7 !important; 
        padding: 0 10px !important; 
        white-space: normal !important; 
    }

    .ramadan-moon svg {
        width: 45px !important; 
        height: 45px !important;
    }
    .ramadan-moon {
        transform: translateY(6px) !important;
    }
}

/* ------------------------------------------------------------
   5. شريط رمضان (نسخة تخفي الهزة وتخفف الحمل)
   ------------------------------------------------------------ */
.ramadan-ticker-block {
    position: relative !important; 
    width: 100% !important;
    max-width: 820px !important; 
    margin-top: 35px !important; 
    margin-bottom: 20px !important; 
    margin-left: auto !important; 
    margin-right: auto !important; 
    
    background: rgba(20, 20, 20, 0.4) !important; 
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 20px !important;
    box-shadow: none !important; 
    overflow: visible !important;
    contain: none !important;
    
    /* تسريع كارت الشاشة (ضروري للسلاسة) */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
    
    /* 🚀 شيلنا perspective عشان نخفف الحمل */
}

/* 🚀 الجوانب المظلمة (رجعت للـ 0.95 عشان تخفي الهزة زي الأول) 🚀 */
.ramadan-ticker-block::before,
.ramadan-ticker-block::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 80px !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

.ramadan-ticker-block::before {
    left: 0 !important;
    background: linear-gradient(to right, rgba(15,15,15,0.95) 0%, rgba(15,15,15,0) 100%) !important;
}

.ramadan-ticker-block::after {
    right: 0 !important;
    background: linear-gradient(to left, rgba(15,15,15,0.95) 0%, rgba(15,15,15,0) 100%) !important;
}

/* 🚀 الأنيميشن زي ماهو عشان الجافا شغالة */
.ramadan-ticker-block .top10-smart-track {
    animation: scrollSmart 45s linear infinite !important;
    will-change: transform !important;
}

/* 🚀 لزق المؤشر (السكرول) بشكل نظيف 🚀 */
.ramadan-ticker-block .top10-smart-ticker {
    padding-bottom: 25px !important;
}

/* 🔥 إضافة سحرية للصور عشان نقلل الاهتزاز من جذوره (بدون ما نغير التدرج) 🔥 */
.ramadan-ticker-block .top10-smart-poster img {
    image-rendering: -webkit-optimize-contrast !important; /* يحسن وضوح الصورة أثناء الحركة */
    transform: translateZ(0) !important; /* يمنع اهتزاز الصورة نفسها */
    backface-visibility: hidden !important;
}
/* ------------------------------------------------------------
   2. الزينة السفلية (تحكم مستقل لكل فرع يمين وشمال)
   ------------------------------------------------------------ */

/* الحاوية الأساسية للزينة (بقيت Relative عشان تنزل تحت الشريط طبيعي) */
.r-deco-bottom {
    position: relative !important; /* ← التغيير الأهم */
    width: 100% !important;
    height: 80px !important; 
    margin-top: -10px !important; /* اختياري: لو عاوز تقربها شوية للشريط */
    z-index: 10 !important;
    pointer-events: none;
    display: block !important; /* عشان تاخد سطر كامل */
    clear: both !important;    /* عشان تبقى تحت أي حاجة */
}


/* 🌿 التحكم في الفرع اليمين لوحده 🌿 */
.r-deco-bottom::before {
    content: "" !important;
    position: absolute !important;
    background-image: url('https://video.showmoviz.com/wp-content/uploads/2026/03/فرع_رمضان_ملون-1.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    
    /* 👇👇 لوحة تحكم الفرع اليمين 👇👇 */
    width: 370px !important;    /* عرض الفرع (كبر أو صغر براحتك) */
    height: 80px !important;    /* طول/تخانة الفرع */
    bottom: -15px !important;   /* حرك الفرع لفوق وتحت */
    right: 130px !important;     /* حرك الفرع يمين وشمال (استخدم right هنا) */
    /* 👆👆 ----------------------- 👆👆 */
}

/* 🌿 التحكم في الفرع الشمال لوحده 🌿 */
.r-deco-bottom::after {
    content: "" !important;
    position: absolute !important;
    background-image: url('https://video.showmoviz.com/wp-content/uploads/2026/03/فرع_رمضان_ملون-1.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    
    /* حركة إضافية: لو حابب تعكس الصورة (مراية) عشان تبقى متناسقة مع اليمين شيل الـ // من السطر اللي تحت */
    /* transform: scaleX(-1) !important; */

    /* 👇👇 لوحة تحكم الفرع الشمال 👇👇 */
    width: 370px !important;    /* عرض الفرع */
    height: 80px !important;    /* طول/تخانة الفرع */
    bottom: -15px !important;   /* حرك الفرع لفوق وتحت */
    left: 110px !important;      /* حرك الفرع يمين وشمال (استخدم left هنا) */
    /* 👆👆 ----------------------- 👆👆 */
}

/* 📱 تظبيط الفرعين في الموبايل (عشان ميطلعوش بره الشاشة) 📱 */
@media (max-width: 768px) {
    .r-deco-bottom::before {
        width: 120px !important;  /* تصغير العرض للموبايل */
        height: 50px !important;  /* تصغير الطول للموبايل */
        bottom: -15px !important; 
        right: 0px !important;
    }
    
    .r-deco-bottom::after {
        width: 120px !important;  
        height: 50px !important;  
        bottom: -15px !important; 
        left: 0px !important;
    }
}

/* ------------------------------------------------------------
   3. صورة "رمضان كريم" (النسخة المحسنة لتجنب الخطوط)
   ------------------------------------------------------------ */
.ramadan-center-text {
    position: absolute !important;
    width: 210px !important;
    bottom: -90px !important; /* ← غيرنا من -110 إلى -60 عشان تبقى تحت الزينة مباشرة */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 15 !important;
    pointer-events: none;
    
    /* تفعيل الأنيميشن الجديد */
    animation: rCenterGlowImgFix 3s infinite alternate ease-in-out;
    
    /* تحسين أداء المتصفح للأنيميشن */
    will-change: filter, transform;
    
    /* ضمان عدم وجود خلفية أو حدود على عنصر الصورة نفسه */
    background: transparent !important;
    border: none !important;
}
.ramadan-center-text img { 
    width: 100%; 
    height: auto; 
    display: block; 
    
    /* إزالة أي حدود قد تكون موروثة من القالب */
    box-shadow: none !important;
    border: none !important;
}

/* ------------------------------------------------------------
   4. أنيميشن التوهج الجديد (المعالج لتجنب الحواف)
   ------------------------------------------------------------ */
@keyframes rCenterGlowImgFix {
    0% {
        opacity: .7;
        filter: drop-shadow(0 0 4px rgba(255,200,90,0.6)); /* بداية خفيفة جداً */
        transform: translateX(-50%) scale(1); /* الحجم الطبيعي */
    }
    100% {
        opacity: 1;
        /* توزيع الظل بنعومة أكبر وبلور أعلى لمنع الخطوط الحادة */
        filter: 
            drop-shadow(0 0 18px rgba(255,200,90,.95))
            drop-shadow(0 0 30px rgba(255,140,0,.65))
            drop-shadow(0 0 50px rgba(255,100,0,.35));
        
        /* تكبير طفيف جداً ومتناسق */
        transform: translateX(-50%) scale(1.02); 
    }
}

/* ------------------------------------------------------------
   5. تظبيط الموبايل (نفس لوحة التحكم بس للشاشات الصغيرة)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .ramadan-ticker-block { 
        max-width: 95% !important;
        /* padding-bottom: 50px !important;  ← تم حذفه */
    }
    
    .r-deco-bottom { 
        height: 50px !important;
        background-size: 40% 100%, 40% 100%; 
        bottom: 0px !important; 
        left: 0px !important;
    }
    
    .ramadan-center-text { 
        width: 140px !important; /* تصغير الكلمة للموبايل */
        bottom: -65px !important; 
        left: 50% !important;
    }
}

/* 🚀 فك الخنقة عن الصندوق الرئيسي عشان التوهج ميتقصش بخط مستطيل 🚀 */
    .ramadan-grand-box {
        overflow: visible !important; 
    }
    
    /* 🚀 كسر الحدود الوهمية للصورة وتنعيم التوهج (Hardware Acceleration) 🚀 */
    .ramadan-center-text img {
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        border: 1px solid transparent !important;
        outline: 1px solid transparent !important;
    }

    html, body { overflow-x: hidden !important; }
    
    .top10-mask-wrapper { overflow-x: hidden !important; }
    .top10-smart-ticker { 
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }


/* ------------------------------------------------------------
   10. مثلث التشغيل
   ------------------------------------------------------------ */
.ramadan-ticker-block .triangle-icon {
    background-color: #e50914 !important;
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.5) !important;
}

/* ------------------------------------------------------------
   11. إخفاء بادجات الأعلى مشاهدة
   ------------------------------------------------------------ */
.ramadan-ticker-block .archive-badge-category,
.ramadan-ticker-block .archive-badge-series-hover,
.ramadan-ticker-block .archive-badge-status,
.ramadan-ticker-block .archive-badge-season,
.ramadan-ticker-block .archive-badge-year,
.ramadan-ticker-block .archive-badge-parts,
.ramadan-ticker-block .ticker-badge-episode,
.ramadan-ticker-block .top10-rank {
    display: none !important;
}

/* ------------------------------------------------------------
   12. بادجات رمضان (تظهر عند الهوفر)
   ------------------------------------------------------------ */
.ramadan-ticker-block [class^="badge-ramadan-"] {
    position: absolute !important;
    padding: 4px 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    z-index: 100 !important;
    text-shadow:
        1px 1px 2px #000,
        -1px -1px 2px #000,
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 5px #000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
.ramadan-ticker-block .top10-smart-item:hover [class^="badge-ramadan-"] {
    opacity: 1 !important;
    visibility: visible !important;
}

.ramadan-ticker-block .badge-ramadan-cat {
    top: 0px !important;
    right: 5px !important;
    color: #ffd700 !important;
    font-weight: 800 !important;
    font-size: 14px !important;
}
.ramadan-ticker-block .badge-ramadan-season {
    top: 50px !important;
    left: 5px !important;
    color: #ff3e3e !important;
    font-weight: 800 !important;
    font-size: 14px !important;
}
.ramadan-ticker-block .badge-ramadan-genre {
    top: 100px !important;
    right: 5px !important;
    color: #00ff88 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.ramadan-ticker-block .badge-ramadan-rating {
    top: 100px !important;
    left: 5px !important;
    color: #ffeb3b !important;
    font-weight: 900 !important;
    font-size: 14px !important;
}
.ramadan-ticker-block .badge-ramadan-rating i {
    font-size: 12px !important;
}
.ramadan-ticker-block .badge-ramadan-episode {
    top: 70% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #ff66b2 !important;
    font-weight: 900 !important;
    font-size: 15px !important;
}
.ramadan-ticker-block .badge-ramadan-episode i {
    margin-left: 4px !important;
    font-size: 12px !important;
}

/* ------------------------------------------------------------
   13. شريط السنوات (شفاف)
   ------------------------------------------------------------ */
.r-years-wrapper {
    position: relative;
    display: block !important;
    padding: 15px 45px 20px;
    background: transparent !important;
    z-index: 1;
    margin: 0 !important;
    clear: both;
    width: 100%;
    box-sizing: border-box;
}

.r-years-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 5px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.r-years-scroll::-webkit-scrollbar {
    display: none;
}

/* 🚀 زراير السنوات (سايحة مع الموقع) 🚀 */
.r-year-chip {
    background: transparent !important; /* 👈 هنا السر: شلنا الخلفية السودا تماماً */
    color: #ccc;
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.15); /* إطار خفيف جداً عشان يحدد شكل الزرار للعين */
    text-decoration: none;
    flex-shrink: 0;
    font-weight: bold;
    font-size: 14px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 🌟 التأثير الذهبي عند الوقوف أو التفعيل (زي ما هو بالظبط) 🌟 */
.r-year-chip:hover,
.r-year-chip.active {
    background: linear-gradient(to bottom, #d4af37, #b48f1f) !important;
    color: #000 !important;
    border-color: #d4af37 !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5) !important;
}
.r-nav-arrow {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #d4af37;
    color: #000;
    border: none;
    cursor: pointer;
    z-index: 10;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    transition: 0.2s;
}
.r-nav-arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}
.r-prev { right: 5px; }
.r-next { left: 5px; }

/* ------------------------------------------------------------
   14. الموبايل
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .r-deco-top {
        top: 120px !important;
        height: 40px !important;
        background-size: 50% 150% !important;
        background-repeat: repeat-x !important;
        filter: none !important;
    }
    .ramadan-grand-box .r-deco-top {
        top: calc(120px + var(--r-deco-shift-mobile) - var(--r-deco-top-lift-mobile)) !important;
    }

    /* 👇 تظبيط الجوانب المظلمة للموبايل ومسح المسافات المشوهة 👇 */
    .ramadan-ticker-block::before,
    .ramadan-ticker-block::after {
        width: 40px !important;
        display: block !important;
    }

    .ramadan-ticker-block .top10-smart-ticker .ramadan-center-text {
        width: min(250px, 70vw) !important;
        bottom: 8px !important;
    }

    .ramadan-ticker-block [class^="badge-ramadan-"] {
        padding: 2px 2px !important;
        font-size: 11px !important;
    }

    .ramadan-ticker-block .badge-ramadan-episode {
                padding: 2px 2px !important;
        font-size: 11px !important;
        top: auto !important;
        bottom: 35px !important;
    }


 
   .ramadan-ticker-block .badge-ramadan-genre {
        padding: 2px 2px !important;
        font-size: 11px !important;
        top: 65px !important;
        right: 5px !important;
    }
    .ramadan-ticker-block .badge-ramadan-rating {
               padding: 2px 2px !important;
        font-size: 11px !important;
        top: 65px !important;
        left: 5px !important;
    }

   .ramadan-ticker-block .badge-ramadan-season {
             padding: 2px 2px !important;
        font-size: 11px !important;
        top: 40px !important;
        left: 5px !important;
    }
    
    .r-years-wrapper {
        padding: 10px 15px 15px !important;
    }
    .r-year-chip {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }
    .r-nav-arrow {
        width: 28px;
        height: 28px;
        font-size: 13px;
        top: 55%;
    }
}


/* ============================================================
   4. البيو (السيرة الذاتية / نبذة عن القسم)
   ============================================================ */
.bio-container-wrapper { width: 100%; display: block; clear: both; margin-bottom: 20px; }

.bio-card {
    background: transparent !important;
    padding: 10px 20px 10px 0 !important; 
    position: relative; 
    overflow: hidden;
    border: none !important; 
    box-shadow: none !important;
    box-sizing: border-box;
    border-right: 2px solid rgba(255, 255, 255, 0.05) !important; 
    transition: all 0.4s ease;
}

.bio-card:hover {
    border-right-color: rgba(255, 255, 255, 0.15) !important; 
}

.bio-header { margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 10px; }
.bio-header h3 { color: #fff; font-size: 18px; font-weight: bold; margin: 0; display: flex; align-items: center; gap: 10px; }
.bio-header h3 i { color: #e50914; }

/* ============================================================
   النص الأساسي (خافت في العادي)
   ============================================================ */
.bio-content {
    color: #ccc; 
    font-size: 15px; 
    line-height: 1.8; 
    position: relative;
    text-align: justify;
    transition: all 0.4s ease; /* نعومة في تغير اللون */
}

/* 🔥 السحر هنا: لما الماوس يقف على زرار "اقرأ المزيد"، النص ينور أبيض 🔥 */
.bio-content:has(.bio-toggle-btn:hover) {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
}

/* ============================================================
   النص الكامل (أنيميشن الإضاءة عند الفتح)
   ============================================================ */
.bio-full-text { 
    display: none; 
    /* الأنيميشن ده هيشتغل لوحده بمجرد ما الجافاسكريبت يظهر النص */
    animation: textGlowReveal 1.2s ease-out forwards;
}

@keyframes textGlowReveal {
    0% {
        opacity: 0;
        color: #ccc;
        text-shadow: none;
        transform: translateY(5px);
    }
    40% {
        opacity: 1;
        color: #ffffff;
        /* 💡 إضاءة بيضاء قوية جداً في لحظة الفتح */
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.5);
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        color: #ffffff;
        /* 💡 الإضاءة تهدى لتوهج ناعم عشان العين تعرف تقرأ الكلام */
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
    }
}

.bio-toggle-btn {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; 
    color: #ccc; font-weight: bold; cursor: pointer;
    font-size: 13px; transition: 0.3s; 
    background: rgba(255, 255, 255, 0.05); 
    padding: 5px 15px; border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.bio-toggle-btn i { color: #e50914; }
.bio-toggle-btn:hover { background: #e50914; color: #fff; border-color: #e50914; box-shadow: 0 0 15px rgba(229, 9, 20, 0.3); }
.bio-toggle-btn:hover i { color: #fff; }



/* ============================================================
   6. الفلتر المتقدم (advFilter)
   ============================================================ */
/* تنسيقات الفلتر المتقدم الأساسية والمقاسات (بدون قص للنص) */
@media (min-width: 992px) {
    .advFilter form ul { 
        display: flex !important; 
        flex-wrap: nowrap !important; 
        gap: 8px !important; 
        align-items: stretch !important; /* 👈 عشان لو مربع طول، الباقيين يطولوا معاه ويفضلوا متساويين */
        padding: 0 !important; 
        width: 100% !important; 
    }
    
    .advFilter .dropdown-button { 
        position: relative !important; 
        margin: 0 !important; 
        min-height: 45px !important; /* 👈 أقل طول 45 */
        height: auto !important; /* 👈 يسمح بالتمدد لو النص طويل */
        display: flex !important; 
        align-items: center !important; 
        float: none !important; 
    }
    
    /* ⚖️ توزيع المقاسات الذكي ⚖️ */
    .advFilter .dropdown-button:nth-child(1) { flex: 1.2 !important; min-width: 110px !important; } 
    .advFilter .dropdown-button:nth-child(2) { flex: 1.2 !important; min-width: 110px !important; } 
    .advFilter .dropdown-button:nth-child(3) { flex: 1.1 !important; min-width: 90px !important; } 
    .advFilter .dropdown-button:nth-child(4) { flex: 1.1 !important; min-width: 90px !important; } 
    .advFilter .dropdown-button:nth-child(5) { flex: 1.5 !important; min-width: 140px !important; } 
    .advFilter .dropdown-button:nth-child(6) { flex: 1.8 !important; min-width: 170px !important; } 
    
    /* 📝 السماح للنص بالنزول لسطر جديد وإلغاء النقط 📝 */
    .advFilter .dropdown-button span { 
        width: 100% !important; 
        display: block !important; 
        white-space: normal !important; /* 👈 إلغاء الإجبار على سطر واحد */
        overflow: visible !important; /* 👈 إظهار النص بالكامل */
        padding-right: 25px !important; /* مساحة لأيقونة اليمين */
        padding-left: 25px !important; /* مساحة لأيقونة الشمال */
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        text-align: right !important; 
        font-size: 13px !important; 
        line-height: 1.4 !important; /* 👈 مسافة مريحة بين السطور */
    }
    
    /* 🚀 أزرار البحث والمسح (أقصى الشمال) 🚀 */
    .advFilter .action-buttons { 
        margin-right: auto !important; 
        display: flex !important; 
        gap: 8px !important; 
        align-items: stretch !important; 
    }
    .advFilter .action-buttons button,
    .advFilter .action-buttons a.reset-btn { 
        display: flex !important; 
        justify-content: center !important; 
        align-items: center !important; 
        min-height: 45px !important; 
        font-size: 14px !important; 
        font-weight: bold !important; 
        border-radius: 4px !important; 
        border: none !important; 
        cursor: pointer !important; 
        transition: all 0.3s ease-in-out !important; 
        text-decoration: none !important; 
    }
    .advFilter .action-buttons button.search-btn { 
        background: #e50914 !important; 
        color: #fff !important; 
        width: 110px !important; 
    }
    .advFilter .action-buttons button.search-btn:hover { 
        background: #ff1f2a !important; 
        box-shadow: 0 0 15px rgba(229, 9, 20, 0.6) !important; 
        filter: brightness(1.2); 
    }
    .advFilter .action-buttons a.reset-btn { 
        background: rgba(255, 255, 255, 0.08) !important; 
        color: #ccc !important; 
        width: 80px !important; 
        border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    }
    .advFilter .action-buttons a.reset-btn:hover { 
        background: rgba(255, 255, 255, 0.15) !important; 
        color: #fff !important; 
    }
}

/* 🚀 زر البحث الشامل الجديد (ستايل راقي ومميز) 🚀 */
.advFilter .action-buttons a.global-search-btn {
    background: rgba(255, 255, 255, 0.05) !important; 
    color: #d1d1d1 !important; 
    padding: 0 12px !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
}
.advFilter .action-buttons a.global-search-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 📱 هندسة شريط الفلاتر على الموبايل (ظهور النص كاملاً) 📱 */
@media (max-width: 991px) {
    .advFilter form ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px !important; 
        padding: 0 10px !important;
        align-items: stretch !important; /* عشان المربعات اللي جنب بعض تطول مع بعض لو واحد فيهم كبر */
    }
    
    .advFilter .dropdown-button {
        width: 100% !important;
        margin: 0 !important;
        min-height: 45px !important; /* 👈 السر الأول: أقل طول 45 بيكسل */
        height: auto !important; /* 👈 السر التاني: يسمح بالتمدد لو الكلام نزل سطرين */
        background: rgba(255, 255, 255, 0.03) !important; 
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* 📝 السماح للنص بالنزول لسطر جديد براحته 📝 */
    .advFilter .dropdown-button span {
        width: 100% !important;
        display: block !important;
        white-space: normal !important; /* 👈 السماح بالنزول لسطر جديد */
        overflow: visible !important; /* إظهار النص بالكامل */
        padding-right: 30px !important; /* مسافة للأيقونة اليمين عشان الكلام ميركبش عليها */
        padding-left: 25px !important; /* مسافة لسهم النزول الشمال */
        padding-top: 8px !important; /* مسافة فوق */
        padding-bottom: 8px !important; /* مسافة تحت */
        font-size: 12px !important;
        line-height: 1.4 !important; /* مسافة مريحة بين السطرين لو الكلام اتكسر */
        text-align: right !important;
        position: relative !important;
    }
    
    /* تظبيط أماكن الأيقونات */
    .advFilter .dropdown-button span i.filter-icon {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }
    
    .advFilter .dropdown-button span i.arrow-icon {
        position: absolute !important;
        left: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    /* 🚀 أزرار البحث والمسح في الموبايل 🚀 */
    .advFilter .action-buttons {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin: 5px 0 0 0 !important;
        display: flex !important;
        gap: 8px !important;
    }
    .advFilter .action-buttons button.search-btn,
    .advFilter .action-buttons a.reset-btn {
        min-height: 45px !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        font-weight: bold !important;
        border: none !important;
        text-decoration: none !important;
    }
    .advFilter .action-buttons button.search-btn {
        background: #e50914 !important;
        color: #fff !important;
        flex: 1 !important; /* الزرار بياخد المساحة الأكبر */
    }
    .advFilter .action-buttons a.reset-btn {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ccc !important;
        flex: 0.35 !important; /* زرار المسح أصغر شوية */
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* زر البحث الشامل بعرض ثابت */
.advFilter .action-buttons a.global-search-btn {
    background: rgba(255, 255, 255, 0.05) !important; 
    color: #d1d1d1 !important; 
    flex: 0 0 100px !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 🌟 لمسات نتفليكس (اللون الأسود + الأيقونات) 🌟 */
/* 1. تظبيط الأيقونات جوه الزرار */
.advFilter .dropdown-button span i.arrow-icon { 
    position: absolute !important; 
    left: 8px !important; 
    top: 50% !important; 
    transform: translateY(-50%) !important; 
    color: #888; 
}

.advFilter .dropdown-button span i.filter-icon {
    color: #e50914 !important; /* أحمر نتفليكس */
    margin-left: 6px !important;
    font-size: 14px !important;
    position: static !important; /* إلغاء الـ absolute القديم */
    transform: none !important;
}

/* 2. القائمة المنسدلة (اللون الأسود الشفاف) */
.advFilter .ListDroped {
    background: rgba(15, 15, 15, 0.98) !important; /* أسود غامق */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.9) !important;
    padding: 8px 0 !important;
    z-index: 999 !important;
}

/* 3. عناصر القائمة (السنين، الجودة، الخ) */
.advFilter .ListDroped li {
    background: transparent !important;
    color: #d1d1d1 !important;
    font-size: 13px !important;
    padding: 10px 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
}

.advFilter .ListDroped li:last-child {
    border-bottom: none !important;
}

/* إخفاء علامة الصح في الحالة العادية (هتظهر بس للمختار) */
.advFilter .ListDroped li i.fa-check {
    opacity: 0; /* مخفية */
    transform: scale(0.5); /* مصغرة عشان تكبر بأنميشن */
    margin-left: 8px !important;
    font-size: 12px !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    width: 15px; /* عشان الكلمة ماتتحركش لما الصح تظهر */
}

/* 4. التأثير عند الوقوف بالماوس (Hover العادي) */
.advFilter .ListDroped li:hover {
    background: rgba(255, 255, 255, 0.05) !important; /* رمادي شفاف شيك */
    color: #fff !important;
    padding-right: 20px !important; /* الكلمة تتحرك لليمين سنة كدليل على الوقوف عليها */
}

/* 5. تمييز العنصر المختار (Active / Selected) بقوة */
.advFilter .ListDroped li.active {
    background: linear-gradient(135deg, #e50914, #900000) !important; /* أحمر ناري بارز جداً */
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important; /* تدوير حواف العنصر المختار */
    margin: 4px 6px !important; /* يبعد عن الحواف كأنه زرار منفصل */
    padding: 10px 15px !important;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4) !important; /* توهج أحمر خفيف حوله */
}

/* إظهار علامة الصح باللون الأبيض للمختار فقط */
.advFilter .ListDroped li.active i.fa-check {
    opacity: 1;
    transform: scale(1.1); /* تكبر بشياكة */
    color: #fff !important;
}

/* 🚫 قتل أي خطوط حمراء افتراضية من القالب بالعرض 🚫 */
/* إخفاء الخطوط الوهمية من الأزرار والقوائم */
.advFilter .dropdown-button::after,
.advFilter .dropdown-button::before,
.advFilter .ListDroped::after,
.advFilter .ListDroped::before,
.advFilter .ListDroped li::after,
.advFilter .ListDroped li::before {
    display: none !important;
    content: none !important;
}

/* التأكيد على إزالة أي بوردر أحمر سفلي من القالب */
.advFilter .dropdown-button {
    border-bottom: none !important;
}

/* إرجاع الفواصل بين الكلمات لخط رمادي شفاف جداً بدل الأحمر */
.advFilter .ListDroped li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; 
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
}

/* إخفاء الخط من آخر عنصر في القائمة للشياكة */
.advFilter .ListDroped li:last-child {
    border-bottom: none !important;
}

/* 🎚️ تجميل شريط التمرير (الاسكرول بار) للقائمة 🎚️ */
/* 1. الاسكرول بار الخاص بالقائمة المنسدلة (الطولي) */
.advFilter .ListDroped {
    max-height: 250px !important; /* تحديد طول القائمة عشان متفتحش لأخر الشاشة */
    overflow-y: auto !important;  /* تشغيل الاسكرول الطولي بس */
    overflow-x: hidden !important; /* منع أي سكرول بالعرض */
}

/* 2. تصميم شكل الاسكرول نفسه (تغيير الأحمر لرمادي شفاف) */
.advFilter .ListDroped::-webkit-scrollbar {
    width: 6px !important; /* ترفيع شريط التمرير عشان الشياكة */
    background: transparent !important;
}

.advFilter .ListDroped::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3) !important; /* مسار الاسكرول أسود شفاف */
    border-radius: 8px !important;
}

.advFilter .ListDroped::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important; /* لون المؤشر رمادي هادي بدل الأحمر */
    border-radius: 8px !important;
}

.advFilter .ListDroped::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4) !important; /* ينور أبيض شوية لما تمسكه بالماوس */
}

/* 3. إخفاء أي اسكرول أفقي (بالعرض) في حاوية الفلاتر الأساسية */
.advFilter form ul::-webkit-scrollbar {
    height: 0px !important; 
    display: none !important;
}


/* ============================================================
   7. صفحة الموسم / السلسلة (MainSingle - بوستر - أزرار - محتوى)
   ============================================================ */

/* ===== تصميم جديد للبوستر مع الإعلان ===== */
.MainSingle {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 30px;
    position: relative;
}

/* الجزء الأيسر مع البوستر والأزرار */
.left {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    height: fit-content;
}

/* حاوية البوستر */
.image {
    width: 100%;
    height: 450px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
    background: #1a1a1a;
    margin-bottom: 20px;
    transform-origin: center center;
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

/* زر مشاهدة الإعلان (مستقل) */
.poster-trailer-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.18);
    text-decoration: none;
    cursor: pointer;
    z-index: 30;
    transition: 0.25s;
}

.poster-trailer-btn i {
    color: #fff;
    font-size: 20px;
}

.poster-trailer-btn:hover {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* تلميح الإعلان يظهر فقط عند الوقوف على زر الإعلان نفسه */
.poster-trailer-btn .trailer-tooltip {
    position: absolute;
    bottom: -44px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff3b3b, #c70000);
    color: #fff;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
    pointer-events: none;
}

.poster-trailer-btn:hover .trailer-tooltip {
    opacity: 1;
    visibility: visible;
}

/* === تأثيرات مبهرة لأزرار المشاهدة والتحميل - أبطأ === */
.poster-actions {
    width: 100%;
    margin-top: 15px;
}

/* تصميم الأزرار الرئيسية */
.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: white;
    text-decoration: none;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border: none;
    cursor: pointer;
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.8s;
    z-index: -1;
}

.action-btn:hover::before {
    left: 100%;
}

.action-btn .icon {
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease;
}

.action-btn .text {
    flex: 1;
    text-align: center;
}

.action-btn .text span {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.action-btn .text small {
    display: block;
    font-size: 12px;
    opacity: 0.9;
    margin-top: 4px;
}

/* زر المشاهدة بتأثيرات مبهرة - أبطأ */
.action-btn.watch-btn {
    background: linear-gradient(135deg, #e50914 0%, #b2070f 100%);
}

.action-btn.watch-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 30px rgba(229, 9, 20, 0.6),
                0 0 40px rgba(229, 9, 20, 0.3);
    background: linear-gradient(135deg, #ff1c1c 0%, #e50914 100%);
    animation: watchPulse 2s infinite alternate;
}

.action-btn.watch-btn:hover .icon {
    transform: rotate(12deg) scale(1.1);
    animation: watchIconPulse 1s infinite alternate;
}

@keyframes watchPulse {
    0% {
        box-shadow: 0 10px 30px rgba(229, 9, 20, 0.6),
                    0 0 40px rgba(229, 9, 20, 0.3);
    }
    100% {
        box-shadow: 0 10px 35px rgba(229, 9, 20, 0.8),
                    0 0 50px rgba(229, 9, 20, 0.5);
    }
}

@keyframes watchIconPulse {
    0% {
        transform: rotate(12deg) scale(1.1);
    }
    100% {
        transform: rotate(15deg) scale(1.2);
    }
}

/* زر التحميل بتأثيرات مبهرة - أبطأ */
.action-btn.download-btn {
    background: linear-gradient(135deg, #1e90ff 0%, #0d6efd 100%);
}

.action-btn.download-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 30px rgba(30, 144, 255, 0.6),
                0 0 40px rgba(30, 144, 255, 0.3);
    background: linear-gradient(135deg, #2b9cff 0%, #1e90ff 100%);
    animation: downloadPulse 2s infinite alternate;
}

.action-btn.download-btn:hover .icon {
    transform: translateY(-2px) scale(1.1);
    animation: downloadIconBounce 1s infinite alternate;
}

@keyframes downloadPulse {
    0% {
        box-shadow: 0 10px 30px rgba(30, 144, 255, 0.6),
                    0 0 40px rgba(30, 144, 255, 0.3);
    }
    100% {
        box-shadow: 0 10px 35px rgba(30, 144, 255, 0.8),
                    0 0 50px rgba(30, 144, 255, 0.5);
    }
}

@keyframes downloadIconBounce {
    0% {
        transform: translateY(-2px) scale(1.1);
    }
    100% {
        transform: translateY(-4px) scale(1.2);
    }
}

/* حاوية الإعلان داخل البوستر */
.poster-ad-wrapper {
    width: 100%;
    margin: 15px 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

/* عناصر تحت الإعلان */
.poster-bottom-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

/* زر التريلر تحت البوستر */
.TrillerOpenBtn {
    margin-top: 15px;
    background: linear-gradient(135deg, #fd7e14 0%, #e8590c 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.3);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.TrillerOpenBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.8s;
}

.TrillerOpenBtn:hover::before {
    left: 100%;
}

.TrillerOpenBtn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(253, 126, 20, 0.5),
                0 0 30px rgba(253, 126, 20, 0.3);
    animation: trailerGlow 1.5s infinite alternate;
}

@keyframes trailerGlow {
    0% {
        box-shadow: 0 8px 25px rgba(253, 126, 20, 0.5),
                    0 0 30px rgba(253, 126, 20, 0.3);
    }
    100% {
        box-shadow: 0 8px 30px rgba(253, 126, 20, 0.7),
                    0 0 40px rgba(253, 126, 20, 0.5);
    }
}

/* زر تحميل الموسم كامل بتأثيرات مبهرة - أبطأ */
.download-full-season {
    background: linear-gradient(135deg, #eac13b 0%, #d4a90c 100%);
    color: #222;
    padding: 12px 20px;
    border-radius: 25px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    display: block;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(234, 193, 59, 0.3);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.download-full-season::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: 0.8s;
}

.download-full-season:hover::before {
    left: 100%;
}

.download-full-season:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(234, 193, 59, 0.5),
                0 0 30px rgba(234, 193, 59, 0.3);
    animation: seasonGlow 1.5s infinite alternate;
}

@keyframes seasonGlow {
    0% {
        box-shadow: 0 8px 25px rgba(234, 193, 59, 0.5),
                    0 0 30px rgba(234, 193, 59, 0.3);
    }
    100% {
        box-shadow: 0 8px 30px rgba(234, 193, 59, 0.7),
                    0 0 40px rgba(234, 193, 59, 0.5);
    }
}

/* === تأثيرات hover للبوستر - أبطأ === */
.image:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.image:hover img {
    transform: scale(1.05);
}

/* === تأثيرات hover لأيقونة IMDb - أبطأ === */
.imdbR {
    background: linear-gradient(135deg,#f5c518,#d4a90c) !important;
    color: #000 !important;
    padding: 3px 6px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    box-shadow: 0 2px 6px rgba(245,197,24,0.25) !important;
    border: 1px solid #ffd700 !important;
    width: auto !important;
    margin: 0 !important;
    position: absolute !important;
    top: 10px !important;
    left: 4px !important;
    z-index: 10 !important;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer;
}

.imdbR i {
    font-size: 10px !important;
    transition: transform 0.5s ease !important;
}

.imdbR span {
    font-size: 11px !important;
}

.imdbR em {
    font-size: 9px !important;
    margin-right: 2px !important;
}

.imdbR:hover {
    transform: translateY(-3px) scale(1.08) rotate(3deg) !important;
    box-shadow: 0 10px 25px rgba(245, 197, 24, 0.7) !important;
    background: linear-gradient(135deg, #ffd700, #f5c518) !important;
    animation: imdbGlow 1.2s ease-in-out infinite alternate !important;
    z-index: 20 !important;
}

.imdbR:hover i {
    transform: rotate(10deg) scale(1.1) !important;
    color: #ffffff !important;
}

@keyframes imdbGlow {
    0% {
        box-shadow: 0 0 10px rgba(245, 197, 24, 0.5),
                    0 0 20px rgba(245, 197, 24, 0.3),
                    0 0 30px rgba(245, 197, 24, 0.2);
    }
    100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.7),
                    0 0 25px rgba(255, 215, 0, 0.5),
                    0 0 35px rgba(255, 215, 0, 0.3);
    }
}

/* المحتوى الرئيسي */
.SecondPart {
    flex: 1;
    min-width: 0;
}

/* إخفاء أزرار المشاهدة والتحميل القديمة */
.BTNSDownWatch {
    display: none;
}

/* إخفاء قسم الإعلان الرئيسي في الأسفل */
.main-ad-section {
    display: none;
}

/* تنسيقات خاصة للإعلان لضبط حجمه */
.poster-ad-wrapper .unique-ad {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: block !important;
}

.poster-ad-wrapper iframe,
.poster-ad-wrapper img,
.poster-ad-wrapper ins {
    max-width: 100% !important;
    height: auto !important;
}

/* الحاوية الزجاجية كما طلبتها */
.SingleContentBox {
    background: rgba(255, 255, 255, 0.02) !important; 
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px);
    padding: 20px 17px !important; 
    border-radius: 12px; 
    margin-bottom: 35px;
    direction: rtl;
    border: none !important;
}

/* النص: الفقرة الأولى كبيرة وواضحة */
.desc-text {
    margin: 0; 
    color: #f2f2f2 !important; 
    font-size: 20px !important; /* تكبير الخط بناءً على طلبك */
    line-height: 1.9 !important; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    text-align: right;
    max-height: 10em; /* الجزء الظاهر في البداية */
    overflow: hidden;
    transition: max-height 0.8s ease-in-out;
}

/* حالة الفتح */
.desc-open {
    max-height: 5000px !important;
}

/* زر المزيد: أبيض يتحول لأحمر عند الضغط */
.show-more-btn {
    display: inline-flex;
    align-items: center;
    margin-top: 15px;
    color: #ffffff !important; /* اللون الأساسي أبيض */
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s;
}

/* أيقونة السهم */
.show-more-btn span {
    margin-right: 10px;
    width: 28px;
    height: 28px;
    border: 1px solid #ffffff; /* دائرة بيضاء */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

/* التغيير للأحمر عند إضافة كلاس النشط */
.show-more-btn.is-red {
    color: #e50914 !important;
}
.show-more-btn.is-red span {
    border-color: #e50914 !important;
}

/* ============================================================
   8. الممثلين (tmdb-actors) - التوزيع الذكي
   ============================================================ */
/* ============================================================
   🚀 النسخة النهائية والقاتلة لقسم الممثلين (نسخ صافي من السنجل)
   ============================================================ */


/* 1. تنظيف الحاوية بالكامل (إلغاء اللون الفاتح والحدود نهائياً) */
.tmdb-actors-section {
    background: transparent !important; 
    border: none !important;            
    backdrop-filter: none !important;   
    box-shadow: none !important;
    padding: 0 !important;              
    margin-top: 30px !important;
    margin-bottom: 20px !important;
}

/* 2. تظبيط عنوان "نجوم العمل" (الفونت واللون والمحاذاة) */
.tmdb-actors-section h3 {
    border: none !important; 
    padding: 0 !important;
    margin-bottom: 20px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #a0a0a0 !important;
    display: flex !important;
    align-items: center !important;
}
.tmdb-actors-section h3 i {
    color: #e50914 !important; /* اللون الأحمر الصح بتاع نتفليكس */
    margin-left: 8px !important;
    font-size: 18px !important;
}

/* 3. شبكة الممثلين (توزيع المسافات) */
.tmdb-actors-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important; 
    gap: 15px 60px !important; 
    padding-right: 45px !important; 
    width: 100% !important;
    direction: rtl !important;
}

/* 4. كارت الممثل */
.tmdb-actor-card {
    flex: 0 0 85px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: transform 0.3s ease !important;
}

/* 5. الأيقونة/الصورة (السر هنا: خلفية شفافة وإطار خفيف) */
.tmdb-actor-avatar {
    width: 65px !important; 
    height: 65px !important;
    border-radius: 50% !important; 
    overflow: hidden !important; 
    margin-bottom: 8px !important; 
    border: 2px solid rgba(255,255,255,0.1) !important; 
    background: transparent !important; /* ده اللي بيلغي اللون الفاتح المستفز */
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.tmdb-actor-avatar img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
}
.tmdb-actor-avatar i {
    font-size: 26px !important;
    color: #777 !important;
}

/* 6. اسم الممثل (الفونت المظبوط) */
.tmdb-actor-name {
    font-size: 14px !important;
    line-height: 1.5 !important;
    width: 100% !important;
    text-align: center !important;
    color: #fff !important;
    font-weight: bold !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    transition: color 0.3s ease !important;
}

/* 7. الدور (لو موجود) */
.tmdb-actor-role {
    display: none !important; /* ده السطر السحري اللي هيخفيه من كل الموقع القديم والجديد */
}

/* 8. تأثيرات الهوفر (تكبير وتوهج أحمر) */
.tmdb-actor-card:hover { 
    transform: translateY(-5px) !important; 
}
.tmdb-actor-card:hover .tmdb-actor-name { 
    color: #e50914 !important; 
}
.tmdb-actor-card:hover .tmdb-actor-avatar {
    border-color: #e50914 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 10px rgba(229, 9, 20, 0.4) !important;
}

/* 9. تحديد العدد في الكمبيوتر (4 فقط) */
.tmdb-actor-card:nth-child(n+5) {
    display: none !important;
}

/* 10. الموبايل (3 فقط في صف واحد) */
@media (max-width: 768px) {
    .tmdb-actors-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 10px 5px !important;
        justify-items: center !important;
        padding-right: 0 !important; 
    }
    .tmdb-actor-card {
        width: 100% !important;
        flex: none !important;
    }
    .tmdb-actor-card:nth-child(n+4) {
        display: none !important;
    }
    .tmdb-actor-name { font-size: 12px !important; }
}

/* ============================================================
   9. عناصر المحتوى الداخلي (القصة، التصنيفات، الوصف، العنوان، الحالة)
   ============================================================ */

/* --- تنسيق قصة العرض (تأثير سينمائي على النص فقط) --- */
/* تنظيف الحاوية تماماً */
.StoryArea {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
    
    /* إلغاء أي تأثيرات سابقة */
    border-right: none !important;
}

/* تنظيف العناصر الوهمية السابقة */
.StoryArea::before,
.StoryArea p::first-letter {
    display: none !important;
}

/* السحر كله هنا في النص */
.StoryArea p {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 2 !important; /* تباعد أسطر مريح */
    text-align: justify;
    
    /* التأثير: ظل أسود حاد يعطي تجسيم + ظل خفيف ناعم */
    text-shadow: 
        1px 1px 1px rgba(0, 0, 0, 1), /* ظل حاد للوضوح */
        0 0 15px rgba(255, 255, 255, 0.1); /* توهج بسيط جداً في الخلفية */

    /* لمسة شياكة: تباعد بسيط بين الحروف */
    letter-spacing: 0.3px;
    
    margin: 0 !important;
}

/* لمسة تفاعلية للقصة (إضاءة عند اللمس) */
.StoryArea {
    transition: all 0.3s ease; /* نعومة في الحركة */
}

/* لما الماوس ييجي على المنطقة */
.StoryArea:hover {
    /* الخط الأحمر ينور ويبقى لونه فاتح */
    border-right-color: #ff4d4d !important; 
    /* ظل أحمر ورا الخط (توهج) */
    box-shadow: 10px 0 20px -10px rgba(229, 9, 20, 0.5); 
}

/* الكلام نفسه ينور زيادة */
.StoryArea:hover p {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 1px 1px 1px #000 !important;
}

/* 1. الحاوية (خط جانبي شفاف وهادي) */
.StoryArea {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 25px !important;
    
    /* خط جانبي خفيف جداً (أبيض شفاف) يحدد الكلام بشياكة */
    border-right: 2px solid rgba(255, 255, 255, 0.1) !important; 
    padding-right: 15px !important; 
    padding-left: 0 !important;
}
/* 1. الأب: التحكم في المسافات المريحة من هنا (gap) */
.TaxContent ul.RightTaxContent {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* عمودين */
    /* 👈 السر هنا: خلينا المسافة بالطول 10 بيكسل بدل 2، فهيدي مسافة مريحة جداً بين السطور */
    gap: 10px 15px; 
}

/* 2. الابن: كود السنجل النظيف (بدون margin) */
.TaxContent ul.RightTaxContent li {
    background: transparent !important; 
    border: 1px solid transparent !important; /* إطار شفاف عشان الكلمة متتهزش في الهوفر */
    padding: 4px 15px !important; /* بادينج خفيف للم الكلمة */
    border-radius: 8px !important;
    
    display: flex;
    align-items: center; /* السنترة الأفقية التامة */
    gap: 8px; 
    
    width: 100%;
    line-height: 1.4; 
    white-space: normal; 
    
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* تأثير الهوفر */
.TaxContent ul.RightTaxContent li:hover {
    background: rgba(255, 255, 255, 0.04) !important; 
    border-color: rgba(255, 255, 255, 0.08) !important; 
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* الأيقونة */
.TaxContent ul.RightTaxContent li i {
    color: #e50914 !important;
    font-size: 16px;
    transform: none !important;
    flex-shrink: 0;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex; 
    align-items: center;
}

.TaxContent ul.RightTaxContent li:hover i {
    transform: rotate(360deg) scale(1.2) !important;
}

/* العنوان */
.TaxContent ul.RightTaxContent li span {
    color: #888 !important; 
    font-weight: 600 !important; 
    font-size: 15px !important; 
    white-space: nowrap;
    margin: 0;
    transition: color 0.3s ease;
    display: flex; 
    align-items: center;
}

.TaxContent ul.RightTaxContent li:hover span {
    color: #aaa !important; 
}

/* الروابط */
.TaxContent ul.RightTaxContent li a {
    color: #fff !important;
    font-weight: 700 !important; 
    text-decoration: none;
    font-size: 15px !important;
    display: inline-flex; 
    align-items: center;
    margin-left: 3px;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.1); 
    transition: color 0.3s ease;
}

.TaxContent ul.RightTaxContent li a::after {
    content: none !important;
}

.TaxContent ul.RightTaxContent li:hover a {
    color: #e50914 !important; 
    text-shadow: 0 0 8px rgba(229, 9, 20, 0.4); 
}

/* للموبايل */
@media (max-width: 600px) {
    .TaxContent ul.RightTaxContent {
        grid-template-columns: 1fr; 
        gap: 0px; 
    }
    .TaxContent ul.RightTaxContent li {
        padding: 4px 10px !important; 
    }
}

/* === تنسيق الوصف (ذكي، سينمائي، ومتجاوب) === */
.DescriptionBox {
    margin-bottom: 25px;
    border-bottom: none !important;
}

/* 1. تنسيق النص الأساسي (الوضع الافتراضي للديسك توب: خافت) */
.DescText {
    font-size: 18px !important;
    
    color: #a0a0a0 !important; 
    
    font-weight: 500 !important;
    text-align: justify;
    line-height: 1.6 !important;
    
    text-shadow: 1px 1px 2px #000 !important;
    
    border-right: 2px solid rgba(255, 255, 255, 0.05) !important; 
    padding-right: 15px !important; 
    padding-left: 0 !important;
    
    transition: all 0.5s ease;
}

/* 2. تحسينات الموبايل والشاشات التاتش (الحل الذكي) */
@media (hover: none) {
    .DescText {
        color: #e0e0e0 !important; 
        text-shadow: 0 0 6px rgba(255,255,255,0.2) !important;
        border-right-color: rgba(255,255,255,0.2) !important;
    }
}

/* 3. تأثير الـ Hover (للديسك توب فقط) */
@media (hover: hover) {
    .DescText:hover {
        color: #fff !important; 
        text-shadow: 1px 1px 2px #000, 0 0 6px rgba(255, 255, 255, 0.25) !important;
        border-right-color: rgba(255, 255, 255, 0.3) !important;
    }
}

/* تقليل المسافات */
.DescText p {
    margin-bottom: 8px !important; 
    margin-top: 0 !important;
}

/* 4. الزرار السينمائي (Glassmorphism Style) */
.BtnContainer {
    margin-top: 12px; 
    padding-right: 15px; 
}

.ShowMoreBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: bold;
    
    color: #ff434c; 
    text-decoration: none;
    
    background: rgba(255, 67, 76, 0.05); 
    border: 1px solid rgba(255, 67, 76, 0.2); 
    padding: 6px 14px;
    border-radius: 20px;
    
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    transition: all 0.3s ease;
}

.ShowMoreBtn:hover {
    background: rgba(255, 67, 76, 0.9);
    color: #fff;
    border-color: #ff434c;
    box-shadow: 0 0 15px rgba(255, 67, 76, 0.3);
}

/* 5. أنميشن الظهور العميق */
.fade-in {
    animation: fadeInDeep 0.8s ease-out forwards; 
}

@keyframes fadeInDeep {
    0% { 
        opacity: 0; 
        transform: translateY(10px); 
        color: #444; 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
        color: inherit; 
    }
}

/* الحالة العادية – هادي ومطفي */
.PostTitle,
.entry-title {
    color: #e0e0e0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.6px;

    text-shadow: 1px 1px 2px rgba(0,0,0,1);
    transition: all 0.45s ease;
}

/* عند الوقوف – يضوي بهدوء */
.PostTitle:hover,
.entry-title:hover {
    color: #ffffff;
    text-shadow:
        0 0 6px rgba(255,255,255,0.35),
        0 0 20px rgba(255,255,255,0.25),
        2px 2px 2px rgba(0,0,0,1);
}

@media (hover: none) {
    .PostTitle,
    .entry-title {
        color: #ffffff;
        text-shadow:
            0 0 10px rgba(255,255,255,0.3),
            1px 1px 2px rgba(0,0,0,1);
    }
}

/* تنسيق الحالة في الأرشيف والموسم - نص ملون ونظيف */
.movie-status-item a {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    display: inline-block;
    transition: 0.3s ease;
}

.status-now a { color: #2ecc71 !important; }      /* أخضر */
.status-soon a { color: #3498db !important; }     /* أزرق */
.status-completed a { color: #e74c3c !important; } /* أحمر */

.movie-status-item a:hover { filter: brightness(1.2); text-decoration: underline; }


/* ============================================================
   10. ستايل الزرار الجامد (super-btn) وأزرار التحميل الإضافية
   ============================================================ */
.super-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 20px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 17px;
    text-align: center;
    color: white !important;
    text-decoration: none !important;
    margin-bottom: 15px;
    background: linear-gradient(45deg, #ff0000, #ff4b1f, #ff9068, #ff0000);
    background-size: 300% 300%;
    animation: gradientBG 4s ease infinite;
    box-shadow: 0 5px 20px rgba(255, 75, 31, 0.4);
    border: 2px solid rgba(255,255,255,0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulseIcon {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.super-btn i {
    font-size: 22px;
    animation: pulseIcon 1.5s infinite ease-in-out;
    text-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.super-btn:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 30px rgba(255, 75, 31, 0.6);
}

/* زر التحميل بتصميم متناسق */
.download-btn-style {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 15px; border-radius: 12px; font-weight: bold; font-size: 15px;
    background: #222; color: #eac13b !important; border: 1px solid #eac13b;
    transition: 0.3s; margin-top: 10px; width: 100%; text-decoration: none !important;
}
.download-btn-style:hover {
    background: #eac13b; color: #000 !important; box-shadow: 0 0 15px rgba(234, 193, 59, 0.4);
}


/* ============================================================
   11. مكونات مساعدة (توست، مودال، شيبس، رايفيل، بحث الحلقات)
   ============================================================ */
:root{ --sp-toast-z:999999; }

.toast-container{
    position: fixed;
    inset-inline: 12px;
    bottom: 18px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index: var(--sp-toast-z);
    pointer-events:none;
}
.toast{
    pointer-events:auto;
    max-width: 520px;
    width: fit-content;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(20,20,20,.88);
    border: 1px solid rgba(255,255,255,.10);
    color:#fff;
    box-shadow: 0 12px 35px rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    transform: translateY(8px);
    opacity:0;
    transition: .25s;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
}
.toast.show{opacity:1; transform: translateY(0);}
.toast .dot{width:8px;height:8px;border-radius:50%; background:#22c55e;}
.toast.error .dot{background:#ef4444;}
.toast.warn .dot{background:#f59e0b;}

/* === تنسيق نافذة التريلر (معدل لملء الشاشة) === */
.trailer-modal {
    position: fixed;
    inset: 0;
    z-index: 999998;
    display: none;
}
.trailer-modal.is-open {
    display: block;
}
.trailer-modal .backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(5px);
}
.trailer-modal .panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(90%, 900px);
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}
.trailer-modal .frame {
    width: 100%;
    height: 100%;
    position: relative;
}
.trailer-modal iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}
.trailer-modal .close {
    position: absolute;
    top: -45px;
    right: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.5);
    background: rgba(0,0,0,.6);
    color: #fff;
    cursor: pointer;
    z-index: 10;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}
.trailer-modal .close:hover {
    background: #e50914;
    border-color: #e50914;
}

.chips a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    margin: 4px 6px 0 0;
    text-decoration:none !important;
    transition:.2s;
}
.chips a:hover{transform: translateY(-1px); background: rgba(255,255,255,.09);}

.reveal{
    opacity:0;
    transform: translateY(10px);
    transition: .55s ease;
}
.reveal.is-in{opacity:1; transform: translateY(0);}

.episodes-search{
    width:100%;
    margin: 8px 0 12px;
    position:sticky;
    top: 8px;
    z-index: 5;
}
.episodes-search input{
    width:100%;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color:#fff;
    outline:none;
}
.episodes-search input::placeholder{color: rgba(255,255,255,.6);}

.similar-tools{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    margin: 8px 0 14px;
}
.similar-tools input, .similar-tools select{
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color:#fff;
    outline:none;
}

/* للموبايل فقط: إلغاء تمطيط النص */
@media (max-width: 768px) {
    .StoryArea p, .DescText, .desc-text {
        text-align: right !important; /* محاذاة لليمين فقط بدون تمطيط */
        word-spacing: normal !important;
        letter-spacing: normal !important;
    }

    /* تأثيرات الموبايل للـ MainSingle */
    .MainSingle {
        flex-direction: column;
    }
    
    .left {
        width: 100%;
        position: static;
        margin-bottom: 30px;
    }
    
    .image {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .action-btn {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .poster-ad-wrapper {
        max-width: 300px;
        margin: 15px auto;
    }
    
    .poster-trailer-btn {
        opacity: 1;
        visibility: visible;
    }
    
    .poster-trailer-btn span {
        transform: scale(0.8);
        padding: 10px 18px;
        font-size: 14px;
    }

    body { overflow-x: hidden; }

    .image:hover {
        transform: translateY(-2px) scale(1.01);
    }
    .image:hover img {
        transform: scale(1.03);
    }
    .action-btn:hover {
        transform: translateY(-2px) scale(1.01);
        box-shadow: none !important;
        animation: none !important;
    }
    .imdbR:hover {
        transform: translateY(-2px) scale(1.05) rotate(2deg) !important;
    }

    .PostTitle {
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
        text-align: center;
    }
    .PostTitle a {
        font-size: 20px !important;
        display: block;
    }
}



/* ============================================================
   🌟 قسم المواسم (otherser) - النسخة النهائية المطابقة للسنجل
   ============================================================ */
/* ============================================================
   🌟 قالب موحد للبوسترات (مطابق للسنجل 100%)
   ============================================================ */

/* 1. قسم المواسم (otherser) - مطابق للسنجل */
.otherser {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 10px !important; 
}

.otherser .Blocks--List {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important; 
    gap: 20px !important; /* نفس الجاب في السنجل */
    padding: 0 !important; 
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    list-style: none !important;
}

.otherser .Block--Item {
    width: 100% !important;
    min-width: 0 !important; 
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

.otherser .Block--Item .Poster--Block {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important; /* المقاس السينمائي */
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.otherser .Block--Item .Poster--Block img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    position: absolute !important;
    top: 0; left: 0;
}

.otherser .Block--Item h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-top: 10px !important;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    transition: color 0.3s ease;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.otherser .Block--Item:hover h3 {
    color: #e50914 !important;
}

.otherser .Block--Item .Genres {
    display: none !important;
}

/* 2. قسم مسلسلات مشابهة (similar-grid) - مطابق للسنجل */
.similar-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
    padding: 0 !important;
}

.similar-grid-item {
    border-radius: 10px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.03) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.similar-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}

.similar-grid-poster {
    position: relative;
    aspect-ratio: 2/3;
    background: #1a1a2e;
    overflow: hidden;
}

.similar-grid-poster img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.similar-title-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 30px 12px 12px;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    text-align: center;
    height: auto !important;
}

.similar-title-grid {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
    margin: 0 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* ============================================================
   📱 التجاوب (Media Queries)
   ============================================================ */

@media (max-width: 1024px) {
    .otherser .Blocks--List, 
    .similar-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 15px !important;
    }
}

@media (max-width: 768px) {
    .otherser .Blocks--List, 
    .similar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
        gap: 10px !important; 
    }
    
    .otherser .Block--Item h3,
    .similar-title-grid {
        font-size: 14px !important; 
        margin-top: 8px !important;
    }
}

/* 2. قسم قد يعجبك أيضاً (similar-grid) */
.similar-grid-wrapper {
    width: 100%;
    overflow: hidden;
}

.similar-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 15px !important;
    padding: 0 !important;
}

.similar-grid-item {
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    min-width: 0 !important;
}

.similar-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}

.similar-grid-poster {
    position: relative;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    background: #1a1a2e;
    overflow: hidden;
}

.similar-grid-poster img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0; left: 0;
}

.similar-title-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 30px 12px 12px;
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    text-align: center;
}

.similar-title-grid {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.similar-grid-item:hover .similar-title-grid {
    color: #e50914 !important;
}

/* 3. البادجات النيون ومثلث التشغيل (للقسم المشابه) */
.similar-grid-item .hover-badge-main-season,
.similar-grid-item .hover-badge-main-rating,
.similar-grid-item .hover-badge-main-episode,
.similar-grid-item .play-button-custom {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.similar-grid-item .hover-badge-main-season {
    top: 5px; right: 5px;
    font-size: 15px; font-weight: bold;
    color: #CCFF00;
    transform: scale(0.8);
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 0 0 10px currentColor, 0 0 5px #000 !important;
}

.similar-grid-item .hover-badge-main-rating {
    top: 5px; left: 5px;
    font-size: 15px; font-weight: bold;
    color: #ffeb3b;
    transform: scale(0.8);
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 0 0 10px currentColor, 0 0 5px #000 !important;
}

.similar-grid-item .play-button-custom {
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex; flex-direction: column; align-items: center;
}

.similar-grid-item .triangle-icon {
    width: 44px; height: 44px;
    background-color: #e50914;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    transition: transform 0.6s ease;
    box-shadow: 0 0 30px rgba(229,9,20,0.4);
}

.similar-grid-item .hover-badge-main-episode {
    top: 70% !important; left: 50% !important;
    transform: translate3d(-50%, -50%, 0) !important;
    color: #00bfff !important;
    font-size: 15px; font-weight: 900; white-space: nowrap;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 0 0 10px currentColor, 0 0 5px #000 !important;
}

.similar-grid-item:hover .hover-badge-main-season,
.similar-grid-item:hover .hover-badge-main-rating,
.similar-grid-item:hover .hover-badge-main-episode,
.similar-grid-item:hover .play-button-custom {
    opacity: 1;
    transform: scale(1);
}

.similar-grid-item:hover .hover-badge-main-episode,
.similar-grid-item:hover .play-button-custom {
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
}

.similar-grid-item:hover .triangle-icon {
    transform: rotate(360deg);
}

/* ============================================================
   📱 التجاوب مع الشاشات (Tablet & Mobile)
   ============================================================ */

@media (max-width: 1024px) {
    .otherser .Blocks--List, 
    .similar-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

@media (max-width: 768px) {
    /* السر الجوهري لتقسيم الشاشة بدون أي هروب للشمال */
    .otherser .Blocks--List, 
    .similar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
        gap: 10px !important; 
    }
    
    .otherser .Block--Item h3,
    .similar-title-grid {
        font-size: 14px !important; 
        margin-top: 8px !important;
    }

    /* تصغير البادجات والمثلث في الموبايل */
    .similar-grid-item .hover-badge-main-season,
    .similar-grid-item .hover-badge-main-rating,
    .similar-grid-item .hover-badge-main-episode { 
        font-size: 12px !important; 
    }
    .similar-grid-item .triangle-icon { 
        width: 30px; height: 30px; 
    }

    /* تسريع الأداء وإيقاف الهوفر */
    .similar-grid-item:hover,
    .otherser .Block--Item:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* Hardware Acceleration للبادجات */
    .similar-grid-item .hover-badge-main-season,
    .similar-grid-item .hover-badge-main-rating,
    .similar-grid-item .play-button-custom,
    .similar-grid-item .hover-badge-main-episode {
        will-change: opacity, transform !important;
    }
}


/* حل لغز المسافة اليمين بدون ما نغير شكل الأرشيف */
.container {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    max-width: 100% !important; /* عشان ياخد العرض كامل */
}

/* لو فيه أي كلاس اسمه Rows بيعمل مسافة */
.Rows {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
/* ============================================================
   نظام البادجات النيونية للأرشيف (معزول تماماً)
   ============================================================ */

/* 1. القاعدة العامة */
.Small--Box .archive-badge-category,
.Small--Box .archive-badge-status,
.Small--Box .archive-badge-season,
.Small--Box .archive-badge-episode,
.Small--Box .archive-badge-genre,
.Small--Box .archive-badge-quality,
.Small--Box .archive-badge-rating,
.Small--Box .archive-badge-year,
.Small--Box .archive-badge-parts {
    position: absolute !important;
    padding: 4px 4px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    z-index: 100 !important;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 0 0 10px currentColor, 0 0 20px currentColor, 0 0 5px #000 !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* 2. المواضع والألوان */
.Small--Box .archive-badge-category {
    top: 0px !important;
    right: 0px !important;
    color: #FF4FD8 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.Small--Box .archive-badge-status {
    top: 35px !important;
    right: 5px !important;
    left: auto !important;
}
.Small--Box .archive-badge-status.status-now { color: #00ff41 !important; }
.Small--Box .archive-badge-status.status-soon { color: #B0E0E6 !important; }
.Small--Box .archive-badge-season {
    top: 35px !important;
    left: 5px !important;
    right: auto !important;
    color: #04D9FF !important;
}
.Small--Box .archive-badge-episode {
    top: 75% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #00FFD5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    font-size: 13px !important;
}
.Small--Box .archive-badge-genre {
    top: 80px !important;
    right: 5px !important;
    color: #FF6F00 !important;
}
.Small--Box .archive-badge-quality {
    top: 80px !important;
    left: 5px !important;
    color: #CCFF00 !important;
}
.Small--Box .archive-badge-rating {
    top: 130px !important;
    left: 5px !important;
    color: #ffeb3b !important;
}
.Small--Box .archive-badge-rating i {
    color: #ffeb3b !important;
    font-size: 12px !important;
}
.Small--Box .archive-badge-year {
    top: 130px !important;
    right: 5px !important;
    color: #ffffff !important;
}
.Small--Box .archive-badge-parts {
   top: 75% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #00FFD5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    font-size: 15px !important;
}

/* 3. الريبون (مخفي افتراضياً) */
.Small--Box .WatchIt--Ribbon {
    position: absolute;
    top: 0px;
    left: 0;
    background: #6512b9;
    color: #fff !important;
    padding: 3px 3px 3px 10px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    z-index: 20;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
.Small--Box .WatchIt--Ribbon .tail {
    position: absolute;
    right: -12px;
    top: 0;
    width: 12px;
    height: 100%;
    background: #6512b9;
    clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%);
}
.Small--Box .WatchIt--Ribbon .fold {
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 8px;
    height: 8px;
    background: #3f1579;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* 4. بادج التصنيف البديل لسلاسل الأفلام */
.Small--Box .archive-badge-series-hover {
    position: absolute !important;
    top: 35px !important;
    right: 5px !important;
    padding: 4px 4px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    background: transparent !important;
    border: none !important;
    z-index: 100 !important;
    font-family: 'Cairo', sans-serif !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    color: #ff1f2a !important;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 0 0 10px #ff1f2a, 0 0 20px #ff1f2a, 0 0 5px #000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
.Small--Box:hover .archive-badge-series-hover {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 5. نظام الإخفاء والإظهار (كل البادجات تظهر عند الهوفر) */
.Small--Box .archive-badge-category,
.Small--Box .archive-badge-status,
.Small--Box .archive-badge-season,
.Small--Box .archive-badge-episode,
.Small--Box .archive-badge-genre,
.Small--Box .archive-badge-quality,
.Small--Box .archive-badge-rating,
.Small--Box .archive-badge-year,
.Small--Box .archive-badge-parts,
.Small--Box .WatchIt--Ribbon,
.Small--Box .archive-badge-series-hover {
    opacity: 0 !important;
    visibility: hidden !important;
}
.Small--Box:hover .archive-badge-status,
.Small--Box:hover .archive-badge-season,
.Small--Box:hover .archive-badge-episode,
.Small--Box:hover .archive-badge-genre,
.Small--Box:hover .archive-badge-quality,
.Small--Box:hover .archive-badge-rating,
.Small--Box:hover .archive-badge-year,
.Small--Box:hover .archive-badge-parts,
.Small--Box:hover .archive-badge-category,
.Small--Box:hover .WatchIt--Ribbon,
.Small--Box:hover .archive-badge-series-hover {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================================
   ▶️ مثلث التشغيل في مقالات الأرشيف
   ============================================================ */
.Small--Box .play-button-custom {
    position: absolute !important;
    top: 55% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 50 !important;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Small--Box .triangle-icon {
    width: 44px !important;
    height: 44px !important;
    background-color: #e50914 !important;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%) !important;
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.5) !important;
    transition: transform 0.6s ease !important;
}
.Small--Box:hover .play-button-custom {
    opacity: 1 !important;
}
.Small--Box:hover .triangle-icon {
    transform: rotate(360deg) scale(1.1) !important;
}


/* 6. تنسيقات الموبايل للأرشيف (مدمجة ومنظمة) */
@media (max-width: 768px) {
    .Small--Box .archive-badge-category,
    .Small--Box .archive-badge-status,
    .Small--Box .archive-badge-season,
    .Small--Box .archive-badge-episode,
    .Small--Box .archive-badge-genre,
    .Small--Box .archive-badge-quality,
    .Small--Box .archive-badge-rating,
    .Small--Box .archive-badge-year {
        font-size: 12px !important;
        padding: 2px 2px !important;
    }
    .Small--Box .archive-badge-episode { font-size: 12px !important; }
    .Small--Box .archive-badge-parts { font-size: 13px !important; padding: 2px 2px !important; }

    .Small--Box .archive-badge-season { top: 35px !important; left: 5px !important; }
    .Small--Box .archive-badge-status { top: 35px !important; right: 5px !important; }
    .Small--Box .archive-badge-genre { top: 80px !important; right: 5px !important; }
    .Small--Box .archive-badge-quality { top: 80px !important; left: 5px !important; }
    .Small--Box .archive-badge-rating { top: 130px !important; left: 5px !important; }
    .Small--Box .archive-badge-year { top: 130px !important; right: 5px !important; }
    
.Small--Box .archive-badge-series-hover {
        font-size: 12px !important;
        padding: 2px 2px !important;
        top: 35px !important;   /* عدل الرقم ده عشان ترفعه أو تنزله */
        right: 5px !important;  /* عدل الرقم ده عشان تبعده عن اليمين */
        left: auto !important;  /* ضروري جداً عشان اليمين يشتغل */
    }
    
    .Small--Box .triangle-icon {
        width: 34px !important;
        height: 34px !important;
    }

}

/* ============================================================
   🔥 فونت وتأثير عناوين الأرشيف (معدل)
   ============================================================ */
.BlocksHolder .Small--Box h3.title {
    font-family: 'Cairo', sans-serif !important;
    color: #a8a8a8 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    /* تم تقليل المارجن لسحب العنوان لفوق */
    margin-top: 5px !important; 
    text-align: center !important;
    transition: color 0.3s ease, text-shadow 0.3s ease !important;
    /* إعدادات إلغاء القص */
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    white-space: normal !important;
}

.BlocksHolder .Small--Box:hover h3.title {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}

@media (max-width: 768px) {
    .BlocksHolder .Small--Box h3.title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        /* سحب العنوان لفوق برضه في الموبايل */
        margin-top: 3px !important; 
    }
    .BlocksHolder .Small--Box:hover h3.title {
        color: #a8a8a8 !important;
        text-shadow: none !important;
    }
}


/* ============================================================

   🚀 منع هروب الصفحة
   ============================================================ */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}
.top10-mask-wrapper {
    overflow: visible !important;
    contain: none !important;
}
.top10-smart-ticker::-webkit-scrollbar:vertical {
    display: none !important;
    width: 0 !important;
}

.top10-smart-ticker::-webkit-scrollbar:horizontal {
    height: 8px !important;
    display: block !important;
}

/* ============================================================
   5. شريط أفضل 10 مقالات مشاهدة - الهيكل الأساسي
   ============================================================ */
.top10-mask-wrapper {
    position: relative;
    margin: 20px auto 30px;
    width: 100%;
    max-width: 820px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(20, 20, 20, 0.4);
    border: 1px solid rgba(255,255,255,0.05);
    content-visibility: auto;
    contain-intrinsic-size: auto 340px;
    contain: layout paint;
    overflow: visible !important;
    contain: none !important;
}
.top10-mask-wrapper::before,
.top10-mask-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 10;
    pointer-events: none;
}
.top10-mask-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(15,15,15,0.95) 0%, rgba(15,15,15,0) 100%);
}
.top10-mask-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(15,15,15,0.95) 0%, rgba(15,15,15,0) 100%);
}

.top10-smart-ticker {
    padding: 15px 0 25px 0;
    overflow-x: auto;
    overflow-y: visible !important;
    direction: ltr;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
    scrollbar-color: rgba(229, 9, 20, 0.6) transparent;
}
.top10-smart-ticker:active { cursor: grabbing; }
.top10-smart-ticker {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important;
}
.top10-smart-ticker::-webkit-scrollbar {
    height: 5px !important;
    display: block !important;
}
.top10-smart-ticker::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 10px !important;
    margin: 0 40px !important;
}
.top10-smart-ticker::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
}
.top10-smart-ticker::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6) !important;
}


.top10-smart-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    padding-right: 20px;
    width: max-content;
    animation: scrollSmart 45s linear infinite;
    will-change: transform;
    transform: translate3d(0,0,0);
}
.top10-smart-track:hover {
    animation-play-state: paused !important;
}
@keyframes scrollSmart {
    0% { transform: translate3d(0,0,0); }
    100% { transform: translate3d(calc(-50% - 10px), 0, 0); }
}

.top10-smart-item {
    flex: 0 0 auto;
    width: 200px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s;
    border-radius: 12px;
    background: transparent !important;
    position: relative;
    overflow: visible !important;
}
.top10-smart-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}

.top10-smart-poster {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 2 / 3 !important;
    background: transparent !important;
    border-radius: 8px !important;
}
.top10-smart-poster img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.top10-smart-item:hover .top10-smart-poster img {
    transform: scale(1.03);
}

/* مثلث التشغيل للشريط */
.top10-smart-item .play-button-custom {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 50 !important;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.top10-smart-item .triangle-icon {
    width: 44px !important;
    height: 44px !important;
    background-color: #e50914 !important;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%) !important;
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.5) !important;
    transition: transform 0.6s ease !important;
}
.top10-smart-item:hover .play-button-custom { opacity: 1 !important; }
.top10-smart-item:hover .triangle-icon { transform: rotate(360deg) scale(1.1) !important; }

/* رقم الترتيب */
.top10-rank {
    position: absolute !important;
    bottom: -10px !important;
    right: -10px !important;
    font-size: 80px !important;
    font-weight: 900 !important;
    font-family: 'Arial', sans-serif !important;
    color: transparent !important;
    -webkit-text-stroke: 2px #e50914 !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
    z-index: 130 !important;
    line-height: 0.8 !important;
    pointer-events: none !important;
    transition: all 0.4s ease !important;
}
.top10-smart-item:hover .top10-rank {
    color: rgba(229, 9, 20, 0.2) !important;
    text-shadow: 0 0 25px rgba(229, 9, 20, 1) !important;
    transform: scale(1.05) rotate(-5deg) !important;
}

/* ============================================================
   🎯 بادجات شريط الأعلى مشاهدة
   ============================================================ */

/* 1. بادج الحلقة */
.ticker-badge-episode {
    position: absolute !important;
    top: 70% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 14px !important;
    padding: 4px 4px !important;
    color: #00FFD5 !important;
    font-weight: 900 !important;
    background: transparent !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    z-index: 100 !important;
    direction: rtl !important;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 0 0 10px currentColor, 0 0 20px currentColor, 0 0 5px #000 !important;
    transition: opacity 0.3s ease !important;
}
.ticker-badge-episode i {
    font-size: 12px !important;
    margin-left: 0 !important;
    margin-right: 6px !important;
}
.top10-smart-item .ticker-badge-episode {
    opacity: 0 !important;
    visibility: hidden !important;
}
.top10-smart-item:hover .ticker-badge-episode {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 2. الريبون */
.top10-smart-item .WatchIt--Ribbon {
    position: absolute !important;
    top: 0 !important;
    left: -8px !important;
    background: #6512b9 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    padding: 4px 8px 4px 14px !important;
    z-index: 25 !important;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2) !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

/* 3. بادج التصنيف الأساسي */
.top10-smart-item .archive-badge-category {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #FF4FD8 !important;
    padding: 4px 4px !important;
    background: transparent !important;
    pointer-events: none !important;
    z-index: 100 !important;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 0 0 10px #FF4FD8, 0 0 5px #000 !important;
    transition: opacity 0.3s ease !important;
}

/* 4. بادجات الهوفر (تصنيف بديل، حالة، موسم) */
.top10-smart-item .archive-badge-series-hover,
.top10-smart-item .archive-badge-status,
.top10-smart-item .archive-badge-season {
    position: absolute !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    padding: 4px 4px !important;
    background: transparent !important;
    pointer-events: none !important;
    z-index: 100 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease !important;
}
.top10-smart-item .archive-badge-series-hover {
    top: 5px !important;
    right: 5px !important;
    color: #ff1f2a !important;
    text-shadow: 1px 1px 2px #000, 0 0 10px currentColor, 0 0 5px #000 !important;
}
.top10-smart-item .archive-badge-status {
    top: 5px !important;
    right: 5px !important;
}
.top10-smart-item .archive-badge-status.status-now {
    color: #00ff41 !important;
    text-shadow: 1px 1px 2px #000, 0 0 10px currentColor, 0 0 5px #000 !important;
}
.top10-smart-item .archive-badge-status.status-soon {
    color: #B0E0E6 !important;
    text-shadow: 1px 1px 2px #000, 0 0 10px currentColor, 0 0 5px #000 !important;
}
.top10-smart-item .archive-badge-season {
    top: 5px !important;
    left: 5px !important;
    color: #04D9FF !important;
    text-shadow: 1px 1px 2px #000, 0 0 10px currentColor, 0 0 5px #000 !important;
}

/* 5. بادج السنة (مستقل للشريط) - يمين فوق */
.top10-smart-item .archive-badge-year {
    position: absolute !important;
    top: 100px !important;           /* أعلى */
    right: 5px !important;           /* يمين */
    left: auto !important;           /* إلغاء الشمال */
    bottom: auto !important;
    font-size: 14px !important;      /* حجم مناسب للشريط */
    font-weight: 900 !important;
    color: #ffffff !important;       /* أبيض */
    padding: 4px 4px !important;
    background: transparent !important;
    pointer-events: none !important;
    z-index: 100 !important;
  /* ستايل السنة (نيون أحمر ناري مع خلفية سوداء عازلة) */
    text-shadow: 
        1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
        0 0 8px #e50914, 
        0 0 15px #e50914, 
        0 0 25px #e50914,
        0 0 15px rgba(0,0,0,0.8),
        0 0 30px rgba(0,0,0,0.9),
        0 0 40px #000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease !important;
}
.top10-smart-item:hover .archive-badge-year {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 6. بادج الأجزاء (مستقل للشريط) */
.top10-smart-item .archive-badge-parts {
    position: absolute !important;
    top: 70% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #CCFF00 !important;
    background: transparent !important;
    pointer-events: none !important;
    z-index: 100 !important;
/* ستايل الأجزاء (نيون ليموني مع خلفية سوداء عازلة) */
    text-shadow: 
        1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
        0 0 8px #CCFF00, 
        0 0 15px #CCFF00, 
        0 0 25px #CCFF00,
        0 0 15px rgba(0,0,0,0.8),
        0 0 30px rgba(0,0,0,0.9),
        0 0 40px #000 !important;    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease !important;
}

/* 7. نظام الإخفاء والإظهار للشريط */
.top10-smart-item:hover .archive-badge-category,
.top10-smart-item:hover .WatchIt--Ribbon {
    opacity: 0 !important;
    visibility: hidden !important;
}
.top10-smart-item:hover .archive-badge-series-hover,
.top10-smart-item:hover .archive-badge-status,
.top10-smart-item:hover .archive-badge-season,
.top10-smart-item:hover .archive-badge-year,
.top10-smart-item:hover .archive-badge-parts,
.top10-smart-item:hover .ticker-badge-episode {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 8. توحيد توهج النيون للشريط (قوي ومقروء على أي بوستر) */
.ticker-badge-episode,
.top10-smart-item .archive-badge-category,
.top10-smart-item .archive-badge-series-hover,
.top10-smart-item .archive-badge-status.status-now,
.top10-smart-item .archive-badge-status.status-soon,
.top10-smart-item .archive-badge-season {
    text-shadow: 
        /* 1. حدود سوداء حادة حوالين الحروف للوضوح */
        1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
        /* 2. إضاءة النيون الأساسية */
        0 0 8px currentColor, 
        0 0 15px currentColor, 
        0 0 25px currentColor,
        /* 3. سحابة سوداء واسعة في الخلفية لعزل البادج عن البوستر الفاتح */
        0 0 15px rgba(0,0,0,0.8),
        0 0 30px rgba(0,0,0,0.9),
        0 0 40px #000 !important;
}

/* ============================================================
   📱 تنسيق الموبايل للشريط (نفس نظام سكرول الفلتر)
   ============================================================ */
@media (max-width: 768px) {
    html, body { overflow-x: hidden !important; }
    
    .top10-mask-wrapper { overflow-x: hidden !important; }
    .top10-smart-ticker { 
    overflow-x: scroll !important; /* ← التغيير الجوهري: auto → scroll */
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}

    /* 🚀 تظبيط السكرول زي الفلتر بالضبط (خلفية داكنة ومقبض فاتح) */
    .top10-smart-ticker::-webkit-scrollbar {
        height: 6px !important;
        display: block !important;
        background: transparent !important;
    }

    /* 🚀 خلفية المسار (داكنة شفافة) عشان متختفيش */
    .top10-smart-ticker::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.3) !important; /* نفس درجة الفلتر */
        border-radius: 8px !important; /* نفس الفلتر */
        margin: 0 15px !important;
    }

    /* 🚀 المقبض (فاتح وواضح) */
    .top10-smart-ticker::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3) !important; /* فاتح */
        border-radius: 8px !important; /* نفس الفلتر */
        transition: background 0.3s ease !important;
    }

    /* 🚀 لما يلمسه أو يقف عليه (ينور أكتر) */
    .top10-smart-ticker::-webkit-scrollbar-thumb:hover,
    .top10-smart-ticker::-webkit-scrollbar-thumb:active {
        background: rgba(255, 255, 255, 0.7) !important;
    }

    /* باقي كود الموبايل (مقاسات البوسترات، إلخ) */
    .top10-mask-wrapper {
        max-width: 100%;
        border-radius: 0;
        margin: 10px 0;
        border: none;
    }
    .top10-mask-wrapper::before,
    .top10-mask-wrapper::after { width: 40px; }
    .top10-smart-item { width: 145px; }
    .top10-smart-track { animation-duration: 35s; }
    .top10-rank {
        font-size: 50px !important;
        right: -5px !important;
        bottom: -5px !important;
        -webkit-text-stroke: 1.5px #e50914 !important;
    }
    .top10-smart-item .triangle-icon {
        width: 34px !important;
        height: 34px !important;
    }
    
    .ticker-badge-episode {
        font-size: 12px !important;
        padding: 2px 2px !important;
bottom: 50px !important}
    .ticker-badge-episode i { font-size: 11px !important; }
    .top10-smart-item .WatchIt--Ribbon {
        font-size: 12px !important;
        padding: 2px 6px 2px 10px !important;
    }
    .top10-smart-item .archive-badge-category {
        font-size: 11px !important;
        padding: 2px 2px !important;
        top: 5px !important;
        right: 2px !important;
    }
    .top10-smart-item .archive-badge-series-hover {
        font-size: 12px !important;
        padding: 2px 2px !important;
        top: 5px !important;
        right: 5px !important;
    }
    .top10-smart-item .archive-badge-status {
        font-size: 12px !important;
        padding: 2px 2px !important;
        top: 5px !important;
        right: 5px !important;
    }
    .top10-smart-item .archive-badge-season {
        font-size: 12px !important;
        padding: 2px 2px !important;
        top: 5px !important;
        left: 5px !important;
    }
    .top10-smart-item .archive-badge-year {
        font-size: 12px !important;
        padding: 2px 2px !important;
       top: 85px !important;
        right: 5px !important;
    }
    .top10-smart-item .archive-badge-parts {
        font-size: 13px !important;
        padding: 2px 2px !important;
        bottom: 50px !important

        
    }


}

/* ------------------------------------------------------------
   ✨ تأثير التنفس الهادئ للزينة العلوية والسفلية ✨
   ------------------------------------------------------------ */

/* 1. تصميم حركة التنفس (إضاءة خفيفة وتوهج ذهبي ناعم) */
@keyframes decoSoftBreathe {
    0% {
        /* الوضع الهادي: ضل أسود خفيف وتباين أقل */
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)) brightness(0.95);
    }
    100% {
        /* وضع التنفس: توهج ذهبي خافت جداً وإضاءة أعلى سِنة */
        filter: drop-shadow(0 4px 15px rgba(255, 215, 0, 0.25)) brightness(1.15);
    }
}

/* 2. تطبيق التأثير على الزينة العلوية والفرعين اللي تحت */
body .ramadan-grand-box .r-deco-top,
.r-deco-bottom::before,
.r-deco-bottom::after {
    /* تفعيل الأنيميشن لمدة 5 ثواني (رايح جاي بنعومة) */
    animation: decoSoftBreathe 5s infinite alternate ease-in-out !important;
    /* مساعدة المتصفح عشان الحركة تكون ناعمة ومتقطعش */
    will-change: filter !important; 
}

/* ------------------------------------------------------------
   🍃 تأثير الهواء (اهتزاز بطيء جداً) للزينة السفلية ✨
   ------------------------------------------------------------ */

/* 1. أنيميشن الهواء للفرع اليمين (حركة ميل ناعمة جداً) */
@keyframes breezeRight {
    0% { transform: rotate(1deg) translateY(0px); }
    100% { transform: rotate(-1.5deg) translateY(2px); }
}

/* 2. أنيميشن الهواء للفرع الشمال (حركة ميل عكسية) */
@keyframes breezeLeft {
    0% { transform: rotate(-1deg) translateY(0px); }
    100% { transform: rotate(1.5deg) translateY(2px); }
}

/* 3. تطبيق الحركة على الفرع اليمين */
.r-deco-bottom::before {
    /* التثبيت من الزاوية اليمين تحت عشان يتهز من الطرف التاني */
    transform-origin: right bottom !important; 
    
    /* دمج تأثير التنفس مع تأثير الهواء (6 ثواني) */
    animation: decoSoftBreathe 5s infinite alternate ease-in-out, 
               breezeRight 6s infinite alternate ease-in-out !important;
               
    will-change: filter, transform !important;
}

/* 4. تطبيق الحركة على الفرع الشمال */
.r-deco-bottom::after {
    /* التثبيت من الزاوية الشمال تحت */
    transform-origin: left bottom !important;
    
    /* دمج التأثيرين، بس خلينا وقت الهواء (7.5 ثواني) عشان يتحركوا عكس بعض بشكل عشوائي طبيعي */
    animation: decoSoftBreathe 5s infinite alternate ease-in-out, 
               breezeLeft 7.5s infinite alternate ease-in-out !important;
               
    will-change: filter, transform !important;
}


/* ============================================================
   🖥️ تحسينات خاصة بشاشات التلفاز (TV / 4K) فقط
   ============================================================ */

/* 1. إظهار الأزرار وتكبير شريط التمرير على التلفاز */
@media (min-width: 1400px) {
    
    /* إظهار الأزرار */
    .ticker-nav-buttons {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        display: flex !important;
        justify-content: space-between;
        pointer-events: none; /* الأزرار تاخد الضغط، لكن الخلفية لا */
        z-index: 20;
        padding: 0 5px;
        box-sizing: border-box;
    }

    .ticker-nav-btn {
        pointer-events: auto;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.7);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: #fff;
        font-size: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.25s ease;
        backdrop-filter: blur(4px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
        user-select: none;
    }

    .ticker-nav-btn:hover {
        background: #e50914;
        border-color: #e50914;
        transform: scale(1.1);
    }

    /* تكبير شريط التمرير عشان يبان على التلفاز */
    .top10-smart-ticker::-webkit-scrollbar {
        height: 14px !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border-radius: 8px !important;
    }
    .top10-smart-ticker::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.5) !important;
        border-radius: 8px !important;
        border: 2px solid rgba(0, 0, 0, 0.2) !important;
    }
    .top10-smart-ticker::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.8) !important;
    }

    /* تغيير شكل الماوس عشان يدل على إمكانية السحب */
    .top10-smart-ticker {
        cursor: grab !important;
    }
    .top10-smart-ticker:active {
        cursor: grabbing !important;
    }
}

/* 2. إخفاء الأزرار نهائياً عن الكمبيوتر والموبايل */
@media (max-width: 1399px) {
    .ticker-nav-buttons {
        display: none !important;
    }
}