/* === ФОН С ИЗОБРАЖЕНИЕМ + ПЕРЕХОД В ЦВЕТ === */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #2a2a2a 100%),
    url('https://gspics.org/images/2025/07/25/IhpxSE.jpg') no-repeat center center;
  background-size: cover;
  z-index: -2;
}

body {
  background-color: #2a2a2a;
  margin: 0;
  padding: 0;
}

/* --- 1. Скрываем старый баннер --- */
.bannerContainer {
  display: none !important;
}

/* --- 2. Анимация карточек (магазин и модалка) --- */
.Product-module__wrapper,
.ProductModal-module__item {
  transition: transform 0.4s ease, box-shadow 0.3s ease;
  will-change: transform;
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* --- 3. Фоновое видео --- */
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  opacity: 0.25;
  pointer-events: none;
}

/* --- 4. Усиление наклона карточек + прозрачность --- */
.Product-module__wrapper {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transform-style: preserve-3d;
  will-change: transform;
  perspective: 1000px;
  background-color: rgba(30, 30, 30, 0.5);
  backdrop-filter: blur(6px);
  border-radius: 8px;
}

/* --- 5. Цветовая схема: кнопки категорий --- */
button[class*="CategoryButton"],
button[class*="Button-module__button"],
button[class*="Category-module__button"]:not(:first-child) {
  background-color: #ff5e1f !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 0 6px rgba(255, 94, 31, 0.4);
  border-radius: 6px !important;
}

/* --- 6. Не трогаем кнопку RU в хедере --- */
.headerContainer a:first-child {
  color: inherit !important;
  background: none !important;
  box-shadow: none !important;
}

/* --- 7. Прозрачность и скругление фонов всех секций --- */
.headerContainer,
.ProductList-module__wrapper,
.monitoring-widget,
.custom-section,
.store-wrapper,
.searchWrapper,
input,
textarea,
select {
  background-color: rgba(20, 20, 20, 0.5) !important;
  backdrop-filter: blur(6px);
  border-radius: 8px !important;
}

/* --- 8. Скругление изображений товаров --- */
.Product-module__imageWrapper img {
  border-radius: 6px;
}

/* --- 9. Скругление кнопки "Обновить" в мониторинге --- */
.monitoring-widget button {
  border-radius: 6px !important;
}

/* --- 10. Скругление выпадающих окон (если есть) --- */
.ProductModal-module__content,
.Modal-module__modal {
  border-radius: 10px !important;
}

/* --- 11. Явное скругление по ID сервера --- */
[data-monitoringserverid="52415"] {
  border-radius: 8px !important;
  overflow: hidden;
  background-color: rgba(20, 20, 20, 0.5) !important;
  backdrop-filter: blur(6px);
  padding: 10px;
}

/* === КРУПНЫЕ КАРТОЧКИ === */
.Product-module__wrapper {
  width: 200px !important;
  min-height: 200px !important;
}

/* Центровка карточек и отступы между ними */
.ProductList-module__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

/* === РАСПОЛОЖЕНИЕ МОДАЛКИ — КОНТЕНТ СПРАВА === */
.ProductModal-module__content {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

/* Изображение слева */
.ProductModal-module__imageWrapper {
  flex: 1 1 40%;
  max-width: 400px;
}

/* Описание товара справа */
.ProductModal-module__info,
.ProductModal-module__body {
  flex: 1 1 55%;
}

/* Скругление изображения в модалке */
.ProductModal-module__imageWrapper img {
  border-radius: 6px;
}