/* =========================================================
   MOVIEBOX HERO SLIDER
   Dooplay Child Theme
   Clean version
   ========================================================= */


/* =========================================================
   1. HERO / SLIDE BASE
   ========================================================= */

#moviebox-hero-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #000;
}

#moviebox-hero-slider,
#moviebox-hero-slider .owl-wrapper-outer,
#moviebox-hero-slider .owl-wrapper,
#moviebox-hero-slider .owl-item,
#moviebox-hero-slider .moviebox-slide {
    box-sizing: border-box;
}

.moviebox-slide {
    position: relative;
    width: 100%;
    height: 430px;
    overflow: hidden;
    background: #000;
}


/* =========================================================
   2. BACKDROP
   ========================================================= */

.moviebox-backdrop-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.moviebox-backdrop {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;

    transform: scale(1.01);
    transition: transform 7s ease;
}

#moviebox-hero-slider .owl-item.active .moviebox-backdrop {
    transform: scale(1.04);
}


/* Desktop image position */

@media (min-width: 1025px) {
    .moviebox-backdrop {
        object-position: center 25%;
    }
}


/* Tablet image position */

@media (min-width: 601px) and (max-width: 1024px) {
    .moviebox-backdrop {
        object-position: center center;
    }
}


/* Mobile image position */

@media (max-width: 600px) {
    .moviebox-backdrop {
        object-position: center center;
    }
}


/* =========================================================
   3. CINEMATIC OVERLAY
   ========================================================= */

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

    background:
        linear-gradient(
            to top,
            rgba(5,5,8,0.98) 0%,
            rgba(5,5,8,0.72) 25%,
            rgba(5,5,8,0.18) 65%,
            rgba(5,5,8,0.05) 100%
        );
}

.moviebox-overlay::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(5,5,8,0.80) 0%,
            rgba(5,5,8,0.45) 30%,
            rgba(5,5,8,0.08) 65%,
            transparent 100%
        );
}


/* =========================================================
   4. CONTENT
   ========================================================= */

.moviebox-content {
    position: absolute;
    left: 42px;
    bottom: 42px;

    width: min(620px, calc(100% - 84px));

    z-index: 10;
    color: #fff;
}

.moviebox-type {
    display: inline-block;

    padding: 4px 10px;
    margin-bottom: 9px;

    background: #00d084;
    color: #06110c;

    border-radius: 5px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.moviebox-title {
    max-width: 650px;

    margin: 0 0 8px !important;

    color: #fff !important;

    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.4px;

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

.moviebox-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin-bottom: 10px;

    color: rgba(255,255,255,.85);
    font-size: 13px;
}

.moviebox-dot {
    opacity: .7;
}

.moviebox-description {
    max-width: 520px;

    margin: 0 0 15px !important;

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

    font-size: 12px;
    line-height: 1.45;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* =========================================================
   5. WATCH BUTTON
   ========================================================= */

.moviebox-buttons {
    display: flex;
    align-items: center;
}

.moviebox-watch {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;

    padding: 8px 16px 8px 8px !important;

    border-radius: 30px !important;

    background: #e50914 !important;
    color: #fff !important;

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

    text-decoration: none !important;

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

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

.moviebox-watch:hover {
    transform: translateY(-1px);

    background: #ff1a25 !important;
    color: #fff !important;
}

.moviebox-play-icon {
    width: 30px;
    height: 30px;

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

    padding-left: 2px;

    border-radius: 50%;

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

    font-size: 11px;
}


/* =========================================================
   6. OWL NAVIGATION
   ========================================================= */

#moviebox-hero-slider .owl-buttons {
    position: absolute;

    top: 50%;
    left: 0;
    right: 0;

    transform: translateY(-50%);

    z-index: 20;

    pointer-events: none;
}

#moviebox-hero-slider .owl-prev,
#moviebox-hero-slider .owl-next {
    position: absolute !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 36px !important;
    height: 36px !important;

    padding: 0 !important;
    margin: 0 !important;

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

    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 50% !important;

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

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;

    opacity: .85;

    pointer-events: auto;

    overflow: hidden;

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

#moviebox-hero-slider .owl-prev {
    left: 15px !important;
}

#moviebox-hero-slider .owl-next {
    right: 15px !important;
}

