/* src/main/resources/static/css/modal.css */

.modal {
    display: none; /* Ξεκινάει κρυφό. Το JS θα το κάνει flex */
    position: fixed;
    z-index: 1000; /* Για να είναι πάνω από άλλα στοιχεία */
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Ημιδιαφανές μαύρο φόντο */

    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px; /* Μέγιστο πλάτος */

    /* ΝΕΕΣ ΡΥΘΜΙΣΕΙΣ ΓΙΑ ΥΨΟΣ / ΤΕΤΡΑΓΩΝΟ */
    height: 450px; /* Πρότεινα ένα σταθερό ύψος για να μοιάζει τετράγωνο */
    /* Αν χρειαστεί να προσαρμοστεί στο περιεχόμενο,
       θα πρέπει να αλλάξουμε σε min-height και max-height */
    overflow-y: auto; /* Εμφανίζει scrollbar αν το περιεχόμενο ξεπερνάει το height */

    text-align: center;

    /* Initial state for animation - starts invisible and slightly above */
    opacity: 0;
    transform: translateY(-80px); /* Αύξηση της αρχικής "κύλισης" */

    /* Animation properties - transition to final state */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Πιο αργό εφέ (0.6s) */
}

/* Όταν το modal είναι ενεργό (με JS προσθέτουμε την κλάση 'is-active') */
.modal.is-active .modal-content {
    opacity: 1; /* Γίνεται ορατό */
    transform: translateY(0); /* Έρχεται στην κανονική του θέση */
}

/* Κανόνες για το κλείσιμο: όταν αφαιρείται η is-active, επιστρέφει στην αρχική θέση */
.modal.is-closing .modal-content {
    opacity: 0;
    transform: translateY(-80px); /* Και κατά το κλείσιμο να "κυλάει" προς τα πάνω */
}

/* ... Οι υπόλοιποι κανόνες CSS παραμένουν ίδιοι ... */
.close-button {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}

.close-button:hover {
    color: #000;
}

#understoodButton {
    margin-top: 200px;
    padding: 8px 16px;
    border: none;
    background-color: #007BFF;
    background-color: #2c3e50;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

/*#understoodButton:hover {
    background-color: #0056b3;
}*/

@media (max-width: 400px) {
    .modal-content {
        width: 95%;
        height: 400px; /* Προσαρμόζουμε το ύψος και για μικρές οθόνες */
        /* Μπορεί να χρειαστεί πειραματισμός εδώ */
    }
}

.terms-link {
    color: #007BFF;
    text-decoration: none;
    font-weight: bold;
}

.terms-link:hover {
    text-decoration: underline;
}

.terms-checkbox-container {
	margin-top: -10px;
    width: 85%;
    height: 25px;
    font-size: 10px;
    display: flex;
	justify-content: center;
    align-items: center;
    gap: 0px;
}

.terms-checkbox-container input[type="checkbox"] {
    margin-right: 8px;
}