/* ==========================================================
   GAYZZEE CINEMA 24/7
   TV PRESENTATION
   ========================================================== */


/* ==========================================================
   PLAYER
   ========================================================== */

#cinemaScreen {
    position: relative;
    overflow: hidden;
}


#cinemaVideo {
    width: 100%;
    height: 100%;

    object-fit: contain !important;

    background: #000;
}


#cinemaVideo[hidden],
#videoPlaceholder[hidden] {
    display: none !important;
}


/* ==========================================================
   PLACEHOLDER
   ========================================================== */

#cinemaScreen.gz-tv-has-broadcast
#videoPlaceholder {
    display: none !important;
}


#cinemaScreen.gz-tv-no-broadcast
#videoPlaceholder {
    display: flex;
}


/* ==========================================================
   WEBPLAYER UI WEG
   ========================================================== */

#cinemaScreen
.player-progress,

#cinemaScreen
.player-progress-track,

#cinemaScreen
.player-time,

#cinemaScreen
.player-copy,

#cinemaScreen
#playerProgressTrack,

#cinemaScreen
#playerProgressFill,

#cinemaScreen
#playerElapsed,

#cinemaScreen
#playerDuration,

#cinemaScreen
#movieRemaining,

#cinemaScreen
#movieEndText,

#cinemaScreen
#settingsButton {
    display: none !important;
}


/* oude losse watermark niet dubbel tonen */

#cinemaScreen
> .tv-player-watermark {
    display: none !important;
}


/* ==========================================================
   PLAYER CONTROLS
   ========================================================== */

#cinemaScreen
.player-bottombar {
    position: absolute;

    z-index: 60;

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

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

    min-height: 64px;

    padding:
        28px
        14px
        12px;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .78),
            rgba(0, 0, 0, .25),
            transparent
        );

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(5px);

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;

    pointer-events: none;
}


#cinemaScreen:hover
.player-bottombar,

#cinemaScreen.is-tv-controls-visible
.player-bottombar,

#cinemaScreen:focus-within
.player-bottombar {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}


#cinemaScreen
.player-controls {
    display: flex;
    align-items: center;

    gap: 8px;

    pointer-events: auto;
}


#cinemaScreen
.player-controls button {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    padding: 0;

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

    border-radius:
        999px;

    color: #fff;

    background:
        rgba(8, 6, 14, .78);

    backdrop-filter:
        blur(10px);

    cursor: pointer;
}


#cinemaScreen
.player-controls button:hover {
    border-color:
        rgba(210, 166, 255, .72);

    background:
        rgba(126, 66, 255, .82);
}


/* volume pas tonen wanneer controls actief zijn */

#cinemaScreen
.volume-control {
    width: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        width .18s ease,
        opacity .18s ease;
}


#cinemaScreen
.player-controls:hover
.volume-control,

#cinemaScreen
.volume-control:focus-within {
    width: 96px;

    opacity: 1;
}


#cinemaScreen
#volumeSlider {
    width: 88px;

    cursor: pointer;
}


/* ==========================================================
   ZENDERBUG
   ========================================================== */

.gz-tv-channel-bug {
    position: absolute;

    z-index: 70;

    top: 12px;
    right: 13px;

    width:
        min(
            245px,
            43%
        );

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        6px
        8px;

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

    border-radius:
        10px;

    background:
        linear-gradient(
            120deg,
            rgba(8,6,14,.74),
            rgba(36,12,55,.62)
        );

    box-shadow:
        0 6px 22px
        rgba(0,0,0,.28);

    backdrop-filter:
        blur(9px);

    pointer-events: none;
}


.gz-tv-channel-logo {
    width: 44px;
    height: 30px;

    object-fit: contain;

    flex:
        0 0 auto;
}


.gz-tv-channel-info {
    min-width: 0;

    flex: 1;
}


.gz-tv-channel-top {
    display: flex;
    align-items: center;

    gap: 6px;

    min-width: 0;
}


.gz-tv-channel-name {
    min-width: 0;

    overflow: hidden;

    color: #fff;

    font-size: 9px;
    line-height: 1.1;

    font-weight: 850;

    letter-spacing: .055em;

    text-transform: uppercase;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.gz-tv-age {
    flex: 0 0 auto;

    padding:
        1px
        5px;

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

    border-radius:
        5px;

    color: #fff;

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

    font-size: 8px;

    font-weight: 900;
}


.gz-tv-title-window {
    width: 100%;

    margin-top: 3px;

    overflow: hidden;

    white-space: nowrap;
}


.gz-tv-title-track {
    display: inline-block;

    padding-left: 100%;

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

    font-size: 8px;

    white-space: nowrap;

    animation:
        gz-tv-marquee
        14s
        linear
        infinite;
}


@keyframes gz-tv-marquee {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-100%);
    }

}


