/* webroot/css/app.css -- Add this block */
.flash-custom {
    background: linear-gradient(180deg, #FFB59A 0%, #FF9671 100%);
    /* soft gradient */
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
    margin: 1rem 0;
}

/* make message text wrap nicely */
.flash-custom .flash-message {
    flex: 1;
    overflow-wrap: anywhere;
}

/* small screens */
@media (max-width: 480px) {
    .flash-custom {
        padding: 0.6rem 0.8rem;
        font-size: 0.95rem;
    }
}