*{box-sizing:border-box}body{margin:0;background:#282828;color:#fff;font-family:"Cairo","Tajawal",Tahoma,sans-serif;font-size:14px;line-height:1.65}
a{text-decoration:none;color:inherit}.page{width:min(1270px,calc(100% - 56px));margin:auto}
.header{height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    direction: rtl;
    white-space: nowrap;
}

.logo-text {
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.logo-mark {
    position: relative;
    width: 28px;
    height: 28px;
    background: #ff3b4d;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

/* ذيل علامة الفاصل */
.logo-mark::after {
    content: "";
    position: absolute;
    bottom: -8px;
    right: 2px;
    width: 0;
    height: 0;
    border-top: 13px solid #ff3b4d;
    border-left: 7px solid transparent;
}

/* النقطة الصغيرة فوق العلامة */
.logo-mark::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    background: #ff3b4d;
    border-radius: 50%;
    top: -5px;
    left: 1px;
}

.header-left,.social-mini,.nav{display:flex;align-items:center}.header-left{gap:10px}.social-mini{gap:14px;color:#aaa;font-size:12px}.nav{gap:20px;color:#aaa;font-size:13px;font-weight:700;white-space:nowrap}.nav .actives{color:#fff;border-bottom:2px solid #ff4050;padding-bottom:7px}
.login{height:28px;padding:0 10px;border:1px solid #ff4050;border-radius:20px;display:flex;align-items:center;gap:6px;font-size:10px}.search-mini{width:30px;height:30px;border-radius:50%;background:#333;display:flex;align-items:center;justify-content:center;color:#aaa}
.news{height:33px;margin:12px 0 14px;background:#1d1d1d;border-radius:20px;display:flex;align-items:center;overflow:hidden;font-size:12px}.news strong{height:27px;min-width:86px;background:#ff4050;border-radius:20px;display:flex;align-items:center;justify-content:center}.news span{flex:1;padding:0 15px;color:#ddd}
.hero{position:relative;height:285px;border-radius:6px;overflow:hidden;background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.35)),url("") center/cover}
.hero {
    position: relative;
    overflow: hidden;
}

.slide {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero-background {
    position: absolute;
    inset: -30px;
    z-index: -3;

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

    filter: blur(18px);
    transform: scale(1.08);

    opacity: .55;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.82) 38%,
            rgba(0,0,0,.55) 70%,
            rgba(0,0,0,.35) 100%
        );
}

.hero-poster {
    position: relative;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
}
.hero-poster{position:absolute;z-index:2;right:22px;top:21px;width:133px;height:201px;border-radius:4px;object-fit:cover}.hero-content{position:absolute;z-index:3;right:195px;left:80px;top:72px;text-align:right}.hero-rating{font-size:10px;color:#ddd}.hero-rating b{color:#ffd000}.hero-title{margin:0;font-size:29px;font-weight:800;line-height:1.45}.hero-meta{font-size:13px;color:#ddd}.hero-description{max-widths:620px;margin:10px auto 10px 0;color:#ccc;font-size:13px;line-height:2}.watch{background:#ff4050;border:0;border-radius:20px;color:#fff;padding:7px 16px;font:700 11px Cairo;cursor:pointer}.hero-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:25px;height:42px;border:0;background:rgba(0,0,0,.4);color:#fff;font-size:18px}.hero-arrow.right{right:0}.hero-arrow.left{left:0}.dots{position:absolute;z-index:6;bottom:11px;left:50%;transform:translateX(-50%);display:flex;gap:7px}.dot{width:9px;height:9px;border-radius:50%;background:#777}.dot.active{background:#ff4050}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:30px;margin-top:28px}.section,.latest{background:#252525;border-radius:5px;padding:12px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.section-title{font-size:11px;font-weight:800}.section-title i{color:#ffd000;margin-left:5px}.more{border:1px solid #ffd000;border-radius:20px;padding:2px 10px;font-size:9px}
.movies{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.poster{position:relative;height:185px;overflow:hidden;border-radius:5px;background:#111}.poster img{width:100%;height:100%;object-fit:cover;display:block}.poster:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.9))}.quality{position:absolute;z-index:2;top:6px;right:5px;background:#ffd000;color:#111;border-radius:4px;padding:1px 5px;font-size:10px;font-weight:800}.movie-name{position:absolute;z-index:3;right:6px;left:6px;bottom:7px;text-align:center;font-size:10px;font-weight:700;line-height:1.5}.rating{position:absolute;z-index:3;bottom:28px;right:6px;font-size:10px}
.latest-list{display:flex;flex-direction:column;gap:8px}.latest-item{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;min-height:68px}.latest-thumb{width:92px;height:62px;border-radius:4px;object-fit:cover}.latest-title{font-size:11px;font-weight:700;line-height:1.7}.latest-meta{color:#aaa;font-size:10px}.red-dot{color:#ff4050;margin-left:4px}
@media(max-width:900px){.page{width:calc(100% - 24px)}.nav{gap:10px;overflow:hidden}.content-grid{grid-template-columns:1fr}.latest{order:2}.movies{grid-template-columns:repeat(4,1fr)}}
@media(max-width:650px){.page{width:calc(100% - 14px)}.nav,.social-mini{display:none}.hero{height:350px}.hero-poster{width:105px;height:160px;right:12px;top:15px}.hero-content{right:12px;left:12px;top:190px}.hero-title{font-size:18px}.movies{grid-template-columns:repeat(3,1fr)}.poster{height:170px}}
@media(max-width:420px){.movies{grid-template-columns:repeat(2,1fr)}.poster{height:220px}}

/* ===== تحسينات السلايدر والقائمة ===== */

.header-left{position:relative}
.menu-toggle{
    display:none;
    width:42px;
    height:42px;
    border:0;
    border-radius:10px;
    background:#333;
    color:#fff;
    font-size:21px;
    cursor:pointer;
}

.hero{
    touch-action:pan-y;
    user-select:none;
    cursor:grab;
}
.hero.dragging{cursor:grabbing}

.slides{
    position:absolute;
    inset:0;
    overflow:hidden;
}
.slide{
    position:absolute;
    inset:0;
    opacity:0;
    transform:translateX(100%);
    transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .45s ease;
    background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.35));
}
.slide.active{
    opacity:1;
    transform:translateX(0);
}
.slide.from-left{transform:translateX(-100%)}
.slide.from-right{transform:translateX(100%)}

.dots button{
    border:0;
    padding:0;
    cursor:pointer;
}
.dots button:focus-visible,
.menu-toggle:focus-visible{
    outline:2px solid #fff;
    outline-offset:3px;
}

@media(max-width:650px){
    .header{
        position:relative;
        flex-wrap:nowrap;
    }

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .nav{
        position:absolute;
        z-index:100;
        top:58px;
        right:0;
        left:0;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:8px;
        background:#202020;
        border-radius:12px;
        box-shadow:0 12px 30px rgba(0,0,0,.35);
        opacity:0;
        visibility:hidden;
        transform:translateY(-8px);
        transition:.25s ease;
        overflow:visible;
    }

    .nav.open{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .nav a{
        padding:11px 12px;
        border-bottom:1px solid #333;
    }

    .nav a:last-child{
        border-bottom:0;
    }

    .nav .active{
        padding-bottom:11px;
    }

    .social-mini,
    .login,
    .search-mini{
        display:none;
    }

    .header-left{
        margin-right:auto;
        gap:7px;
    }

    .hero{
        height:350px;
    }

    .hero-content{
        top:190px;
    }
}


/* ===== Typography & UI polish ===== */
body{
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
.nav a{
    font-weight:700;
    letter-spacing:0;
}
.news strong,
.more,
.watch{
    font-weight:800;
}
.section-title{
    font-weight:800;
    font-size:15px !important;
}
.movie-name{
    font-size:11px !important;
    line-height:1.65 !important;
}
.quality{
    font-size:10px !important;
    padding:2px 7px !important;
}
.rating{
    font-size:10px !important;
}
.latest-title{
    font-size:11px !important;
    line-height:1.8 !important;
}
.latest-meta{
    font-size:10px !important;
}
.hero-rating{
    font-size:13px !important;
}
.hero-meta{
    font-size:13px !important;
}
.hero-description{
    font-size:13px !important;
    line-height:2 !important;
}
.watch{
    font-size:13px !important;
    padding:8px 19px !important;
}
.more{
    font-size:11px !important;
    padding:4px 12px !important;
}


@media(max-width:650px){
    body{font-size:13px}
    .hero-title{font-size:20px !important}
    .hero-description{font-size:11px !important}
    .hero-meta{font-size:11px !important}
    .section-title{font-size:13px !important}
    .movie-name{font-size:10px !important}
    .latest-title{font-size:10px !important}
    .poster{height:170px}
}
@media(max-width:420px){
    .poster{height:205px}
}


/* ===== الأقسام الإضافية المطابقة للتصميم المرفق ===== */

.extra-sections{
    display:grid;
    grid-template-columns:360px minmax(0,1fr);
    gap:30px;
    margin-top:28px;
}

.extra-panel{
    background:#252525;
    border-radius:8px;
    padding:16px;
    min-width:0;
}

.extra-panel .section-head{
    margin-bottom:14px;
}

.extra-panel .section-title{
    color:#fff;
    font-size:14px !important;
}

.extra-panel .section-title i{
    margin-left:6px;
}

.anime-list{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.anime-row{
    min-height:57px;
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:12px;
    align-items:center;
    direction:ltr;
}

.anime-thumb{
    width:92px;
    height:56px;
    border-radius:6px;
    background:linear-gradient(145deg,#333,#1b1b1b);
    overflow:hidden;
}

.anime-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:.75;
}

.anime-info{
    direction:rtl;
    text-align:right;
    min-width:0;
}

.anime-title{
    color:#fff;
    font-size:11px;
    font-weight:700;
    line-height:1.75;
}

.anime-meta{
    margin-top:2px;
    color:#aaa;
    font-size:10px;
}

.anime-tag{
    display:inline-block;
    background:#333;
    color:#bbb;
    padding:1px 8px;
    border-radius:12px;
    margin-right:5px;
}

.extra-movies{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
}

.extra-movie .poster{
    height:185px;
}

.site-footer{
    margin-top:28px;
    min-height:195px;
    background:#252525;
    border-top:1px solid #333;
    position:relative;
    overflow:hidden;
}

.site-footer:before{
    content:"";
    position:absolute;
    width:230px;
    height:230px;
    left:100px;
    top:0;
    border-radius:50%;
    background:
        radial-gradient(circle at center,
            transparent 0 28%,
            rgba(255,255,255,.045) 28% 39%,
            transparent 39% 52%,
            rgba(255,255,255,.045) 52% 63%,
            transparent 63%);
}

.footer-inner{
    position:relative;
    z-index:2;
    width:min(1270px,calc(100% - 56px));
    min-height:195px;
    margin:auto;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    padding:38px 0 20px;
    direction:rtl;
}

.footer-links{
    display:flex;
    gap:24px;
    align-items:center;
    color:#bbb;
    font-size:12px;
    font-weight:600;
}

.footer-links a:hover{
    color:#fff;
}

.footer-copy{
    position:absolute;
    right:0;
    bottom:22px;
    color:#888;
    font-size:10px;
}

.footer-social{
    display:flex;
    gap:20px;
    color:#aaa;
    direction:ltr;
    font-size:12px;
}

@media(max-width:900px){
    .extra-sections{
        grid-template-columns:1fr;
    }

    .extra-movies{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .footer-inner{
        width:calc(100% - 24px);
    }
}

@media(max-width:650px){
    .extra-sections{
        gap:14px;
        margin-top:18px;
    }

    .extra-movies{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .extra-movie .poster{
        height:170px;
    }

    .anime-row{
        grid-template-columns:75px minmax(0,1fr);
    }

    .anime-thumb{
        width:75px;
        height:52px;
    }

    .footer-inner{
        min-height:230px;
        flex-direction:column;
        gap:25px;
        padding-top:28px;
    }

    .footer-links{
        flex-wrap:wrap;
        gap:15px;
    }

    .footer-copy{
        right:0;
        bottom:18px;
    }
}


/* ===== FOOTER FULL SCREEN WIDTH ===== */
.site-footer{
    width:100vw !important;
    max-width:none !important;

    /* يخرج من حاوية .page ويأخذ عرض الشاشة بالكامل */
    margin-right:calc((100% - 100vw) / 2) !important;
    margin-left:calc((100% - 100vw) / 2) !important;

    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;

    margin-top:28px !important;
}

.site-footer .footer-inner{
    width:min(1270px,calc(100% - 56px)) !important;
    max-width:1270px !important;
    margin:0 auto !important;
}

@media(max-width:900px){
    .site-footer{
        margin-right:calc((100% - 100vw) / 2) !important;
        margin-left:calc((100% - 100vw) / 2) !important;
    }

    .site-footer .footer-inner{
        width:calc(100% - 24px) !important;
    }
}

@media(max-width:650px){
    .site-footer .footer-inner{
        width:calc(100% - 20px) !important;
    }
}


/* ===== FINAL LAYOUT FIX ===== */

/* منع أي overflow أفقي */
html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
}

/* الصفحة الرئيسية بدون عرض زائد */
.page{
    width:min(1270px,calc(100% - 56px)) !important;
    max-width:1270px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* الأقسام السفلية: مسافات أنظف */
.extra-sections{
    display:grid !important;
    grid-template-columns:340px minmax(0,1fr) !important;
    gap:24px !important;
    width:100% !important;
    box-sizing:border-box !important;
}

.extra-panel{
    padding:15px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

/* كروت القسم الآسيوي */
.extra-movies{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
}

.extra-movie{
    min-width:0 !important;
}

.extra-movie .poster{
    width:100% !important;
    height:182px !important;
    border-radius:5px !important;
    overflow:hidden !important;
}

.extra-movie .poster img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

/* نصوص الكروت لا تخرج خارج الكارت */
.extra-movie .movie-name{
    left:6px !important;
    right:6px !important;
    bottom:7px !important;
    width:auto !important;
    text-align:center !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
}

/* قائمة الأنمي */
.anime-list{
    gap:8px !important;
}

.anime-row{
    min-height:56px !important;
    grid-template-columns:88px minmax(0,1fr) !important;
    gap:10px !important;
    padding:0 !important;
}

.anime-thumb{
    width:88px !important;
    height:54px !important;
}

.anime-title{
    font-size:11px !important;
    line-height:1.65 !important;
}

/* الفوتر: عرض الشاشة بالكامل بدون إنشاء scrollbar */
.site-footer{
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    margin:28px 0 0 !important;
    padding:0 !important;
    left:auto !important;
    right:auto !important;
    border-radius:0 !important;
}

.site-footer .footer-inner{
    width:min(1270px,calc(100% - 56px)) !important;
    max-width:1270px !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
}

/* نخلي خلفية الفوتر تمتد من الحافة للحافة فعلياً */
.site-footer{
    background:#252525 !important;
}

/* إصلاح الدائرة داخل الفوتر */
.site-footer:before{
    left:70px !important;
}

/* شاشات كبيرة */
@media(min-width:1300px){
    .page{
        width:calc(100% - 80px) !important;
        max-width:1270px !important;
    }
}

/* تابلت */
@media(max-width:1100px){
    .extra-sections{
        grid-template-columns:300px minmax(0,1fr) !important;
        gap:18px !important;
    }

    .extra-movies{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
}

/* موبايل */
@media(max-width:900px){
    .page{
        width:calc(100% - 24px) !important;
    }

    .extra-sections{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .extra-movies{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:8px !important;
    }

    .site-footer .footer-inner{
        width:calc(100% - 24px) !important;
    }
}

@media(max-width:650px){
    .extra-movies{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .extra-movie .poster{
        height:205px !important;
    }

    .site-footer .footer-inner{
        width:calc(100% - 20px) !important;
    }
}
/* =========================================================
   CATEGORY / ARCHIVE PAGE
   RTL - Dark Professional Style
========================================================= */

.content {
    width: 100%;
    direction: rtl;
    font-family: "Cairo", "Tajawal", Arial, sans-serif;
}

.content__wrapper {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.filters {
    width: 100%;
    padding: 25px 0 0;
}

.main__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.__right__title {
    display: flex;
    align-items: center;
}

.__head__text {
    position: relative;

    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0;
    padding-right: 12px;

    color: #fff;

    font-size: 22px;
    font-weight: 800;
    line-height: 1.5;
}

.__head__text::before {
    content: "";

    position: absolute;
    right: 0;
    top: 8px;
    bottom: 8px;

    width: 4px;

    border-radius: 5px;

    background: #ff4050;
}

.__head__text i {
    color: #ff4050;
    font-size: 20px;
}


/* =========================================================
   FILTER BOX
========================================================= */

.filter__box {
    position: relative;

    width: 100%;

    padding: 14px;

    background: #292929;

    border: 1px solid rgba(255,255,255,.05);

    border-radius: 12px;

    box-shadow:
        0 8px 30px rgba(0,0,0,.18);
}

.filter__items {
    display: flex;

    align-items: stretch;

    flex-wrap: wrap;

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   FILTER ITEM
========================================================= */

.filter__items > li {
    position: relative;

    min-width: 185px;

    flex: 1 1 185px;

    list-style: none;
}


/* =========================================================
   FILTER TITLE
========================================================= */

.filter__title {
    position: relative;

    min-height: 68px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 9px 12px;

    cursor: pointer;

    background: #333;

    border: 1px solid rgba(255,255,255,.07);

    border-radius: 10px;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.filter__title:hover {
    background: #383838;

    border-color: rgba(255,64,80,.35);
}

.filter__items > li.active > .filter__title {
    background: #383838;

    border-color: #ff4050;

    box-shadow:
        0 5px 20px rgba(0,0,0,.2);
}


/* =========================================================
   FILTER ICON
========================================================= */

.icon__one {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: rgba(255,64,80,.10);

    color: #ff4050;

    font-size: 17px;
}

.filter__items > li.active .icon__one {
    background: #ff4050;

    color: #fff;
}


/* =========================================================
   FILTER TEXT
========================================================= */

.filter__title .text {
    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 2px;
}

.filter__title .text p {
    margin: 0;

    color: #fff;

    font-size: 13px;
    font-weight: 800;
}

.filter__title .text em {
    display: block;

    max-width: 100%;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #999;

    font-size: 11px;

    font-style: normal;
}


/* =========================================================
   ARROW
========================================================= */

.icon__two {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #222;

    color: #aaa;

    font-size: 11px;

    transition: transform .25s ease, color .2s ease;
}

.filter__items > li.active .icon__two {
    color: #fff;

    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN
========================================================= */

.filter__items > li > ul {
    position: absolute;

    z-index: 9999;

    top: calc(100% + 8px);

    right: 0;

    width: 100%;

    max-height: 300px;

    overflow-y: auto;

    margin: 0;
    padding: 7px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-8px)
        scale(.98);

    transform-origin: top right;

    background: #303030;

    border: 1px solid rgba(255,255,255,.07);

    border-radius: 10px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.45);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;

    scrollbar-width: thin;

    scrollbar-color: #555 transparent;
}

.filter__items > li.active > ul {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   DROPDOWN SCROLLBAR
========================================================= */

.filter__items > li > ul::-webkit-scrollbar {
    width: 5px;
}

.filter__items > li > ul::-webkit-scrollbar-track {
    background: transparent;
}

.filter__items > li > ul::-webkit-scrollbar-thumb {
    background: #555;

    border-radius: 10px;
}


/* =========================================================
   DROPDOWN ITEMS
========================================================= */

.filter__items > li > ul > li {
    display: block;

    margin: 0;

    padding: 0;

    list-style: none;
}

.filter__items > li > ul > li > a {
    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 10px;

    color: #ddd;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    border-radius: 7px;

    transition:
        background .2s ease,
        color .2s ease;
}

.filter__items > li > ul > li > a:hover {
    background: rgba(255,64,80,.12);

    color: #fff;
}


/* =========================================================
   SELECT CIRCLE
========================================================= */

.select__circle {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #222;

    color: transparent;

    font-size: 10px;
}

.filter__items > li > ul > li.selected .select__circle {
    background: #ff4050;

    color: #fff;
}


/* =========================================================
   CATEGORY TITLE
========================================================= */

.section-title {
    margin: 30px 0 18px;

    padding-right: 13px;

    color: #fff;

    border-right: 4px solid #ff4050;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.5;
}


/* =========================================================
   MOVIES CONTAINER
========================================================= */

.movies-container {
    width: 100%;

    padding: 0;
}

.movies-grid {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 12px;

    width: 100%;
}


/* =========================================================
   MOVIE CARD
========================================================= */

.movie-card {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 2 / 3;

    overflow: hidden;

    background: #292929;

    border-radius: 6px;

    text-decoration: none;

    isolation: isolate;

    box-shadow:
        0 5px 15px rgba(0,0,0,.12);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.movie-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 12px 28px rgba(0,0,0,.35);
}


/* =========================================================
   MOVIE IMAGE
========================================================= */

.movie-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    background: #292929;

    transition:
        transform .4s ease,
        filter .3s ease;
}

.movie-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.02) 30%,
            rgba(0,0,0,.12) 45%,
            rgba(0,0,0,.95) 100%
        );
}

.movie-card:hover .movie-image {
    transform: scale(1.07);

    filter: brightness(.68);
}


/* =========================================================
   MOVIE TITLE
========================================================= */

.movie-card .movie-title {
    position: absolute;

    z-index: 2;

    right: 8px;
    left: 8px;
    bottom: 10px;

    color: #fff;

    font-size: 12px;
    font-weight: 800;

    line-height: 1.65;

    text-align: center;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-shadow:
        0 2px 5px rgba(0,0,0,.9);

    transition: color .2s ease;
}

.movie-card:hover .movie-title {
    color: #fff;
}


/* =========================================================
   IMAGE LOADER
========================================================= */

.images__loader {
    opacity: 1;

    transition:
        opacity .3s ease,
        transform .4s ease;
}


/* =========================================================
   PAGINATION
========================================================= */

.paginate {
    width: 100%;

    display: flex;

    justify-content: center;

    margin: 35px 0 20px;
}

.paginate .page-numbers {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.paginate .page-numbers li {
    margin: 0;

    list-style: none;
}

.paginate .page-numbers a,
.paginate .page-numbers span {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #303030;

    border: 1px solid rgba(255,255,255,.06);

    color: #ddd;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.paginate .page-numbers a:hover {
    background: #ff4050;

    color: #fff;

    transform: translateY(-2px);
}

.paginate .page-numbers .current {
    background: #ff4050;

    border-color: #ff4050;

    color: #fff;

    box-shadow:
        0 5px 15px rgba(255,64,80,.25);
}


/* =========================================================
   PREV / NEXT
========================================================= */

.paginate .page-numbers .prev,
.paginate .page-numbers .next {
    font-size: 18px;

    background: #353535;
}


/* =========================================================
   NO POSTS
========================================================= */

.movies-grid > p {
    grid-column: 1 / -1;

    margin: 20px 0;

    padding: 35px 20px;

    background: #292929;

    border-radius: 10px;

    color: #aaa;

    text-align: center;

    font-size: 14px;
}


/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (min-width: 1400px) {

    .content__wrapper {
        width: min(1380px, calc(100% - 50px));
    }

    .movies-grid {
        grid-template-columns:
            repeat(7, minmax(0, 1fr));

        gap: 14px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .movies-grid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }

    .filter__items > li {
        min-width: 170px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .content__wrapper {
        width: calc(100% - 24px);
    }

    .movies-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 10px;
    }

    .filter__items {
        gap: 8px;
    }

    .filter__items > li {
        flex: 1 1 calc(33.333% - 8px);

        min-width: 0;
    }

    .filter__title {
        min-height: 62px;

        padding: 8px;
    }

    .icon__one {
        width: 35px;
        height: 35px;

        flex-basis: 35px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .filters {
        padding-top: 18px;
    }

    .content__wrapper {
        width: calc(100% - 16px);
    }

    .__head__text {
        font-size: 18px;
    }

    .filter__box {
        padding: 9px;

        border-radius: 10px;
    }

    .filter__items {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;
    }

    .filter__items > li {
        min-width: 0;

        width: 100%;
    }

    .filter__title {
        min-height: 57px;

        gap: 7px;

        padding: 7px;
    }

    .icon__one {
        width: 33px;
        height: 33px;

        flex-basis: 33px;

        font-size: 14px;
    }

    .filter__title .text p {
        font-size: 11px;
    }

    .filter__title .text em {
        font-size: 9px;
    }

    .icon__two {
        width: 23px;
        height: 23px;

        flex-basis: 23px;

        font-size: 9px;
    }

    /*
       على الموبايل نخلي القائمة فوق المحتوى
       وبعرض العنصر نفسه
    */

    .filter__items > li > ul {
        width: 100%;

        max-height: 260px;
    }

    .section-title {
        margin: 22px 0 14px;

        font-size: 18px;
    }

    .movies-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 7px;
    }

    .movie-card {
        border-radius: 5px;
    }

    .movie-card .movie-title {
        right: 5px;
        left: 5px;
        bottom: 7px;

        font-size: 10px;

        line-height: 1.55;
    }

    .paginate {
        margin: 25px 0 15px;
    }

    .paginate .page-numbers {
        gap: 5px;
    }

    .paginate .page-numbers a,
    .paginate .page-numbers span {
        width: 36px;
        height: 36px;

        font-size: 11px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .movies-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .filter__items {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 330px) {

    .movies-grid {
        gap: 6px;
    }

    .movie-card .movie-title {
        font-size: 9px;
    }

}


/* =========================================================
   RTL FIXES
========================================================= */

[dir="rtl"] .filter__items,
[dir="rtl"] .movies-grid,
[dir="rtl"] .paginate {
    direction: rtl;
}


/* =========================================================
   REMOVE OLD THEME SPACING
========================================================= */

.filter__box ul,
.filter__box li,
.movies-grid,
.movies-grid a {
    box-sizing: border-box;
}


/* =========================================================
   LINKS
========================================================= */

.movies-grid a {
    color: inherit;
}

.movies-grid a:hover {
    text-decoration: none;
}


/* =========================================================
   FILTER ACTIVE MARK
========================================================= */

.filter__items > li.active > .filter__title::after {
    content: "";

    position: absolute;

    bottom: -1px;
    right: 15px;
    left: 15px;

    height: 2px;

    background: #ff4050;

    border-radius: 5px;
}
/* =========================================
   خلفية الموقع بالكامل
========================================= */

html,
body {
    margin: 0;
    min-height: 100%;
    background: #202020 !important;
}

/* صورة المقالة = الخلفية */
.movie-hero-bg {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    object-fit: cover !important;
    object-position: center !important;

    z-index: -2 !important;

    filter: brightness(.43) saturate(.72) !important;

    transform: scale(1.03) !important;

    pointer-events: none !important;
}

/* =========================================
   الضباب فوق الخلفية فقط
   وليس فوق المحتوى
========================================= */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    pointer-events: none;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(18,18,18,.88) 0%,
            rgba(25,25,25,.70) 45%,
            rgba(25,25,25,.46) 100%
        ),
        linear-gradient(
            0deg,
            rgba(15,15,15,.35),
            transparent 55%
        );
}

/* =========================================
   محتوى الموقع فوق الخلفية
========================================= */
.movie-hero-bg {
    filter:
        brightness(.32)
        saturate(.65)
        blur(2px) !important;

    transform: scale(1.05) !important;
}
body > * {
    position: relative;
    z-index: 1;
}

/* الـ Hero نفسه شفاف */
.movie-hero {
    position: relative !important;
    background: transparent !important;
}

/* إلغاء الضباب القديم */
.movie-hero::before {
    display: none !important;
}

/* المحتوى والبوستر واضحين */
.movie-hero-inner,
.movie-info,
.movie-poster {
    position: relative;
    z-index: 2;
}
/* مساحة المحتوى */
.movie-hero-inner{
    widths:min(1270px,calc(100% - 80px));
    min-height:625px;
    margin:auto;

    display:flex;
    align-items:center;
    gap:38px;

    padding-top:70px;
    padding-bottom:35px;
}

/* =========================================
   البوستر — يمين
========================================= */

.movie-poster{
    flex:0 0 295px;
    width:295px;
    height:445px;

    border-radius:5px;
    overflow:hidden;

    box-shadow:
        0 15px 35px rgba(0,0,0,.45),
        0 2px 5px rgba(0,0,0,.35);

    order:1;
}

.movie-poster img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

/* =========================================
   بيانات الفيلم
========================================= */

.movie-info{
    flex:1;
    min-width:0;
    text-align:right;
    order:2;
}

.movie-title{
    margin:0 0 15px;

    color:#fff;
    font-size:29px;
    line-height:1.55;
    font-weight:800;

    text-shadow:0 2px 5px rgba(0,0,0,.25);
}

.movie-title .english{
    direction:ltr;
    unicode-bidi:embed;
}

.movie-description{
    max-width:850px;
    margin:0 0 18px;

    color:#d1d1d1;
    font-size:14px;
    line-height:2;
    font-weight:500;
}

/* البيانات */
.movie-details{
    max-width:760px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 45px;

    margin-bottom:20px;
}

.movie-detail{
    color:#ddd;
    font-size:13px;
    line-height:2.1;
    white-space:nowrap;
}

.movie-detail i{
    width:19px;
    margin-left:5px;
    text-align:center;
    color:#ff4050;
}

/* زر المشاهدة */
.watch-later{
    display:inline-flex;
    align-items:center;
    gap:7px;

    border:0;
    border-radius:22px;

    padding:9px 19px;

    background:#ff4050;
    color:#fff;

    font-family:inherit;
    font-size:12px;
    font-weight:800;

    cursor:pointer;
    transition:.2s ease;
}

.watch-later:hover{
    transform:translateY(-2px);
    background:#ff3347;
}

/* =========================================
   مهم:
   الخلفية تمتد تحت الهيدر الموجود عندك.
   لا يوجد Header هنا.
========================================= */

/* لو الهيدر عندك ارتفاعه 80px:
   غيّر القيمة فقط إذا احتجت */
.movie-hero.with-existing-headersssss{
    margin-top:-80px;
    padding-top:80px;
}

.movie-hero.with-existing-header .movie-hero-inner{
    padding-top:70px;
}

/* =========================================
   Responsive
========================================= */

@media(max-width:1000px){

    .movie-hero-inner{
        width:calc(100% - 40px);
        gap:25px;
    }

    .movie-poster{
        flex-basis:245px;
        width:245px;
        height:390px;
    }

    .movie-title{
        font-size:24px;
    }

    .movie-description{
        font-size:13px;
    }

    .movie-detail{
        font-size:12px;
    }
}

@media(max-width:760px){

    .movie-hero{
        min-height:700px;
    }

    .movie-hero-inner{
        width:calc(100% - 24px);
        min-height:700px;

        flex-direction:column;
        justify-content:center;

        gap:18px;

        padding-top:45px;
        padding-bottom:35px;
    }

    .movie-poster{
        order:1;

        flex:0 0 auto;

        width:190px;
        height:285px;
    }

    .movie-info{
        order:2;
        width:100%;
        text-align:center;
    }

    .movie-title{
        font-size:20px;
        line-height:1.55;
    }

    .movie-description{
        font-size:11px;
        line-height:1.9;
        margin-left:auto;
        margin-right:auto;
    }

    .movie-details{
        grid-template-columns:1fr;
        gap:2px;

        justify-items:center;
        margin-left:auto;
        margin-right:auto;
    }

    .movie-detail{
        font-size:11px;
    }

    .watch-later{
        font-size:11px;
    }
}

@media(max-width:430px){

    .movie-poster{
        width:170px;
        height:255px;
    }

    .movie-title{
        font-size:18px;
    }
}


/* =========================================
   خلفية الصفحة
   استبدل الرابط بصورة الفيلم الحالية
========================================= */

.watch-page{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    padding:32px 0 70px;
}

.watch-bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:brightness(.43) saturate(.72);
    transform:scale(1.04);
    z-index:-3;
}

.watch-page::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(18,18,18,.88) 0%,
            rgba(25,25,25,.70) 45%,
            rgba(25,25,25,.46) 100%
        ),
        linear-gradient(
            0deg,
            rgba(15,15,15,.35),
            transparent 55%
        );
}

/* =========================================
   الحاوية
========================================= */

.watch-containers{
    width:min(1270px,calc(100% - 80px));
    margin:auto;
}

/* =========================================
   صندوق التواصل الاجتماعي
========================================= */

.social-box{
    width:100%;
    min-height:178px;

    background:rgba(18,18,18,.82);
    border:1px solid rgba(255,255,255,.04);
    border-radius:9px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    margin-bottom:40px;

    box-shadow:0 10px 35px rgba(0,0,0,.15);
}

.social-title{
    margin:0 0 20px;

    color:#ffc400;
    font-size:22px;
    font-weight:800;
}

.social-links{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:38px;
    direction:ltr;
}

.social-link{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    text-decoration:none;

    font-size:31px;

    transition:.2s ease;
}

.social-link:hover{
    color:#ffc400;
    transform:translateY(-3px);
}

/* =========================================
   صندوق المشاهدة
========================================= */

.watch-box{
    width:100%;

    background:rgba(18,18,18,.82);
    border:1px solid rgba(255,255,255,.04);
    border-radius:9px;

    padding:20px;

    box-shadow:0 10px 35px rgba(0,0,0,.15);
}

.watch-title{
    margin:0 0 22px;

    text-align:center;

    font-size:23px;
    font-weight:800;
    color:#d9d9d9;
}

.watch-title .movie-name{
    direction:ltr;
    unicode-bidi:embed;
}

/* =========================================
   عنوان السيرفرات
========================================= */

.servers-title{
    display:flex;
    align-items:center;
    justify-content:flex-start;

    gap:9px;

    margin-bottom:18px;

    font-size:16px;
    font-weight:800;
}

.servers-title i{
    color:#ff4050;
    font-size:20px;
}

/* =========================================
   أزرار السيرفرات
========================================= */

.servers{
    display:flex;
    align-items:center;
    justify-content:flex-start;

    gap:10px;

    flex-wrap:wrap;
}

.server-btn{
    min-width:180px;
    height:43px;

    border:2px solid #ff4050;
    border-radius:24px;

    background:transparent;

    color:#fff;

    padding:0 20px;

    font-family:inherit;
    font-size:13px;
    font-weight:800;

    cursor:pointer;

    transition:.2s ease;
}

.server-btn.active{
    background:#ff4050;
    color:#fff;
}

.server-btn:hover{
    background:#ff4050;
}

/* =========================================
   رسالة العضوية
========================================= */

.membership-message{
    width:100%;

    margin:15px 0;

    min-height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:8px 20px;

    border:1px solid rgba(255,64,80,.7);
    border-radius:25px;

    background:rgba(120,25,35,.55);

    color:#fff;

    font-size:13px;
    font-weight:700;

    text-align:center;
}

.membership-message strong{
    color:#fff;
}

.membership-message a{
    color:#fff;
    text-decoration:none;
}

/* =========================================
   مشغل الفيديو
========================================= */

.player{
    width:100%;
    height:520px;

    background:#000;

    border-radius:7px;
    overflow:hidden;

    margin-top:15px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#666;
    font-size:14px;
}

.player iframe{
    width:100%;
    height:100%;
    border:0;
}

/* =========================================
   Responsive
========================================= */

@media(max-width:900px){

    .watch-container{
        width:calc(100% - 30px);
    }

    .watch-page{
        padding-top:20px;
    }

    .social-box{
        min-height:155px;
        margin-bottom:25px;
    }

    .social-title{
        font-size:18px;
    }

    .social-links{
        gap:24px;
    }

    .social-link{
        font-size:27px;
    }

    .watch-box{
        padding:15px;
    }

    .watch-title{
        font-size:18px;
    }

    .server-btn{
        min-width:145px;
        flex:1 1 145px;
    }

    .player{
        height:400px;
    }
}

@media(max-width:600px){

    .watch-container{
        width:calc(100% - 18px);
    }

    .social-box{
        border-radius:8px;
    }

    .social-title{
        font-size:16px;
        margin-bottom:15px;
    }

    .social-links{
        gap:15px;
    }

    .social-link{
        width:38px;
        height:38px;
        font-size:24px;
    }

    .watch-box{
        padding:12px;
    }

    .watch-title{
        font-size:16px;
        line-height:1.8;
    }

    .servers{
        gap:8px;
    }

    .server-btn{
        width:100%;
        min-width:0;
        height:42px;
    }

    .membership-message{
        border-radius:12px;
        font-size:11px;
        line-height:1.8;
        padding:8px 12px;
    }

    .player{
        height:230px;
        border-radius:5px;
    }
}



/* =========================================
   عنوان سيرفرات المشاهدة
========================================= */

.servers-title {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0 0 16px;

    color: #fff;

    font-size: 16px;
    font-weight: 800;
}

.servers-title i {
    color: #ff4050;
    font-size: 19px;
}


/* =========================================
   قائمة السيرفرات
========================================= */

.servers {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 15px;
}


/* =========================================
   زر السيرفر
========================================= */

.server-btn {
    min-width: 185px;
    height: 43px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 0 20px;

    border: 2px solid #ff4050;
    border-radius: 24px;

    background: transparent;

    color: #fff;

    font-family: "Cairo", sans-serif;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.server-btn i {
    font-size: 12px;
}

.server-btn:hover {
    background: #ff4050;
    color: #fff;

    transform: translateY(-1px);
}

.server-btn.active {
    background: #ff4050;
    color: #fff;
}


/* =========================================
   رسالة الاشتراك
========================================= */

.membership-message {
    width: 100%;

    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px 20px;

    margin: 12px 0 15px;

    border: 1px solid rgba(255, 64, 80, .75);

    border-radius: 25px;

    background: rgba(120, 25, 35, .55);

    color: #fff;

    font-family: "Cairo", sans-serif;
    font-size: 13px;
    font-weight: 700;

    text-align: center;

    line-height: 1.8;
}

.membership-message strong {
    margin-right: 4px;
    color: #fff;
}


/* =========================================
   مشغل الفيديو
========================================= */

.player {
    width: 100%;
    height: 500px;

    overflow: hidden;

    background: #000;

    border-radius: 8px;
}

.player iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================
   شاشة البوستر
========================================= */

.player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    border-radius: 8px;
}

.player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-cover {
    position: absolute;
    inset: 0;
    z-index: 5;
    background-color: #000;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
}

.video-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.42);
}

.play-btn {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 80px;
    height: 80px;
    
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.35);
    
    backdrop-filter: blur(6px);
}

.play-btn i {
    color: #fff;
    font-size: 30px;
    margin-left: 4px;
}

/* =========================================
   Download Section
========================================= */

.download-section {
    width: 100%;
    margin: 25px 0;
    direction: rtl;
    font-family: "Cairo", Tahoma, sans-serif;
}


/* =========================================
   الرابط + المشاركة
========================================= */

.download-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    margin-bottom: 18px;

    flex-wrap: wrap;
}


/* المشاركة */

.download-share {
    height: 34px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 12px;

    border-radius: 22px;

    background: rgba(30, 30, 30, .82);

    color: #fff;

    font-size: 11px;
    font-weight: 700;
}

.download-share a {
    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    text-decoration: none;

    transition: .2s ease;
}

.download-share a:hover {
    color: #ff4050;
    transform: translateY(-2px);
}


/* الرابط */

.download-url {
    height: 34px;

    display: flex;
    align-items: center;

    min-width: 420px;

    padding: 0 6px 0 5px;

    border-radius: 22px;

    background: rgba(35, 35, 35, .85);

    color: #fff;

    font-size: 11px;
}

.download-url > span {
    white-space: nowrap;
    margin-right: 8px;
}

.download-url input {
    flex: 1;

    min-width: 0;

    height: 28px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #ddd;

    font-family: inherit;
    font-size: 11px;

    direction: ltr;

    text-align: left;
}

.download-url button {
    width: 27px;
    height: 27px;

    border: 0;
    border-radius: 50%;

    background: #eee;

    color: #333;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .2s;
}

.download-url button:hover {
    background: #ff4050;
    color: #fff;
}


/* =========================================
   عنوان السيرفرات
========================================= */

.download-title {
    display: flex;
    align-items: center;

    gap: 8px;

    margin: 0 0 14px;

    color: #fff;

    font-size: 15px;
    font-weight: 800;
}

.download-title i {
    color: #ff4050;

    font-size: 21px;
}


/* =========================================
   قائمة السيرفرات
========================================= */

.download-servers {
    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    flex-wrap: wrap;

    gap: 10px;
}


/* =========================================
   كارت السيرفر
========================================= */

.download-server {
    width: 150px;
    height: 64px;

    display: flex;
    align-items: center;

    justify-content: center;

    gap: 8px;

    position: relative;

    overflow: hidden;

    border-radius: 5px;

    background: rgba(10, 10, 10, .78);

    color: #fff;

    text-decoration: none;

    transition:
        transform .2s ease,
        background .2s ease;
}

.download-server:hover {
    transform: translateY(-3px);

    background: rgba(25, 25, 25, .95);
}


/* أيقونة التحميل */

.download-server-icon {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #aaa;

    font-size: 31px;

    order: 1;
}


/* اسم السيرفر */

.download-server-name {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    line-height: 1.35;

    order: 2;
}

.download-server-name span {
    color: #ddd;

    font-size: 12px;

    font-weight: 700;
}

.download-server-name strong {
    color: #ff4050;

    font-size: 13px;

    font-weight: 800;
}


/* =========================================
   الموبايل
========================================= */

@media (max-width: 700px) {

    .download-top {
        flex-direction: column;
        align-items: stretch;
    }

    .download-share {
        width: fit-content;
    }

    .download-url {
        width: 100%;
        min-width: 0;
    }

    .download-servers {
        gap: 8px;
    }

    .download-server {
        width: calc(50% - 4px);
        height: 62px;
    }

}

@media (max-width: 400px) {

    .download-server {
        width: 100%;
    }

}

.movie-cast {
    position: relative;
    width: 100%;
    margin: 25px 0;
    padding: 28px 35px 35px;

    direction: rtl;

    background:
        linear-gradient(
            rgba(10,10,10,.82),
            rgba(10,10,10,.82)
        );

    border-radius: 14px;

    overflow: hidden;
}

.movie-cast::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.04),
            transparent 65%
        );

    pointer-events: none;
}

.cast-title {
    position: relative;

    display: block;

    width: fit-content;

    margin-rightss: auto;
    margin-bottom: 20px;

    padding-right: 10px;

    border-right: 4px solid #ff4050;

    color: #fff;

    font-family: "Cairo", sans-serif;
    font-size: 16px;
    font-weight: 800;

    line-height: 1.5;
}

.cast-list {
    position: relative;

    display: flex;

    align-items: flex-start;
    justify-content: flex-start;

    gap: 16px;

    flex-wrap: wrap;
}

.cast-item {
    width: 130px;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-decoration: none;

    transition: .25s ease;
}

.cast-item:hover {
    transform: translateY(-5px);
}

.cast-image {
    width: 112px;
    height: 112px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    border-radius: 50%;

    overflow: hidden;

    box-shadow:
        0 4px 10px rgba(0,0,0,.45);

    color: #ff4050;

    font-size: 70px;

    position: relative;
}

.cast-image i {
    color: #ff4050;

    filter: drop-shadow(
        0 2px 2px rgba(0,0,0,.2)
    );
}

.cast-name {
    width: 100%;

    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: -1px;

    padding: 7px 5px;

    background: rgba(255,255,255,.10);

    border-radius: 0 0 4px 4px;

    color: #fff;

    font-family: "Cairo", sans-serif;
    font-size: 12px;
    font-weight: 800;

    text-align: center;

    line-height: 1.5;
}


/* الموبايل */

@media (max-width: 767px) {

    .movie-cast {
        padding: 20px 15px;
    }

    .cast-list {
        justify-content: center;

        gap: 12px;
    }

    .cast-item {
        width: 105px;
    }

    .cast-image {
        width: 90px;
        height: 90px;

        font-size: 55px;
    }

    .cast-name {
        font-size: 11px;
    }

}



/* =========================================
   أفلام قد تعجبك
========================================= */

.related-movies {
    width: 100%;
    margin: 30px 0;
    direction: rtl;
}

.related-title {
    margin-bottom: 18px;
    padding-right: 10px;

    border-right: 4px solid #ff4050;

    color: #fff;

    font-family: "Cairo", sans-serif;
    font-size: 17px;
    font-weight: 800;

    text-align: right;
}


/* =========================================
   Grid
========================================= */

.related-grid {
    display: grid;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 10px;
}


/* =========================================
   الكارت
========================================= */

.related-card {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 2 / 3;

    overflow: hidden;

    background: #272727;

    border-radius: 4px;

    text-decoration: none;

    isolation: isolate;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.related-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.45);
}


/* =========================================
   الصورة
========================================= */

.related-poster {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease,
        filter .3s ease;
}

.related-card:hover .related-poster {
    transform: scale(1.06);

    filter: brightness(.65);
}


/* =========================================
   الصورة غير موجودة
========================================= */

.related-poster.no-image {
    background:
        #292929
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Ccircle cx='50' cy='65' r='20' fill='none' stroke='%23383838' stroke-width='8'/%3E%3Ccircle cx='50' cy='65' r='10' fill='%23383838'/%3E%3C/svg%3E")
        center/80px no-repeat;
}


/* =========================================
   Overlay
========================================= */

.related-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.05) 20%,
            rgba(0,0,0,.15) 40%,
            rgba(0,0,0,.95) 100%
        );

    opacity: .9;

    transition: .3s ease;
}

