/* SWIPER START */
@import url("https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');

:root[data-theme=yellow_black] {
  --accent-color-800: #d86500 !important;
  --accent-color-900: #d86500 !important;
  --font-color-700: #fff !important;
  --font-color-800: #fff !important;
  --font-color-900: #fff !important;
  --bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d1a0f 100%);
  --card-bg: rgba(38, 38, 38, 0.7);
  --card-border: rgba(216, 101, 0, 0.3);
  --text-glow: 0 0 10px rgba(216, 101, 0, 0.5);
}

/* Глобальные улучшения */
body {
  background: var(--bg-gradient);
  font-family: 'Montserrat', sans-serif;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 80%, rgba(216, 101, 0, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(216, 101, 0, 0.05) 0%, transparent 50%);
  z-index: -1;
  pointer-events: none;
}

/* Улучшенные карточки */
.promo, .discord, .calendar__container, .Shop-module__wrapper {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 20px rgba(216, 101, 0, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

.promo::before, .discord::before, .calendar__container::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(216, 101, 0, 0.1), transparent);
  transition: left 0.6s ease;
}

.promo:hover::before, .discord:hover::before, .calendar__container:hover::before {
  left: 100%;
}

.promo:hover, .discord:hover, .calendar__container:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 30px rgba(216, 101, 0, 0.2) !important;
  border-color: rgba(216, 101, 0, 0.6) !important;
}

/* Улучшенный Swiper */
.swiper {
  border: 1px solid var(--card-border) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(216, 101, 0, 0.1) !important;
  overflow: hidden;
}

.swiper-slide {
  border-radius: 12px;
  overflow: hidden;
}

.swiper-button-next, .swiper-button-prev {
  background: rgba(38, 38, 38, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  width: 44px !important;
  height: 44px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 18px !important;
  color: #d86500;
  font-weight: bold;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
  background: rgba(216, 101, 0, 0.9);
  transform: scale(1.1);
}

.swiper-button-next:hover::after, .swiper-button-prev:hover::after {
  color: white;
}

/* Улучшенные кнопки */
.discord_btn, .Button-module__btn.Button-module__accent {
  background: linear-gradient(135deg, #d86500 0%, #ff8c00 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 
    0 4px 15px rgba(216, 101, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

.discord_btn::before, .Button-module__btn.Button-module__accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.discord_btn:hover::before, .Button-module__btn.Button-module__accent:hover::before {
  left: 100%;
}

.discord_btn:hover, .Button-module__btn.Button-module__accent:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 25px rgba(216, 101, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  background: linear-gradient(135deg, #ff8c00 0%, #d86500 100%) !important;
}

/* Улучшенные продукты */
.Product-module__wrapper {
  background: rgba(120, 120, 120, 0.15) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden;
  position: relative;
}

.Product-module__wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d86500, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.Product-module__wrapper:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(216, 101, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(216, 101, 0, 0.5) !important;
}

.Product-module__wrapper:hover::before {
  opacity: 1;
}

.Product-module__wrapper:hover .Product-module__img {
  transform: scale(1.15) !important;
  filter: brightness(1.2) contrast(1.1) saturate(1.3) !important;
}

.Product-module__discount {
  background: linear-gradient(135deg, #e96023 0%, #ff6b35 100%) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(233, 96, 35, 0.4) !important;
  animation: pulse 2s infinite !important;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Улучшенная навигация */
.Header-module__wrapper {
  background: rgba(32, 32, 32, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(216, 101, 0, 0.3) !important;
  border-radius: 20px !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.Categories-module__category {
  background: rgba(38, 38, 38, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
}

.Categories-module__category.Categories-module__active, 
.Categories-module__category:hover {
  background: linear-gradient(135deg, #e96023 0%, #ff824d 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 25px rgba(233, 96, 35, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Улучшенный мониторинг */
.MonitoringServer-module__wrapper {
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(216, 101, 0, 0.2) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.MonitoringServer-module__progressBarWrapper {
  background: rgba(0, 0, 0, 0.4) !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.MonitoringServer-module__progressBarAnim {
  background: linear-gradient(135deg, #e96023 0%, #ff8c00 100%) !important;
  animation: shimmer 2s infinite !important;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Улучшенные социальные сети */
.socials-grid {
  gap: 12px !important;
}

.socials-vk, .socials-telegram, .socials-telegram-bot {
  background: rgba(38, 38, 38, 0.7) !important;
  border: 1px solid rgba(216, 101, 0, 0.3) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden;
  position: relative;
}

.socials-vk::before, .socials-telegram::before, .socials-telegram-bot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(216, 101, 0, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.socials-vk:hover::before, .socials-telegram:hover::before, .socials-telegram-bot:hover::before {
  opacity: 1;
}

.socials-vk:hover, .socials-telegram:hover, .socials-telegram-bot:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.4),
    0 0 25px rgba(216, 101, 0, 0.2) !important;
  border-color: rgba(216, 101, 0, 0.6) !important;
}

/* Анимации и эффекты */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.promo, .discord, .swiper, .socials, .calendar__container {
  animation: fadeInUp 0.6s ease-out;
}

.promo { animation-delay: 0.1s; }
.discord { animation-delay: 0.2s; }
.swiper { animation-delay: 0.3s; }
.socials { animation-delay: 0.4s; }
.calendar__container { animation-delay: 0.5s; }

/* Улучшенный текст */
.promo-title, .discord-title, .calen__title {
  font-weight: 700 !important;
  text-shadow: var(--text-glow) !important;
  background: linear-gradient(135deg, #fff 0%, #ffd1a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.promo-info, .discord-desc {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Адаптивность */
@media (max-width: 768px) {
  .promo, .discord, .swiper, .socials, .calendar__container {
    margin: 10px 0;
  }
  
  .Product-module__wrapper:hover {
    transform: translateY(-4px) scale(1.01) !important;
  }
  
  .Header-module__wrapper {
    border-radius: 16px !important;
    margin: 10px !important;
  }
}

/* Плавная прокрутка */
html {
  scroll-behavior: smooth;
}

/* Улучшенный скроллбар */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(38, 38, 38, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #d86500 0%, #ff8c00 100%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #ff8c00 0%, #d86500 100%);
}
/* SWIPER END */