* {
    box-sizing: border-box;
}


:root {

    --background: #0b0b0f;

    --card: #17171d;

    --card-hover: #22222a;

    --text: #ffffff;

    --muted: #aaaaaf;

    --accent: #e50945;

}


body {

    margin: 0;

    background: var(--background);

    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {

    position: sticky;

    top: 0;

    z-index: 100;

    display: flex;

    align-items: center;

    gap: 30px;

    padding:
        15px
        28px;

    background:
        rgba(10, 10, 14, 0.97);

    border-bottom:
        1px solid #292930;

}


.logo {

    font-size: 23px;

    font-weight: 800;

    white-space: nowrap;

}


nav {

    display: flex;

    gap: 22px;

}


nav a {

    color: #cccccc;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

}


nav a:hover {

    color: white;

}


nav a.active {

    color: var(--accent);

}


/* =========================================================
   SEARCH
   ========================================================= */

#searchForm {

    display: flex;

    gap: 7px;

    margin-left: auto;

}


#searchInput {

    width: 220px;

    padding: 10px 12px;

    border-radius: 8px;

    border:
        1px solid #36363e;

    background: #202027;

    color: white;

    outline: none;

}


button {

    border: 0;

    border-radius: 8px;

    padding:
        10px
        14px;

    background: var(--accent);

    color: white;

    font-weight: 700;

    cursor: pointer;

}


button:hover {

    filter: brightness(1.1);

}


/* =========================================================
   MAIN
   ========================================================= */

main {

    max-width: 1450px;

    margin: auto;

    padding:
        25px
        28px
        60px;

}


.section-header {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;

}


.section-header h1 {

    margin: 0;

    font-size: 25px;

}


#status {

    color: var(--muted);

    font-size: 13px;

}


/* =========================================================
   HERO
   ========================================================= */

.hero {

    min-height: 330px;

    margin-bottom: 30px;

    padding: 45px;

    display: flex;

    align-items: end;

    position: relative;

    overflow: hidden;

    border-radius: 15px;

    background-size: cover;

    background-position: center;

}


.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.95),
            rgba(0,0,0,.35),
            rgba(0,0,0,.8)
        );

}


.hero-content {

    position: relative;

    max-width: 650px;

}


.hero h2 {

    font-size: 42px;

    margin:
        0
        0
        10px;

}


.hero p {

    color: #dddddd;

    line-height: 1.5;

}


/* =========================================================
   MOVIE GRID
   ========================================================= */

.movie-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(170px, 1fr)
        );

    gap: 20px;

}


.movie-card {

    background: var(--card);

    border-radius: 10px;

    overflow: hidden;

    cursor: pointer;

    transition:
        transform .2s,
        box-shadow .2s;

}


.movie-card:hover {

    transform:
        translateY(-5px);

    background:
        var(--card-hover);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.45);

}


.poster {

    display: block;

    width: 100%;

    aspect-ratio: 2 / 3;

    object-fit: cover;

    background: #25252d;

}


.movie-info {

    padding: 12px;

}


.movie-title {

    font-weight: 700;

    line-height: 1.3;

}


.movie-meta {

    color: var(--muted);

    font-size: 12px;

    margin-top: 6px;

}


/* =========================================================
   MODAL
   ========================================================= */

.modal {

    position: fixed;

    inset: 0;

    z-index: 500;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

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

}


.modal-content,
.player-content {

    position: relative;

    width: min(
        900px,
        100%
    );

    max-height: 92vh;

    overflow: auto;

    padding: 25px;

    background: #15151b;

    border:
        1px solid #303039;

    border-radius: 14px;

}


.close-button {

    position: absolute;

    top: 12px;

    right: 15px;

    z-index: 5;

    width: 38px;

    height: 38px;

    padding: 0;

    border-radius: 50%;

    background: #292930;

    font-size: 24px;

}


/* =========================================================
   DETAILS
   ========================================================= */

.detail-layout {

    display: grid;

    grid-template-columns:
        200px 1fr;

    gap: 25px;

}


.detail-poster {

    width: 100%;

    border-radius: 9px;

}


.details h2 {

    margin-top: 0;

    font-size: 28px;

}


.details p {

    color: #bbbbc2;

    line-height: 1.6;

}


/* =========================================================
   EPISODES
   ========================================================= */

.episodes {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(75px, 1fr)
        );

    gap: 8px;

    margin-top: 20px;

}


.episodes button {

    background: #292930;

}


.episodes button:hover {

    background: var(--accent);

}


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

#playerTitle {

    margin:
        0
        45px
        15px
        0;

}


#videoPlayer {

    width: 100%;

    max-height: 70vh;

    display: block;

    background: black;

    border-radius: 8px;

}


.video-buttons {

    display: flex;

    gap: 8px;

    margin-top: 12px;

}


.video-buttons button {

    background: #292930;

}


.video-buttons #nextButton {

    margin-left: auto;

    background: var(--accent);

}


.episode-select {

    width: 100%;

    margin-top: 15px;

    padding: 11px;

    background: #222229;

    color: white;

    border:
        1px solid #383842;

    border-radius: 7px;

}


/* =========================================================
   LOADING
   ========================================================= */

.loading {

    width: 100%;

    padding: 50px;

    text-align: center;

    color: var(--muted);

}


/* =========================================================
   TOAST
   ========================================================= */

.toast {

    position: fixed;

    right: 20px;

    bottom: 20px;

    z-index: 1000;

    display: none;

    padding:
        12px
        16px;

    border-radius: 8px;

    background: #292930;

}


/* =========================================================
   HIDDEN
   ========================================================= */

.hidden {

    display: none !important;

}


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

@media (max-width: 800px) {

    .navbar {

        flex-wrap: wrap;

        gap: 14px;

    }


    nav {

        order: 3;

        width: 100%;

        overflow-x: auto;

    }


    #searchForm {

        margin-left: auto;

    }


    #searchInput {

        width: 150px;

    }


    main {

        padding:
            18px
            14px
            40px;

    }


    .movie-grid {

        grid-template-columns:
            repeat(
                auto-fill,
                minmax(125px, 1fr)
            );

        gap: 12px;

    }


    .hero {

        min-height: 280px;

        padding: 25px;

    }


    .hero h2 {

        font-size: 30px;

    }


    .detail-layout {

        grid-template-columns:
            120px 1fr;

        gap: 15px;

    }


    .video-buttons {

        flex-wrap: wrap;

    }


    .video-buttons #nextButton {

        margin-left: 0;

    }

}