/* ===== Message boxes ===== */
div.message {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95em;
    font-weight: 500;
    line-height: 1.5;
    padding: 1em 1.2em;
    margin: 1em 0;
    border-radius: 6px;
    border-left: 4px solid;
}

    div.message p {
        padding: 0;
        margin: 0;
    }

    div.message.errormsg {
        background: #fef2f2;
        border-color: #dc2626;
        color: #991b1b;
    }

    div.message.success {
        background: #ecfdf5;
        border-color: #047857;
        color: #065f46;
    }

    div.message.info {
        background: #f0f7fa;
        border-color: var(--fatri-cyan, #00addf);
        color: #0c4a6e;
    }

    div.message.warning {
        background: #fffbeb;
        border-color: #d97706;
        color: #92400e;
    }

/* ===== Animated entrance for success messages ===== */
@keyframes message-slide-in {
    0% {
        opacity: 0;
        transform: translateY(-12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

div.message.message-animate {
    animation: message-slide-in 0.4s ease-out;
}