/* SPEII NEX 2.8.8.5.5 — Player Cinema Fullscreen Netflix / Prime Style
   Full viewport shell for /watch-video. This layer intentionally overrides the
   previous cinema shell without changing Bunny sources, Plyr runtime, ads,
   subtitles, audio, Cast, profile progress or next episode logic. */

html:has(body.speii-watch-route),
body.speii-watch-route {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    background: #000 !important;
}

body.speii-watch-route,
body.speii-watch-route * {
    box-sizing: border-box;
}

/* Disable every site shell element during playback. */
body.speii-watch-route .body-overlay,
body.speii-watch-route #preloader,
body.speii-watch-route .loading,
body.speii-watch-route .speii-topbar,
body.speii-watch-route .speii-sidebar,
body.speii-watch-route .breadcrumb-area,
body.speii-watch-route .footer,
body.speii-watch-route .speii-nex-footer,
body.speii-watch-route .speii-cookie-consent,
body.speii-watch-route .speii-pwa-install,
body.speii-watch-route .speii-pwa-floating,
body.speii-watch-route .speii-install-app,
body.speii-watch-route .pwa-install-btn,
body.speii-watch-route #speiiPwaInstallBtn,
body.speii-watch-route #speiiInstallApp,
body.speii-watch-route .speii-mobile-nav,
body.speii-watch-route .back-to-top,
body.speii-watch-route .scroll-to-top,
body.speii-watch-route .scroll-top,
body.speii-watch-route [data-back-to-top] {
    display: none !important;
}

/* Smooth-scroll wrappers and template containers must not create margins or scroll. */
body.speii-watch-route .page-wrapper,
body.speii-watch-route #main-scrollbar,
body.speii-watch-route #main-scrollbar > .scroll-content,
body.speii-watch-route .speii-main-shell,
body.speii-watch-route .speii-main-frontend,
body.speii-watch-route .speii-watch-shell,
body.speii-watch-route .speii-watch-shell > .container-fluid,
body.speii-watch-route .speii-cinema-stage-row,
body.speii-watch-route .speii-cinema-stage-row > [class*="col-"] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
}

body.speii-watch-route #main-scrollbar > .scrollbar-track {
    display: none !important;
}

/* Only the player stage is visible. Secondary information exists in the DOM for
   compatibility but is hidden during fullscreen playback. */
body.speii-watch-route .speii-watch-info,
body.speii-watch-route .speii-series-nav,
body.speii-watch-route .speii-season-tabs,
body.speii-watch-route .speii-episode-grid,
body.speii-watch-route .event--tab,
body.speii-watch-route .tab-content,
body.speii-watch-route .movie-section,
body.speii-watch-route #trailerModal,
body.speii-watch-route .modal-backdrop:not(.show) {
    display: none !important;
}

body.speii-watch-route .main-video--wrapper,
body.speii-watch-route .speii-watch-player,
body.speii-watch-route .speii-cinema-stage,
body.speii-watch-route .main-video {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
}

body.speii-watch-route .main-video {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.speii-watch-route .main-video > video.video-player,
body.speii-watch-route .main-video > .plyr,
body.speii-watch-route .main-video > .plyr .plyr__video-wrapper,
body.speii-watch-route .main-video > .plyr .plyr__video-wrapper video,
body.speii-watch-route .main-video .video-player {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    background: #000 !important;
}

body.speii-watch-route .main-video > .plyr,
body.speii-watch-route .main-video > .plyr .plyr__video-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
}

body.speii-watch-route .plyr__poster {
    background-color: #000 !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Streaming-style gradient and controls. */
body.speii-watch-route .plyr::before,
body.speii-watch-route .main-video::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 18;
    height: min(32vh, 300px);
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.86));
}

body.speii-watch-route .plyr__controls {
    z-index: 55 !important;
    padding: 22px clamp(14px, 3vw, 46px) clamp(18px, 3vw, 38px) !important;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.92)) !important;
}

body.speii-watch-route .plyr__control,
body.speii-watch-route .plyr__time,
body.speii-watch-route .plyr__menu__container {
    color: #fff !important;
}

body.speii-watch-route .plyr--full-ui input[type=range] {
    color: #d823ff !important;
}

