* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #080808;
    color: white;
    font-family: Arial, sans-serif;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 6%;
    background: #111;
    border-bottom: 1px solid #b89535;
}

.logo {
    color: white;
    font-size: 30px;
    font-weight: bold;
}

.logo span {
    color: #d4af37;
}

nav a {
    color: white;
    text-decoration: none;
    margin-left: 22px;
}

nav a:hover {
    color: #d4af37;
}

.hero {
    text-align: center;
    padding: 110px 20px;
    background: linear-gradient(135deg, #181818, #080808);
}

.hero h2 {
    color: #d4af37;
    font-size: 38px;
    margin-bottom: 15px;
}

.hero p {
    color: #ccc;
    margin-bottom: 25px;
}

button {
    background: #d4af37;
    color: black;
    padding: 13px 28px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

.movies {
    padding: 40px 6%;
}

.movies h2 {
    color: #d4af37;
    margin-bottom: 25px;
}

.movie-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.movie-card {
    background: #171717;
    padding: 12px;
    border-radius: 8px;
}

.poster {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.movie-card h3 {
    padding-top: 12px;
}

footer {
    text-align: center;
    padding: 25px;
    background: #111;
    color: #999;
}

@media (max-width: 600px) {
    header {
        flex-direction: column;
        gap: 18px;
    }

    nav a {
        margin: 5px;
    }

    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero h2 {
        font-size: 27px;
    }
}

#movieSearch {
    width: 100%;
    padding: 15px;
    margin-bottom: 25px;
    background: #171717;
    color: white;
    border: 1px solid #d4af37;
    border-radius: 6px;
    font-size: 16px;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.category-btn {
    background: #222;
    color: #d4af37;
    border: 1px solid #d4af37;
    padding: 10px 18px;
    cursor: pointer;
}

.category-btn.active,
.category-btn:hover {
    background: #d4af37;
    color: black;
}

.watch-btn {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: #d4af37;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.watch-btn:hover {
    background: #f1cf62;
}

.movie-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 1000;
}

.modal-content {
    background: #181818;
    border: 1px solid #d4af37;
    padding: 35px;
    width: 100%;
    max-width: 450px;
    border-radius: 12px;
    text-align: center;
}

.modal-content h2 {
    color: #d4af37;
    margin-bottom: 20px;
}

.modal-content p {
    color: #ccc;
    margin-bottom: 20px;
}

.close-btn {
    float: right;
    background: transparent;
    color: white;
    border: none;
    font-size: 28px;
    cursor: pointer;
}

#adminMovies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

#adminMovies .movie-card {
    width: 100%;
}

.login-container {
    width: 320px;
    margin: 100px auto;
    padding: 30px;
    background: #151515;
    border: 1px solid gold;
    border-radius: 12px;
    text-align: center;
}

.login-container h1 {
    color: gold;
    font-size: 32px;
}

.login-container h2 {
    color: white;
}

.login-container input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    box-sizing: border-box;
    background: #222;
    color: white;
    border: 1px solid #555;
    border-radius: 5px;
}

.login-container button {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    background: gold;
    color: black;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

#loginMessage {
    color: gold;
}

.dashboard {
    padding: 25px;
    margin-bottom: 30px;
    background: #111;
    border: 1px solid gold;
    border-radius: 10px;
}

.dashboard h1 {
    color: gold;
}

