/* تنظیمات اولیه برای کانتینر پیام‌ها */
#alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  /* استایل پیام‌ها */
  .alert-item {
    width: fit-content;
    max-width: 300px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    transform: translateX(100%); /* پیام‌ها به صورت اولیه از سمت راست مخفی هستند */
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }

  .alert-text{
    align-self: self-end;
  }
  
  /* استایل نوار پیشرفت */
  .alert-item .progress-bar {
    width: 0;
    height: 4px;
    transition: width 6s linear;
    border-radius: 5px;
  }
  
  /* رنگ‌ها برای وضعیت‌های مختلف پیام */
  .success {
    border-left: 5px solid green;
  }
  
  .warning {
    border-left: 5px solid yellow;
  }
  
  .error {
    border-left: 5px solid red;
  }
  
  .alert-item.show {
    transform: translateX(0); /* پیام وارد صفحه می‌شود */
    opacity: 1;
  }
  
  .alert-item.hide {
    transform: translateX(100%); /* پیام از صفحه خارج می‌شود */
    opacity: 0;
  }