.alert-box {
    position: fixed;
    top: 20px;
    right: -300px; /* خارج از صفحه */
    width: 300px;
    padding: 15px;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    opacity: 0; /* در ابتدا مخفی است */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

    /* حالت‌های مختلف */
    .alert-box.success {
        background-color: #4caf50; /* سبز */
    }

    .alert-box.error {
        background-color: #f44336; /* قرمز */
    }

    .alert-box.warning {
        background-color: #eac90d; /* نارنجی */
    }
    /* انیمیشن نمایش */
    .alert-box.show {
        right: 20px; /* وارد صفحه می‌شود */
        opacity: 1;
        transform: translateX(0);
    }

    /* انیمیشن مخفی شدن */
    .alert-box.hide {
        right: -300px; /* از صفحه خارج می‌شود */
        opacity: 0;
    }