.dashboard p {
    color: white;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.dash-card {
    background: #222;
    border: 1px solid gold;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.dash-card h3 {
    color: white;
}

.dash-card h2 {
    color: gold;
    font-size: 32px;
}

.dashboard-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 25px;
}

.dashboard-buttons button {
    padding: 12px 22px;
    background: gold;
    color: black;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.dashboard-buttons button:hover {
    background: white;
    transform: translateY(-3px);
}

.movie-details-container {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    max-width: 1000px;
    margin: 60px auto;
    padding: 25px;
    background: #151515;
    border: 1px solid gold;
    border-radius: 12px;
}

#detailPoster {
    width: 300px;
    max-width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 10px;
}

.movie-info {
    flex: 1;
    min-width: 250px;
    color: white;
}

.movie-info h1 {
    color: gold;
    font-size: 32px;
}

.movie-info p {
    font-size: 17px;
    line-height: 1.7;
}

.movie-info button {
    padding: 12px 25px;
    background: gold;
    color: black;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

/* PREMIUM HERO SECTION */

.hero {
    min-height: 420px;
    display: flex;
    align-items: center;
    padding: 40px;
    background: linear-gradient(
        90deg,
        #000000 10%,
        #18120a 60%,
        #332500 100%
    );
    border-bottom: 2px solid gold;
}

.hero-content {
    max-width: 650px;
}

.hero-tag {
    color: gold;
    letter-spacing: 4px;
    font-size: 14px;
    font-weight: bold;
}

.hero h2 {
    color: white;
    font-size: 48px;
    margin: 20px 0;
}

.hero h2 span {
    color: gold;
}

.hero p {
    color: #cccccc;
    font-size: 18px;
    margin-bottom: 30px;
}

.hero button {
    padding: 15px 30px;
    background: gold;
    color: black;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.hero button:hover {
    background: white;
    transform: scale(1.05);
}

@media (max-width: 600px) {
    .hero {
        min-height: 350px;
        padding: 25px;
    }

    .hero h2 {
        font-size: 32px;
    }
}

/* TRENDING MOVIES SECTION */

.trending-section {
    padding: 40px 25px;
    background: #080808;
    color: white;
}

.trending-section h2 {
    color: gold;
    font-size: 28px;
    margin-bottom: 10px;
}

.trending-section > p {
    color: #aaa;
    margin-bottom: 25px;
}

.trending-banner {
    padding: 45px 30px;
    background: linear-gradient(120deg, #241900, #111, #332500);
    border: 1px solid gold;
    border-radius: 12px;
}

.trending-banner h3 {
    color: gold;
    font-size: 30px;
}

.trending-banner p {
    color: white;
    font-size: 16px;
}

/* PREMIUM MOVIE CARDS */

.movie-card {
    background: #151515;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s ease;
}

.movie-card:hover {
    transform: translateY(-8px);
    border-color: gold;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
}

.movie-card h3 {
    color: gold;
    padding: 10px;
}

.movie-card p {
    color: #ccc;
    padding: 0 10px;
}

.movie-card button {
    margin: 10px;
    padding: 10px 18px;
    background: gold;
    color: black;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

.movie-card button:hover {
    background: white;
}

/* POSTER ZOOM EFFECT */

.movie-card .poster {
    transition: transform 0.4s ease;
}

.movie-card:hover .poster {
    transform: scale(1.05);
}

.movie-card {
    cursor: pointer;
}

.movie-card .poster {
    overflow: hidden;
}

/* STICKY NAVIGATION */

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #080808;
    box-shadow: 0 3px 15px rgba(255, 215, 0, 0.15);
}

/* CINEROCK LOGO EFFECT */

header h1 {
    color: gold;
    font-size: 32px;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    transition: 0.3s;
}

header h1:hover {
    text-shadow: 0 0 20px gold;
    transform: scale(1.03);
}

/* PREMIUM SEARCH BAR */

#searchInput {
    width: 100%;
    max-width: 450px;
    padding: 14px 18px;
    background: #151515;
    color: white;
    border: 1px solid gold;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: 0.3s;
}

#searchInput:focus {
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    border-color: white;
}

#searchInput::placeholder {
    color: #999;
}

/* CINEROCK VIDEO BACKGROUND */

.hero {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: center;
    padding: 40px;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* FEATURED MOVIE SECTION */

.featured-movie {
    min-height: 300px;
    display: flex;
    align-items: center;
    padding: 40px;
    margin: 30px 20px;
    background: linear-gradient(
        110deg,
        #241900,
        #111111,
        #302200
    );
    border: 1px solid gold;
    border-radius: 12px;
}

.featured-content {
    max-width: 600px;
}

.featured-tag {
    color: gold;
    font-weight: bold;
    letter-spacing: 2px;
}

.featured-content h2 {
    color: white;
    font-size: 34px;
    margin: 20px 0;
}

.featured-content p {
    color: #cccccc;
    line-height: 1.7;
}

.featured-content button {
    margin-top: 20px;
    padding: 14px 28px;
    background: gold;
    color: black;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

.featured-content button:hover {
    background: white;
}

/* FEATURED BACKGROUND VIDEO */

.featured-movie {
    position: relative;
    overflow: hidden;
    min-height: 350px;
    display: flex;
    align-items: center;
}

.featured-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.featured-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.70);
    z-index: 1;
}

.featured-content {
    position: relative;
    z-index: 2;
}

/* PREMIUM MOVIE DETAILS PAGE */

.movie-details-container {
    display: flex;
    align-items: center;
    gap: 45px;
    padding: 50px;
    margin: 40px auto;
    max-width: 1200px;
    background: linear-gradient(135deg, #171717, #080808);
    border: 1px solid #8b7200;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.12);
}

.details-poster {
    flex: 1;
}

.details-poster img {
    width: 100%;
    max-width: 380px;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
}

.movie-info {
    flex: 1.5;
}

.movie-info h1 {
    color: gold;
    font-size: 42px;
    margin: 20px 0;
}

.movie-meta {
    display: flex;
    gap: 25px;
    color: #cccccc;
    flex-wrap: wrap;
}

.details-divider {
    height: 2px;
    width: 100%;
    background: linear-gradient(to right, gold, transparent);
    margin: 25px 0;
}

.movie-info h3 {
    color: gold;
    letter-spacing: 2px;
}

#detailDescription {
    color: #cccccc;
    line-height: 1.8;
    margin: 20px 0;
}

.movie-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.movie-buttons button {
    padding: 15px 25px;
    border: 1px solid gold;
    background: gold;
    color: black;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.movie-buttons button:hover {
    background: white;
    transform: translateY(-3px);
}

.back-button {
    margin-top: 25px;
    padding: 12px 22px;
    background: transparent;
    color: gold;
    border: 1px solid gold;
    border-radius: 6px;
    cursor: pointer;
}

.back-button:hover {
    background: gold;
    color: black;
}

#moviePlayer {
    border: 1px solid gold;
    border-radius: 10px;
}

/* MOBILE DESIGN */

@media (max-width: 768px) {
    .movie-details-container {
        flex-direction: column;
        padding: 20px;
        margin: 20px 12px;
    }

    .details-poster img {
        max-width: 100%;
    }

    .movie-info h1 {
        font-size: 30px;
    }

    .movie-buttons {
        flex-direction: column;
    }

    .movie-buttons button {
        width: 100%;
    }
}

/* RATING AND REVIEWS */

.review-section {
    max-width: 1100px;
    margin: 40px auto;
    padding: 35px;
    background: #111;
    border: 1px solid #8b7200;
    border-radius: 15px;
}

.review-section h2 {
    color: gold;
    margin-bottom: 25px;
}

.rating-summary h3 {
    color: gold;
    font-size: 32px;
}

.rating-summary p {
    color: #aaa;
}

.star-rating {
    margin: 20px 0;
}

.star {
    background: transparent;
    border: none;
    color: #555;
    font-size: 35px;
    cursor: pointer;
}

.star:hover {
    color: gold;
}

#reviewText {
    width: 100%;
    min-height: 120px;
    padding: 15px;
    background: #222;
    color: white;
    border: 1px solid #665500;
    border-radius: 8px;
    resize: vertical;
    box-sizing: border-box;
}

#submitReview {
    margin-top: 15px;
    padding: 13px 25px;
    background: gold;
    color: black;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

#reviewsList {
    margin-top: 30px;
}

