/* =========================================================
   PLAYER.CSS
   Universal Video Player
   Movies / Trailers / Web Series
   Normal + Fullscreen + Mobile Landscape
   ========================================================= */


/* =========================================================
   MOVIE CONTENT WRAPPER
   ========================================================= */

#movie-content-wrapper {

    width: 100%;

    max-width: 1000px;

    margin: 0 auto;

    padding: 0;

    box-sizing: border-box;
}


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

.player-container {

    position: relative;

    width: 100% !important;

    max-width: 100%;

    margin: 0 0 24px 0;

    padding: 0;

    background: #000;

    border-radius: var(--radius, 10px);

    overflow: hidden !important;

    box-shadow: var(--shadow);

    border: 1px solid var(--border);

    box-sizing: border-box !important;

    isolation: isolate;
}


/* =========================================================
   NORMAL VIDEO
   16:9
   ========================================================= */

.video-responsive {

    position: relative !important;

    width: 100% !important;

    aspect-ratio: 16 / 9;

    height: auto;

    background: #000;

    overflow: hidden !important;

    box-sizing: border-box;
}


/* =========================================================
   OLD BROWSER FALLBACK
   ========================================================= */

@supports not (aspect-ratio: 16 / 9) {

    .video-responsive {

        height: 0 !important;

        padding-bottom: 56.25% !important;
    }

    /* Fullscreen must not inherit the padding-top aspect-ratio hack */
    .player-container.is-player-fullscreen .video-responsive,
    .player-container:fullscreen .video-responsive,
    .player-container:-webkit-full-screen .video-responsive,
    .player-container:-moz-full-screen .video-responsive,
    .player-container:-ms-fullscreen .video-responsive {

        height: 100% !important;

        padding: 0 !important;

        padding-bottom: 0 !important;
    }
}


/* =========================================================
   IFRAME
   ========================================================= */

.video-responsive iframe {

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

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

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

    border: 0 !important;

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

    display: block;

    background: #000;
}


/* =========================================================
   HTML5 VIDEO
   ========================================================= */

.video-responsive video {

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

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

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

    display: block;

    background: #000;

    object-fit: contain;
}


/* =========================================================
   TRUE FULLSCREEN — native API + JS class fallback
   ========================================================= */

.player-container.is-player-fullscreen {

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    width: 100dvw !important;

    height: 100vh !important;
    height: 100dvh !important;

    min-width: 100vw !important;
    min-width: 100dvw !important;

    min-height: 100vh !important;
    min-height: 100dvh !important;

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

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

    border: 0 !important;
    border-radius: 0 !important;

    background: #000 !important;

    overflow: hidden !important;

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

    box-shadow: none !important;

    z-index: 2147483647 !important;
}


.player-container:fullscreen,
.player-container:-webkit-full-screen,
.player-container:-moz-full-screen,
.player-container:-ms-fullscreen {

    position: fixed !important;

    inset: 0 !important;

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

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

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

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

    border: 0 !important;
    border-radius: 0 !important;

    background: #000 !important;

    overflow: hidden !important;

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

    box-shadow: none !important;

    z-index: 2147483647 !important;
}


/* Fullscreen video wrapper — fills container exactly */
.player-container.is-player-fullscreen .video-responsive,
.player-container:fullscreen .video-responsive,
.player-container:-webkit-full-screen .video-responsive,
.player-container:-moz-full-screen .video-responsive,
.player-container:-ms-fullscreen .video-responsive {

    position: absolute !important;

    inset: 0 !important;

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

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

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

    aspect-ratio: auto !important;

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

    overflow: hidden !important;

    background: #000 !important;
}


/* =========================================================
   FULLSCREEN IFRAME — edge-fill (YouTube UI overlays on video)
   ========================================================= */

.player-container.is-player-fullscreen iframe,
.player-container:fullscreen iframe,
.player-container:-webkit-full-screen iframe,
.player-container:-moz-full-screen iframe,
.player-container:-ms-fullscreen iframe {

    position: absolute !important;

    inset: 0 !important;

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

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

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

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

    border: 0 !important;

    transform: none !important;

    display: block !important;

    background: #000 !important;
}


/* =========================================================
   FULLSCREEN HTML5 VIDEO — COVER MODE
   ========================================================= */

.player-container.is-player-fullscreen video,
.player-container:fullscreen video,
.player-container:-webkit-full-screen video,
.player-container:-moz-full-screen video,
.player-container:-ms-fullscreen video {

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

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

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

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

    border: 0 !important;

    object-fit: cover !important;

    display: block !important;

    background: #000 !important;
}


