/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Φόντο σε Απαλό Γκρι */
body {
    background: #D6D6D6; /* Απαλό Γκρι */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Κεντρικό container που περιλαμβάνει τον τίτλο και το login */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: relative;
    /*animation: bounce 1.5s infinite alternate ease-in-out;*/
}

/* Τίτλος "Ποντιόμετρο" */
.game-title {
    font-size: 36px;
    font-weight: bold;
    color: #FFD700; /* Χρυσό */
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    font-family: 'Comic Sans MS', 'Arial', sans-serif;
    text-align: center;
    letter-spacing: 2px;
    position: absolute;
    top: -105px; /* Μετακινεί τον τίτλο πιο πάνω */
    left: 50%;
    transform: translate(-50%, 0); /* Σωστή κεντραρισμένη στοίχιση */
    z-index: 10;
    animation: bounce 1.5s infinite alternate ease-in-out;
}

.terms-row label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    white-space: nowrap; /* Αποτρέπει το σπάσιμο σε δεύτερη γραμμή */
    margin-top: 12px;
}
  
 .terms-row a {
    color: #1a73e8;
    text-decoration: none;
 }
  
.terms-row a:hover {
    text-decoration: underline;
}
  
input[type="checkbox"] {
    width: auto;
    margin: 0;
}

#registerButton {
    background-color: #ffd600; /* Κανονικό κίτρινο */
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
#registerButton:disabled {
    background-color: #ccc; /* Γκρι-κίτρινο (απενεργοποιημένο) */
    cursor: not-allowed;
}

@keyframes bounce {
    0% {
        transform: translate(-50%, 0);
    }
    100% {
        transform: translate(-50%, -10px);
    }
}

/* Κεντρικό container για τη φόρμα */
.login-container {
    width: 100%; /* Να γεμίζει το panel-box */
    text-align: center;
}

.login-container h2 {
    font-size: 24px;
    font-weight: bold;
    color: #1A237E; /* Σκούρο Μπλε */
    margin-top: -10px; /* Ανεβάζει το "Σύνδεση" */
    margin-bottom: 35px; /* Κρατάει απόσταση από το username */
    text-align: center;
}

/* Ετικέτες */
label {
    display: block;
    text-align: left;
    font-weight: bold;
    color: #1A237E; /* Σκούρο Μπλε */
    font-size: 14px;
    margin-bottom: 5px;
}

/* Στυλ για τα πεδία εισαγωγής */
input {
    width: 100%;
    padding: 10px;
    border: none;
    border-bottom: 2px solid #1A237E;
    background: transparent;
    outline: none;
    font-size: 16px;
    color: #1A237E;
}

/* Όταν το input είναι ενεργό */
input:focus {
    border-bottom: 2px solid #FFD700; /* Χρυσό */
}

/* Κουμπί Σύνδεσης */
button {
    margin-top: 20px;
    padding: 10px;
    width: 100%;
    background: #FFD700; /* Χρυσό */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    color: #1A237E; /* Σκούρο Μπλε */
    transition: 0.3s;
    font-size: 16px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.login-buttons-container {
    margin-top: 20px; /* Αυξάνει την απόσταση από το κουμπί σύνδεσης */
    display: flex;
    flex-direction: column;
    align-items: center;
    
}


/* Hover Effect για το κουμπί */
button:hover {
    background: #E6C200; /* Λίγο πιο σκούρο Χρυσό */
}

/* Μήνυμα Σφάλματος */
.error {
    color: #D32F2F; /* Κόκκινο */
    font-weight: bold;
    margin-top: 10px;
}

/* Κουμπί Διαχειριστή */
#adminButton {
    margin-top: 10px;
    padding: 5px 10px; /* Μικρότερο padding */
    font-size: 12px; /* Μικρότερη γραμματοσειρά */
    background: #1A237E; /* Σκούρο Μπλε */
    color: white; /* Λευκό κείμενο */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    width: auto; /* Προσαρμόζεται στο κείμενο */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Hover Effect για το κουμπί διαχειριστή */
#adminButton:hover {
    background: #0F1759; /* Πιο σκούρο μπλε */
}

.admin-container {
    text-align: center;
    width: 100%;
}

.admin-container h2 {
    font-size: 24px;
    font-weight: bold;
    color: #1A237E; /* Σκούρο Μπλε */
    margin-bottom: 50px; /* Αφήνει λίγο χώρο πριν από το πρώτο input */
    text-align: center;
}


/* Στυλ για τα κουμπιά του admin panel */
.admin-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.admin-buttons button {
    background: #1A237E; /* Σκούρο Μπλε */
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 25px; /* Στρογγυλεμένες άκρες */
    cursor: pointer;
    width: 200px; /* Σταθερό πλάτος */
    text-align: center;
    transition: 0.3s;
}

.admin-buttons button:hover {
    background: #0F1759; /* Πιο σκούρο μπλε στο hover */
}

