/* Στυλ για το κοντέινερ της φόρμας  styles2.css*/
.container {
    max-width: 1200px; /* Μεγαλύτερο πλάτος κοντέινερ */
    width: 100%;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Στυλ για τον πίνακα ταινιών */
/* Γονέας κοντέινερ για κεντράρισμα του #moviesList */
#moviesContainer {
    display: flex;
    justify-content: center; /* Κεντράρει το #moviesList οριζόντια */
    align-items: center;     /* Κεντράρει το #moviesList κατακόρυφα */
    min-height: 100vh;       /* Διασφαλίζει ότι το κοντέινερ καλύπτει ολόκληρο το ύψος της οθόνης */
    padding: 20px;          /* Προαιρετικό padding γύρω από το περιεχόμενο */
}

/* Υποθέτουμε ότι το #moviesList είναι το παιδί του #moviesContainer */
#moviesList {
    display: flex;
    flex-wrap: wrap; /* Ενεργοποιεί την αυτόματη αλλαγή γραμμής */
    gap: 20px; /* Απόσταση μεταξύ των ταινιών */
    margin-left: 100px; /* Ρυθμίζει το αριστερό περιθώριο για μετακίνηση προς τα δεξιά */
}

/* Στυλ για κάθε ταινία */
.movie-row {
    width: 150px; /* Σταθερό πλάτος για κάθε ταινία */
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s; /* Προσθήκη εφέ μετασχηματισμού και σκιάς */
}

.movie-row:hover {
    transform: scale(1.05); /* Ελαφριά μεγέθυνση όταν τοποθετείται το ποντίκι */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Δυνατότερη σκιά όταν τοποθετείται το ποντίκι */
}

/* Στυλ για την εικόνα της ταινίας */
.movie-row img {
    width: 100%; /* Η εικόνα καταλαμβάνει όλο το πλάτος του στοιχείου */
    height: 225px; /* Σταθερό ύψος για όλες τις εικόνες */
    object-fit: cover; /* Κόψιμο της εικόνας για να καλύψει το πλαίσιο */
}

/* Στυλ για το κείμενο της ταινίας */
.movie-info {
    padding: 10px;
}

/* Στυλ για τον τίτλο της ταινίας */
.movie-info h3 {
    font-size: 1em;
    margin: 0 0 5px 0;
    color: #333;
}

/* Στυλ για την περιγραφή της ταινίας */
.movie-info p {
    font-size: 0.85em;
    color: #555;
}

/* Στυλ για τα κουμπιά αγαπημένων */
.favorite-btn {
    background-color: #f39c12;
    border: none;
    color: white;
    padding: 8px 16px; /* Μεγαλύτερη εσωτερική απόσταση */
    cursor: pointer;
    border-radius: 5px;
    font-size: 0.85em;
    transition: background-color 0.3s, transform 0.2s; /* Εφέ μετάβασης */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Σκιά για το κουμπί */
}

.favorite-btn:hover {
    background-color: #e67e22; /* Σκηνικό χρώμα όταν τοποθετείται το ποντίκι */
}

.favorite-btn:active {
    transform: scale(0.95); /* Ελαφριά συρρίκνωση όταν το κουμπί πατιέται */
}

.favorite-btn.remove {
    background-color: #e74c3c;
}

.favorite-btn.remove:hover {
    background-color: #c0392b; /* Σκηνικό χρώμα όταν τοποθετείται το ποντίκι */
}

/* Στυλ για τη σελίδα */
.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pagination button {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #c0392b;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s; /* Εφέ μετάβασης */
}

.pagination button:hover {
    background-color: #c0392b; /* Σκηνικό χρώμα όταν τοποθετείται το ποντίκι */
}

.pagination button:active {
    transform: scale(0.95); /* Ελαφριά συρρίκνωση όταν το κουμπί πατιέται */
}

.pagination #pageNumber {
    font-size: 16px;
    color: #333;
}

/* Στυλ για την μπάρα με πολλαπλά κουμπιά */
.button-bar {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

/* Στυλ για το κουμπί αγαπημένων */
#favoritesButton, #settingsButton, #helpButton {
    background-color: #e74c3c;
    border: none;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s, transform 0.2s; /* Εφέ μετάβασης */
}

#favoritesButton:hover, #settingsButton:hover, #helpButton:hover {
    background-color: #c0392b; /* Σκηνικό χρώμα όταν τοποθετείται το ποντίκι */
}

#favoritesButton:active, #settingsButton:active, #helpButton:active {
    transform: scale(0.95); /* Ελαφριά συρρίκνωση όταν το κουμπί πατιέται */
}

#favoritesButton img {
    width: 24px; /* Μέγεθος εικόνας καρδιάς */
    height: 24px;
}