.related-card:hover .related-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.15),
            rgba(0,0,0,.85)
        );
}


/* =========================================
   المحتوى فوق الصورة
========================================= */

.related-info {
    position: absolute;

    inset: 0;

    z-index: 2;

    padding: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

    text-align: center;
}


/* =========================================
   الجودة
========================================= */

.related-quality {
    position: absolute;

    top: 10px;
    right: 8px;

    padding: 4px 8px;

    border-radius: 10px;

    background: #222;

    color: #fff;

    font-family: "Cairo", sans-serif;
    font-size: 10px;
    font-weight: 800;
}


/* =========================================
   النوع
========================================= */

.related-genre {
    position: absolute;

    top: 38px;
    right: 8px;

    padding: 3px 9px;

    border-radius: 10px;

    background: #ffc400;

    color: #111;

    font-family: "Cairo", sans-serif;
    font-size: 10px;
    font-weight: 800;
}


/* =========================================
   زر التشغيل
========================================= */

.related-play {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    transform:
        translate(-50%, -50%)
        scale(.65);

    border-radius: 50%;

    background: rgba(255,255,255,.9);

    color: #ff4050;

    font-size: 22px;

    opacity: 0;

    transition:
        opacity .25s ease,
        transform .3s ease;
}

.related-card:hover .related-play {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* =========================================
   اسم الفيلم
========================================= */

.related-name {
    width: 100%;

    min-height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 5px 4px;

    color: #fff;

    font-family: "Cairo", sans-serif;

    font-size: 11px;
    font-weight: 800;

    line-height: 1.6;

    text-align: center;

    text-shadow:
        0 2px 4px rgba(0,0,0,.8);
}


/* =========================================
   Hover على الاسم
========================================= */

.related-card:hover .related-name {
    color: #fff;
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 1000px) {

    .related-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

}


/* =========================================
   Mobile
========================================= */

@media (max-width: 650px) {

    .related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 7px;
    }

    .related-name {
        font-size: 10px;

        min-height: 43px;
    }

    .related-quality,
    .related-genre {
        font-size: 8px;

        padding: 3px 6px;
    }

    .related-genre {
        top: 34px;
    }

    .related-play {
        width: 45px;
        height: 45px;

        font-size: 17px;
    }

}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 400px) {

    .related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}