/* Κουμπί αποσύνδεσης */
.logout-btn {
    margin-top: 20px;
    background: #D32F2F; /* Κόκκινο */
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    width: 200px;
    text-align: center;
    transition: 0.3s;
}

.logout-btn:hover {
    background: #B71C1C; /* Πιο σκούρο κόκκινο στο hover */
}

/* Κεντρικό container για το κουμπί αποσύνδεσης */
.logout-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* Στυλ κουμπιών Διαχειριστής & Εγγραφή */
.button-10 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 12px; /* Μικρότερο padding */
    font-size: 14px; /* Μικρότερη γραμματοσειρά */
    font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    border-radius: 6px; /* Ελαφρώς μικρότερες γωνίες */
    border: none;
    color: #fff;
    width: 100px; /* Μικρότερο πλάτος */
    text-align: center;
    transition: 0.3s;
    cursor: pointer;
    text-decoration: none;
    margin: 8px auto; /* Κεντράρει τα κουμπιά */
    background: linear-gradient(180deg, #1A237E 0%, #0F1759 100%); /* Σκούρο μπλε */
    box-shadow: 0px 0.5px 1.5px rgba(26, 35, 126, 0.25),
                inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
}

.button-10:hover {
    background: linear-gradient(180deg, #3B4CCA 0%, #2C3AAE 100%);
}

/* Διαχειριστής & Εγγραφή έχουν το ίδιο μπλε */
.admin-btn {
    background: linear-gradient(180deg, #1A237E 0%, #0F1759 100%);
}

.admin-btn:hover {
    background: linear-gradient(180deg, #3B4CCA 0%, #2C3AAE 100%);
}

.register-btn {
    background: linear-gradient(180deg, #1A237E 0%, #0F1759 100%);
}

.register-btn:hover {
    background: linear-gradient(180deg, #3B4CCA 0%, #2C3AAE 100%);
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Απόσταση μεταξύ των κουμπιών */
    margin-top: 15px;
}

.panel-box {
    position: relative; /* Προστέθηκε */
    background: #fff;
    border-radius: 6px;
    padding: 3em 2em 2em 2em;
    margin: 6em auto 2em auto; /* Αφήνει χώρο πάνω για τον τίτλο */
    width: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}

.back-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    width: 100%;
}

.back-to-home {
    width: 100%;
    max-width: 150px;
    padding: 8px 16px;
}

.register-container {
    width: 100%;
    text-align: center;
}

.register-container h2 {
    font-size: 24px;
    font-weight: bold;
    color: #1A237E; /* Σκούρο Μπλε */
    margin-top: -10px;
    margin-bottom: 35px;
    text-align: center;
}

/* Στυλ για τα input πεδία */
.register-container input {
    width: 100%;
    padding: 10px;
    border: none;
    border-bottom: 2px solid #1A237E;
    background: transparent;
    outline: none;
    font-size: 16px;
    color: #1A237E;
}

.register-container input:focus {
    border-bottom: 2px solid #FFD700; /* Χρυσό */
}

/* Στυλ για τα κουμπιά */
.register-container button {
    margin-top: 20px;
    padding: 10px;
    width: 100%;
    background: #FFD700; /* Χρυσό */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    color: #1A237E;
    transition: 0.3s;
    font-size: 16px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.register-container button:hover {
    background: #E6C200;
}

.button-return {
    background: #1A237E; /* Σκούρο μπλε */
    color: white;
    font-size: 12px; /* Ακόμα μικρότερη γραμματοσειρά */
    padding: 4px 10px; /* Λιγότερο padding για μικρότερο μέγεθος */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
    text-align: center;
    width: 140px; /* Μειωμένο πλάτος */
    height: 35px; /* Μειωμένο ύψος */
    line-height: 30px;
    display: inline-block;
}

.button-return:hover {
    background: #3B4CCA; /* Λίγο πιο ανοιχτό μπλε στο hover */
}

.question-title {
    font-size: 20px;
    font-weight: bold;
    color: #1A237E;
    text-align: center;
    word-wrap: break-word; /* Σπάει τις λέξεις αν χρειάζεται */
    white-space: normal; /* Επιτρέπει το wrapping */
    max-width: 90%; /* Περιορισμός για καλύτερη εμφάνιση */
}

.answer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Απόσταση μεταξύ απαντήσεων */
}

.calendar-container {
    overflow: hidden; /* Εμποδίζει τις ημερομηνίες να βγαίνουν εκτός */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.calendar {
    max-width: 100%;
    width: 100%;
    border-radius: 10px;
    background-color: white;
}

.calendar__dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px; /* Ελαχιστοποιεί τα κενά για να χωρούν σωστά */
    padding: 10px;
    position: relative;
}

.calendar__date {
    width: 100%;
    height: 40px; /* Ορισμένο ύψος για όλες τις ημερομηνίες */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.calendar__date--highlight {
    background-color: orange;
    color: white;
    font-weight: bold;
}