/* Στυλ για το κοντέινερ των αγαπημένων */
#favoritesList {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Στυλ για τα αγαπημένα στοιχεία */
.favorite {
    width: 150px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s; /* Εφέ μετασχηματισμού και σκιάς */
}

.favorite:hover {
    transform: scale(1.05); /* Ελαφριά μεγέθυνση όταν τοποθετείται το ποντίκι */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Δυνατότερη σκιά όταν τοποθετείται το ποντίκι */
}

.favorite img {
    width: 100%;
    height: 225px;
    object-fit: cover;
}

.favorite-info {
    padding: 10px;
}

.favorite-info h3 {
    font-size: 1em;
    margin: 0 0 5px 0;
    color: #333;
}

.favorite-info p {
    font-size: 0.85em;
    color: #555;
}

#movieDetails {
    display: none;
    position: fixed;
    top: 10%; /* Τοποθέτηση πιο κοντά στο κέντρο της οθόνης */
    left: 50%;
    transform: translateX(-50%);
    width: 70%; /* Διατήρηση του πλάτους */
    max-width: 500px; /* Διατήρηση του μέγιστου πλάτους */
    background-color: white;
    border-radius: 15px; /* Στρογγυλεμένες γωνίες */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* Ισχυρότερο shadow για εντυπωσιακή εμφάνιση */
    z-index: 1000;
    padding: 20px; /* Ευρύτερο padding */
    overflow-y: auto;
    max-height: 85vh; /* Αυξημένο μέγιστο ύψος για καλύτερη προβολή */
    box-sizing: border-box; /* Συμπερίληψη padding και border στο συνολικό μέγεθος */
}

#movieDetailsContent img {
    max-width: 100%;
    height: auto;
    border-radius: 12px; /* Στρογγυλεμένες γωνίες για εικόνες */
}

#movieDetailsContent iframe {
    width: 420px; /* Μείωσε το πλάτος */
    height: 315px; /* Μείωσε το ύψος */
    border-radius: 8px; /* Στρογγυλεμένες γωνίες για καλύτερη εμφάνιση */
    margin-top: 10px; /* Προσθέτει λίγο διάστημα πάνω από το iframe */
}


#closeDetails {
    position: absolute;
    top: 15px; /* Τοποθέτηση πιο ψηλά για καλύτερη ορατότητα */
    right: 15px;
    background: none;
    border: none;
    font-size: 1.6rem; /* Αυξημένο μέγεθος για καλύτερη ευχρηστία */
    cursor: pointer;
    color: #333; /* Καλό χρώμα αντίθεσης για το κείμενο */
}

@media (max-width: 600px) {
    #movieDetails {
        width: 95%; /* Σμίκρυνση πλάτους σε μικρότερες οθόνες */
        top: 10%; /* Λιγότερο κεντρική τοποθέτηση σε μικρότερες οθόνες */
    }
}

#movieDetailsContent ul {
    list-style-type: none; /* Αφαίρεση κουκκίδων από τη λίστα */
    padding: 0; /* Αφαίρεση padding */
}

#movieDetailsContent li {
    margin-bottom: 5px; /* Απόσταση μεταξύ των ηθοποιών */
}

#movieDetailsContent strong {
    font-weight: bold; /* Έντονη γραφή για τα ονόματα των ηθοποιών */
}





#menuButton {
    background-color: #333;
    color: white;
    border: none;
    padding: 8px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 3px;
    background-color: #c0392b;
}

.dropdown-menu {
    display: none; /* Κρύβει το μενού κατά την αρχική φόρτωση */
    position: absolute;
    top: 40px; /* Τοποθετεί το μενού κάτω από το κουμπί */
    left: 0;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Για να βεβαιωθείς ότι το μενού είναι πάνω από άλλα στοιχεία */
    background-color: #c0392b;
}

.dropdown-menu a {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
    background-color: #c0392b;
}

.dropdown-menu a:hover {
    background-color: #f0f0f0;
    background-color: #c0392b;
}

