/*
 * helal-2018
*/


/* css6/style.min.css */

#main_contents{
	width:98%;
	margin:30px auto;
}

.pagination{padding:2px;margin:2px;position:relative;width:100%}.pagination,a a:hover,.pagination.txt_center{text-align:center}.arrow_nav{overflow:auto;padding:4px 0;margin:2px;width:100%}.arrow_nav a,.pagination a{padding:2px 10px;margin:2px;border:1px solid #fff;text-decoration:none;display:inline-block;border-radius:5px;color:#333}.arrow_nav a:hover,.pagination a:hover{background:#F6F6F6;color:#000}.pagination a.current,.pagination b{padding:2px 10px;border:1px solid #000;background:#F6F6F6;border-radius:5px}
h3 { 
  font-size: 18px;
  margin-bottom: 5px;
  margin-top: 5px;
}

h2 { 
  font-size: 16px;
  color: #ac302a;
  font-weight: bold;
  margin-bottom: 25px;
  margin-top: 1px;
}
/* css6/style.min.css */
/* تنسيقات عامة */
.main-nav { background: linear-gradient(#424141, #292929, #000); padding: 10px; }
.menu-list { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }

/* تنسيق الروابط */
.menu-list li { padding: 5px; box-sizing: border-box; width: 50%; } 
.menu-list li a { 
    display: block; padding: 8px; color: #fff; text-decoration: none; 
    background: #444; border-radius: 3px; text-align: center; font-size: 14px;
}
.menu-list li a:hover { background-color: #ac5148; }

/* تنسيق زر المكتبة (قائمتي) */
/* حذفنا الـ 100% وجعلناه 50% ليكون بجانب زميله */
.special-lib-item { width: 50%; } 
.my-library-link { 
    background: linear-gradient(90deg,#ffcc00,#ff8800) !important; color: #000 !important; font-weight: bold;
}

/* حالة الديسكتوب */
@media (min-width: 769px) {
    .menu-list li { width: auto; flex: 1; }
    .special-lib-item { width: auto; }
    #mobile-show-all-cats { display: none !important; }
}

/* إخفاء العناصر الزائدة في الموبايل */
@media (max-width: 768px) {
    /* نخفي العناصر من الخامس فما فوق افتراضياً */
    .menu-list li:nth-child(n+5) { display: none; } 
    
    /* عند إضافة كلاس show-all تظهر جميع العناصر */
    .menu-list.show-all li { display: block !important; width: 50% !important; }
    
    #mobile-show-all-cats { display: block !important; }
}
/* هذا الكود سيعمل فقط عندما تكون شاشة الجهاز أصغر من 768 بكسل (الجوال) */
@media (max-width: 767px) {
    #player.col-xs-12 {
        margin-top: -14px !important;
        padding-top: 0 !important;
    }
}

/* أما في الشاشات الأكبر (الكمبيوتر)، سيعود الوضع للطبيعي تلقائياً */

/* === Global Resets and Typography === */

@font-face {
    font-family: 'Droid Arabic Kufi';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(fonts/DroidKufi-Regular.eot);
    src: url(fonts/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
         url(fonts/DroidKufi-Regular.woff2) format('woff2'),
         url(fonts/DroidKufi-Regular.woff) format('woff'),
         url(fonts/DroidKufi-Regular.ttf) format('truetype');
}

body {
    font: 13px "Droid Arabic Kufi", Arial, Helvetica, sans-serif;
}

ul {
    list-style: none; /* تم تجميع هذه القاعدة */
    display: list-item;
    margin: 0;
    padding: 0;
}

/* إعادة تطبيق list-style: none على عناصر محددة، رغم أنها مغطاة بواسطة القاعدة العامة ul */
.cats ul,
.f-cats ul,
.f-nav ul,
.social ul {
    list-style: none;
}

a {
    outline: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    text-decoration: none !important;
}
/* === Layout & Utility === */

.clear {
    clear: both;
    overflow: hidden;
    height: 0;
}

.logo {
    float: right;
}

.alam {
    float: left;
}

#topheader .list1,
.head {
    float: right;
}

/* === Ads/Banners === */

.ads,
.logo {
    margin-bottom: 20px;
}

.ads {
    float: left;
    color: #fff;
    width: 60%;
    background: rgba(0, 0, 0, .3);
    padding: 10px;
    border: 1px solid #FFA800;
    border-radius: 10px;
}

.ads a {
    color: #FFA600;
}

.ads a:hover {
    color: #FFF;
    transition: all ease-in-out .3s;
}

.ads p {
    float: right;
    margin: 0 10px;
    font-family: Jannat Req;
    font-size: 12px;
}

/* === Search Bar === */

#search_text {
    border-radius: 5px;
    background: rgba(255, 255, 255, .2);
    border: 0;
    margin-top: 10px;
    color: #fff;
}

#submit-sr {
    color: #fff;
    background: 0 0;
    padding: 5px 10px;
    margin-right: -40px;
    font-size: 12px;
}

/* === Header / Top Bar === */

#topheader {
    background-color: #040404;
    border-bottom: 2px solid #4e4e4e;
    padding: 10px 0;
}

#topheader .list1 ul li {
    display: inline-block;
    font-size: 14px;
    line-height: 30px;
}

#topheader .list1 ul li a {
    color: #828282;
    margin: 0 auto;
    padding: 0 10px;
    border-radius: 3px;
}

#topheader .list1 ul li a:hover {
    color: #fff;
    background-color: #e8005c;
}

#topheader .searcharea {
    float: left;
}

#topheader .searcharea form {
    width: 250px;
}

#topheader .searcharea form input {
    background-color: #333;
    border: none;
    color: #fff;
    float: left;
    font-size: 13px;
    height: 30px;
    padding: 0;
    text-align: center;
    width: 85%;
}

#topheader .searcharea form button {
    background-color: #e8005c;
    border: none;
    color: #13050a;
    float: right;
    height: 30px;
    padding: 0;
    width: 15%;
}

#topheader .searcharea form button:hover {
    background-color: #cf0153;
    color: #fff;
}

header {
    background: url(images/header-bg.png) center top repeat-x rgba(0, 0, 0, 0);
    height: 55px;
    padding: 0 15px;
}

header .logo {
    float: right;
    line-height: 55px;
    margin: 0 auto;
}

nav {
    /* تم حذف filter:progid:DXImageTransform.Microsoft.gradient */
    background: #5d5d5d;
    background: -moz-linear-gradient(top, #5d5d5d 0, #494949 100%);
    background: -webkit-linear-gradient(top, #5d5d5d 0, #494949 100%);
    background: linear-gradient(to bottom, #5d5d5d 0, #494949 100%);
    border-radius: 5px;
    padding: 5px 0;
}

/* === User Area / Settings === */

#userarea {
    background-color: #070707;
    padding: 10px 15px;
}

#userarea .loginarea {
    float: right;
}

#userarea .loginarea input.inpp {
    background-color: #6f6f6f;
    border: 2px solid #616161;
    border-radius: 5px;
    color: #060606;
    float: right;
    font-size: 15px;
    height: 35px;
    margin: 0 0 0 10px;
    padding: 0 30px 0 0;
    width: 180px;
}

#userarea .loginarea input.inpp[type=text] {
    background: url(images/icc1.png) 95% center no-repeat #6f6f6f;
}

#userarea .loginarea input.inpp[type=password] {
    background: url(images/icc2.png) 95% center no-repeat #6f6f6f;
}

#userarea .loginarea label {
    color: #fff;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 35px;
    margin: 0 auto;
}

#userarea .loginarea label input {
    margin: 0 0 0 5px;
}

#userarea .loginarea button {
    background-color: #e8005c;
    border: none;
    border-radius: 5px;
    color: #fff;
    float: right;
    font-size: 14px;
    font-weight: 700;
    height: 35px;
    margin: 0 10px 0 0;
    padding: 0 15px;
}

#userarea .loginarea button:hover {
    background-color: #ffa700;
}

#userarea .linksvisitor {
    float: left;
}

#userarea .linksvisitor a {
    background-color: #111;
    border-radius: 5px;
    color: #727272;
    display: inline-block;
    font-size: 14px;
    height: 35px;
    line-height: 35px;
    margin: 0 5px 0 0;
    padding: 0 15px;
}

#userarea .linksvisitor a:hover {
    background-color: #e8005c;
    color: #fff;
}

#userarea .linksvisitor a:first-child {
    margin: 0 auto;
}

#userarea .usersetting {
    margin: 0 -15px;
}

#userarea .usersetting p {
    /* تم حذف filter:progid:DXImageTransform.Microsoft.gradient */
    background: #5d5d5d;
    background: -moz-linear-gradient(top, #5d5d5d 0, #494949 100%);
    background: -webkit-linear-gradient(top, #5d5d5d 0, #494949 100%);
    background: linear-gradient(to bottom, #5d5d5d 0, #494949 100%);
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    float: right;
    font-size: 14px;
    margin: 0 1% 1%;
    padding: 3px 0;
    text-align: center;
    width: 23%;
}

#userarea .usersetting p:last-of-type {
    margin: 0 1% 0 0;
}

#userarea .usersetting p a {
    color: #fff;
}

#userarea .usersetting p a:hover {
    color: #ffa700;
}

/* === Main Wrapper / Layout === */

#wrapper {
    background-color: #202020;
    padding: 15px;
    overflow: hidden;
}

/* === Slider Area / Carousel === */

.slider {
    width: 98%;
    margin: 10px auto auto;
    border: 1px solid #CCC;
    border-radius: 10px;
    overflow: hidden;
    padding: 5px;
    background: #e8e8e8;
}

.slide-image {
    width: 970px;
}

.carousel-holder {
    margin-bottom: 10px;
}

.carousel-control,
.item {
    border-radius: 4px;
}

#sliderarea {
    background-color: #070707;
    padding: 15px 15px 0;
}

#sliderarea .slider {
    background-color: #e1e1e1;
    border: 4px solid #e1e1e1;
    border-radius: 0;
    margin: 0 auto;
    padding: 0;
    width: auto;
}

#sliderarea .slider ul.ps-list li span {
    color: #8c8487;
    float: right;
    font-size: 14px;
    height: auto;
    line-height: 25px;
    padding: 5px;
    width: 77.9%;
}

#sliderarea .slider .pgwSlider span.ps-caption {
    background-color: rgba(7, 7, 7, .7);
    padding: 10px;
}

#sliderarea .slider .pgwSlider span.ps-caption b {
    font-weight: 400;
}

/* === Categories / Menus === */

.cats {
    background: rgba(0, 0, 0, 1);
    width: 100%;
    max-width: 970px;
    margin: auto;
    overflow: hidden;
    padding: 15px 0 0;
}

.cats ul {
    text-align: right;
    float: right;
    padding-right: 10px;
}

.cats ul li,
.f-cats ul li {
    float: right;
    width: 100%;
    padding: 5px 0;
    text-align: center;
}

.cats ul li {
    max-width: 185px;
    margin-bottom: 10px;
    border-radius: 5px;
    margin-left: 5px;
}

.cats ul li a {
    color: #fff;
    font-size: 16px;
    text-decoration: none;
}

.cats ul li:hover {
    background: #CCC !important;
    transition: all .5s ease-in-out;
}

.cats ul li:hover a {
    color: #333;
    transition: all .5s ease-in-out;
}

.f-cats ul {
    display: inline-block;
    margin-top: 20px;
    width: 100%;
    margin-bottom: 20px;
}

.f-cats ul li {
    max-width: 165px;
    margin-bottom: 10px;
}

.f-cats ul li a,
.f-nav ul li a {
    font-size: 17px;
    text-decoration: none;
}

.f-nav {
    background: rgba(255, 255, 255, .2);
    border-radius: 10px;
    margin: 10px 0;
    padding: 10px 0;
}

.f-nav ul {
    padding-right: 5px;
}

.f-nav ul li {
    float: right;
    margin-right: 10px;
}

.f-nav ul li a {
    color: #8F8F8F;
}

.social span {
    float: right;
    color: #fff;
}

.social ul li {
    float: right;
    margin-right: 10px;
}

/* === Movie / File Listings === */

.movies {
    padding-right: 25px;
}

.movie,
.movieiteem,
.movieiteem .poster,
.thumb {
    position: relative;
    overflow: hidden;
}

.movie {
    background: #eee;
    display: inline-block;
    margin: 20px 36px;
    text-align: center;
    padding: 10px;
    height: 350px;
    width: 209px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.movie:hover {
    opacity: .7;
    transition: all .3s ease-in-out;
}

.thumb,
.thumb img {
    height: 231px;
    width: 189px;
}

.thumb {
    text-align: right;
}

.thumb img {
    position: absolute;
}

.excerpt {
    color: #e81b41;
    width: 189px;
    font-size: 11px;
    margin-top: 10px;
    font-family: tahoma;
    height: 45px;
    overflow: hidden;
}

.title {
    width: 209px;
    background: #4f4d4d;
    margin-right: -10px;
    height: 52px;
    overflow: hidden;
}

.title a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-family: Jannat Req;
}

.caption {
    height: 130px;
    overflow: hidden;
}

.caption h4 {
    white-space: nowrap;
}

.section {
    color: #fff;
    position: absolute;
    background: #E9AE1F;
    padding: 0 3px;
}

.head {
    background: #42C19D;
    height: 38px;
    line-height: 38px;
    margin-bottom: 10px;
    margin-top: 20px;
    margin-right: 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 0 15px;
}

.head,
.head a {
    color: #fff;
}

.r-head {
    background: url(images/right.jpg) right no-repeat;
}

.l-head {
    background: url(images/left.jpg) left no-repeat;
    margin-top: -1px;
}