.review-item {
    padding: 18px;
    margin-top: 15px;
    background: #1c1c1c;
    border-left: 3px solid gold;
    border-radius: 6px;
    color: white;
}

.review-stars {
    color: gold;
    font-size: 20px;
}

/* CINEROCK USER LOGIN */

.user-auth-container {
    width: 90%;
    max-width: 420px;
    margin: 70px auto;
    padding: 35px;
    box-sizing: border-box;
    text-align: center;
    background: linear-gradient(145deg, #1c1c1c, #080808);
    border: 1px solid gold;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.15);
}

.user-auth-container h1 {
    color: gold;
    font-size: 35px;
    letter-spacing: 3px;
}

.user-auth-container p {
    color: #ccc;
}

.user-auth-container h2 {
    color: white;
    margin: 30px 0;
}

.user-auth-container input {
    width: 100%;
    padding: 14px;
    margin: 10px 0;
    box-sizing: border-box;
    background: #252525;
    color: white;
    border: 1px solid #665500;
    border-radius: 6px;
}

.user-auth-container button {
    width: 100%;
    padding: 14px;
    margin: 18px 0;
    background: gold;
    color: black;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

.user-auth-container button:hover {
    background: white;
}

.user-auth-container a {
    color: gold;
    text-decoration: none;
}

.user-auth-container a:hover {
    color: white;
}

/* WATCHLIST REMOVE BUTTON */

#myWatchlist button {
    display: block;
    margin-top: 15px;
    padding: 12px 20px;
    background: transparent;
    color: gold;
    border: 1px solid gold;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

#myWatchlist button:hover {
    background: gold;
    color: black;
    transform: translateY(-2px);
}

/* WATCHLIST WATCH BUTTON */

#myWatchlist button:last-child {
    background: gold;
    color: black;
    border: 1px solid gold;
}

#myWatchlist button:last-child:hover {
    background: white;
    border-color: white;
    transform: translateY(-2px);
}

#searchSuggestions {
    max-width: 500px;
    margin: 0 auto;
    background: #111;
    border: 1px solid gold;
    border-radius: 8px;
    position: relative;
    z-index: 100;
}

#searchSuggestions p {
    padding: 12px;
    margin: 0;
    color: white;
    cursor: pointer;
    border-bottom: 1px solid #333;
}

#searchSuggestions p:hover {
    background: gold;
    color: black;
}


/* CINEROCK PREMIUM MOVIE DETAILS PAGE */

.premium-details-page {
    max-width: 1150px;
    margin: 50px auto;
    padding: 30px;
    color: white;
}

/* TOP MOVIE SECTION */

.premium-movie-top {
    display: flex;
    align-items: center;
    gap: 55px;
    padding: 35px;
    background: linear-gradient(135deg, #171717, #080808);
    border: 1px solid #3d3218;
    border-radius: 18px;
}

.premium-poster {
    width: 300px;
    flex-shrink: 0;
}

.premium-poster img {
    width: 100%;
    height: 390px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.7);
}

.premium-movie-heading h1 {
    font-size: 38px;
    color: #f5c542;
    margin: 20px 0;
}

.premium-quality {
    color: #f5c542;
    letter-spacing: 3px;
    margin-top: 25px;
}

.movie-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    color: #ccc;
}

.featured-tag {
    color: #f5c542;
    font-weight: bold;
}

/* MOVIE INFORMATION */

.premium-movie-information {
    margin-top: 35px;
    padding: 30px;
    background: #151515;
    border-radius: 15px;
}

.premium-movie-information h2,
.premium-download-section h2 {
    color: #f5c542;
}

.premium-movie-information p {
    color: #ccc;
    line-height: 1.9;
    font-size: 16px;
}

.details-divider {
    height: 2px;
    width: 100%;
    background: linear-gradient(to right, #f5c542, transparent);
    margin: 18px 0;
}

/* ACTION BUTTONS */

.premium-download-section {
    margin-top: 35px;
    padding: 30px;
    background: #151515;
    border-radius: 15px;
}

.premium-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 25px;
}