/* =========================================================
   EPISODES + SEASONS
========================================================= */

.episodes__section {
    width: 100%;
    direction: rtl;
    font-family: "Cairo", "Tajawal", Arial, sans-serif;
}


/* =========================================================
   HEADER
========================================================= */

.episodes__section .main__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 18px;
}

.episodes__section .__right__title {
    display: flex;
    align-items: center;
}

.episodes__section .__head__text {
    position: relative;

    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0;
    padding-right: 13px;

    color: #fff;

    font-size: 21px;
    font-weight: 800;
}

.episodes__section .__head__text::before {
    content: "";

    position: absolute;

    right: 0;
    top: 5px;
    bottom: 5px;

    width: 4px;

    background: #ff4050;

    border-radius: 5px;
}

.episodes__section .__head__text i {
    color: #ff4050;

    font-size: 20px;
}


/* =========================================================
   SEASON SELECT
========================================================= */

.list__sub__cats {
    position: relative;

    z-index: 100;
}

.filter__bttn {
    min-width: 180px;

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 8px 12px;

    box-sizing: border-box;

    background: #303030;

    border: 1px solid rgba(255,255,255,.07);

    border-radius: 9px;

    color: #fff;

    cursor: pointer;

    user-select: none;

    transition: .2s ease;
}