.cat-name {
    margin-right: 40px;
    text-decoration: none;
}

.more {
    margin-right: 50px;
    margin-left: 40px;
    background: #1A9471;
    border-radius: 10px;
    padding: 4px 10px;
    font-size: 14px;
}

/* Movie Category Block */

.moviescatego {
    margin: 25px auto 0;
}

.moviescatego .title,
.titlectegory {
    /* تم حذف filter:progid:DXImageTransform.Microsoft.gradient */
    background: #292727;
    background: -moz-linear-gradient(top, #292727 0, #161615 100%);
    background: -webkit-linear-gradient(top, #292727 0, #161615 100%);
    background: linear-gradient(to bottom, #292727 0, #161615 100%);
    height: auto;
    margin: 0 -15px;
    padding: 5px 15px;
    width: auto;
    display: block;
}

.moviescatego .title span {
    display: block;
    float: right;
}

.moviescatego .title span a {
    color: #999;
    font-family: "Droid Arabic Kufi", Arial, Helvetica, sans-serif;
    font-size: 17px;
}

.moviescatego .title span a:hover {
    color: #fff;
}

.moviescatego .title .moremov {
    display: block;
    float: left;
}

.moviescatego .title .moremov a {
    background-color: #333;
    border-radius: 3px;
    display: block;
    font-size: 15px;
    margin: 3px auto;
    padding: 0 5px;
}

.moviescatego .title .moremov a:hover {
    background-color: #e8005c;
}

/* Movie Item Details */

.movieiteem {
    border: 1px solid #2a2a29;
    margin: 20px auto;
}

.movieiteem .poster {
    height: 300px;
}

.movieiteem .poster img {
    height: 100%;
    width: 100%;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.movieiteem:hover .poster img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.movieiteem .poster .movdesc {
    background-color: rgba(7, 7, 7, .8);
    bottom: -150px;
    font-size: 15px;
    left: 0;
    line-height: 21px;
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: all .3s ease-in-out;
    padding: 10px 5px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.movieiteem:hover .poster .movdesc {
    bottom: 0;
    opacity: 1;
}

.movieiteem .movtitle {
    background-color: #2a2a29;
    font-size: 16px;
    line-height: 22px;
    min-height: 65px;
    padding: 10px 5px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.movieiteem .movtitle a {
    color: #fff;
}

.movieiteem .movtitle a:hover {
    color: #e8005c;
}

.movieiteem .moredetils {
    background-color: #111;
    color: #a7a7a7;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    padding: 4px 5px;
}

.movieiteem .moredetils span.cetnam {
    float: right;
}

.movieiteem .moredetils span.camicon {
    background: url(images/iconcam.png) left center no-repeat rgba(0, 0, 0, 0);
    float: left;
    padding: 0 0 0 30px;
}

/* === File/Post Details Pages === */

.brudcrmmp {
    background: url(images/header-bg.png) center top repeat-x rgba(0, 0, 0, 0);
    border-radius: 5px;
    color: #828282;
    display: block;
    font-size: 17px;
    margin: 20px auto;
    padding: 7px 10px;
}

.brudcrmmp a {
    color: #fff;
}

.brudcrmmp a:hover {
    color: #e8005c;
}

.titlectegory {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    margin: 0 -15px;
    padding: 5px 15px;
    text-align: center;
    width: auto;
}

.titlectegory a {
    color: #fff;
}

.titlectegory a:hover {
    color: #e8005c;
}

.boxinsidedata {
    margin: 20px auto;
}

#main_contents,
.boxinsidedata .titleinside {
    /* تم حذف filter:progid:DXImageTransform.Microsoft.gradient */
    background: #5d5d5d;
    background: -moz-linear-gradient(top, #5d5d5d 0, #494949 100%);
    background: -webkit-linear-gradient(top, #5d5d5d 0, #494949 100%);
    background: linear-gradient(to bottom, #5d5d5d 0, #494949 100%);
    border-radius: 5px 5px 0 0;
    color: #000;
    font-size: 16px !important;
    line-height: normal;
    margin: 0 auto;
    padding: 10px;
}

/* === Pagination === */

.arrow_nav a,
.pagination a,
.pagination a.current,
.pagination b {
    background-color: #484848;
    border: none;
    color: #dadada;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 19px;
    line-height: normal;
    margin: 0 3px;
    padding: 5px 10px;
}

.pagination a.current,
.pagination b {
    background-color: #ce4437;
    color: #fff;
}

.arrow_nav a:hover,
.pagination a:hover {
    background-color: #ffa700;
    color: #fff;
}

/* === Media Queries === */

@media screen and (max-width: 768px) {
    .center.film iframe,
    .center.film iframe embed {
        width: 450px;
        height: 300px;
    }

    #vplayer,
    #vplayer_wrapper {
        width: 450px !important;
        height: 300px !important;
    }
}


.copyrights{
	text-align:center;
}

.maincontentnew{
	margin: 30px auto;
	max-width: 600px;
}

.filemovie .titlefilemovie,.maincontentnew .titleinside{
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d5d5d', endColorstr='#494949', GradientType=0 );
	font-size:16px!important;line-height:normal;margin:0 auto;
	color:#fff;
	text-align:center;
}
	
	/*
|--------------------------------------------------------------------------
| GENERAL CONTENT BOXES
|--------------------------------------------------------------------------
*/
/* Combines .maincontentnew .titleinside and .filemovie .titlefilemovie */
.maincontentnew .titleinside,
.filemovie .titlefilemovie {
    background-color: #5d5d5d; /* Fallback color */
    background-image: linear-gradient(to bottom, #5d5d5d 0%, #494949 100%);
    border-radius: 5px 5px 0 0;
    padding: 10px;
}

/* Combines .maincontentnew .contentboxinside and .filemovie .contentfilemov */
.maincontentnew .contentboxinside,
.filemovie .contentfilemov {
    background-color: #fff;
    border: 1px solid #494949;
    border-radius: 0 0 5px 5px;
    padding: 10px;
}

/*
|--------------------------------------------------------------------------
| MOVIE/FILE SPECIFIC STYLES
|--------------------------------------------------------------------------
*/
.filemovie .titlefilemovie a {
    color: #fff;
}
.filemovie .titlefilemovie a:hover {
    color: #bd3731;
}

.filemovie .contentfilemov h1.yt.watch-title-container {
    color: #555;
    font-size: 21px;
    margin: 0 auto 20px;
    text-align: center;
}
.filemovie .contentfilemov h1.yt.watch-title-container a {
    color: #555;
}
.filemovie .contentfilemov h1.yt.watch-title-container a:hover {
    color: #bd3731;
}

.filemovie .contentfilemov .filemovdescrp {
    background-color: #fcf8e3;
    border: 1px solid #faebcc;
    border-radius: 5px;
    color: #8a6d3b;
    display: table;
    font-size: 17px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}

/*
|--------------------------------------------------------------------------
| RELATED FILES & TABS
|--------------------------------------------------------------------------
*/
.relatedfiles {
    margin: 25px auto 0;
}
.relatedfiles .relatedfilestitle {
    background-color: #292727;
    background-image: linear-gradient(to bottom, #292727 0%, #161615 100%);
    color: #999;
    display: block;
    height: auto;
    font-family: "Droid Arabic Kufi", Arial, Helvetica, sans-serif;
    font-size: 17px;
    margin: 0 -15px;
    padding: 5px 15px;
    width: auto;
}

.anothertab {
    margin: 20px auto 40px;
}
.anothertab ul.nav.nav-tabs {
    border-bottom: 3px solid #bd3731;
}
.anothertab ul.nav.nav-tabs li {
    margin: 0 auto;
}
.anothertab ul.nav.nav-tabs li a {
    background-color: #3a3a3a;
    border: none;
    border-radius: 5px 5px 0 0;
    color: #fff;
    display: block;
    margin: 0 0 0 10px;
    padding: 10px 15px;
}
.anothertab ul.nav.nav-tabs li.active a {
    background-color: #bd3731;
}
.anothertab .tab-content {
    border: 1px solid #ddd;
    border-radius: 0 0 5px 5px;
    padding: 10px;
}

/*
|--------------------------------------------------------------------------
| FOOTER STYLES
|--------------------------------------------------------------------------
*/
footer {
    background: url(images/footer-bg.png) center center transparent;
    padding: 10px 0;
}
footer .listfoot {
    float: right;
    margin: 5px auto;
}
footer .listfoot ul li {
    border-left: 1px solid #040505;
    display: inline-block;
    font-size: 14px;
    line-height: 15px;
    margin: 0 0 0 10px;
    padding: 0 0 0 10px;
}
footer .listfoot ul li:last-child {
    border-left: none; /* Simplification */
    margin: 0 auto;
    padding: 0;
}
footer .listfoot ul li a {
    color: #828282;
}
footer .listfoot ul li a:hover {
    color: #ffa700;
}
footer .logo {
    float: left;
    margin: 0 auto;
}

/* Second Footer Section */
#footer2 {
    background-color: #000;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}
#footer2,
#footer2 a {
    color: #878787;
}
#footer2 a:hover {
    color: #fff;
}
#footer2 .copyrights {
    float: right;
}
#footer2 .devonil {
    float: left;
}

/*

/*
|--------------------------------------------------------------------------
| GENERAL STYLES & LINKS
|--------------------------------------------------------------------------
*/
.content_box a,
.usercpmneeu a {
    color: #bb3731;
    text-decoration: none;
}
.content_box a:hover,
.usercpmneeu a:hover {
    color: #6c6c6c;
    text-decoration: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
    min-width: 74px;
    margin-right: 0;
    margin-bottom: 3px;
}

h1 {
    color: #fff;
    font-size: 28px;
    font-weight: normal; /* تم تغيير 'none' إلى 'normal' */
    letter-spacing: -1px;
    line-height: 1;
    text-align: center;
}
h1 a {
    color: #fff;
    text-decoration: none;
    text-align: center;
}


/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/
.btn {
    color: #ffffff;
    background: #ce4437;
    padding: 9px 20px 10px 20px;
    text-align: center;
    text-decoration: none;
    border-color: #ce4437;
}
.btn-primary {
    color: #fff;
    background-color: #ce4437;
    border-color: #ce4437;
}
/* دمج قواعد التفاعل (Hover/Active/Focus) */
.btn:active,
.btn:hover,
.btn:focus,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    background-color: #b02c20;
    border-color: #ce4437;
    text-decoration: none;
    color: #fff; /* تم الاحتفاظ بـ color: #fff; من القاعدة الأخيرة */
}


/*
|--------------------------------------------------------------------------
| FILE INFORMATION BLOCK (New/Complex Layout)
|--------------------------------------------------------------------------
*/
#fileinformationall {
    background-color: #ffffff;
    border-radius: 5px;
    margin: 20px auto;
    padding: 10px;
}

#fileinformation {
    /* تم اعتماد خصائص التنسيق المعقدة (الخلفية الشفافة والـ position: relative) */
    background-color: transparent;
    border: 0px solid #cccccc;
    border-radius: 0px;
    padding: 5px;
    color: #ffffff;
    text-align: center;
    margin: 2px auto 0;
    overflow: hidden;
    clear: both;
    position: relative;
}

#breadcrumbs {
    color: #e0aa2f;
}

/* خلفية الصورة والأبعاد */
#fileinformation {
    position: relative;
    overflow: hidden;
}

/* الخلفية */
#fileinformation-bg {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 1;
}

/* طبقة اللون */
#fileinformation-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(
            to left,
            rgba(0, 0, 0, calc(var(--black-overlay, 0.7) + 0.2)) 0%,
            rgba(0, 0, 0, var(--black-overlay, 0.7)) 25%,
            rgba(0, 0, 0, calc(var(--black-overlay, 0.7) * 0.6)) 50%,
            rgba(0, 0, 0, calc(var(--black-overlay, 0.7) * 0.3)) 70%,
            rgba(0, 0, 0, 0) 100%
        ),
        var(--dynamic-overlay, rgba(0,0,0,0.6));
}

/* طبقة الضباب */
#fileinformation-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    backdrop-filter: blur(4px);
}

/* كل المحتوى فوق الخلفية */
.fileinformation-right,
.fileinformation-center {
    position: relative;
    z-index: 5;
}

/* الجزء الأيمن (صورة الغلاف) */
#fileinformation .fileinformation-right {
    display: inline-block;
    vertical-align: top;
    margin: 0px auto;
    text-align: right;
    border-radius: 5px;
    position: relative;
    z-index: 10;
    padding: 0px;
    overflow: hidden;
    width: 260px;
    max-width: 260px;
    min-width: 260px;
}
#fileinformation .fileinformation-right .poster img {
    border-radius: 12px;
    display: inline-block;
    margin: 0px;
    opacity: 1;
}

/* مركز المعلومات */
#fileinformation .fileinformation-center {
    display: inline-block;
    vertical-align: top;
    width: 74%;
    height: 100%;
    margin: 2px auto;
    text-align: right;
    border-radius: 5px;
    padding: 10px;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

/* الجزء الأيسر (تفاصيل إضافية) */
#fileinformation .fileinformation-left {
    /* تم دمج الخصائص الجديدة (Inline-block، خلفية داكنة، Opacity) */
    background-color: #070707;
    display: inline-block;
    vertical-align: top;
    width: 28%;
    height: 366px;
    margin: 0px auto;
    text-align: right;
    border-radius: 5px;
    padding: 10px;
    position: relative;
    z-index: 10;
    opacity: 0.8;
}

