/* Flash messages styling */

/* Modal overlay */
#flash-modal-overlay {
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease forwards;
}

.animate-fadeOut {
    animation: fadeOut 0.3s ease forwards;
}

/* Flash message modal */
.flash-message {
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 400px;
    width: calc(100% - 2rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
    pointer-events: auto;
    margin: 0 auto;
}

.flash-message-timer {
    width: 0;
    height: 4px;
    transition: width 5s linear;
    will-change: width;
}

#flash-message-container {
    width: 100%;
    max-width: 450px;
    padding: 1rem;
}

/* Modal entrance animation */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Modal exit animation */
@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Make sure the messages look good on mobile */
@media (max-width: 640px) {
    .flash-message {
        width: calc(100% - 2rem);
        max-width: none;
    }
}