.filter__bttn:hover {
    background: #383838;

    border-color: rgba(255,64,80,.5);
}

.filter__bttn > i:first-child {
    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: rgba(255,64,80,.12);

    color: #ff4050;

    font-size: 14px;
}

.filter__bttn b {
    flex: 1;

    color: #fff;

    font-size: 12px;

    text-align: right;
}

.down__arrow {
    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #222;

    color: #aaa;

    font-size: 10px;

    transition: transform .25s ease;
}


/* =========================================================
   SEASON DROPDOWN
========================================================= */

.list__sub__cats > ul {
    position: absolute;

    top: calc(100% + 7px);

    right: 0;

    width: 100%;

    min-width: 180px;

    max-height: 280px;

    overflow-y: auto;

    margin: 0;

    padding: 6px;

    list-style: none;

    background: #303030;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 9px;

    box-shadow: 0 15px 35px rgba(0,0,0,.45);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(-7px);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;

    z-index: 99999;
}


/* =========================================================
   OPEN STATE
========================================================= */

.list__sub__cats:hover > ul,
.list__sub__cats:focus-within > ul {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}

.list__sub__cats:hover .down__arrow {
    transform: rotate(180deg);
}


/* =========================================================
   SEASON ITEM
========================================================= */

.list__sub__cats > ul > li {
    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 42px;

    margin: 0;

    padding: 5px 7px;

    list-style: none;

    border-radius: 7px;

    transition: background .2s ease;
}