/* عنوان الفيلم - H1 داخل #fileinformation */
#fileinformation h1.movietitle {
    overflow: visible;
    border-radius: 0;
    font-size: 28px;
    margin: 0 auto 15px;
    padding: 12px 15px 12px 20px;
    text-align: right;
    color: #2c3e50;
    font-weight: 700;
    line-height: 1.3;
    border-right: 8px solid #ffb52a;
    position: relative;
    font-style: normal;
    transition: all 0.3s ease;
}

#fileinformation h1.movietitle a {
    color: #fff; /* ⬅ اللون الأساسي */
    text-decoration: none;
    transition: color 0.3s ease; /* ⬅ انتقال سلس للون */
}

#fileinformation h1.movietitle a:hover {
    color: #fff; /* ⬅ اللون الذهبي عند الوقوف */
}
/* عنوان الفيلم - داخل الجزء الأيسر */
#fileinformation .fileinformation-left .movietitle {
    background-color: #bd3731;
    border-radius: 5px;
    color: #ffffff;
    font-size: 23px;
    line-height: 1.42857;
    margin: 0 auto 15px;
    padding: 10px;
}

/* عنوان الفيلم - في وضع الجوال */
#fileinformation-mob h1.movietitle {

    /* الشكل */
    border-radius: 10px;
    padding: 14px 12px;
    margin: 5px;
    
    /* خط علوي ذهبي أنيق */
    border-top: 3px solid #c44137;
    
    /* النص */
    color: #f5f5f5;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    line-height: 1.6;
    
    /* تحسين القراءة */
    letter-spacing: 0.5px;
    
    /* عمق خفيف */
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

/* فاصل داخلي خفيف يعطي ترتيب */
#fileinformation-mob h1.movietitle::after {
    display: none;
}

/* تحسين للجوال */
@media (max-width: 480px) {
    #fileinformation-mob h1.movietitle {
        font-size: 16px;
        padding: 12px 10px;
    }
}

/* وصف الفيلم (في المركز) */
#fileinformation .fileinformation-center .moviedescrp {
    color: #fff;
    font-size: 16px;
    line-height: 1.92857;
    margin: 0 0 5px !important;
    padding: 2px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
}
#fileinformation .fileinformation-center .moviedescrp p {
    margin: 2px auto 10px !important;
    max-height: 157px;
    overflow-y: auto;

    /* نعومة التمرير */
    scroll-behavior: smooth;

    /* منع التصاق النص بالسكرول */
    padding-right: 8px;
}

/* تخصيص السكرول (Chrome / Edge / Safari) */
#fileinformation .fileinformation-center .moviedescrp p::-webkit-scrollbar {
    width: 6px;
}

#fileinformation .fileinformation-center .moviedescrp p::-webkit-scrollbar-track {
    background: transparent;
}

#fileinformation .fileinformation-center .moviedescrp p::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

/* عند المرور */
#fileinformation .fileinformation-center .moviedescrp p::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.45);
}

/* Firefox */
#fileinformation .fileinformation-center .moviedescrp p {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}

/* تفاصيل إضافية (في اليسار) - تم دمج الخصائص الجديدة */
#fileinformation .fileinformation-left .moviemoreinfo ul li {
    color: #ffffff; /* تم اعتماد اللون الأبيض */
    display: block;
    font-size: 16px;
    line-height: 1.42857;
    margin: 0 auto 4px; /* تم اعتماد الهامش الأضيق */
    padding-bottom: 6px;
    border-bottom: 1px solid #3a3a3a;
}
#fileinformation .fileinformation-left .moviemoreinfo ul li:last-child {
    margin: 0 auto;
}
#fileinformation .fileinformation-left .moviemoreinfo ul li a {
    color: #e0aa2f; /* تم اعتماد اللون الجديد */
}
#fileinformation .fileinformation-left .moviemoreinfo ul li a:hover {
    color: #ffa700;
}
#fileinformation .fileinformation-left .moviemoreinfo ul li span {
    display: inline-block;
    width: auto;
}

/* عنوان الجزء الأيسر */
#fileinformation .fileinformation-left h4 {
    background: radial-gradient(ellipse at center top, #efce40, #d69325 80%, #b74f17);
    height: 44px;
    margin: 0 auto 15px;
    overflow: hidden;
    border-radius: 5px;
    color: #202020;
    font-size: 18px;
    line-height: 1.42857;
    padding: 10px;
    text-align: center;
}

/* تقييم الملف */
#fileinformation #file_rating_block {
    padding: 10px;
    text-align: center;
    color: #e0aa2f;
    font-size: 18px;
}

/* تذييل الفيلم */
#fileinformation .movie-footer {
    background: radial-gradient(ellipse at center top, #efce40, #d69325 80%, #b74f17);
    margin: 1px auto;
    overflow: hidden;
    border-radius: 5px;
    color: #070707;
    font-size: 14px;
    padding: 8px;
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
}
#fileinformation .movie-footer span {
    background: #070707;
    color: #ffffff;
    display: inline-block;
    padding: 2px;
    border-radius: 5px;
    opacity: 0.8;
}
#fileinformation .movie-footer a,
#fileinformation .movie-footer a:hover,
#fileinformation .movie-footer a:active,
#fileinformation .movie-footer a:focus {
    color: #ffffff;
}

/* شريط التمرير (Breadcrumb) */
#fileinformation-breadcrumb {
    background: url(images/header-bg.png);
    color: #fff;
    font-size: 16px;
    height: 46px;
    margin: 0 auto;
    overflow: hidden;
    padding: 8px 12px;
    text-align: right;
    position: relative;
}
#fileinformation-breadcrumb a {
    color: #fff;
}
#fileinformation-breadcrumb a:hover {
    color: #fff;
}

/* التقييم */
#fileinformation-rating {
    position: absolute;
    top: 8px;
    left: 10px;
    vertical-align: middle;
}

/* الميتا والـ Social */
#fileinformation .movie-meta li {
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
    color: #fff;
    display: inline-block;
    margin-right: 10px;
}
#fileinformation .movie-meta i {
    color: #ffb52a;
}
#fileinformation .movie-meta i.fa-star {
    color: #ffc320;
}
.movie-meta-color {
    color: #ffb52a;
}

/* معلومات الفيلم */
#fileinformation .movie-info {
    vertical-align: top;
}
#fileinformation .movie-info li {
    vertical-align: top;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
    color: #fff;
    display: inline-block;
    font-size: 13px;
    width: 48%;
    margin-top: 0px;
    margin-bottom: 0px;
}
#fileinformation .movie-info i,
#fileinformation .movie-info span.movie-label {
    color: #fff;
    font-size: 15px;
}

/* السوشيال ميديا */
#fileinformation .social-media {
    position: absolute;
    top: 2px;
    left: 2px;
}
#fileinformation .social-media ul {
    text-align: center;
}
#fileinformation .social-media ul li {
    border-radius: 50%;
    display: inline-block;
    height: 50px;
    width: 50px;
    vertical-align: top;
}
li.social-facebook {
    background: #3b5999;
}
li.social-twitter {
    background: #55acee;
}
li.social-google {
    background: #dd4b39;
}
li.social-imdb {
    background: #ffc104;
}
#fileinformation .social-media ul li a {
    border-radius: 3px;
    color: white;
    display: block;
    font-size: 22px;
    font-weight: bold;
    line-height: 50px;
    outline: 0;
}
#fileinformation .social-media ul li.social-imdb a {
    color: #000100;
    font-size: 14px;
}

/* زر التشغيل */
#fileinformation-play {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 64px;
    cursor: pointer;
    margin: auto;
    border: 0px solid #ffffff;
    width: 100px;
    height: 100px;
    z-index: 99;
    text-align: center;
    pointer-events: none;
}
#fileinformation .play-vid {
    /* تغيير التموضع من absolute إلى relative */
    position: relative; 
    
    /* إلغاء القيم التي كانت تسبب التداخل */
    bottom: auto; 
    left: auto;
    
    /* التأكد من أنها تأخذ العرض الكامل لتكون في سطر منفصل */
    width: 100%; 
    display: flex; /* حافظنا على الـ flex للتنسيق الداخلي */
    flex-wrap: wrap;
    justify-content: center;
    
    margin: 5px 0; /* إضافة مساحة علوية وسفلية لضمان عدم الالتصاق */
    padding: 10px;
}
#fileinformation .play-vid i {
    font-size: 37px;
    vertical-align: middle;
    margin-top: 2px;
}

/*
|--------------------------------------------------------------------------
| FILE SERVER VIEW (Tabs)
|--------------------------------------------------------------------------
*/
#fileserverview {
    /* تم اعتماد الخصائص الأخيرة */
    background-color: #ffffff;
    border-radius: 5px;
    margin: 10px auto 0;
    padding: 15px;
}
#fileserverview ul.nav.nav-tabs {
    border: none;
    float: none;
    margin: 0 auto 10px;
    text-align: center;
}
#fileserverview ul.nav.nav-tabs li {
    display: inline-block;
    margin: 3px 3px;
    top: 3px;
    float: none;
}
#fileserverview ul.nav.nav-tabs li a {
    /* تم اعتماد ألوان #c13832 من التكرار الأخير */
    background-color: #c13832;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 5px;
    box-shadow: 0 0 23px 1px rgba(0, 0, 0, 0.08) inset;
    color: #ffffff;
    font-size: 16px;
    margin: 0 auto;
    padding: 5px 20px;
    text-decoration: none;
    transition: all 0.3s ease 0s;
}
#fileserverview ul.nav.nav-tabs li a:hover {
    background-color: #c13832; /* تم اعتماد هذا اللون */
}
#fileserverview ul.nav.nav-tabs li.active a {
    background-color: #242424; /* تم اعتماد هذا اللون */
}
#fileserverview iframe {
    display: block;
    margin: 0 auto;
}

/*
|--------------------------------------------------------------------------
| MOVIE ITEMS (CARDS)
|--------------------------------------------------------------------------
*/
#movies-items {
    text-align: center;
    padding: 2px;
}


#movies-items .movie-item {
    width: 229px;
    aspect-ratio: 195 / 278;  /* نسبة الصورة الأصلية */
    border: 2px solid #21252d;
    border-radius: 12px;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.75);
    display: inline-block;
    margin: 2px;
    overflow: hidden;
    position: relative;
}

/* الصورة داخل البطاقة */
#movies-items .movie-item .image .img2 {
    display: none !important;
}
#movies-items .movie-item .image .img1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;    /* يحافظ على نسبة الصورة الأصلية ويملأ الحاوية */
    overflow: hidden;
    display: block;
    background-position: center;
    border-radius: 12px;
    transition: transform 0.6s ease, filter 0.6s ease;
}

/* الطبقة الشفافة السوداء على كامل الصورة */
#movies-items .movie-item .image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 12px;
    z-index: 1;
    pointer-events: none;
}
#movies-items .movie-item:hover .image::after {
    opacity: 1;
}

.movie-ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 5px;
    font-weight: bold;
    z-index: 3;
}

/* التقييم */
#movies-items .movie-ratting {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    font-weight: 700;
    right: 10px;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease 0s;
    z-index: 3;
}
#movies-items .movie-item:hover .movie-ratting {
    transform: translateY(0);
    opacity: 1;
}

/* التصنيف */
#movies-items .movie-category {
    background: #f1b840;
    display: inline-block;
    margin-right: 8px;
    color: #000;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.58);
    font-size: 12px;
    font-weight: 700;
    left: 5px;
    padding: 2px 6px;
    position: relative;
    top: 140px;
    transform: translate(-250px, 0px);
    transition: all 0.3s ease 0s;
    z-index: 3;
}
#movies-items .movie-item:hover .movie-category {
    transform: translate(0px);
}

/* اسم الفيلم */
#movies-items .movie-item .movie-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 14px;
    padding: 8px;
    text-align: center;
    opacity: 1;
    transform: translateY(100%);
    transition: all 0.4s ease;
    z-index: 4;
}
#movies-items .movie-item:hover .movie-title {
    opacity: 1;
    transform: translateY(0);
}

/*
|--------------------------------------------------------------------------
| MEDIA QUERIES
|--------------------------------------------------------------------------
*/

/* شاشات Tablet وأصغر (max-width: 768px) */
@media screen and (max-width: 768px) {
    #fileinformation {
        /* قد تحتاج إلى إزالة بعض الخصائص الخاصة بأجهزة سطح المكتب هنا */
    }
    #fileinformation .fileinformation-right {
        clear: both;
        width: 100%;
        text-align: center;
        max-width: none; /* لإلغاء القيمة الثابتة 260px */
        min-width: 0;
    }
    #fileinformation .movietitle {
        font-size: 14px;
        text-align: center;
    }
    #fileinformation .fileinformation-center {
        clear: both;
        width: 100%;
        height: auto;
    }
    #fileinformation .fileinformation-left {
        clear: both;
        width: 100%;
        height: auto; /* تم تعديل الارتفاع ليصبح تلقائيًا */
    }
    #fileinformation .fileinformation-left .movietitle {
        font-size: 12px;
    }
    #fileinformation .fileinformation-center .moviedescrp {
        overflow: auto;
        font-size: 12px;
    }
    #fileinformation .fileinformation-center .moviedescrp p {
        margin: 0 !important;
        max-height: inherit;
    }
    #fileinformation .movie-info li {
        display: block;
        width: 100%;
        margin-top: 5px;
    }
    #fileserverview ul.nav.nav-tabs li {
        display: block;
        margin: 0 auto 10px;
    }
    .anothertab ul.nav.nav-tabs li {
        float: none;
    }
    .anothertab ul.nav.nav-tabs li a {
        border-radius: 5px;
        margin: 0 auto 10px;
    }
    /* #fileinformation .fileinformation-left .moviemoreinfo ul li span { ... (لا يوجد تغيير هنا) } */
}

