@import url('https://fonts.googleapis.com/css2?family=Lemon&display=swap');

:root {
    /*--bs-body-bg: #020A0F;*/
    /*--cine-color-primary-1: #3AF38B;*/
    /*--cine-color-primary-2: #49BCE4;*/
}

:root, [data-bs-theme=light] {
    --cine-color-primary-1: #3AF38B;
    --cine-color-primary-2: #49BCE4;
}

[data-bs-theme=dark] {
    /*--bs-body-bg: #020A0F;*/
    --bs-html-bg-color-opacity: 100%;
    --bs-body-bg-color-opacity: 55%;
    --bs-body-bg-color: 2 10 15;
    --bs-body-bg: rgb(var(--bs-body-bg-color) / var(--bs-body-bg-color-opacity));
    --cine-color-primary-1: #895bff;
    --cine-color-primary-2: rgb(241, 48, 154);
}

html {
    background-color: rgb(var(--bs-body-bg-color) / var(--bs-html-bg-color-opacity));
}

body {
    background-image: url(../storage/backgrounds/01.png);
    /*background-image: url(../storage/backgrounds/02.png);*/
    /*background-image: url(../storage/backgrounds/03.png);*/
    /*background-image: url(../storage/backgrounds/04.png);*/
    /*background-image: url(../storage/backgrounds/05.png);*/
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 100px;
    background-blend-mode: darken;
}

.youtube-tooltip {
    --bs-tooltip-color: #fff;
    --bs-tooltip-bg: #f1309a;
}

.watchlist-tooltip {
    --bs-tooltip-color: #fff;
    --bs-tooltip-bg: #7CB665;
}

.trailer-tooltip {
    --bs-tooltip-color: #fff;
    --bs-tooltip-bg: #EE8032;
}

.play-tooltip {
    --bs-tooltip-color: #fff;
    --bs-tooltip-bg: #895bff;
}

.offcanvas.show {
    z-index: 9999;
}

/*#pjs_playerCineman_subtitle {*/
/*    position:static !important;*/
/*    top: auto;*/
/*    left: auto;*/
/*}*/

.slogan-rotate {
    position: relative;
    height: 50px;

    h1 {
        position: absolute;
        width: 100%;
        text-align: center;
        font-weight: 900;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s ease-in-out, transform 1s ease-in-out;

        &.active {
            opacity: 1;
            transform: translateY(0);
        }

        &.fade-out {
            opacity: 0;
            transform: translateY(-20px);
        }
    }
}

.aspect-ratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;

    &.ratio-43 {
        padding-bottom: 43%;
    }

    iframe, #playerCineman, #player {
        position: absolute !important;
        width: 100%  !important;
        height: 100%  !important;
        left: 0  !important;
        top: 0  !important;
    }
}

.avatar-cast {
    img {
        transform: scale(1);
        transition: all .5s ease-out;
    }

    &:hover img {
        transform: scale(1.1);
    }
}

.text-texture {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-size: cover;
    z-index: -1;
    /*line-height: 100px;*/
}

.modal {
    z-index: 99999;
}

.carousel-indicators {
    justify-content: flex-start;
    align-items: anchor-center;
    right: 8%;
    bottom: 6rem;
    left: 8%;
    margin: 0;

    @media (max-width: 767.98px)  {
        bottom: -3rem;
        right: 1rem;
        left: 1rem;
        justify-content: center;
        gap: 6px;

        [data-bs-target] {
            width: 8px;
            height: 8px;

            &.active {
                width: 10px;
                height: 10px;
            }
        }
    }

    [data-bs-target] {
        width: 6px;
        height: 6px;
        border-radius: 100%;
        margin-right: .3rem;

        &.active {
            width: 8px;
            height: 8px;
        }

        @media (max-width: 767.98px)  {
            width: 8px;
            height: 8px;

            &.active {
                width: 10px;
                height: 10px;
            }
        }
    }
}
[data-bs-theme=dark] .carousel {
    .carousel-indicators [data-bs-target] {
        background-color: #fff;
    }

    .carousel-control-prev-icon {
        background-color: transparent;
    }

    .carousel-control-next-icon {
        background-color: transparent;
    }
}

