/* src/main/resources/static/css/Article-Modal.css */

* {                      /* Πολύ σημαντικό: διασφαλίζει ότι padding/border δεν αυξάνουν το συνολικό width/height */
    box-sizing: border-box;
} 


/* Βασικό στυλ Article Modal Overlay - Χρησιμοποιούμε το ID για απόλυτη μοναδικότητα */
#customModal { /* Μόνο το ID για το εξωτερικό div */
    display: none; /* Κρυφό από προεπιλογή */
    position: fixed; /* Σταθερή θέση στην οθόνη */
    z-index: 10000; /* Πολύ υψηλό z-index για να είναι πάντα πάνω από όλα */
    left: 0;
    top: 0;
    width: 100%; /* Πλήρες πλάτος */
    height: 100%; /* Πλήρες ύψος */
    overflow: auto; /* Ενεργοποιεί scroll αν το περιεχόμενο είναι μεγάλο */
    background-color: rgba(0,0,0,0.6); /* Μαύρο με περισσότερη διαφάνεια φόντο */
    justify-content: center; /* Κεντράρισμα περιεχομένου οριζόντια */
    align-items: center; /* Κεντράρισμα περιεχομένου κάθετα */
    opacity: 0; /* Ξεκινάει εντελώς διάφανο */
    transition: opacity 0.4s ease-out; /* Διάρκεια μετάβασης */
}

/* Όταν το Article Modal είναι ενεργό (ορατό) */
#customModal.active { /* Χρησιμοποιούμε το ID και την κλάση active */
    display: flex; /* Το δείχνουμε ως flex container όταν είναι ενεργό */
    opacity: 1; /* Γίνεται πλήρως ορατό */
}

/* Περιεχόμενο Article Modal - Χρησιμοποιούμε μια μοναδική κλάση για το εσωτερικό div */
.article-modal-content-unique { /* ΝΕΑ ΚΛΑΣΗ ΓΙΑ ΤΟ CONTENT */
    background-color: #fefefe; /* Λευκό φόντο */
    padding: 30px;
    border: 1px solid #888;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Πιο έντονη σκιά */
    text-align: center;
    position: relative;
    max-width: 500px; /* Μέγιστο πλάτος */
    width: 100%; /* Πλάτος του modal (πιο ευέλικτο) */
    height: 300px;
    /*min-height: 150px; /* Ελάχιστο ύψος για να είναι ορατό */
    display: flex; /* Επίσης flex για να κεντράρουμε το κείμενο και το κουμπί */
    flex-direction: column;
    justify-content: center;
    align-items: center;

    transform: translateY(-80px); /* Αυξήσαμε την απόσταση */
    opacity: 0; /* Ξεκινάει διάφανο */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* Διάρκεια μετάβασης */
}

/* Όταν το Article Modal είναι ενεργό (ορατό) */
/* Εφαρμόζουμε στυλ στο .article-modal-content-unique ΜΟΝΟ όταν το #customModal έχει την active κλάση */
#customModal.active .article-modal-content-unique { /* ΣΥΝΔΥΑΣΜΟΣ ID και ΚΛΑΣΗΣ */
    transform: translateY(0); /* Έρχεται στην αρχική του θέση (κυλάει προς τα κάτω) */
    opacity: 1; /* Γίνεται πλήρως ορατό */
}

/* Κείμενο μηνύματος */
.article-modal-content-unique p { /* Χρησιμοποιούμε τη μοναδική κλάση */
    font-size: 1.1em;
    color: #333;
    margin-bottom: 25px;
    line-height: 1.5;
    word-wrap: break-word;
    text-align: center;
    max-width: 100%;
}

/* Κουμπί κλεισίματος - Χρησιμοποιούμε το ID */
#modalCloseBtn { /* Χρησιμοποιούμε το ID για το κουμπί */
    background-color: #007bff;
    background-color: #2c3e50;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    min-width: 120px;
}

#modalCloseBtn:hover { /* Χρησιμοποιούμε το ID για το hover */
    /*background-color: #0056b3;*/
}