/* شاشات Mobile وأصغر (max-width: 480px) */
@media screen and (max-width: 480px) {
    /* تم دمج جميع قواعد 480px هنا */
    #fileinformation .fileinformation-right {
        float: none;
        margin: 0 auto 10px;
        width: auto;
    }
    #fileinformation .fileinformation-left {
        float: none;
        width: 100%;
    }
    #fileinformation .fileinformation-left .movietitle {
        font-size: 16px;
    }
    #fileinformation .fileinformation-left .moviemoreinfo ul li span {
        display: block;
        margin: 0 auto 7px;
        width: auto;
    }
    #fileserverview ul.nav.nav-tabs li {
        display: block;
        margin: 0 auto 10px;
    }
    .anothertab ul.nav.nav-tabs li {
        float: none;
    }
    .anothertab ul.nav.nav-tabs li a {
        border-radius: 5px;
        margin: 0 auto 10px;
    }
    /*
        ملاحظة: بعض القواعد أعلاه (مثل #fileinformation .fileinformation-right)
        ستحل محل القواعد المماثلة في @media 768px إذا تم تطبيق كليهما.
    */
}

/*
|--------------------------------------------------------------------------
| LIKES & RATING
|--------------------------------------------------------------------------
*/
.fileinformation-ratting {
    position: absolute;
    top: 5px;
    right: 5px;
}

/* --- 1. التنسيقات العامة --- */
/*
|--------------------------------------------------------------------------
| TRAILER & PLAYER
|--------------------------------------------------------------------------
*/
.trailer-botton {
    width: 150px;
    height: 33px;
    background: #c13832;
    border-radius: 25px;
    z-index: 9999999;
    cursor: pointer;
    font-size: 14px;
    border: 0px solid #c13832;
    color: #fff;
    text-align: center;
    font-weight: 700;
    padding: 1px; /* تم اعتماد هذه القيمة وإزالة padding-top: 7px; المتعارضة */
    margin: 8px auto;
}

#trailer-player {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, #151515, rgba(0, 0, 0, 0.12));
    text-align: center;
    z-index: 99999;
}

#trailer-player iframe {
    position: fixed;
    width: 800px;
    height: 400px;
    top: 50%;
    right: 50%;
    margin-right: -400px;
    margin-top: -200px;
    z-index: 999999;
}

/*
|--------------------------------------------------------------------------
| MOVIE ITEMS (CARDS)
|--------------------------------------------------------------------------
*/
#movies-items .movie-title {
    background: linear-gradient(rgba(70, 43, 93, 0), rgba(0, 0, 0, 0.89), #000);
    bottom: 0;
    font-size: 14px !important;
    font-weight: 700;
    left: 0;
    margin: 0px;
    padding: 4px;
    position: absolute;
    text-align: center;
    transition: all 0.3s ease 0s;
    width: 100%;
    color: #fff;
    line-height: normal;
}
#movies-items .movie-description {
    color: #f4f4f4;
    font-size: 12px;
    height: 88px;
    line-height: 24px;
    opacity: 0;
    overflow: hidden;
    padding: 12px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 160px;
    transform: rotate(20deg);
    transform-origin: left bottom 0;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: 5;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    background-color: rgba(0, 0, 0, 0);
    border-radius: 6px;
}
#movies-items .movie-item:hover .movie-description {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    background-color: rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease 0.2s;
}

/*
|--------------------------------------------------------------------------
| HEADER, NAVIGATION & INDEX BLOCKS
|--------------------------------------------------------------------------
*/
.title {
    text-align: center;
}
header {
    background: #fff;
    height: 80px;
    padding: 0 20px;
    text-align: center;
}
header .logo {
    float: none;
    line-height: 80px;
    margin: 0 auto;
    overflow: hidden;
}
header .logo img {
    max-width: 99%;
}
nav {
  background: linear-gradient(#424141, #292929, #000);
    border-radius: 0px;
    padding: 5px;
}

#user-area .login {
    margin: 20px;
    border-radius: 3px;
    background-color: #000000;
    color: #d0d0d0;
    font-size: 12px;
    padding: 3px 6px;
    display: inline-block;
}
header .col {
    display: inline-block;
    vertical-align: middle;
    width: 32%;
    text-align: center;
    padding: 5px;
}
header .col-border {
    border-right: 1px solid #efefef;
    border-left: 1px solid #efefef;
}
header .search-input {
    background-color: #fff;
    border: 1px solid #00a2ff;
    color: #a7a7a7;
    width: 60%;
}
header .search-btn {
    background: linear-gradient(#e35049, #bd3731, #a32e29);
    border: none;
    border-radius: 20px;
    color: #000;
    padding: 7px 30px;
    cursor: pointer;
    font-size: 14px;
    margin: auto;
}
#user-setting a {
    display: inline-block;
    border: 1px solid #c9c9c9;
    background-color: #f4f4f4;
    color: #575757;
    width: 32px;
    height: 32px;
    padding: 2px;
    border-radius: 50%;
    vertical-align: middle;
}
#user-setting a:hover {
    border: 1px solid #ce4437;
    background-color: #ce4437;
    color: #fff;
}

/* ==================== الكتلة الرئيسية للأفلام ==================== */
#index-movies-block {
    background-color: #F4F5F5;
    padding: 1px;
    padding-bottom: 10px;
    vertical-align: middle;
}

/* ==================== آخر فيلم تمت إضافته ==================== */
#index-last-movie {
    display: inline-block;
    background-color: #F4F5F5;
    padding: 5px;
    vertical-align: top;
    width: 35%;
}

#index-last-movie h3 {
    background-color: #F4F5F5;
    padding: 10px;
    margin-top: 0;
    color: #bd3731;
    text-align: right;
    border-bottom: 1px solid #be4036;
    border-radius: 0;
    vertical-align: middle;
}

.last-movie-row {
    border: 0px solid #5DB255;
    clear: both;
    padding: 1px;
    position: relative;
    vertical-align: middle;
}

.last-movie-row:hover {
    background-color: #E0E2E2;
}

.last-movie-info {
    position: absolute;
    top: 4px;
    left: 0;
    z-index: 11;
    overflow: hidden;
}

.last-movie-view {
    background: linear-gradient(#e35049, #bd3731, #a32e29);
    color: #fff;
    padding: 1px 2px;
    margin: 5px;
    display: inline-block;
    float: left;
    border-radius: 4px;
    vertical-align: middle;
}

.last-movie-view:hover {
    color: #fff;
    text-decoration: none;
}

.last-movie-ribbon {
    border: 1px solid #F4F5F5;
    background-color: #E0E0E0;
    color: #7C7C7C;
    padding: 1px 2px;
    margin: 5px;
    display: inline-block;
    float: left;
    border-radius: 4px;
    vertical-align: middle;
}

.last-movie-title {
    font-size: 14px;
    padding: 1px 2px;
    margin: 5px;
    display: inline-block;
    color: #320000;
    max-width: 90%;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    z-index: 10;
}

.last-movie-title:hover {
    color: #dd0000;
}

.last-movie-row:hover .last-movie-ribbon {
    border: 1px solid #F4F5F5;
    background-color: #8d1d83;
    color: #fff;
}

.last-movie-id {
    display: inline-block;
    border: 1px solid #C9C9C9;
    background-color: #F4F4F4;
    color: #575757;
    width: 32px;
    height: 32px;
    padding: 2px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    vertical-align: middle;
}

.last-movie-row:hover .last-movie-id {
    border: 1px solid #CCCCCC;
    background-color: #02a2ff;
    color: #fff;
}

/* ==================== السلايدر ==================== */
#index-slider-movie {
    display: inline-block;
    background-color: #F4F5F5;
    padding: 5px;
    vertical-align: middle;
    width: 64%;
}

#index-slider-movie h3 {
    background-color: #F4F5F5;
    padding: 10px;
    margin-top: 0;
    color: #bd3731;
    text-align: right;
    border-bottom: 1px solid #be4036;
    border-radius: 0;
    vertical-align: middle;
}

/* ==================== استجابات الشاشة ==================== */
@media screen and (max-width: 1024px) {
    /* تم إلغاء تنشيط التعديلات على العروض */
    /* #index-last-movie { width: 49%; } */
    /* #index-slider-movie { width: 49%; } */
}

@media screen and (max-width: 768px) {
    header {
        height: auto;
    }

    header .col {
        display: block;
        width: 100%;
    }

    header .col-border {
        border: 0px solid #EFEFEF;
    }

    #index-last-movie {
        width: 100%;
    }

    #index-slider-movie {
        width: 100%;
    }
}

/* ==================== محتويات السلايدر ==================== */
#index-slider-movie .item {
    background-color: #000;
    color: #fff;
    position: relative;
    height: 100%;
}

#index-slider-movie a {
    color: #fff;
}

#index-slider-movie a:hover {
    color: #fff;
}

#index-slider-movie .slider-movie-bg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: #000;
    color: #fff;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 380px;
    z-index: 1;
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
    opacity: 0.5;
}

#index-slider-movie .slider-movie-content {
    z-index: 2;
    position: relative;
    height: 100%;
    text-align: right;
    overflow: hidden;
    border-radius: 20px;
}

#index-slider-movie .carousel-inner {
    height: 380px;
    background-color: #000;
    color: #fff;
    border-radius: 20px;
}

#index-slider-movie .slider-movie-image {
    border: 2px solid #fff;
    width: 180px;
    vertical-align: middle;
    border-radius: 10px;
}

#index-slider-movie .carousel-caption {
    text-align: right;
    left: 10px;
    right: 10px;
    padding-bottom: 4px;
}

#index-slider-movie .slider-movie-content h3 {
    margin: 1px;
    padding: 2px;
    border: 0px solid red;
    background-color: transparent;
    color: #fff;
}

#index-slider-movie .carousel-caption p {
    margin: 15px;
    padding: 0px;
    border: 0px solid red;
    background-color: transparent;
    color: #fff;
    height: 50px;
    overflow: hidden;
}

#index-slider-movie .carousel-control {
    z-index: 99999;
}

#index-slider-movie .carousel-control.left {
    left: 0;
    right: auto;
}

#index-slider-movie .carousel-info {
    padding: 10px;
    color: #A8A8A8;
    text-align: right;
}

.carousel-info-tags {
    padding: 5px;
    margin-bottom: 10px;
}

#index-slider-movie .carousel-info-tags a {
    display: inline-block;
    padding: 0px 3px;   /* أصغر قليلاً */
    margin: 2px;
    font-size: 12px;    /* تصغير الخط */
    width: 75px;        /* عرض أصغر */
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
background: linear-gradient(135deg, #ff6666, #800000);
transition: all 0.25s ease;
}


.carousel-info-col-1 {
    display: inline-block;
    padding: 2px;
    text-align: right;
    vertical-align: top;
}

.carousel-info-col-2 {
    display: inline-block;
    padding: 2px;
    padding-top: 20px;
    text-align: right;
    vertical-align: top;
}

.carousel-info-views {
    display: inline-block;
    padding: 5px;
    text-align: right;
    vertical-align: middle;
}

.carousel-info-ratting {
    margin-top: 5px;
    display: inline-block;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
}

/* ==================== تأثير التلاشي (carousel-fade) ==================== */
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 4s;
    transition-timing-function: linear;
}

.carousel-fade .carousel-inner .active {
    opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-control {
    z-index: 2;
}
/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}
/* 4helal - 20-01-2017
  Optimized by Gemini:
  - Removed redundant vendor prefixes for 'transform' and 'box-sizing'.
  - Cleaned up selectors for better readability and slightly smaller size.
  - The core functionality remains identical.
*/

/* --- Percentage Circle Styles (c100) --- */

.rect-auto,
.c100.p51 .slice, .c100.p52 .slice, .c100.p53 .slice, .c100.p54 .slice, .c100.p55 .slice,
.c100.p56 .slice, .c100.p57 .slice, .c100.p58 .slice, .c100.p59 .slice, .c100.p60 .slice,
.c100.p61 .slice, .c100.p62 .slice, .c100.p63 .slice, .c100.p64 .slice, .c100.p65 .slice,
.c100.p66 .slice, .c100.p67 .slice, .c100.p68 .slice, .c100.p69 .slice, .c100.p70 .slice,
.c100.p71 .slice, .c100.p72 .slice, .c100.p73 .slice, .c100.p74 .slice, .c100.p75 .slice,
.c100.p76 .slice, .c100.p77 .slice, .c100.p78 .slice, .c100.p79 .slice, .c100.p80 .slice,
.c100.p81 .slice, .c100.p82 .slice, .c100.p83 .slice, .c100.p84 .slice, .c100.p85 .slice,
.c100.p86 .slice, .c100.p87 .slice, .c100.p88 .slice, .c100.p89 .slice, .c100.p90 .slice,
.c100.p91 .slice, .c100.p92 .slice, .c100.p93 .slice, .c100.p94 .slice, .c100.p95 .slice,
.c100.p96 .slice, .c100.p97 .slice, .c100.p98 .slice, .c100.p99 .slice, .c100.p100 .slice {
  clip: rect(auto, auto, auto, auto);
}

.pie,
.c100 .bar,
.c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill,
.c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill,
.c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill,
.c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill,
.c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill,
.c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill,
.c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill,
.c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill,
.c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill,
.c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill {
  position: absolute;
  border: 0.08em solid #ffbe00;
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 50%;
  transform: rotate(180deg);
}

.c100 {
  position: relative;
  font-size: 120px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  float: none;
  margin: 0;
  background-color: transparent;
  display: inline-block;
}

.c100 *,
.c100 *:before,
.c100 *:after {
  box-sizing: content-box;
}

.c100.center {
  float: none;
  margin: 0 auto;
}