/* ==========================================================
   NU AAN HET SPELEN
   ========================================================== */

.cinema-summary
.poster-placeholder.gz-tv-current-poster-host {
    display: block !important;

    position: relative;

    min-height: 130px;

    padding: 0 !important;

    overflow: hidden;

    border-radius: 10px;

    background: #07060b;
}


.gz-tv-current-poster {
    display: block;

    width: 100%;

    min-height: 130px;
    max-height: 210px;

    object-fit: contain;

    background: #07060b;
}


.gz-tv-current-copy {
    margin-top: 9px;
}


.gz-tv-current-title {
    color: #fff;

    font-size: 11px;
    line-height: 1.38;

    font-weight: 750;
}


.gz-tv-current-slot {
    margin-top: 5px;

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

    font-size: 9px;

    font-variant-numeric:
        tabular-nums;
}


/* ==========================================================
   VOLGENDE FILM
   ========================================================== */

#nextMovieTitle {
    line-height: 1.35;
}


#nextMovieStart {
    margin-top: 5px !important;

    color:
        rgba(255,255,255,.57) !important;
}


/* ==========================================================
   PROGRAMMA VANDAAG
   ========================================================== */

#scheduleList {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.gz-tv-program-row {
    display: grid;

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

    align-items: center;

    gap: 7px;

    min-height: 31px;

    padding:
        5px
        6px;

    border:
        1px solid
        transparent;

    border-radius:
        7px;

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

    background:
        rgba(255,255,255,.015);
}


.gz-tv-program-row.is-now {
    color: #fff;

    border-color:
        rgba(184,107,255,.55);

    background:
        linear-gradient(
            90deg,
            rgba(126,66,255,.21),
            rgba(241,53,193,.08)
        );

    box-shadow:
        inset
        2px
        0
        0
        rgba(211,138,255,.96);
}


.gz-tv-program-time {
    color:
        rgba(255,255,255,.48);

    font-size: 8px;

    font-variant-numeric:
        tabular-nums;
}


.gz-tv-program-row.is-now
.gz-tv-program-time {
    color: #dfc1ff;
}


.gz-tv-program-title {
    overflow: hidden;

    font-size: 8px;
    line-height: 1.25;

    font-weight: 650;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.gz-tv-now {
    padding:
        2px
        5px;

    border-radius:
        999px;

    color: #fff;

    background:
        linear-gradient(
            90deg,
            #7d42ff,
            #e235ba
        );

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .06em;
}


/* ==========================================================
   MOBIEL
   ========================================================== */

@media (max-width: 760px) {

    .gz-tv-channel-bug {
        top: 8px;
        right: 8px;

        width:
            min(
                215px,
                58%
            );

        padding:
            5px
            6px;
    }


    .gz-tv-channel-logo {
        width: 35px;
        height: 26px;
    }


    #cinemaScreen
    .player-bottombar {
        padding:
            28px
            8px
            8px;
    }


    .gz-tv-program-row {
        grid-template-columns:
            68px
            minmax(0,1fr)
            auto;
    }

}


/* ==========================================================
   GAYZZEE CINEMA247 UI V4
   ========================================================== */


/* ----------------------------------------------------------
   SIDEBAR NU AAN HET SPELEN
   ---------------------------------------------------------- */

.gz-now-playing {
    padding-top: 13px;
}


.gz-sidebar-poster {
    position: relative;

    width: 100%;

    min-height: 120px;

    overflow: hidden;

    border:
        1px solid rgba(191, 98, 255, .28);

    border-radius: 9px;

    background:
        #09070e;
}


.gz-sidebar-poster-image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 185px;

    object-fit: contain;

    background: #09070e;
}


.gz-sidebar-poster-image[hidden] {
    display: none !important;
}


.gz-sidebar-poster-fallback {
    min-height: 120px;

    display: flex;
    flex-direction: column;

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

    gap: 9px;

    padding: 14px;

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

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(126,66,255,.15),
            #09070e 70%
        );
}


.gz-sidebar-poster-fallback[hidden] {
    display: none !important;
}


.gz-sidebar-poster-fallback span {
    padding:
        3px 6px;

    border-radius:
        5px;

    color: #fff;

    background:
        #ff3979;

    font-size: 8px;

    font-weight: 900;
}


.gz-sidebar-poster-fallback strong {
    font-size: 9px;
    line-height: 1.35;
}


