.message-box {
    /* Fixed positioning */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* Background and opacity  */
    background-color: rgba(75, 85, 99, 0.75); /* Dark gray with 75% opacity */

    /* Layout*/
    display: none;
    align-items: center;
    justify-content: center;

    /* Stacking and visibility */
    z-index: 50;

    /* Transitions */
    transition-property: opacity;
    transition-duration: 300ms;
}

.hidden {
    /* CRITICAL FIX: The JS adds/removes this class to hide the modal */
    display: none !important; 
}

.not-hidden{
    display: flex;
}

.modal-content {
    background-color: white;
    padding: 1.5rem; /* Equivalent to 24px */
    border-radius: 0.75rem; /* Equivalent to 12px */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); 
    max-width: 24rem; 
    width: 100%; 
}

.message-title {
    font-size: 1.25rem; 
    font-weight: 700;
    margin-bottom: 0.75rem; 
    color: rgb(220, 38, 38); 
}

.message-body {
    color: rgb(55, 65, 81); 
    margin-bottom: 1rem; /* Equivalent to 16px */
}

.modal-button {
    width: 100%;
    padding: 0.5rem 1rem;  
    background-color: rgb(52, 151, 218); 
    color: white;
    font-weight: 500;
    border-radius: 0.5rem; 
    /* Transitions */
    transition-property: background-color; /* Focus on color change */
    transition-duration: 150ms;
}

.modal-button:hover {
    background-color: rgb(29, 78, 216); 
}