.rating {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

.star {
    font-size: 24px;
    cursor: pointer;
    color: #ccc; /* Αρχικό χρώμα */
}

.star.selected {
    color: #ff0; /* Χρώμα όταν είναι επιλεγμένο */
}


.logout-button {
    position: fixed;
    top: 10px; /* Απόσταση από την κορυφή */
    right: 40px; /* Απόσταση από τη δεξιά άκρη */
    background-color: #c0392b; /* Πιο φωτεινό μπλε */
    border: none;
    border-radius: 50%; /* Στρογγυλές γωνίες */
    padding: 4px; /* Επαρκές padding */
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    width: 30px; /* Μεγαλύτερο πλάτος */
    height: 30px; /* Μεγαλύτερο ύψος */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ελαφριά σκιά για καλύτερη ορατότητα */
    z-index: 1000; /* Να τοποθετηθεί πάνω από άλλα στοιχεία */
}

.logout-button:hover {
    background-color: #0056b3; /* Σκοτεινότερο μπλε για hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Δυνατότερη σκιά όταν τοποθετείται το ποντίκι */
}

.logout-button img {
    width: 24px; /* Μεγαλύτερο μέγεθος εικόνας */
    height: 24px;
}


/* Στυλ για τα κουμπιά της button-bar */
.button-bar button {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #e74c3c;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 5px; /* Χώρος μεταξύ των κουμπιών */
}

.button-bar button:hover {
    background-color: #c0392b;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Δυνατότερη σκιά όταν τοποθετείται το ποντίκι */
}


/* Στυλ για το κοντέινερ των σειρών */
#seriesList {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-left: 100px; /* Ρυθμίζει το αριστερό περιθώριο για μετακίνηση προς τα δεξιά */
}

/* Στυλ για κάθε σειρά */
.series-row {
    width: 150px; /* Σταθερό πλάτος για κάθε σειρά */
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s; /* Προσθήκη εφέ μετασχηματισμού και σκιάς */
}

.series-row:hover {
    transform: scale(1.05); /* Ελαφριά μεγέθυνση όταν τοποθετείται το ποντίκι */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Δυνατότερη σκιά όταν τοποθετείται το ποντίκι */
}

/* Στυλ για την εικόνα της σειράς */
.series-row img {
    width: 100%; /* Η εικόνα καταλαμβάνει όλο το πλάτος του στοιχείου */
    height: 225px; /* Σταθερό ύψος για όλες τις εικόνες */
    object-fit: cover; /* Κόψιμο της εικόνας για να καλύψει το πλαίσιο */
}

/* Στυλ για το κείμενο της σειράς */
.series-info {
    padding: 10px;
}

/* Στυλ για τον τίτλο της σειράς */
.series-info h3 {
    font-size: 1em;
    margin: 0 0 5px 0;
    color: #333;
}

 /* Στυλ για την περιγραφή της σειράς */
.series-info p {
    font-size: 0.85em;
    color: #555;
}

 .season-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.dropdown-content li {
    padding: 8px 16px;
    text-align: left;
}

.dropdown-content li:hover {
    background-color: #f1f1f1;
}  



/* .seasons-container {
    padding: 20px;
    background-color: #f9f9f9;
}

.season-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    padding: 15px;
}

.season-item h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.episode-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.episode-item {
    background: #f1f1f1;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.episode-item:nth-child(odd) {
    background: #e9ecef;
}

.episode-item h4 {
    font-size: 1.1rem;
    margin: 0;
}

.episode-item p {
    font-size: 0.9rem;
    color: #666;
} */


@media (max-width: 768px) {
    .container {
        padding: 10px; /* Μικρότερο padding */
    }

    #moviesList, #seriesList {
        margin-left: 0; /* Αφαίρεση αριστερού περιθωρίου */
        justify-content: center; /* Κεντράρισμα στοιχείων */
    }

    .movie-row, .series-row {
        width: 45%; /* Δύο ταινίες ανά γραμμή */
    }
}

@media (max-width: 480px) {
    .movie-row, .series-row {
        width: 90%; /* Μία ταινία ανά γραμμή σε πολύ μικρές οθόνες */
    }

    .button-bar {
        flex-direction: column;
        gap: 10px;
    }

    .pagination {
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 768px) {
    /* Βελτίωση στο hamburger menu */
    .menu-icon {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 40px;
        height: 40px;
    }

    /* Καλύτερη στοίχιση του λογοτύπου */
    .logo {
        position: absolute;
        top: 10px;
        right: 10px;
        max-width: 50px;
        height: auto;
    }

    /* Προσαρμογή των κουμπιών */
    .button-bar button {
        width: 80%;
        margin: 5px auto;
        font-size: 16px;
        padding: 8px;
    }

    /* Στυλ για την αναζήτηση */
    #searchBar {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
    }

    #searchBar input {
        width: 70%;
        padding: 8px;
        font-size: 14px;
    }

    #searchBar button {
        padding: 8px;
        font-size: 14px;
    }

    /* Βελτίωση του τμήματος ταινιών */
    .movie-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .movie-row img {
        max-width: 90%;
        border-radius: 10px;
    }
}


@media (max-width: 600px) {
    #movieDetails {
        width: 90%;
        max-width: 400px;
    }
    
    #movieDetailsContent iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9; /* Καλύτερη προσαρμογή video */
    }
}