.premium-action-buttons button {
    padding: 14px 22px;
    background: #f5c542;
    color: black;
    border: none;
    border-radius: 7px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.premium-action-buttons button:hover {
    background: white;
    transform: translateY(-3px);
}

/* DOWNLOAD AREA */

.download-area {
    margin-top: 35px;
    padding: 30px;
    text-align: center;
    background: linear-gradient(135deg, #29200b, #111);
    border: 1px solid #a98527;
    border-radius: 14px;
}

.download-area h3 {
    color: #f5c542;
    font-size: 24px;
}

.download-area p {
    color: #ccc;
}

.download-button {
    display: inline-block;
    margin-top: 15px;
    padding: 15px 35px;
    background: #f5c542;
    color: black;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: 0.3s;
}

.download-button:hover {
    background: white;
    transform: scale(1.05);
}

/* REVIEW SECTION */

.review-section {
    margin-top: 35px;
    padding: 30px;
    background: #151515;
    border-radius: 15px;
}

.review-section h2 {
    color: #f5c542;
}

.rating-summary h3 {
    color: #f5c542;
}

.review-section textarea {
    width: 100%;
    min-height: 110px;
    margin: 20px 0;
    padding: 15px;
    background: #222;
    color: white;
    border: 1px solid #555;
    border-radius: 8px;
    box-sizing: border-box;
}

.star {
    background: transparent;
    border: none;
    color: #f5c542;
    font-size: 30px;
    cursor: pointer;
}

#submitReview {
    padding: 12px 25px;
    background: #f5c542;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

/* BACK BUTTON */

.back-button {
    margin-top: 30px;
    padding: 13px 25px;
    background: transparent;
    color: #f5c542;
    border: 1px solid #f5c542;
    border-radius: 7px;
    cursor: pointer;
}

/* MOBILE DESIGN */

@media (max-width: 700px) {

    .premium-details-page {
        padding: 15px;
        margin: 20px auto;
    }

    .premium-movie-top {
        flex-direction: column;
        text-align: center;
        gap: 25px;
        padding: 20px;
    }

    .premium-poster {
        width: 220px;
    }

    .premium-poster img {
        height: 290px;
    }

    .premium-movie-heading h1 {
        font-size: 27px;
    }

    .movie-meta {
        justify-content: center;
    }

    .premium-action-buttons {
        flex-direction: column;
    }

    .premium-action-buttons button {
        width: 100%;
    }
}


/* CINEROCK CINEMATIC PREMIUM EFFECTS */

body {
    background:
        radial-gradient(ellipse at top, #29200b 0%, #101010 45%, #050505 100%);
    background-attachment: fixed;
}

/* GOLDEN PAGE GLOW */

.premium-details-page {
    animation: pageReveal 1s ease;
}

/* POSTER ANIMATION */

.premium-poster img {
    border: 2px solid #9d7925;
    box-shadow:
        0 0 15px rgba(245, 197, 66, 0.25),
        0 15px 40px rgba(0, 0, 0, 0.8);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    animation: posterReveal 1.2s ease;
}

.premium-poster img:hover {
    transform: scale(1.04);
    box-shadow:
        0 0 30px rgba(245, 197, 66, 0.65),
        0 20px 45px rgba(0, 0, 0, 0.9);
}

/* GOLD TITLE GLOW */

.premium-movie-heading h1 {
    text-shadow: 0 0 15px rgba(245, 197, 66, 0.35);
    animation: titleReveal 1.2s ease;
}

/* PREMIUM SECTION EFFECTS */

.premium-movie-information,
.premium-download-section,
.review-section {
    border: 1px solid rgba(245, 197, 66, 0.18);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
    animation: sectionReveal 1s ease;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.premium-movie-information:hover,
.premium-download-section:hover,
.review-section:hover {
    border-color: #a98527;
    box-shadow: 0 0 25px rgba(245, 197, 66, 0.12);
}

/* BUTTON GLOW */

.premium-action-buttons button,
.download-button,
#submitReview {
    box-shadow: 0 0 12px rgba(245, 197, 66, 0.2);
    transition: all 0.3s ease;
}

.premium-action-buttons button:hover,
.download-button:hover,
#submitReview:hover {
    box-shadow: 0 0 25px rgba(245, 197, 66, 0.65);
    transform: translateY(-4px);
}

/* DOWNLOAD PULSE */

.download-button {
    animation: downloadGlow 2s infinite alternate;
}

@keyframes downloadGlow {
    from {
        box-shadow: 0 0 8px rgba(245, 197, 66, 0.2);
    }

    to {
        box-shadow: 0 0 22px rgba(245, 197, 66, 0.65);
    }
}

/* CINEMATIC ANIMATIONS */

@keyframes pageReveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes posterReveal {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateX(25px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes sectionReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* REDUCE ANIMATION IF REQUESTED BY DEVICE */

@media (prefers-reduced-motion: reduce) {
    .premium-details-page,
    .premium-poster img,
    .premium-movie-heading h1,
    .premium-movie-information,
    .premium-download-section,
    .review-section,
    .download-button {
        animation: none;
    }
}


/* RELATED MOVIES SECTION */

.related-movies {
    margin-top: 40px;
    padding: 30px;
    background: #151515;
    border: 1px solid rgba(245, 197, 66, 0.2);
    border-radius: 15px;
}

.related-movies h2 {
    color: #f5c542;
    margin-bottom: 25px;
    letter-spacing: 2px;
}

.related-movies-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 22px;
}

.related-movie-card {
    background: #222;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #383020;
    transition: 0.3s ease;
}

.related-movie-card:hover {
    transform: translateY(-7px);
    border-color: #f5c542;
    box-shadow: 0 0 20px rgba(245, 197, 66, 0.2);
}

.related-movie-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.related-movie-card h3 {
    color: white;
    padding: 10px;
    font-size: 17px;
}

.related-movie-card p {
    color: #bbb;
    padding: 0 10px;
}

.related-movie-card button {
    margin: 10px;
    padding: 10px 15px;
    background: #f5c542;
    color: black;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}


/* CINEROCK GENRE BUTTONS */

.genre-categories {
    margin: 25px 0;
    padding: 20px;
    background: #151515;
    border-radius: 12px;
}

.genre-categories h3 {
    color: #f5c542;
    margin-bottom: 15px;
}

.genre-btn {
    padding: 10px 18px;
    margin: 5px;
    background: #222;
    color: white;
    border: 1px solid #8b6b22;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.genre-btn:hover,
.genre-btn.active {
    background: #f5c542;
    color: black;
    box-shadow: 0 0 12px rgba(245, 197, 66, 0.4);
}


/* CINEROCK MOVIE COLLECTION GRID */

#adminMovies {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}

#adminMovies .movie-card {
    width: 100%;
    min-width: 0;
}

#adminMovies .poster {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

/* PAGINATION */

#moviePagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 35px 0;
}

.page-btn {
    padding: 11px 17px;
    background: #171717;
    color: gold;
    border: 1px solid gold;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.page-btn:hover,
.page-btn.active {
    background: gold;
    color: black;
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* TABLET */

@media (min-width: 601px) and (max-width: 1000px) {
    #adminMovies {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* MOBILE */

@media (max-width: 600px) {
    #adminMovies {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #adminMovies .poster {
        height: 220px;
    }

    .page-btn {
        padding: 9px 12px;
    }
}

/* =====================================
   CINEROCK WEB SERIES DESIGN
===================================== */

/* WEB SERIES HERO */

.series-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 50px 6%;
    background: #080808;
    border-bottom: 2px solid gold;
}

/* HERO POSTER AND VIDEO */

#heroPoster,
#heroVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.series-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.75) 45%,
        rgba(0, 0, 0, 0.2) 100%
    );
    z-index: 1;
}

/* HERO CONTENT */

.series-hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.series-hero-content h1 {
    color: gold;
    font-size: 48px;
    margin-bottom: 18px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.series-hero-content p {
    color: #ddd;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 15px;
}

#heroInfo {
    color: gold;
    font-weight: bold;
}

#heroWatch {
    margin-top: 15px;
    padding: 15px 32px;
    background: gold;
    color: black;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

#heroWatch:hover {
    background: white;
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* SERIES SECTIONS */

.series-section {
    padding: 45px 6%;
}

.series-section h2 {
    color: gold;
    font-size: 28px;
    margin-bottom: 25px;
    border-left: 4px solid gold;
    padding-left: 15px;
}

/* SERIES GRID */

.series-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
}