.c100.big { font-size: 240px; }
.c100.small { font-size: 80px; }

.c100 > span {
  position: absolute;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  line-height: 3.33em;
  font-size: 0.3em;
  color: #ffbe00;
  display: block;
  text-align: center;
  white-space: nowrap;
}

.c100:after {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: " ";
  border: 10px #B2A357 solid;
  border-radius: 50%;
  background-color: transparent;
  width: 1em;
  height: 1em;
  text-shadow: none;
  opacity: 0.4;
}

.c100-small:after {
  border-width: 5px;
}

.c100 .slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}
/* --- الأحمر من 0 إلى 45 --- */
.c100.p1 .bar, .c100.p2 .bar, .c100.p3 .bar, .c100.p4 .bar, .c100.p5 .bar,
.c100.p6 .bar, .c100.p7 .bar, .c100.p8 .bar, .c100.p9 .bar, .c100.p10 .bar,
.c100.p11 .bar, .c100.p12 .bar, .c100.p13 .bar, .c100.p14 .bar, .c100.p15 .bar,
.c100.p16 .bar, .c100.p17 .bar, .c100.p18 .bar, .c100.p19 .bar, .c100.p20 .bar,
.c100.p21 .bar, .c100.p22 .bar, .c100.p23 .bar, .c100.p24 .bar, .c100.p25 .bar,
.c100.p26 .bar, .c100.p27 .bar, .c100.p28 .bar, .c100.p29 .bar, .c100.p30 .bar,
.c100.p31 .bar, .c100.p32 .bar, .c100.p33 .bar, .c100.p34 .bar, .c100.p35 .bar,
.c100.p36 .bar, .c100.p37 .bar, .c100.p38 .bar, .c100.p39 .bar, .c100.p40 .bar,
.c100.p41 .bar, .c100.p42 .bar, .c100.p43 .bar, .c100.p44 .bar, .c100.p45 .bar,
.c100.p1 .fill, .c100.p2 .fill, .c100.p3 .fill, .c100.p4 .fill, .c100.p5 .fill,
.c100.p6 .fill, .c100.p7 .fill, .c100.p8 .fill, .c100.p9 .fill, .c100.p10 .fill,
.c100.p11 .fill, .c100.p12 .fill, .c100.p13 .fill, .c100.p14 .fill, .c100.p15 .fill,
.c100.p16 .fill, .c100.p17 .fill, .c100.p18 .fill, .c100.p19 .fill, .c100.p20 .fill,
.c100.p21 .fill, .c100.p22 .fill, .c100.p23 .fill, .c100.p24 .fill, .c100.p25 .fill,
.c100.p26 .fill, .c100.p27 .fill, .c100.p28 .fill, .c100.p29 .fill, .c100.p30 .fill,
.c100.p31 .fill, .c100.p32 .fill, .c100.p33 .fill, .c100.p34 .fill, .c100.p35 .fill,
.c100.p36 .fill, .c100.p37 .fill, .c100.p38 .fill, .c100.p39 .fill, .c100.p40 .fill,
.c100.p41 .fill, .c100.p42 .fill, .c100.p43 .fill, .c100.p44 .fill, .c100.p45 .fill {
  border-color: #e60000 !important;
}

/* --- الأصفر من 46 إلى 69 --- */
.c100.p46 .bar, .c100.p47 .bar, .c100.p48 .bar, .c100.p49 .bar, .c100.p50 .bar,
.c100.p51 .bar, .c100.p52 .bar, .c100.p53 .bar, .c100.p54 .bar, .c100.p55 .bar,
.c100.p56 .bar, .c100.p57 .bar, .c100.p58 .bar, .c100.p59 .bar, .c100.p60 .bar,
.c100.p61 .bar, .c100.p62 .bar, .c100.p63 .bar, .c100.p64 .bar, .c100.p65 .bar,
.c100.p66 .bar, .c100.p67 .bar, .c100.p68 .bar, .c100.p69 .bar,
.c100.p46 .fill, .c100.p47 .fill, .c100.p48 .fill, .c100.p49 .fill, .c100.p50 .fill,
.c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill,
.c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill,
.c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill,
.c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill {
  border-color: #ffbe00 !important;
}

/* --- الأخضر من 70 إلى 100 --- */
.c100.p70 .bar, .c100.p71 .bar, .c100.p72 .bar, .c100.p73 .bar, .c100.p74 .bar, .c100.p75 .bar,
.c100.p76 .bar, .c100.p77 .bar, .c100.p78 .bar, .c100.p79 .bar, .c100.p80 .bar,
.c100.p81 .bar, .c100.p82 .bar, .c100.p83 .bar, .c100.p84 .bar, .c100.p85 .bar,
.c100.p86 .bar, .c100.p87 .bar, .c100.p88 .bar, .c100.p89 .bar, .c100.p90 .bar,
.c100.p91 .bar, .c100.p92 .bar, .c100.p93 .bar, .c100.p94 .bar, .c100.p95 .bar,
.c100.p96 .bar, .c100.p97 .bar, .c100.p98 .bar, .c100.p99 .bar, .c100.p100 .bar,
.c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill,
.c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill,
.c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill,
.c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill,
.c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill,
.c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill {
  border-color: #00c04b !important;
}
.c100 span {
  color: #fff !important;
}

/* NOTE: The following .p1 to .p100 classes are required for the percentage circle animation.
  Each class sets a unique 'transform: rotate()' value. They cannot be further combined
  in pure CSS without changing the HTML or using JavaScript/SASS.
  Redundant prefixes have been removed for a smaller file size.
*/
.c100.p1 .bar { transform: rotate(3.6deg); }
.c100.p2 .bar { transform: rotate(7.2deg); }
.c100.p3 .bar { transform: rotate(10.8deg); }
.c100.p4 .bar { transform: rotate(14.4deg); }
.c100.p5 .bar { transform: rotate(18deg); }
.c100.p6 .bar { transform: rotate(21.6deg); }
.c100.p7 .bar { transform: rotate(25.2deg); }
.c100.p8 .bar { transform: rotate(28.8deg); }
.c100.p9 .bar { transform: rotate(32.4deg); }
.c100.p10 .bar { transform: rotate(36deg); }
.c100.p11 .bar { transform: rotate(39.6deg); }
.c100.p12 .bar { transform: rotate(43.2deg); }
.c100.p13 .bar { transform: rotate(46.8deg); }
.c100.p14 .bar { transform: rotate(50.4deg); }
.c100.p15 .bar { transform: rotate(54deg); }
.c100.p16 .bar { transform: rotate(57.6deg); }
.c100.p17 .bar { transform: rotate(61.2deg); }
.c100.p18 .bar { transform: rotate(64.8deg); }
.c100.p19 .bar { transform: rotate(68.4deg); }
.c100.p20 .bar { transform: rotate(72deg); }
.c100.p21 .bar { transform: rotate(75.6deg); }
.c100.p22 .bar { transform: rotate(79.2deg); }
.c100.p23 .bar { transform: rotate(82.8deg); }
.c100.p24 .bar { transform: rotate(86.4deg); }
.c100.p25 .bar { transform: rotate(90deg); }
.c100.p26 .bar { transform: rotate(93.6deg); }
.c100.p27 .bar { transform: rotate(97.2deg); }
.c100.p28 .bar { transform: rotate(100.8deg); }
.c100.p29 .bar { transform: rotate(104.4deg); }
.c100.p30 .bar { transform: rotate(108deg); }
.c100.p31 .bar { transform: rotate(111.6deg); }
.c100.p32 .bar { transform: rotate(115.2deg); }
.c100.p33 .bar { transform: rotate(118.8deg); }
.c100.p34 .bar { transform: rotate(122.4deg); }
.c100.p35 .bar { transform: rotate(126deg); }
.c100.p36 .bar { transform: rotate(129.6deg); }
.c100.p37 .bar { transform: rotate(133.2deg); }
.c100.p38 .bar { transform: rotate(136.8deg); }
.c100.p39 .bar { transform: rotate(140.4deg); }
.c100.p40 .bar { transform: rotate(144deg); }
.c100.p41 .bar { transform: rotate(147.6deg); }
.c100.p42 .bar { transform: rotate(151.2deg); }
.c100.p43 .bar { transform: rotate(154.8deg); }
.c100.p44 .bar { transform: rotate(158.4deg); }
.c100.p45 .bar { transform: rotate(162deg); }
.c100.p46 .bar { transform: rotate(165.6deg); }
.c100.p47 .bar { transform: rotate(169.2deg); }
.c100.p48 .bar { transform: rotate(172.8deg); }
.c100.p49 .bar { transform: rotate(176.4deg); }
.c100.p50 .bar { transform: rotate(180deg); }
.c100.p51 .bar { transform: rotate(183.6deg); }
.c100.p52 .bar { transform: rotate(187.2deg); }
.c100.p53 .bar { transform: rotate(190.8deg); }
.c100.p54 .bar { transform: rotate(194.4deg); }
.c100.p55 .bar { transform: rotate(198deg); }
.c100.p56 .bar { transform: rotate(201.6deg); }
.c100.p57 .bar { transform: rotate(205.2deg); }
.c100.p58 .bar { transform: rotate(208.8deg); }
.c100.p59 .bar { transform: rotate(212.4deg); }
.c100.p60 .bar { transform: rotate(216deg); }
.c100.p61 .bar { transform: rotate(219.6deg); }
.c100.p62 .bar { transform: rotate(223.2deg); }
.c100.p63 .bar { transform: rotate(226.8deg); }
.c100.p64 .bar { transform: rotate(230.4deg); }
.c100.p65 .bar { transform: rotate(234deg); }
.c100.p66 .bar { transform: rotate(237.6deg); }
.c100.p67 .bar { transform: rotate(241.2deg); }
.c100.p68 .bar { transform: rotate(244.8deg); }
.c100.p69 .bar { transform: rotate(248.4deg); }
.c100.p70 .bar { transform: rotate(252deg); }
.c100.p71 .bar { transform: rotate(255.6deg); }
.c100.p72 .bar { transform: rotate(259.2deg); }
.c100.p73 .bar { transform: rotate(262.8deg); }
.c100.p74 .bar { transform: rotate(266.4deg); }
.c100.p75 .bar { transform: rotate(270deg); }
.c100.p76 .bar { transform: rotate(273.6deg); }
.c100.p77 .bar { transform: rotate(277.2deg); }
.c100.p78 .bar { transform: rotate(280.8deg); }
.c100.p79 .bar { transform: rotate(284.4deg); }
.c100.p80 .bar { transform: rotate(288deg); }
.c100.p81 .bar { transform: rotate(291.6deg); }
.c100.p82 .bar { transform: rotate(295.2deg); }
.c100.p83 .bar { transform: rotate(298.8deg); }
.c100.p84 .bar { transform: rotate(302.4deg); }
.c100.p85 .bar { transform: rotate(306deg); }
.c100.p86 .bar { transform: rotate(309.6deg); }
.c100.p87 .bar { transform: rotate(313.2deg); }
.c100.p88 .bar { transform: rotate(316.8deg); }
.c100.p89 .bar { transform: rotate(320.4deg); }
.c100.p90 .bar { transform: rotate(324deg); }
.c100.p91 .bar { transform: rotate(327.6deg); }
.c100.p92 .bar { transform: rotate(331.2deg); }
.c100.p93 .bar { transform: rotate(334.8deg); }
.c100.p94 .bar { transform: rotate(338.4deg); }
.c100.p95 .bar { transform: rotate(342deg); }
.c100.p96 .bar { transform: rotate(345.6deg); }
.c100.p97 .bar { transform: rotate(349.2deg); }
.c100.p98 .bar { transform: rotate(352.8deg); }
.c100.p99 .bar { transform: rotate(356.4deg); }
.c100.p100 .bar { transform: rotate(360deg); }

.c100:hover {
  cursor: default;
}
.c100:hover > span {
  width: 3.33em;
  line-height: 3.33em;
  font-size: 0.3em;
  color: #ffbe00;
}
.c100:hover:after {
 /*  top: 0.04em;
  left: 0.04em;
  width: 0.92em;
  height: 0.92em; */
}
.c100.dark {
  background-color: #777777;
}
.c100.dark .bar,
.c100.dark .fill {
  border-color: #c6ff00 !important;
}
.c100.dark > span {
  color: #777777;
}
.c100.dark:after {
  background-color: #666666;
}
.c100.dark:hover > span {
  color: #c6ff00;
}
.c100.green .bar,
.c100.green .fill {
  border-color: #4db53c !important;
}
.c100.green:hover > span {
  color: #4db53c;
}
.c100.green.dark .bar,
.c100.green.dark .fill {
  border-color: #5fd400 !important;
}
.c100.green.dark:hover > span {
  color: #5fd400;
}
.c100.orange .bar,
.c100.orange .fill {
  border-color: #dd9d22 !important;
}
.c100.orange:hover > span {
  color: #dd9d22;
}
.c100.orange.dark .bar,
.c100.orange.dark .fill {
  border-color: #e08833 !important;
}
.c100.orange.dark:hover > span {
  color: #e08833;
}
.c100{
  text-shadow:none;
  color:#ffbe00;
}
/****************/
/*
|--------------------------------------------------------------------------
| ACTOR INFO & BROADCAST STATUS
|--------------------------------------------------------------------------
*/
.actor-profile-balanced {
    width: 100%;
    background: #fff;
    border-bottom: 2px solid #cd4437;
    margin: 0 0 20px 0;
}

.profile-container-balanced {
    max-width: 1000px;
    margin: 0 auto;
    padding: 25px 20px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
}