.list__sub__cats > ul > li:hover {
    background: rgba(255,64,80,.12);
}

.list__sub__cats > ul > li.selected {
    background: rgba(255,64,80,.15);
}


/* =========================================================
   CHECK CIRCLE
========================================================= */

.list__sub__cats .select__circle {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #222;

    color: transparent;

    font-size: 10px;
}

.list__sub__cats > ul > li.selected .select__circle {
    background: #ff4050;

    color: #fff;
}


/* =========================================================
   SEASON LINK
========================================================= */

.list__sub__cats > ul > li > a {
    flex: 1;

    color: #ddd;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;
}

.list__sub__cats > ul > li:hover > a {
    color: #fff;
}


/* =========================================================
   EPISODES GRID
========================================================= */

.episodes__list {
    display: grid !important;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 10px;

    width: 100%;

    margin: 0;

    padding: 0;

    list-style: none;

    direction: rtl;
}


/* إزالة كلاسات القالب القديمة */
.episodes__list > li {
    width: auto !important;

    max-width: none !important;

    flex: none !important;

    margin: 0 !important;

    padding: 0 !important;

    list-style: none;
}


/* =========================================================
   EPISODE CARD
========================================================= */

.episodes__list > li > a {
    position: relative;

    min-height: 78px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 10px;

    overflow: hidden;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #353535,
            #222
        );

    border: 1px solid rgba(255,255,255,.05);

    border-radius: 9px;

    color: #fff;

    text-decoration: none;

    box-shadow:
        0 5px 15px rgba(0,0,0,.18);

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.episodes__list > li > a::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,64,80,.10),
            transparent 55%
        );

    opacity: 0;

    transition: opacity .2s ease;
}