/* SERIES CARDS */

.series-card {
    background: #151515;
    border: 1px solid #333;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s ease;
    min-width: 0;
}

.series-card:hover {
    transform: translateY(-8px);
    border-color: gold;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
}

.series-card img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.series-card:hover img {
    transform: scale(1.05);
}

.series-card h3 {
    color: gold;
    padding: 12px 12px 5px;
    font-size: 17px;
}

.series-card p {
    color: #aaa;
    padding: 5px 12px 15px;
    font-size: 14px;
}

/* ACTIVE NAVIGATION */

nav a.active {
    color: gold;
    font-weight: bold;
}

/* TABLET DESIGN */

@media (max-width: 1000px) {

    .series-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .series-card img {
        height: 240px;
    }

}

/* MOBILE DESIGN */

@media (max-width: 600px) {

    .series-hero {
        min-height: 420px;
        padding: 30px 22px;
    }

    .series-hero-content h1 {
        font-size: 30px;
    }

    .series-hero-content p {
        font-size: 14px;
    }

    .series-section {
        padding: 30px 15px;
    }

    .series-section h2 {
        font-size: 23px;
    }

    .series-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .series-card img {
        height: 190px;
    }

    .series-card h3 {
        font-size: 14px;
    }

    .series-card p {
        font-size: 12px;
    }

}

/* =====================================
   CINEROCK SERIES DETAILS PAGE
===================================== */

.series-details-container {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1150px;
    margin: 45px auto;
    padding: 30px;
    background: linear-gradient(135deg, #171717, #080808);
    border: 1px solid #8b7200;
    border-radius: 15px;
}

.series-details-poster img {
    width: 280px;
    height: 390px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid gold;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
}

.series-details-info {
    flex: 1;
}

.series-details-info h1 {
    color: gold;
    font-size: 38px;
    margin-bottom: 20px;
}

.series-details-info p {
    color: #ccc;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* EPISODE PLAYER */

.episode-player-section {
    max-width: 1100px;
    margin: 40px auto;
    padding: 25px;
    background: #151515;
    border: 1px solid #665500;
    border-radius: 12px;
}

.episode-player-section h2 {
    color: gold;
    margin-bottom: 20px;
}

#episodePlayer {
    display: block;
    width: 100%;
    max-height: 600px;
    background: black;
    border: 1px solid gold;
    border-radius: 10px;
}

/* SEASONS */

.seasons-section {
    max-width: 1100px;
    margin: 40px auto;
    padding: 25px;
}

.seasons-section > h2 {
    color: gold;
    font-size: 28px;
    margin-bottom: 25px;
}

.season-box {
    margin-bottom: 25px;
    padding: 22px;
    background: #151515;
    border: 1px solid #665500;
    border-radius: 10px;
}

.season-box h3 {
    color: gold;
    font-size: 22px;
    margin-bottom: 18px;
}

/* EPISODE BUTTONS */

.episodes-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.episode-button {
    width: 100%;
    padding: 15px;
    background: #222;
    color: white;
    border: 1px solid #555;
    border-radius: 7px;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
}

.episode-button:hover {
    background: gold;
    color: black;
    border-color: gold;
    transform: translateY(-3px);
}

/* MOBILE DESIGN */

@media (max-width: 700px) {

    .series-details-container {
        flex-direction: column;
        margin: 20px 12px;
        padding: 20px;
        text-align: center;
    }

    .series-details-poster img {
        width: 220px;
        height: 300px;
    }

    .series-details-info h1 {
        font-size: 28px;
    }

    .episode-player-section {
        margin: 20px 12px;
        padding: 15px;
    }

    .seasons-section {
        margin: 20px 12px;
        padding: 15px;
    }

    .episodes-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 400px) {

    .episodes-list {
        grid-template-columns: 1fr;
    }

}

/* =====================================
   CINEROCK ANIME HOME SECTION
===================================== */

.anime-home-section {
    padding: 55px 6%;
    background: #080808;
}

.anime-home-heading {
    margin-bottom: 25px;
}

.anime-home-heading span {
    color: #ff3c70;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 3px;
}

.anime-home-heading h2 {
    color: #ff3c70;
    font-size: 32px;
    margin: 10px 0;
}

.anime-home-heading p {
    color: #aaa;
    font-size: 15px;
}

.anime-home-banner {
    position: relative;
    min-height: 350px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 45px;
    border: 1px solid #a51f48;
    border-radius: 15px;
    background:
        linear-gradient(90deg, #16030b 0%, #351020 55%, #080808 100%);
    box-shadow: 0 0 25px rgba(255, 40, 100, 0.12);
}

.anime-home-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(255, 40, 100, 0.25),
            transparent 45%
        );
}

.anime-home-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.anime-home-content span {
    color: #ff7399;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
}

.anime-home-content h2 {
    color: white;
    font-size: 42px;
    margin: 15px 0;
}

.anime-home-content p {
    color: #ddd;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 22px;
}

.anime-home-content button {
    padding: 14px 30px;
    background: #ff2865;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.anime-home-content button:hover {
    background: white;
    color: #ff2865;
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(255, 40, 100, 0.4);
}

/* MOBILE */

