/* 1. Главный контейнер: "магнит", который держит уведомления ниже шапки */
#notifications-container {
    position: fixed;                                  /* Фиксируем относительно окна браузера */
    /* 2. МАГИЯ: Берем высоту шапки (которую JS записал в переменную) и прибавляем 15px отступа */
    top: calc(var(--header-offset, 70px) + 15px);     
    right: 20px;                                      /* Отступ от правого края */
    z-index: 9999;                                    /* Поверх всех окон, кроме модалок */
    display: flex;                                    /* Выстраиваем уведомления в столбик */
    flex-direction: column;                           
    gap: 12px;                                        /* Расстояние между уведомлениями */
    max-width: 360px;                                 /* Максимальная ширина, чтобы не тянулось на весь экран */
    pointer-events: none;                             /* 3. ВАЖНО: Делаем контейнер "призраком" для мыши */
}

/* 4. Само уведомление (белая карточка) */
.notification {
    pointer-events: auto;                             /* 5. Возвращаем возможность кликать по самой карточке */
    background: var(--surface, #ffffff);              /* Чистый белый фон из дизайн-системы */
    border-radius: 10px;                              /* Скругления как у карточек товаров */
    box-shadow: 0 10px 25px rgba(28, 35, 40, 0.12); /* Мягкая, дорогая тень */
    padding: 14px 18px;                               /* Внутренний "воздух" */
    display: flex;                                    
    align-items: center;                              /* Центрируем иконку и текст по вертикали */
    gap: 12px;                                        
    border-left: 4px solid var(--border, #e4e7e8);    /* Серая полоска слева по умолчанию */
    transform: translateX(120%);                      /* 6. Стартовая позиция: уезжает за правый край экрана */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; /* Плавная анимация с "отскоком" */
    opacity: 0;                                       /* Прозрачность 0 в начале */
}

/* 7. Цветовые акценты для разных типов уведомлений (используем переменные из redesign.css) */
.notification.success { border-left-color: var(--green, #4f8f22); background: #f8fcf6; }
.notification.error   { border-left-color: var(--red, #e32d2d);   background: #fcf6f6; }
.notification.warning { border-left-color: #f59e0b;               background: #fffcf5; }
.notification.info    { border-left-color: var(--blue, #1778ad);  background: #f5f9fc; }

/* 8. Контейнер для текста и кнопки закрытия */
.notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;                                          /* Занимает все свободное место */
}

/* 9. Стили для новых SVG-иконок */
.notification-svg {
    width: 24px;                                      /* Фиксированный размер */
    height: 24px;                                     
    flex-shrink: 0;                                   /* Запрещаем иконке сжиматься */
}

/* 10. Текст уведомления */
.notification-message {
    flex: 1;
    font-size: 13px;                                  /* Читабельный размер */
    font-weight: 500;
    color: var(--text, #2d3338);                      /* Темно-серый текст */
    line-height: 1.4;
}

/* 11. Кнопка закрытия (крестик) */
.notification-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted, #8a9298);                     /* Серый цвет */
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.2s;
}
.notification-close:hover {
    color: var(--red, #e32d2d);                       /* При наведении становится красным */
}