/* Базовые стили для плашки уведомления */
.alert {
  position: relative;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  
  /* Ваша темная тема */
  background-color: #1F1F2B;
  color: #E2E2E9; /* мягкий белый цвет текста */
  
  /* Элегантная тень и базовая темная граница */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Фикс для плагина Bootstrap Notify (позиционирование) */
[data-notify="container"] {
  min-width: 280px;
  max-width: 380px;
  z-index: 9999 !important;
}

/* Кнопка закрытия (крестик) */
.alert-dismissible {
  padding-right: 3.5rem;
}
.alert-dismissible .close {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  z-index: 2;
  color: #A0A0B0;
  background-color: transparent;
  border: 0;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.alert-dismissible .close:hover {
  opacity: 1;
  color: #FFF;
}

/* Контейнер прогресс-бара внутри плашки */
[data-notify="container"] .progress {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  height: 2px !important; /* Тонкая элегантная линия снизу */
  margin: 0 !important;
  padding: 0 !important;
  background-color: rgba(255, 255, 255, 0.05) !important; /* Мягкая подложка */
  border-radius: 0 0 12px 12px !important; /* Скругление по углам плашки */
  overflow: hidden !important;
  border: none !important;
}

/* Сама заполняющаяся цветная полоса */
[data-notify="container"] .progress-bar {
  height: 100% !important;
  background-color: #3498db !important; /* Дефолтный синий цвет для обычных сообщений */
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.5) !important; /* Легкое неоновое свечение полосы */
  transition: width 0.2s linear !important; /* Плавное уменьшение/увеличение */

}

/* --- Адаптация цвета полосы под разные типы уведомлений --- */

/* Зеленая полоса для Успеха */
[data-notify="container"].alert-success .progress-bar {
  background-color: #2ecc71 !important;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.5) !important;
}

/* Красная полоса для Ошибки */
[data-notify="container"].alert-danger .progress-bar {
  background-color: #ff4d4d !important;
  box-shadow: 0 0 8px rgba(255, 77, 77, 0.5) !important;
}

/* Желтая полоса для Предупреждения */
[data-notify="container"].alert-warning .progress-bar {
  background-color: #f1c40f !important;
  box-shadow: 0 0 8px rgba(241, 196, 15, 0.5) !important;
}


/* --- Цветовые акценты (левая полоса и цветной текст) --- */

/* Успех (Зеленый акцент) */
.alert-success {
  border-left: 4px solid #2ecc71;
}
.alert-success [data-notify="title"], 
.alert-success strong {
  color: #2ecc71;
}

/* Ошибка / Опасность (Красный акцент) */
.alert-danger {
  border-left: 4px solid #e74c3c;
}
.alert-danger [data-notify="title"], 
.alert-danger strong {
  color: #e74c3c;
}

/* Предупреждение (Желтый акцент) */
.alert-warning {
  border-left: 4px solid #f1c40f;
}
.alert-warning [data-notify="title"], 
.alert-warning strong {
  color: #f1c40f;
}

/* Информация / Обычное (Синий акцент) */
.alert-info, .alert-primary {
  border-left: 4px solid #3498db;
}
.alert-info [data-notify="title"], 
.alert-info strong {
  color: #3498db;
}
/* Кнопка закрытия (крестик) — ИСПРАВЛЕННЫЙ ВАРИАНТ */
.alert-dismissible {
  padding-right: 3rem !important; /* освобождаем место справа для крестика */
}

.alert-dismissible .close {
  position: absolute !important;
 /* top: 0px !important;    */   /* прижимаем к верхнему краю */
  right: 0px !important;     /* прижимаем к правому краю */
  z-index: 2 !important;
  padding: 0.75rem 1rem !important; /* внутренние отступы, чтобы по нему было легко кликнуть */
  color: #8E8E9F !important;  /* красивый серый цвет */
  background-color: transparent !important;
  border: 0 !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 0.6 !important;
  transform: none !important; /* убираем сдвиг по вертикали, который ломал позицию */
  transition: opacity 0.2s ease, color 0.2s ease !important;
}

.alert-dismissible .close:hover {
  opacity: 1 !important;
  color: #FFFFFF !important;  /* подсвечиваем белым при наведении */
}

/* На всякий случай сбрасываем стили с тега span внутри кнопки, если они мешают */
.alert-dismissible .close span {
  line-height: 1 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
/* Специальные стили для мобильных устройств (экраны меньше 576px) */
@media (max-width: 575.98px) {
  [data-notify="container"] {
    /* Делаем аккуратные отступы от краев экрана смартфона */
    width: calc(100% - 30px) !important;
    max-width: none !important;
    margin: 10px 15px !important;
    left: 0 !important;
    right: 0 !important;
    padding: 1rem 3.5rem 1rem 1.25rem !important; /* увеличиваем правый отступ для крестика */
  }

  .alert-dismissible .close {
    top: 50% !important; /* выравниваем строго по центру высоты плашки */
    transform: translateY(-50%) !important; /* идеальная центровка */
    right: 5px !important;
    padding: 10px 15px !important;
    font-size: 1.5rem !important; /* делаем крестик чуть крупнее, чтобы по нему было удобно попадать пальцем */
  }
}

/* Полный перезапуск контейнера уведомления */
[data-notify="container"] {
  /* 1. Вырываем из контекста страницы и жестко привязываем к экрану */
  position: fixed !important;
  
  /* 2. Ставим в самый верхний правый угол окна браузера */
/*  top: 30px !important;*/
  right: 30px !important;
  left: unset !important;
  bottom: unset !important;
  
  /* 3. Сбрасываем любые отступы, которые плагин считает от верха сайта */
  margin: 0 !important;
  transform: none !important; /* Уничтожает сдвиги плагина */
  
  /* 4. СТАВИМ МАКСИМАЛЬНЫЙ СЛОЙ (перекроет шапки, подвалы и модалки) */
  z-index: 999999999 !important; 
  
  /* Ваши красивые темные стили */
  background-color: #1F1F2B !important;
  color: #FFFFFF !important;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
  padding: 1.1rem 3.5rem 1.1rem 1.5rem !important;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* Мобильный адаптив для верха экрана */
@media (max-width: 575.98px) {
  [data-notify="container"] {
    position: fixed !important;
   /* top: 15px !important;*/
    left: 15px !important;
    right: 15px !important;
    width: calc(100% - 30px) !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 999999999 !important;
  }
}



/* 2. ФИКС КРЕСТИКА: вырываем его из инлайн-скриптов плагина */
[data-notify="container"] button[data-notify="dismiss"].close {
  position: absolute !important;
  top: 0px !important;            /* сбрасываем скриптовые 5px */
  right: 0px !important;          /* сбрасываем скриптовые 10px */
  margin: 0 !important;
  padding: 0.85rem 1.2rem !important; /* делаем аккуратную и удобную область для клика */
  color: #8E8E9F !important;
  background: transparent !important;
  border: none !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 0.6 !important;
  transform: none !important;
  box-shadow: none !important;
}

[data-notify="container"] button[data-notify="dismiss"].close:hover {
  opacity: 1 !important;
  color: #FFFFFF !important;
}

/* 3. АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ */
@media (max-width: 575.98px) {
  [data-notify="container"] {
    position: absolute !important; /* на мобильных тоже держим в зоне видимости */
    width: calc(100% - 30px) !important;
    max-width: none !important;
    margin: 10px 15px !important;	 
    left: 0 !important;
    right: 0 !important;
  }
}

/* --- ЦВЕТОВЫЕ НЕОНОВЫЕ ЛИНИИ СЛЕВА --- */
.alert-success { border-left: 5px solid #2ecc71 !important; }
.alert-success strong, .alert-success [data-notify="title"] { color: #2ecc71 !important; font-weight: 600; }

.alert-danger { border-left: 5px solid #ff4d4d !important; }
.alert-danger strong, .alert-danger [data-notify="title"] { color: #ff4d4d !important; font-weight: 600; }

.alert-warning { border-left: 5px solid #f1c40f !important; }
.alert-warning strong, .alert-warning [data-notify="title"] { color: #f1c40f !important; font-weight: 600; }

.alert-info, .alert-primary { border-left: 5px solid #3498db !important; }
.alert-info strong, .alert-info [data-notify="title"],
.alert-primary strong, .alert-primary [data-notify="title"] { color: #3498db !important; font-weight: 600; }