@media (max-width: 600px) {

    .anime-home-section {
        padding: 35px 15px;
    }

    .anime-home-banner {
        min-height: 300px;
        padding: 25px;
    }

    .anime-home-content h2 {
        font-size: 29px;
    }

    .anime-home-content p {
        font-size: 14px;
    }

}

/* =====================================
   CINEROCK ANIME PAGE
===================================== */

.anime-hero {
    position: relative;
    height: 550px;
    display: flex;
    align-items: center;
    padding: 0 7%;
    overflow: hidden;
    background: #10030a;
}

#animeBackgroundVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anime-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.95),
        rgba(0, 0, 0, 0.55),
        rgba(0, 0, 0, 0.2)
    );
}

.anime-hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.anime-hero-content span {
    color: #ff3975;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 3px;
}

.anime-hero-content h1 {
    color: white;
    font-size: 65px;
    margin: 15px 0;
}

.anime-hero-content p {
    color: #ddd;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 25px;
}

.anime-hero-content button {
    background: #ff2865;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

.anime-hero-content button:hover {
    background: white;
    color: #ff2865;
}

/* ANIME COLLECTION */

.anime-collection-section {
    padding: 60px 6%;
    background: #080808;
    min-height: 450px;
}

.anime-section-heading {
    margin-bottom: 35px;
}

.anime-section-heading span {
    color: #ff3975;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
}

.anime-section-heading h2 {
    color: white;
    font-size: 32px;
    margin: 12px 0;
}

.anime-section-heading p {
    color: #aaa;
}

.anime-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}

.anime-card {
    background: #151515;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid #292929;
}

.anime-card:hover {
    transform: translateY(-8px);
    border-color: #ff2865;
    box-shadow: 0 5px 20px rgba(255, 40, 101, 0.2);
}

.anime-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

.anime-card h3 {
    color: white;
    padding: 13px;
    font-size: 16px;
}

.anime-empty-message {
    color: #aaa;
    font-size: 16px;
}

/* TABLET */

@media (max-width: 1000px) {
    .anime-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* MOBILE */

@media (max-width: 600px) {
    .anime-hero {
        height: 430px;
        padding: 25px;
    }

    .anime-hero-content h1 {
        font-size: 40px;
    }

    .anime-hero-content p {
        font-size: 14px;
    }

    .anime-collection-section {
        padding: 40px 15px;
    }

    .anime-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .anime-card img {
        height: 210px;
    }

    .anime-card h3 {
        font-size: 14px;
    }
}


/* =====================================
   CINEROCK ANIME DETAILS PAGE
===================================== */

.anime-details-section {
    background: #080808;
    min-height: 100vh;
    padding: 40px 6%;
}

.anime-back-button {
    background: #ff2865;
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 35px;
}

.anime-back-button:hover {
    background: white;
    color: #ff2865;
}

/* ANIME INFORMATION */

.anime-details-container {
    display: flex;
    align-items: center;
    gap: 45px;
    padding: 30px;
    background: #151515;
    border: 1px solid #292929;
    border-radius: 12px;
}

.anime-details-poster {
    flex-shrink: 0;
}

.anime-details-poster img {
    width: 260px;
    height: 360px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(255, 40, 101, 0.2);
}

.anime-details-info {
    max-width: 650px;
}

.anime-exclusive-tag {
    color: #ff3975;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 3px;
}

.anime-details-info h1 {
    color: white;
    font-size: 40px;
    margin: 15px 0;
}

.anime-details-info p {
    color: #bbb;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 12px;
}

/* SEASONS */

.anime-seasons-section {
    margin-top: 55px;
}

.anime-seasons-section h2 {
    color: white;
    font-size: 27px;
    margin-bottom: 25px;
    border-left: 4px solid #ff2865;
    padding-left: 15px;
}

.anime-season-card {
    background: #151515;
    border: 1px solid #292929;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 20px;
}

.anime-season-card h3 {
    color: #ff3975;
    margin-bottom: 18px;
    font-size: 21px;
}

.anime-episode-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.anime-episode-btn {
    background: #242424;
    color: white;
    border: 1px solid #383838;
    padding: 14px;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
}

.anime-episode-btn:hover {
    background: #ff2865;
    border-color: #ff2865;
}

/* VIDEO PLAYER */

.anime-player-section {
    margin-top: 55px;
    padding: 25px;
    background: #151515;
    border-radius: 10px;
    border: 1px solid #292929;
}

.anime-player-section h2 {
    color: white;
    margin-bottom: 20px;
    font-size: 22px;
}

#animeEpisodePlayer {
    width: 100%;
    max-height: 600px;
    background: black;
    border-radius: 8px;
}

/* MOBILE */

@media (max-width: 700px) {

    .anime-details-section {
        padding: 25px 15px;
    }

    .anime-details-container {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 25px;
    }

    .anime-details-poster img {
        width: 200px;
        height: 280px;
    }

    .anime-details-info h1 {
        font-size: 29px;
    }

    .anime-episode-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .anime-player-section {
        padding: 15px;
    }
}

/* =====================================
   CINEROCK ANIME ADMIN DESIGN
===================================== */

.anime-admin-section {
    margin-top: 60px;
    padding: 30px;
    background: #11070c;
    border: 1px solid #a51f48;
    border-radius: 12px;
}

.anime-admin-section > h2 {
    color: #ff3975;
    font-size: 28px;
    margin-bottom: 25px;
}

.anime-admin-section > h3 {
    color: white;
    font-size: 21px;
    margin: 30px 0 20px;
}

/* ANIME FORM */

#animeForm {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 750px;
}

#animeForm label {
    color: #ff7399;
    font-weight: bold;
    margin-top: 8px;
}

#animeForm input,
#animeForm select,
#animeForm textarea {
    width: 100%;
    padding: 13px;
    background: #202020;
    color: white;
    border: 1px solid #444;
    border-radius: 6px;
    outline: none;
}

