/* ## How to Use

1. **Include the CSS** in your base template or static files
2. **Add the JavaScript** before the closing `</body>` tag
3. **Update your template** with the modified HTML structure
4. **Ensure your Django messages** use the correct tags:
   - `messages.success()` → `alert-success` (green)
   - `messages.error()` → `alert-error` (red)
   - `messages.warning()` → `alert-warning` (orange)
   - `messages.info()` → `alert-info` (blue)

 */

/* Base message container */
.auth-message {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    min-width: 300px;
    max-width: 700px;
    width: auto;
}

/* Base alert styling */
.alert {
    padding: 15px 20px;
    margin-bottom: 10px;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    position: relative;
    text-align: center;
}

/* Success messages (green) */
.alert-success {
    background: linear-gradient(135deg, #228e3b, #1bac81);
    border-left: 4px solid #18672a;
}

/* Error messages (red) */
.alert-error,
.alert-danger {
    background: linear-gradient(135deg, #c32e3c, #cd4436);
    border-left: 4px solid #a51d2a;
}

/* Info messages (blue) */
.alert-info {
    background: linear-gradient(135deg, #148c9f, #2f89c5);
    border-left: 4px solid #0e6471;
}

/* Warning messages (orange) */
.alert-warning {
    background: linear-gradient(135deg, #e4ad07, #da8c10);
    border-left: 4px solid #b88a01;
    color: #212529;
}

/* Fade out animation */
.alert.fade-out {
    opacity: 0;
    transform: translateY(-20px);
}

/* Close button (optional) */
.alert .close-btn {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.alert .close-btn:hover {
    opacity: 1;
}

/* Responsive design */
@media (max-width: 768px) {
    .auth-message {
        left: 10px;
        right: 10px;
        transform: none;
        min-width: unset;
        max-width: unset;
        width: calc(100% - 20px);
    }

    .alert {
        padding: 12px 15px;
        font-size: 14px;
    }
}