:root {
   --main-red: #e50914;
   --bg-black: #000000;
   --card-bg: #181818;
   --gray-text: #888;
}

body { 
    background-color: var(--bg-black); 
    color: white; 
    margin: 0; 
    font-family: 'Segoe UI', sans-serif; 
    direction: rtl; 
}

/* الهيدر والقائمة */
header {
   background: #000;
   padding: 15px 5%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 2px solid #222;
   flex-wrap: wrap;
   gap: 15px;
}

.logo { color: var(--main-red); font-size: 28px; font-weight: bold; text-decoration: none; }

.search-box { display: flex; gap: 5px; }
.search-box input { padding: 8px; border-radius: 5px; border: 1px solid #333; background: #222; color: white; outline: none; }
.search-box button { background: var(--main-red); color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; }

nav ul { display: flex; list-style: none; gap: 20px; padding: 0; margin: 0; }
nav ul li a { color: white; text-decoration: none; font-weight: bold; transition: 0.3s; }
nav ul li a:hover { color: var(--main-red); }

/* --- تنسيق التبويبات (Tabs) الجديد --- */
.tabs-container {
    text-align: center;
    padding: 30px 0 10px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.tab-btn {
    background: #111;
    color: white;
    border: 1px solid #444;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-btn.active {
    background: #fff;
    color: #000;
    border-color: #fff;
}

.tab-btn:hover:not(.active) {
    background: #222;
    border-color: var(--main-red);
}

/* --- شبكة الأفلام المصلحة --- */
.movies-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
    gap: 25px; 
    padding: 30px 5%; 
    width: 100%; 
    box-sizing: border-box;
    justify-items: center;
}

/* --- تنسيق الكارت الموحد --- */
.card { 
    background: var(--card-bg); 
    border-radius: 10px; 
    overflow: hidden; 
    border: 1px solid #333; 
    transition: 0.3s; 
    display: flex;
    flex-direction: column;
    width: 100%;
}

.card:hover { 
    transform: translateY(-10px); 
    border-color: var(--main-red); 
    box-shadow: 0 10px 20px rgba(229, 9, 20, 0.2);
}

.card img { 
    width: 100%; 
    height: 320px; 
    object-fit: cover; 
}

.card-content { 
    padding: 15px; 
    text-align: center; 
}

.card-content h3 { 
    font-size: 16px; 
    margin: 10px 0; 
    height: 40px; 
    overflow: hidden; 
    color: #fff;
}

.btn-watch { 
    display: block; 
    background: var(--main-red); 
    color: white; 
    text-decoration: none; 
    padding: 10px; 
    border-radius: 5px; 
    font-weight: bold; 
    transition: 0.3s;
}

.btn-watch:hover { background: #b2070f; }

footer { text-align: center; padding: 40px; border-top: 1px solid #222; color: var(--gray-text); font-size: 14px; }