#open_preferences_center {
    position: fixed;
    bottom: 0.6%;
    right: 0.1%;
    background-color: rgba(0, 0, 255, 0.3); /* Transparent blue background */
    border: 2px solid cyan; /* Cyan border */
    border-radius: 50%; /* Make it a circle */
    width: 30px; /* Adjust the size of the circle */
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Icon color */
    font-size: 16px; /* Adjust icon size */
    z-index: 1000; /* Ensure it's on top of other elements */
    cursor: pointer;
}

#open_preferences_center i {
    pointer-events: none; /* Ensure only the link is clickable, not the icon itself */
}

#open_preferences_center:hover {
    background-color: rgba(0, 0, 255, 0.5); /* Slightly darker on hover */
    border-color: #0E94BD; /* Match hover color to your button hover color */
}

.TOP_BODY {
    height: 70vh;
    overflow: hidden;
    position: relative;
    border-bottom-right-radius: 1.2rem;
    border-bottom-left-radius: 1.2rem;
    /* Position for the neon effect */
    border-bottom: 4px solid transparent; /* Hidden border to set the size */
}

.TOP_BODY::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    border-bottom-right-radius: 1.2rem;
    border-bottom-left-radius: 1.2rem;
    background: linear-gradient(90deg, rgba(0, 0, 255, 0) 0%, rgba(34, 34, 34, 0.767) 50%, rgba(0, 0, 255, 0) 100%);
    background-size: 200%; 
    animation: neonMove 20s ease-in-out infinite; 
}

@keyframes neonMove {
    0% {
        background-position: -100%;
    }
    50% {
        background-position: 100%;
    }
    100% {
        background-position: -100%;
    }
}


.backdrop-container {
    display: flex;
    overflow: hidden; /* Hide overflowing images */
    width: 100%; /* Full width */
    height: 100%; /* Full height of the parent */
    position: relative; /* Position relative for absolute children */
}

.backdrop-image {
    width: 100%; /* Full width */
    height: 100%; /* Full height to fit the container */
    position: absolute; /* Position images absolutely within the container */
    top: 0; /* Align images to the top */
    left: 0; /* Align images to the left */
    opacity: 0; /* Start fully transparent */
    transition: opacity 1s ease-in-out; /* Transition for fading */
    object-fit: cover; /* Maintain aspect ratio while covering the entire area */
    z-index: 0; /* Set z-index to keep the image behind the overlay */
    border-bottom-right-radius: 1.2rem;
    border-bottom-left-radius: 1.2rem;
}

.backdrop-image::before {
    content: ''; /* Required for pseudo-elements */
    position: absolute; /* Position it absolutely */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.884) 0%, rgba(0, 0, 0, 0.2) 100%); /* Gradient that fades from black (88.4% opacity) to transparent */
    z-index: 1; /* Ensure this is above the image */
    transition: opacity 1s ease-in-out; /* Smooth transition for opacity */
}

.backdrop-image.active {
    opacity: 1; /* Fully opaque for active image */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1; 
    border-bottom-right-radius: 1.2rem;
    border-bottom-left-radius: 1.2rem;
    pointer-events: none;
}
.backdrop-text {
    position: absolute; /* Position text absolutely within the container */
    bottom: 20px; /* Position from the bottom */
    left: 20px; /* Position from the left */
    color: white; /* Text color */
    font-size: 24px; /* Font size */
    font-weight: bold; /* Font weight */
    z-index: 2; /* Ensure the text is on top of the overlay */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Optional: Add a shadow for better readability */
}
.genre-ids{
    margin-top: 1rem;
    gap: 1rem;
    display: flex; /* Makes the genres align horizontally */
    flex-wrap: wrap; /* Allows the genres to wrap onto multiple lines if needed */
}
.genre-item {
    padding: 5px 10px; /* Optional: Add padding around each genre */
    background-color: #31313194; /* Optional: Add a background for better visibility */
    border-radius: 5px; /* Optional: Rounded corners for each genre item */
    font-size: 16px; /* Adjust the font size */
    color: #ffffff; /* Text color */
}
@media (max-width: 568px){
    .genre-item {
        padding: 3px 8px; /* Optional: Add padding around each genre */
        background-color: #31313194; /* Optional: Add a background for better visibility */
        border-radius: 5px; /* Optional: Rounded corners for each genre item */
        font-size: 13px; /* Adjust the font size */
        color: #ffffff; /* Text color */
    }
    .description_text {
        overflow: hidden;
        text-overflow: ellipsis; /* Shows ellipsis */
    }
}

