*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

background:#ece5d8;

font-family:'Cairo',Tahoma,sans-serif;

font-size:16px;

font-weight:600;

color:#222;

}
a{
text-decoration:none;
color:inherit;
}

img{
display:block;
max-width:100%;
}

.wrapper{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:0 0px;
}
/*========================
HEADER
========================*/

.header{

background: linear-gradient(#d2cabd, #ece5d8);

border-bottomss:1px solid #d4cec2;

padding:15px;

display:flex;

align-items:center;

gap:20px;

position:relative;

}

.logo{

width:190px;

flex-shrink:0;

order:1;

}

.banner{

flex:1;

height:90px;

border:1px solid #666;

background:#222;

overflow:hidden;

order:2;

}

.menu-btn{

display:none;

order:3;

}

.logo-name{

font-size:46px;

color:#c97c29;

font-weight:700;

letter-spacing:-2px;

}

.logo-url{

font-size:12px;

color:#888;

margin-top:-6px;

}

.banner{

flex:1;

height:90px;

background:#222;

overflow:hidden;

border:1px solid #666;

}

.banner img{

width:100%;

height:100%;

object-fit:cover;

}

/*========================
MENU BUTTON
========================*/

.menu-btn{

display:none;

width:45px;

height:45px;

border:none;

background:#f57b00;

color:#fff;

font-size:24px;

cursor:pointer;

border-radius:6px;

}

/*========================
LAYOUT
========================*/

.container{

display:flex;

gap:20px;

padding:15px;

align-items:flex-start;

}

/* القائمة يمين */

.sidebar{

width:210px;

flex-shrink:0;

order:1;

}

.main{

flex:1;

order:2;

}

/*========================
SIDEBAR
========================*/

.sidebar-box{

background:#aaa79e;

border-radius:8px 8px 0 0;

overflow:hidden;

border:1px solid #cfc9bf;

}

.sidebar-title{

height:32px;

background:linear-gradient(#ff9800,#f57b00);

}

.sidebar a{

display:block;

padding:9px;

text-align:center;

font-size:14px;

border-bottom:1px solid #8f8d86;

transition:.2s;
color: #fff;
}

.sidebar a:hover,
.sidebar a.active{

background:#ff8500;

color:#fff;

}
/*=========================
TOP SECTION
=========================*/

.top-section{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

background:#fff;

border:1px solid #d7d1c6;

border-radius:6px;

padding:12px 15px;

margin-bottom:20px;

}

/*=========================
TOP MENU
=========================*/

.top-menu{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

}

.top-menu a{

font-size:14px;

color:#444;

padding:8px 12px;

border-radius:4px;

transition:.25s;

}

.top-menu a:hover{

background:#f57b00;

color:#fff;

}

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

.search-box{

display:flex;

direction:ltr;

height:44px;

}

.search-box input{

width:240px;

border:none;

outline:none;

background:#555;

color:#fff;

padding:0 15px;

font-size:14px;

border-radius:0 25px 25px 0;

direction:rtl;

}

.search-box input::placeholder{

color:#ddd;

}

.search-box button{

width:95px;

border:none;

cursor:pointer;

background:linear-gradient(#ff9800,#f57b00);

color:#fff;

font-size:15px;

border-radius:25px 0 0 25px;

transition:.25s;

}

.search-box button:hover{

background:#e46e00;

}

/*=========================
SECTION TITLE
=========================*/

.section-title{

height:50px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(#ff9800,#f57b00);

border-radius:6px;

color:#fff;

font-size:20px;

font-weight:bold;

margin-bottom:20px;

box-shadow:0 3px 8px rgba(0,0,0,.15);

}

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

.movies-container{

background:#fff;

border:1px solid #d7d1c6;

border-radius:6px;

padding:15px;

}

.movies-grid{

display:grid;

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

gap:15px;

}

.movie-card{

display:block;

background:#f8f6f1;

border:1px solid #d4cec4;

overflow:hidden;

border-radius:5px;

transition:.25s;

}

.movie-card:hover{

transform:translateY(-4px);

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

}

.movie-image{

width:100%;

aspect-ratio:2/3;

object-fit:cover;

}

.movie-title{

height:42px;

display:flex;

align-items:center;

justify-content:center;

padding:5px;

background:#fff;

font-size:13px;

text-align:center;

overflow:hidden;

}

/*=========================
FOOTER
=========================*/

.footer{

margin-top:25px;

background:#37352f;

color:#fff;

text-align:center;

padding:20px;

font-size:14px;

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:1100px){

.movies-grid{

grid-template-columns:repeat(4,1fr);

}

}

@media(max-width:768px){

.top-section{

flex-direction:column;

align-items:stretch;

}

.top-menu{

justify-content:center;

}

.search-box{

width:100%;

}

.search-box input{

flex:1;

width:auto;

}

.movies-grid{

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

gap:10px;

}

.section-title{

font-size:18px;

height:45px;

}

.movie-title{

font-size:12px;

height:40px;

}

}

@media(max-width:420px){

.movies-grid{

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

gap:8px;

}

.top-menu{

gap:8px;

}

.top-menu a{

font-size:12px;

padding:6px 8px;

}

}
/*========================
OVERLAY
========================*/

.overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.45);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:998;

}

.overlay.show{

opacity:1;

visibility:visible;

}

/*========================
RESPONSIVE
========================*/

@media(max-width:768px){

.menu-btn{

display:flex;

align-items:center;

justify-content:center;

position:absolute;

right:15px;

top:15px;

}

.header{

flex-direction:column;

}

.banner{

width:100%;

}

.container{

display:block;

padding:10px;

}

.sidebar{

position:fixed;

top:0;

right:-240px;

width:220px;

height:100%;

background:#aaa79e;

transition:.35s;

overflow:auto;

z-index:999;

}

.sidebar.open{

right:0;

}

.main{

width:100%;

}

}
.top-menu a{

display:flex;

align-items:center;

gap:8px;

font-size:14px;

color:#444;

padding:8px 12px;

border-radius:4px;

transition:.25s;

}

.top-menu a i{

font-size:14px;

color:#f57b00;

}

.top-menu a:hover{

background:#f57b00;

color:#fff;

}

.top-menu a:hover i{

color:#fff;

}

.search-box button{

display:flex;

align-items:center;

justify-content:center;

gap:8px;

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

.mobile-bottom-nav{
display:none;
}

@media (max-width:768px){

/* الهيدر */

.header{
padding:10px;
}

/* اخفاء القائمة */

.top-menu{
display:none;
}

/* اظهار البحث */

.top-section{

display:block;

background:#fff;

padding:10px;

margin-bottom:15px;


top:0;

z-index:999;

border-bottom:1px solid #ddd;

}

/* البحث */



/* القائمة السفلية */

.mobile-bottom-nav{

display:flex;

position:fixed;

left:0;

right:0;

bottom:0;

height:65px;

background:#fff;

border-top:2px solid #f57b00;

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

z-index:9999;

}

.mobile-bottom-nav a{

flex:1;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

font-size:11px;

font-weight:bold;

color:#555;

transition:.25s;

}

.mobile-bottom-nav a i{

font-size:21px;

margin-bottom:4px;

color:#f57b00;

}

.mobile-bottom-nav a:hover,
.mobile-bottom-nav a.active{

background:#f57b00;

color:#fff;

}

.mobile-bottom-nav a:hover i,
.mobile-bottom-nav a.active i{

color:#fff;

}

/* الجريد */

.movies-grid{

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

gap:10px;

}

/* مسافات حتى لا يغطى البحث والقائمة */



}

/* موبايلات صغيرة */

@media (max-width:420px){

.movies-grid{

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

gap:8px;

}

.movie-title{

font-size:12px;

}

.search-box input{

font-size:13px;

}

}

/*//////////////myegy///////////////*/

	.movie-image{
    width:100%;
    display:block;
    opacity:.4;
    filter:blur(8px);
    transition:opacity .3s ease, filter .3s ease;
}

.movie-image.loaded{
    opacity:1;
    filter:blur(0);
}
.paginate{
    width:100%;
    margin:25px 0;
    display:flex;
    justify-content:center;
}

.paginate .page-numbers{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    list-style:none;
    padding:0;
    margin:0;
}

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

.paginate .page-numbers a,
.paginate .page-numbers span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:8px;
    background:#fff;
    border:1px solid #d8d8d8;
    color:#444;
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    transition:.25s;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.paginate .page-numbers a:hover{
    background:#ff8a00;
    border-color:#ff8a00;
    color:#fff;
    transform:translateY(-2px);
}

.paginate .page-numbers .current{
    background:#ff8a00;
    color:#fff;
    border-color:#ff8a00;
    cursor:default;
}

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

@media(max-width:768px){

    .paginate{
        margin:20px 0;
    }

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

    .paginate .page-numbers a,
    .paginate .page-numbers span{
        width:36px;
        height:36px;
        font-size:14px;
    }

    .paginate .page-numbers .prev,
    .paginate .page-numbers .next{
        width:40px;
    }

}
/* =========================================================
   MYEGY - SINGLE POST STYLE
   RTL MOVIE / SERIES PAGE
   Desktop + Tablet + Mobile
========================================================= */

:root {
    --primary: #ff7900;
    --primary-hover: #e96800;

    --bg: #f5f1e8;
    --white: #ffffff;

    --text: #292929;
    --muted: #777;

    --border: #e8e4dc;

    --radius: 10px;

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


/* =========================================================
   RESET
========================================================= */

.single__area,
.single__area * {
    box-sizing: border-box;
}

.single__area {
    direction: rtl;

    width: 100%;

    padding:
        30px
        0
        70px;

    background: var(--bg);

    color: var(--text);
}

.content__wrapper {
    width: 100%;

    max-width: 1200px;

    margin:
        0
        auto;

    padding:
        0
        15px;
}


/* =========================================================
   MAIN COVER
========================================================= */

.single__cover {
    position: relative;

    width: 100%;

    height: 520px;

    overflow: visible;

    background: #222;

    border-radius: var(--radius);

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

    isolation: isolate;
}


/* =========================================================
   COVER IMAGE
========================================================= */

.single__cover > .images__loader {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    border-radius: var(--radius);

    z-index: -2;
}


/* =========================================================
   DARK CINEMATIC OVERLAY
========================================================= */

.single__cover::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    border-radius: var(--radius);

    background:

        linear-gradient(
            to right,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.65) 35%,
            rgba(0,0,0,.20) 70%,
            rgba(0,0,0,.45) 100%
        ),

        linear-gradient(
            to top,
            rgba(0,0,0,.95) 0%,
            rgba(0,0,0,.15) 65%
        );
}


/* =========================================================
   TRAILER BUTTON
========================================================= */

.single__cover > .show__trailer {
    position: absolute;

    top: 25px;
    right: 25px;

    z-index: 10;

    display: inline-flex;

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

    gap: 9px;

    height: 45px;

    padding:
        0
        18px;

    color: #fff;

    background: var(--primary);

    border-radius: 6px;

    cursor: pointer;

    font-size: 13px;

    font-weight: 700;

    transition:
        .25s
        ease;
}

.single__cover > .show__trailer:hover {
    background: var(--primary-hover);

    transform:
        translateY(-2px);
}

.single__cover > .show__trailer .icon {
    width: 22px;
    height: 22px;

    display: flex;

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

.single__cover > .show__trailer svg {
    width: 19px;
    height: 19px;
}


/* =========================================================
   TITLE AREA
========================================================= */

.title__single {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: 5;

    padding:
        35px
        360px
        35px
        35px;

    text-align: right;
}


/* =========================================================
   LIKE + VIEWS
========================================================= */

.user__actions {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 15px;
}

.like__btn {
    height: 36px;

    display: inline-flex;

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

    gap: 7px;

    padding:
        0
        12px;

    color: #fff;

    background:
        rgba(0,0,0,.55);

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

    border-radius: 5px;

    cursor: pointer;

    transition:
        .25s;
}

.like__btn:hover {
    background: var(--primary);

    border-color:
        var(--primary);
}

.like__btn i {
    font-size: 13px;
}

.like__count {
    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   TITLE + BREADCRUMB
========================================================= */

.itms__l {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;
}

.title__and__br {
    min-width: 0;

    width: 100%;
}

.post__name {
    max-width: 700px;

    margin:
        0
        0
        12px;

    color: #fff;

    font-size:
        clamp(
            25px,
            3vw,
            40px
        );

    font-weight: 800;

    line-height: 1.35;

    text-shadow:
        0
        2px
        10px
        rgba(0,0,0,.6);
}


/* =========================================================
   BREADCRUMB
========================================================= */

.bread__crumbs {
    margin-top: 8px;
}

.bread__crumbs ol {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 7px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.bread__crumbs li {
    color:
        rgba(255,255,255,.75);

    font-size: 12px;
}

.bread__crumbs a {
    color: inherit;

    text-decoration: none;

    transition: .2s;
}

.bread__crumbs a:hover {
    color: var(--primary);
}

.bread__crumbs li:not(:last-child)::after {
    content: "/";

    margin-right: 7px;

    color:
        rgba(255,255,255,.4);
}


/* =========================================================
   IMDb RATING
========================================================= */

.left__title {
    flex-shrink: 0;
}

.rating__box {
    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 45px;

    padding:
        7px
        12px;

    color: #fff;

    background:
        rgba(0,0,0,.65);

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

    border-radius: 6px;
}

.icon__logo {
    width: 43px;
    height: 30px;

    display: flex;

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

    overflow: hidden;

    background: #f5c518;

    border-radius: 4px;
}

.icon__logo svg {
    width: 38px;
    height: 38px;
}

.rate__txt {
    font-size: 13px;

    font-weight: 700;
}

.star__icon {
    color: #f5c518;

    font-size: 14px;
}

.votes {
    color:
        rgba(255,255,255,.7);

    font-size: 11px;
}


/* =========================================================
   CONTENT GRID
========================================================= */

.single__contents {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        280px;

    gap: 25px;

    align-items: start;

    margin-top: 25px;

    direction: ltr;
}


/* =========================================================
   CONTENT LEFT
========================================================= */

.info__side {
    direction: rtl;

    width: 100%;

    min-width: 0;
}


/* =========================================================
   POSTER RIGHT
========================================================= */

.poster__side {
    position: relative;

    width: 280px;

    direction: rtl;

    margin-top: -305px;

    z-index: 20;
}


/* =========================================================
   POSTER CARD
========================================================= */

.poster__single {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #fff;

    border:
        3px
        solid
        #fff;

    border-radius:
        12px;

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

.poster__single > .images__loader {
    display: block;

    width: 100%;

    height: 400px;

    object-fit: cover;

    object-position: center;
}


/* =========================================================
   QUALITY RIBBON
========================================================= */

.ribbon {
    position: absolute;

    top: 17px;
    right: -43px;

    z-index: 10;

    width: 145px;

    padding:
        7px
        0;

    color: #fff;

    background:
        var(--primary);

    font-size: 11px;

    font-weight: 800;

    text-align: center;

    transform:
        rotate(45deg);

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


/* =========================================================
   POSTER TRAILER
========================================================= */

.poster__single .show__md {
    position: absolute;

    right: 12px;
    bottom: 12px;
    left: 12px;

    z-index: 5;

    display: flex;

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

    gap: 7px;

    height: 42px;

    color: #fff;

    background:
        rgba(0,0,0,.75);

    border-radius: 6px;

    cursor: pointer;

    font-size: 12px;

    font-weight: 700;

    transition: .25s;
}

.poster__single .show__md:hover {
    background:
        var(--primary);
}


/* =========================================================
   VISITOR RATING CARD
========================================================= */

.star__rating {
    margin-top: 20px;

    padding:
        22px
        15px;

    text-align: center;

    background: #fff;

    border:
        1px
        solid
        var(--border);

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);
}

.rating__summary p {
    margin:
        0
        0
        10px;

    color: #555;

    font-size: 13px;

    font-weight: 700;
}

.rating-average {
    color:
        var(--primary);

    font-size: 32px;

    font-weight: 800;
}

.rating-count {
    display: block;

    margin-top: 5px;

    color: #999;

    font-size: 11px;
}

.stars {
    display: flex;

    justify-content: center;

    gap: 6px;

    margin-top: 15px;
}

.stars .star {
    color:
        var(--primary);

    font-size: 20px;

    cursor: pointer;

    transition: .2s;
}

.stars .star:hover {
    transform:
        scale(1.2);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.post__content {
    margin:
        0
        0
        25px;

    padding:
        22px
        25px;

    color: #666;

    background: #fff;

    border:
        1px
        solid
        var(--border);

    border-radius:
        var(--radius);

    font-size: 14px;

    line-height: 2;
}


/* =========================================================
   SECTION TITLES
========================================================= */

.block__ti {
    display: flex;

    align-items: center;

    gap: 9px;

    margin:
        28px
        0
        14px;

    padding:
        0
        0
        10px;

    color: #333;

    font-size: 18px;

    font-weight: 800;

    border-bottom:
        2px
        solid
        var(--primary);
}

.block__ti i {
    color:
        var(--primary);

    font-size: 16px;
}


/* =========================================================
   STORY
========================================================= */

.post__story {
    padding:
        18px
        22px;

    background: #fff;

    border:
        1px
        solid
        var(--border);

    border-right:
        4px
        solid
        var(--primary);

    border-radius:
        8px;

    box-shadow:
        0
        3px
        15px
        rgba(0,0,0,.03);
}

.post__story p {
    margin: 0;

    color: #666;

    font-size: 14px;

    line-height: 2;
}


/* =========================================================
   DETAILS BOX
========================================================= */

.info__area {
    padding:
        20px;

    background: #fff;

    border:
        1px
        solid
        var(--border);

    border-radius:
        var(--radius);

    box-shadow:
        0
        3px
        15px
        rgba(0,0,0,.03);
}

.info__area__ul {
    display: grid;

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

    gap:
        12px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.info__area__ul > li {
    min-width: 0;

    padding:
        13px;

    background:
        #faf9f6;

    border:
        1px
        solid
        #eeeae2;

    border-radius:
        7px;
}

.title__kit {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom:
        8px;

    color: #777;

    font-size: 11px;

    font-weight: 700;
}

.title__kit i {
    color:
        var(--primary);
}

.tags__list {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 6px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.tags__list li a,
.info__area__ul > li > a {
    display: inline-block;

    padding:
        5px
        10px;

    color: #555;

    background:
        #fff;

    border:
        1px
        solid
        #e6e2db;

    border-radius:
        5px;

    font-size: 11px;

    text-decoration: none;

    transition:
        .2s;
}

.tags__list li a:hover,
.info__area__ul > li > a:hover {
    color: #fff;

    background:
        var(--primary);

    border-color:
        var(--primary);
}


/* =========================================================
   WATCH / DOWNLOAD
========================================================= */

.bottom__bar__info {
    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top:
        20px;
}

.watch__and__download {
    display: grid;

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

    gap:
        12px;
}

.btton {
    display: flex;

    align-items: center;

    gap: 13px;

    min-height:
        65px;

    padding:
        10px
        18px;

    color: #fff;

    border-radius:
        7px;

    text-decoration: none;

    transition:
        .25s;
}

.btton .icon {
    width: 42px;
    height: 42px;

    display: flex;

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

    flex-shrink: 0;
}

.btton .icon svg {
    width: 30px;
    height: 30px;
}

.btton .txt {
    font-size: 14px;

    font-weight: 800;
}

.btton .txt p {
    margin:
        3px
        0
        0;

    color:
        rgba(255,255,255,.7);

    font-size: 10px;

    font-weight: 400;
}

.watch__btn {
    background:
        var(--primary);
}

.watch__btn:hover {
    background:
        var(--primary-hover);

    transform:
        translateY(-2px);
}

.download__btn {
    background:
        #242424;
}

.download__btn:hover {
    background:
        #111;

    transform:
        translateY(-2px);
}


/* =========================================================
   SHORT LINK
========================================================= */

.share__and__short {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        12px;
}

.psot__shortlink {
    display: flex;

    align-items: center;

    gap:
        8px;

    min-width: 0;

    padding:
        12px;

    background: #fff;

    border:
        1px
        solid
        var(--border);

    border-radius:
        8px;
}

.psot__shortlink > span:first-child {
    flex-shrink: 0;

    color: #777;

    font-size: 11px;

    font-weight: 700;
}

.psot__shortlink a {
    min-width: 0;

    overflow: hidden;

    color: #555;

    font-size: 11px;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.psot__shortlink button {
    width: 35px;
    height: 35px;

    display: flex;

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

    flex-shrink: 0;

    color: #fff;

    background:
        var(--primary);

    border: 0;

    border-radius:
        5px;

    cursor: pointer;
}

.psot__shortlink button:hover {
    background:
        var(--primary-hover);
}


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

.share__icons {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        8px;

    padding:
        12px;

    background: #fff;

    border:
        1px
        solid
        var(--border);

    border-radius:
        8px;
}

.share__icons > span {
    width: 100%;

    color: #777;

    font-size: 11px;

    font-weight: 700;

    text-align: center;
}

.share__icons a {
    width: 36px;
    height: 36px;

    display: flex;

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

    color: #fff;

    border-radius:
        6px;

    text-decoration: none;

    transition:
        .2s;
}

.share__icons a:hover {
    transform:
        translateY(-3px);
}


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

@media (max-width: 1000px) {

    .single__cover {
        height: 500px;
    }

    .title__single {
        padding-right:
            320px;
    }

    .poster__side {
        width: 250px;

        margin-top:
            -260px;
    }

    .poster__single > .images__loader {
        height:
            360px;
    }

    .single__contents {
        grid-template-columns:
            minmax(0,1fr)
            250px;
    }

}


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

@media (max-width: 700px) {

    .single__area {
        padding:
            15px
            0
            40px;
    }

    .content__wrapper {
        padding:
            0
            10px;
    }


    /* COVER */

    .single__cover {
        height:
            430px;

        overflow:
            hidden;
    }


    .single__cover::before {
        background:

            linear-gradient(
                to top,
                rgba(0,0,0,.95),
                rgba(0,0,0,.1)
            );
    }


    /* TRAILER */

    .single__cover > .show__trailer {
        top:
            15px;

        right:
            15px;

        height:
            40px;

        padding:
            0
            13px;
    }


    /* TITLE */

    .title__single {
        right: 0;
        bottom: 0;
        left: 0;

        padding:
            20px
            15px;
    }

    .post__name {
        max-width:
            100%;

        font-size:
            23px;

        line-height:
            1.45;
    }


    /* TITLE STRUCTURE */

    .itms__l {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            12px;
    }


    .left__title {
        width:
            100%;
    }

    .rating__box {
        width:
            fit-content;
    }


    /* CONTENT */

    .single__contents {
        display:
            flex;

        flex-direction:
            column;

        gap:
            0;

        margin-top:
            20px;

        direction:
            rtl;
    }


    /* POSTER FIRST */

    .poster__side {
        orders:
            1;

        width:
            100%;

        margin:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;
    }


    .poster__single {
        width:
            min(
                78vw,
                300px
            );
    }


    .poster__single > .images__loader {
        height:
            430px;
    }


    /* RATING */

    .star__rating {
        width:
            min(
                78vw,
                300px
            );

        margin-top:
            15px;
    }


    /* CONTENT AFTER POSTER */

    .info__side {
        order:
            2;

        width:
            100%;

        padding-top:
            20px;
    }


    /* DETAILS */

    .info__area__ul {
        grid-template-columns:
            1fr;
    }


    /* BUTTONS */

    .watch__and__download {
        grid-template-columns:
            1fr;
    }


    /* SHARE */

    .share__and__short {
        grid-template-columns:
            1fr;
    }

}


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

@media (max-width: 450px) {

    .single__cover {
        height:
            390px;
    }

    .post__name {
        font-size:
            20px;
    }

    .bread__crumbs li {
        font-size:
            10px;
    }

    .poster__single {
        width:
            80vw;
    }

    .poster__single > .images__loader {
        height:
            390px;
    }

    .star__rating {
        width:
            80vw;
    }

    .post__content,
    .post__story,
    .info__area {
        padding:
            15px;
    }

}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 350px) {

    .single__cover {
        height:
            350px;
    }

    .poster__single {
        width:
            84vw;
    }

    .poster__single > .images__loader {
        height:
            350px;
    }

    .star__rating {
        width:
            84vw;
    }

    .title__single {
        padding:
            15px
            12px;
    }

    .post__name {
        font-size:
            18px;
    }

}
.title__kit {
    font-size: 14px;
}

.tags__list li a,
.info__area__ul > li > a {
    font-size: 13px;
}

main.content{
    width:100%;
    max-width:100%;
    padding:0;
    margin:0;
}

.single__area{
    width:100%;
    max-width:100%;
}

.content__wrapper{
    width:100%;
    max-width:100%;
    margin:0;
    padding:20px;
    box-sizing:border-box;
}


@media (max-width: 1000px) {
    .title__single {
        /* padding-right: 320px; */
        right: 0;
        bottom: 0;
        left: 0;
        padding: 20px 15px;
    }
    
}

@media (max-width:1000px){

    .single__contents{
        display:flex;
        flex-direction:column;
    }

    .poster__side{
        orders:2;
        width:100%;
        max-width:100%;
        margin:20px 0 0;
    }

    .info__side{
        order:1;
        width:100%;
    }

}
@media (max-width:1000px){

    .show__trailer{
        width:55px;
        height:55px;
        border-radius:50%;
    }

    .show__trailer .icon svg{
        width:24px;
        height:24px;
    }

    .show__trailer span{
        display:none;
    }

}
.show__trailer{
    width:70px;
    height:70px;
    border-radius:50%;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(5px);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    padding:0;
    overflow:hidden;
    transition:.3s ease;
}

.show__trailer .icon{
    display:flex;
    align-items:center;
    justify-content:center;
}

.show__trailer .icon svg{
    width:30px;
    height:30px;
}

.show__trailer span{
    display:none;
}

.show__trailer:hover{
    transform:translate(-50%,-50%) scale(1.08);
    background:rgba(255,102,0,.9);
}
















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

.episodes__list a{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    height:145px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:14px;

    overflow:hidden;

    color:#222;

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.episodes__list a::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,136,0,.08));

    opacity:0;

    transition:.35s;

}

.episodes__list a:hover{

    transform:translateY(-8px);

    border-color:#ff8a00;

    box-shadow:0 20px 45px rgba(255,136,0,.25);

}

.episodes__list a:hover::before{

    opacity:1;

}

.episodes__list a.active{

    background:linear-gradient(135deg,#ff8a00,#ff6a00);

    border-color:#ff8a00;

    color:#fff;

    box-shadow:0 18px 45px rgba(255,136,0,.35);

}
/*==================================
ICON
==================================*/

.ply__icon{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fff4e8;

    color:#ff8a00;

    font-size:20px;

    transition:.35s;

    margin-bottom:15px;

    box-shadow:0 8px 18px rgba(255,136,0,.18);

}

.episodes__list a:hover .ply__icon{

    background:#ff8a00;

    color:#fff;

    transform:scale(1.08);

}

.episodes__list a.active .ply__icon{

    background:#fff;

    color:#ff8a00;

}
/*==================================
TEXT
==================================*/

.epi__num{

    font-size:13px;

    color:#888;

    text-align:center;

    font-weight:500;

}

.epi__num b{

    display:block;

    margin-top:6px;

    font-size:28px;

    font-weight:800;

    color:#222;

}

.episodes__list a:hover .epi__num,

.episodes__list a:hover .epi__num b{

    color:#ff8a00;

}

.episodes__list a.active .epi__num,

.episodes__list a.active .epi__num b{

    color:#fff;

}
/*==================================
GRID
==================================*/

.episodes__list{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(165px,1fr));

    gap:22px;

    padding:0;

    margin:0;

    list-style:none;

}

.episodes__list li{

    width:100%;

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

.main__head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    margin-bottom:30px;

    padding-bottom:18px;

    border-bottom:2px solid rgba(255,136,0,.15);

}

.__head__text{

    margin:0;

    display:flex;

    align-items:center;

    gap:12px;

    font-size:36px;

    font-weight:800;

    color:#222;

    line-height:1;

}

.__head__text i{

    color:#ff8a00;

    font-size:30px;

}

/*============================*/

.list__sub__cats{

    position:relative;

}

.filter__bttn{

    display:flex;

    align-items:center;

    gap:12px;

    min-width:340px;

    height:52px;

    padding:0 18px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:12px;

    color:#222;

    font-weight:700;

    box-shadow:0 6px 18px rgba(0,0,0,.06);

    transition:.3s;

}

.filter__bttn:hover{

    border-color:#ff8a00;

    box-shadow:0 12px 30px rgba(255,136,0,.18);

}

.filter__bttn i:first-child{

    color:#ff8a00;

}

.filter__bttn i:last-child{

    margin-right:auto;

    color:#777;

}

/*============================*/

.list__sub__cats ul{

    position:absolute;

    top:62px;

    right:0;

    width:340px;

    background:#fff;

    border-radius:12px;

    overflow:hidden;

    border:1px solid #ececec;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

    display:none;

    z-index:999;

}

.list__sub__cats:hover ul{

    display:block;

}

.list__sub__cats li{

    list-style:none;

}

.list__sub__cats li a{

    display:block;

    padding:14px 18px;

    color:#222;

    font-weight:600;

    transition:.25s;

}

.list__sub__cats li:hover{

    background:#fff4e8;

}

.list__sub__cats li.selected{

    background:#ff8a00;

}

.list__sub__cats li.selected a{

    color:#fff;

}
@media(max-width:768px){

.main__head{

    flex-direction:column;

    align-items:stretch;

}

.__head__text{

    justify-content:center;

    font-size:28px;

}

.filter__bttn{

    width:100%;

    min-width:0;

}

.list__sub__cats ul{

    width:100%;

}

}




/*==============================
SHARE
==============================*/

.share__icons{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.share__icons span{

    font-weight:700;

    color:#444;

    margin-left:8px;

}

.share__icons a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    color:#fff;

    font-size:18px;

    text-decoration:none;

    transition:.3s;

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

}

.share__icons a:hover{

    transform:translateY(-4px) scale(1.08);

    box-shadow:0 15px 30px rgba(0,0,0,.25);

}

/*==============================
WHATSAPP
==============================*/

.share__icons .whatsapp{

    background:#25D366;

}

/*==============================
TELEGRAM
==============================*/

.share__icons .telegram{

    background:#229ED9;

}

/*==============================
FACEBOOK
==============================*/

.share__icons .facebook{

    background:#1877F2;

}

/*==============================
MESSENGER
==============================*/

.share__icons .facebook__messenger{

    background:linear-gradient(135deg,#00B2FF,#006AFF,#A033FF);

}

/*==============================
X (TWITTER)
==============================*/

.share__icons .twitter{

    background:#000;

}

/*==============================
HOVER COLORS
==============================*/

.share__icons .whatsapp:hover{

    background:#1ebe5d;

}

.share__icons .telegram:hover{

    background:#1a8ac0;

}

.share__icons .facebook:hover{

    background:#0d65d9;

}

.share__icons .facebook__messenger:hover{

    filter:brightness(1.1);

}

.share__icons .twitter:hover{

    background:#222;

}
.main-menu,
.submenu__ul{
    list-style:none;
    margin:0;
    padding:0;
}

.main-menu li{
    position:relative;
}

.menu-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.menu-link{
    flex:1;
    display:block;
    padding:12px 15px;
    text-decoration:none;
    color:#333;
}

.menu-toggle{
    width:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:#ff8a00;
    transition:.3s;
}

.submenu__ul{
    display:none;
    padding-right:15px;
}

.main-menu li.open>.submenu__ul{
    display:block;
}

.main-menu li.open>.menu-row>.menu-toggle{
    transform:rotate(180deg);
}

.main-menu,
.main-menu ul{
    margin:0;
    padding:0;
    list-style:none;
}

.main-menu .submenu__ul{

    display:none;

    padding:0 !important;

    margin:0 !important;

    background:#b7b1a7;

}

.main-menu li.open>.submenu__ul{

    display:block;

}

.main-menu li,
.main-menu .submenu__ul li{

    margin:0;
    padding:0;

}

.main-menu li a,
.main-menu .submenu__ul li a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:12px 15px;

    color:#fff;

    text-decoration:none;

    border-bottom:1px solid rgba(0,0,0,.15);

    background:#b7b1a7;

}

.main-menu .submenu__ul li a{

    padding-right:15px !important; /* نفس الأب */

}
/*==================================
FOOTER
==================================*/



.footer-container{


    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}

.footer-logo a{

    color:#fff;

    font-size:22px;

    font-weight:800;

    text-decoration:none;

}

/*====================*/

.footer-menu{

    display:flex;

    gap:15px;

    list-style:none;

    margin:0;

    padding:0;

}

.footer-menu li{

    margin:0;

}

.footer-menu li a{

    color:#ddd;

    text-decoration:none;

    font-size:15px;

    transition:.25s;

}

.footer-menu li a:hover{

    color:#ff8a00;

}

/*====================*/

.footer-speed{

    color:#ddd;

    font-size:14px;

    white-space:nowrap;

}

.footer-speed strong{

    color:#fff;

}

/*====================*/

.footer-bottom{

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

    text-align:center;

    padding:14px 20px;

    font-size:14px;

    color:#cfcfcf;

}

.footer-bottom strong{

    color:#fff;

}

/*====================*/

@media(max-width:900px){

.footer-container{

    flex-direction:column;

    text-align:center;

}

.footer-menu{

    justify-content:center;

    flex-wrap:wrap;

}

.footer-speed{

    white-space:normal;

}

}
.logo{

    display:flex;

    align-items:center;

}

.logo a{

    display:block;

}

.site-logo{

    display:block;

    height:55px;

    width:auto;

    max-width:220px;

}


/*==================================
FILTERS
==================================*/

.filters{

    width:100%;

    margin:35px 0;

}

.filter__box{

    background:#fff;

    border:1px solid #ececec;

    border-radius:14px;

    padding:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.filter__items{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin:0;

    padding:0;

    list-style:none;

}

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

.filter__items>li{

    position:relative;

    flex:1;

    min-width:210px;

}

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

.filter__title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:60px;

    padding:0 18px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;

}

.filter__title:hover{

    border-color:#ff8a00;

    box-shadow:0 10px 25px rgba(255,136,0,.15);

}

/*==================================
ICONS
==================================*/

.icon__one{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff4e8;

    border-radius:10px;

    color:#ff8a00;

    font-size:18px;

}

.icon__two{

    color:#888;

    transition:.3s;

}

.filter__items>li:hover .icon__two{

    transform:rotate(180deg);

    color:#ff8a00;

}

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

.text{

    flex:1;

    padding:0 15px;

}

.text p{

    margin:0;

    font-size:13px;

    color:#888;

}

.text em{

    display:block;

    margin-top:3px;

    font-size:15px;

    font-style:normal;

    color:#222;

    font-weight:700;

}

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

.filter__items>li ul{

    position:absolute;

    top:70px;

    right:0;

    width:100%;

    max-height:320px;

    overflow-y:auto;

    background:#fff;

    border:1px solid #ececec;

    border-radius:12px;

    box-shadow:0 18px 45px rgba(0,0,0,.12);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.3s;

    z-index:999;

}

.filter__items>li:hover ul{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

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

.filter__items ul li{

    list-style:none;

}

.filter__items ul li a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    color:#333;

    text-decoration:none;

    transition:.25s;

}

.filter__items ul li:hover{

    background:#fff4e8;

}

.filter__items ul li:hover a{

    color:#ff8a00;

}

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

.select__circle{

    width:24px;

    height:24px;

    border-radius:50%;

    border:2px solid #ddd;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:11px;

    color:#fff;

    transition:.3s;

}

.filter__items ul li:hover .select__circle{

    background:#ff8a00;

    border-color:#ff8a00;

}

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

.filter__items ul::-webkit-scrollbar{

    width:7px;

}

.filter__items ul::-webkit-scrollbar-thumb{

    background:#ff8a00;

    border-radius:20px;

}

.filter__items ul::-webkit-scrollbar-track{

    background:#f5f5f5;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1200px){

.filter__items>li{

    min-width:190px;

}

}

@media(max-width:992px){

.filter__items{

    gap:15px;

}

.filter__items>li{

    min-width:calc(50% - 8px);

}

}

@media(max-width:768px){

.filter__box{

    padding:15px;

}

.filter__items{

    flex-direction:column;

}

.filter__items>li{

    width:100%;

    min-width:100%;

}

.filter__items>li ul{

    position:static;

    width:100%;

    margin-top:8px;

    opacity:1;

    visibility:visible;

    transform:none;

    display:none;

    box-shadow:none;

}

.filter__items>li.active ul{

    display:block;

}

.filter__title{

    height:56px;

}

}