/* Base alert style */
@media(max-width:768px)
{
    .custom-alert {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 999999;
        padding: 7px 10px;
        border-radius: 16px;
        font-size: 16px;
        font-family: Arial, sans-serif;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: 280px;
        max-width: 280px;
        opacity: 0; /* Initially hidden */
        transform: translateX(100%); /* Slide in from the right */
        pointer-events: none; /* Avoid interaction when hidden */
        transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth animation */
    }
}
@media(min-width:769px) {
    .custom-alert {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 999999;
        padding: 15px 20px;
        border-radius: 16px;
        font-size: 16px;
        font-family: Arial, sans-serif;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: 300px;
        max-width: 400px;
        opacity: 0; /* Initially hidden */
        transform: translateX(100%); /* Slide in from the right */
        pointer-events: none; /* Avoid interaction when hidden */
        transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth animation */
    }
}

    /* Show alert */
    .custom-alert.show {
        opacity: 1;
        transform: translateX(0); /* Fully visible */
        pointer-events: auto; /* Enable interaction */
    }

    /* Alert types */
    .custom-alert.success {
        background-color: #e9f7ef;
        color: #28a745;
        border-left: 5px solid #28a745;
    }

    .custom-alert.error {
        background-color: #fcebea;
        color: #dc3545;
        border-left: 5px solid #dc3545;
    }

    .custom-alert.info {
        background-color: #e8f4fd;
        color: #007bff;
        border-left: 5px solid #007bff;
    }

    .custom-alert.warning {
        background-color: #fff8e1;
        color: #ffc107;
        border-left: 5px solid #ffc107;
    }

    /* Close button */
    .custom-alert .close-btn {
        background: none;
        border: none;
        font-size: 18px;
        font-weight: bold;
        color: inherit;
        cursor: pointer;
        margin-left: 15px;
        outline: none;
        transition: transform 0.2s;
    }

        .custom-alert .close-btn:hover {
            transform: scale(1.2);
            color: rgba(0, 0, 0, 0.6);
        }

/* Entry and exit animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.custom-alert.animate-in {
    animation: slideIn 0.4s ease forwards;
}

.custom-alert.animate-out {
    animation: slideOut 0.4s ease forwards;
}