/* =========================================================
   HIDE PAGE CONTENT DURING FULLSCREEN
   ========================================================= */

html.player-fullscreen-active,
body.player-fullscreen-active {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #000 !important;
}

body.player-fullscreen-active .navbar,
body.player-fullscreen-active footer,
body.player-fullscreen-active .movie-info-card {
    display: none !important;
}

body.player-fullscreen-active .container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

body.player-fullscreen-active #movie-content-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
}


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

.player-controls {

    position: absolute;

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

    z-index: 50;

    height: 56px;

    pointer-events: none;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
}


/* Fullscreen: no gradient strip — iframe fills viewport, button floats over video */
.player-container.is-player-fullscreen .player-controls,
.player-container:fullscreen .player-controls,
.player-container:-webkit-full-screen .player-controls {

    z-index: 100;

    height: 64px;

    background: transparent;
}


/* =========================================================
   FULLSCREEN BUTTON
   ========================================================= */

.fullscreen-btn {

    position: absolute;

    right: 8px;
    bottom: 8px;

    z-index: 60;

    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;

    display: flex;

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

    border: 0;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.72);

    color: #fff;

    cursor: pointer;

    line-height: 1;

    pointer-events: auto;

    -webkit-tap-highlight-color: transparent;

    touch-action: manipulation;

    transition: background 0.15s ease, transform 0.1s ease;
}


.fullscreen-btn:hover {

    background: rgba(0, 0, 0, 0.88);
}


.fullscreen-btn:active {

    transform: scale(0.92);
}


.fullscreen-btn .fs-icon {

    display: block;

    flex-shrink: 0;
}


.fullscreen-btn .fs-icon-exit {

    display: none;
}


.fullscreen-btn.is-fullscreen .fs-icon-enter {

    display: none;
}


.fullscreen-btn.is-fullscreen .fs-icon-exit {

    display: block;
}


.player-container.is-player-fullscreen .fullscreen-btn,
.player-container:fullscreen .fullscreen-btn,
.player-container:-webkit-full-screen .fullscreen-btn {

    z-index: 110;
}


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

@media (max-width: 640px) {

    #movie-content-wrapper {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .player-container {

        width: 100% !important;

        margin-bottom: 16px;

        border-radius: 6px;
    }


    .player-container:not(.is-player-fullscreen):not(:fullscreen) .video-responsive {

        width: 100% !important;

        aspect-ratio: 16 / 9;

        padding: 0 !important;
    }


    .player-controls {

        height: 52px;
    }


    .fullscreen-btn {

        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;

        right: 6px;
        bottom: 6px;
    }
}


/* =========================================================
   TOUCH
   ========================================================= */