.episodes__list > li > a:hover {
    transform: translateY(-3px);

    background:
        linear-gradient(
            145deg,
            #3b3b3b,
            #252525
        );

    border-color: rgba(255,64,80,.5);

    box-shadow:
        0 10px 25px rgba(0,0,0,.3);
}

.episodes__list > li > a:hover::before {
    opacity: 1;
}


/* =========================================================
   ACTIVE EPISODE
========================================================= */

.episodes__list > li > a.active {
    background:
        linear-gradient(
            145deg,
            #ff4050,
            #d92e3d
        );

    border-color: #ff4050;

    box-shadow:
        0 8px 22px rgba(255,64,80,.28);
}

.episodes__list > li > a.active::before {
    opacity: 0;
}


/* =========================================================
   PLAY ICON
========================================================= */

.ply__icon {
    position: relative;

    z-index: 2;

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ff4050;

    color: #fff;

    font-size: 11px;

    transition:
        transform .2s ease,
        background .2s ease;
}

.episodes__list > li > a:hover .ply__icon {
    transform: scale(1.08);

    background: #ff4050;
}

.episodes__list > li > a.active .ply__icon {
    background: rgba(255,255,255,.18);
}


/* =========================================================
   EPISODE NUMBER
========================================================= */

.epi__num {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    color: #aaa;

    font-size: 10px;

    font-weight: 700;

    text-align: center;
}