.release-date {
    color: #fff; /* Change to your desired color */
    font-size: 18px; /* Adjust the font size as needed */
    margin-top: 15px;
    margin-bottom: 15px; /* Add some space below the release date */
}
.release-date .dated{
    color: #6b6b6b;
    font-size: 20px;
}

.vote_rate{
    font-size: 18px;
}
.rating_data{
    color: rgb(184, 150, 0);
}
.rating{
    font-size: 14px;
}

.filled-star {
    color: gold; /* Color for filled stars */
}

.half-star {
    color: gold; /* Color for half stars */
}

.empty-star {
    color: lightgray; /* Color for empty stars */
}

.description{
    font-size: 16px;
    background-color: #0000008f;
    margin-top: .6rem;
    margin-right: .2rem;
}
@media (max-width: 568px){
    .description{
        font-size: 12px;
        background-color: #0000008f;
        margin-top: .6rem;
        margin-right: .2rem;
    }
}
.WatchButton {
    background-color: #0E87AC;
    padding: 10px 20px;
    border-radius: 1.5rem;
    /* Additional styling */
    color: white; /* Text color */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor on hover */
    font-size: 16px; /* Font size */
    margin-top: 2rem;
    bottom: 0;
    right: 0;
    transition: all 0.5s ease;
    display: flex;
    gap: 0.2rem;
    align-items: center;
}

.WatchButton:hover{
    background-color: #0e60bd;
    scale: 1.06;
}

.select_genres {
    padding: 5px; /* Add padding for select box */
    border: 2px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Rounded corners */
    font-size: 17px; /* Font size */
    margin-right: 10px; /* Space between select and input */
    cursor: pointer; /* Change cursor on hover */
    transition: border-color 0.3s ease; /* Transition for border color */
    background-color: #0E87AC; /* Background color */
    color: #000000; /* Text color */
}

