@font-face {
    font-family: 'Vazir';
    src: url('../fonts/vazir/Vazir.woff') format('truetype');
    font-weight: medium;
    font-style: normal;
}

@font-face {
    font-family: 'dFont';
    src: url('../fonts/varfont.woff2') format('truetype');
    font-weight: medium;
    font-style: normal;
}

@font-face {
    font-family: 'Iran-yekan';
    src: url('../fonts/Yekan.woff') format('truetype');
    font-weight: medium;
    font-style: normal;
}

@font-face {
    font-family: 'Iran-sans';
    src: url('../fonts/iransans.ttf') format('truetype');
    font-weight: medium;
    font-style: normal;
}


@font-face {
    font-family: 'Shabnam';
    src: url('../fonts/shabnam/Shabnam.woff') format('truetype');
    font-weight: medium;
    font-style: normal;
}

:root{
    --actor-loading-bg: url('/static/images/logo-1.svg');
    --subscription-percent:0%;
    box-sizing: border-box;
    --shadow-card-back:#0b0b0b;
    --back:#0b0b0b;
    --info-color:#b4b4b4;
    --title-color:#b8b8b8;
    --side-them-color:#6b6b6b;

}

* {
    /* font-family: 'IRANyekan', sans-serif; */
    font-family: 'dFont', sans-serif;
    outline: none;
    scrollbar-color: #696767 rgba(0, 0, 0, 0);
    scrollbar-width: thin;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

h1 {
    margin: 0;
}

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


input {
    border: none ;
}

body {
    background-color: var(--back);
    color: white;
    margin: 0;
    padding: 0;
    font-size: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 14px;
    
}

.hidden{
    display: none !important;
}

/* header */
.header {
    background: radial-gradient(50% 500% at 50% -420%,
            rgba(64, 97, 231, 0.4) 80%,
            rgba(0, 0, 0, 0.1) 100%),
        black;
}

.nav {
    display: flex;
    justify-content: space-between;
    padding: 0 18px;
    border-top: 2px solid red;
    margin: 0 auto;
    align-items: center;
    z-index: 111;
    position: fixed;
    top: 0;
    padding: 7px;
    width: 100%;
    left: 50%;
    transform: translate(-50%);
    transition: padding 0.4s ease-in-out;
    background: linear-gradient(180deg,#1a1a1a 23%,#1a1a1ab6,#1a1a1a00);
}
.nav.mobile-dash{
    z-index: 122;
}
.nav.on-scroll{
    background: linear-gradient(180deg,#1a1a1a 23%,#1a1a1aed,#1a1a1a6b);
}


/*.nav.load{*/
/*     background: linear-gradient(174deg, #42370e, #000 30%, #42370e, #000, #42370e);*/
/*}*/
.bar-btn {
    display: none;
}

.header-navbar {
    display: flex;
    gap: 14px;
    padding-right: 30px;
}

.header-navbar-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.header-navbar-item:hover{
    color: red;
}
.header-navbar-item svg {
    width: 24px;
    height: 24px;
    display: none;
}

.arrow-down {
    width: 14px !important;
    margin-top: 4px;
}

.head-lucimovie{
    display: flex;
    gap: 7px;
    justify-content: center;
    align-items: center;
    
}
.head-lucimovie img{
    border-radius: 15px 3px 15px 3px;
}
.head-lucimovie .site-name{
    font-size: 14px;
}

.mobile-login-btn{
    padding: 2px 11px;
    background: linear-gradient(165deg,#847e7e66,#232324ad);
    border-radius: 10px;
    margin-right: 2px;
    box-shadow: 1px 1px #151414;
    display: none;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}

.mobile-login-btn.desktop{
    display: flex;
}
.user-prof-btn{
    padding: 10px;
    text-align: center;
    background: #333;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: linear-gradient(165deg,#847e7e66,#232324ad);
    margin-right: 2px;
    gap: 2px;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px dashed #868686;
}

.mobile-login-btn svg{
    width: 17px;
    height: 17px;
}
.user-prof-btn.desktop{
    display: flex ;
}

.left-s-p{
    display: flex;
    gap: 5px;
    align-items: center;
    position: relative;
     left: 3px;
}

.profile-bx{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #00000085;
    z-index: 2000;
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    overflow: auto;
    top: 0;
}

.user-profile-info{
    width: 100%;
    background: #1a1a1af2;
    height: 100%;
    margin-top: 200px;
    border-radius: 30px 30px 0 0;
    box-shadow: 0 0 10px black;
    animation: bt 0.5s linear;
    max-width: 1000px;
}
@keyframes bt {
    0%{
        position: relative;
        bottom: -100%;
    }
    100%{
        position: relative;
        bottom: 0;
    }
}

.user-profile-info.in-top{
    border-radius: 0;
    position: sticky;
    top: 0;
}
.user-profile-info.in-top .user-profile-info-head{
    border-radius: 0;
}
.user-profile-info-head{
    position: relative;
    border-radius: 30px 30px 0 0;
    background: #1e1e1e;
    box-shadow: 0 2px 3px #181818;
}
.user-profile-info-head svg{
    width: 23px;
    height: 23px;
    position: absolute;
    top: 18px;
    left: 20px;
    fill: #b7b7b7 !important;
    cursor: pointer;
}

.user-profile-char-name{
    display: flex;
    align-items: center;
    gap: 5px;
    padding-right: 10px;
    padding: 10px;
}
.user-profile-char{
    display: flex !important;
}
.user-profile-info-head .top-line{
    position: absolute;
    width: 19%;
    height: 2px;
    background: #373636;
    left: 50%;
    transform: translate(-50%);
    top: 6px;
    border-radius: 50%;
}


.user-profile-detail{
    max-height: 90vh;
    scrollbar-width: none;
}
.profile-detail-item{
    padding: 17px;
    border-bottom: 8px solid #111;
}
.profile-detail-item-title{
    font-size: 14px;
}
.profile-detail-item-sub{
    padding: 10px;
}
.profile-detail-item-sub div{
    color: #7b7b7b;
}
.profile-detail-item-sub span{
    color: #c6c6c6;
}

.subs{
    position: relative;
    color: #f5c518;
    animation: subm 1s ease;
}
@keyframes subm {
    0%{
        color: white;
    }
    100%{
        color: white;
    }

}
.subs::before{
    content: '★';
    color: #f5c518;
    border-radius: 50%;
    position: absolute;
    right: 34px;
    box-shadow: 0 11px 1px black;
    top: -28px;
    animation: sub 1s ease;
    opacity: 0;
    font-size: 22px;
}

@keyframes sub {
    0%{
        right: 99%;
        opacity: 1;
    }
    80%{
        left: unset;
        right: 34px;
        top: -28px;
        opacity: 1;
    }
    100%{
        top: -2px;
        opacity: 1;
       
    }
}
@media (max-width:768px) {
    .mobile-login-btn{
        display: flex;
    }
    .mobile-login-btn.desktop{
        display: none;
    }
    .head-lucimovie.right-m{
        position: relative;
        right: -8.6%;
    }
    .user-prof-btn{
        display: flex;
    }
    .user-prof-btn.desktop{
        display: none;
    }
}



.header-navbar-submenu {
    width: 550px;
    height: 226px;
    background-color: #2e2e2ecc;
    position: absolute;
    top: 42px;
    z-index: 9999999999;
    border-radius: 11px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    visibility: hidden;
}

.header-navbar-submenu-qube {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #252525;
    transform: rotate(45deg);
    top: -11px;
    right: 51px;
}

.qube-series {
    right: 161px;
}

.qube-forigen {
    right: 261px;
}

.header-navbar-submenu-lists {
    width: 70%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.header-navbar-submenu-list {
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    padding: 15px 0;
}

.header-navbar-submenu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-navbar-submenu-circle {
    width: 13px;
    height: 13px;
    background-color: #f56118;
    border-radius: 50%;
}

.header-navbar-submenu-img {
    width: 30%;
    height: 100%;
}

.header-navbar-submenu-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width:768px) {

    .item-film:hover .submenu-film {
        visibility: visible;
    }

    .item-series:hover .submenu-series {
        visibility: visible;
    }

    .item-forigen:hover .submenu-forigen {
        visibility: visible;
    }
}


.title-holder {
    display: none;
    position: relative;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding: 0 20px;
     
    margin: 1px auto;
    align-items: center;
}

.title-holder .user {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    position: relative;
}


.title-holder .user a {
    padding: 2px 21px;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    border: 1px solid #9b7a00;
    display: flex;
    align-items: center;
    gap: 5px;
}

.user .dashboard-bar {
    position: absolute;
    background: #141414;
    z-index: 113;
    top: 38px;
    right: -3px;
    padding: 10px 0;
    display: none;
    flex-direction: column;
    gap: 9px;
    min-width: 250px;
    border-radius: 10px;

}

.dashboard-bar.dash-active {
    display: flex;
}

.user .dashboard-bar a {
    border-radius: 0;
    border: none;
    justify-content: center;
    padding-bottom: 3px;
    border-bottom: 1px solid #202020;
    color: #dfdfdf;
    font-weight: normal;
}

.user .dashboard-bar a:last-child {
    border: none;
}

.title-holder .user a svg {
    width: 20px;
    height: 20px;
}

.site-logo {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 4px;
}

.title-holder img {
    width: 60px;
    height:60px;
}

.title-holder h1 {
    position: relative;
}

.slider {
    margin: 0 auto;
}

.show-slide-box {
    position: relative;
    overflow: hidden;
}

.slide-shadow {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.show-slide-video {
    position: absolute;
    width: 100%;
    display: none;
    top: 50%;
    transform: translate(0, -50%);
}

.show-slide-video.mobile {
    position: fixed;
    z-index: 1001;
    border: 1px solid #2d2828;
    border-right: none;
    border-radius: 5px;
}

.mobile-lay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 120;
    top: 0;
}

.play-trailer-box {
    position: absolute;
    left: 23px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 43px;
    z-index: 101;
    display: none;
}

.play-trailer-box svg {
    width: 50px;
    height: 50px;
}

.play-trailer-box .pause-icon {
    display: none;
}

.trailer-show {
    display: flex !important;
}

.btn-show {
    display: block !important;
}

.btn-hide {
    display: none !important;
}


.slide {
    width: 100%;
    height: 400px !important;
    padding-bottom: 120px;
    background-size: cover;
    background-position: center;
    display: flex;
    box-shadow: inset 0 -16px 14px black;
}

.slide.hidden {
    background-image: none !important;
}

.slide::before {
    content: '';
    background-color: rgb(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    padding-bottom: 120px;
}

.line {
    position: relative;
}

.slide-info-left {
    position: absolute;
    left: 0;
    bottom: 0;
}

.slide-info-left .title-imdb {
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-left: 10px;
    position: relative;

}

.title-imdb .rate {
    width: 64px;
    text-align: center;
}

.imdb-animation {
    animation: leftToright 1s ease;
}

@keyframes leftToright {
    0% {
        left: -300px;
        opacity: 0;
    }

    100% {
        left: 0;
        opacity: 1;
    }
}

.slide-info-left .title-imdb svg {
    width: 100px;
}

.slide-info-left .title-imdb .rate {
    position: relative;
    top: 7px;
    text-align: center;
    color: #a8a8a8;
    left: 24px;
}

.slide-info-left .title-imdb .rate span {
    color: orange;
    font-weight: bold;
    font-size: 19px;
}

.slide-info-left .title-imdb .slide-title {
    position: relative;
    bottom: 7px;
    left: 18px;
}

.slide-selection {
    width: 55%;
    position: relative;
    bottom: 190px;
    margin-right: 20px;
    display: flex;
    overflow: hidden;
    gap: 14px;
}

.slide-selection .slide-box img {
    width: 200px;
    border-radius: 15px;
}


.line {
    position: relative;
    width: 100%;
    z-index: 100;
}

.top-curve {
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 100px;
    margin: auto;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-top-left-radius: 35% 30%;
    border-top-right-radius: 35% 30%;
    border-bottom: none;
    background: radial-gradient(50% 500% at 50% -420%, rgba(64, 97, 231, 0.4) 80%, rgba(0, 0, 0, 0.1) 100%), black;
    background-clip: padding-box;
    margin: 0 auto;
     
}

.top-curve::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin-top: -0.25rem;
    border-radius: inherit;
    background: linear-gradient(to right,
            rgb(33, 13, 22) 16%,
            rgb(184, 40, 105),
            rgb(229, 9, 20),
            rgb(184, 40, 105),
            rgb(7, 5, 6) 84%);
}






.top-info .item-imdb {
    width: 100px;
}

.content-item .item-cover {
    width: 25%;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;

}

.cover-img-holder{
    position: relative;
    width: 260px;
    height: 370px;
    border-radius: 50%;
    /*animation: r360 250s linear infinite;*/
}
@keyframes r360 {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
.cover-img-holder img{
    width: 100%;
    height: 100%;
    /*border-radius: 50% !important;*/
    border-radius: 5% !important;
    object-fit: cover;
}
.cover-img-holder::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 -17px 10px #000000b0, inset 0 0 10px #000;
    /*border-radius: 50%;*/
    border-radius: 5%;
}



.content-item .item-cover img {
    height: auto;
    border-radius: 10px;
    box-shadow: 0 0 5px black;
}

.content-item .item-cover img {
    width: 100%;
}

.content-item .item-info {
    width: 73%;
    padding-right: 10px;
}

.top-info {
    display: flex;
    flex-wrap: wrap;
}

.top-info .item-title {
    width: 74%;
    display: flex;
    flex-direction: column;
}

.item-title h1{
    margin:5px !important;
    color: var(--title-color);
}
.item-title #title-text{
    font-size:18px;
}
.item-title .fa-title-text{
    font-size:14px;

}
.top-info .title-imdb {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: end;
    position: relative;
}

.top-info .title-imdb svg {
    width: 70px;
    position: relative;
    bottom: 5px;
}

.top-info .title-imdb .rate span {
    font-size: 20px;
    font-weight: bold;
    color: orange;
}

.info-sub {
    display: flex;
    align-items: center;
    gap: 3px;
}

.info-sub .info-actors {
    display: flex;
    overflow: auto;
}

.info-sub svg {
    width: 15px;
}

.info-sub .info-genre {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.info-sub .info-genre a {
    box-shadow: inset 0 0 0 1px rgba(155, 155, 155, 0.4);
    border-radius: 80rem;
    padding: 3px 7px;
    color: var(--info-color);
    font-size: 11px;
}

.item-info .item-more {
    position: absolute;
    left: 4px;
    height: 184px;
    width: 325px;
    top: 7px;
}

.item-more .more-line {
    width: 200px;
    position: absolute;
    height: 100%;
    left: -4px;
    border-radius: 0 0 100%;
    border-bottom: 1px solid #f5c518;
    border-right: 1px solid #f5c518;
    top: -6px;
}

.item-more svg {
    position: absolute;
    width: 39px;
    left: 127px;
    top: 96px;
}

.item-more .more-detail span {
    position: absolute;
    right: 70px;
    top: 100px;
    color: #f5c518;
}

/* .item-trailer {
    border-radius: 10px;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 3px 0;
    align-items: center;
    position: absolute;
    bottom: 50%;
    transform: translate(0,50%);
    cursor: pointer;
} */

.item-trailer svg{
    width: 50px;
    height: 50px;
    fill: #f5c518;
    background: #0000008c;
    border-radius: 50%;
}

/*  slider 2 */

.vslider-container {
    position: relative;
    width: 100%;
    height: 630px;
    overflow: hidden;
}

.vslider-track {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease-in-out;
    gap: 10px;
}

.vslider-item {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: inset 0 0 5px black;
    justify-content: end;
}

.vslider-item .series-title {
    display: none;
    position: absolute;
    top: 0;
    left: 9px;
    color: #f5c518;
    text-shadow: 0 0 10px black;
}

.vslider-item.vslider-active .series-title {
    display: block;
}

.vslider-item .news {
    width: 100%;
    text-align: center;
    background: radial-gradient(134% 480% at 50% -420%, rgba(64, 97, 231, 0.4) 83%, rgba(0, 0, 0, 0.1) 100%), black;
    font-size: 15px;
}

.vslider-item.vslider-active {
    opacity: 1;
    transform: scale(1.01);
}

.vslider-nav {
    position: absolute;
    top: 0;
    right: 0;
    height: 98%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 10px;

}

.vslider-nav-btn {
    width: 40px;
    height: 40px;
    background-color: #242424;
    color: white;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    padding:3px;
}

.vslider-nav-btn:hover {
    background-color: #555;
}

.sidebar .series {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar .series svg {
    position: relative;
    top: 16px;
}

.alert-trailer {
    position: absolute;
    display: none;
    align-items: center;
    gap: 5px;
    top: 10px;
    right: 10px;
    background: rgba(162, 93, 93, 0.4);
    border-radius: 10px;
    padding: 3px 10px;
    animation: alert .5s ease-in;
}

@keyframes alert {
    0% {
        right: -400px;
    }

    100% {
        right: 0;
    }
}


.serie-updates-box {
    background: #070606;
    border-radius: 10px;
    margin: 10px;
}


.mobile-g-list {
    display: none;
}

.desktop-g-list {
    display: block;
}

.genre-list {
    background: #070606;
    border-radius: 10px;
    margin: 10px;
}

.genre-list-head {
    display: flex;
    justify-content: center;
    align-items: center;
}



.genre-list .genre-item {
    display: flex;
    justify-content: space-between;
    padding: 3px 15px;
    margin: 6px 0;
}







.filter-box {
    position: relative;
    display: flex;
    z-index: 100;
    margin-top: 15px;
     
    margin-left: auto;
    margin-right: auto;
}

.filter-box form {
    display: flex;
    padding: 10px 20px;
    width: 94%;
    background: radial-gradient(134% 465% at 50% -420%, rgba(64, 97, 231, 0.4) 83%, rgba(0, 0, 0, 0.1) 100%), black;
    box-shadow: inset 0 0 19px #16204d;
    margin: 0 auto;
    border-radius: 10px;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-box form div:last-child {
    padding: 0;
}

.filter-box form div select {
    padding: 0 6px;
    border-radius: 4px;
    border: none;
    background: none;
    color: #9b9b9b;
    background: black;
}

.filter-box form div label {
    font-size: 12px;
}

.filter-box form div {
    display: flex;
    gap: 9px;
    width: 155px;
    padding: 5px;
    border: 1px solid #181717;
    border-radius: 10px;
    justify-content: space-around;
    align-items: center;
}

@media (max-width:1190px) {
    .filter-box form div {
        width: 240px;
    }
}


.filter-box form .btn-filter {
    padding: 6px 10px;
    background: #111;
    color: white;
    border: 1px solid #625e5e;
    border-radius: 14px;
    width: 100%;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 15px;
    position: relative;
    z-index: 100;
    margin: 0 auto;
    padding: 0 6px;
}

.nav-left,
.nav-right {
    height: 35px;
}

.nav-right svg,
.nav-left svg {
    width: 35px;
}


.pagination .pages {
    display: flex;
    gap: 10px;
    flex-direction: row-reverse;
    flex-wrap:wrap;
    justify-content: center;
}

.pagination .pages .page {
    width: 35px;
    text-align: center;
    border: 1px solid #1e1e1e;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination .pages .page.page-active {
    border: 1px solid #f5c518;

}



.recently-viewed {
     
    margin-right: auto;
    margin-left: auto;
    position: relative;
    overflow: hidden;
    z-index: 110;
    overflow: hidden;
    background: #070606;
    border-radius: 10px;
    margin: 10px;
}

.no-recent-text {
    margin: 0 auto;
    font-size: 13px;
    color: #b3b3b3;
}

.recently-viewed .viewed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    font-size: 12px;
}

.viewed-header .clear-recents {
    display: flex;
    align-items: center;
    color: #f5c518;
}

.viewed-header h3 {
    border-right: 4px solid #f5c518;
    padding-right: 10px;
    border-radius: 5px;
}

.recently-viewed .items {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 0 20px 10px;
    transition: transform .5s ease-in-out;
    overflow: auto;
    margin-top: 10px;
}

.recently-viewed .items .viewed-item {
    position: relative;
}

.recently-viewed .items .viewed-item .item-cover {
    width: 180px;
    border-radius: 10px;
}

.recently-viewed .items .viewed-item .viewed-title {
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 100%;
    background: red;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    background: radial-gradient(134% 465% at 50% -420%, rgba(64, 97, 231, 0.4) 83%, rgba(0, 0, 0, 0.1) 100%), black;
    border: 1px solid #1e1d1d;
    border-top: none;
    border-radius: 0 0 10px 10px;
    font-size: 13px;
}


.viewed-nav-left,
.viewed-nav-right {
    display: none;
    padding: 10px 5px;
    border: 1px solid white;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 3px;
}

.viewed-nav-left {
    position: absolute;
    left: 0;
    top: 50%;
}

.viewed-nav-right {
    position: absolute;
    right: 0;
    top: 50%;
}

.footer {
    margin: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    margin-top: 100px;
}

.social-media {
    display: flex;
    gap: 20px;
}

.social-media a {
    display: flex;
    align-items: center;
    border: 1px solid #484747;
    border-radius: 10px;
    padding: 10px;
    gap: 10px;
}

.footer .more {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}





/* detail page */

.detail-content {
    display: flex;
    flex-wrap: wrap;
    background-size: cover;
    background-position: -74px 0px;
    padding-bottom: 100px;
    position: relative;
    justify-content: center;
    margin: 0 auto;
}
.detail-content.trailer-playing{
    position: sticky;
    top: -39px;
    z-index: 1000;
}
.detail-content::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(126deg,#0000 ,var(--shadow-card-back) 76%);

}
.detail-content::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,#0000 ,var(--shadow-card-back) 93%);
}

.detail-content .item-cover {
    width: 25%;
    display: none;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    padding: 10px;
    margin-top: 50px;
    gap: 10px;
    position: relative;
}

.detail-content .item-cover img {
    border-radius: 10px;
    width:100%;
}

.detail-content .item-info {
    width:100%;
    z-index: 1;
    margin-top: 75px;
    padding: 5px;
}

.detail-content .item-info .info-sub {
    font-size: 120%;
    gap: 6px;
    margin: 5px 0;
}

.detail-content .item-info .info-sub svg {
    width: 21px;
    height:21px;
}


.detail-options-box {
     
    margin: 0 auto;
}

.options-menu {
    display: flex;
    justify-content: space-evenly;

    padding: 8px;
    position: relative;
    bottom: 47px;
    padding-bottom: 0;
    border-radius: 10px;
    z-index: 12;
}

.options-menu .option-menu-item {
    position: relative;
    display: flex;
    justify-content: center;
    box-shadow:0 0 10px #131313;
    border-radius: 7px;
}

.options-menu .option-menu-item:hover button{
    color: #f5c518;
}

/* .options-menu .option-menu-item .line-target {
    position: absolute;
    width: 2px;
    height: 50px;
    background: #f5c518;
    top: 41px;
    display: none;
    border: none !important;
} */

.options-menu .option-menu-item button {
    width: 137px;
    border: none;
    background: none;
    color: white;
    padding: 6px;
    position: relative;
    bottom: -2px;
    cursor: pointer;
}

.options-menu .option-menu-item .item-active {
    border-bottom: 2px solid #f5c518;
    color: #f5c518;
    font-weight: bold;
    display: block;
}


.detail-option-content-box {
    margin: 0 auto;
}

.detail-option-content-box .option-content {
    position: relative;
    width: 100%;
    border-radius: 25px;
}

.option-content.active-content {
    display: block;
}


.option-content .download-lists {
    position: relative;
    padding: 10px;
}

.option-content svg {
    width: 35px;
    height: 35px;
}

.download-lists .box-btn {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    margin-top: 10px;
    padding: 10px 20px;
    cursor: pointer;
    background:#1c1c1c;
}
.download-lists .box-btn:hover{
    color: #f5c518;
}

.download-lists .box-btn .nav-open {
    display: none;
}

.download-lists .subtitle-right,
.download-lists .dubbing-right {
    display: flex;
    gap: 10px;

}
.download-lists .subtitle-right span,
.download-lists .dubbing-right span{
    display: flex;
  align-items: center;
}

.download-lists .box-content {
    margin: 0 4px;
    padding: 12px;
    background: #161616;
    border-radius: 0 0 10px 10px;
    display: none;
    overflow: hidden;
}

.box-content.active-box {
    display: block !important;
    animation: height 1s ease-in-out;
}


.season-download-links {
    display: none;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 4px;
    border: 1px solid #2b2929;
    padding: 12px;
    background: #131313;
    border-radius: 0 0 10px 10px;
    border-top: none;
    position: relative;
    top: -4px;
    animation: height 1s ease-in-out;
    overflow: hidden;
}

@keyframes height {
    0% {
        max-height: 0;
    }

    100% {
        max-height: 600px;
    }
}

.season-download-links .season-part {
    width: 19%;
    text-align: center;
    background: #2f2f2f;
    border-radius: 10px;
    font-size: 14px;
    padding: 4px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.season-download-links .season-part svg{
    width: 25px;
    height: 25px;
}

.season-overall {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    background: #646363;
    border-radius: 10px;
    background: #1a1a1a;
    margin-top: 10px;
    cursor: pointer;
}

.ep-count-ddown-box{
    display: flex;
    gap: 10px;
}
.ep-count-ddown-box svg{
    display: none;
}

.season-overall .right-info,
.season-overall .left-info {
    display: flex;
    align-items: center;
    gap: 9px;
}
.season-overall .left-info span:first-child{
    direction: ltr;
}

.season-overall svg {
    width: 25px;
}

.season-overall .left-info {
    flex-direction: row-reverse;
}

.movie-quality {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: #2b2a2a;
    border-radius: 10px;
    margin-top: 10px;
}

.movie-quality .right-info {
    display: flex;
    align-items: center;
    gap: 5px;
}


.movie-quality .right-info div {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-direction: column;
}

.movie-quality .left-info {
    display: flex;
    align-items: end;
    gap: 25px;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.movie-quality .left-info .size {
    font-size: 15px;
    color: #f5c518;
}

.all-samelike-box {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    margin: 20px;
    padding-bottom: 30px;
}

.all-samelike-box .samelike-item {
    position: relative;
    padding: 10px;
    border: 1px solid #242020;
    border-radius: 10px;
    margin: 5px 0;
}

.all-samelike-box .samelike-item span {
    display: flex;
    justify-content: center;
    max-height: 30px;
    overflow: hidden;
}

.all-samelike-box .samelike-item img {
    height: 300px;
    border-radius: 10px;
}





.all-samelike-box .star img {
    border-radius: 50%;
    width: 165px;
    height: 165px;
    background: var(--actor-loading-bg);
    background-size: cover;
    background-position: center;
    border: 1px solid black;
    object-fit: cover;
    animation: act 0.5s ease;
}
@keyframes act {
    0%{
        transform: scale(0.5);
    }
    100%{
        transform: scale(1);
    }
}

.all-samelike-box .star span {
    display: flex;
    justify-content: center;
}

.all-samelike-box .star .act-name {
    font-size: 13px;
    color: #979797;
}

.detail-trailer-box {
    width: 100%;
}

.detail-trailer {
    position: absolute;
    z-index: 11;
    width: 100%;
    display: none;
    background: #1a1a1a;
    object-fit: cover;
    object-position: center;
}

.detail-pause-icon {
    position: absolute;
    z-index: 13;
    left: 9px;
    bottom: 9px;
    display: none;
}



.comments-box {
    margin: 20px 10px;
}

.comment{
    margin-top: 10px;
  background: #1a1a1a;
  border-radius: 10px;
  padding: 5px;
}
.comment .comment-replys{
    border-right-width: 10px;
}



.comments-box .head {
    display: flex;
    justify-content: space-between;
    padding: 8px 20px;
    background: #151515;
    border-radius: 10px 10px 0 0;
}

.comments-box .left-box {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 10px;
}

.comments-box .all {
    background: #151515;
    padding: 2px 3px;
    overflow-y: auto;
}


.all .comment .user {
    display: flex;
    gap: 10px;
}

.all .comment .user .username {
    color: #f5c518;
}
.all .comment .user .username.admin{
    color: #38ff00 !important;
}
.all .comment .user .profile {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.all .comment .user .profile.admin{
    border: 2px solid #14ff00;
}
.all .comment .text {
    position: relative;
    top: -34px;
    right: 70px;
    width: 80%;
    margin: 0;
}


.spoilled-text {
    opacity: 0;
}

p {
    white-space: normal;
    word-break: break-word;
}

.spoill-back {
    transition: opacity 250ms ease;
    animation: opacity-light 1.75s linear infinite;
    border-radius: 13px;
  border: 1px solid #212121;
}

@keyframes opacity-light {
    0% {
        opacity: .5;
    }

    100% {
        opacity: .8;
    }
}

.comment .replys-box {
    display: flex;
    justify-content: space-between;
    position: relative;
    bottom: 20px;
    align-items: center;
    padding: 5px;

}

.no-comment {
    text-align: center;
    padding: 20px;
    margin: 0 auto;
}

.comment-login {
    display: flex;
    margin: 0 auto;
    gap: 20px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.comment-login .login-register {
    display: flex;
    gap: 15px;
}

.comment-login .login-register a {
    display: flex;
    align-items: center;
    gap: 5px;
}

.comment-login .login-register a svg:first-child {
    position: relative;
    top: 3px;
}

.comment-login .login-register a svg {
    width: 20px;
    height: 20px;
}


.show-reply-box .control-btn,
.replys-box .reply-btn {
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 13px;
    padding: 0 10px;
    cursor: pointer;
}




.control-btn.active {
    background: rgba(245, 197, 24, 0.1);
    border-radius: 10px;
}

.show-reply-box .control-btn svg,
.replys-box .reply-btn svg {
    width: 20px;
    height: 20px;
}

.control-btn .opened-icon {
    display: none;
}

.comment .comment-replys {
    padding: 9px;
    background: #262626;
    margin-bottom: 10px;
    border-radius: 0 0 10px 10px;
    padding-right: 50px;
    display: none;
    border-radius: 10px;
    border-right: 1px solid #646464;
}

.control-btn .replys-count {
    position: relative;
    top: 2px;
}

.submit-comment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #151515;
    padding: 10px;
    position: relative;
    border-radius: 10px;
    margin-bottom: 10px;
}

.submit-comment .comment-input {
    background: none;
    padding: 7px 10px;
    color: white;
}
.submit-comment textarea{
    width: 100%;
    background: #303030;
    border:1px solid #292929;
    border-radius: 10px;
    min-height: 100px;
    font-size: 13px;
}
.sub-comment-btns{
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
}

.submit-comment button {
    background: none;
    border: none;
}

#submit-comment-btn{
    display: flex;
    gap: 10px;
    background: #252525;
    border-radius: 9px;
    padding: 5px;
    align-items: center;
    justify-self: center;
    cursor: pointer;
}






/* ================= list ==================== */

.movieList {
     
    margin: 0 auto;
    /* padding: 10px 6px; */
}

.movieList__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;

}

.delete-fav {
    position: absolute;
    left: 4px;
    top: 14px;
    background: #333;
    border-radius: 50%;
    padding: 4px;
}

.movieList__content-title {
    position: absolute;
    bottom: -4px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.movieList__content-title div{
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.movieList__content-title h1{
    font-size: 24px;
    text-shadow: 2px 2px 3px black;
}
.movieList__content-title span{
    text-shadow: 2px 2px 3px black;
    font-size: 13px;
    color: #959595;
}

.movieList__content-items {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    grid-area: 15px;

    justify-content: center;
    row-gap: 5px;
}

.movieList__content-item {
    width: 15%;
    height: auto;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border-radius: 6px;

}

.movieList__content-pic {
    width: 100%;
    height: 80%;
    margin-top: 6px;
    border-radius: 5px;
    overflow: hidden;
    min-height: 180px;
    position: relative;
    border-radius: 10px;
    box-shadow: 3px 4px 1px #111;
    transition: all 0.2s ease-in;
}

.movieList__content-pic:hover{
    transform: scale(1.1);
    box-shadow: 0 2px 1px #6f0000;
    z-index: 10;
}

.img-loading img{
    animation: m-p-bg 3s linear infinite;
    filter: grayscale(100%);
}
@keyframes m-p-bg {
    0% {
        opacity: 1;
    }
    50% {
       opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}


.movieList__content-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-image: var(--actor-loading-bg);
    background-size: cover;
    border: 1px solid transparent;
    background-position: center;


}

.movieList__content-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.movieList__content-info-name {
    display: flex;
    text-align: center;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    position: relative;
    text-shadow: 2px 2px 0px black;
}
.movieList__content-info-name .i-fa-title{
    color: #c9c9c9;
    direction: rtl;
}
.movieList__content-info-name .i-en-title{
    direction: ltr;
}
.movieList__content-info-bottom {
    width: 90%;
    display: flex;
    justify-content: space-between;
    display: none;
}

.movieList__content-info-geners {
    display: flex;
    gap: 2px;
}

.movieList__content-info-gener {
    font-size: 10px;
    padding: 2px 7px;
    border: 1px solid gray;
    border-radius: 10px;
    color: #bababa;
}

.movieList__content-info-bottom svg {
    width: 30px;
}

.movieList__content-item-rate {
    width: 25%;
    height: 25px;
    color: #f5c518;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    position: absolute;
    left: 1px;
    text-shadow: 1px 1px 1px black,3px 2px 3px #000,-2px 3px 5px black,4px -1px 9px black;
    bottom: 0;
}
.movieList__content-item-date{
    color: #ffffff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 3px;
    font-size: 11px;
    text-shadow: 1px 1px 1px black,3px 2px 3px #000,-2px 3px 5px black,4px -1px 9px black;
    bottom: 2px;
}



.result-message {
    background: rgba(152, 255, 81, 0.3);
    font-size: 12px;
    align-items: center;
    padding: 3px 10px;
    border-radius: 5px;
    display: none;
}

.result-message.failed {
    background: rgba(219, 158, 158, 0.3);
}



.subscribe-box {
    display: flex;
    justify-content: center;
}

.subscribe-box .subscribtion {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 4px 16px;
    border: 1px solid #f5c518;
    border-radius: 26px;
}

.subscribe-box .subscribtion svg {
    width: 27px;
    height: 27px;
}






/* ========================= subscription ====================== */

.sub-alert {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    font-size: 13px;
    margin-top: 70px;
}


.plans-box .plan {
    border: 1px solid #4f4932;
    padding: 4px 20px;
    border-radius: 25px;
    display: flex;
    position: relative;
    justify-content: space-between;
    padding: 10px;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 15px;
}

.ready-to-buy{
    max-width: 600px;
    margin: 0 auto;
}
.buy-hint .hint{
        max-width: 600px;
    margin: 0 auto;
}

.plan-price .main-price {
    text-decoration: line-through;
    padding: 5px 10px;
    color: rgb(114, 114, 114);
}

.plan-price .discounted-price {
    padding: 0px 10px;
    border: 1px solid #515151;
    border-radius: 10px;
}


.plan-time {
    position: relative;
    display: flex;
}

.plan-time svg {
    position: absolute;
    width: 47px;
    height: 47px;
    top: -12px;
}

.plan-time .time-text {
    position: absolute;
    right: 18px;
    color: #F5C518;
    top: 1px;
}

.plan-time .time-text.year {
    right: 12px;
}

.plan-time .time-hint {
    position: relative;
    right: 54px;
    font-size: 14px;
}


.buy-hint .hint {
    display: flex;
    gap: 10px;
    align-items: start;
    font-size: 14px;
    padding: 0 10px;
}





.ready-to-buy .top-choice {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
}

.ready-to-buy .label {
    display: flex;
    gap: 5px;
}

.ready-to-buy .select {
    padding: 0 11px;
    border-radius: 10px;
    color: white;
    border: 1px solid #464646;
    background: black;
}

.ready-to-buy .privacy_policy {
    display: flex;
    padding: 10px 20px;
    gap: 5px;
}

.ready-to-buy .privacy_policy a {
    color: #f5c518;
}


.ready-to-buy .pay-button {
    width: 280px;
    margin: 0 auto;
    margin-top: 0px;
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding: 7px 20px;
    font-size: 15px;
    border: none;
    border-radius: 14px;
    background: #0b0b0b;
    color: #cdcdcd;
}

.pay-button.active {
    background: #08bc08;
    color: black;
}


/* =================== support =================== */

.tel-support {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tel-support span {
    text-align: center;
    margin-bottom: 10px;
}

.tel-support .tel {
    display: flex;
    align-items: center;
    margin: 10px;
    padding: 5px 30px;
    border: 1px solid #f7d042;
    border-radius: 19px;
}


/* ================== requests ============ */



form.request {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;

}

form.request input {
    background: #464646;
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
}

form.request button {
    padding: 5px;
    background: #f7d042;
    border: none;
    border-radius: 5px;
}


/* .requests-list .list-head {
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #262626;
    padding: 10px 0;
    font-size: 10px;
}


.requests-list .request-item {
    justify-content: space-around;
    font-size: 10px;
    border-bottom: 1px solid #0f0f0f;
}
.request-item .it-info{
    display: flex;
    justify-content: space-around;
    font-size: 10px;
    margin-top: 10px;
}


.request-item span{
    display: flex;
}
.request-item .r-link{
    padding: 4px 13px;
}

.request-item .r-link a{
    color: #f5c518;
} */



/* ==================== actor detail page ======================== */


.actor {
    width: 100%;

}

.actor__bg {
     
    margin: 0 auto;
    height: 50%;
}

.actor__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.actor__content {
     
    margin: 0 auto;
    position: relative;
}

.actor__content-info {
    text-align: center;
    top: -16px;
    position: relative;
}

.actor__content-info-img {
    position: relative;
    margin-top: 60px;
    display: flex;
    justify-content: center;
}
.actor__content-info-img::before{
    content: '';
  height: 50%;
  width: 100%;
  position: absolute;
  bottom: 0px;
  background: linear-gradient(360deg,#1a1a1a,#1a1a1ae0,#1a1a1aa6,#80808000);
}



.actor__content-info-pic {
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    width: 180px;
    height: 180px;
}

.actor__content-info-name {
    font-size: 20px;
    font-weight: bold;
    margin: 5px 0;
}

.actor__content-reals {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow:hidden;
}

.actor__content-reals-title {
    margin: 0;
    margin-top: 15px;
}

/* .actor__reals {
  height: 300px;
} */

.actor__items {
    flex-wrap: nowrap;
    row-gap: 0;
    justify-content: start;
    gap: 22px;
    overflow: auto;
    margin: 0 !important;
}





  .skeleton {
    border-radius: 8px;
    /* background: linear-gradient(90deg, #555 25%, #666 50%, #555 75%); */
    background: linear-gradient(90deg, #000 25%, #2d0000 50%, #000 75%);
    background-size: 200% 100%;
    animation: pulse 3.5s infinite linear;
    overflow: hidden !important;
    color: transparent !important;
    /* box-shadow: 0 0 4px #3c3c3c !important; */
    border: none !important;
    }
  .skeleton > * {
    visibility: hidden;
    }

    .skeleton::after{
        content: none !important;
    }

  @keyframes pulse {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }










/*! responsive  */
@media only screen and (max-width: 1200px) {
    .actor__content {
        max-width: 99%;
    }
}

@media only screen and (max-width: 500px) {
    .actor__reals {
        width: 220px !important;
    }

    .actor__bg {
        height: 450px;
    }

    .actor__reals {
        width: 180px !important;
    }

}

@media only screen and (max-width: 415px) {

    .actor__content-info-name {
        font-size: 15px;
    }
}





/* ========== login and register ============== */


.login {
    margin: 0px auto;
    margin-top: 0px;
    max-width: 500px;
    margin-top: 60PX;
    background: #222;
    border-radius: 20px;
    padding: 30px 20px;
}

.login .mess {
    display: flex;
    font-size: 15px;
    padding: 5px;
    justify-content: center;
    margin: 10px;
    border-radius: 13px;
}

.mess.error {
    background: #aa6d6d4f;
}

.mess.success {
    background: #77d3644f;
}

.goto-page {
    margin-top: 10px;
    gap: 5px;
    display: flex;
}

.goto-page a {
    color: #f5c518;
}

.field {
    padding: 10px;
    margin: 10px;
}

.login-header {
    text-align: center;
    font-size: 19px;
}

.field-input {
    display: flex;
    position: relative;
}

.field-input input {
    text-align: center;
    color: white;
    padding: 10px;
    width: 100%;
    padding: 6px;
    background: none;
    border-bottom: 1px solid #262626 !important;
}

.field-input svg {
    width: 25px;
    height: 25px;
    position: absolute;
    left: 0;
    opacity: 0.6;
}

.login-btn {
    min-width: 200px;
    display: flex;
    margin: 0 auto;
    padding: 5px;
    border-radius: 10px;
    background: none;
    color: white;
    border: 1px solid #f5c518;
    font-weight: bold;
    justify-content: center;
    background: linear-gradient(120deg, #313131, black);
}









/* ============ dashboard comments ================ */


.main-panel .comment {
    background: #242424;
    padding: 10px 15px;
    border-radius: 6px;
    border-bottom: 1px solid #2d2d2d;
  margin-bottom: 1px;
  margin: 10px;
}

.main-panel .comment a {
    color: #f5c518;
    font-weight: bold;
}

.main-panel .comment p {
    padding: 5px 20px;
    background: #1a1a1a;
    border-radius: 4px;
    color: #a2a2a2;
    font-size: 14px;
    margin: 5px;
}

.main-panel .subscription{
    margin-top: 80px;
    padding: 10px;
}







/* =============================== responsive =================================== */

@media (max-width:1000px) {
    .item-info .item-more {
        left: 4px;
        height: 42px;
        width: 321px;
        top: 100%;
    }

    .item-more svg {
        left: 0;
        top: -40px;
    }

    .item-more .more-line {
        top: -45px;
        width: 1px;
        border-bottom: none;
        border-radius: 0;
    }

    .item-more .more-detail span {
        right: 194px;
        top: -36px;
    }

    .info-sub p {
        margin-bottom: 30px;
    }

}

@media (max-width:880px) {
    .mobile-g-list {
        display: block;
    }

    .desktop-g-list {
        display: none;
    }

    .movieList__content-item {
        width: 23%;
    }



    .card {
        grid-column: span 2;
    }
}


#close_navbtn {
    display: none;
}

.mobile-logo {
    display: none;
}

.two-sub{
    color: var(--info-color);
    display: flex;
    gap: 15px;
    font-size: 12px;
    margin-top: 10px;
}
.imdb-red{
    color: #b60000;
}
.imdb-yellow{
    color: unset;
}
.imdb-green{
    color: #269100;
}
@media (max-width:768px) {

    .detail-content{
        background: var(--back) !important;
    }
    .login{
        margin-left: 20px;
        margin-right: 20px;
    }

    .recently-viewed .items .viewed-item .item-cover {
        width: 150px;
    }

    .recently-viewed .items .viewed-item .viewed-title {
        font-size: 12px;
    }

    .recently-viewed .items {
        overflow-x: auto;
    }

    #close_navbtn {
        display: block;
    }

    .mobile-logo {
        display: block;
    }

    .header-navbar {
        padding: 0;
        flex-direction: column;
        position: fixed;
        top: 0;
        background: linear-gradient(160deg,#000000ed,#1c0000,#0d0d0d75);
        backdrop-filter: blur(5px);
        right: 0;
        width: 0;
        text-align: center;
        padding-right: 0;
        height: 100%;
        z-index: 1001;
        transition: all 0.5s ease-in-out;
        overflow: hidden;
        padding-top: 25px;
        opacity: 0;
        height: 100vh;


    }

    .header-navbar.active {
        width: 70%;
        padding: 20px;
        padding-top: 25px;
        opacity: 1;
    }

    .header-navbar a {
        padding: 5px 0;
        background: #18181869;
    }

    .header-navbar a:last-child {
        border: none;
    }

    .bar-btn {
        display: flex;
    }


    .search-form input {
        min-width: 330px;
    }
}

@media (max-width:700px) {
    .detail-content .item-cover img{
        width:100%;
    }

    .content-item .item-cover img{
        border-radius: 20px;
    }
    .cover-holder-box{
        position: relative;
        
    }
    .cover-holder-box::after{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(151deg,#f000,black 80%);
        right: 0;
        border-radius: 20px;
    }
    .item-more{
        display: none;
    }
    .content-item .item-info{
        font-size:13px;
    }

    .content-item .item-info .info-sub p{
        display: none;
    }
    .content-item .item-info .info-sub{
        position: absolute;
        right: 10px;
    }
    .info-sub.genre{
        top: 16px;
        width: 93%;
    }
    .content-item .info-sub .info-genre{
        padding-right: 7px;
        max-width: 344px;
    }
    .content-item .info-sub .info-genre a{
        background: #606060;
        box-shadow: 0 3px 3px #020202;
    }

    .info-sub.genre svg , .info-sub.genre span{
        display: none;
    }
    .content-item .top-info .item-title{
        bottom: 61px;
        position: absolute;
        right: 0px;
        width: 100% !important;
        justify-content: center;
    }
    .content-item .top-info .title-imdb{
        position: absolute;
        bottom: 190px !important;
        align-items: start !important;
    }
    .content-item .top-info .title-imdb .rate{
        position: relative;
        right: -12px;
    }
    .content-item .top-info .title-imdb svg{
        position: relative;
        right: -8px;
        width:50px;
    }
    .content-item .top-info .title-imdb .rate span{
        font-size:15px;
    }
    .info-sub.stars{
       bottom: 100px;
    }
    .info-sub.time{
        bottom: 130px;
    }
    .info-sub.country{
        bottom: 160px;
    }



    .line{
        top:-80px;
    }
    .slider{
        max-height: 700px;
    }



    .option-content svg {
        width: 23px;
        height: 23px;
    }

    .comment .comment-replys {
        padding-right: 30px;
    }

    .all .comment .user .username {
        font-size: 13px;
    }

    .all .comment .user .profile {
        width: 40px;
        height: 40px;
    }

    .all .comment .text {
        top: -20px;
        right: 50px;
        width: 80%;
        font-size: 13px;
        padding: 0 5px;
        color: #c2c2c2;
    }

    .all-samelike-box .actor img {
        width: 160px;
        height: 160px;
    }

    .all-samelike-box .samelike-item img {
        height: 180px;
    }

    .season-download-links .season-part {
        width: 100%;
    }

    .play-trailer-box {
        top: 68%;
        left: 77%;
    }

    .filter-box form div {
        width: 100%;
    }

    .content-item .item-cover {
        width: 100%;
    }



    .content-item .item-info {
        width: 100%;
    }



    .slide-info-left .title-imdb {
        padding-left: 0;
        font-size: 9px;
        top:-30px;
    }

    .slide-info-left .title-imdb .slide-title {
        bottom: 0;
    }

    .filter-box {
        margin-top: 92px;
        padding: 0 8px;
    }



    .play-trailer-box svg {
        width: 26px;
        height: 26px;
    }

    .slide-info-left {
        bottom: 17px;
        display:none;
    }

    .slide {
        height: 350px !important;
        padding-bottom:0 !important;
    }


    .slide-info-left .title-imdb svg {
        width: 45px;
        position: relative;
        left: 10px;
    }

    .slide-info-left .title-imdb .rate {
        top: 11px;
        left: 10px;
    }

    .slide-info-left .title-imdb .slide-title {
        left: 10px;
    }

}

@media (max-width:600px) {

    .top-info .item-title {
        justify-content: center;
        flex-direction:column;
        gap:0;
        align-items: center;
        text-align: center;
    }
    .top-info .item-title h3{
        margin:0;
    }


    .recently-viewed .viewed-header {
        font-size: 12px;
    }


}

@media (max-width:1000px) {
    .detail-content .item-cover {
        width: 70%;
    }

    .detail-content .item-info {
        width: 100%;
        padding: 5px 20px;
    }
}

@media (max-width:560px) {
    .info-sub .info-actors{
        overflow-x:auto;
        width:200px;
    }
    .detail-content .item-info .info-sub span{
        flex-shrink:0;
    }
    .info-sub .info-actors a{
        flex-shrink:0;
    }
    .season-overall {
        flex-direction: column;
        align-items: center;
    }
    .season-overall .right-info,
    .season-overall .left-info {
        width: 100%;
        justify-content: space-between;
    }

    .season-overall .right-info svg,
    .season-overall .left-info svg {
        display: none;
    }


    .comment-login {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }




    .options-menu .option-menu-item button {
        width: 100%;
    }

    .movieList__content-items {
        justify-content: center;
    }

    .top-info .item-title {
        justify-content: center;
        flex-direction:column;
        gap:0;
        align-items: center;
        text-align: center;
        width:100%;
    }
    .top-info .item-title h3{
        margin:0;
    }

    .detail-content .top-info .title-imdb {
        align-items: center;
        width:100%;
    }

    .movie-quality .left-info {
        gap: 0;
    }

    .movie-quality .left-info span {
        width: 100%;
        display: flex;
        justify-content: end;
    }

    .movieList__content-item {
       width: calc(33.33% - 10px);
    }

    .movieList__content-info-name {
        font-size: 12px;
    }
   


}

@media (max-width:440px) {
    .title-holder {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .movie-quality {
        flex-direction: column;
        gap: 15px;
    }

    .movie-quality .left-info {
        gap: 10px;
    }

    .movie-quality .left-info span {
        width: auto;
        display: flex;
        justify-content: center;
    }
}

@media (max-width:415px) {
    .search-result-box .result-item img {
        width: 68px;
    }

    .search-result-box .result-item .title {
        font-size: 15px;
    }

    .site-logo {
        justify-content: center;
    }

    .title-holder img {
        position: relative;
        left: 0;
        top: 0;
    }


    .search-form input {
        min-width: 0;
        width: 100%;
    }




}




.caption{
    position: relative;
}
.caption svg #Shape{
    stroke: #5d5d5d;
}
.caption p{
    color: var(--info-color);;
    background: #2929293b;
    font-size: 14px;
    border-radius: 10px;
    padding: 10px;
    overflow: hidden;
    transition: max-height 0.5s ease-in;
    border-left: 2px solid rgb(33, 33, 33);
    mask-image: linear-gradient(to top, #0000 0px, black 1rem);
}

.cap-open .nav-up{
    transform: rotate(360deg);
}

.nav-up{
    display: none;
    position: absolute;
    left: 9px;
    bottom: 40px;
    width: 17px !important;
    height: 17px !important;
    z-index: 100;
}

@media (max-width:768px) {
    .nav{
        position: fixed;
        margin-top: 0;
        width: 97%;
    }
    .nav-up{
        display: block;
    }
    .caption p{
        max-height: 97px;
    }
    .detail-content .item-cover{
        border-radius: 10px;
        width: 100%;
        padding: unset;
        margin-top: unset;
    }
    .cover-img-holder{
        height: 370px;
        width: 100%;

    }
    .cover-img-holder::before{
        background: linear-gradient(185deg,#0000 ,var(--shadow-card-back) 95%);
        box-shadow: unset;
        border-radius: 0;
    }
    .detail-content .item-info{
        margin-top: unset;
        position: relative;
        top: -10px;
    }
    .top-info .title-imdb svg{
        width: 50px;
    }
    .top-info .title-imdb .rate span{
        font-size: 17px;
    }
    .top-info .title-imdb svg{
        bottom: -5px;
    }
}




.like-panel{
    display: flex;
    justify-content: space-between;
}
.l-box{
    display: flex;
    gap: 4px;
}

.like-panel svg{
    width: 25px;
}
.like-panel .like ,.like-panel .dislike{
    display: flex;
    gap: 3px;
    background: #424342;
    padding: 3px 10px;
    border-radius: 10px;
    height: 33px;
    align-items: center;
    mask-image: linear-gradient(to top, #0000 0px, black 1rem);
}
.after-like,.after-dislike{
    display: none;
}

.like.liked .after-like{
    display: block;
}
.like.liked .default-like{
    display: none;
}

.dislike.disliked .after-dislike{
    display: block;
}
.dislike.disliked .default-dislike{
    display: none;
}





/* rating */
.lucimovie-rating{
    display: flex;
    align-items: center;
    gap: 4px;
}
.lucimovie-rating .submit-rate{
    display: flex;
    cursor: pointer;
}
.luci-rate-box{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.luci-rate-box .luci-rate{
    border-bottom: 1px solid #dfb009;
}

.luci-rate .rate{
    font-size: 18px;
    font-weight: bold;
    color: #f5c518;
}
.luci-rate .max-rate{
    color: #adacac;
}





.rating-box {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 100;
    opacity: 0;
    visibility: hidden; 
    transform: translate(-50%, -50%) scale(0.5);
    padding: 10px;
    background: #424342;
    border-radius: 10px;
    width: 90%;
    display: flex; 
    align-items: center;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    transition: transform 0.3s ease-in;
}

.rating-box.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible; 
    transform: translate(-50%, -50%) scale(1);
    max-width: 400px;
}

.rating-box .stars{
    display: flex;
    gap: 8px;
    flex-direction: row-reverse;
    position: relative;
    z-index: 120;
}
.rating-box .stars .star{
    font-size: 27px;
    cursor: pointer;
}

.rate-btns span{
  padding: 3px 10px;
  border-radius: 10px;
  color: #373737;
  font-weight: bold;
}
.rate-btns .s-rate{
    background: red;
    cursor: pointer;
}

.close-rate{
    position: absolute;
  width: 30px;
  top: 0;
  right: 0;
  cursor: pointer;
}


.selected-rate-box .back-star{
    position: absolute;
    font-size: 100px;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: red;
}
.selected-rate-box .num{
    position: relative;
  top: -22px;
  color: #000;
  left: 1px;
  font-weight: bold;
}




.text-box{
    width: 100%;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 5%;
    z-index: -1;
    transition: all 0.3s ease-in;
    opacity: 0;
    transform: scale(0.7);
    flex-direction: column;
    gap: 15px;
    align-items: center;
}
.text-box p{
    padding: 3px 10px;
    border-radius: 10px;
    border-right: 3px solid white;
    margin: 0;
}
.text-box p.red{
    background: rgb(75, 0, 0);
    box-shadow: 0 0 6px #ff1a1a;
}
.text-box p.green{
    background: rgb(0, 60, 23);
    box-shadow: 0 0 6px #4cff1a;
}

.text-box.active{
    top: 10%;
    opacity: 1;
    z-index: 10001;
    transform: scale(1);
}


.update-alerts{
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  border-right: 2px dashed #820000;
  color: #bebebe;
  margin-top: 5px;
}
.update-alerts svg{
    width: 30px;
}
.update-alerts .update-item{
    display: flex;

}













/* // news */


.news-box{
    display: flex;
    padding: 10px 14px;
    flex-direction: column;
    align-items: center;
}
.news-item{
  margin: 5px ;
  padding: 5px 12px;
  background: #33333382;
  border-radius: 10px;
  width: 100%;
  max-width: 630px;
}
.news-item img{
    border-radius: 10px;

    max-width: 100%;
}

.news-item *{
    white-space: normal;
}
@media (max-width:768px) {
    .news-item{
        max-width: 340px;
    }
    .ep-count-ddown-box svg{
        display: block !important;
    }
}



/* related news */

.related-news{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5px 10px;

}

.m-r-box{
    margin: 0 10px;
    /* border: 1px solid #535353; */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    max-height: 800px;
    overflow: auto;
}
.m-r-box h1{
    font-size: 17px;
    position: sticky;
    top: 0;
    width: 100%;
    text-align: center;
    background-color: black;
}
.r-n-item{
    background: #3131318f;
    max-width: 350px;
    padding: 5px 12px;
    border-radius: 10px;
}
.r-n-item img{
    max-width: 100%;
    border-radius: 10px;
}






.related-videos{
    display: flex;
    overflow-x: auto;
    gap: 20px;
}
/* r videos */
.video-item{
    max-width: 360px;
    margin-top: 10px;
    flex-shrink: 0;
}
.video-item video{
    max-width: 100%;
}


















.search {
    position: relative;
}

.search-form {
    display: flex;
    position: relative;
    color: white;
    justify-content: space-between;
    align-items: center;
}

.search-form svg {
    height: 30px;
    width: 40px;
}
.search-form button{
    position: absolute;
    left: 0;
    top: 6px;
}
.search-input-box{
    display: flex;
    width: 94%;
}
.search-form input {
    width: 100%;
    border-radius: 40px;
    height: 36px;
    background: #020202;
    color: white;
    padding-right: 13px;
    box-shadow: 0 0 2px #8f8f8f;
}

.search-result-box {
    position: relative;
    display: flex;
    top: 10px;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    width: 100%;
    flex-wrap: wrap;
}

@media (max-width:768px) {
    .search-res-items-boxs{
        scrollbar-width: none;
    }
}
.search-result-box .result-item {
    display: flex;
    min-width: 44%;
    padding: 5px 10px;
    gap: 10px;
    transition: all 0.5s ease;
}
@media (max-width:500px) {
   .search-result-box .result-item {
        width: 90%;
   }
}

.search-result-box .result-item img {
    border-radius: 10px;
    height: 140px;
    box-shadow: -3px -2px 4px #000;
    width: 100px;
    background-image: var(--actor-loading-bg);
    background-size: cover;
    border: 1px solid transparent;
    background-position: center;
}
.search-result-box .result-item .poster-img-holder{
    position: relative;
}




.search-result-box .result-item .title {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
}

.result-item .title .genre {
    color: rgb(146, 146, 146);
}

.result-item .title div span {
    color: #f5c518;
    font-weight: bold;
}

.search-result-box .all-results {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    padding: 5px;
    background: linear-gradient(165deg,#020202e5,#9b1d1d4d,#000);
}
.all-results svg{
    width: 12px;
    height: 12px;
}



.search{
    display: flex;
    justify-content: space-between;
    width: 200px;
    border: 1px solid #444;
    border-radius: 25px;
    padding: 2px 7px 0px 2px;
    color: #828282;
    align-items: center;
    cursor: pointer;
}

.search svg{
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid hsla(0,0%,59%,.1);
    border-radius: 14px;
    cursor: pointer;
    padding: 5px;
}

.search-box{
  position: fixed;
  width: 99%;
  min-height: 150px;
  background: linear-gradient(160deg,#000000ed,#1c0000,#0d0d0de3);
  z-index: 1000;
  top: 0;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  border: 1px solid #464646;
  padding: 10px;
  height: 96%;
}

.close-search-btn{
    position: relative;
  top: 2px;
}

@media (max-width:768px) {
    .search-box{
        top: 0%;
        height: 100%;
        transform: translate(-50%);
    }
}


.search-loader {
    width: 20px;
    height: 20px;
    border: 2px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    position: absolute;
    left: 7px;
    top: 9px;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

.close-search-btn{
    cursor: pointer;
}
#searchButton{
    cursor: pointer;
}

.result-item-more-info{
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 12px;
    color: #9d9d9d;
    margin-top: 6px;
    gap: 10px;
}

.result-item-genres{
    display: flex;
    gap: 10px;

}

.more-info-i-y{
    display: flex;
    gap:10px
}

.result-item-type{
    background: linear-gradient(165deg,#3e0000,#020202,#400);
  padding: 0 5px;
  border-radius: 10px;
  border-radius: 1;
  border-right: 1px solid #4f4f4f;
  border-left: 1px solid #515151;
  margin-top: 3px;
}

.result-item-imdb{
    text-shadow: 0 0 10px red;
}
.result-item-imdb span{
    color: #f5c518;
    font-weight: bold;
}
.r-i-poster{
    position: relative;
}

.search-res-items-boxs{ 
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    overflow: auto;
    scrollbar-width: thin;
    max-height: 100%;
}

.result-actor-item{
    padding: 10px;
    display: flex;
  flex-direction: column;
  align-items: center;
}

.result-actor-profile{
    border-radius: 50%;
    width: 85px;
    height: 85px;
    position: relative;
}
.result-actor-profile img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid transparent;
    background-image: var(--actor-loading-bg);
    background-size: cover;
}
.result-actor-profile.active{
    filter: grayscale(100%);
}
.result-actor-profile.active::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(165deg,white,red,black);
    border-radius: 50%;
    animation: actor-prof 1s ease-in infinite;
    padding: 2px;
    filter: blur(2px);
    
}
@keyframes actor-prof {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.result-actor-box{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 60px;
    width: 100%;
    padding-bottom: 100px;
}

.result-actor-name{
    margin-top: 5px;
    font-size: 12px;
}

.res-title{
  position: relative;
  top: 10px;
  right: 10px;
  width: 97%;
}
.res-title::before{
content: '';
  width: 88%;
  height: 2px;
  position: absolute;
  top: 50%;
  background: linear-gradient(90deg,#0b0b0b00,#37373785 ,#97979700);
  left: 0;
}

.res-title::after{
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 10px;
  position: absolute;
  background: #939393;
  right: 78px;
  top: 10px;

}

.recent-searchs{
    display: flex;
    width: 100%;
    padding: 10px;
    gap: 10px;
    overflow: auto;
    margin-top: 10px;
}

.recent-search-item{
    flex-shrink: 0;
    padding: 5px;
    background: l;
    line-height: 10px;
    backdrop-filter: blur(3px);
    background: linear-gradient(132deg,#1c1c1c,#1b0000,#262626);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
}

@media (max-width:768px) {
    .recent-searchs{
        scrollbar-width: none;
    }
}

.not-found-text{
    width: 100%;
    text-align: center;
    color: #777676;
    position: relative;
}










.mobile-nav{
    display: none ;
    position: fixed;
    bottom: 0;
    width: 100%;
    justify-content: space-around;
    z-index: 1000;
    padding-top: 4px;
    background: linear-gradient(#1a1a1a03,#1a1a1a,#1a1a1a 81%);
}

.mobile-nav-item{
    display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;

}
.mobile-nav-item svg{
    width: 22px;
    height: 20px;
}
.mobile-nav-item-title{
    font-size: 12px;
    position: relative;
    bottom: 5px;
}
@media (max-width:768px){
    .mobile-nav{
        display: flex;
        border-bottom: 2px solid red;
    }
    .title-holder{
        display: none;
    }


    .movieList__content-pic{
        height: 180px;
    }
}




.search {
    border: none;
    padding: 0;
    width: unset;
}
.search .search-text{
    display: none;
}










#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
  opacity: 0.9;
  flex-direction: column;
  direction: rtl;
}



@keyframes spin {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.2); }
  50% { transform: rotate(180deg) scale(1); }
  75% { transform: rotate(270deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}


@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}


.ml-loader {
  font-family: 'Arial Black', sans-serif;
  font-size: 72px;
  display: flex;
  gap: 4px;
  position: relative;
  height: 100px;
}


.ml-loader span {
  display: inline-block;
  background: linear-gradient(45deg, red, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: spin 3s linear infinite, bounce 1s ease-in-out infinite;
  text-shadow: 0 0 15px rgba(255,0,0,0.6), 0 0 25px rgba(255,255,255,0.5);
}


.ml-loader span:nth-child(2) {
  animation-delay: 0.5s, 0.2s;
}


.list-last-preview{
    position: relative;
}
.list-last-preview img{
    max-height: 350px;
    width: 100%;
    object-fit: cover;
}

.list-last-preview::before{
    content: '';
    background: linear-gradient(180deg,#1a1a1a00,#0b0b0b 77%);
    position: absolute;
    bottom: 0;
    height: 30%;
    width: 100%;
}

.movieList__content{
    position: relative;
}

@media (max-width:768px){
    .list-last-preview img{
        max-height: 300px;
    }
}


.movieList__content-pic::before{
    content: '';
    background: linear-gradient(180deg,#f000,#1a1a1a);
    position: absolute;
    bottom: 0;
    height: 36%;
    width: 100%;
}



.swiper{
    height: 450px;
    position: relative;
    width: 99%;
}


.swiper::before{
    content: '';
    background: linear-gradient(180deg,#f000,var(--shadow-card-back));
    position: absolute;
    bottom: 0;
    height: 20%;
    width: 100%;
    z-index: 10;
}
.swiper-slide{
    height: 450px;
}
.swiper-slide.swiper-slide-active .locandina{
    animation: b-t 0.5s ease-in;
}

@keyframes b-t {
    0%{
        bottom: -250px;
        left: 10px;
    }
    100%{
        bottom: -140px;
        left: 10px;
    }
}




/* .swiper-slide img{
    height: 100%;
    width: 100%;
    object-fit: cover;

} */
.swiper-pagination-bullet{
    background: #cecece !important;
}

.swiper-pagination-bullet-active{
    background-color: #f00 !important;
}

.swiper-pagination{
    right: 20px;
    bottom: 14px !important;
}

.swiper-button-next, .swiper-button-prev{
    top: unset !important;
    bottom: 7px;
    width: unset !important;
    height: unset !important;
}
.swiper-button-next{
    right: 142px !important;
    left: unset !important;
}
.swiper-button-prev{
    right: 29px !important;
    left: unset !important;
}

.swiper-rtl .swiper-button-next::after, .swiper-rtl .swiper-button-prev::after{
    font-size: 12px;
    background: #202020;
    border: 1px solid rgb(70, 70, 70);
    padding: 2px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #f00;
}




.slide-detail{
position: absolute;
  z-index: 100;
  bottom: 9%;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  font-size: 32px;
  font-weight: bold;
  color: #ffffff8f;
  text-shadow: 1px 1px 1px #00000052,2px 2px 2px #00000052;
}

.slide-detail .en-title{
    font-weight: bold;
    text-shadow: 0 0 10px black;
}
.slide-detail .fa-title{
    position: relative;
}

.slide-detail .more-d{
    background: #1c1c1c9e;
    padding: 5px;
    text-align: center;
    border-radius: 7px;
}



.middle-content {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 110;
    margin: 0 auto;
    gap: 10px;
    flex-direction: row-reverse;
}



.categories-view{
    width: 100%;
}

.category-item{
    position: relative;
    width: 100%;
    padding: 10px 0;
}

.cat-item-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 15px;
}

.cat-box{
    display: flex;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0;
    scrollbar-width: none;
    cursor: pointer;
    gap: 10px;
}

.cat-box-loader {
    width: 35px;
    height: 35px;
    border: 3px solid #4D4D4D;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    margin: 0 auto;
    display: block;
}

.action-item-loading{
    width: 25px;
    height: 25px;
    border: 3px solid #4D4D4D;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    margin: 0 auto;
    display: block;
}

.action-items-item.watch .watch-path.active{
    stroke: #303030 !important;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 


.cat-box-next ,.cat-box-prev{
    position: sticky;
    background-color: #000000d4;
    display: flex;
    align-items: center;
    height: 60px;
    top: 50%;
    transform: translate(0,-50%);

}

.cat-box-next svg ,.cat-box-prev svg{
    width: 30px;
    height: 30px;
}
.cat-box-next{
    left: 0;
    box-shadow: 3px 0 4px black;
}
.cat-box-prev{
    left: calc(100% - 30px);
    box-shadow: -3px 0 4px black;

}


.cat-item{
    cursor: pointer;
    position: relative;
    animation: scale-up 0.3s linear;
}
.cat-img-holder{
    width: 165px;
    height: 240px;
}
.cat-img-holder.wide{
    width: 240px !important;
    height: 150px !important;
}
.cat-note{
    position: absolute;
    top: 4px;
    right: 3px;
    background: #0b0b0b;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 12px;
    color: #cccccc;
}

@media (max-width:768px) {
    .cat-img-holder{
        width: 155px;
        height: 220px;
    }
}



.cat-img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 3px 4px 1px #111;
    background: var(--actor-loading-bg);
    background-size: cover;
    background-position: center;
    border: 1px solid black;
    object-fit: cover;
}
.cat-img-holder{
    position: relative;
    transition: all 0.2s ease-in;
}
.cat-img-holder:hover {
    transform: scale(1.04);
}

.cat-img-holder:hover .cat-img{
    box-shadow: 0 8px 10px #400;
}

.cat-more-btn{
    color: #d80000;
    transition: all 0.2s ease-in;
    background: #161616;
    padding: 2px 8px;
    border-radius: 25px;
    font-size: 12px;
}
.cat-item-title{
    font-size: 18px;
  color: #b1b1b1;
}
.cat-subtitle{
    font-size: 11px;
  position: relative;
  top: -3px;
  color: #b5b5b5;
}
.cat-more-btn:hover{
    transform: scale(1.04);
}




.cat-box > .c-item:last-child{
    margin-left: 20px;
}
.cat-box > .c-item:first-child{
   margin-right: 20px;
}
.i-w-item{
    flex-shrink: 0;
}



.media-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient( 90deg, rgba(134, 3, 3, 0.35), rgb(17, 17, 17) 55% );
  color: #fff;
  min-width: 300px;
  animation: scale-up 0.3s linear;

}

@keyframes scale-up {
    0%{
        transform: scale(0.7);
    }
    100%{
        transform: scale(1);
    }
}
/* Poster */
.media-poster {
  position: relative;
  width: 100px;
  flex-shrink: 0;
  height: 150px;

}

.media-poster img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: block;
  object-fit: cover;
  background: var(--actor-loading-bg);
  background-size: cover;
  background-position: center;
  border: 1px solid black;
}

/* Watchlist button */
.watchlist-btn {
  position: absolute;
  top: 1px;
  left:1px;
  width: 26px;
  height: 38px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 0 0 6px 6px;
  font-size: 20px;
  cursor: pointer;
}

/* Info */
.media-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

.media-rank {
  background: #6a0000;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

.media-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-meta {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: #cbd5e1;
}

.media-meta span:first-child{
    direction: ltr;
}
/* Rating */
.media-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.media-rating .star {
  color: #facc15;
  font-size: 16px;
}

.media-rating .score {
  font-weight: 600;
}

.media-rating .votes {
  color: #94a3b8;
  font-size: 13px;
}

.rate-btn {
  margin-left: 8px;
  background: transparent;
  border: none;
  color: #60a5fa;
  cursor: pointer;
  font-size: 14px;
}

/* Watched */
.watched-btn {
  margin-top: 6px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: #e5e7eb;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  width: fit-content;
}

.watched-btn:hover {
  background: rgba(255,255,255,0.15);
}


.cat-d-title{
    text-align: center;
    direction: ltr;
}
.cat-d-fa-title{
    text-align: center;
    color: #797979;
    margin-top: 5px;

      border-radius: 5px;
      margin-top: 8px;
}
.cat-d-imdb{
    position: absolute;
    left: 4px;
    bottom: -4px;
    border-radius: 50%;
    padding: 5px;
    text-shadow: 1px 1px 1px black,3px 2px 3px #000,-2px 3px 5px black,4px -1px 9px black;
}

.cat-d-imdb .rtg{
    color: #ffa700;
    font-weight: bold;
}
.cat-d-imdb span:last-child{
    color: #dbdada;
  font-size: 13px;
}




.link{
  display: block;
  text-align: center;
  color: #777;
  text-decoration: none;
  padding: 10px;
}

.movie_card{
  position: relative;
  display: block;
  width: 800px;
  height: 350px;
  overflow: hidden;
  border-radius: 10px;
  transition: all 0.4s;
  box-shadow: 0px 0px 120px -25px rgba(0,0,0, 0.5);
  &:hover{
    transform: scale(1.02);
    box-shadow: 0px 0px 80px -25px rgba(0,0,0, 0.5);
    transition: all 0.4s;
  }
  .info_section{
    position: relative;
    width: 100%;
    height: 100%;
	  background-blend-mode: multiply;
    z-index: 2;
    border-radius: 10px;
    .movie_header{
      position: relative;
      padding: 25px;
      height: 40%;
      top: 85px;
      h1{
        color: white;
        font-weight: 500;
        font-size: 24px;
      }
      h4{
        color: #555;
        font-weight: 400;
        max-height: 200px;
        text-align: right;
        direction: ltr;
      }
      .minutes{
        display: inline-block;
        margin-top: 15px;
        color: #555;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid rgba(0,0,0,0.05);
      }
      .type{
        display: inline-block;
        color: #959595;
        margin-left: 10px;
      }
      .locandina{
        position: absolute;
        float: left;
        margin-right: 20px;
        width: 140px;
        height: 180px;
        border-radius: 10px;
        box-shadow: 0 0 10px black;
        bottom: -140px;
        left: 10px;
      }
    }
    .movie_desc{
      padding: 25px;
      height: 50%;
      .text{
        color: #545454;
      }
    }
    .movie_social{
      height: 10%;
      padding-left: 15px;
      padding-bottom: 20px;
      ul{
        list-style: none;
        padding: 0;
        li{
          display: inline-block;
          color: rgba(0,0,0,0.3);
          transition: color 0.3s;
          transition-delay: 0.15s;
          margin: 0 10px;
          &:hover{
            transition: color 0.3s;
            color: rgba(0,0,0,0.7);
          }
          i{
            font-size: 19px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .blur_back{
    position: absolute;
    top: 0;
    z-index: 1;
    height: 100%; 
    left: 0;
    background-size: cover !important;
    border-radius: 11px;
    background-position: center !important;
  }
}



@media screen and (min-width: 768px) {
  
  .movie_desc{
    width: 50%;
  }
  
  .info_section{
    /*background: linear-gradient(-143deg, #1a1a1a 21%, transparent 100%);*/
  }
  
  .blur_back{
    width: 100%;
    /* background-position: -100% 10% !important;   */
  }
}

@media screen and (max-width: 768px) {

    .swiper{
        height: 300px;
    }

    @keyframes b-t {
        0%{
            bottom: -190px;
            left: 10px;
        }
        100%{
            bottom: 5px;
            left: 10px;
        }
    }
    .swiper-slide.swiper-slide-active .locandina{
        animation: b-t 0.5s ease-in;
    }
    .movie_card {
    & .info_section {
        & .movie_header {
        & .locandina {
            bottom: 5px;
        }}}}

  .movie_card{
    width: 95%;
    min-height: 350px;
    height: auto;
  }
  
  .blur_back{
    width: 100%;
  }

  .movie_desc{
    width: 100%;
  }
  
  .info_section{
    /*background: linear-gradient(-143deg, #1a1a1a 21%, transparent 100%);*/
    display: inline-grid;
  }
}



.scroll-thin{
    scrollbar-width: thin !important;
}
@media (max-width:768px) {
    .scroll-thin{
        scrollbar-width: none !important;
    }
}


.sec-title{
    padding: 10px;
    position: relative;
}
.sec-title.scrolled-into-view h1{
    animation: scrolled 3s linear infinite;
}
@keyframes scrolled {
    0%{
        color: #f5c518;
    }
    100%{
        color: white;
    }
}
.sec-title::before{
    content: '';
    width: 60%;
    height: 2px;
    position: absolute;
    top: 50%;
    background: linear-gradient(90deg,#0b0b0b00,#ff000085 ,#97979700);
    left: 0;
}
.sec-title::after{
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 10px;
    position: absolute;
    background: #939393;
    right: 14px;
    top: 50%;
}

.sec-title h1{
    padding-right: 20px;
    font-size: 16px;
}

.season-options{
    border: none;
    position: relative;
    z-index: 10;
  background: #2e2e2e;
  color: white;
  padding: 5px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.season-options:hover{
    color:#f5c518;
}
.filter-selects-box{
    position: relative;
    display: flex;
  justify-content: space-between;
  padding: 3px;
}


.select-season-hint{
    font-size: 12px;
    color: var(--info-color);
}



#subSerieBox{
    margin-top: 34px;
}

.collectons-list{
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 15px 0;
    justify-content: center;
    row-gap: 18px;
}

.collection-item{
    width: 30%;
    height: auto;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #262626;
    box-shadow: 0 0 5px black;
    border-radius: 10px;
}

@media (max-width:768px) {
    .collection-item{
        width: 90%;
    }
}
.collection-img{
    width: 100%;
    height: 80%;
    border-radius: 5px;
    overflow: hidden;
    min-height: 180px;
    position: relative;
    max-height: 320px;
}
.collection-img::before{
    content: '';
    background: linear-gradient(180deg,#f000,#262626);
    position: absolute;
    bottom: 0;
    height: 50%;
    width: 100%;
    z-index: 10;
}

.collection-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-image: var(--actor-loading-bg);
    background-size: cover;
    border: 1px solid transparent;
    background-position: center;
    border-radius: 10px;
}


.collection-detail{
    width: 100%;
    position: relative;
    top: -15px;
    z-index: 10;
}
.collection-title{
    text-align: center;
    
    text-shadow: 0 0 10px black;
    font-size: 20px;
}
.detail-c-t{
    top: -73px !important;
}
.collection-sub-title{
    font-size: 15px;
    text-align: center;

}

.collection-first-item-decription{
    padding: 10px;
    color: #ccc;

}


.collection-c-i{
    display: flex;
    justify-content: space-between;
    padding: 2px 10px;
}

.collection-imdb-label{
    color: #f5c518;
}
.collection-item-imdb{
    padding: 4px;
    background: #3a3a3a;
    position: relative;
    left: -10px;
    border-radius: 0 3px 3px 0;
}

.collection-ep-count{
    display: flex;
    align-items: center;
}

.mt55{
    margin-top: 55px;
}

.collection-sec-title{
    position: sticky;
    top: 0;
    z-index: 120;
    background: #0b0b0b;
    height: 36px;
    display: flex;
    align-items: center;
}

.collection-last-poster img{
    width: 100%;
    min-height: 300px;
    max-height: 600px;
    object-fit: cover;
}

.collection-last-poster{
    position: relative;
}

.collection-last-poster::before{
    content: '';
    background: linear-gradient(180deg,#f000,#1a1a1a);
    position: absolute;
    bottom: 0;
    height: 50%;
    width: 100%;
    z-index: 10;
}



.collection-detail .cat-box{
    top: -58px;
    z-index: 10;
    justify-content: center;
}

.collection-detail .cat-box .item-order{
    position: absolute;
    top: 5px;
    right: 6px;
    background: #f9af00;
    padding: 5px;
    width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: inset 2px -2px 4px black;
}
@media (max-width:768px) {
    .collection-detail .cat-box{
        justify-content: unset;
    }
    .collection-last-poster img{
        max-height: 300px;
    }
}

.collection-title{
    display: flex;
    justify-content: center;
    position: relative;
    top: -13px;
    z-index: 10;
    text-shadow: 0 0 10px black;
}

.collection-title h1{
    font-size: 20px;
}

.filter-list{
    position: relative;
    top: -24px;
    padding: 10px;
    position: sticky;
    top: 0px;
    z-index: 121;
    background: #0b0b0b;

}

.filter-list .filters-box{
    display: flex;
    gap: 3px;
    overflow: auto;
    flex-wrap: wrap;
}

.filter-list select{
    background: #1a1a1a;
    border: none;
    padding: 5px;
    border-radius: 7px;
    color: white;
    cursor: pointer;
    border: 1px solid #646464;
    flex-shrink: 0;
    max-width: 75px;
    box-shadow: inset 0 0 4px #848484;
    font-size: 12px;
    transition: all 0.4 ease;
}
.filter-list .filter-item{
    position: relative;
}

.filter-list .filter-item::before{
    content: '';
    width: 19%;
    height: 3px;
    background: #646464;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 3px;
    box-shadow: 0 0 1px #868686;
}


.submited-filters{
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    z-index: 120;
    background: var(--back);
    overflow: auto;
}

.s-f-item{
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 5px;
    border-radius: 15px;
    border: 1px solid #3a3a3a;
    cursor: pointer;
    margin-bottom: 3px;
    flex-shrink: 0;
}
.s-f-item svg{
    width: 15px;
    height: 15px;
}

.more-filter{
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0 5px;
    cursor: pointer;
    color: #f5c518;
}

.more-filter svg{
    width: 10px;
    height: 10px;
}

.more-filter svg.up{
    transform: rotate(180deg);
}

.filter-list button{
    color: #f5c518;
    background: #f000;
    padding: 0 5px;
    border-radius: 10px;
    box-shadow: 2px 0px 2px black;
    border: 2px solid #3a3a3a;
    cursor: pointer;
}

.mt70{
    margin-top: 70px;
}


.play-btns{
    display: flex;
    gap: 10px;
    padding: 10px;
}

.live-stream-btn{
    padding: 5px;
    background: #13131352;
    border-radius: 15px;
    border: 1px solid #f51818;
    box-shadow: inset 0 0 3px #6a5508;
    text-shadow: 2px 2px 2px black;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    position: relative;
    overflow: hidden;
}

.live-stream-btn svg{
    width: 20px;
    height: 20px;
    fill: #0d0d0d;
    background:red;
    border-radius: 10px;
}
.item-trailer{
    display: flex;
    align-items: center;
    gap: 4px;
}
.item-trailer svg{
    width: 20px;
    height: 20px;
    fill: #0d0d0d;
    background:rgb(255, 255, 255);
    border-radius: 10px;
}
.live-stream-btn::before{
    transition-duration:0.3s;
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    animation: taptap 3s linear infinite;
    border-radius: 7px;
    background:#b40000;
    left: 50%;
    transform: translate(-50%);
    border-radius: 50%;
    z-index: -1;
}

@keyframes taptap {
    form{
        opacity: 1;
    }
    to{
        transform: translate(-50%) scale(2);
        opacity: 0;
    }
    
}

.item-trailer{
    padding: 5px;
    background: #000000c2;
    border-radius: 15px;
    border: 1px solid #5a5a5a;
    box-shadow: inset 0 0 3px #6a5508;
    text-shadow: 2px 2px 2px black;
    cursor: pointer;
}


#mainVideo{
    width: 100%;
}

.lucimovie-player{
    position: relative;
    direction: rtl;
}

.lucimovie-player .subtitle-settings{
    position: absolute;
    right: 10px;
    bottom: 41px;
    background: #1a1a1a;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 0 5px black;
    direction: rtl;
    z-index: 10000;
    max-height: 270px;
    overflow: auto;
    padding-bottom: 50px;
}

.lucimovie-player .video-title{
    font-size: 17px;
    position: fixed;
    top: 10px;
    z-index: 10;
    left: 8px;
}

.lucimovie-player .sub-options{
    padding: 7px;
    white-space: nowrap;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.lucimovie-player .sub-options span{
    background: #262626;
    border-radius: 5px;
    padding: 2px 6px;
    cursor: pointer;
    white-space: nowrap;

}
.lucimovie-player .sub-options span.active{
    background: #f5c518;
    color: black;
}

.vazir-f{
    font-family: 'Vazir', sans-serif;
}
.yekan-f{
    font-family: 'Iran-yekan', sans-serif;
}
.ir-sans-f{
    font-family: 'Iran-sans', sans-serif;
}

.shabnam-f{
    font-family: 'Shabnam', sans-serif;
}


.plyr{
    --sub-font:'Vazir', sans-serif;
    --sub-size:18px;
    --sub-color:white;
    --sub-background:transparent

}

.plyr__captions .plyr__caption{
    font-family: var(--sub-font);
    font-size: var(--sub-size);
    color: var(--sub-color);
    background: var(--sub-background);
    padding: 0 !important;
}

.plyr__video-wrapper {
    position: relative !important;
}


#QualityChangeBtn{
    background: #02020200;
    border-radius: 10px;
}


.lucimovie-player .main-video{
    width: 100%;
    height: 100vh;

}
.lucimovie-player{
    padding: 0 !important;
}

#subtitleOverlay {
    position: absolute;
    bottom: 10%;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 1.3em;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
    pointer-events: none;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.3s;
}

.serie-eps{
    position: fixed;
    right: -300px;
    height: 100%;
    background: #040404d1;
    padding: 10px;
    max-width: 50%;
    direction: rtl;
    z-index: 0;
    min-width: 300px;
    padding-bottom: 50px;
    overflow: auto;
    opacity: 0;
    transition: width 0.5s linear, right 0.5s linear, opacity 0.5s linear;
}

.serie-eps.active {
    right:0;
    opacity: 1;
    z-index: 10000;
}

.eps-box{
    display: flex;
    padding: 10px;
    gap: 5px;
    flex-wrap: wrap;
}

.eps-box span{
    background: #3838386b;
    padding: 3px 6px;
    border-radius: 7px;
    cursor: pointer;
}

.eps-box span.active{
    background: #eeb120;
    color: black;
}

.plyr__controls{
    z-index: 10000 !important;
}

.back-15{
    position: fixed;
    left: 0;
    width: 20%;
    height: 100%;
    z-index: 100;
    cursor: pointer;
    display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  font-weight: bold;
  opacity: 0;
}
.forward-15{
    position: fixed;
    right: 0;
    width: 20%;
    height: 100%;
    z-index: 100;
    cursor: pointer;
    display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  font-weight: bold;
  opacity: 0;
  
}
.b-active{
    opacity: 1;
}

.no-select {
  user-select: none; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
}


.subscription-item{
    background: #262626;
    border-radius: 10px;
    border: 1px solid #463700;
    box-shadow: 2px 1px 0px #644d08;
    margin-top: 8px;
    position: relative;
}
.subscription-item::before{
    content: '';
    position: absolute;
    width: var(--subscription-percent);
    height: 11%;
    background: linear-gradient(165deg ,#f4c418,#a8a392,#b5931c);
    left: 0;
    border-radius: 0 10px 10px 25px;
    bottom: -1px;
}
.sub-days-left{
    position: absolute;
    left: 2px;
    top: -2px;
    padding: 5px;
    border-radius: 4px;
    color: #f5c518 !important
}
.subscription-text{
    padding: 7px;
    color: #aa8500 !important;
}

.sub-p-head{
    display: flex;
  justify-content: space-between;
}

.profile-detail-item-title.subs{
    display: flex;
    align-items: center;
    gap: 5px;
}
.profile-detail-item-title.subs svg{
    width: 22px;
    height: 22px;
}


.subscription-buy{
    padding: 2px 6px;
  background: #333;
  border-radius: 7px;
  color: #f5c518;
  border-bottom: 1px solid #4b3c06;
}


.sign{
    margin-right: 10px;
}

.close-sign{
    top: 12px !important;
}

.sign-form{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    /* margin-top: 50px; */
}
.form-g{
    position: relative;
}
.form-g label{
    position: absolute;
    top: -11px;
    right: 20px;
    background: #1a1a1a;
    padding: 0 4px;
}
.form-g input{
    padding: 12px;
    background: none;
    border: 1px solid #373636 ;
    border-radius: 4px;
    margin-bottom: 15px;
    color: white;
    width: 290px;
    direction: ltr;
    transition: all 0.2s ease;
}
.form-g input:hover{
    border:1px solid #f51818 ;
}

.reg-hint{
    margin-top: 15px;
}
.reg-hint-btn{
    color: #f5c518;
    cursor: pointer;
    transition: all 0.2s ease;
}
.reg-hint-btn:hover{
    border-bottom: 1px solid #f51818;
}

.sign-main-btn{
    background: #f5c518;
    border: none;
    border-radius: 7px;
    padding: 9px 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
}

.sign-main-btn:hover{
    transform: scale(1.1);
}




.input-rtl{
    direction: rtl !important;
}


.goto-list-btn{
    display: flex;
    align-items: center;
    gap: 10px;
}
.goto-text{
    padding: 3px 5px;
    background: #3e3e3e;
    border-radius: 5px;
    box-shadow: 0 0 1px #deba3c;
    cursor: pointer;
}

.profile-detail-item-sub input{
    background: none;
    border-bottom: 1px solid #7b7b7b;
    margin-bottom: 4px;
    padding: 5px;
    color: #a6a5a5;
}
.profile-detail-item-sub form{
    display: flex;
  align-items: center;
  gap: 10px;
}

.change-name-btn{
    color: white;
    border: none;
}

.comments-per{
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    padding: 5px 20px;
}

.change-pass-form{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.change-pass-form input{
    padding: 8px;
    border: 1px solid #464646;
}

.logout-btn{
    display: flex;
    justify-content: center;
    position: relative;
    bottom: 8px;
    padding: 10px;
    background: #2d2d2d;
    margin-bottom: 40px;
}
.logout-btn a{
    width: 100%;
    height: 100%;
    text-align: center;
}

.not-login-alert{
    display: flex;
  justify-content: center;
  color: #eebf17;
}

.news-box{
    margin-top: 50px;
}

.news-date{
    font-size: 13px;
  color: #939393;
}


.faq-box{
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 20px;
}
.faq-item{
    padding: 10px;
}
.faq-question{
    background: #292929;
    padding: 8px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 13px;
    display: flex;
  align-items: center;
  gap: 7px;
}

.faq-question .hint{
    font-size: 16px
}
.faq-answer{
    background: #1e1e1e;
  position: relative;
  z-index: -1;
  top: -2px;
  padding: 10px;
  font-size: 13px;
  color: #aaa;

}






.t-line h1{
    background: #1a1a1a;
    display: inline-block;
    font-size: 1.5rem;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}
.t-line{
    position: relative;
    text-align: center;
    width: 100%;
    margin-top: 50px;
}
.t-line::before{
    background: hsla(0, 100%, 47.1%, 0.17);
    border-radius: 50%;
    bottom: 0;
    content: "";
    height: 2px;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.t-text{
    padding: 20px;
}
.t-text p {
    text-align: justify;
    line-height: 30px;
    
}

.terms{
    padding: 10px;
}

.terms-item{
    padding: 10px;
    margin-bottom: 20px;
    font-size: 15px;
}

.mobile-nav a{
    transition: transform 0.2s linear;
}
.mobile-nav a:hover{
    color:#f5c518;
    transform:scale(1.2);
}


a:focus,
button:focus {
  outline: none;
}



@media (max-width:768px){
    .cat-box-next , .cat-box-prev{
        display:  none !important;
    }
}

.plyr--video .plyr__controls{
    position:fixed !important;
    bottom: 10px !important;
}




.content-name-logo{
    max-width: 250px;
}

.content-name-logo img{
    max-width: 250px;
    max-height: 80px;
}
.top-info{
    position: relative;
}





/* action items style */
.action-box{
    display: flex;
    align-items: center;
}
.action-items{
    display: flex;
    gap: 7px;
    padding: 7px;
    max-width: 400px;
}

.action-items .action-items-item{
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    position: relative;
    justify-content: center;
}
.action-items .action-items-item svg{
    width: 25px;
    height: 25px;
    background: #303030;
    padding: 8px;
    border-radius: 10px;
}
.action-items .action-items-item svg path{
    stroke: var(--info-color) !important;
}
.action-items .action-items-item .action-items-item-hint{
    opacity: 0;
    max-width: 0;
    transition: top 0.5s;
    z-index: -1;
    color: var(--info-color);
    position: absolute;
    top: -22px;
    font-size: 11px;
    max-width: 100px;
    white-space: nowrap;
}

.action-items .action-items-item:hover .action-items-item-hint{
    opacity: 1;
    max-width: 200px;
}

.lucimovie-rate-result{
    color: var(--info-color);
}

.send-comment-box{
    width: 95%;
    margin: 10px;
}

.spoill-check{
    display: flex;
    align-items: center;
    padding: 5px;
    background: #252525;
    border-radius: 10px;
    color: #bababa;
}
.sub-comment-btns{
    width: 103%;
}

.season-average-size.subtitle{
    color: #f5c518;
}
.season-average-size.dubbed{
    color: #5cff00;
}
.season-average-size.nosub{
    color: #bdbdbd;
}
@media (max-width:768px){
    .season-average-size{
        padding-right: 10px;
        padding-top: 4px;
    }
    .action-items{
        justify-content: center;
    }
    .lucimovie-rate-result{
        text-align: center;
    }
    .action-box{
        flex-direction: column;
    }
    .two-sub{
        justify-content: center;
    }
    .detail-content{
        padding-bottom: 0;
    }
    .info-sub{
        justify-content: center;
    }
    .detail-content .item-cover{
        display: flex;
    }
    .top-info{
        justify-content: center;
    }
    .top-info .item-title{
        align-items: center;
    }
    .info-sub .info-genre{
        justify-content: center;
    }
    .send-comment-box{
        width: 90%;
    }
    .play-btns{
        justify-content: center;
    }
    .season-average-size.subtitle,.season-average-size.dubbed,.season-average-size.nosub{
        color: #ffffff;
    }

}



.direct-link-item{
    display: flex;
    justify-content: space-between;
    padding: 9px;
    border-radius: 10px;
    background: #212121;
    margin-bottom: 10px;
    align-items: center;
    flex-direction: row-reverse;
}
.dl-link-dl-btn{
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px;
    background: #454545;
    border-radius: 5px;
    font-size: 14px;
}
.dl-link-info{
    display: flex;
    gap: 5px;
    align-items: center;
}
.dl-link-sub-tag{
    background: #6a6a6a3b;
    padding: 0 3px;
    border-radius: 5px;
    font-size: 12px;
    display: flex;
    align-items: center;
    color: white;
}
.dl-link-sub-tag.SoftSub{
    color: #f5c518;
}
.dl-link-sub-tag.HardSub{
    color: red;
}
.dl-link-dub-tag{
    background: #009e20;
    padding: 0 3px;
    border-radius: 5px;
    font-size: 12px;
    display: flex;
    align-items: center;
}
.subtitle-right svg{
    stroke: var(--side-them-color);
}
.dubbing-right svg path{
    fill: var(--side-them-color);
}
.nav-close path{
    fill: var(--side-them-color) !important;
}
.nav-open path{
    fill: var(--side-them-color) !important;
}
.download-lists .subtitle-right span, .download-lists .dubbing-right span{
    color: var(--info-color);
}
.dl-btn-size-box{
    display: flex;
    align-items: center;
    gap: 7px;
}
.dl-link-info .dl-size{
    color: #f5c518;
    font-size: 12px;
}
.dl-link-info .dl-size.HardSub{
    color: red;
}
.dl-link-dl-btn svg{
    width: 20px;
    height: 20px;
}
.dl-link-dl-btn{
    font-size: 13px;
}



@media (max-width:390px) {
    .direct-link-item{
        flex-wrap: wrap;
        gap: 5px;

    }

    .dl-link-info{
        width: 100%;
        justify-content: space-between;
    }
    .dl-btn-size-box{
        justify-content: center;
        width: 100%;
    }
    .dl-link-dl-btn{
        width: 100%;
        justify-content: center;
    }
}




.content-more-info-item .box-btn{
        display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    margin-top: 10px;
    padding: 10px 20px;
    cursor: pointer;
    background:#1c1c1c;
}
.content-more-info-item .open-info-btn .info-right{
    display: flex;
    gap: 10px;
}
.content-more-info-item svg{
    width: 23px;
    height: 23px;
}
.content-more-info-item .nav-open{
    display: none;
}

.content-more-infoes{
    position: relative;
    padding: 10px;
    margin-top: 30px;
}
.content-more-info-item .open-info-btn{
    position: relative;
    z-index: 1;
}

.content-more-info-item .open-info-btn:hover{
    box-shadow: 0 2px 5px #3f0000;
}


.content-more-info-item .box-content{
    background: #161616;
    border-radius: 10px;
    position: relative;
    top: -7px;
    cursor: pointer;
    margin: 0 4px;
    display: none;
    flex-direction: column;
    opacity: 0;
}

.content-more-info-item .box-content.active{
    display: flex;
    padding: 20px 3px;
    opacity: 1;
}

.content-more-info-item #related{
    margin-bottom: 15px;
}
.content-more-info-item #actors{
    padding: 10px;
}
.content-more-info-item #related .cat-img-holder{
    width: 130px;
    height: 190px;
}

.content-more-info-item .all-samelike-box{
    margin: 0;
}
.content-more-info-item .all-samelike-box .star img{
    width: 120px;
    height: 120px;
}

.content-more-info-item .cat-box , .content-more-info-item .all-samelike-box{
    scrollbar-color: #212121 #0f0f0f;
}

.box-content-title{
    margin: 10px 25px 10px 0;
}

.info-nv-cl.active{
    transform: rotate(-90deg);
}
.info-nv-cl.cm{
    transform: rotate(-90deg);
}
.info-nv-cl.cm.active{
    transform: rotate(0);
}
.coll-item-order{
    position: absolute;
    top: 5px;
    right: 6px;
    background: #f9af00;
    padding: 5px;
    width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: inset 2px -2px 4px black;
}

.update-alerts p {
    margin:0 !important;
}

.season-tag{
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 12px;
}
.season-tag.subtitle{
    color: #f5c518;
    background: #212121;
}
.season-tag.dubbed{
    color: #5cff00;
    background: #0c3800;
}
.season-tag.nosub{
    color: #c9c9c9;
    background: #212121;
}


.season-overall .left-info .nav-close.active,.season-overall .right-info .nav-close.active{
    transform: rotate(-90deg);
}

.box-btn.open-info-btn.fst{
    position: sticky;
    top: 55px;
}

.comments-box .all .comment,.comments-box .all .reply-info{
    position: relative;
}
.comments-box .all .comment .comment-date{
    position: absolute;
    left: 15px;
    top: 7px;
    font-size: 11px;
    color: var(--info-color);
}
.mt-70{
    margin-top: 70px;
}

.movieList__content-trush-icon{
    position: absolute;
    top: 3px;
    right: 2px;
    z-index: 10;
    cursor: pointer;
}
.movieList__content-trush-icon svg{
    width: 45px;
    height: 45px;
}

.movieList__content-trush-icon svg path:first-child{
    fill: rgb(12, 12, 12);
}
.movieList__content-trush-icon svg path{
    fill: rgb(255, 0, 0);
}

.no-content-found{
    margin-top: 50px;
    background: #2e2c2c;
    padding: 41px;
    border-radius: 40px 5px 40px 5px;
    color: darkgray;
}

.ep-holder{
    display: flex;
    align-items: center;
}
.ep-holder .ep-play{

    fill: #f00;
    background: #1e1e1e;
    padding: 7px;
    position: relative;
    left: -5px;
    border-radius: 0 10px 10px 0px;
    z-index: 0;
    width: 20%;
    display: flex;
    justify-content: center;
}
.ep-holder .ep-play svg{
    width: 20px;
    height: 20px;
}
.ep-holder{
    width: 19%;
}
.ep-holder .season-part{
    width: 80%;
    border-radius: 10px 0 0 10px;
}


.relase-info{
    display: flex;
    gap: 15px;
    padding: 10px 25px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px;
    color: var(--info-color);
}

.r-info-item{
    width: 45%;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    border-bottom: 1px solid #2b2b2b;
    padding: 3px 10px;
    border-radius: 3px;
}

@media (max-width:700px) {
    .ep-holder{
        width: 100%;
    }
    .r-info-item{
        width: 100%;
    }
}



.weekly-relase{
    width: 100%;
    position: relative;
    padding: 10px 0 !important;
}

.week-days{
    display: flex;
    gap: 10px;
    padding: 10px;
    overflow: auto;
    scrollbar-width: none;
}

.week-days-day{
    padding: 4px 14px;
    background: #252525;
    border-radius: 7px;
    flex-shrink: 0;
    cursor: pointer;
}
.week-days-day.active{
    background: #6e0000;
}
.genre-l{
    display: flex;
    width: 100%;
    padding: 10px;
    gap: 10px;
    overflow: auto;
    margin-top: 10px;
    scrollbar-width: thin;
}
.genre-l-item{
    flex-shrink: 0;
    padding: 5px;
    background: l;
    line-height: 10px;
    backdrop-filter: blur(3px);
    background: #111;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
}
.genre-l-item:hover{
    background: #7b0101;
}
@media (max-width: 768px) {
    .genre-l {
    scrollbar-width: none;
    }
}

.relase-series-not-found{
    text-align: center;
    width: 100%;
    padding: 33px;
    color: #8a8a8a;
}

.weekly-relase::before{
    content: '';
    position: absolute;
    background: linear-gradient(90deg,#770b0b4a,#0000,#0000);
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    display: flex;
}


.top-inf{
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    padding: 6px;
    gap: 3px;
}

.top-inf .top-item {
    width: 21px;
    height: 21px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1px;
}

.top-inf .top-item::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    backdrop-filter: blur(100px);
    border-radius: 5px;
    z-index: 1;
    background: #0707072b;
}   

.top-inf .top-item svg{
    width: 21px;
    height: 21px;
    stroke: #fff;
    border-radius: 10px;
    position: relative;
    z-index: 2;
}



.sub-p-head-right{
    display: flex;
    gap: 5px;
    align-items: center;
    color: var(--info-color);
}

.profile-user-sub-acts{
    border-bottom: 8px solid #111;
}
.profile-user-sub-acts .profile-detail-item{
    border-bottom: 1px solid #161616;
    padding: 12px 20px;
    cursor: pointer;
    display: flex;
}
/* .profile-user-sub-acts .profile-detail-item:hover{
    background:#232323;
} */
.profile-user-sub-acts .sub-p-head-right:hover{
    color: red ;
}

.head-lucimovie.form-head{
    width: 130px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    background: #141414;
    border-radius: 25px;
    padding: 5px;
    color: #a20a0a;
}

.category-item::before{
    content: '';
  position: absolute;
  background: linear-gradient(90deg,#770b0b4a,#0000,#0000);
  width: 100%;
  height: 100%;
  z-index: -1;
  left: 0;
  display: flex;
}


.genre-l::before{
    content: '';
    position: absolute;
    background: linear-gradient(90deg,#770b0b4a,#0000,#0000);
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    top: 0;
    display: flex;
}
.swiper{
    margin-left: unset;
    margin-right: unset;
    width: 100%;
}

.categories-view{
    position: relative;
  top: -10px;
}


.eyes-icon{
    position: absolute;
    left: 14px;
    top: 14px;
}

.eyes-icon svg{
    stroke: #888;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.form-g-pass input{
    direction: rtl;
}
.form-g input{
    color: #adadad;
}







/* requests style */

.mv-requests-container {
    background: linear-gradient(145deg, #0a0a0a 0%, #050505 100%);
    border-radius: 20px;
    overflow: hidden;
    margin-top: 35px;
    border: 1px solid rgba(139, 0, 0, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}


.mv-requests-header {
    display: grid;
    grid-template-columns: 3fr 2fr 1.8fr 1.5fr;
    background: linear-gradient(135deg, #1a0000 0%, #0d0000 100%);
    padding: 16px 24px;
    border-bottom: 2px solid #8b0000;
}

.mv-header-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #ff6b6b;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.mv-requests-body {
    background: #0a0a0a;
    max-height: 550px;
    overflow-y: auto;
}


.mv-requests-body::-webkit-scrollbar {
    width: 5px;
}

.mv-requests-body::-webkit-scrollbar-track {
    background: #1a0000;
    border-radius: 10px;
}

.mv-requests-body::-webkit-scrollbar-thumb {
    background: #8b0000;
    border-radius: 10px;
}


.mv-request-card {
    background: linear-gradient(145deg, #0f0f0f, #0a0a0a);
    margin: 16px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(139, 0, 0, 0.3);
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mv-request-card:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 0, 0, 0.6);
    box-shadow: 0 6px 20px rgba(139, 0, 0, 0.2);
}

.mv-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(139, 0, 0, 0.15);
}

.mv-card-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mv-card-row:first-child {
    padding-top: 0;
}


.mv-card-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--title-color);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.mv-card-label svg {
    opacity: 0.8;
}


.mv-card-value {
    color: #e0e0e0;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    direction: rtl;

}

.mv-movie-title {
    color: var(--title-color);
    font-weight: 700;
    font-size: 1rem;
}


.mv-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
}

.mv-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    animation: mv-pulse 1.5s infinite;
}

@keyframes mv-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.7); }
}

.mv-status-pending {
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid #ffc107;
    color: #ffc107;
}
.mv-status-pending .mv-status-dot { background: #ffc107; }

.mv-status-approved {
    background: rgba(245, 197, 24, 0.12);
    border: 1px solid #f5c518;
    color: #f5c518;
}
.mv-status-approved .mv-status-dot { background: #f5c518; }

.mv-status-completed {
    background: rgba(115, 255, 115, 0.08);
    border: 1px solid #73ff73;
    color: #73ff73;
}
.mv-status-completed .mv-status-dot { background: #73ff73; }

.mv-status-rejected {
    background: rgba(255, 69, 69, 0.12);
    border: 1px solid #ff4545;
    color: #ff6b6b;
}
.mv-status-rejected .mv-status-dot { background: #ff4545; }


.mv-view-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #8b0000, #6b0000);
    color: white;
    padding: 5px 14px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s;
}

.mv-view-link:hover {
    background: linear-gradient(135deg, #b30000, #8b0000);
    transform: scale(1.02);
}

.mv-no-link {
    color: #555;
    font-size: 0.8rem;
}


.mv-alert-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, #1c0000, #0a0000);
    border: 1px solid #8b0000;
    border-radius: 16px;
    padding: 16px 20px;
    margin: 20px;
}

.mv-alert-box svg {
    flex-shrink: 0;
    animation: mv-shake 0.5s ease;
}

@keyframes mv-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.mv-alert-box span {
    color: #ffb3b3;
    font-size: 0.85rem;
    line-height: 1.5;
}


.mv-empty-state {
    text-align: center;
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.mv-empty-state svg {
    opacity: 0.4;
}

.mv-empty-state p {
    color: #ff6b6b;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.mv-empty-state span {
    color: #777;
    font-size: 0.8rem;
}


.mv-submit-btn {
    background: linear-gradient(135deg, #8b0000, #5a0000);
    border: none;
    padding: 10px 24px;
    border-radius: 30px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.mv-submit-btn:hover {
    background: linear-gradient(135deg, #b30000, #8b0000);
    transform: translateY(-2px);
}


@media (min-width: 769px) {
    .mv-requests-header {
        display: grid;
    }
    
    .mv-request-card {
        display: grid;
        grid-template-columns: 3fr 2fr 1.8fr 1.5fr;
        align-items: center;
        gap: 0;
        margin: 0;
        padding: 16px 24px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px solid rgba(139, 0, 0, 0.2);
        background: transparent;
        box-shadow: none;
    }
    
    .mv-request-card:hover {
        transform: translateX(4px);
        background: rgba(139, 0, 0, 0.08);
        border-bottom-color: rgba(139, 0, 0, 0.4);
        box-shadow: none;
    }
    
    .mv-card-row {
        display: contents;
    }
    
    .mv-card-label {
        display: none;
    }
    
    .mv-card-value {
        text-align: start;
    }
    
    .mv-movie-title {
        text-align: right;
    }
}


@media (max-width: 768px) {
    .mv-requests-header {
        display: none;
    }
    
    .mv-request-card {
        margin: 12px;
        padding: 16px;
    }
    
    .mv-card-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
    }
    
    .mv-card-label {
        display: flex;
    }
    
    .mv-status-badge {
        padding: 4px 10px;
        font-size: 0.7rem;
    }
    
    .mv-view-link span {
        display: inline;
    }
    
    .mv-alert-box {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 20px;
    }
    
    .mv-alert-box svg {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .mv-request-card {
        margin: 8px;
        padding: 14px;
    }
    

    
    .mv-card-label {
        margin-bottom: 4px;
    }
    
    .mv-card-value {
        text-align: start;
    }
    
    .mv-status-badge {
        width: fit-content;
    }
    

    .mv-empty-state svg {
        width: 60px;
        height: 60px;
    }
}

.mv-form-wrapper {
    background: linear-gradient(145deg, #0f0f0f 0%, #080808 100%);
    border-radius: 24px;
    border: 1px solid rgba(139, 0, 0, 0.4);
    padding: 24px;
    margin-bottom: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.mv-form-wrapper:hover {
    border-color: rgba(139, 0, 0, 0.7);
    box-shadow: 0 12px 40px rgba(139, 0, 0, 0.15);
}


.mv-form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 2px solid rgba(139, 0, 0, 0.3);
}

.mv-form-header svg {
    flex-shrink: 0;
}

.mv-form-title h3 {
    color: var(--title-color);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.mv-form-title p {
    color: #aaa;
    font-size: 0.8rem;
    margin: 0;
}


.mv-form-group {
    margin-bottom: 24px;
}

.mv-form-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--title-color);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.mv-form-label svg {
    color: #f5c518;
}


.mv-content-type-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mv-type-option {
    flex: 1;
    min-width: 85px;
    cursor: pointer;
}

.mv-type-option input {
    display: none;
}

.mv-type-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #121212;
    border: 1.5px solid #2a0a0a;
    border-radius: 60px;
    color: #aaa;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

.mv-type-box svg {
    width: 18px;
    height: 18px;
}

.mv-type-option input:checked + .mv-type-box {
    background: linear-gradient(135deg, #8b0000, #5a0000);
    border-color: #777;
    color: #fff;
    box-shadow: 0 0 12px rgba(139, 0, 0, 0.5);
    transform: translateY(-2px);
}

.mv-type-option:hover .mv-type-box {
    border-color: #8b0000;
    transform: translateY(-1px);
}


.mv-input-wrapper,
.mv-textarea-wrapper {
    position: relative;
}

.mv-input-wrapper input {
    width: 95%;
    padding: 14px 16px;
    background: #121212;
    border: 1.5px solid #2a0a0a;
    border-radius: 14px;
    color: #e0e0e0;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    direction: rtl;
}

.mv-input-wrapper input:focus {
    outline: none;
    border-color: #8b0000;
    box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.2);
}

.mv-input-wrapper input::placeholder {
    color: #444;
    font-size: 0.8rem;
}

.mv-input-counter,
.mv-textarea-counter {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-size: 0.7rem;
    color: #666;
    background: #121212;
    padding: 2px 6px;
    border-radius: 20px;
    pointer-events: none;
}


.mv-textarea-wrapper textarea {
    width: 95%;
    padding: 14px 16px;
    background: #121212;
    border: 1.5px solid #2a0a0a;
    border-radius: 14px;
    color: #e0e0e0;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s ease;
    direction: rtl;
}

.mv-textarea-wrapper textarea:focus {
    outline: none;
    border-color: #8b0000;
    box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.2);
}

.mv-textarea-wrapper textarea::placeholder {
    color: #444;
    font-size: 0.8rem;
}


.mv-message-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    margin: 20px 0;
    animation: mv-slideDown 0.3s ease;
}

@keyframes mv-slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mv-message-success {
    background: rgba(115, 255, 115, 0.1);
    border: 1px solid #73ff73;
    color: #73ff73;
}

.mv-message-error {
    background: rgba(255, 69, 69, 0.1);
    border: 1px solid #ff4545;
    color: #ff6b6b;
}


.mv-submit-request-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #8b0000, #5a0000);
    border: none;
    border-radius: 60px;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

.mv-submit-request-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.mv-submit-request-btn:hover::before {
    width: 300px;
    height: 300px;
}

.mv-submit-request-btn:hover {
    background: linear-gradient(135deg, #b30000, #8b0000);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 0, 0, 0.4);
}

.mv-submit-request-btn:active {
    transform: translateY(0);
}


.mv-alert-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, #1c0000, #0a0000);
    border: 1px solid #8b0000;
    border-radius: 20px;
    padding: 18px 24px;
    margin-bottom: 30px;
}

.mv-alert-box svg {
    flex-shrink: 0;
    animation: mv-shake 0.5s ease;
}

@keyframes mv-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.mv-alert-box span {
    color: #ffb3b3;
    font-size: 0.9rem;
    line-height: 1.5;
}


.mv-input-wrapper input:focus + .mv-input-counter,
.mv-textarea-wrapper textarea:focus + .mv-textarea-counter {
    color: #f5c518;
}


@media (max-width: 768px) {
    .mv-textarea-wrapper textarea{
        width: 90%;
    }
    .mv-input-wrapper input{
        width: 90%;
    }
    .mv-form-wrapper {
        padding: 18px;
    }
    
    .mv-form-header {
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .mv-form-header svg {
        width: 24px;
        height: 24px;
    }
    
    .mv-form-title h3 {
        font-size: 1.1rem;
    }
    
    .mv-form-title p {
        font-size: 0.7rem;
    }
    
    .mv-content-type-group {
        gap: 8px;
    }
    
    .mv-type-box {
        padding: 7px 12px;
        font-size: 0.75rem;
    }
    
    .mv-type-box svg {
        width: 16px;
        height: 16px;
    }
    
    .mv-submit-request-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .mv-form-wrapper {
        padding: 14px;
    }
    
    .mv-content-type-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mv-type-box {
        padding: 8px 12px;
    }
    
    .mv-alert-box {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 18px;
    }
    
    .mv-alert-box svg {
        width: 36px;
        height: 36px;
    }
}



.comments-nots{
    display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.comments-nots span{
    border-right: 1px solid red;
    padding-right: 10px;
    border-radius: 7px;
    font-size: 12px;
    color: var(--info-color);
}