/* الجانب الأيسر - الصورة والإحصائيات */
.left-side-balanced {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.actor-portrait-balanced {
    text-align: center;
}

.actor-portrait-balanced img {
    width: 200px;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    border: 3px solid #cd4437;
    box-shadow: 0 8px 20px rgba(205, 68, 55, 0.2);
}

.stats-balanced {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.stat-balanced {
    text-align: center;
    padding: 12px 15px;
    background: #fff5f4;
    border-radius: 10px;
    border: 1px solid #ffdedb;
    min-width: 80px;
}

.stat-number {
    font-size: 1.5em;
    font-weight: 800;
    color: #cd4437;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.8em;
    color: #7a2c25;
    font-weight: 600;
}

/* الجانب الأيمن - المعلومات */
.right-side-balanced {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.actor-header-balanced {
    text-align: right;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.actor-name-balanced {
    font-size: 2em;
    font-weight: 800;
    color: #cd4437;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.profession-tag {
    display: inline-block;
    background: #cd4437;
    color: white;
    padding: 6px 15px;
    border-radius: 15px;
    font-size: 0.85em;
    font-weight: 600;
}

.info-grid-balanced {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-item-balanced {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    height: 50px;
    transition: all 0.3s ease;
}

.info-item-balanced:hover {
    background: #fff5f4;
    border-color: #ffdedb;
    transform: translateX(-5px);
}

.info-icon {
    font-size: 1.2em;
    flex-shrink: 0;
}

.info-content-balanced {
    flex: 1;
    text-align: right;
}

.info-label {
    font-size: 0.8em;
    color: #cd4437;
    font-weight: 600;
    margin-bottom: 3px;
}

.info-value {
    font-size: 0.9em;
    color: #333;
    font-weight: 500;
}

/* السيرة الذاتية المتوازنة */
.bio-section-balanced {
    margin-top: 10px;
}

.bio-text-balanced {
    color: #555;
    line-height: 1.6;
    text-align: right;
    font-size: 0.9em;
    max-height: 80px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease;
}

.bio-text-balanced::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(transparent, #fff);
    transition: opacity 0.3s ease;
}

.bio-text-balanced.expanded {
    max-height: 400px;
}

.bio-text-balanced.expanded::after {
    opacity: 0;
}

.bio-toggle-balanced {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #cd4437;
    border: 1px solid #cd4437;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.3s ease;
}

.bio-toggle-balanced:hover,
.bio-toggle-balanced.active {
    background: #cd4437;
    color: white;
}

.bio-toggle-balanced svg {
    transition: transform 0.3s ease;
}

/* التصميم المتجاوب مع المحافظة على التوازن */
@media (max-width: 768px) {
    .profile-container-balanced {
        grid-template-columns: 1fr;
        gap: 25px;
        text-align: center;
        padding: 20px 15px;
    }
    
    .left-side-balanced {
        order: 2;
    }
    
    .right-side-balanced {
        order: 1;
    }
    
    .actor-portrait-balanced img {
        width: 180px;
        height: 220px;
    }
    
    .actor-name-balanced {
        font-size: 1.6em;
    }
    
    .info-item-balanced {
        justify-content: center;
        text-align: center;
        height: 45px;
    }
    
    .info-content-balanced {
        text-align: center;
    }
    
    .stats-balanced {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .profile-container-balanced {
        padding: 15px 12px;
        gap: 20px;
    }
    
    .actor-portrait-balanced img {
        width: 150px;
        height: 190px;
    }
    
    .actor-name-balanced {
        font-size: 1.4em;
    }
    
    .info-item-balanced {
        height: 40px;
        padding: 8px 12px;
    }
    
    .stats-balanced {
        gap: 10px;
    }
    
    .stat-balanced {
        padding: 10px 12px;
        min-width: 70px;
    }
    
    .bio-text-balanced {
        max-height: 70px;
        font-size: 0.85em;
    }
}

/* تأثيرات بسيطة */
.actor-profile-balanced {
    animation: fadeInBalance 0.5s ease-out;
}

@keyframes fadeInBalance {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*
  ==============================================
  1. تجميع خصائص ألوان الجودة
  (تم دمج حالتي العرض العادية والتحويم (.last-movie-row:hover)
  لكل مجموعة لونية، وحذف التكرار.)
  ==============================================
*/

/* لون أحمر (Red: #ff0000) */
.quality-الأخيرة,
.last-movie-row:hover .quality-الأخيرة {
  background-color: #ff0000;
}

/* لون أزرق (Blue: #0060ff) */
.quality-bluray,
.quality-bdrip,
.quality-hd-1080p,
.quality-brrip,
.last-movie-row:hover .quality-bluray,
.last-movie-row:hover .quality-bdrip,
.last-movie-row:hover .quality-hd-1080p,
.last-movie-row:hover .quality-brrip {
  background-color: #0060ff;
}

/* لون قرمزي (Crimson/Reddish: #dc143c) */
.quality-dvdrip,
.quality-hd-720p,
.quality-hd,
.quality-web-dl,
.last-movie-row:hover .quality-dvdrip,
.last-movie-row:hover .quality-hd-720p,
.last-movie-row:hover .quality-hd,
.last-movie-row:hover .quality-web-dl {
  background-color: #dc143c;
}

/* لون اسود رمادي (#434040) - دمج أربعة مجموعات سابقة */
.quality-dvbrip,
.quality-r5,
.quality-hdts,
.quality-hdtc,
.quality-desiscr,
.quality-dvdscr,
.quality-tc,
.quality-ts,
.quality-tshq,
.quality-cam,
.quality-hdcam,
.quality-hchdrip,
.quality-dthrip,
.quality-hc-webrip,
.quality-scr,
.last-movie-row:hover .quality-dvbrip,
.last-movie-row:hover .quality-r5,
.last-movie-row:hover .quality-hdts,
.last-movie-row:hover .quality-hdtc,
.last-movie-row:hover .quality-desiscr,
.last-movie-row:hover .quality-dvdscr,
.last-movie-row:hover .quality-tc,
.last-movie-row:hover .quality-ts,
.last-movie-row:hover .quality-tshq,
.last-movie-row:hover .quality-cam,
.last-movie-row:hover .quality-hdcam,
.last-movie-row:hover .quality-hchdrip,
.last-movie-row:hover .quality-dthrip,
.last-movie-row:hover .quality-hc-webrip,
.last-movie-row:hover .quality-scr {
  background-color: #434040;
}

/* لون اخضر (#00a904) - دمج أربعة مجموعات سابقة */
.quality-webrip,
.quality-webhd,
.quality-tvrip,
.quality-hdrip,
.quality-perhd,
.quality-hdtv,
.last-movie-row:hover .quality-webrip,
.last-movie-row:hover .quality-webhd,
.last-movie-row:hover .quality-tvrip,
.last-movie-row:hover .quality-hdrip,
.last-movie-row:hover .quality-perhd,
.last-movie-row:hover .quality-hdtv {
  background-color: #00a904;
}


/*
  ==============================================
  2. تنسيقات عامة وتنظيف Redundancy
  (تم حذف وحدات 'px' غير الضرورية للقيمة صفر، وحذف الخصائص المكررة/غير الفعالة)
  ==============================================
*/

.relatedfiles .relatedfilestitle {
  margin: 0 0 10px 0; /* دمج margin:0px و margin-right:0px */
}

#wrapper {
  padding: 0;
}

.brudcrmmp {
  margin: 10px auto;
  padding: 7px 10px;
}

#fileserverview {
  margin: 0;
  padding: 0;
  border-radius: 0;
}

/* #cast-panel */
#cast-panel {
  border: 1px solid #ccc;
  background-color: #fff;
  display: block;
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
  padding: 0;
}
#cast-panel p {
  background-color: #F9F9F9;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  color: #bb3731;
  padding: 10px 20px;
  margin: 0;
  font-weight: 400;
}
#cast-panel .cast-items {
  overflow: hidden;
  padding: 2px;
  display: block;
}
#cast-panel .cast-item {
  margin: 2px;
  padding: 0;
  text-align: right;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle; /* حذف vertical-align: top المكرر والمُلغى */
}
#cast-panel .cast-item a {
  font-size: 14px;
  font-weight: bold;
}
#cast-panel .cast-item img {
  vertical-align: middle;
  height: 101px;
  width: 80px;
  border-radius: 50%;
  background-size: 80px 101px;
}
#cast-panel .cast-item-img {
  vertical-align: middle;
  display: inline-block;
}
#cast-panel .cast-item-info {
  vertical-align: middle;
  display: inline-block;
  margin-right: 2px;
  text-align: center;
}
#cast-panel .cast-item-character {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  direction: ltr;
}

/* تجميع لوحات العرض المشتركة (#links-panel, #episodes-panel, #seasons-panel) */
#links-panel,
#episodes-panel,
#seasons-panel {
  background-color: #fff;
  display: none;
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
  padding: 20px;
  /* تم حذف vertical-align: top لعدم فعاليته */
}

/* تنسيقات خاصة بـ #links-panel */
/* --- قسم روابط التحميل (الأفلام والجودات) --- */
#links-panel .download-link {
  list-style: none;
  display: inline-block;
  overflow: hidden;
  width: 300px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 12px;
  border-radius: 6px; /* زوايا أقل حدة لمظهر رسمي */
  background: #2c3035; /* لون كحلي داكن مسطح */
  height: 75px;
  text-align: right;
  direction: rtl;
  box-shadow: none; /* إزالة الظل تماماً */
  color: #fff;
  border-bottom: 3px solid #8e44ad; /* خط سفلي جمالي بدلاً من الظل */
  transition: background 0.3s;
}

#links-panel .download-link:hover {
  background: #2c3035; /* تغيير طفيف عند التمرير */
}

#links-panel .download-link span.name {
  display: block;
  font-weight: bold;
  font-size: 17px;
  margin-top: 11px;
  line-height: 100%;
  color: #ecf0f1;
}

#links-panel .download-link span.quality {
  display: inline-block;
  font-size: 11px;
  line-height: 18px;
  background: #2c3035; /* لون أرجواني للجودة */
  padding: 0 8px;
  border-radius: 3px;
  margin-top: 4px;
}

#links-panel .download-link span.size {
  color: #f1c40f; /* لون أصفر هادئ للحجم */
  font-weight: bold;
  font-size: 13px;
  display: block;
  line-height: 11px;
  margin-top: 6px;
}

#links-panel .download-link i {
  display: inline-block;
  width: 45px;
  height: 45px;
  background: #2c3035; /* خلفية أغمق قليلاً من الزر */
  border: 1px solid #8e44ad;
  border-radius: 8px; /* شكل مربع بلمسة انحناء */
  text-align: center;
  line-height: 45px;
  font-size: 22px;
  color: #8e44ad;
  float: right;
  margin-top: 15px;
  margin-right: 15px;
  margin-left: 12px;
}

/* --- قسم الحلقات (ألوان متناسقة وداكنة) --- */
#episodes-panel .download-link {
  list-style: none;
  display: inline-block;
  overflow: hidden;
  width: 200px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  background: #2c3035; /* رمادي داكن مزرق */
  height: 50px;
  text-align: right;
  direction: rtl;
  box-shadow: none; /* إزالة الظل */
  border-right: 4px solid #e67e22; /* تمييز الحلقات باللون البرتقالي */
  color: #fff;
  transition: 0.3s;
}

#episodes-panel .download-link:hover {
  background: #e67e22; /* ينقلب اللون عند الوقوف عليه */
}

#episodes-panel .download-link span.name {
  display: block;
  font-size: 16px;
  margin-top: 18px;
  line-height: 100%;
  padding-right: 10px;
}

#episodes-panel .download-link i {
  display: inline-block;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-align: center;
  line-height: 34px;
  font-size: 18px;
  color: #fff;
  float: right;
  margin-top: 8px;
  margin-right: 8px;
  margin-left: 10px;
}

/* تنسيقات خاصة بـ #seasons-panel */
.season-item {
  display: inline-block;
  padding: 0;
  margin: 10px;
  text-align: right;
  vertical-align: top;
  position: relative;
  width: 160px;
  height: 240px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.season-img {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  transition: all .25s .13s;
}
.season-title {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  color: #fff;
  z-index: 2;
  text-align: center;
  background: linear-gradient(180deg, rgba(69, 69, 69, 0.5) 50%, rgba(69, 69, 69, 0.9) 100%);
  line-height: 1.2;
  padding: 8px;
}
.season-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  text-align: center;
  vertical-align: baseline;
  color: #42d844;
}
.season-play i {
  transform: translate(-50%, -50%) scale(0);
  background-color: rgba(0, 0, 0, .4);
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  box-shadow: #fff 0 0 0 2px, rgba(0, 0, 0, .498039) 0 0 10px;
  color: #ffc107;
  border-radius: 100%;
  transition: all .25s .13s;
}
.season-item:hover .season-play i {
  transform: translate(-50%, -50%) scale(1);
}
.season-item:hover .season-img {
  opacity: 0.6;
}

/* #video-panel */
#video-panel {
  background-color: #fff;
  display: table;
  width: 100%;
  margin-bottom: 10px;
}

/* تجميع خصائص #video-panel-player و #video-panel-more المشتركة */
#video-panel-player,
#video-panel-more {
  background-color: #fff;
  display: table-cell;
  vertical-align: top;
}

#video-panel-player {
  width: 75%;
}

#video-panel-more {
  width: 25%;
  padding: 0 5px 5px 5px; /* دمج padding:5px و padding-top:0px; */
  text-align: right;
  position: relative;
}

