.flash-message {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-weight: 500;
    animation: fadeIn 0.3s ease-in;
}

.flash-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.flash-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.flash-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.flash-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.flash-message.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

.flash-messages {
    margin-bottom: 20px;
    position: relative;
    z-index: 1000; /* Ensure messages appear above other content */
}

/* Prevent flash messages from stacking on top of each other */
.flash-message + .flash-message {
    margin-top: 10px; /* Space between multiple messages */
}

/* Add max-width to prevent messages from being too wide */
.flash-message {
    max-width: 100%;
    word-wrap: break-word;
}