body.speii-watch-route .plyr__control--overlaid {
    width: 74px !important;
    height: 74px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.48) !important;
    border: 2px solid rgba(255,255,255,.82) !important;
    box-shadow: 0 14px 50px rgba(0,0,0,.42) !important;
}

body.speii-watch-route .plyr__control--overlaid svg {
    width: 29px !important;
    height: 29px !important;
}

/* Minimal top overlay: Netflix-style back arrow and Prime-style centered title. */
body.speii-watch-route .speii-cinema-toolbar--overlay {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 150 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 118px !important;
    margin: 0 !important;
    padding: clamp(18px, 3vw, 34px) clamp(18px, 3vw, 44px) !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(0,0,0,.74), transparent) !important;
    transition: opacity .28s ease, visibility .28s ease !important;
}

body.speii-watch-route .speii-cinema-back {
    position: absolute !important;
    top: clamp(18px, 3vw, 34px) !important;
    left: clamp(18px, 3vw, 44px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    pointer-events: auto !important;
    color: #fff !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.20) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: background .2s ease, transform .2s ease !important;
}

body.speii-watch-route .speii-cinema-back:hover,
body.speii-watch-route .speii-cinema-back:focus-visible {
    color: #fff !important;
    background: rgba(255,255,255,.16) !important;
    transform: translateX(-2px) !important;
}

body.speii-watch-route .speii-cinema-back i {
    font-size: 24px !important;
}

body.speii-watch-route .speii-cinema-toolbar__title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: min(70vw, 760px) !important;
    pointer-events: none !important;
    color: #fff !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.speii-watch-route .speii-cinema-toolbar__title strong {
    overflow: hidden !important;
    max-width: 100% !important;
    color: #fff !important;
    font-size: clamp(16px, 2vw, 24px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.speii-watch-route .speii-cinema-toolbar__title small {
    overflow: hidden !important;
    max-width: 100% !important;
    margin-top: 4px !important;
    color: rgba(255,255,255,.74) !important;
    font-size: clamp(11px, 1.2vw, 14px) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Custom overlay auto-hide. Plyr already controls its own toolbar; this controls
   only SPEII's upper layer and cursor. */
body.speii-watch-route.speii-player-overlay-idle .speii-cinema-toolbar--overlay {
    opacity: 0 !important;
    visibility: hidden !important;
}
body.speii-watch-route.speii-player-overlay-idle {
    cursor: none !important;
}

/* Keep ad, lock and next-episode layers embedded inside the viewport. */
body.speii-watch-route .ad-video,
body.speii-watch-route .speii-adsense-player,
body.speii-watch-route .speii-release-lock,
body.speii-watch-route .main-video-lock,
body.speii-watch-route .speii-next-episode-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 130 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

body.speii-watch-route .ad-video.speii-ad-active,
body.speii-watch-route .speii-adsense-player:not(.d-none) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
}

body.speii-watch-route .ad-video .plyr,
body.speii-watch-route .ad-video video {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    object-fit: contain !important;
    background: #000 !important;
}

/* Avoid overlays being covered by the page shell. */
body.speii-watch-route .speii-player-loading-overlay,
body.speii-watch-route .speii-age-rating-overlay {
    position: fixed !important;
}

body.speii-watch-route .speii-age-rating-overlay {
    top: clamp(76px, 8vw, 100px) !important;
    left: clamp(18px, 3vw, 44px) !important;
}

@media (max-width: 760px) {
    body.speii-watch-route .speii-cinema-toolbar--overlay {
        min-height: 82px !important;
        padding: 12px !important;
    }
    body.speii-watch-route .speii-cinema-back {
        top: 12px !important;
        left: 12px !important;
        padding: 9px !important;
    }
    body.speii-watch-route .speii-cinema-back span {
        display: none !important;
    }
    body.speii-watch-route .speii-cinema-back i {
        font-size: 23px !important;
    }
    body.speii-watch-route .speii-cinema-toolbar__title {
        max-width: calc(100vw - 118px) !important;
    }
    body.speii-watch-route .speii-cinema-toolbar__title strong {
        font-size: 15px !important;
    }
    body.speii-watch-route .speii-cinema-toolbar__title small {
        display: none !important;
    }
    body.speii-watch-route .speii-age-rating-overlay {
        top: 66px !important;
        left: 12px !important;
    }
    body.speii-watch-route .plyr__controls {
        padding: 14px 10px 16px !important;
    }
}