#animeForm input:focus,
#animeForm select:focus,
#animeForm textarea:focus {
    border-color: #ff2865;
}

#animeForm textarea {
    min-height: 120px;
    resize: vertical;
}

#animePosterPreview {
    width: 150px;
    height: 210px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #ff2865;
}

#animeForm button {
    padding: 14px;
    background: #ff2865;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 12px;
}

#animeForm button:hover {
    background: white;
    color: #ff2865;
}

/* ANIME COLLECTION ADMIN */

#adminAnimeList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.admin-anime-card {
    background: #191919;
    border: 1px solid #383838;
    border-radius: 10px;
    padding: 20px;
    min-width: 0;
}

.admin-anime-card > h3 {
    color: #ff3975;
    font-size: 21px;
    margin-bottom: 10px;
}

.admin-anime-card > p {
    color: #aaa;
    margin-bottom: 15px;
}

/* BUTTONS */

.admin-anime-card button {
    padding: 9px 13px;
    margin: 5px 5px 5px 0;
    background: #292929;
    color: white;
    border: 1px solid #555;
    border-radius: 5px;
    cursor: pointer;
}

.admin-anime-card button:hover {
    background: #ff2865;
    border-color: #ff2865;
}

/* SEASONS */

.admin-anime-card > h4 {
    color: white;
    margin-top: 22px;
    margin-bottom: 12px;
}

.admin-anime-season-box {
    background: #101010;
    border: 1px solid #444;
    border-left: 4px solid #ff2865;
    border-radius: 7px;
    padding: 15px;
    margin-top: 15px;
}

.admin-anime-season-box h4 {
    color: #ff7399;
    font-size: 17px;
    margin-bottom: 12px;
}

/* EPISODES */

.admin-anime-episode-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    margin-top: 10px;
    background: #202020;
    border-radius: 6px;
}

.admin-anime-episode-row span {
    color: #ddd;
    flex: 1;
    min-width: 130px;
}

.admin-anime-episode-row button {
    margin: 0;
}

/* MOBILE */

@media (max-width: 700px) {

    .anime-admin-section {
        padding: 18px;
    }

    #adminAnimeList {
        grid-template-columns: 1fr;
    }

    .admin-anime-card {
        padding: 15px;
    }

    .admin-anime-episode-row {
        align-items: flex-start;
    }

}

/* =====================================
   CINEROCK ANIME BACKGROUND VIDEO
===================================== */

.anime-hero {
    position: relative;
    width: 100%;
    height: 550px;
    display: flex;
    align-items: center;
    padding: 0 7%;
    overflow: hidden;
    background: #10030a;
}

#animeBackgroundVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.anime-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.90),
        rgba(0, 0, 0, 0.55),
        rgba(0, 0, 0, 0.25)
    );
}

.anime-hero-content {
    position: relative;
    z-index: 2;
}

/* MOBILE */

@media (max-width: 700px) {
    .anime-hero {
        height: 430px;
        padding: 25px;
    }
}



/* =====================================
   CINEROCK HOME PAGE PREMIUM UPGRADE
===================================== */

/* SMOOTH SCROLL */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

/* PREMIUM NAVIGATION */

header {
    min-height: 75px;
    gap: 20px;
    flex-wrap: wrap;
}

header nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

header nav a {
    margin: 0;
    padding: 10px 13px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    transition: 0.3s ease;
}

header nav a:hover,
header nav a.active {
    color: gold;
    background: rgba(212, 175, 55, 0.10);
}

/* HOME HERO */

.hero {
    min-height: 520px;
    padding: 60px 7%;
    border-bottom: 1px solid #8b7200;
}

.hero-content {
    max-width: 700px;
}

.hero h2 {
    line-height: 1.2;
    font-size: clamp(32px, 5vw, 58px);
}

/* MOVIE SECTION */

.movies {
    padding: 45px 6%;
    overflow: hidden;
}

.movies > h2 {
    font-size: 30px;
    margin: 35px 0 22px;
    border-left: 4px solid gold;
    padding-left: 14px;
}

/* SEARCH */

#movieSearch {
    width: 100%;
    max-width: 550px;
    display: block;
    margin: 20px 0;
    padding: 15px 18px;
    background: #151515;
    color: white;
    border: 1px solid #8b7200;
    border-radius: 8px;
    outline: none;
}

#movieSearch:focus {
    border-color: gold;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

/* MOVIE GRID - 5 PER ROW */

.movie-grid,
#adminMovies {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.movie-grid .movie-card,
#adminMovies .movie-card {
    min-width: 0;
    width: 100%;
}

/* MOVIE POSTERS */

.movie-grid .poster,
#adminMovies .poster {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

/* TRENDING */

.trending-section {
    padding: 35px 0;
}

.trending-banner {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        linear-gradient(110deg, #302300, #111, #211900);
}

/* FEATURED MOVIE */

.featured-movie {
    margin: 35px 0;
    min-height: 400px;
    padding: 35px;
    border-color: #a98527;
}

.featured-content img {
    max-width: 180px;
    object-fit: cover;
}

/* CATEGORY BUTTONS */

.categories,
.genre-categories {
    margin-top: 20px;
}

.category-btn,
.genre-btn {
    transition: 0.3s ease;
}

/* ANIME BANNER */

.anime-home-section {
    margin-top: 45px;
    border-top: 1px solid #292020;
    border-bottom: 1px solid #292020;
}

.anime-home-banner {
    min-height: 350px;
}

/* FOOTER */

footer {
    border-top: 1px solid #8b7200;
    margin-top: 35px;
}

/* TABLET */

@media (max-width: 1100px) {

    .movie-grid,
    #adminMovies {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .movie-grid .poster,
    #adminMovies .poster {
        height: 260px;
    }

}

/* MOBILE */