.video-panel-more-btn {
  background-color: #F7F7F7;
  border: 1px solid #242424;
  color: #242424;
  position: absolute;
  left: 5px;
  top: 5px;
  padding: 4px;
  font-size: 10px;
  cursor: pointer;
}
.video-panel-more-btn-on {
  background-color: #ba3630;
  border: 1px solid #962b26;
  color: #fff;
}
#video-panel-more-label {
  font-size: 20px;
  border-bottom: 1px solid #bd3731;
  border-radius: 0;
  color: #bb3630;
  margin-top: 0;
  padding: 5px;
  padding-top: 0;
  margin-bottom: 10px;
  text-align: right;
}
.video-panel-row {
  display: table;
  text-align: right;
  width: 100%;
  padding: 5px;
  font-size: 12px;
  color: #bb3631;
  /* تم حذف vertical-align: top لعدم فعاليته على display:table */
}
.video-panel-col {
  display: table-cell;
  text-align: right;
  vertical-align: top;
}
.video-panel-col-120 {
  width: 95px;
}
.video-panel-img {
  width: 93px;
  height: 105px;
  margin-left: 6px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #ccc;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 93px 105px;
}
#video-panel a {
  font-size: 12px;
  color: #131720;
}
#video-panel a:hover {
  color: #ce4437;
}

/* #related-videos */
#related-videos {
  box-shadow: 0 0 37px 1px rgba(0, 0, 0, 0.62);
  background-color: #161616;
  margin: 15px auto;
  display: table;
}
.related-videos-col {
  display: table-cell;
  width: 50%;
  vertical-align: top;
}
.related-videos-label {
  background-color: #bb3731;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
  text-align: center;
  width: 50%;
  padding: 14px 20px;
  margin: 15px auto;
  color: #fff;
  display: block;
  border-radius: 5px;
}
.related-videos-label:hover {
  background-color: #ffc000;
  color: #000;
}

/* العناصر الخاصة بالعرض الأخير */
.last-movie-title {
  color: #393939;
  display: inline-block;
  font-size: 14px;
  margin: 0;
  max-width: 99%;
  overflow: hidden;
  padding: 1px 2px;
  vertical-align: middle;
  white-space: nowrap;
  z-index: 10;
}
.last-movie-view {
  border-radius: 50%;
  display: inline-block;
  padding: 0;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
}
.last-movie-row {
  border-radius: 12px;
}
.last-movie-info {
  top: 2px;
  left: 2px;
}
.index-last-category-col {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.3;
}
.index-last-category-image {
  vertical-align: middle;
  display: inline-block;
  border: 1px solid #ccc;
  height: 61px;
  width: 48px;
  border-radius: 12px;
}
.index-last-category-parent {
  font-size: 13px;
  color: #be3731;
  margin: 0 5px 0 0; /* دمج margin:0px و margin-right:5px */
}
.index-last-category-broadcast-status {
  font-size: 12px;
  color: #bd3731;
  margin: 0 5px 0 0; /* دمج margin:0px و margin-right:5px */
}
.index-last-category-broadcast-status-incomplete,
.index-last-category-broadcast-status-complete {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  width: 60px;
  text-align: center;
  background: linear-gradient(#e35049, #bd3731, #a32e29);
  color: #fff;
  font-size: 11px;
  border-radius: 12px;
}
.index-last-category-broadcast-status-complete {
  background: linear-gradient(#505050, #303030, #101010);
}
.broadcast-status,.broadcast-status-complete{
  position: absolute;
  height: 26px;
  width: 150px;
  text-align: center;
  background-color: red;
  color: #fff;
  -ms-transform: rotate(-34deg);
  -webkit-transform: rotate(-34deg);
  transform: rotate(-34deg);
  left: -46px;
  top: 12px;
  font-size: 14px;
  line-height: 26px;
  z-index: 99;
}
.broadcast-status-complete{
  background-color: green;
}
.broadcast-status,.broadcast-status-complete{
  position: absolute;
  height: 26px;
  width: 150px;
  text-align: center;
  background-color: red;
  color: #fff;
  -ms-transform: rotate(-34deg);
  -webkit-transform: rotate(-34deg);
  transform: rotate(-34deg);
  left: -46px;
  top: 12px;
  font-size: 14px;
  line-height: 26px;
  z-index: 99;
}
.broadcast-status-complete{
  background-color: green;
}
/*
  ==============================================
  3. استعلامات الوسائط (Media Queries)
  ==============================================
*/

@media screen and (max-width: 981px) {
  #video-panel-player {
    width: 100%;
    display: block;
  }
  #video-panel-more {
    width: 100%;
    display: block;
  }
  .related-videos-col {
    display: block;
    width: 100%;
  }
  .related-videos-label {
    width: 96%;
  }
}

@media screen and (max-width: 359px) {
  .index-last-category-col {
    display: block;
  }
}

/* Global Styles */
#mobile-show-all-cats {
    background: #444;
    border-bottom: 1px solid #444;
    clear: both;
    font-size: 14.8px;
    line-height: 26px;
    margin: 5px auto;
    padding: 5px;
    border-radius: 3px;
    color: #d0d0d0;
    display: none;
    cursor: pointer;
    text-align: center;
}

#mobile-episode-select {
    margin: 5px auto;
    padding: 5px;
    clear: both;
    display: block;
    text-align: center;
    width: 90%;
}

#mobile-episode-select select {
    margin: 5px auto;
    padding: 2px 20px;
    border: 1px solid #444;
    background: #d0d0d0;
    color: #444;
    text-align: center;
}

#mobile-episode-select select option {
    background: #d0d0d0;
    color: #444;
}

#mobile-episode-select select option.selected-episode {
    color: blue;
}

.drop-submenu {
    position: relative;
}

.dropdown-menu {
    background: #131720;
    right: -10px;
    width: 300px;
    overflow: auto;
}

.drop-submenu li {
    display: inline-block !important;
    width: 142px !important;
    float: none !important;
    margin: 2px !important;
    padding: 2px !important;
}

.filemovie .contentfilemov {
    border: 0 solid black;
    padding-top: 4px;
}

.owl-prev,
.owl-next {
    position: absolute;
    top: 46%;
    padding: 5px;
    margin: 0;
    z-index: 100;
    font-size: 22px;
    cursor: pointer;
    color: #fff;
    opacity: 0.6;
}

.owl-prev {
    left: 10px;
}

.owl-next {
    right: 10px;
}

.owl-prev:hover,
.owl-next:hover {
    opacity: 1;
}

/* Search Ajax Styles */
#search-ajax {
    width: 300px;
    margin: 1px auto;
}

#search-ajax-box {
    position: relative;
    width: 100%;
}

#search-input-ajax {
    background: #fff;
    border: solid 1px #bbb;
    border-radius: 20px;
    color: #000;
    width: 100%;
    padding: 4px 10px;
}

#search-ajax-box .search-btn {
    position: absolute;
    border: 0 solid #fff;
    background-color: #fff;
    color: #fff;
    width: 55px;
    padding: 0px;
    left: 4px;
    top: 4px;
}

#search-ajax-result {
    width: 300px;
    max-height: 360px;
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    border: 1px solid #ccc;
    box-shadow: rgba(0, 0, 0, 0.8) 0 4px 4px 0;
    z-index: 9999999;
    padding: 0px;
    margin: 1px auto;
    overflow: auto;
    border-radius: 0 0 12px 12px;
}

.search-ajax-result-row {
    text-align: right;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    margin: 0px;
    padding: 2px;
}

.search-ajax-result-row:hover {
    background-color: #e8f5fc;
}

.search-ajax-no-results {
    text-align: center;
}

.search-ajax-more-results {
    text-align: center;
    background-color: #F2F2F1;
}

.search-ajax-result-row a {
    display: block;
    color: #106bb1;
}

.search-ajax-result-row a:hover,
.search-ajax-result-row a:active,
.search-ajax-result-row a:focus {
    color: #106bb1;
}

.search-ajax-result-col {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.3;
    max-width: 70%;
}

.search-ajax-result-image {
    vertical-align: middle;
    display: inline-block;
    border: 1px solid #ccc;
    height: 62px;
    width: 55px;
}

.search-ajax-result-parent {
    font-size: 11px;
    color: #878080;
    margin: 0px;
    margin-right: 5px;
}

/* Tags & Keywords Styles */
.genre-item {
    display: inline-block;
    background: #f6f6f6;
    padding: 0px 20px;
    margin: 3px auto;
    border-radius: 16px;
    color: #000 !important;
    text-shadow: none;
    font-size: 12px;
}

.file-tag {
    display: inline-block;
    background: #a32e29;
    padding: 2px 10px;
    margin: 3px auto;
    border-radius: 4px;
    color: #fff !important;
    text-shadow: none;
    font-size: 12px;
}

.file-tag:hover {
    background: #232323;
}

.file-keyword {
    display: inline-block;
    background: #c13832;
    padding: 2px 10px;
    margin: 3px auto;
    border-radius: 4px;
    color: #fff !important;
    text-shadow: none;
    font-size: 12px;
}

.file-keyword:hover {
    background: #232323;
}

/* Categories Tabs Styles */
.categories-tabs {
    text-align: center;
    padding: 0px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding-right: 30px;
}

.categories-tabs a {
    outline: 0;
}

.category-block {
    display: inline-block;
    margin-left: 10px;
}

.category-block.active .content-box {
    background: #555;
}

.category-block .content-box {
    background: #ce4437;
    border-radius: 5px;
    margin: 12px;
    padding-left: 10px;
    width: 160px;
}

.category-block .content-box:hover {
    background: #555;
}

.category-block.active .content-box .icon {
    background: #555;
}

.category-block .content-box .icon {
    line-height: 54px;
    font-size: 1.5rem;
    color: #fff;
    text-align: center;
    margin-right: -47px;
    margin-left: 7px;
    border-radius: 50%;
    background: #ce4437;
    display: inline-block;
}

.category-block .content-box:hover .icon {
    background: #555;
}

.category-block .content-box .icon img {
    max-width: 54px;
    max-height: 54px;
}

.category-block .content-box h3 {
    background: transparent;
    display: inline-block;
    font-size: 14px;
    line-height: 25px;
    color: #fff;
    padding: 2px;
    margin: 0px;
    font-size: 12px !important;
    width: 90px;
}


/* Start Style the player */
/* Start Style the player */
#BiBplayer {
    width: 100%;
    background: #000;
    cursor: pointer;
    color: #fff;
    position: relative;
    
    /* النسبة القياسية */
    aspect-ratio: 16 / 9; 
    
    overflow: hidden;
    box-sizing: border-box;

    /* الحل: حذف padding-top تماماً لمنع الفراغ العلوي */
    padding-top: 0 !important; 
    
    /* الحل: حذف أي هوامش خارجية قد تكون موروثة */
    margin-top: 0 !important;
    
    /* الحل: التأكد من أن العنصر يعامل ككتلة صلبة تلتصق بما فوقها */
    display: block;

    min-height: 140px; 
}

/* تبقى بقية الشيفرة كما هي بالضبط */
.controls-play-pause-big,
.video-bibplayer-poster,
.video-bibplayer-video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.video-bibplayer-poster {
    z-index: 1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.video-bibplayer-video {
    background: #000;
    z-index: 0;
}

span.sc {
    display: inline-block;
    white-space: nowrap;
    overflow: visible;
}

.video-bibplayer .controls-play-pause-big {
    background: rgba(0, 0, 0, .15);
    z-index: 2;
    opacity: 1;
}

.video-bibplayer[status=playing] .controls-play-pause-big {
    opacity: 0;
}

.video-bibplayer .controls .controls-time span,
.video-bibplayer .controls .controls-volume[muted] .controls-volume-value,
.video-bibplayer[no-controls] .controls,
.video-bibplayer[no-controls] .title {
    display: none
}

.icon-play {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
    width: 32px;
    height: 44px;
    border-radius: 50%;
    padding: 18px 20px 18px 28px
}

.icon-play:after,
.icon-play:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block
}

.icon-play:before {
    z-index: 0;
    background: #f72d36;
    animation: pulse-border 1.5s ease-out infinite
}

.icon-play:after {
    z-index: 1;
    background: #f10a15;
    transition: all .2s
}

.icon-play:hover:after {
    background-color: darken(#378000, 10%)
}

.icon-play img {
    position: relative;
    z-index: 3;
    max-width: 100%;
    width: auto;
    height: auto
}

.icon-play span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 32px solid #fff;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0
    }
}



.video-bibplayer .controls {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 10px;
    width: 100%;
    padding: 4px 1vw 0;
    z-index: 3;
    height: calc(4em + 4px);
    background: linear-gradient(transparent, rgba(0, 0, 0, .4))
}

.video-bibplayer .controls .controls-progress-bar {
    position: absolute;
    top: 0;
    right: 1vw; /* Consolidated from 8px and 1vw */
    left: 1vw; /* Consolidated from 8px and 1vw */
    height: 4px;
    background: rgba(255, 255, 255, .3)
}

.video-bibplayer .controls .controls-progress-bar-value {
    float: left;
    display: block;
    height: 100%;
    min-width: 3px;
    width: 3px;
    background: #f95353
}

.video-bibplayer .controls .controls-full-screen,
.video-bibplayer .controls .controls-mute,
.video-bibplayer .controls .controls-play-pause {
    width: 4em;
    height: 4em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 2em
}

.video-bibplayer .controls .controls-play-pause {
    float: left;
    background-image: URL("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDM1NyAzNTciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM1NyAzNTc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0icGxheS1hcnJvdyI+CgkJPHBvbHlnb24gcG9pbnRzPSIzOC4yNSwwIDM4LjI1LDM1NyAzMTguNzUsMTc4LjUgICAiIGZpbGw9IiNGRkZGRkYiLz4KCTwvZz4KPC9nPgo8L3N2Zz4="), none
}