.epi__num b {
    color: #fff;

    font-size: 13px;

    font-weight: 900;
}

.episodes__list > li > a.active .epi__num {
    color: rgba(255,255,255,.85);
}

.episodes__list > li > a.active .epi__num b {
    color: #fff;
}


/* =========================================================
   SECTION SPACING
========================================================= */

.episodes__section.mt__30 {
    margin-top: 30px;
}

.episodes__section.mb__30 {
    margin-bottom: 30px;
}


/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (min-width: 1400px) {

    .episodes__list {
        grid-template-columns:
            repeat(8, minmax(0, 1fr));

        gap: 12px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .episodes__list {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .episodes__section .main__head {
        align-items: flex-start;
    }

    .episodes__list {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap: 8px;
    }

    .filter__bttn {
        min-width: 160px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .episodes__section .main__head {
        flex-direction: column;

        align-items: stretch;

        gap: 12px;
    }

    .episodes__section .__head__text {
        font-size: 18px;
    }

    .episodes__section .__head__text i {
        font-size: 17px;
    }

    .episodes__section .__head__left {
        width: 100%;
    }

    .list__sub__cats {
        width: 100%;
    }

    .filter__bttn {
        width: 100%;

        min-width: 0;
    }

    .list__sub__cats > ul {
        width: 100%;
    }

    .episodes__list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 7px;
    }

    .episodes__list > li > a {
        min-height: 68px;

        padding: 7px;

        border-radius: 7px;
    }

    .ply__icon {
        width: 28px;
        height: 28px;

        font-size: 10px;
    }

    .epi__num {
        font-size: 9px;
    }

    .epi__num b {
        font-size: 11px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .episodes__list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 330px) {

    .episodes__list {
        gap: 6px;
    }

    .episodes__list > li > a {
        min-height: 64px;
    }

}


/* =========================================================
   RTL
========================================================= */

[dir="rtl"] .episodes__section,
[dir="rtl"] .episodes__list {
    direction: rtl;
}
/* =========================================
   MAIN MENU
========================================= */

#mainNav {
    direction: rtl;
}

#mainNav .main-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#mainNav .main-menu > li {
    position: relative;
    list-style: none;
}

#mainNav .main-menu > li > a {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 12px 15px;

    color: #aaa;
    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;

    transition: .2s;
}