.player-container {

    /*
     * Pinch zoom ko force nahi kar rahe.
     * Native video/iframe controls ko interfere nahi karega.
     */

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   MOVIE INFO CARD
   ========================================================= */

.movie-info-card {

    width: 100%;

    max-width: 1000px;

    margin: 0 auto;

    background: var(--bg-elevated);

    padding: 28px;

    border-radius: var(--radius);

    border: 1px solid var(--border);

    box-sizing: border-box;
}


.movie-info-card h1 {

    font-size: 1.8rem;

    margin-bottom: 12px;

    font-weight: 800;

    color: #fff;

    line-height: 1.3;

    word-break: break-word;
}


/* =========================================================
   MOVIE TAGS
   ========================================================= */

.movie-tags {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 20px;

    color: var(--text-secondary);

    font-size: 0.88rem;
}


.tag {

    background: var(--accent);

    color: #fff;

    padding: 3px 10px;

    border-radius: 5px;

    font-weight: 700;

    font-size: 0.75rem;
}


.meta-dot {

    width: 4px;

    height: 4px;

    flex-shrink: 0;

    background: var(--text-muted);

    border-radius: 50%;
}


/* =========================================================
   INFO GRID
   ========================================================= */

.info-grid {

    display: grid;

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

    gap: 12px;

    padding: 16px 0;

    border-top: 1px solid var(--border);

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

    margin-bottom: 20px;

    font-size: 0.92rem;
}


.info-label {

    color: var(--text-muted);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    font-size: 0.72rem;

    padding-top: 2px;
}


.info-value {

    min-width: 0;

    color: var(--text-primary);

    line-height: 1.6;

    overflow-wrap: anywhere;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.summary-box {

    color: var(--text-secondary);

    font-size: 0.95rem;

    line-height: 1.8;

    background: #0f0f0f;

    padding: 18px;

    border-radius: 8px;

    border-left: 3px solid var(--accent);
}


.summary-box::before {

    content: "SYNOPSIS";

    display: block;

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 1px;

    color: var(--accent);

    margin-bottom: 10px;
}


/* =========================================================
   MOBILE MOVIE INFO
   ========================================================= */

@media (max-width: 640px) {

    .movie-info-card {

        width: 100%;

        padding: 14px;

        border-radius: 6px;
    }


    .movie-info-card h1 {

        font-size: 1.25rem;
    }


    .info-grid {

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

        font-size: 0.85rem;
    }


    .summary-box {

        padding: 14px;

        font-size: 0.88rem;

        line-height: 1.7;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .movie-info-card {

        padding: 12px;
    }


    .movie-info-card h1 {

        font-size: 1.15rem;
    }


    .info-grid {

        grid-template-columns:
            75px minmax(0, 1fr);
    }
}


/* =========================================================
   SAFE AREA — controls only, video stays edge-to-edge
   ========================================================= */

@supports (padding: env(safe-area-inset-bottom)) {

    .player-container.is-player-fullscreen .fullscreen-btn,
    .player-container:fullscreen .fullscreen-btn,
    .player-container:-webkit-full-screen .fullscreen-btn {

        right: calc(8px + env(safe-area-inset-right, 0px));
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}


/* =========================================================
   MOBILE LANDSCAPE FULLSCREEN
   Highest specificity — must override portrait/mobile rules
   ========================================================= */

@media (max-width: 900px) and (orientation: landscape) {

    html.player-fullscreen-active,
    body.player-fullscreen-active {

        overflow: hidden !important;

        margin: 0 !important;

        padding: 0 !important;

        width: 100% !important;

        height: 100% !important;

        background: #000 !important;
    }


    body.player-fullscreen-active .navbar,
    body.player-fullscreen-active footer,
    body.player-fullscreen-active .movie-info-card,
    body.player-fullscreen-active .container,
    body.player-fullscreen-active #movie-content-wrapper {

        margin: 0 !important;

        padding: 0 !important;

        max-width: none !important;

        width: 100% !important;

        height: auto !important;
    }


    body.player-fullscreen-active .player-container.is-player-fullscreen,
    body.player-fullscreen-active .player-container:fullscreen,
    body.player-fullscreen-active .player-container:-webkit-full-screen,
    body.player-fullscreen-active .player-container:-moz-full-screen,
    body.player-fullscreen-active .player-container:-ms-fullscreen {

        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;
        width: 100dvw !important;

        height: 100vh !important;
        height: 100dvh !important;

        min-width: 100vw !important;
        min-width: 100dvw !important;

        min-height: 100vh !important;
        min-height: 100dvh !important;

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

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 0 !important;

        background: #000 !important;

        overflow: hidden !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        z-index: 2147483647 !important;
    }


    body.player-fullscreen-active .player-container.is-player-fullscreen .video-responsive,
    body.player-fullscreen-active .player-container:fullscreen .video-responsive,
    body.player-fullscreen-active .player-container:-webkit-full-screen .video-responsive,
    body.player-fullscreen-active .player-container:-moz-full-screen .video-responsive,
    body.player-fullscreen-active .player-container:-ms-fullscreen .video-responsive {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        min-width: 100% !important;

        min-height: 100% !important;

        max-width: none !important;

        max-height: none !important;

        aspect-ratio: auto !important;

        padding: 0 !important;

        margin: 0 !important;

        overflow: hidden !important;

        background: #000 !important;
    }


    body.player-fullscreen-active .player-container.is-player-fullscreen iframe,
    body.player-fullscreen-active .player-container:fullscreen iframe,
    body.player-fullscreen-active .player-container:-webkit-full-screen iframe,
    body.player-fullscreen-active .player-container:-moz-full-screen iframe,
    body.player-fullscreen-active .player-container:-ms-fullscreen iframe {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        min-width: 100% !important;

        min-height: 100% !important;

        max-width: none !important;

        max-height: none !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        transform: none !important;

        background: #000 !important;
    }


    body.player-fullscreen-active .player-container.is-player-fullscreen .player-controls,
    body.player-fullscreen-active .player-container:fullscreen .player-controls,
    body.player-fullscreen-active .player-container:-webkit-full-screen .player-controls {

        z-index: 100;

        height: 64px;

        background: transparent;

        pointer-events: none;
    }
}