.font-lemon {
    font-family: "Lemon", serif;
    font-weight: 400;
    font-style: normal;
}

.text-truncate-3 {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;

    @media (max-width: 767.98px)  {
        -webkit-line-clamp: 2;
    }
}

.headline-icon {
    sup svg {
        opacity: 0.3;
        /*transform: rotate(12deg);*/
    }

    &.text-gradient.font-lemon {
        @media (max-width: 767.98px)  {
            font-size: calc((var(--bs-font-size-base) + .375rem) + .3vw);
        }
    }
}

.movie-tooltip {
    --bs-tooltip-color: #fff;
    --bs-tooltip-bg: var(--cine-color-primary-2);
    --bs-tooltip-border-radius: .3rem;
    --bs-tooltip-opacity: 1;
}

.text-gradient {
    display: inline-block;
    background-image: linear-gradient(130deg, var(--cine-color-primary-1), var(--cine-color-primary-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    &.gradient-1 {
        background-image: linear-gradient(to right, #ef4444, #eab308);
    }
    &.gradient-2 {
        background-image: linear-gradient(to right, #3b82f6, #22c55e);
    }
    &.gradient-3 {
        background-image: linear-gradient(to right, var(--cine-color-primary-1), var(--cine-color-primary-2));
    }
    &.gradient-4 {
        background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
    }
    &.gradient-5 {
        background-image: linear-gradient(to right, #f093fb, #f5576c);
    }
    &.gradient-6 {
        background-image: linear-gradient(to right, #5ee7df, #b490ca);
    }
    &.gradient-7 {
        background-image: linear-gradient(to right, #96fbc4, #f9f586);
    }
    &.gradient-8 {
        background-image: linear-gradient(to right, #d9afd9, #97d9e1);
    }
    &.gradient-9 {
        background-image: linear-gradient(to right, #ff0844, #ffb199);
    }
    &.gradient-10 {
        background-image: linear-gradient(to right, #d558c8, #24d292);
    }
    &.gradient-11 {
        background-image: linear-gradient(to right, #3AF38B, #49BCE4);
    }
    &.gradient-12 {
        background-image: linear-gradient(to right, #f4d03f, #16a085);
    }
    &.gradient-13 {
        background-image: linear-gradient(to right, #00dbde, #fc00ff);
    }
    &.gradient-14 {
        background-image: linear-gradient(to right, #3b41c5 0%, #a981bb 49%, #ffc8a9 100%);
    }
    &.gradient-15 {
        background-image: linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%);
    }
    &.gradient-16 {
        background-image: linear-gradient(to right, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%);
    }
    &.gradient-17 {
        background-image: linear-gradient(to right, #331e7e 0%, #540f9b 29%, #FF1361 67%, #FFF800 100%);
    }
}

html:not([data-scroll='0']) {
    .navbar.fixed-top {
        box-shadow: 0 7px 13px 3px #0000007a;
    }
}


.navbar {
    &::before {
        /*background: rgba(0, 0, 0, .3);*/
        background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, .3));
        -webkit-backdrop-filter: blur(.625em);
        backdrop-filter: blur(.625em);
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    .navbar-brand {
        display: inline-block;
        background-image: linear-gradient(130deg, var(--cine-color-primary-1), var(--cine-color-primary-2));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .navbar-toggler {
        transition: transform .5s ease-out;
        transform: scale(1);
        color: #fff;

        &:hover {
            color: var(--cine-color-primary-2);
            transform: scale(1.1);
        }
    }

    .offcanvas-body {
        .nav-item {
            @media (max-width: 767.98px)  {
                margin-left: 0;

                &:hover {
                    margin-left: 7px;
                }
            }
        }
    }

    .nav-link {
        transition: transform .5s ease-out;
        transform: scale(1);

        &:hover {
            color: var(--cine-color-primary-2);
            transform: scale(1.1);

            svg {
                stroke: var(--cine-color-primary-2);
            }
        }

        &.cube-rotate {
            svg {
                transform: rotate(45deg);

                &:hover {
                    transform: rotate(405deg);
                }
            }
        }
    }
}

.slider-channels {
    .card {
        .channel-avatar {
            outline: solid 4px var(--bs-body-bg);
            outline-offset: -8px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
    }
}

.card {
    &.card-movie-poste {
        aspect-ratio: 1 / 1.51;
    }

    &.card-movie-poster, &.card-genre-poster {
        --bs-card-border-width: 1px;
        --bs-card-border-color: transparent;
        transform: scale(1);
        transition: all .5s ease-out;
        height: 100%;
        overflow: hidden;
        box-shadow: 0 3px 10px 3px rgba(0, 0, 0, 0.8);

        #btnAddWatchlist {
            opacity: 0.3;
            transition: all 0.7s ease-out;

            @media (max-width: 767.98px)  {
                opacity: 0.7;
            }
        }

        .card-img-overlay {
            background-: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
            background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
            color: #fff;

        }
        .card-title {
            font-size: 0.8rem;
            font-weight: 700;
        }
        .card-text {
            font-size: 0.7rem;
        }
        .card-img {
            transform: scale(1);
            transition: all 13s ease-out;

            object-fit: cover;
            width: 100%;
            height: 100%;
        }

        &:hover {
            transform: scale(1.07);
            /*box-shadow: 0 3px 10px 3px rgba(0, 0, 0, .4);*/
            /*box-shadow: 0 8px 11px 0 rgba(0, 0, 0, 0.5);*/
            box-shadow: 0 3px 10px 3px rgb(0 0 0);
            --bs-card-border-color: #0C1619;
            --bs-card-border-color: var(--cine-color-primary-2);

            #btnAddWatchlist {
                opacity: 1;
            }

            .text-truncate {
                white-space: normal;
            }

            .card-img {
                transform: scale(1.3);
            }
        }
    }
}

#welcome-slogan {
    @media (max-width: 767.98px)  {
        .container.w-75 {
            width: 100% !important;
        }
    }
}

#carouselHeader {
    @media (max-width: 767.98px)  {
        margin-top: 3.3rem;
    }

    .carousel-control-next, .carousel-control-prev {
        width: 6%;
        opacity: 1;

        @media (max-width: 767.98px) {
            position: absolute;
            bottom: -3.8rem;
            top: auto;
        }

        .carousel-control-next-icon, .carousel-control-prev-icon {
            width: 3.5rem;
            height: 3.5rem;
        }
    }

    .carousel-item {
        height: 86vh;
        /*max-height: 890px;*/
        min-height: 900px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

        @media (max-width: 767.98px)  {
            /*max-height: 600px;*/
            max-height: 460px;
            min-height: 400px;
            height: 100vh;
        }

        &:before {
            content: '';
            background-image: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(1turn, #000e17, transparent 50%), linear-gradient(133.05deg, #000, transparent 36.66%), linear-gradient(226.85deg, #000, transparent 43.12%);
            background-position: 50%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;

            @media (max-width: 767.98px) {
                /*background-image: linear-gradient(to top, #020a0f, #020a0fd9, #020a0f7d, #020a0f33, #020a0f14);*/
                background-image: linear-gradient(to top, #020a0f, #020a0fe6, #020a0fa8, #020a0f4d, #020a0f82);
            }
        }

        &:after {
            content: '';
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            background: rgba(57, 57, 57, 0.26);
            backdrop-filter: blur(1px);
            -webkit-backdrop-filter: blur(1px);

        }

        > img {
            object-fit: cover;
            height: 70vh;
            max-height: 890px;
            min-height: 300px;
        }

        .text-for-toast {
            cursor: pointer;
        }

        .carousel-caption {
            bottom: 8rem;
            z-index: 1;
            right: 8%;
            left: 8%;

            .carousel-poster {
                max-width: 240px;
            }

            @media (max-width: 767.98px)  {
                /*bottom: 1rem;*/
                bottom: 0;
                right: 1rem;
                left: 1rem;
                padding-top: 0;
                padding-bottom: 0;

                h1 {
                    font-size: calc((var(--bs-font-size-base) + .2rem) + .6vw);
                    margin-bottom: 0;
                }

                .btn.btn-lg {
                    transform: scale(0.9);

                    &.mt-3 {
                        --bs-spacer-3: var(--bs-spacer-2);
                    }
                }

                .text-for-toast {
                    margin-bottom: 0;
                }

                .carousel-meta-infos {
                    &.mt-4, &.mb-4 {
                        --bs-spacer-4: var(--bs-spacer-2);
                    }
                }

                .genres.fs-5 {
                    margin-bottom: 7px;
                    font-size: var(--bs-relative-font-size-sm) !important;
                }
            }
        }
    }
}

.slider-wrapper {
    &.slider-casts {
        margin-left: calc(var(--bs-spacer-3) * -1);
        margin-right: calc(var(--bs-spacer-3) * -1);

        .slider-btn {
            @media (max-width: 767.98px) {
                &.slider-btn-prev {
                    background: linear-gradient(to left, #232A3400, #232A3466, #232A34cf, #232A34);
                }

                &.slider-btn-next {
                    background: linear-gradient(to right, #232A3400, #232A3466, #232A34cf, #232A34);
                }
            }
        }
    }

    &:not(.slider-casts) {
        .slider-container {
            padding-left: 30px;
            margin-left: -30px;
            padding-right: 30px;
            margin-right: -30px;

            @media (max-width: 767.98px) {
                padding-left: 11px;
                margin-left: 0;
                padding-right: 11px;
                margin-right: 0;
            }

            &:before, &:after {
                width: 30px;
                height: 100%;
                display: inline-block;
                transform: translateY(-50%) !important;
                top: 50%;
                position: absolute;
                z-index: 1;

                @media (max-width: 767.98px) {
                    display: none;
                }
            }
        }
    }

    .slider-container {
        padding: 30px 0;
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
            display: none;
        }

        .slider-item {
            flex: 0 0 auto;
            display: flex;
        }

        &:before {
            content: '';
            background: linear-gradient(to left, #020a0f00, #020a0f);
            left: -30px;
        }

        &:after {
            content: '';
            background: linear-gradient(to right, #020a0f00, #020a0f);
            right: -30px;
        }
    }

    .slider-btn {
        color: #fff;
        padding: 10px;
        cursor: pointer;
        border-radius: 5px;
        background: rgb(255 255 255 / 50%);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(7.8px);
        border: 1px solid rgb(255 255 255 / 50%);
        z-index: 2;

        @media (max-width: 767.98px) {
            background: rgb(2 10 14 / 60%);
            border: 0;
            height: 100%;
            backdrop-filter: none;
            z-index: 999;
            transform: scale(0.9);

            &.slider-btn-prev {
                background: linear-gradient(to left, #020a0f00, #020a0f66, #020a0fcf, #020A0F);
            }

            &.slider-btn-next {
                background: linear-gradient(to right, #020a0f00, #020a0f66, #020a0fcf, #020A0F);
            }

            svg {
                transform: scale(0.9);
                transition: all 0.3s ease-out;
            }

            &:hover {
                svg {
                    transform: scale(1.2);
                }
            }
        }

        &:disabled {
            cursor: not-allowed;
            color: rgba(102, 102, 102, 0.5);
            background: rgba(102, 102, 102, 0.2);
            border: 1px solid rgba(102, 102, 102, 0.2);
            display: none;

            @media (max-width: 767.98px) {
                display: none;
            }
        }
    }

    @media (max-width: 767.98px) {
        &:hover {
            .slider-btn {
                background: rgb(2 10 14 / 85%);
            }
        }
    }
}

#social-buttons {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-align-content: space-between;
    align-content: space-between;
    max-width: 250px;
    width: 100%;
    justify-content: space-between;
}

.nav-footer {
    --bs-nav-link-color: hsla(var(--bs-color-hsl), 0.95);
    --bs-nav-link-hover-color: var(--cine-color-primary-2);
    --bs-navbar-active-color: hsla(var(--bs-color-hsl), 1);
}