/*
 * 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: var(--dynamic-overlay, rgba(0,0,0,0.6));
}

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

/* اللون الأسود/الأبيض التلقائي للعنوان والقصة حسب سطوع اللون المهيمن.
   الظل يبقى تحت العنوان إذا النص أبيض، ويُزال تماماً إذا النص أسود
   (نستخدم مسار الـ selector نفسه بالضبط عشان نضمن يتغلب على القاعدة
   الأساسية بغض النظر عن ترتيب السطور) */
#fileinformation.fi-text-light h1.movietitle,
#fileinformation.fi-text-light h1.movietitle a,
#fileinformation.fi-text-light .moviedescrp span.movie-story-value {
    color: #ffffff;
}
#fileinformation.fi-text-dark h1.movietitle,
#fileinformation.fi-text-dark h1.movietitle a,
#fileinformation.fi-text-dark .moviedescrp span.movie-story-value {
    color: #1a1a1a;
    text-shadow: none;
}
#fileinformation.fi-text-dark .fileinformation-center h1.movietitle {
    text-shadow: none;
}
#fileinformation.fi-text-light .moviedescrp span.movie-story-value {
    text-shadow: none;
}

/* الأبطال (بطولة): الأيقونة + الكلمة + الأسماء كلهم يتبدّلون معاً */
#fileinformation.fi-text-light .movie-info li,
#fileinformation.fi-text-light .movie-info i,
#fileinformation.fi-text-light .movie-info span.movie-label {
    color: #ffffff;
}
#fileinformation.fi-text-dark .movie-info li,
#fileinformation.fi-text-dark .movie-info i,
#fileinformation.fi-text-dark .movie-info span.movie-label {
    color: #1a1a1a;
}

/* الرقابة: فقط كلمة "الرقابة" (وأيقونتها) تتبدّل - كبسولة التصنيف
   نفسها (الناتج) لها لون ثابت inline من PHP فما تتأثر بهالقواعد إطلاقاً */


/* =========================================================
   ترتيب طبقات #fileinformation
   ========================================================= */

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

/* طبقة التلوين */
#fileinformation-bg::before {
    z-index: 2;
}

/* طبقة الضباب */
#fileinformation-bg::after {
    z-index: 3;
}

/* جميع المحتويات فوق الخلفية */
#fileinformation .fileinformation-right,
#fileinformation .fileinformation-center,
#fileinformation .fileinformation-left,
#fileinformation > .play-vid {
    position: relative;
    z-index: 10;
}

/* الأزرار فوق كل الطبقات */
#fileinformation > .play-vid {
    position: relative;
    z-index: 20 !important;
    isolation: isolate;

    margin-top: 0px !important;
}

/* الجزء الأيمن (صورة الغلاف) */
#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;
}

/* =========================================================
   بلوك موحّد: البوستر + صندوق الإعجاب/التقييم (ديسكتوب)
   الهدف: يظهر البوستر وصندوق اللايك كقطعة واحدة متجانسة
   بدل عنصرين منفصلين بعرض وتقوس زوايا مختلفين.
   ملاحظة: هذا التنسيق مقصور على شاشات الديسكتوب فقط،
   نسخة الموبايل تحتفظ بتنسيقها القديم عبر الـ media query.
========================================================= */
@media screen and (min-width: 769px) {
    /* الحاوية الأم: صف الأعمدة أعلى، وصف الأزرار تحته في المنتصف */
    #fileinformation {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    #fileinformation > .clearfix {
        display: none;
    }

    /* الصف العلوي: البوستر + المعلومات بنفس الارتفاع بالضبط
       (من أول العمود حتى نهاية الأبطال/الرقابة) - أيهما أطول
       محتوى يفرض الارتفاع والثاني يتمدد ليطابقه تمامًا */
    #fileinformation .fileinformation-columns {
        display: flex;
        direction: rtl; /* لضمان بقاء البوستر يمينًا بشكل مضمون */
        flex-direction: row;
        align-items: stretch;
        gap: 18px;
    }

    /* صف الأزرار: يتمركز أفقيًا أسفل العمودين معًا */
    #fileinformation > .play-vid {
        align-self: center;
    }

    #fileinformation .fileinformation-right {
        display: flex;
        flex-direction: column;
        flex: 0 0 260px;
        margin: 0;
    }

    /* البوستر-بلوك يتمدد رأسيًا ليملأ نفس ارتفاع عمود المعلومات
       دون ترك فراغ ميت أسفله */
    #fileinformation .fileinformation-right .poster-block {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
        border-radius: 14px;
        overflow: hidden;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .12);
        box-shadow: none;
    }

    /* البوستر يحافظ على نسبته الطبيعية ولا يتمدد؛ الفراغ الإضافي
       (إن وجد) يذهب لصندوق اللايكات أسفله فيتمركز بداخله بأناقة */
    #fileinformation .fileinformation-right .poster-block .poster {
        margin: 0;
        line-height: 0;
        flex: 0 0 auto;
    }

    #fileinformation .fileinformation-right .poster-block .poster img {
        border-radius: 0;
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
    }

    /* صندوق اللايك/التقييم يندمج بصريًا أسفل البوستر مباشرة بلا فجوة
       ولا حدود أو ظل خاص به، فقط خط فاصل رفيع يفصله عن البوستر،
       ويتمدد لملء أي مساحة رأسية إضافية بشكل متمركز وأنيق */
    #fileinformation .fileinformation-right .poster-block .movie-reactions {
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 0;
        border: none;
        border-top: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .03);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* مركز المعلومات */
