@keyframes modalSlideDownIn {
    from {
        opacity: 0;
        transform: translateY(-30px); /* Start slightly above */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalSlideDownOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(30px); /* Move down slightly when closing */
    }
}

/* Apply slide-down fade-in animation when modal is shown */
.modal.show {
    display: block;
    animation: modalSlideDownIn 0.1s ease-in-out;
}

/* Apply slide-down fade-out animation when modal is hidden */
.modal.hide {
    animation: modalSlideDownOut 0.1s ease-in-out;
}

/* Ensure modal hides instantly after fade-out */
.modal {
    transition: none !important;
}