/* =============================================
   القوائم الديناميكية الذكية - مربعات شفافة جداً
   ============================================= */


/* -------------------- تثبيت صارم لحجم قبضة اليد (جميع الستايلات) -------------------- */
.Title-Gif,
.Title-Gif-Classic,
.Title-Gif-Netflix,
.Title-Gif-Shahid,
.Title-Gif-Watchit,
.Title-Gif-Yango,
.Title-Gif-Apple,
.Title-Gif-Amazon,
.Title-Gif-HBO,
.Title-Gif-Disney,
.Shahid-Title-Box .Title-Gif-Shahid,
.Yango-Title-Box .Title-Gif-Yango {
    height: 40px !important;
    width: auto !important;
    min-width: 36px !important;
    max-width: none !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    margin-left: 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    mix-blend-mode: screen !important;
}

/* توهج الأيقونات حسب الستايل */
.Title-Gif-Classic { filter: drop-shadow(0 0 8px #00bfff); }
.Title-Gif-Netflix { filter: drop-shadow(0 0 8px #e50914); }
.Title-Gif-Shahid { filter: drop-shadow(0 0 8px #d1f400); }
.Title-Gif-Watchit { filter: drop-shadow(0 0 8px #ffc107); }
.Title-Gif-Yango { filter: drop-shadow(0 0 8px #d500f9); }
.Title-Gif-Apple { filter: drop-shadow(0 0 8px #a2aaad); }
.Title-Gif-Amazon { filter: drop-shadow(0 0 8px #ff9900); }
.Title-Gif-HBO { filter: drop-shadow(0 0 8px #d4af37); }
.Title-Gif-Disney { filter: drop-shadow(0 0 8px #1e90ff); }

/* -------------------- البادجات الزجاجية (تم إخفاء المربعات وتحويلها لنصوص) -------------------- */
.glass-badge-base {
    position: absolute !important;
    background: transparent !important; /* بدون خلفية */
    border: none !important; /* بدون إطار */
    z-index: 50 !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important; /* تأثير التبديل */
}

/* مواقع البادجات الأساسية (تظهر دائماً) */
.badge-cat { top: 4px !important; right: 4px !important; opacity: 1 !important; visibility: visible !important; }
.badge-year { top: 4px !important; left: 4px !important; opacity: 1 !important; visibility: visible !important; }

/* مواقع البادجات الفرعية (مخفية وتظهر مع الـ Hover) */
.badge-genre { top: 32px !important; right: 4px !important; opacity: 0 !important; visibility: hidden !important; }
.badge-rating { top: 32px !important; left: 4px !important; font-size: 10px !important; opacity: 0 !important; visibility: hidden !important; }
.badge-season { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; opacity: 0 !important; visibility: hidden !important; }
.badge-quality { top: 60px !important; right: 4px !important; left: auto !important; bottom: auto !important; font-size: 9px !important; opacity: 0 !important; visibility: hidden !important; }

/* نظام التبديل الذكي عند مرور الماوس (Hover) */
.dyn-smart-grid .Small--Box:hover .badge-cat,
.dyn-smart-grid .Small--Box:hover .badge-year {
    opacity: 0 !important;
    visibility: hidden !important;
}
.dyn-smart-grid .Small--Box:hover .badge-genre,
.dyn-smart-grid .Small--Box:hover .badge-rating,
.dyn-smart-grid .Small--Box:hover .badge-season,
.dyn-smart-grid .Small--Box:hover .badge-quality {
    opacity: 1 !important;
    visibility: visible !important;
}

/* -------------------- ألوان البادجات لكل ستايل (نصوص ملونة مع توهج خفيف) -------------------- */

/* 1. Classic */
.badge-style-classic.badge-cat { color: #00e5ff; text-shadow: 0 0 4px #00e5ff; }
.badge-style-classic.badge-genre { color: #2979ff; text-shadow: 0 0 4px #2979ff; }
.badge-style-classic.badge-season { color: #1de9b6; text-shadow: 0 0 4px #1de9b6; }
.badge-style-classic.badge-year { color: #ffffff; text-shadow: 0 0 4px #fff; }
.badge-style-classic.badge-rating { color: #ffea00; text-shadow: 0 0 4px #ffea00; }
.badge-style-classic.badge-quality { color: #ffaa66; text-shadow: 0 0 4px #ffaa66; }

/* 2. Netflix */
.badge-style-netflix.badge-cat { color: #ff3b3b; text-shadow: 0 0 4px #ff3b3b; }
.badge-style-netflix.badge-genre { color: #ff6d00; text-shadow: 0 0 4px #ff6d00; }
.badge-style-netflix.badge-season { color: #ff4081; text-shadow: 0 0 4px #ff4081; }
.badge-style-netflix.badge-year { color: #ffeb3b; text-shadow: 0 0 4px #ffeb3b; }
.badge-style-netflix.badge-rating { color: #ffab40; text-shadow: 0 0 4px #ffab40; }
.badge-style-netflix.badge-quality { color: #ffcc80; text-shadow: 0 0 4px #ffcc80; }

/* 3. Shahid */
.badge-style-shahid.badge-cat { color: #d4ff00; text-shadow: 0 0 4px #d4ff00; }
.badge-style-shahid.badge-genre { color: #76ff03; text-shadow: 0 0 4px #76ff03; }
.badge-style-shahid.badge-season { color: #b2ff59; text-shadow: 0 0 4px #b2ff59; }
.badge-style-shahid.badge-year { color: #ffff8d; text-shadow: 0 0 4px #ffff8d; }
.badge-style-shahid.badge-rating { color: #ffea00; text-shadow: 0 0 4px #ffea00; }
.badge-style-shahid.badge-quality { color: #c0ff3e; text-shadow: 0 0 4px #c0ff3e; }

/* 4. Watchit */
.badge-style-watchit.badge-cat { color: #ffc107; text-shadow: 0 0 4px #ffc107; }
.badge-style-watchit.badge-genre { color: #ff9100; text-shadow: 0 0 4px #ff9100; }
.badge-style-watchit.badge-season { color: #ffb74d; text-shadow: 0 0 4px #ffb74d; }
.badge-style-watchit.badge-year { color: #ffe0b2; text-shadow: 0 0 4px #ffe0b2; }
.badge-style-watchit.badge-rating { color: #ffd54f; text-shadow: 0 0 4px #ffd54f; }
.badge-style-watchit.badge-quality { color: #ffab2e; text-shadow: 0 0 4px #ffab2e; }

/* 5. Yango */
.badge-style-yango.badge-cat { color: #e040fb; text-shadow: 0 0 4px #e040fb; }
.badge-style-yango.badge-genre { color: #ff4081; text-shadow: 0 0 4px #ff4081; }
.badge-style-yango.badge-season { color: #b388ff; text-shadow: 0 0 4px #b388ff; }
.badge-style-yango.badge-year { color: #f8bbd0; text-shadow: 0 0 4px #f8bbd0; }
.badge-style-yango.badge-rating { color: #ffd740; text-shadow: 0 0 4px #ffd740; }
.badge-style-yango.badge-quality { color: #ce93d8; text-shadow: 0 0 4px #ce93d8; }

/* 6. Apple */
.badge-style-apple.badge-cat { color: #a5d6a5; text-shadow: 0 0 4px #a5d6a5; }
.badge-style-apple.badge-genre { color: #81c784; text-shadow: 0 0 4px #81c784; }
.badge-style-apple.badge-season { color: #b9f6ca; text-shadow: 0 0 4px #b9f6ca; }
.badge-style-apple.badge-year { color: #cfd8dc; text-shadow: 0 0 4px #cfd8dc; }
.badge-style-apple.badge-rating { color: #ffab91; text-shadow: 0 0 4px #ffab91; }
.badge-style-apple.badge-quality { color: #c5e1a5; text-shadow: 0 0 4px #c5e1a5; }

/* 7. Amazon */
.badge-style-amazon.badge-cat { color: #ff9900; text-shadow: 0 0 4px #ff9900; }
.badge-style-amazon.badge-genre { color: #00a8ff; text-shadow: 0 0 4px #00a8ff; }
.badge-style-amazon.badge-season { color: #ffcc00; text-shadow: 0 0 4px #ffcc00; }
.badge-style-amazon.badge-year { color: #ffffff; text-shadow: 0 0 4px #fff; }
.badge-style-amazon.badge-rating { color: #ff7043; text-shadow: 0 0 4px #ff7043; }
.badge-style-amazon.badge-quality { color: #ffb74d; text-shadow: 0 0 4px #ffb74d; }

/* 8. HBO */
.badge-style-hbo.badge-cat { color: #d4af37; text-shadow: 0 0 4px #d4af37; }
.badge-style-hbo.badge-genre { color: #cd5c5c; text-shadow: 0 0 4px #cd5c5c; }
.badge-style-hbo.badge-season { color: #b8860b; text-shadow: 0 0 4px #b8860b; }
.badge-style-hbo.badge-year { color: #f5f5dc; text-shadow: 0 0 4px #f5f5dc; }
.badge-style-hbo.badge-rating { color: #ffb347; text-shadow: 0 0 4px #ffb347; }
.badge-style-hbo.badge-quality { color: #e0c080; text-shadow: 0 0 4px #e0c080; }

/* 9. Disney */
.badge-style-disney.badge-cat { color: #1e90ff; text-shadow: 0 0 4px #1e90ff; }
.badge-style-disney.badge-genre { color: #ba68c8; text-shadow: 0 0 4px #ba68c8; }
.badge-style-disney.badge-season { color: #ff69b4; text-shadow: 0 0 4px #ff69b4; }
.badge-style-disney.badge-year { color: #e0e0e0; text-shadow: 0 0 4px #e0e0e0; }
.badge-style-disney.badge-rating { color: #ffdab9; text-shadow: 0 0 4px #ffdab9; }
.badge-style-disney.badge-quality { color: #90caf9; text-shadow: 0 0 4px #90caf9; }

/* -------------------- عنوان القائمة (أبيض ثابت) -------------------- */
.Title--Box h3 {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 24px;
    margin: 0;
    font-weight: bold;
}

/* -------------------- الشبكة الذكية -------------------- */
.dyn-smart-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    padding-bottom: 20px;
}
.dyn-smart-grid .Small--Box {
    width: calc(25% - 15px);
    list-style: none;
    margin-bottom: 20px;
}
.dyn-smart-grid .grid-top-right { order: 2; }
.dyn-smart-grid .grid-top-left { order: 1; }
.dyn-smart-grid .grid-mid-right { order: 4; }
.dyn-smart-grid .grid-bottom-left { order: 3; }

.dyn-smart-grid .Small--Box .Poster {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dyn-smart-grid .Small--Box:hover .Poster {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.5);
}
.dyn-smart-grid .Small--Box h3.title {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    color: #ffffff;
}

/* ألوان عنوان الفيلم عند hover حسب الستايل (مع تأثير التوهج) */
.classic-dynamic-block .Small--Box:hover h3.title { color: #00bfff !important; text-shadow: 0 0 10px #00bfff !important; }
.netflix-dynamic-block .Small--Box:hover h3.title { color: #e50914 !important; text-shadow: 0 0 10px #e50914 !important; }
.shahid-dynamic-block .Small--Box:hover h3.title { color: #d1f400 !important; text-shadow: 0 0 10px #d1f400 !important; }
.watchit-dynamic-block .Small--Box:hover h3.title { color: #ffc107 !important; text-shadow: 0 0 10px #ffc107 !important; }
.yango-dynamic-block .Small--Box:hover h3.title { color: #d500f9 !important; text-shadow: 0 0 10px #d500f9 !important; }
.apple-dynamic-block .Small--Box:hover h3.title { color: #a2aaad !important; text-shadow: 0 0 10px #a2aaad !important; }
.amazon-dynamic-block .Small--Box:hover h3.title { color: #ff9900 !important; text-shadow: 0 0 10px #ff9900 !important; }
.hbo-dynamic-block .Small--Box:hover h3.title { color: #d4af37 !important; text-shadow: 0 0 10px #d4af37 !important; }
.disney-dynamic-block .Small--Box:hover h3.title { color: #1e90ff !important; text-shadow: 0 0 10px #1e90ff !important; }

/* -------------------- الأسهم -------------------- */
.Scroll-Arrow {
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 20;
}
.Scroll-Arrow.Right { right: -10px; }
.Scroll-Arrow.Left { left: -10px; }

/* ألوان الأسهم لكل ستايل */
.Scroll-Arrow.Classic { border: 2px solid #00bfff; color: #00bfff; }
.Scroll-Arrow.Classic:hover { background: #00bfff; color: #000; box-shadow: 0 0 20px #00bfff; }
.Scroll-Arrow.Netflix { border: 2px solid #e50914; color: #e50914; }
.Scroll-Arrow.Netflix:hover { background: #e50914; color: #fff; box-shadow: 0 0 20px #e50914; }
.Scroll-Arrow.Shahid { border: 2px solid #d1f400; color: #d1f400; }
.Scroll-Arrow.Shahid:hover { background: #d1f400; color: #000; box-shadow: 0 0 20px #d1f400; }
.Scroll-Arrow.Watchit { border: 2px solid #ffc107; color: #ffc107; }
.Scroll-Arrow.Watchit:hover { background: #ffc107; color: #000; box-shadow: 0 0 20px #ffc107; }
.Scroll-Arrow.Yango { border: 2px solid #d500f9; color: #d500f9; }
.Scroll-Arrow.Yango:hover { background: #d500f9; color: #fff; box-shadow: 0 0 20px #d500f9; }
.Scroll-Arrow.Apple { border: 2px solid #a2aaad; color: #a2aaad; }
.Scroll-Arrow.Apple:hover { background: #a2aaad; color: #000; box-shadow: 0 0 20px #a2aaad; }
.Scroll-Arrow.Amazon { border: 2px solid #ff9900; color: #ff9900; }
.Scroll-Arrow.Amazon:hover { background: #ff9900; color: #000; box-shadow: 0 0 20px #ff9900; }
.Scroll-Arrow.HBO { border: 2px solid #d4af37; color: #d4af37; }
.Scroll-Arrow.HBO:hover { background: #d4af37; color: #000; box-shadow: 0 0 20px #d4af37; }
.Scroll-Arrow.Disney { border: 2px solid #1e90ff; color: #1e90ff; }
.Scroll-Arrow.Disney:hover { background: #1e90ff; color: #fff; box-shadow: 0 0 20px #1e90ff; }

/* -------------------- التوافق مع الجوال -------------------- */
@media (max-width: 768px) {
    .dyn-smart-grid .Small--Box {
        width: calc(50% - 10px);
    }
    .dyn-smart-grid .grid-top-right,
    .dyn-smart-grid .grid-top-left,
    .dyn-smart-grid .grid-mid-right,
    .dyn-smart-grid .grid-bottom-left {
        order: 0;
    }
    .Title--Box .Right {
        gap: 5px;
        flex-wrap: wrap;
    }
    
    /* تصغير وتوزيع البادجات في الموبايل */
    .glass-badge-base { padding: 2px 3px !important; font-size: 10px !important; }
    .badge-genre { top: 25px !important; right: 3px !important; }
    .badge-year { top: 25px !important; left: 3px !important; }
    .badge-rating { top: 45px !important; right: 3px !important; font-size: 9px !important; }

    .Title-Gif,
    .Title-Gif-Classic,
    .Title-Gif-Netflix,
    .Title-Gif-Shahid,
    .Title-Gif-Watchit,
    .Title-Gif-Yango,
    .Title-Gif-Apple,
    .Title-Gif-Amazon,
    .Title-Gif-HBO,
    .Title-Gif-Disney,
    .Shahid-Title-Box .Title-Gif-Shahid,
    .Yango-Title-Box .Title-Gif-Yango {
        height: 32px !important;
        min-width: 28px !important;
    }
    .Title--Box h3 {
        font-size: 18px;
    }
    .Scroll-Arrow {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}