/* General container styles */
.Top_Movies_List {
    margin-top: 1rem;
    margin-left: 0.7rem;
    margin-right: 0.7rem;
    border-bottom: 2px solid rgb(0, 132, 255);
    padding: 13px 0;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

/* Title and more movies link styles */
.Top_Movies_List .Title {
    color: white;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    align-content: center;
}

.Top_Movies_List .Title .more_movies {
    text-decoration: none;
    color: #0E87AC;
    transition: all 0.5s ease;
}

.Top_Movies_List .Title .more_movies:hover {
    color: #016685;
    scale: 0.95;
}

/* Container for movie cards with flexbox layout for responsive wrapping */
.Movies_Cards {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.6rem;
    justify-content: flex-start;
}

/* Individual movie card styling */
.Movie_Card_Info {
    width: 160px; /* Adjust card width */
    height: 250px; /* Adjust card height */
    background-color: #22222200;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.1s ease-in-out;
}

.Movie_Card_Info:hover {
    scale: 1.06;
    box-shadow: 0px 4px 20px rgba(0, 102, 255, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Container for the movie image */
.Image_Container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Styling for the movie image */
.Movie_Dsp_Image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    z-index: 0;
    cursor: pointer;
}

/* Responsive Styles for mobile devices */
@media (max-width: 768px) {
    .Top_Movies_List .Title {
        flex-direction: column;
        align-items: flex-start;
    }

    .select_genres {
        width: 100%;
        margin: 0;
        margin-bottom: 10px;
    }
}

/* Specific media query for devices with max-width of 367px */
@media (max-width: 367px) {
    .Movies_Cards {
        gap: 0.8rem;
        justify-content: center; /* Center the cards */
    }

    .Movie_Card_Info {
        width: 48%; /* Adjust width for two cards per row */
        height: 200px;
    }

    .Movie_Card_Info:hover {
        scale: 1.03;
    }
}

/* Specific media query for devices with max-width of 341px */
@media (max-width: 341px) {
    .Movies_Cards {
        justify-content: center; /* Center the cards */
        gap: 0.5rem; /* Reduce gap for smaller screens */
    }

    .Movie_Card_Info {
        width: 80%; /* Adjust width to take up more space on smaller screens */
        height: 200px;
    }

    .Movie_Card_Info:hover {
        scale: 1.03;
    }
}


/* Container for the movie title */
.Title_Container {
    width: 100%;
    height: 30%; /* Set the remaining 30% of card height for the title */
    text-align: center;
    color: white;
    padding: 0.5rem 0;
    font-size: 1rem; /* Adjust font size */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #222; /* Optional: Background color for the title area */
    border-radius: 0 0 10px 10px; /* Optional: Match rounded corners for the bottom */
    z-index: 1;
}

/* Hover effect specifically for the title container */
.Image_Container:hover .Title_Container {
    scale: 1.06; /* Scales the title container on hover */
    box-shadow: 0px 4px 20px rgba(0, 0, 255, 0.6); /* Adds blue shadow to the title */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for title scaling */
}

.description_title{
    color: white;
}
.description_rating{
    color: white;
}

.description_of_the_movie {
    color: white;
    margin-top: 1rem;
    display: block; /* Change this to block for max length truncation */
    overflow: hidden; /* Ensures text gets hidden after overflow */
    text-overflow: ellipsis; /* Adds the "..." for overflow text */
    white-space: nowrap; /* Prevents text wrapping */
    max-width: 100%; /* Ensure it does not overflow the container */
}
.Movie_description_card{
    background-color: #0e60bd;
    max-width: 300px;

    max-height: 150px;
}




/* MOVIE INFOS CARDS AFTER CLICK */

/* Overlay Container */
.movie_info_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 9999;
    visibility: hidden; /* Initially hidden */
    opacity: 0; /* For smooth transition */
    transition: all 0.3s ease;
}
.video_overlay {
    position: absolute; /* Position it absolutely within the relative container */
    top: 0; /* Cover the top */
    left: 0; /* Cover the left */
    right: 0; /* Cover the right */
    bottom: 0; /* Cover the bottom */
    background-color: rgba(0, 0, 0, 0.404); /* Semi-transparent black overlay */
    z-index: 10; /* Make sure it's on top of the iframe */
    border-radius: 1.2rem;
}

.movie_info_overlay.show {
    visibility: visible;
    opacity: 1;
}

/* Close Button */
.close_overlay {
    position:fixed;
    top: 0;
    right: 10%;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: white;
    font-size: 50px;
    transition: all 0.1s ease-in-out;
    z-index: 1000;
}
.close_overlay:hover{
    scale: 1.1;
    color: #0E94BD;
}

/* Movie Trailer Section */
.movie_trailer {
    width: 100%;
    height: 40vh; /* 40% of viewport height */
    background-color: rgba(0, 0, 0, 0); /* Fallback background */
    margin-bottom: 20px;
}

/* Movie Details Card */
.movie_details_card {
    background-color: #111111; /* Dark background for the card */
    padding: 20px;
    border-radius: 10px;
    width: 80%; /* Set the width of the card */
    max-height: 100%; /* Limit the height to 50% of the viewport */
    overflow-y: auto; /* Make the content scrollable */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Card shadow */
    color: white;
}

/* Movie Details */
.movie_details {
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack elements vertically */
    text-align: left;
}

.movie_controls {
    display: flex; /* Use flexbox for button alignment */
    justify-content: flex-end; /* Aligns button to the right */
    margin-top: auto; /* Pushes button to the bottom of the section */
}
@media (max-width: 568px) {
    .movie_details_card {
        background-color: #111111;
        padding: 20px;
        border-radius: 10px;
        width: 80%;
        max-height: 80vh; /* Limit the height to 80% of the viewport */
        overflow-y: auto; /* Make content scrollable when it overflows */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Ensure the button stays at the bottom */
    }
    
    .movie_details {
        display: flex;
        flex-direction: column;
        text-align: left;
    }
    
    .movie_controls {
        display: flex;
        justify-content: flex-end;
        margin-top: auto; /* Ensures the button stays at the bottom */
    }
}
.play_button {
    background-color: #007BFF; /* Blue color */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    margin-right: 10px;
    transition: all 0.5s ease;
    margin-bottom: 30px;
}
.play_button:hover {
    background-color: #0e60bd;
    scale: 1.06;
}

.action_button {
    background-color: grey;
    color: white;
    padding: 10px 15px;
    margin: 0 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.movie_details h1 {
    margin-bottom: 10px;
    color: #007BFF; /* Blue title */
}

.movie_details p {
    margin: 10px 0;
}

.movieDate{
    color: #6b6b6b;
    font-size: 20px;
}

.movieRuntime{
    color: rgb(163, 163, 163);
}

.ser_ep{
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.Seasons_count{
    color: rgb(0, 134, 175);
}
.Episodes_count{
    color: rgb(0, 134, 175);
}


.List_no_show {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically, if needed */
    margin-top: 1rem;
    color: #0e77bd;
    height: 20vh; /* Optional: adjust based on your layout */
}

.notification-card {
    position: relative;
    width: auto; /* Or set a fixed width */
    max-width: 400px; /* Limit the width of the notification */
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    margin: 0 0 10px; /* Add some margin to the bottom */
    font-family: Arial, sans-serif; /* Change to your preferred font */
  }




.loading_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it appears above other elements */
}
.loading_svg {
	width: 80px; /* Size of the loading indicator */
    height: 80px;
}