#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;
}

/* =========================================================
   بطاقة المعلومات الموحّدة (العنوان + الإحصائيات + النوع
   + القصة + الأبطال + الرقابة) — بنفس لغة تصميم بلوك
   البوستر ونظام اللايكات (زجاجي، حدود خفيفة، زوايا 14px)
   حتى يظهر العمود بالكامل كمنظومة واحدة متجانسة.
   مقصور على الديسكتوب، الجوال يحتفظ بتنسيقه القديم.
========================================================= */
@media screen and (min-width: 769px) {

    #fileinformation .fileinformation-center {
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 1 1 auto;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
    }

    /* البطاقة الزجاجية الرئيسية */
    #fileinformation .fileinformation-center .info-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
        background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 14px;
        padding: 18px 20px;
        position: relative;
        overflow: hidden;
        flex: 1 1 auto;
    }

    /* -------- العنوان -------- */
    #fileinformation .fileinformation-center .info-card-title {
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255,255,255,.1);
        flex: 0 0 auto;
    }
    #fileinformation .fileinformation-center h1.movietitle {
        margin: 0;
        padding: 0 12px 0 14px;
        border-right: 5px solid #ffb52a;
        font-size: 26px;
        line-height: 1.35;
        letter-spacing: .2px;
        text-shadow: 0 2px 12px rgba(0,0,0,.55);
    }

    /* -------- شرائح الإحصائيات -------- */
    #fileinformation .fileinformation-center .movie-stats-container {
        margin: 0;
        flex: 0 0 auto;
        flex-wrap: wrap;
        gap: 10px;
    }
    #fileinformation .fileinformation-center .stat-pill {
        box-shadow: none;
    }

    /* -------- صف النوع (شارة واحدة) -------- */
    #fileinformation .fileinformation-center .movie-genre-row {
        margin: 0 !important;
        padding: 10px 14px !important;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 10px;
        text-shadow: none;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
    }

    /* -------- صندوق القصة -------- */
    /* هذا الصندوق هو من يمتص أي فرق ارتفاع بين العمودين:
       يتمدد ليملأ المساحة المتبقية بدل ما يترك فراغ فاضي
       أو يخلي البطاقة تبان أقصر/مشوهة مقارنة بعمود البوستر */
    #fileinformation .fileinformation-center .moviedescrp:not(.movie-genre-row) {
        margin: 0 !important;
        padding: 14px !important;
        background: rgba(255,255,255,.035);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 10px;
        text-shadow: none;
        font-size: 14.5px;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    #fileinformation .fileinformation-center .moviedescrp:not(.movie-genre-row) p {
        margin: 0 !important;
        max-height: none;
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
    }
    #fileinformation .fileinformation-center .movie-story-value {
        color: #ffffff;
    }
    /* إبقاء لون "القصة:" الأصفر كما هو مع إضافة ظل يوضحه فوق الخلفية الزجاجية */
    #fileinformation .fileinformation-center .moviedescrp:not(.movie-genre-row) .movie-meta-color {
        text-shadow: 0 1px 4px rgba(0,0,0,.7);
    }

    /* -------- الأبطال / الرقابة كشرائح (Chips) -------- */
    #fileinformation .fileinformation-center .movie-info {
        flex: 0 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #fileinformation .fileinformation-center .movie-info li {
        width: auto;
        flex: 1 1 auto;
        min-width: 220px;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.1);
        border-left: 3px solid #ffb52a;
        border-radius: 8px;
        padding: 9px 12px;
        font-size: 13.5px;
        text-shadow: none;
    }
    #fileinformation .fileinformation-center .movie-info li i {
        margin-left: 6px;
        color: #ffb52a;
    }

    /* -------- بطاقة أزرار المشاهدة والتحميل -------- */
    #fileinformation > .play-vid {
        margin: 0;
        width: auto;
        background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 14px;
        padding: 16px;
        gap: 12px;
    }
    #fileinformation > .play-vid .play-fixed-btn,
    #fileinformation > .play-vid .download-fixed-btn,
    #fileinformation > .play-vid .episodes-vid-btn,
    #fileinformation > .play-vid .seasons-vid-btn {
        flex: 0 0 170px;
        width: 170px;
        height: 48px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        box-shadow: none;
        transition: none;
    }
    #fileinformation > .play-vid .play-fixed-btn:hover,
    #fileinformation > .play-vid .download-fixed-btn:hover,
    #fileinformation > .play-vid .episodes-vid-btn:hover,
    #fileinformation > .play-vid .seasons-vid-btn:hover {
        transform: none;
        box-shadow: none;
    }
}

/* الجزء الأيسر (تفاصيل إضافية) */
#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: #fff;
    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: 80px;
    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;
}

.poster-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    z-index: 1;
    background: #000; /* اختياري مهم */
}

.video-bibplayer-poster {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.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;
}