.video-bibplayer .controls .controls-full-screen {
    float: right;
    background-image: URL("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDM1NyAzNTciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM1NyAzNTc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iZnVsbHNjcmVlbiI+CgkJPHBhdGggZD0iTTUxLDIyOS41SDBWMzU3aDEyNy41di01MUg1MVYyMjkuNXogTTAsMTI3LjVoNTFWNTFoNzYuNVYwSDBWMTI3LjV6IE0zMDYsMzA2aC03Ni41djUxSDM1N1YyMjkuNWgtNTFWMzA2eiBNMjI5LjUsMHY1MSAgICBIMzA2djc2LjVoNTFWMEgyMjkuNXoiIGZpbGw9IiNGRkZGRkYiLz4KCTwvZz4KPC9nPgo8L3N2Zz4="), none
}

.video-bibplayer .controls .controls-mute {
    float: right;
    background-image: URL("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDQ1OSA0NTkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ1OSA0NTk7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0idm9sdW1lLXVwIj4KCQk8cGF0aCBkPSJNMCwxNTN2MTUzaDEwMmwxMjcuNSwxMjcuNXYtNDA4TDEwMiwxNTNIMHogTTM0NC4yNSwyMjkuNWMwLTQ1LjktMjUuNS04NC4xNS02My43NS0xMDJ2MjA0ICAgIEMzMTguNzUsMzEzLjY1LDM0NC4yNSwyNzUuNCwzNDQuMjUsMjI5LjV6IE0yODAuNSw1LjF2NTMuNTVDMzU0LjQ1LDgxLjYsNDA4LDE0Ny44OTksNDA4LDIyOS41UzM1NC40NSwzNzcuNCwyODAuNSw0MDAuMzVWNDUzLjkgICAgQzM4Mi41LDQzMC45NDksNDU5LDMzOS4xNSw0NTksMjI5LjVDNDU5LDExOS44NSwzODIuNSwyOC4wNDksMjgwLjUsNS4xeiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+Cjwvc3ZnPg=="), none
}

.video-bibplayer .controls .controls-volume {
    float: right;
    background: rgba(255, 255, 255, .3);
    width: 7em;
    height: 4px;
    margin-top: calc(2em - 2px); /* Consolidated from 1.8em and calc() */
    margin-right: 1.5em
}

.video-bibplayer .controls .controls-volume-value {
    float: left;
    display: block;
    height: 100%;
    width: 95%;
    background: #fff
}

.video-bibplayer .controls .controls-time {
    float: left;
    display: inline-block;
    line-height: 4em;
    height: 4em;
    max-width: 55px;
    margin-left: 1.5em
}

.video-bibplayer .controls .controls-time i {
    font-size: 1.3em;
    color: #fff;
}
/* End Style the player */

/* Buttons Styles */
.moviedescrp {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(23, 30, 43, 0.1);
    border-radius: 8px;
    line-height: 1.6;
}

.movie-meta-color {
    color: #ffb52a;
    font-weight: bold;
}

.movie-info li {
    background: rgba(23, 30, 43, 0.1);
    padding: 8px 15px;
    border-radius: 5px;
    border-left: 3px solid #ffb52a;
}

.movie-label {
    font-weight: bold;
    color: #c21d1d;
}

/* تنسيق حاوية الأزرار */
.play-vid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 10px 0;
    padding: 10px;
    background: rgba(23, 30, 43, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    clear: both;
}

/* تصميم الأزرار الأساسي */
.download-fixed-btn,
.play-fixed-btn,
.seasons-vid-btn,
.episodes-vid-btn {
    width: 150px;
    height: 40px;
    border: none;
    border-radius: 5px;
    color: white;
    padding: 7px 2px;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    outline: none;
}

/* الألوان الافتراضية لكل زر بناءً على طلبك */
.play-fixed-btn {
    background: #c21d1d; /* أحمر دائماً */
}

.download-fixed-btn {
    background: #42BC3A; /* أخضر دائماً */
}

.seasons-vid-btn,
.episodes-vid-btn {
    background: #171e2b; /* تبقى داكنة كما هي */
}


/* تأثير اللمعة (نفس الكود السابق) */
.download-fixed-btn::before,
.play-fixed-btn::before,
.seasons-vid-btn::before,
.episodes-vid-btn::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: left 0.5s ease;
}

/* تأثيرات الـ Hover (اللمعة فقط للأحمر والأخضر، وتغيير لون للبقية) */
.play-fixed-btn:hover::before,
.download-fixed-btn:hover::before,
.episodes-vid-btn:hover::before,
.seasons-vid-btn:hover::before {
    left: 100%;
}

.episodes-vid-btn:hover {
    background: #1b94b8;
}

.seasons-vid-btn:hover {
    background: #c0741e;
}

/* الحالة النشطة والتركيز */
.play-fixed-btn.active,
.play-fixed-btn:focus {
    background: #c21d1d !important;
    box-shadow: 0 0 10px rgba(194, 29, 29, 0.5);
}

.download-fixed-btn.active,
.download-fixed-btn:focus {
    background: #42BC3A !important;
    box-shadow: 0 0 10px rgba(66, 188, 58, 0.5);
}

.episodes-vid-btn.active,
.episodes-vid-btn:focus {
    background: #1b94b8 !important;
    box-shadow: 0 0 10px rgba(27, 148, 184, 0.5);
}

.seasons-vid-btn.active,
.seasons-vid-btn:focus {
    background: #c0741e !important;
    box-shadow: 0 0 10px rgba(192, 116, 30, 0.5);
}

/* الحفاظ على الألوان عند النقر على أزرار أخرى */
.play-vid:focus-within .play-fixed-btn:not(:focus) { background: #c21d1d; }
.play-vid:focus-within .download-fixed-btn:not(:focus) { background: #42BC3A; }
.play-vid:focus-within .episodes-vid-btn:not(:focus) { background: #171e2b; }
.play-vid:focus-within .seasons-vid-btn:not(:focus) { background: #171e2b; }
/* -------------------------------------------------------- */
/* Media Queries */
/* -------------------------------------------------------- */

@media screen and (max-width: 768px) {
    #trailer-player iframe {
        position: fixed;
        width: 560px;
        height: 315px;
        top: 50%;
        right: 50%;
        margin-right: -280px;
        margin-top: -157px;
    }

    .owl-prev,
    .owl-next {
        display: none;
    }

    #fileinformation {
        margin: 0px auto;
        padding: 0px;
    }

    #fileinformation .social-media {
        text-align: center;
        position: static;
    }

    #fileinformation .play-vid {
        text-align: center;
        position: static;
        max-width: 400px;
        margin: 2px auto;
    }

    #fileinformation-breadcrumb {
        height: auto;
    }

    #fileinformation-rating {
        text-align: center;
        position: static;
        max-width: 200px;
        margin: 2px auto;
    }

    #fileserverview ul.nav.nav-tabs li {
        display: inline-block;
        margin: 2px auto;
    }

    #fileserverview ul.nav.nav-tabs li a {
        padding: 3px;
    }

    .filemovie .contentfilemov {
        padding: 2px;
    }

    .dropdown-menu {
        left: -15px;
        right: auto;
    }

    /* Removed .drop-submenu li as it's identical to the global rule */

    #mobile-show-all-cats {
        display: block;
    }

    #index-slider-movie .carousel-inner {
        height: 560px;
    }

    #index-slider-movie .slider-movie-bg {
        height: 560px;
    }

    #index-slider-movie .carousel-info {
        padding-bottom: 0px;
    }


    .carousel-info-col-1 {
        display: block;
        text-align: center;
    }

    .carousel-info-col-2 {
        display: block;
        text-align: center;
        padding: 2px;
    }

    #index-slider-movie .slider-movie-content h3 {
        display: block;
        text-align: center;
    }

    .carousel-info-ratting {
        display: inline-block;
        margin-top: 2px;
        padding: 5px;
        text-align: center;
        vertical-align: middle;
    }

    .carousel-info-views {
        display: inline-block;
        padding: 5px;
        text-align: right;
        vertical-align: middle;
    }

    .carousel-info-views div {
        display: block;
        margin-left: 5px;
        margin-right: 5px;
    }

    .c100 {
        font-size: 100px;
    }

    .owl-carousel .owl-item img {
        display: inline-block !important;
    }

    #related-videos {
        display: block;
    }
}

@media screen and (max-width: 600px) {
    #trailer-player iframe {
        position: fixed;
        width: 300px;
        height: 200px;
        top: 50%;
        right: 50%;
        margin-right: -150px;
        margin-top: -100px;
    }

    /* صورة البطاقة img1 تغطي كامل البطاقة */
    #movies-items .movie-item .image .img1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* يغطي كامل ارتفاع البطاقة */
        background-position: center;
        background-size: cover;
        /* تغطي الصورة بالكامل بدون قص */
        margin: 0;
        padding: 0;
    }

    /* إلغاء img2 تمامًا */
    #movies-items .movie-item .image .img2 {
        display: none !important;
    }

    /* البطاقة */
    #movies-items .movie-item {
        border: 1px solid #21252d;
        margin-left: 0;
        margin-right: 0;
        height: 280px;
        /* الحفاظ على ارتفاع البطاقة */
        width: 48.3333%;
        overflow: hidden;
        position: relative;
    }

    /* اسم الفيلم فقط يظهر فوق الصورة */
    #movies-items .movie-item .movie-title {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 5;
        /* يظهر فوق الصورة */
        color: #fff;
        /* نص أبيض */
        display: block;
    }

    /* إلغاء وصف الصورة بالكامل */
    #movies-items .movie-item .movie-description {
        display: none !important;
    }

    #movies-items {
    /* **التعديل هنا: لإصلاح تداخل العناصر العائمة** */
    overflow: hidden; 
    
    /* الخصائص الموجودة مسبقًا */
    text-align: center;
    padding: 2px !important;
}

    .cats ul li,
    .f-cats ul li {
        float: none;
        margin: auto;
    }

    .row {
        margin-right: -15px;
        margin-left: -15px;
    }
}

@media screen and (max-width: 400px) {
    .categories-tabs {
        padding-right: 40px;
    }

    .category-block {
        margin-left: 20px;
    }

    .category-block .content-box {
        margin: 2px;
        padding-left: 2px;
        width: 155px;
    }

    .category-block .content-box h3 {
        font-size: 10px !important;
        width: 105px;
    }
}

@media screen and (max-width: 374px) {
    /* Removed .categories-tabs and .category-block as they are identical to @400px */

    .category-block .content-box {
        /* margin: 2px; padding-left: 2px; inherited from @400px */
        width: 120px;
    }

    .category-block .content-box h3 {
        /* font-size: 10px !important; inherited from @400px */
        width: 70px;
    }
}
/* تنسيق كتلة وصف الفئة الرئيسية (المعدل) */
.category-main-description {
    /* تباعد داخلي: زيادة التباعد لتفصل النص عن الحدود السميكة */
    padding: 15px 25px;
    
    /* تباعد خارجي: 20 بكسل من الأعلى/الأسفل، و 30 بكسل من اليمين/اليسار لتوفير فراغ جانبي */
    margin: 15px 15px; 
    
    background-color: #555; 
    border-radius: 6px;
    
    /* الحدود السميكة */
    border-right: 4px solid #ce4437; 
    border-left: 4px solid #ce4437;  
    
    /* تنسيق النص: جعله متوسطاً */
    color: #ffffff;
    font-size: 16px;
    line-height: 1.8;
    text-align: center; /* تم التعديل ليكون النص متوسطاً */
    
    word-wrap: break-word;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* تنسيق للروابط داخل الوصف (إذا وُجدت) */
.category-main-description a {
    color: #ffc200; 
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.category-main-description a:hover {
    color: #ce4437;
}

/* التباعد على الشاشات الصغيرة (لتحسين العرض على الجوال) */
@media (max-width: 768px) {
    .category-main-description {
        /* تقليل المارجن الجانبي لكي لا يضيع مساحة على الجوال */
        margin: 15px 10px; 
        padding: 15px 20px;
    }
}
:root {
    --color-orange: #e76f51; 
    --color-gold: #ffa200;    
    --color-dark-blue: #333948; 
    --color-red: #e63946;    
    --color-white: #f6f6f6;
    --color-text-dark: #333; 
}

/* الحاوية العامة */
.movie-stats-container {
    display: flex;
    gap: 8px; 
    align-items: center;
    background-color: transparent; 
    padding: 0; 
    margin-bottom: 12px;
}

.stat-pill {
    display: flex;
    font-weight: bold;
    font-family: sans-serif;
    height: 27px; 
    font-size: 13px; 
    border-radius: 30px; /* شكل بيضوي */
    overflow: visible; /* ⚠ السماح بظهور السهم خارج الحد */
    position: relative;
}

/* النصف الأبيض */
.stat-value {
    background-color: var(--color-white);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-dark);
    position: relative;
    z-index: 2;
    border-radius: 30px 0 0 30px; /* زوايا بيضاوية للجانب الأيسر */
}

/* النصف الملون */
.stat-icon {
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    position: relative;
    z-index: 1;
    border-radius: 0 30px 30px 0; /* زوايا بيضاوية للجانب الأيمن */
}

/* ✨ السهم الأبيض الفاصل */
.stat-value::after {
    content: "";
    position: absolute;
    right: -6px; /* يدخل قليلاً في اللون */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid var(--color-white);
    z-index: 3;
}

/* ألوان العناصر */
.stat-year .stat-icon { background-color: var(--color-orange); }
.stat-rating .stat-icon { background-color: var(--color-gold); }
.stat-duration .stat-icon { background-color: var(--color-dark-blue); }
.stat-views .stat-icon { background-color: var(--color-red); }
.stat-pill.no-data {
    display: none;
}