.gz-sidebar-current-info {
    margin-top: 9px;
}


.gz-sidebar-current-info h3 {
    margin: 0;

    color: #fff;

    font-size: 10px;
    line-height: 1.4;
}


.gz-sidebar-current-info p {
    margin:
        5px
        0
        0;

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

    font-size: 8px;

    font-variant-numeric:
        tabular-nums;
}


/* Oude elementen kunnen niet meer terug zichtbaar worden */

.now-playing
.poster-placeholder,

.now-playing
#sidebarPosterTitle,

.now-playing
#sidebarMovieTitle,

.now-playing
#sidebarMovieMeta,

.now-playing
.progress-line,

.now-playing
.time-row,

.now-playing
#movieInfoButton {
    display: none !important;
}


/* ----------------------------------------------------------
   VOLGENDE FILM
   ---------------------------------------------------------- */

.next-movie
.countdown-box {
    display: none !important;
}


/* ----------------------------------------------------------
   ONDER PLAYER: PRECIES TWEE BLOKKEN
   ---------------------------------------------------------- */

.movie-strip {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap: 0 !important;
}


.movie-strip
> .gz-tv-strip-card {
    display: flex;

    align-items: center;

    min-width: 0;

    gap: 9px;

    padding:
        7px
        13px;

    border-right:
        1px solid var(--line);
}


.movie-strip
> .gz-tv-strip-card:last-child {
    border-right: 0;
}


.gz-tv-strip-card
> span:last-child {
    display: flex;

    flex-direction: column;

    min-width: 0;
}


.gz-tv-strip-card small {
    order: 0;

    margin: 0 0 3px;

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

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.gz-tv-strip-card strong {
    order: 1;

    overflow: hidden;

    color: #fff;

    font-size: 8px;

    font-weight: 750;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ----------------------------------------------------------
   FOOTER CINEMA LIVE
   ---------------------------------------------------------- */

#footerViewerStatus {
    color:
        rgba(255,255,255,.74);
}


/* ----------------------------------------------------------
   MOBIEL
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    .movie-strip {
        grid-template-columns:
            1fr !important;
    }


    .movie-strip
    > .gz-tv-strip-card {
        border-right: 0;

        border-bottom:
            1px solid var(--line);
    }


    .movie-strip
    > .gz-tv-strip-card:last-child {
        border-bottom: 0;
    }

}


/* ==========================================================
   CINEMA247 V6
   onderste infobalk verwijderen
   ========================================================== */

.movie-strip {
    display: none !important;
}


/* ==========================================================
   CINEMA247 TV V7
   ========================================================== */


/* Vrijgekomen ruimte gebruiken */

.cinema247-live-player-wrap {
    min-height: 0 !important;
}


.cinema247-live-player-wrap
.cinema-screen {
    height: clamp(
        390px,
        51vh,
        610px
    ) !important;

    min-height: 390px !important;
}


/* Filler moet exact het volledige TV-scherm vullen */

#cinemaScreen.gz-force-filler {
    position: relative;
    overflow: hidden;
    background: #000 !important;
}


#cinemaScreen.gz-force-filler
#cinemaVideo {
    display: none !important;
}


#cinemaScreen.gz-force-filler
#videoPlaceholder {
    display: none !important;
}


#cinemaScreen.gz-force-filler
#cinemaFillerImage {
    position: absolute !important;

    inset: 0 !important;

    z-index: 4 !important;

    display: block !important;

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

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;

    visibility: visible !important;
    opacity: 1 !important;

    background: #000 !important;
}


/*
 * TV logo / countdown / controls moeten boven
 * de filler zichtbaar kunnen blijven.
 */

#cinemaScreen.gz-force-filler
.gz-tv-channel-bug,
#cinemaScreen.gz-force-filler
.cinema-tv-countdown,
#cinemaScreen.gz-force-filler
.player-topbar,
#cinemaScreen.gz-force-filler
.player-bottombar {
    z-index: 20 !important;
}


/* Onderste verwijderde infobalk echt geen ruimte laten innemen */

.movie-strip {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


/* Desktop iets groter */

@media (min-width: 1200px) {

    .cinema247-live-player-wrap
    .cinema-screen {
        height: clamp(
            430px,
            54vh,
            650px
        ) !important;

        min-height: 430px !important;
    }

}


/* ==========================================================
   CINEMA247 V8
   Player groter, MAAR tussen de camrijen
   ========================================================== */


/*
 * V7 maakte de speler te hoog.
 * Dit wint van die oude regels.
 */

.cinema247-live-player-wrap {
    position: relative !important;

    display: flex !important;

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

    min-height: 0 !important;

    height: auto !important;

    overflow: visible !important;
}


.cinema247-live-player-wrap
#cinemaScreen {
    width: 100% !important;

    height:
        clamp(
            350px,
            41vh,
            400px
        ) !important;

    min-height: 0 !important;
    max-height: 400px !important;

    aspect-ratio: auto !important;
}