@media (max-width: 600px) {

    header {
        flex-direction: column;
        padding: 18px 12px;
        gap: 12px;
    }

    header nav {
        width: 100%;
        gap: 5px;
    }

    header nav a {
        padding: 8px;
        font-size: 12px;
    }

    .hero {
        min-height: 400px;
        padding: 25px 18px;
    }

    .movies {
        padding: 25px 15px;
    }

    .movie-grid,
    #adminMovies {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .movie-grid .poster,
    #adminMovies .poster {
        height: 220px;
    }

    .featured-movie {
        margin: 25px 0;
        padding: 22px;
    }

    .trending-banner {
        padding: 30px 20px;
    }

    .trending-banner h3 {
        font-size: 23px;
    }

}


/* ==================================
   CINEROCK - LATEST MOVIES
================================== */

.latest-movies-section {
    padding: 60px 6%;
    background: #080808;
}

.latest-movies-section h2 {
    color: #d4af37;
    margin-bottom: 15px;
}

#adminMovies {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 25px;
    margin-top: 30px;
}

/* ==================================
   CINEROCK - YEAR COLLECTIONS
================================== */

.year-collections-section {
    padding: 60px 6%;
    background: #0d0d0d;
}

.year-collections-section h2 {
    color: #d4af37;
    margin-bottom: 12px;
}

.year-collections-section > p {
    color: #aaa;
    margin-bottom: 30px;
}

.year-collection {
    margin-top: 40px;
}

.year-collection h3 {
    color: #d4af37;
    font-size: 25px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #8f742c;
}

.year-movie-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 25px;
}

.collection-empty {
    color: #aaa;
    text-align: center;
    padding: 30px 10px;
}

/* ==================================
   TABLET
================================== */

@media (max-width: 1000px) {
    #adminMovies,
    .year-movie-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

@media (max-width: 600px) {
    .latest-movies-section,
    .year-collections-section {
        padding: 40px 4%;
    }

    #adminMovies,
    .year-movie-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .year-collection h3 {
        font-size: 20px;
    }
}


/* ==================================
   CINEROCK YEAR COLLECTION BUTTONS
================================== */

.year-collection {
    margin-top: 25px;
}

.year-toggle {
    width: 100%;
    padding: 18px 22px;
    background: #151515;
    color: #d4af37;
    border: 1px solid #8f742c;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    transition: 0.3s ease;
}

.year-toggle:hover {
    background: #252015;
    border-color: #d4af37;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
}

.year-movie-grid {
    padding-top: 22px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 25px;
}

@media (max-width: 1000px) {
    .year-movie-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .year-toggle {
        font-size: 17px;
        padding: 15px;
    }

    .year-movie-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}


/* =====================================
   CINEROCK PREMIUM MOVIE DETAILS
   FINAL DESIGN POLISH
===================================== */

.premium-details-page {
    width: 92%;
    max-width: 1150px;
    margin: 45px auto;
    padding: 20px;
}

/* TOP SECTION */

.premium-movie-top {
    min-height: 430px;
    background:
        radial-gradient(circle at top right, #30250d, transparent 45%),
        linear-gradient(135deg, #191919, #080808);
    border: 1px solid rgba(245, 197, 66, 0.35);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
}

.premium-poster {
    width: 280px;
}

.premium-poster img {
    height: 400px;
    object-fit: cover;
}

.premium-movie-heading {
    flex: 1;
    min-width: 0;
}

.premium-movie-heading h1 {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.premium-quality {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #8f742c;
    border-radius: 5px;
    background: rgba(245, 197, 66, 0.08);
}

/* INFORMATION */

.premium-movie-information,
.premium-download-section,
.review-section,
.related-movies {
    background: linear-gradient(145deg, #191919, #101010);
    border: 1px solid rgba(245, 197, 66, 0.25);
    border-radius: 15px;
}

/* VIDEO PLAYER */

#moviePlayer {
    width: 100%;
    max-height: 650px;
    background: black;
    border: 1px solid #b89535;
    border-radius: 12px;
    outline: none;
}

/* ACTION BUTTONS */

.premium-action-buttons button {
    min-height: 48px;
}

.premium-action-buttons button:active,
.download-button:active {
    transform: scale(0.97);
}

/* REVIEWS */

.star-rating {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.star {
    padding: 5px 8px;
}

#reviewsList {
    display: grid;
    gap: 12px;
}

.review-item {
    background: #202020;
    border: 1px solid #393020;
    border-left: 3px solid #f5c542;
    border-radius: 8px;
}

/* RELATED MOVIES */

.related-movies-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.related-movie-card {
    min-width: 0;
}

.related-movie-card img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.related-movie-card h3 {
    overflow-wrap: anywhere;
}

/* BACK BUTTON */

.premium-details-page > .back-button {
    margin-bottom: 20px;
    transition: 0.3s ease;
}

.premium-details-page > .back-button:hover {
    background: #f5c542;
    color: black;
    transform: translateY(-2px);
}

/* TABLET */

@media (max-width: 900px) {
    .premium-movie-top {
        gap: 30px;
        padding: 25px;
    }

    .premium-poster {
        width: 240px;
    }

    .premium-poster img {
        height: 340px;
    }

    .related-movies-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* MOBILE */

@media (max-width: 700px) {
    .premium-details-page {
        width: 100%;
        padding: 12px;
        margin: 20px auto;
    }

    .premium-movie-top {
        padding: 22px 15px;
    }

    .premium-poster {
        width: 220px;
        max-width: 100%;
    }

    .premium-poster img {
        height: 300px;
    }

    .premium-movie-information,
    .premium-download-section,
    .review-section,
    .related-movies {
        padding: 20px 15px;
    }

    .premium-action-buttons button {
        width: 100%;
    }

    .related-movies-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .related-movie-card img {
        height: 190px;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .premium-poster {
        width: 190px;
    }

    .premium-poster img {
        height: 260px;
    }

    .premium-movie-heading h1 {
        font-size: 25px;
    }
}