:root { 
    --main-red: #8bbde9; 
    --aqua-blue: #00BCD4;
    --dark-bg: #00151C; 
    --nav-bg: #001C25; }

        /* منع أي حركة جانبية للمتصفح */
        html, body {
            max-width: 100%;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
            font-family: 'Inter', sans-serif;
            background: var(--dark-bg);
            color: #fff;
        }

        /* الهيدر الرئيسي */
        nav { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            padding: 0 5%; 
            height: 70px;
            background: var(--nav-bg); 
            position: sticky; 
            top: 0; 
            z-index: 2000; 
            border-bottom: 1px solid #222;
            box-sizing: border-box;
        }

        /* مربع البحث (يختفي في الموبايل) */
        .search-box input {
            background: #00151C; border: 1px solid #333; color: white;
            padding: 8px 18px; border-radius: 20px; width: 235px; transition: 0.3s;
        }
        .search-box input:focus { border-color: var(--main-red); width: 280px; outline: none; }

        /* روابط التنقل */
        .nav-links { display: flex; align-items: center; }
        .nav-links a { 
            color: #efefef; 
            text-decoration: none; 
            margin-left: 25px; 
            font-size: 14px; 
            font-weight: 600; 
            transition: 0.3s; 
        }
        .nav-links a:hover { color: var(--main-red); }

        /* أيقونة الهمبرغر (تظهر في الموبايل فقط) */
        .menu-toggle {
            display: none;
            cursor: pointer;
            z-index: 4000;
        }
        .menu-toggle div {
            width: 25px; height: 3px; background: #fff; margin: 5px 0; transition: 0.4s;
        }

        /* إعدادات الشاشات الصغيرة (الموبايل) */
        @media (max-width: 768px) {
            .search-box { display: none; } /* إخفاء البحث لتوفير مساحة */
            .menu-toggle { display: block; }

            .nav-links {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background: rgba(0, 0, 0, 0.98);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                display: none; /* مخفي تماماً */
                z-index: 3000;
            }

            .nav-links.active {
                display: flex; /* يظهر كطبقة فوق الصفحة */
            }

            .nav-links a {
                margin: 15px 0;
                font-size: 22px;
                width: 100%;
                text-align: center;
            }
        }

        /* أنيميشن زر الإغلاق X */
        .menu-toggle.open .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
        .menu-toggle.open .line2 { opacity: 0; }
        .menu-toggle.open .line3 { transform: rotate(45deg) translate(-5px, -6px); }
        
        /* خبي الرابط في الحاسوب بصفة عامة */
         .mobile-only {
          display: none;
          }

       /* بين الرابط غير فاش تكون الشاشة أصغر من 768px (الهاتف) */
        @media (max-width: 768px) {
        .mobile-only {
         display: block !important;
           }
        }
        
.logo {
    display1: flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
    transition: 0.3s ease;
}

/* أيقونة المسلسلات/الشاشة */
.logo-icon {
    font-size: 28px;
    margin-right: -10px;
    /* إضافة توهج أحمر خفيف خلف الأيقونة */
    filter: drop-shadow(0 0 8px rgba(229, 9, 20, 0.6));
}

/* DAR - الخط الكبير والقوي */
.logo .text-main {
    font-size: 34px;
    font-weight: 900;
    color: #FF0000;
    letter-spacing: -1.5px;
    line-height: 1;
}

/* linez - الخط الصغير والأنيق */
.logo .text-sub {
    font-size: 16px;
    font-weight: bold;
    color: #8bbde9;
    margin-left: 1px;
    align-self: flex-end;
    margin-bottom: 5px;
    font-style: italic;
}

/* تأثير عند تمرير الماوس لجعل الشعار ينبض بالحياة */
.logo:hover {
    transform: translateY(-2px);
}
.logo:hover .logo-icon {
    transform: rotate(-10deg); /* تدوير بسيط للأيقونة عند الهوفر */
}

.text-main {
    color: #FF0000; /* اللون الأحمر */
}

.text-sub {
    color: #00FFFF; /* اللون الأزرق المائي (Cyan) */
}


        /* منع أي عنصر من الخروج عن إطار الشاشة */
*, *::before, *::after {
    box-sizing: border-box; 
}

html, body {
    max-width: 100vw;
    overflow-x: hidden; /* يمنع الجر لجنب نهائياً */
    margin: 0;
    padding: 0;
}

/* تأمين الحاويات الرئيسية */
.container {
    width: 100%;
    max-width: 1200px; /* أو العرض اللي داير أنت */
    margin: 0 auto;
    padding: 0 15px; /* كيعطي متنفس للمحتوى فالتليفون باش ما يلصقش فالحيط */
}

@media (max-width: 768px) {
    /* سنجعل مربع البحث يظهر بشكل مميز عند تفعيل كلاس معين */
    .search-box.show-mobile {
        display: block !important;
        position: absolute;
        top: 70px; /* تحت الهيدر مباشرة */
        left: 0;
        width: 100%;
        background: #000;
        padding: 15px;
        z-index: 5000;
        border-bottom: 1px solid #e50914;
    }
    .search-box.show-mobile input {
        width: 100% !important;
        border-radius: 8px;
    }
}

footer {
    border-top: 1px solid #00bcc2;
    margin-top: 60px;
    padding: 50px 0 30px;
    background: var(--nav-bg);
    color: #888;
}

/* ستايل قائمة البحث المباشر */
.search-box { position: relative; }

#live-search-results {
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    background: #001C25;
    border: 1px solid #333;
    border-radius: 8px;
    z-index: 1000;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    overflow: hidden;
    display: none;
}

.live-search-item {
    display: flex;
    align-items: center;
    padding: 10px;
    text-decoration: none;
    border-bottom: 1px solid #222;
    transition: 0.2s;
}

.live-search-item:hover { background: #00151C; }

.live-search-item img {
    width: 40px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 12px;
}

.live-title { display: block; color: #fff; font-size: 0.85rem; font-weight: bold; }
.live-type { font-size: 0.7rem; color: #e50914; text-transform: uppercase; }
/* ستايل قائمة البحث المباشر */