#moviebox-hero-slider .owl-prev::before,
#moviebox-hero-slider .owl-next::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    color: #fff !important;

    font-size: 30px !important;
    line-height: 1 !important;

    text-indent: 0 !important;
}

#moviebox-hero-slider .owl-prev::before {
    content: "‹" !important;
}

#moviebox-hero-slider .owl-next::before {
    content: "›" !important;
}

#moviebox-hero-slider .owl-prev:hover,
#moviebox-hero-slider .owl-next:hover {
    background: rgba(0,0,0,.85) !important;
    opacity: 1;
}


/* =========================================================
   7. PAGINATION / DOTS
   ========================================================= */

#moviebox-hero-slider .owl-pagination {
    position: absolute;

    right: 24px;
    bottom: 17px;

    z-index: 20;

    display: flex;
    align-items: center;
}

#moviebox-hero-slider .owl-page span {
    width: 6px !important;
    height: 6px !important;

    margin: 0 3px !important;

    border-radius: 10px !important;

    background: rgba(255,255,255,.45) !important;

    opacity: 1 !important;

    transition: all .25s ease;
}

#moviebox-hero-slider .owl-page.active span {
    width: 25px !important;
    background: #fff !important;
}


/* =========================================================
   8. PREVENT INITIAL FLASH
   ========================================================= */

#moviebox-hero-slider:not(.owl-carousel) {
    display: none !important;
}


/* =========================================================
   9. TABLET
   Desktop remains unchanged
   ========================================================= */

@media (min-width: 601px) and (max-width: 1024px) {

    .moviebox-slide {
        height: 400px;
    }

    .moviebox-content {
        left: 30px;
        right: 30px;
        bottom: 35px;

        width: auto;
    }

    .moviebox-title {
        font-size: 27px !important;
    }

}


/* =========================================================
   10. MOBILE
   Current design: compact 200px hero
   ========================================================= */

@media (max-width: 600px) {

    .moviebox-slide {
        height: 200px !important;
        min-height: 0 !important;
        max-height: 200px !important;
    }

    .moviebox-backdrop-wrapper,
    .moviebox-backdrop {
        height: 200px !important;
        min-height: 0 !important;
    }

    .moviebox-backdrop {
        width: 100% !important;
        object-fit: cover !important;
    }

    .moviebox-content {
        left: 15px !important;
        right: 15px !important;
        bottom: 15px !important;

        width: auto;
        max-width: none;
    }

    .moviebox-type {
        padding: 4px 8px !important;
        margin-bottom: 5px !important;

        font-size: 9px !important;
    }

    .moviebox-title {
        max-width: 85% !important;

        margin: 5px 0 !important;

        font-size: 18px !important;
        line-height: 1.15 !important;
    }

    .moviebox-meta {
        margin: 3px 0 !important;

        gap: 5px;

        font-size: 9px !important;
    }

    .moviebox-description {
        display: none !important;
    }

    .moviebox-watch {
        padding: 7px 13px !important;

        border-radius: 20px !important;

        font-size: 11px !important;
    }

    .moviebox-play-icon {
        width: 28px;
        height: 28px;

        font-size: 10px;
    }

    #moviebox-hero-slider .owl-prev,
    #moviebox-hero-slider .owl-next {
        width: 34px !important;
        height: 34px !important;
    }

    #moviebox-hero-slider .owl-prev {
        left: 10px !important;
    }

    #moviebox-hero-slider .owl-next {
        right: 10px !important;
    }

    #moviebox-hero-slider .owl-pagination {
        right: 10px;
        bottom: 10px;
    }

    /*
     * Reduced bottom shadow on mobile.
     * The overlay is intentionally lighter than desktop.
     */
    .moviebox-overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(0,0,0,0.05) 0%,
                rgba(0,0,0,0.15) 100%
            ) !important;
    }

}


/* =========================================================
   11. EXTRA SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .moviebox-title {
        font-size: 17px !important;
    }

    .moviebox-watch {
        padding: 6px 11px !important;
        font-size: 10px !important;
    }

    .moviebox-play-icon {
        width: 25px;
        height: 25px;

        font-size: 9px;
    }

}