#mainNav .main-menu > li > a:hover,
#mainNav .main-menu > li.active > a {
    color: #fff;
}

#mainNav .main-menu > li.active > a {
    border-bottom: 2px solid #ff4050;
}

#mainNav .main-menu > li > a > i {
    color: #ff4050;
}


/* =========================================
   SUB MENU
========================================= */

#mainNav .sub-menu {
    position: absolute;

    top: calc(100% + 5px);
    right: 0;

    min-width: 190px;

    margin: 0;
    padding: 8px;

    list-style: none;

    background: #242424;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 10px;

    box-shadow: 0 15px 35px rgba(0,0,0,.45);

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;

    z-index: 99999;
}


/* فتح بالماوس */

#mainNav .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* عنصر Sub Menu */

#mainNav .sub-menu li {
    position: relative;

    margin: 0;
    padding: 0;

    list-style: none;
}

#mainNav .sub-menu li a {
    display: flex;
    align-items: center;

    width: 100%;

    box-sizing: border-box;

    padding: 10px 12px;

    color: #bbb;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    border-radius: 7px;

    transition: .2s;
}

#mainNav .sub-menu li a:hover,
#mainNav .sub-menu li.active > a {
    color: #fff;
    background: rgba(255,255,255,.07);
}


/* =========================================
   زر السهم
========================================= */

.submenu-toggle {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    margin-right: 4px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #aaa;

    cursor: pointer;
}

.submenu-toggle i {
    font-size: 10px;

    transition: transform .2s ease;
}

.menu-item-has-children.open > a .submenu-toggle i {
    transform: rotate(180deg);
}


/* =========================================
   Sub Menu داخل Sub Menu
========================================= */

#mainNav .sub-menu .sub-menu {
    top: 0;
    right: calc(100% + 5px);
}


/* فتح المستوى الثاني */

#mainNav .sub-menu .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    #mainNav .main-menu {
        display: block;
    }

    #mainNav .main-menu > li {
        width: 100%;
    }

    #mainNav .main-menu > li > a {
        width: 100%;
        justify-content: flex-start;
        padding: 13px;
    }

    #mainNav .sub-menu {
        position: static;

        width: 100%;
        min-width: 0;

        display: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        box-shadow: none;

        border: 0;

        background: rgba(0,0,0,.15);
    }

    #mainNav .menu-item-has-children.open > .sub-menu {
        display: block;
    }

    #mainNav .sub-menu .sub-menu {
        position: static;
        display: none;
    }

    #mainNav .sub-menu .menu-item-has-children.open > .sub-menu {
        display: block;
    }
}

/* =========================================
   HEADER LEFT
========================================= */

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    direction: ltr;
}


/* =========================================
   SOCIAL
========================================= */

.social-mini {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-mini a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    color: #aaa;
    text-decoration: none;

    transition: .2s ease;
}

.social-mini a:hover {
    color: #ff4050;
}

.social-mini i {
    font-size: 12px;
}


/* =========================================
   LOGIN
========================================= */

.login {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 8px 12px;

    border: 1px solid #ff4050;
    border-radius: 20px;

    color: #fff;
    background: transparent;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    transition: .2s ease;
}

.login:hover {
    background: #ff4050;
    color: #fff;
}

.login i {
    font-size: 12px;
}


/* =========================================
   SEARCH BUTTON
========================================= */

.search-mini {
    width: 38px;
    height: 38px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: #353535;
    color: #aaa;

    cursor: pointer;

    transition: .2s ease;
}

.search-mini:hover {
    background: #ff4050;
    color: #fff;
}

.search-mini i {
    font-size: 14px;
}


/* =========================================
   MOBILE SEARCH
========================================= */

.mobile-search {
    position: fixed;

    top: 75px;
    right: 20px;
    left: 20px;

    z-index: 99999;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}

.mobile-search.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.mobile-search-form {
    display: flex;
    align-items: center;

    width: 100%;

    box-sizing: border-box;

    padding: 7px 8px 7px 12px;

    background: #252525;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 14px;

    box-shadow: 0 15px 40px rgba(0,0,0,.4);

    direction: rtl;
}


.mobile-search-form > i {
    color: #aaa;

    margin-left: 10px;

    font-size: 14px;
}


.mobile-search-form input {
    flex: 1;

    min-width: 0;

    height: 40px;

    padding: 0 8px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #fff;

    font-family: inherit;
    font-size: 13px;

    direction: rtl;
}

.mobile-search-form input::placeholder {
    color: #888;
}


.mobile-search-form button {
    height: 36px;

    padding: 0 15px;

    border: 0;
    border-radius: 9px;

    background: #ff4050;
    color: #fff;

    cursor: pointer;

    font-family: inherit;
    font-weight: 700;
}


/* =========================================
   DESKTOP
========================================= */



/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .header-left {
        gap: 6px;
    }

    .social-mini {
        display: none;
    }

    .login {
        display: none;
    }

    .search-mini {
        width: 40px;
        height: 40px;

        background: #eef1f4;
        color: #222;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
    }

}