/*
 * Boven- en ondercams blijven hun eigen plaats houden.
 */

.cinema247-live-row-top,
.cinema247-live-row-bottom {
    position: relative !important;

    z-index: 10 !important;

    flex-shrink: 0 !important;
}


/* ==========================================================
   FAILSAFE FILLER LAYER
   ========================================================== */

#cinemaScreen.gz-cinema-failsafe-filler {
    position: relative !important;

    overflow: hidden !important;

    background: #000 !important;
}


#cinemaScreen.gz-cinema-failsafe-filler
#cinemaVideo {
    display: none !important;
}


#cinemaScreen.gz-cinema-failsafe-filler
#videoPlaceholder {
    display: none !important;
}


#cinemaScreen.gz-cinema-failsafe-filler
#cinemaFillerImage {
    position: absolute !important;

    inset: 0 !important;

    z-index: 5 !important;

    display: block !important;

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

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;

    visibility: visible !important;

    opacity: 1 !important;

    background: #000 !important;
}


/*
 * TV branding/countdown/controls blijven boven beeld.
 */

#cinemaScreen.gz-cinema-failsafe-filler
.gz-tv-channel-bug,

#cinemaScreen.gz-cinema-failsafe-filler
.cinema-tv-countdown,

#cinemaScreen.gz-cinema-failsafe-filler
.player-topbar,

#cinemaScreen.gz-cinema-failsafe-filler
.player-bottombar {
    z-index: 30 !important;
}


/*
 * Onderste verwijderde film-info blijft ook
 * werkelijk zonder hoogte.
 */

.movie-strip {
    display: none !important;

    height: 0 !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;
}


@media (min-width: 1500px) {

    .cinema247-live-player-wrap
    #cinemaScreen {
        height: 400px !important;

        max-height: 400px !important;
    }

}


/* ==========================================================
   CINEMA247 V10 COUNTDOWN
   ========================================================== */

#cinemaTvCountdown {
    position: absolute !important;

    z-index: 100 !important;

    left: 50% !important;
    top: 18px !important;

    transform:
        translateX(-50%) !important;

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

    gap: 8px !important;

    padding:
        7px
        12px !important;

    border:
        1px solid
        rgba(255,255,255,.24) !important;

    border-radius:
        999px !important;

    background:
        rgba(7,5,12,.82) !important;

    box-shadow:
        0 4px 18px
        rgba(0,0,0,.34) !important;

    backdrop-filter:
        blur(10px) !important;

    color: #fff !important;

    pointer-events:
        none !important;
}


#cinemaTvCountdown[hidden] {
    display: none !important;
}


#cinemaTvCountdown small {
    font-size: 8px !important;

    font-weight: 800 !important;

    letter-spacing:
        .07em !important;
}


#cinemaTvCountdown strong {
    font-size: 12px !important;

    font-weight: 900 !important;

    font-variant-numeric:
        tabular-nums !important;
}


#cinemaTvCountdown:not([hidden]) {
    display: flex !important;
}


/* ==========================================================
   CINEMA247 V11
   COUNTDOWN COMPACT LINKSONDER
   ========================================================== */

#cinemaTvCountdown {
    left: 16px !important;
    right: auto !important;

    top: auto !important;
    bottom: 16px !important;

    transform: none !important;

    width: auto !important;

    min-width: 0 !important;

    padding:
        6px
        9px !important;

    gap:
        6px !important;

    border-radius:
        8px !important;

    background:
        rgba(7,5,12,.78) !important;
}


#cinemaTvCountdown small {
    font-size:
        7px !important;
}


#cinemaTvCountdown strong {
    font-size:
        11px !important;
}


/*
 * Filmfase moet altijd boven oude filler-CSS winnen.
 */

#cinemaScreen:not(.gz-cinema-failsafe-filler)
#cinemaVideo:not([hidden]) {
    position: relative !important;

    z-index: 3 !important;

    display: block !important;

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

    object-fit: contain !important;

    visibility: visible !important;
    opacity: 1 !important;

    background: #000 !important;
}


/*
 * Wanneer géén fillerfase:
 * fillerbeeld absoluut weg.
 */

#cinemaScreen:not(.gz-cinema-failsafe-filler)
#cinemaFillerImage {
    display: none !important;
}