/* Анимация свечения цены - упрощенная */
@keyframes priceGlow {
  0% {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
    transform: scale(1.02);
  }
  100% {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transform: scale(1);
  }
}

/* PERF: soften global glassmorphism where expensive */
.perf-lite .modal,.perf-lite .offcanvas,.perf-lite .bottom-nav,.perf-lite .navbar.bg-body,
.perf-lite .hero.bg-hero,.perf-lite .card.glassy,.perf-lite .profile-card,.perf-lite .points-card,
.perf-lite .cart-checkout-card,.perf-lite .cart-sidebar-card{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Reduce strong blurs to cheaper values */
.navbar.bg-body{backdrop-filter:saturate(120%) blur(5px)}
.bottom-nav{backdrop-filter:blur(5px) saturate(110%)}
.modal-glass, .panel-glass, .card.glassy{backdrop-filter: blur(8px)}
:root{
  --tc-bg: #0e0f12;
  --tc-elevate: #14161b;
  --tc-text: #e8e9ec;
  --tc-primary: #8b5cf6;
}

/* Современный фон главной страницы */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
  overflow-x: hidden !important;
  position: static !important; /* Changed from relative to fix position: fixed for bottom-nav */
  transform: none !important; /* Prevent transform from breaking position: fixed */
  will-change: auto !important; /* Prevent will-change from breaking position: fixed */
}

body {
  background: var(--tc-bg);
  color: var(--tc-text);
  position: relative;
  overflow-x: hidden !important;
  font-size-adjust: 0.52;
  min-height: 100vh;
  max-height: none;
  height: auto;
  width: 100%;
  max-width: 100vw;
}

/* Prevent any horizontal overflow */
body > * {
  max-width: 100%;
}

/* Основной градиентный фон - менее подвижный и более размытый */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  background: 
    radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, 
      #0a0b0f 0%,
      #0e0f12 25%,
      #121318 50%,
      #0e0f12 75%,
      #0a0b0f 100%
    );
  animation: backgroundShift 120s ease-in-out infinite;
  /* Убираем backdrop-filter как самый тяжёлый эффект, оставляем лёгкий фильтр */
  /* backdrop-filter: blur(3px); */
  filter: blur(0.4px);
}

/* Анимированные частицы фона - менее подвижные */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('../img/noise_optimized.png') repeat;
  opacity: 0.06;
  animation: noiseMove 150s linear infinite;
  /* Убираем backdrop-filter, оставляем лёгкий фильтр */
  /* backdrop-filter: blur(2px); */
  filter: blur(0.3px);
}

/* В режиме perf-lite уменьшаем интенсивность фоновых анимаций */
.perf-lite body::before, .perf-lite body::after { 
  opacity: 0.3 !important; 
  animation-duration: 20s !important; 
}

/* Дополнительные декоративные элементы */
body::before {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, 
      #0a0b0f 0%,
      #0e0f12 25%,
      #121318 50%,
      #0e0f12 75%,
      #0a0b0f 100%
    );
}

/* Плавные и ненавязчивые анимации фона */
@keyframes backgroundShift {
  0%, 100% { 
    transform: translateX(0) translateY(0) scale(1);
    filter: hue-rotate(0deg);
  }
  25% { 
    transform: translateX(-0.5%) translateY(-0.3%) scale(1.005);
    filter: hue-rotate(1deg);
  }
  50% { 
    transform: translateX(0.3%) translateY(-0.5%) scale(0.998);
    filter: hue-rotate(-0.5deg);
  }
  75% { 
    transform: translateX(-0.2%) translateY(0.3%) scale(1.002);
    filter: hue-rotate(0.3deg);
  }
}

@keyframes noiseMove {
  0% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(-3px) translateY(-2px); }
  50% { transform: translateX(2px) translateY(-3px); }
  75% { transform: translateX(-2px) translateY(2px); }
  100% { transform: translateX(0) translateY(0); }
}

/* Дополнительные декоративные элементы фона */
body::after {
  background-image: 
    url('../img/noise.webp'),
    radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.03) 0%, transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(99, 102, 241, 0.02) 0%, transparent 30%);
  background-size: 
    200px 200px,
    400px 400px,
    300px 300px;
  background-position: 
    0 0,
    0 0,
    100% 100%;
  animation: 
    noiseMove 30s linear infinite,
    backgroundFloat 70s ease-in-out infinite;
}

/* Плавная анимация плавания */
@keyframes backgroundFloat {
  0%, 100% { 
    transform: translateX(0) translateY(0) rotate(0deg);
    opacity: 0.06;
  }
  33% { 
    transform: translateX(0.5%) translateY(-0.3%) rotate(0.2deg);
    opacity: 0.07;
  }
  66% { 
    transform: translateX(-0.3%) translateY(0.5%) rotate(-0.2deg);
    opacity: 0.05;
  }
}

/* Плавающие декоративные элементы */
body::before {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 60% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 30% 10%, rgba(99, 102, 241, 0.04) 0%, transparent 35%),
    linear-gradient(135deg, 
      #0a0b0f 0%,
      #0e0f12 25%,
      #121318 50%,
      #0e0f12 75%,
      #0a0b0f 100%
    );
  background-size: 
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
  animation: 
    backgroundShift 60s ease-in-out infinite,
    backgroundPulse 45s ease-in-out infinite;
}

/* Тонкая пульсация фона */
@keyframes backgroundPulse {
  0%, 100% { 
    opacity: 1;
    filter: hue-rotate(0deg) saturate(1);
  }
  50% { 
    opacity: 0.98;
    filter: hue-rotate(2deg) saturate(1.02);
  }
}

/* Дополнительные декоративные элементы для создания глубины */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 60% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 30% 10%, rgba(99, 102, 241, 0.04) 0%, transparent 35%),
    linear-gradient(135deg, 
      #0a0b0f 0%,
      #0e0f12 25%,
      #121318 50%,
      #0e0f12 75%,
      #0a0b0f 100%
    );
  background-size: 
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
  animation: 
    backgroundShift 60s ease-in-out infinite,
    backgroundPulse 45s ease-in-out infinite;
}

/* Создаем дополнительный слой для эффекта глубины */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: 
    url('../img/noise.webp'),
    radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.03) 0%, transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(99, 102, 241, 0.02) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.01) 0%, transparent 60%);
  background-size: 
    200px 200px,
    400px 400px,
    300px 300px,
    500px 500px;
  background-position: 
    0 0,
    0 0,
    100% 100%,
    50% 50%;
  animation: 
    noiseMove 30s linear infinite,
    backgroundFloat 70s ease-in-out infinite;
  opacity: 0.06;
}

/* Дополнительные плавающие элементы */
body::before {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 60% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 30% 10%, rgba(99, 102, 241, 0.04) 0%, transparent 35%),
    radial-gradient(circle at 70% 30%, rgba(59, 130, 246, 0.03) 0%, transparent 45%),
    radial-gradient(circle at 15% 60%, rgba(139, 92, 246, 0.02) 0%, transparent 40%),
    linear-gradient(135deg, 
      #0a0b0f 0%,
      #0e0f12 25%,
      #121318 50%,
      #0e0f12 75%,
      #0a0b0f 100%
    );
  background-size: 
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
  animation: 
    backgroundShift 20s ease-in-out infinite,
    backgroundPulse 15s ease-in-out infinite,
    backgroundRotate 120s linear infinite;
}

/* Медленное и плавное вращение фона */
@keyframes backgroundRotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.005); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Оптимизированная адаптивность фона для мобильных устройств */
@media (max-width: 768px) {
  body::before {
    background-image: 
      radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.03) 0%, transparent 50%),
      linear-gradient(135deg, 
        #0a0b0f 0%,
        #0e0f12 50%,
        #0a0b0f 100%
      );
    animation: 
      backgroundShift 120s ease-in-out infinite;
  }
  
  /* Отключаем тяжелые анимации на слабых устройствах */
  .perf-lite body::before {
    animation: none !important;
    background-image: linear-gradient(135deg, #0a0b0f 0%, #0e0f12 50%, #0a0b0f 100%) !important;
  }
  
  body::after {
    opacity: 0.02;
    animation: 
      noiseMove 60s linear infinite;
  }
  
  /* Оптимизация частиц для мобильных */
  .particle {
    opacity: 0.3;
    animation-duration: 8s;
  }
  
  /* Отключаем тяжелые эффекты на слабых устройствах */
  .perf-lite .particle {
    display: none !important;
  }
  
  .perf-lite body::after {
    animation: none !important;
    opacity: 0.01 !important;
  }
}

@media (max-width: 480px) {
  body::before {
    background-image: 
      radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.04) 0%, transparent 50%),
      linear-gradient(135deg, 
        #0a0b0f 0%,
        #0e0f12 50%,
        #0a0b0f 100%
      );
    animation: 
      backgroundShift 100s ease-in-out infinite;
  }
  
  body::after {
    opacity: 0.03;
    animation: 
      noiseMove 120s linear infinite;
  }
}

/* Дополнительные плавающие элементы, отталкивающиеся от фона */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 60% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 30% 10%, rgba(99, 102, 241, 0.04) 0%, transparent 35%),
    radial-gradient(circle at 70% 30%, rgba(59, 130, 246, 0.03) 0%, transparent 45%),
    radial-gradient(circle at 15% 60%, rgba(139, 92, 246, 0.02) 0%, transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(99, 102, 241, 0.015) 0%, transparent 35%),
    radial-gradient(circle at 5% 15%, rgba(59, 130, 246, 0.01) 0%, transparent 30%),
    linear-gradient(135deg, 
      #0a0b0f 0%,
      #0e0f12 25%,
      #121318 50%,
      #0e0f12 75%,
      #0a0b0f 100%
    );
  background-size: 
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
  animation: 
    backgroundShift 120s ease-in-out infinite,
    backgroundPulse 90s ease-in-out infinite,
    backgroundRotate 200s linear infinite;
}

/* Дополнительные элементы для создания глубины */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: 
    url('../img/noise.webp'),
    radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.03) 0%, transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(99, 102, 241, 0.02) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.01) 0%, transparent 60%),
    radial-gradient(circle at 25% 75%, rgba(139, 92, 246, 0.008) 0%, transparent 25%),
    radial-gradient(circle at 75% 25%, rgba(99, 102, 241, 0.006) 0%, transparent 20%);
  background-size: 
    200px 200px,
    400px 400px,
    300px 300px,
    500px 500px,
    350px 350px,
    250px 250px;
  background-position: 
    0 0,
    0 0,
    100% 100%,
    50% 50%,
    25% 75%,
    75% 25%;
  animation: 
    noiseMove 150s linear infinite,
    backgroundFloat 120s ease-in-out infinite;
  opacity: 0.06;
}

/* Отключение анимаций для пользователей с предпочтением уменьшенной анимации */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}.bg-elevate{background-color:var(--tc-elevate)!important}.hero.bg-hero{border:1px solid rgba(255,255,255,.06);border-radius:1.25rem;background:url('../img/vignette.png') center/cover no-repeat,linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))/*,backdrop-filter:blur(8px) saturate(120%)*/}.card.product{border:1px solid rgba(255,215,0,.2);background:linear-gradient(180deg,rgba(255,248,220,.15),rgba(255,248,220,.05));border-radius:1.25rem;transition:transform .25s,box-shadow .25s,border-color .25s;box-shadow:0 0 20px rgba(255,215,0,.1),0 4px 15px rgba(0,0,0,.1)}

/* ВЫРАВНИВАНИЕ КАРТОЧЕК С ПОДДЕРЖКОЙ JAVASCRIPT */
.row[data-stagger-grid] {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  align-items: stretch !important;
  gap: 0.5rem !important;
}

.row[data-stagger-grid] .col {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}

.card.product {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  margin: 0 !important;
  border: 1px solid rgba(255,215,0,.2) !important;
  background: linear-gradient(180deg,rgba(255,248,220,.15),rgba(255,248,220,.05)) !important;
  border-radius: 1.25rem !important;
  transition: transform .25s,box-shadow .25s,border-color .25s !important;
  box-shadow: 0 0 20px rgba(255,215,0,.1), 0 4px 15px rgba(0,0,0,.1) !important;
  min-height: 0 !important;
}

.card.product .card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 0.5rem !important;
  justify-content: space-between !important;
  gap: 0.25rem !important;
  align-items: flex-start !important;
}

.card.product .ratio {
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  border-radius: 1.25rem 1.25rem 0 0 !important;
  overflow: hidden !important;
}

.card.product .card-title,
.card.product h3,
.card.product h4,
.card.product h5 {
  height: auto !important;
  min-height: 1.2em !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  line-height: 1.2em !important;
  font-size: 0.9rem !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
  font-weight: 600 !important;
}

.card.product .small {
  height: 1.1em !important;
  min-height: 1.1em !important;
  max-height: 1.1em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  line-height: 1.1em !important;
  font-size: 0.8rem !important;
}

/* Принудительное выравнивание элементов карточки */
.card.product .points-reward-card,
.card.product .d-flex.align-items-center.gap-2,
.card.product .badge,
.card.product .text-decoration-line-through {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  margin-bottom: 0 !important;
  height: auto !important;
}

/* Блок с балами прижимается к низу и растягивается */
.card.product .points-reward-card {
  margin-top: auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  padding-top: 0.25rem !important;
  width: 100% !important;
}

.card.product .points-reward-card .d-flex {
  width: 100% !important;
  justify-content: center !important;
}

.card.product .card-body > *:last-child {
  margin-bottom: 0 !important;
}

/* Правильные отступы для карточек */
.card.product .card-body {
  padding-bottom: 0.5rem !important;
}

/* Правильное распределение элементов */
.card.product .card-body > * + * {
  margin-top: 0 !important;
}

/* Стилизованная основная цена */
.card.product .price-text {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  flex: 0 0 auto !important;
  min-width: 0;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: 0.9rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Стилизация основной цены (жирная) - Увеличенный градиентный стиль */
.card.product .fw-semibold.price-text {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, 
    #ff6b35 0%, 
    #f7931e 15%, 
    #ffd700 30%, 
    #ffffff 45%, 
    #ffd700 60%, 
    #f7931e 75%, 
    #ff6b35 100%
  ) !important;
  background-size: 400% 400% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  letter-spacing: 0.07em !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
  animation: priceGradientFlow 3s ease-in-out infinite !important;
  position: relative !important;
  z-index: 1 !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
}

/* Анимация градиента для цены - яркая и динамичная */
@keyframes priceGradientFlow {
  0% {
    background-position: 0% 50%;
  }
  20% {
    background-position: 25% 0%;
  }
  40% {
    background-position: 50% 25%;
  }
  60% {
    background-position: 75% 50%;
  }
  80% {
    background-position: 100% 75%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Псевдоэлемент убран для чистого вида */

.card.product .price-row {
  flex-wrap: nowrap !important;
  column-gap: 0.25rem !important;
  align-items: center !important;
  max-width: 100% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Дополнительная защита от переполнения */
.card.product .d-flex.align-items-center.gap-2 {
  max-width: 100% !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
  gap: 0.25rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Стили для старой цены */
.card.product .text-decoration-line-through {
  font-size: 0.8rem !important;
  color: #9ca3af !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0.7 !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
  text-decoration-color: #d1d5db !important;
  text-decoration-thickness: 1px !important;
}

/* Стили для бейджа скидки */
.card.product .badge {
  font-size: 0.75rem !important;
  padding: 0.12rem 0.35rem !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

@media (max-width: 576px) {
  .card.product .price-row {
    column-gap: 0.03rem !important;
    max-width: 100% !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .card.product .price-row .fw-semibold.price-text {
    font-size: 0.85rem !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: unset !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, 
      #ff6b35 0%, 
      #f7931e 15%, 
      #ffd700 30%, 
      #ffffff 45%, 
      #ffd700 60%, 
      #f7931e 75%, 
      #ff6b35 100%
    ) !important;
    background-size: 400% 400% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    letter-spacing: 0.06em !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
    animation: priceGradientFlow 3s ease-in-out infinite !important;
    position: relative !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
  }

  .card.product .price-text {
    font-size: 0.55rem !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: unset !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .card.product .product-title {
    font-size: 0.8rem !important;
    height: auto !important;
    min-height: 2.0em !important;
    max-height: none !important;
    line-height: 1.2 !important;
    margin-bottom: 0.3rem !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  .card.product .text-decoration-line-through {
    font-size: 0.2rem !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #9ca3af !important;
    opacity: 0.7 !important;
  }

  .card.product .badge {
    font-size: 0.2rem !important;
    padding: 0.01rem 0.08rem !important;
    margin: 0 !important;
  }

  .card.product .discount-badge {
    font-size: 0.6rem !important;
    padding: 0.08rem 0.25rem !important;
  }

  /* Делаем карточки товаров шире на мобильных */
  .row[data-stagger-grid] > .product-card-wrap {
    flex: 0 0 calc(60% - 0.2rem) !important;
    max-width: calc(60% - 0.2rem) !important;
    width: calc(60% - 0.2rem) !important;
    min-width: calc(60% - 0.2rem) !important;
  }
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 480px) {
  .card.product .price-row {
    column-gap: 0.02rem !important;
  }

  .card.product .price-row .fw-semibold.price-text {
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, 
      #ff6b35 0%, 
      #f7931e 15%, 
      #ffd700 30%, 
      #ffffff 45%, 
      #ffd700 60%, 
      #f7931e 75%, 
      #ff6b35 100%
    ) !important;
    background-size: 400% 400% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    letter-spacing: 0.05em !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
    animation: priceGradientFlow 3s ease-in-out infinite !important;
    position: relative !important;
    z-index: 1 !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
  }

  .card.product .price-text {
    font-size: 0.2rem !important;
  }

  .card.product .text-decoration-line-through {
    font-size: 0.2rem !important;
    color: #9ca3af !important;
    opacity: 0.7 !important;
  }

  .card.product .badge {
    font-size: 0.2rem !important;
    padding: 0.005rem 0.06rem !important;
  }

  .card.product .product-title {
    font-size: 0.75rem !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
}

/* Плейсхолдеры для выравнивания */
.card.product .placeholder-element {
  opacity: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  visibility: hidden !important;
}

.card.product .discount-badge.placeholder-element {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.card.product .text-decoration-line-through.placeholder-element {
  color: transparent !important;
  text-decoration: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Дополнительные стили для плейсхолдеров */
.card.product .badge.placeholder-element {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.card.product .d-flex.placeholder-element {
  opacity: 0 !important;
  visibility: hidden !important;
}

.card.product .d-flex.placeholder-element * {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Убираем старые правила для скрытых элементов */

/* Убираем дублирующиеся правила */

/* Убираем конфликтующие правила */

/* Позволяем карточкам растягиваться */
.product-card-wrap {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.product-card-wrap .card.product {
  flex: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Дополнительные стили для принудительного выравнивания */
.card.product .card-body > * {
  flex-shrink: 0 !important;
}

/* Правильное распределение контента */
.card.product .card-body {
  min-height: 0 !important;
}

/* Полностью видимое название товара */
.card.product .product-title {
  min-height: 2.4em !important;
  max-height: none !important;
  line-height: 1.3 !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
}

/* Принудительное переопределение Bootstrap классов */
.row[data-stagger-grid] > .product-card-wrap {
  flex: 0 0 calc(50% - 0.25rem) !important;
  max-width: calc(50% - 0.25rem) !important;
  width: calc(50% - 0.25rem) !important;
  min-width: calc(50% - 0.25rem) !important;
}

.row[data-stagger-grid] > .product-card-wrap > .col {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  min-width: 100% !important;
}

/* Средние экраны (планшеты вертикально): 2 колонки */
@media (min-width: 576px) and (max-width: 768px) {
  .row[data-stagger-grid] > .product-card-wrap {
    flex: 0 0 calc(50% - 0.25rem) !important;
    max-width: calc(50% - 0.25rem) !important;
    width: calc(50% - 0.25rem) !important;
    min-width: calc(50% - 0.25rem) !important;
  }
}

/* Планшеты горизонтально: 3 колонки */
@media (min-width: 769px) and (max-width: 1024px) {
  .row[data-stagger-grid] > .product-card-wrap {
    flex: 0 0 calc(33.333333% - 0.333rem) !important;
    max-width: calc(33.333333% - 0.333rem) !important;
    width: calc(33.333333% - 0.333rem) !important;
    min-width: calc(33.333333% - 0.333rem) !important;
  }
}

/* Большие экраны: 4 колонки */
@media (min-width: 1025px) {
  .row[data-stagger-grid] > .product-card-wrap {
    flex: 0 0 calc(25% - 0.375rem) !important;
    max-width: calc(25% - 0.375rem) !important;
    width: calc(25% - 0.375rem) !important;
    min-width: calc(25% - 0.375rem) !important;
  }
}

/* Дополнительные переопределения для мобильных устройств */
@media (max-width: 480px) {
  .row[data-stagger-grid] > .product-card-wrap {
    flex: 0 0 calc(50% - 0.125rem) !important;
    max-width: calc(50% - 0.125rem) !important;
    width: calc(50% - 0.125rem) !important;
    min-width: calc(50% - 0.125rem) !important;
  }
}

/* Агрессивное переопределение Bootstrap */
.row.row-cols-2.row-cols-md-3.row-cols-lg-4[data-stagger-grid] > .product-card-wrap {
  flex: 0 0 calc(50% - 0.25rem) !important;
  max-width: calc(50% - 0.25rem) !important;
  width: calc(50% - 0.25rem) !important;
  min-width: calc(50% - 0.25rem) !important;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .row.row-cols-2.row-cols-md-3.row-cols-lg-4[data-stagger-grid] > .product-card-wrap {
    flex: 0 0 calc(33.333333% - 0.333rem) !important;
    max-width: calc(33.333333% - 0.333rem) !important;
    width: calc(33.333333% - 0.333rem) !important;
    min-width: calc(33.333333% - 0.333rem) !important;
  }
}

@media (min-width: 1025px) {
  .row.row-cols-2.row-cols-md-3.row-cols-lg-4[data-stagger-grid] > .product-card-wrap {
    flex: 0 0 calc(25% - 0.375rem) !important;
    max-width: calc(25% - 0.375rem) !important;
    width: calc(25% - 0.375rem) !important;
    min-width: calc(25% - 0.375rem) !important;
  }
}

@media (min-width: 769px) {
  .row.row-cols-2.row-cols-md-3.row-cols-lg-4[data-stagger-grid] > .col {
    flex: 0 0 calc(33.333333% - 0.667rem) !important;
    max-width: calc(33.333333% - 0.667rem) !important;
    width: calc(33.333333% - 0.667rem) !important;
    min-width: calc(33.333333% - 0.667rem) !important;
  }
}

@media (min-width: 1025px) {
  .row.row-cols-2.row-cols-md-3.row-cols-lg-4[data-stagger-grid] > .col {
    flex: 0 0 calc(25% - 0.75rem) !important;
    max-width: calc(25% - 0.75rem) !important;
    width: calc(25% - 0.75rem) !important;
    min-width: calc(25% - 0.75rem) !important;
  }
}

/* ===== МИНИ-ПРОФИЛЬ ===== */
.user-profile-container {
  position: relative;
  display: inline-block;
}

.user-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.user-avatar-btn:hover {
  transform: scale(1.05);
}

.avatar-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: visible;
  border: 2px solid rgba(139, 92, 246, 0.3);
  transition: all 0.3s ease;
}

.avatar-wrapper:hover {
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.avatar-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.avatar-wrapper:hover .avatar-glow {
  opacity: 1;
  animation: avatarPulse 2s ease-in-out infinite;
}

@keyframes avatarPulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.6; }
}

.orders-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid #1a1a1a;
  animation: badgePulse 2s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  line-height: 1;
  z-index: 10;
}

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

@keyframes pointsIconPulse {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
    box-shadow: 
      0 0 30px rgba(255, 215, 0, 0.4),
      inset 0 2px 4px rgba(255, 255, 255, 0.2);
  }
  25% { 
    transform: scale(1.05) rotate(5deg); 
    box-shadow: 
      0 0 40px rgba(255, 215, 0, 0.6),
      inset 0 2px 4px rgba(255, 255, 255, 0.3);
  }
  50% { 
    transform: scale(1.1) rotate(0deg); 
    box-shadow: 
      0 0 50px rgba(255, 215, 0, 0.8),
      inset 0 2px 4px rgba(255, 255, 255, 0.4);
  }
  75% { 
    transform: scale(1.05) rotate(-5deg); 
    box-shadow: 
      0 0 40px rgba(255, 215, 0, 0.6),
      inset 0 2px 4px rgba(255, 255, 255, 0.3);
  }
}

@keyframes iconGlow {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.6; 
    transform: scale(1.2);
  }
}

@keyframes textShine {
  0%, 100% { 
    background-position: 0% 50%;
  }
  50% { 
    background-position: 100% 50%;
  }
}

@keyframes borderGlow {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.6; 
    transform: scale(1.02);
  }
}

@keyframes starRotate {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(360deg); 
  }
}

@keyframes starGlow {
  0% { 
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)) brightness(1);
  }
  100% { 
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)) brightness(1.2);
  }
}

@keyframes starFloat {
  0%, 100% { 
    transform: translateY(0px) scale(1);
  }
  50% { 
    transform: translateY(-3px) scale(1.05);
  }
}

@keyframes pulseRing {
  0% { 
    opacity: 0.8; 
    transform: scale(0.8);
  }
  50% { 
    opacity: 0.3; 
    transform: scale(1.2);
  }
  100% { 
    opacity: 0; 
    transform: scale(1.5);
  }
}

/* Счетчик избранного в минипрофиле */
.favorites-badge-mini {
  display: flex;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 0.55rem;
  font-weight: 700;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 
    0 1px 4px rgba(239, 68, 68, 0.4),
    0 0 0 1px rgba(239, 68, 68, 0.2);
  /* animation: favoritesPulse 2s ease-in-out infinite; */ /* Отключено для отладки */
  z-index: 10;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

/* Скрываем "Обрані товари" в мобильной версии */
@media (max-width: 991px) {
  .menu-item[href*="favorites"] {
    display: none !important;
  }
}

/* Стили для планшетов (768px - 991px) - исправляем отображение логотипа */
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-brand {
    font-size: 1.25rem !important;
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    align-items: center !important;
    gap: 0.5rem !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .navbar > .container-xxl > .navbar-brand {
    margin: 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .navbar-brand img {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Убеждаемся, что контейнер navbar правильно отображает логотип */
  .navbar .container-xxl {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

/* Дополнительные стили для больших планшетов (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-brand {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1.25rem !important;
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  
  .navbar-brand img {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}




/* Панель пользователя */
.user-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 10px; /* Сдвиг влево для лучшего позиционирования */
  width: 380px !important;
  max-width: calc(100vw - 20px) !important;
  min-width: 320px !important;
  background: linear-gradient(135deg, rgba(20,22,27,0.98), rgba(10,12,17,0.95));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 32px rgba(139, 92, 246, 0.08);
  backdrop-filter: blur(18px);
  z-index: 1080;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-panel.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Заголовок профиля */
.user-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.user-avatar-large {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(139, 92, 246, 0.4);
}

.avatar-glow-large {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
  animation: avatarGlowLarge 3s ease-in-out infinite;
}

@keyframes avatarGlowLarge {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

.user-info {
  flex: 1;
}

.username {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e8e9ec;
  margin-bottom: 0.25rem;
}

.user-phone {
  font-size: 0.9rem;
  color: #9ca3af;
}

.close-btn {
  background: none;
  border: none;
  color: #9ca3af;
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  transform: scale(1.1);
}

/* Точное позиционирование кнопки закрытия в шапке мини‑профиля */
.user-panel .user-header .close-btn {
  margin-left: auto;
}

/* Блок с баллами */
.points-card-link {
  text-decoration: none;
  display: block;
  margin-bottom: 1.5rem;
}

.points-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.08) 0%, 
    rgba(255, 193, 7, 0.12) 25%,
    rgba(255, 152, 0, 0.08) 50%,
    rgba(255, 215, 0, 0.06) 75%,
    rgba(255, 193, 7, 0.1) 100%);
  border: 2px solid rgba(255, 215, 0, 0.4);
  border-radius: 20px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 100px;
  width: 100%;
  box-shadow: 
    0 8px 32px rgba(255, 215, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Контейнер для искр */
.sparks-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* Искры */
.spark {
  position: absolute;
  width: 6px;
  height: 6px;
  background: linear-gradient(45deg, #FFD700, #FFA500);
  border-radius: 50%;
  opacity: 0;
  animation: sparkFloat 4s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
}

.spark::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  animation: sparkleGlow 4s ease-in-out infinite;
}

.spark-1 {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
  animation-duration: 3.5s;
}

.spark-2 {
  top: 60%;
  left: 25%;
  animation-delay: 0.8s;
  animation-duration: 4.2s;
}

.spark-3 {
  top: 30%;
  left: 70%;
  animation-delay: 1.5s;
  animation-duration: 3.8s;
}

.spark-4 {
  top: 70%;
  left: 80%;
  animation-delay: 2.2s;
  animation-duration: 4.5s;
}

.spark-5 {
  top: 40%;
  left: 45%;
  animation-delay: 0.3s;
  animation-duration: 3.2s;
}

.spark-6 {
  top: 80%;
  left: 60%;
  animation-delay: 1.8s;
  animation-duration: 4s;
}

.spark-7 {
  top: 10%;
  left: 50%;
  animation-delay: 2.5s;
  animation-duration: 3.5s;
}

.spark-8 {
  top: 70%;
  left: 10%;
  animation-delay: 3.2s;
  animation-duration: 4.5s;
}

.spark-9 {
  top: 40%;
  right: 10%;
  animation-delay: 3.9s;
  animation-duration: 3.8s;
}

.spark-10 {
  top: 80%;
  right: 50%;
  animation-delay: 4.6s;
  animation-duration: 4.2s;
}

@keyframes sparkFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0) rotate(0deg);
  }
  20% {
    opacity: 0.9;
    transform: translateY(-15px) scale(1.2) rotate(72deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-30px) scale(1.5) rotate(180deg);
  }
  80% {
    opacity: 0.7;
    transform: translateY(-45px) scale(1.1) rotate(288deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(0) rotate(360deg);
  }
}

@keyframes sparkleGlow {
  0%, 100% { 
    opacity: 0; 
    transform: scale(0.5);
  }
  25% { 
    opacity: 0.4; 
    transform: scale(1.2);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(2);
  }
  75% { 
    opacity: 0.3; 
    transform: scale(1.5);
  }
}

/* Усиление анимации при hover */
.points-card:hover .spark {
  animation-duration: 2.5s;
}

.points-card:hover .spark::before {
  box-shadow: 0 0 15px rgba(255, 215, 0, 1);
}

.points-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
  transition: left 0.6s ease;
}

.points-card::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, 
    rgba(255, 215, 0, 0.1) 0%, 
    rgba(255, 193, 7, 0.15) 25%,
    rgba(255, 152, 0, 0.1) 50%,
    rgba(255, 215, 0, 0.08) 75%,
    rgba(255, 193, 7, 0.12) 100%);
  border-radius: 22px;
  z-index: -1;
  animation: borderGlow 4s ease-in-out infinite;
}

.points-card:hover::before {
  left: 100%;
}

.points-card:hover {
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.15) 0%, 
    rgba(255, 193, 7, 0.2) 25%,
    rgba(255, 152, 0, 0.15) 50%,
    rgba(255, 215, 0, 0.12) 75%,
    rgba(255, 193, 7, 0.18) 100%);
  border-color: rgba(255, 215, 0, 0.8);
  transform: translateY(-6px) scale(1.03);
  box-shadow: 
    0 20px 60px rgba(255, 215, 0, 0.3),
    0 0 40px rgba(255, 193, 7, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.points-card:hover .points-icon {
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.3) 0%, 
    rgba(255, 193, 7, 0.4) 50%,
    rgba(255, 152, 0, 0.3) 100%);
  border-color: rgba(255, 215, 0, 0.9);
  transform: scale(1.1) rotate(5deg);
  box-shadow: 
    0 0 50px rgba(255, 215, 0, 0.8),
    0 0 80px rgba(255, 193, 7, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.points-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.2) 0%, 
    rgba(255, 193, 7, 0.3) 50%,
    rgba(255, 152, 0, 0.2) 100%);
  border: 3px solid rgba(255, 215, 0, 0.6);
  border-radius: 20px;
  color: #FFD700;
  animation: pointsIconPulse 2.5s ease-in-out infinite, starRotate 8s linear infinite;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: all 0.4s ease;
  margin: 0;
  box-shadow: 
    0 0 30px rgba(255, 215, 0, 0.4),
    0 0 60px rgba(255, 193, 7, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.points-icon svg {
  animation: starGlow 2s ease-in-out infinite alternate, starFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
}

.points-icon::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
  border-radius: 28px;
  animation: iconGlow 3s ease-in-out infinite;
  z-index: -1;
}

.points-icon::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border: 2px solid rgba(255, 215, 0, 0.2);
  border-radius: 32px;
  animation: pulseRing 3s ease-in-out infinite;
  z-index: -2;
}

.points-info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0;
  margin: 0;
}

.points-label {
  font-size: 1rem;
  color: rgba(255, 215, 0, 0.9);
  margin: 0 0 0.75rem 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.2;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.points-amount {
  font-size: 2.5rem;
  font-weight: 900;
  color: #FFD700;
  text-shadow: 
    0 0 20px rgba(255, 215, 0, 0.8),
    0 0 40px rgba(255, 193, 7, 0.4);
  margin: 0 0 0.75rem 0;
  line-height: 1;
  letter-spacing: -0.5px;
  background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShine 3s ease-in-out infinite;
}

.points-hint {
  font-size: 0.7rem;
  color: #9ca3af;
  font-weight: 500;
  opacity: 0.9;
  line-height: 1.4;
  margin: 0;
}

.points-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(139, 92, 246, 0.2);
  border-radius: 10px;
  color: #8b5cf6;
  transition: all 0.3s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.points-card:hover .points-action {
  background: rgba(139, 92, 246, 0.3);
  transform: translateX(3px) scale(1.05);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Меню пользователя */
.user-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.menu-item {
  display: flex !important;
  align-items: center;
  gap: 0.25rem !important;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  color: #e8e9ec;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: visible !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
}

.menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
  transition: left 0.5s ease;
}

.menu-item:hover::before {
  left: 100%;
}

.menu-item:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateX(4px);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 8px;
  color: #8b5cf6;
  transition: all 0.3s ease;
}

.menu-item:hover .menu-icon {
  background: rgba(139, 92, 246, 0.2);
  transform: scale(1.1);
}

.menu-item span {
  flex: 1;
  font-weight: 500;
}

.menu-text-container span {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  display: inline-block !important;
  max-width: none !important;
  word-break: keep-all !important;
}

/* Дополнительные стили для предотвращения переноса */
.menu-item * {
  white-space: nowrap !important;
}

.menu-item .menu-text-container,
.menu-item .menu-text-container * {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
}

/* Специфичные стили для "Обрані товари" */
.menu-item:has([href*="favorites"]) .menu-text-container,
.menu-item:has([href*="favorites"]) .menu-text-container span {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
}

/* Агрессивные стили для всех родительских контейнеров */
.user-panel *,
.user-menu *,
.menu-item *,
.menu-text-container * {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
}

/* Дополнительные стили для предотвращения ограничений ширины */
.user-panel,
.user-menu,
.menu-item,
.menu-text-container {
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

/* Увеличение ширины панели для favorites */
.user-panel:has(.menu-item[href*="favorites"]) {
  width: 400px !important;
  min-width: 400px !important;
}

.menu-text-container {
  display: flex !important;
  align-items: center;
  flex: 1;
  white-space: nowrap !important;
  overflow: hidden;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

.menu-arrow {
  color: #6b7280;
  transition: all 0.3s ease;
}

.menu-item:hover .menu-arrow {
  color: #8b5cf6;
  transform: translateX(2px);
}

.admin-item {
  border-color: rgba(239, 68, 68, 0.3);
}

.admin-item:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
}

.admin-item .menu-icon {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.admin-item:hover .menu-icon {
  background: rgba(239, 68, 68, 0.2);
}

/* Кнопка выхода */
.logout-section {
  border-top: 1px solid rgba(139, 92, 246, 0.2);
  padding-top: 1rem;
}

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  color: #ef4444;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
  border-color: rgba(239, 68, 68, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
  color: #ef4444;
  text-decoration: none;
}

/* Для неавторизованных пользователей */
.auth-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.auth-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border-radius: 10px;
  color: #8b5cf6;
}

.auth-title {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 600;
  color: #e8e9ec;
}

.auth-menu {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.auth-btn.primary {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.8), rgba(99, 102, 241, 0.8));
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: white;
}

.auth-btn.primary:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 1), rgba(99, 102, 241, 1));
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
  color: white;
  text-decoration: none;
}

.auth-btn.secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e8e9ec;
}

.auth-btn.secondary:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
  color: #e8e9ec;
  text-decoration: none;
}

.auth-info {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 12px;
}

.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 6px;
  color: #8b5cf6;
  flex-shrink: 0;
}

.info-text {
  font-size: 0.85rem;
  color: #9ca3af;
  line-height: 1.4;
}

/* ===== СТРАНИЦА КОРЗИНЫ ===== */

/* Контейнер страницы корзины */
.cart-page-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}

/* Анимация искр для страницы корзины */
.cart-page-sparks {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.cart-page-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(139, 92, 246, 0.4);
  border-radius: 50%;
  opacity: 0;
  animation: cartPageSparkFloat 8s ease-in-out infinite;
}

.cart-page-spark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
}

.cart-page-spark-1 {
  top: 10%;
  left: 15%;
  animation-delay: 0.5s;
  animation-duration: 5.8s;
}

.cart-page-spark-2 {
  top: 30%;
  left: 85%;
  animation-delay: 1.2s;
  animation-duration: 6.5s;
}

.cart-page-spark-3 {
  top: 60%;
  left: 25%;
  animation-delay: 2.1s;
  animation-duration: 5.2s;
}

.cart-page-spark-4 {
  top: 80%;
  left: 75%;
  animation-delay: 3.3s;
  animation-duration: 6.8s;
}

.cart-page-spark-5 {
  top: 45%;
  left: 60%;
  animation-delay: 4.1s;
  animation-duration: 5.5s;
}

.cart-page-spark-6 {
  top: 15%;
  left: 45%;
  animation-delay: 5.2s;
  animation-duration: 6.2s;
}

@media (prefers-reduced-motion: no-preference) {
@keyframes cartPageSparkFloat {
  0%, 100% { 
    opacity: 0; 
    transform: translateY(0) scale(0.5); 
  }
  20% { 
    opacity: 0.8; 
    transform: translateY(-20px) scale(1); 
  }
  80% { 
    opacity: 0.6; 
    transform: translateY(-40px) scale(0.8); 
  }
}
}

/* Заголовок страницы корзины */
.cart-page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(20,22,27,0.95), rgba(10,12,17,0.9));
  border: 1px solid rgba(139, 92, 246, 0.16);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}

.cart-page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.05));
  pointer-events: none;
}

.cart-page-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border-radius: 12px;
  color: #8b5cf6;
  position: relative;
  z-index: 2;
}

.cart-page-header-content {
  flex: 1;
  position: relative;
  z-index: 2;
}

.cart-page-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #ffffff, #e2e8f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cart-page-subtitle {
  font-size: 0.95rem;
  color: #94a3b8;
  margin: 0.25rem 0 0 0;
}

.cart-clear-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  color: #ef4444;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.cart-clear-btn:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
  border-color: rgba(239, 68, 68, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
}

/* Сообщения корзины */
.cart-message {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  animation: cartMessageSlideIn 0.5s ease-out;
}

.cart-message::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  pointer-events: none;
}

.cart-message-success {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.1));
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.cart-message-success::before {
  background: linear-gradient(45deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.1));
}

.cart-message-error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.cart-message-error::before {
  background: linear-gradient(45deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
}

.cart-message-info {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.cart-message-info::before {
  background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
}

.cart-message-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

.cart-message-success .cart-message-icon {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.cart-message-error .cart-message-icon {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.cart-message-info .cart-message-icon {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.cart-message-text {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
}

.cart-message-success .cart-message-text {
  color: #22c55e;
}

.cart-message-error .cart-message-text {
  color: #ef4444;
}

.cart-message-info .cart-message-text {
  color: #3b82f6;
}

.cart-message-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.cart-message-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

@keyframes cartMessageSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Контент страницы корзины */
.cart-page-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  position: relative;
  z-index: 2;
}

/* Основная секция корзины */
.cart-main-section {
  position: relative;
}

/* Фон для товаров */
.cart-items-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.02), rgba(99, 102, 241, 0.02));
  border-radius: 20px;
  overflow: hidden;
  z-index: 1;
}

.cart-items-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(139, 92, 246, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(99, 102, 241, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.02) 0%, transparent 50%);
  background-size: 200px 200px, 300px 300px, 150px 150px;
  animation: cartPatternFloat 20s ease-in-out infinite;
}

@keyframes cartPatternFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

/* Контейнер товаров */
.cart-items-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Товар в корзине */
.cart-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(20,22,27,0.95), rgba(10,12,17,0.9));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  transition: all 0.3s ease;
  overflow: hidden;
  z-index: 1;
}

.cart-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.03), rgba(99, 102, 241, 0.03));
  pointer-events: none;
  z-index: 0;
}

.cart-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.4);
}

/* Анимация искр для товара */
.cart-item-sparks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.cart-item-spark {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(139, 92, 246, 0.5);
  border-radius: 50%;
  opacity: 0;
  animation: cartItemSparkFloat 4s ease-in-out infinite;
}

.cart-item-spark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  box-shadow: 0 0 6px rgba(139, 92, 246, 0.7);
}

.cart-item-spark-1 {
  top: 20%;
  left: 30%;
  animation-delay: 0.5s;
  animation-duration: 3.8s;
}

.cart-item-spark-2 {
  top: 60%;
  left: 70%;
  animation-delay: 1.2s;
  animation-duration: 4.2s;
}

.cart-item-spark-3 {
  top: 40%;
  left: 50%;
  animation-delay: 2.1s;
  animation-duration: 3.5s;
}

@keyframes cartItemSparkFloat {
  0%, 100% { 
    opacity: 0; 
    transform: translateY(0) scale(0.5); 
  }
  30% { 
    opacity: 0.8; 
    transform: translateY(-15px) scale(1); 
  }
  70% { 
    opacity: 0.4; 
    transform: translateY(-25px) scale(0.7); 
  }
}

/* Изображение товара */
.cart-item-image {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 2;
}

.cart-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.cart-item-image-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.cart-item:hover .cart-item-img {
  transform: scale(1.05);
}

.cart-item:hover .cart-item-image-glow {
  opacity: 1;
}

/* Информация о товаре */
.cart-item-info {
  flex: 1;
  z-index: 2;
}

.cart-item-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: #ffffff;
}

.cart-item-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.cart-item-detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-item-label {
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 500;
}

.cart-item-value {
  font-size: 0.85rem;
  color: #e2e8f0;
  font-weight: 600;
}

.cart-item-color {
  display: flex;
  align-items: center;
}

.cart-item-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.cart-item-swatch.swatch::after,
.cart-item-swatch.swatch::before {
  content: '';
  position: absolute;
  top: 0; height: 100%; width: 50%;
}
.cart-item-swatch.swatch::after {
  left: -0.5px; width: calc(50% + 1px); background: var(--primary-color, transparent);
  border-radius: 50% 0 0 50%;
}
.cart-item-swatch.swatch::before {
  right: -0.5px; width: calc(50% + 1px); background: var(--secondary-color, transparent);
  border-radius: 0 50% 50% 0;
}

.cart-item-price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-item-price-label {
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 500;
}

.cart-item-price-value {
  font-size: 0.9rem;
  color: #8b5cf6;
  font-weight: 600;
}

/* Информация о баллах в товаре */
.cart-item-points {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(251, 191, 36, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.1);
  border-radius: 8px;
}

.cart-item-points-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #fbbf24;
  flex-shrink: 0;
}

.cart-item-points-text {
  font-size: 0.8rem;
  color: #fbbf24;
  font-weight: 500;
}

/* Действия с товаром */
.cart-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  z-index: 5;
  position: relative;
}

.cart-item-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.cart-item-total-label {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 500;
}

.cart-item-total-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #22c55e;
}

.cart-item-remove-btn {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1)) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 8px;
  color: #ef4444 !important;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer !important;
  position: relative;
  z-index: 999 !important;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: auto !important;
}

.cart-item-remove-btn:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2)) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

.cart-item-remove-btn:active {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.3));
  border-color: rgba(239, 68, 68, 0.7);
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4);
}

.cart-item-remove-btn:focus {
  outline: 2px solid rgba(239, 68, 68, 0.5);
  outline-offset: 2px;
}

/* Пустая корзина */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(20,22,27,0.95), rgba(10,12,17,0.9));
  border: 1px solid rgba(139, 92, 246, 0.16);
  border-radius: 20px;
  backdrop-filter: blur(14px);
}

.cart-empty-icon {
  width: 80px;
  height: 80px;
  color: #8b5cf6;
  margin-bottom: 1.5rem;
  opacity: 0.6;
}

.cart-empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
}

.cart-empty-text {
  font-size: 1rem;
  color: #94a3b8;
  margin: 0 0 2rem 0;
}

.cart-empty-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 12px;
  color: #8b5cf6;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cart-empty-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
  border-color: rgba(139, 92, 246, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
}

/* Боковая панель */
.cart-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 2rem;
  height: fit-content;
}

/* Карточки боковой панели */
.cart-sidebar-card {
  position: relative;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(20,22,27,0.95), rgba(10,12,17,0.9));
  border: 1px solid rgba(139, 92, 246, 0.16);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.cart-sidebar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.03), rgba(99, 102, 241, 0.03));
  pointer-events: none;
}

.cart-sidebar-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.cart-sidebar-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border-radius: 10px;
  color: #8b5cf6;
}

.cart-sidebar-card-title {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.cart-auth-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  color: #8b5cf6;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cart-auth-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
}

.cart-sidebar-card-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(139, 92, 246, 0.05);
  border-radius: 10px;
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}

.cart-sidebar-card-hint svg {
  color: #8b5cf6;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Формы корзины */
.cart-sidebar-form {
  position: relative;
  z-index: 2;
}

.cart-form-group {
  margin-bottom: 1.25rem;
}

.cart-form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 0.5rem;
}

.cart-form-input-wrapper {
  position: relative;
}

.cart-form-input,
.cart-form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 10px;
  color: #ffffff;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.cart-form-input::placeholder {
  color: #64748b;
}

.cart-form-input:focus,
.cart-form-select:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
  background: rgba(15, 23, 42, 0.8);
}

.cart-form-input-error {
  border-color: rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.cart-form-input-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.cart-form-input:focus + .cart-form-input-glow,
.cart-form-select:focus + .cart-form-input-glow {
  opacity: 1;
}

.cart-form-error {
  display: none;
  font-size: 0.8rem;
  color: #ef4444;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 6px;
  border-left: 3px solid #ef4444;
}

.cart-form-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2));
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 10px;
  color: #22c55e;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.cart-form-save-btn:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.3));
  border-color: rgba(34, 197, 94, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3);
}

/* Промокоды */
.cart-promo-badge {
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2));
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 8px;
  color: #22c55e;
  font-size: 0.75rem;
  font-weight: 600;
}

.cart-promo-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.cart-promo-applied-content {
  flex: 1;
}

.cart-promo-applied-code {
  font-size: 1rem;
  font-weight: 600;
  color: #22c55e;
  margin-bottom: 0.25rem;
}

.cart-promo-applied-discount {
  font-size: 0.85rem;
  color: #94a3b8;
}

.cart-promo-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: #ef4444;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cart-promo-remove-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  transform: scale(1.1);
}

.cart-promo-input-group {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.cart-promo-input-wrapper {
  flex: 1;
  position: relative;
}

.cart-promo-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 10px;
  color: #ffffff;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.cart-promo-input::placeholder {
  color: #64748b;
}

.cart-promo-input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
  background: rgba(15, 23, 42, 0.8);
}

.cart-promo-input-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.cart-promo-input:focus + .cart-promo-input-glow {
  opacity: 1;
}

.cart-promo-apply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 10px;
  color: #8b5cf6;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cart-promo-apply-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
  border-color: rgba(139, 92, 246, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.cart-promo-message {
  position: relative;
  z-index: 2;
}

.cart-promo-message-success {
  padding: 0.75rem 1rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  color: #22c55e;
  font-size: 0.85rem;
  font-weight: 500;
}

.cart-promo-message-error {
  padding: 0.75rem 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #ef4444;
  font-size: 0.85rem;
  font-weight: 500;
}

.cart-promo-message-info {
  padding: 0.75rem 1rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
  color: #3b82f6;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Карточка оформления заказа */
.cart-checkout-card {
  position: relative;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(20,22,27,0.98), rgba(10,12,17,0.95));
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.cart-checkout-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.05));
  pointer-events: none;
}

.cart-checkout-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.cart-checkout-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2));
  border-radius: 12px;
  color: #22c55e;
}

.cart-checkout-header-content {
  flex: 1;
}

.cart-checkout-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.25rem 0;
}

.cart-checkout-subtitle {
  font-size: 0.9rem;
  color: #94a3b8;
  margin: 0;
}

/* Сводка заказа */
.cart-checkout-summary {
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

.cart-summary-row:last-child {
  border-bottom: none;
}

.cart-summary-label {
  font-size: 0.95rem;
  color: #e2e8f0;
  font-weight: 500;
}

.cart-summary-value {
  font-size: 0.95rem;
  color: #ffffff;
  font-weight: 600;
}

.cart-summary-discount .cart-summary-value {
  color: #22c55e;
}

.cart-discount-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #22c55e;
  font-weight: 600;
}

.cart-summary-total {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(139, 92, 246, 0.2);
}

.cart-summary-total .cart-summary-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
}

.cart-summary-total .cart-summary-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #22c55e;
}

/* Информация о баллах */
.cart-points-summary {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(251, 191, 36, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.1);
  border-radius: 12px;
  position: relative;
  z-index: 2;
}

.cart-points-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cart-points-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  color: #fbbf24;
}

.cart-points-title {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

.cart-points-earned {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cart-points-amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fbbf24;
}

.cart-points-description {
  font-size: 0.85rem;
  color: #94a3b8;
}

.cart-points-none {
  text-align: center;
  padding: 1rem;
}

.cart-points-text {
  font-size: 0.9rem;
  color: #94a3b8;
  font-style: italic;
}

.cart-points-guest {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-points-guest-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  color: #3b82f6;
  font-size: 0.9rem;
}

.cart-points-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 10px;
  color: #3b82f6;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cart-points-login-btn:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.3));
  border-color: rgba(59, 130, 246, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

/* Действия оформления */
.cart-checkout-actions {
  position: relative;
  z-index: 2;
}

.cart-checkout-btn {
  position: relative;
  width: 100%;
  padding: 1.25rem 2rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2));
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 15px;
  color: #22c55e;
  font-size: 1.1rem;
  font-weight: 700;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}

.cart-checkout-btn:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.3));
  border-color: rgba(34, 197, 94, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(34, 197, 94, 0.4);
}

.cart-checkout-btn-guest {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border-color: rgba(139, 92, 246, 0.4);
  color: #8b5cf6;
}

.cart-checkout-btn-guest:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 15px 35px rgba(139, 92, 246, 0.4);
}

.cart-checkout-btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  position: relative;
  z-index: 2;
}

.cart-checkout-btn-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.cart-checkout-btn:hover .cart-checkout-btn-glow {
  opacity: 1;
}

.cart-checkout-btn-guest .cart-checkout-btn-glow {
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
}

.cart-google-pay-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

#google-pay-button-container {
  min-width: 280px;
}

.cart-google-pay-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9rem 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.78);
  font-size: 0.95rem;
}

.cart-google-pay-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: gpay-spin 0.8s linear infinite;
}

@keyframes gpay-spin {
  to { transform: rotate(360deg); }
}

.cart-google-pay-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.65);
  text-align: center;
  font-size: 0.95rem;
}

/* Анимация появления кнопки */
@keyframes googlePayButtonAppear {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cart-google-pay-btn {
  animation: googlePayButtonAppear 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Итого (старые стили для совместимости) */
.cart-total-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border-color: rgba(139, 92, 246, 0.4);
}

.cart-total-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: #22c55e;
}

/* ===== СТРАНИЦА МОИ ЗАКАЗЫ ===== */

/* Основная страница заказов */
.orders-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.5rem 0;
  min-height: 100vh;
}

/* Заголовок страницы */
.orders-header {
  margin-bottom: 2rem;
  text-align: center;
}

.orders-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.05));
  pointer-events: none;
}

.orders-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.orders-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 2px solid rgba(139, 92, 246, 0.3);
  border-radius: 50%;
  margin-bottom: 0.75rem;
  color: #8b5cf6;
}

.orders-header-text {
  flex: 1;
}

.orders-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #e8e9ec;
}

.orders-subtitle {
  font-size: 0.85rem;
  color: #9ca3af;
  font-weight: 400;
}

/* Контейнер заказов */
.orders-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Карточка заказа */
.order-card {
  position: relative;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(15,17,22,0.98), rgba(5,7,12,0.95));
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 16px;
  box-shadow: 0 18px 54px rgba(0,0,0,0.55), 0 0 32px rgba(139, 92, 246, 0.05);
  backdrop-filter: blur(18px);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Анимация искр для заказов */
.order-sparks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.order-spark {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: sparkFloat 3s ease-in-out infinite;
}

.order-spark-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.order-spark-2 {
  top: 60%;
  right: 15%;
  animation-delay: 1s;
}

.order-spark-3 {
  bottom: 30%;
  left: 20%;
  animation-delay: 2s;
}

@keyframes sparkFloat {
  0%, 100% { 
    opacity: 0; 
    transform: translateY(0) scale(1);
  }
  50% { 
    opacity: 1; 
    transform: translateY(-20px) scale(1.5);
  }
}

.order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.25);
}

.order-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.05));
  pointer-events: none;
}

.order-card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.1), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.order-card:hover .order-card-glow {
  opacity: 1;
}

/* Заголовок заказа */
.order-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  position: relative;
  z-index: 2;
}

.order-header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
  max-width: 800px;
  margin: 0 auto;
}

.order-number-container {
  position: relative;
  flex-shrink: 0;
}

.order-number-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.order-number-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: numberGlow 2s ease-in-out infinite;
}

.order-number-btn:hover .order-number-glow {
  opacity: 1;
}

.order-number-btn.copied .order-number-glow {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.3));
  animation: copySuccess 0.5s ease-out;
}

.order-number-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(15, 17, 22, 0.9), rgba(5, 7, 12, 0.8));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  min-width: 160px;
  height: 70px;
  justify-content: center;
}

.order-number-btn:hover .order-number-content {
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.2);
}

.order-number-text {
  font-size: 1rem;
  font-weight: 600;
  color: #e8e9ec;
  transition: color 0.3s ease;
}

.order-number-btn:hover .order-number-text {
  color: #8b5cf6;
}

.copy-icon {
  color: #9ca3af;
  transition: all 0.3s ease;
  opacity: 0.7;
}

.order-number-btn:hover .copy-icon {
  color: #8b5cf6;
  opacity: 1;
  transform: scale(1.1);
}

/* Карточка с баллами */
.order-points-card {
  flex: 0 1 auto;
  width: 200px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.1));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.order-points-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.1), transparent);
  transition: left 0.6s ease;
}

.order-points-card:hover::before {
  left: 100%;
}

.order-points-card:hover {
  border-color: rgba(251, 191, 36, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(251, 191, 36, 0.2);
}

.points-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
  animation: starPulse 2s ease-in-out infinite;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 0.3rem;
}

.points-card-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.points-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.points-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: #fbbf24;
}

.points-label {
  font-size: 0.55rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: rgba(251, 191, 36, 0.8);
}

.points-status.earned .points-amount {
  color: #22c55e;
}

.points-status.earned .points-label {
  color: #16a34a;
}

.points-status.pending .points-amount {
  color: #fbbf24;
}

.points-status.pending .points-label {
  color: #f59e0b;
}

/* Карточка с датой */
.order-date-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(15, 17, 22, 0.9), rgba(5, 7, 12, 0.8));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
  flex-shrink: 0;
  min-width: 160px;
  height: 70px;
  justify-content: center;
}

.order-date-card:hover {
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.1);
}

.date-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
  flex-shrink: 0;
}

.date-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.date-label {
  font-size: 0.65rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  line-height: 1;
}

.date-value {
  font-size: 0.8rem;
  color: #e8e9ec;
  font-weight: 600;
  line-height: 1;
}

@keyframes starPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
  }
  25% {
    transform: scale(1.1) rotate(5deg);
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));
  }
  50% {
    transform: scale(1.05) rotate(-3deg);
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.7));
  }
  75% {
    transform: scale(1.15) rotate(3deg);
    opacity: 0.8;
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.9));
  }
}

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

@keyframes copySuccess {
  0% { 
    transform: scale(1);
  }
  50% { 
    transform: scale(1.1);
  }
  100% { 
    transform: scale(1);
  }
}

.order-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.order-number {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #e8e9ec;
}

.order-date {
  font-size: 0.9rem;
  color: #94a3b8;
}

.order-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.order-total-label {
  font-size: 0.9rem;
  color: #94a3b8;
}

.order-total-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: #22c55e;
}

/* Компактная информация о доставке */
.order-delivery-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  position: relative;
  z-index: 2;
}

.delivery-compact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #9ca3af;
}

.delivery-compact-item svg {
  color: #8b5cf6;
  flex-shrink: 0;
}

.ttn-info {
  color: #8b5cf6;
  font-weight: 500;
}

.ttn-pending {
  color: #fbbf24;
  font-style: italic;
}

.shipment-status-item {
  margin-left: 1rem;
}

.shipment-status-item svg {
  color: #10b981;
}

.shipment-status {
  color: #10b981;
  font-size: 0.875rem;
  font-weight: 400;
  background: rgba(16, 185, 129, 0.1);
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(16, 185, 129, 0.2);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Трек статуса заказа */
.order-status-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.status-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  position: relative;
  min-width: 70px;
}

.status-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(94, 102, 115, 0.2);
  border: 2px solid rgba(94, 102, 115, 0.3);
  border-radius: 50%;
  color: #5e6673;
  transition: all 0.3s ease;
}

.status-step.active .status-step-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2));
  border-color: rgba(34, 197, 94, 0.6);
  color: #22c55e;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
  animation: statusPulse 2s ease-in-out infinite;
}

.status-step.completed .status-step-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2));
  border-color: rgba(34, 197, 94, 0.6);
  color: #22c55e;
}

.status-step-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  transition: color 0.3s ease;
}

.status-step.active .status-step-label {
  color: #22c55e;
}

.status-step.completed .status-step-label {
  color: #22c55e;
}

.status-connector {
  flex: 1;
  height: 2px;
  background: rgba(94, 102, 115, 0.3);
  margin: 0 0.5rem;
  transition: background 0.3s ease;
  border-radius: 1px;
  min-width: 20px;
}

.status-connector.completed {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.6), rgba(22, 163, 74, 0.6));
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

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

/* Информация о доставке */

.ttn-pending {
  color: #fbbf24;
  font-style: italic;
}

/* Товары в заказе */
.order-items-section {
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

/* Анимация кружочков для товаров */
.items-sparks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.items-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: itemsSparkFloat 4s ease-in-out infinite;
}

.items-spark-1 {
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.items-spark-2 {
  top: 30%;
  right: 10%;
  animation-delay: 1s;
}

.items-spark-3 {
  bottom: 20%;
  left: 15%;
  animation-delay: 2s;
}

.items-spark-4 {
  bottom: 40%;
  right: 5%;
  animation-delay: 3s;
}

@keyframes itemsSparkFloat {
  0%, 100% { 
    opacity: 0; 
    transform: translateY(0) scale(1);
  }
  25% { 
    opacity: 1; 
    transform: translateY(-15px) scale(1.2);
  }
  50% { 
    opacity: 0.8; 
    transform: translateY(-25px) scale(1.5);
  }
  75% { 
    opacity: 0.5; 
    transform: translateY(-20px) scale(1.3);
  }
}

.order-items-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.order-items-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #e8e9ec;
}

.order-items-title svg {
  color: #8b5cf6;
}

.order-items-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-item-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(15, 17, 22, 0.9), rgba(5, 7, 12, 0.8));
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.order-item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
  transition: left 0.6s ease;
}

.order-item-card:hover::before {
  left: 100%;
}

.order-item-card:hover {
  background: linear-gradient(135deg, rgba(15, 17, 22, 0.95), rgba(5, 7, 12, 0.9));
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(139, 92, 246, 0.1);
}

.order-item-card:nth-child(odd) {
  animation: slideInLeft 0.6s ease-out;
}

.order-item-card:nth-child(even) {
  animation: slideInRight 0.6s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.order-item-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(139, 92, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(139, 92, 246, 0.2);
  transition: all 0.3s ease;
  position: relative;
}

.order-item-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(139, 92, 246, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.order-item-card:hover .order-item-image::after {
  opacity: 1;
}

.order-item-card:hover .order-item-image {
  transform: scale(1.05);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.order-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-item-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
}

.order-item-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 0;
}

.order-item-main {
  flex: 1;
  min-width: 0;
}

.order-item-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e8e9ec;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.order-item-specs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.order-item-spec {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.spec-label {
  font-size: 0.8rem;
  color: #9ca3af;
  min-width: 60px;
}

.spec-value {
  font-size: 0.8rem;
  color: #e8e9ec;
  font-weight: 500;
}

.order-item-color {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.order-item-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.3);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.order-item-swatch::after,
.order-item-swatch::before {
  content: '';
  position: absolute;
  top: 0; 
  height: 100%; 
  width: 50%;
}

.order-item-swatch::after {
  left: -0.5px; 
  width: calc(50% + 1px); 
  background: var(--primary-color, #000000);
  border-radius: 50% 0 0 50%;
}

.order-item-swatch::before {
  right: -0.5px; 
  width: calc(50% + 1px); 
  background: var(--secondary-color, transparent);
  border-radius: 0 50% 50% 0;
}

.color-name {
  font-size: 0.8rem;
  color: #e8e9ec;
  font-weight: 500;
}

.order-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}

.order-item-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: #22c55e;
}

.order-item-unit-price {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Товары в заказе */

.order-items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.order-items-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.order-items-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-item:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateX(3px);
}

.order-item-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(139, 92, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-item-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #8b5cf6;
}

.order-item-title {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.order-item-color {
  display: flex;
  align-items: center;
}

.order-item-swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.order-item-price {
  text-align: right;
}

/* Компактная сводка заказа */
.order-summary-compact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.1));
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  position: relative;
  z-index: 2;
}

.order-promo-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #fbbf24;
}

.order-promo-compact svg {
  color: #fbbf24;
  flex-shrink: 0;
}

.order-final-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.order-final-label {
  font-size: 0.8rem;
  color: #9ca3af;
}

.order-final-amount {
  font-size: 1rem;
  font-weight: 700;
  color: #22c55e;
}

/* Информация о способе оплаты */
.order-payment-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
  gap: 1rem;
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.payment-method-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(139, 92, 246, 0.2);
  border-radius: 8px;
  color: #8b5cf6;
  flex-shrink: 0;
}

.payment-method-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.payment-method-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #e8e9ec;
}

.method-text {
  flex: 1;
}

.edit-method-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.edit-method-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  transform: scale(1.1);
}

.payment-status {
  display: flex;
  align-items: center;
}

.status-paid {
  font-size: 0.75rem;
  font-weight: 600;
  color: #22c55e;
  padding: 0.25rem 0.5rem;
  background: rgba(34, 197, 94, 0.2);
  border-radius: 4px;
}

.status-partial {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fbbf24;
  padding: 0.25rem 0.5rem;
  background: rgba(251, 191, 36, 0.2);
  border-radius: 4px;
}

.status-unpaid {
  font-size: 0.75rem;
  font-weight: 600;
  color: #ef4444;
  padding: 0.25rem 0.5rem;
  background: rgba(239, 68, 68, 0.2);
  border-radius: 4px;
}

.status-checking {
  font-size: 0.75rem;
  font-weight: 600;
  color: #f59e0b;
  padding: 0.25rem 0.5rem;
  background: rgba(245, 158, 11, 0.2);
  border-radius: 4px;
}

/* Действия с оплатой */
.payment-method-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
}

/* Редактор способа оплаты */
.payment-method-editor {
  background: linear-gradient(135deg, rgba(15, 17, 22, 0.95), rgba(5, 7, 12, 0.95));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 1rem;
  min-width: 280px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: editorSlideIn 0.3s ease-out;
}

@keyframes editorSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes editorSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
}

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.editor-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e8e9ec;
}

.close-editor-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-editor-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: scale(1.1);
}

.editor-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
}

.option-item:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
}

.option-item input[type="radio"] {
  display: none;
}

.option-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #9ca3af;
  transition: color 0.3s ease;
}

.option-item input[type="radio"]:checked + .option-label {
  color: #8b5cf6;
  font-weight: 600;
}

.option-item input[type="radio"]:checked + .option-label svg {
  color: #8b5cf6;
}

.editor-actions {
  display: flex;
  justify-content: flex-end;
}

.save-method-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.8));
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-method-btn:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 1), rgba(22, 163, 74, 0.9));
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

/* Модальное окно предоплаты */
.payment-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.payment-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.payment-modal-content {
  position: relative;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  background: linear-gradient(135deg, rgba(15, 17, 22, 0.95), rgba(5, 7, 12, 0.95));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.payment-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
}

.payment-modal-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #e8e9ec;
  margin: 0;
}

.payment-modal-title svg {
  color: #fbbf24;
}

.payment-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-modal-close:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: scale(1.1);
}

.payment-modal-body {
  padding: 1.5rem;
  max-height: 60vh;
  overflow-y: auto;
}

.payment-instruction {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.instruction-header h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e8e9ec;
  margin-bottom: 0.75rem;
}

.instruction-description {
  font-size: 0.9rem;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0;
}

.order-number-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.order-number-section label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e8e9ec;
}

.order-number-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  color: #e8e9ec;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.order-number-copy:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.payment-details h5 {
  font-size: 1rem;
  font-weight: 600;
  color: #e8e9ec;
  margin-bottom: 1rem;
}

.payment-details-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.detail-item label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #9ca3af;
}

.copyable-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  color: #e8e9ec;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.copyable-text:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
}

.copyable-text svg {
  color: #8b5cf6;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.payment-upload h5 {
  font-size: 1rem;
  font-weight: 600;
  color: #e8e9ec;
  margin-bottom: 0.75rem;
}

.upload-description {
  font-size: 0.85rem;
  color: #9ca3af;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.payment-method-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
  position: relative;
}

.payment-method-separator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(139, 92, 246, 0.3);
}

.payment-method-separator span {
  background: linear-gradient(135deg, rgba(15, 17, 22, 0.95), rgba(5, 7, 12, 0.95));
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 20px;
  z-index: 1;
}

.upload-area {
  border: 2px dashed rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.05);
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-placeholder svg {
  color: #8b5cf6;
  margin-bottom: 1rem;
}

.upload-placeholder p {
  font-size: 1rem;
  font-weight: 600;
  color: #e8e9ec;
  margin-bottom: 0.5rem;
}

.upload-placeholder span {
  font-size: 0.85rem;
  color: #9ca3af;
}

.upload-preview {
  position: relative;
  padding: 1rem;
}

.upload-preview img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
}

.remove-upload {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.9);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.remove-upload:hover {
  background: rgba(239, 68, 68, 1);
  transform: scale(1.1);
}

.payment-modal-footer {
  padding: 1.5rem;
  border-top: 1px solid rgba(139, 92, 246, 0.2);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.05));
  display: flex;
  justify-content: center;
}

.payment-confirm-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.8));
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

  .payment-confirm-btn:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 1), rgba(22, 163, 74, 0.9));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
  }

/* Админ-панель */
.admin-panel {
  min-height: 100vh;
  background: linear-gradient(135deg, rgba(15, 17, 22, 0.95), rgba(5, 7, 12, 0.95));
}

.admin-header {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  padding: 1.5rem 0;
  margin-bottom: 2rem;
}

.admin-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.admin-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: #e8e9ec;
  margin: 0;
}

.admin-title svg {
  color: #8b5cf6;
}

.admin-nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #9ca3af;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.admin-nav-item:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  color: #e8e9ec;
  transform: translateY(-1px);
}

.admin-nav-item.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border-color: rgba(139, 92, 246, 0.5);
  color: #e8e9ec;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.admin-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Статистика */
.stats-section {
  margin-bottom: 2rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  background: linear-gradient(135deg, rgba(15, 17, 22, 0.95), rgba(5, 7, 12, 0.95));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

.stat-icon {
  color: #8b5cf6;
  flex-shrink: 0;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #e8e9ec;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.9rem;
  color: #9ca3af;
}

/* Управление заказами */
.orders-admin-section {
  margin-bottom: 2rem;
}

.orders-filters {
  background: linear-gradient(135deg, rgba(15, 17, 22, 0.95), rgba(5, 7, 12, 0.95));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.filter-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.payment-stats {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.payment-stats .filter-stat-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.payment-stats .filter-stat-item:hover {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

/* Активные фильтры */
.filter-stat-item.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2);
}

.filter-stat-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8b5cf6, #a855f7);
  border-radius: 16px 16px 0 0;
}

.filter-stat-item.active .filter-stat-number {
  color: #8b5cf6;
  font-weight: 700;
}

/* Цветовое кодирование статусов заказов */
.filter-stat-item.status-all .filter-stat-number {
  color: #e8e9ec; /* Белый для всех заказов */
}

/* ===== СЕКЦИЯ ПОЛЬЗОВАТЕЛЕЙ ===== */
.users-admin-section {
  padding: 2rem;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border-radius: 20px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  flex-wrap: wrap;
}

.section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border-radius: 16px;
  color: #8b5cf6;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #e8e9ec;
  margin: 0;
  flex: 1;
}

.section-stats {
  display: flex;
  gap: 1rem;
}

.stat-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 1.5rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 16px;
  color: #22c55e;
}

.stat-badge .stat-number {
  font-size: 1.5rem;
  font-weight: 700;
}

.stat-badge .stat-label {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Поиск по пользователям */
.users-search-section {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 1rem;
}

.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  z-index: 2;
  transition: color 0.3s ease;
}

.users-search-input {
  width: 280px;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #e8e9ec;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.users-search-input::placeholder {
  color: #9ca3af;
  opacity: 0.7;
}

.users-search-input:focus {
  outline: none;
  border-color: #8b5cf6;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.users-search-input:focus + .search-icon {
  color: #8b5cf6;
}

.users-search-input:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Кнопка очистки поиска */
.search-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: none;
}

.search-clear-btn:hover {
  color: #e8e9ec;
  background: rgba(255, 255, 255, 0.1);
}

.users-search-input:not(:placeholder-shown) + .search-clear-btn {
  display: block;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .users-admin-section {
    padding: 0.75rem;
  }
  
  .section-header {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
    padding: 1rem;
  }
  
  .section-title {
    font-size: 1.5rem;
    order: 1;
  }
  
  .section-icon {
    order: 2;
    width: 45px;
    height: 45px;
  }
  
  .users-search-section {
    order: 3;
    margin: 0;
    width: 100%;
  }
  
  .search-container {
    width: 100%;
  }
  
  .users-search-input {
    width: 100%;
    max-width: 100%;
    padding: 0.6rem 1rem 0.6rem 2.25rem;
    font-size: 0.85rem;
  }
  
  .section-stats {
    order: 4;
    width: 100%;
    justify-content: center;
  }
  
  .stat-badge {
    padding: 0.6rem 0.8rem;
  }
  
  .stat-badge .stat-number {
    font-size: 1.1rem;
  }
  
  .stat-badge .stat-label {
    font-size: 0.7rem;
  }
  
  .users-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .user-card {
    padding: 0.75rem;
  }
  
  /* Скоупим вертикальную раскладку только для админских карт пользователей,
     чтобы не ломать мини‑профиль на мобильных */
  .users-admin-section .user-header {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  
  .user-avatar-section {
    justify-content: center;
  }
  
  .user-avatar {
    width: 50px;
    height: 50px;
  }
  
  .user-info-main {
    text-align: center;
    gap: 0.5rem;
  }
  
  .user-name {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }
  
  .user-email,
  .user-phone,
  .user-full-name,
  .user-telegram,
  .user-instagram,
  .user-ubd-status {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
  }
  
  .user-stats-compact {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  
  .stat-item-compact {
    padding: 0.5rem;
  }
  
  .stat-icon-compact {
    width: 12px;
    height: 12px;
  }
  
  .stat-value-compact {
    font-size: 0.9rem;
  }
  
  .stat-label-compact {
    font-size: 0.6rem;
  }
  
  .user-details-expanded {
    margin-top: 0.75rem;
  }
  
  .orders-status-section,
  .payment-status-section {
    margin-bottom: 0.75rem;
  }
  
  .orders-status-section h4,
  .payment-status-section h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .status-grid,
  .payment-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
  
  .status-item,
  .payment-item {
    padding: 0.75rem 0.5rem;
    min-height: 85px;
  }
  
  .status-number,
  .payment-number {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
  }
  
  .status-label,
  .payment-label {
    font-size: 0.65rem;
    line-height: 1.3;
    padding: 0.25rem 0.4rem;
    font-weight: 500;
    min-height: 2.6em;
  }
  
  .promocodes-section {
    margin-top: 0.75rem;
  }
  
  .promocodes-section h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .promocodes-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .promocode-item {
    padding: 0.5rem;
  }
  
  .delivery-section {
    margin-top: 0.75rem;
  }
  
  .delivery-section h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .delivery-info {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .delivery-item {
    padding: 0.5rem;
    min-height: 80px;
  }
  
  .delivery-label {
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
  }
  
  .delivery-value {
    font-size: 0.8rem;
  }
  
  .points-control-section {
    margin-top: 0.75rem;
  }
  
  .points-control-section h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .points-input-wrapper {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .points-input,
  .reason-input {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
  
  .points-save-btn {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }
  
  .user-controls {
    margin-top: 0.75rem;
  }
  
  .control-group {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .control-checkbox {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .users-admin-section {
    padding: 0.75rem;
  }
  
  .section-header {
    padding: 0.75rem;
  }
  
  .section-title {
    font-size: 1.25rem;
  }
  
  .user-card {
    padding: 0.75rem;
  }
  
  .status-grid,
  .payment-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .status-item,
  .payment-item {
    padding: 0.6rem 0.4rem;
    min-height: 75px;
  }
  
  .status-number,
  .payment-number {
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
  }
  
  .status-label,
  .payment-label {
    font-size: 0.6rem;
    line-height: 1.2;
    padding: 0.2rem 0.3rem;
    min-height: 2.4em;
  }
  
  .stat-badge {
    padding: 0.5rem 0.75rem;
  }
  
  .stat-badge .stat-number {
    font-size: 1rem;
  }
  
  /* Дополнительные исправления для очень маленьких экранов */
  .status-grid,
  .payment-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .status-grid .status-item,
  .payment-grid .payment-item {
    padding: 0.5rem;
    text-align: center;
  }
  
  .status-grid .status-number,
  .payment-grid .payment-number {
    font-size: 1rem;
  }
  
  .status-grid .status-label,
  .payment-grid .payment-label {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
}

/* Сетка пользователей */
.users-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* Общие стили для статусов заказов */
.status-grid,
.payment-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.status-item,
.payment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.75rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  min-height: 100px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.status-item::before,
.payment-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8b5cf6, #a855f7);
  border-radius: 16px 16px 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.status-item:hover::before,
.payment-item:hover::before {
  opacity: 1;
}

.status-item:hover,
.payment-item:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

.status-number,
.payment-number {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.status-label,
.payment-label {
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  color: #e8e9ec;
  padding: 0.3rem 0.4rem;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Цветовая схема для статусов заказов */
.status-item.status-new .status-number { color: #f59e0b; }
.status-item.status-prep .status-number { color: #3b82f6; }
.status-item.status-ship .status-number { color: #f59e0b; }
.status-item.status-done .status-number { color: #22c55e; }
.status-item.status-cancelled .status-number { color: #ef4444; }

/* Цветовая схема для статусов оплаты */
.payment-item.payment-unpaid .payment-number { color: #f59e0b; }
.payment-item.payment-checking .payment-number { color: #f59e0b; }
.payment-item.payment-partial .payment-number { color: #f59e0b; }
.payment-item.payment-paid .payment-number { color: #22c55e; }

/* Мобильная адаптация для сетки пользователей */
@media (max-width: 768px) {
  .users-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Карточка пользователя */
.user-card {
  background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
  border: 1px solid #404040;
  border-radius: 20px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  color: #e8e9ec;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.user-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #f59e0b);
  border-radius: 20px 20px 0 0;
  animation: shimmer 3s ease-in-out infinite;
}

.user-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.user-card:hover::after {
  left: 100%;
}

.user-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  border-color: #8b5cf6;
}

/* Анимация искр */
.user-sparks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.user-spark {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: sparkle 2s linear infinite;
}

.user-spark-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.user-spark-2 {
  top: 60%;
  right: 15%;
  animation-delay: 0.7s;
}

.user-spark-3 {
  bottom: 30%;
  left: 20%;
  animation-delay: 1.4s;
}

@keyframes sparkle {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
}

/* Заголовок пользователя */
.user-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.user-avatar-section {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-avatar {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(139, 92, 246, 0.3);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.default-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
}

.user-status-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1e1e1e;
  font-size: 8px;
}

.user-info-main {
  flex: 1;
}

.user-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #e8e9ec;
  margin-bottom: 0.5rem;
}

.user-email,
.user-phone,
.user-full-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #9ca3af;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.user-email svg,
.user-phone svg,
.user-full-name svg,
.user-telegram svg,
.user-instagram svg {
  color: #8b5cf6;
  flex-shrink: 0;
}

/* УБД статус в основной информации профиля */
.user-ubd-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #9ca3af;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.user-ubd-status svg {
  color: #8b5cf6;
  flex-shrink: 0;
}

.user-ubd-status .ubd-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  color: #22c55e;
  font-size: 0.8rem;
  font-weight: 600;
}

.user-telegram,
.user-instagram {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #9ca3af;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

/* Статистика пользователя */

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 0;
}

.stat-item:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
}

.stat-icon {
  color: #8b5cf6;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.stat-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e8e9ec;
  line-height: 1;
}

.stat-label {
  font-size: 0.7rem;
  color: #9ca3af;
  line-height: 1.2;
  white-space: nowrap;
}

/* Компактная статистика пользователя */
.user-stats-compact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin: 1rem 0;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

/* Кликабельные элементы */
.clickable {
  cursor: pointer;
  transition: all 0.3s ease;
}

.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

/* Секция управления балами */
.points-control-section {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

.points-form {
  margin-top: 1rem;
}

.points-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.points-input-group label {
  color: #e8e9ec;
  font-weight: 500;
  font-size: 0.9rem;
}

.points-input-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.points-input {
  flex: 1;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #e8e9ec;
  font-size: 0.9rem;
}

.reason-input {
  flex: 1;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #e8e9ec;
  font-size: 0.9rem;
}

.points-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Кнопка сохранения для управления балами */
.points-save-btn {
  margin-top: 1rem;
  width: 100%;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  border: none;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  padding: 0.875rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.points-save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
  background: linear-gradient(135deg, #a855f7, #c084fc);
}

.points-save-btn svg {
  width: 18px;
  height: 18px;
}

/* Подсекции промокодов */
.promocodes-subsection {
  margin: 1rem 0;
}

.promocodes-subsection h5 {
  color: #e8e9ec;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}

.promocode-date {
  font-size: 0.75rem;
  color: #9ca3af;
  text-align: center;
  margin-top: 0.25rem;
}

.stat-item-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  transition: all 0.3s ease;
  min-width: 0;
}

.stat-item-compact:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
}

.stat-icon-compact {
  color: #8b5cf6;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.stat-content-compact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
  overflow: hidden;
}

.stat-value-compact {
  font-size: 1rem;
  font-weight: 700;
  color: #e8e9ec;
  line-height: 1;
}

.stat-label-compact {
  font-size: 0.65rem;
  color: #9ca3af;
  line-height: 1.2;
  white-space: nowrap;
}

/* Детальная информация */
.user-details-expanded {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}

.orders-status-section,
.payment-status-section {
  margin-bottom: 1.5rem;
}

.orders-status-section h4,
.payment-status-section h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #e8e9ec;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-grid,
.payment-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

.status-item,
.payment-item {
  text-align: center;
  padding: 0.75rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.status-item:hover,
.payment-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.status-number,
.payment-number {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.status-label,
.payment-label {
  font-size: 0.7rem;
  color: #9ca3af;
}

/* Цвета статусов */
.status-item.new .status-number { color: #f59e0b; }
.status-item.prep .status-number { color: #3b82f6; }
.status-item.ship .status-number { color: #f97316; }
.status-item.done .status-number { color: #22c55e; }
.status-item.cancelled .status-number { color: #ef4444; }

.payment-item.unpaid .payment-number,
.payment-item.checking .payment-number { color: #f59e0b; }
.payment-item.partial .payment-number { color: #f97316; }
.payment-item.paid .payment-number { color: #22c55e; }

/* Управление пользователем */
.user-controls {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}

.control-section {
  margin-bottom: 1.5rem;
}

.control-section h5 {
  font-size: 1rem;
  font-weight: 600;
  color: #e8e9ec;
  margin-bottom: 1rem;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.control-checkbox {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.control-checkbox:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
}

.control-checkbox input[type="checkbox"] {
  display: none;
}

.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  position: relative;
  transition: all 0.3s ease;
}

.control-checkbox input[type="checkbox"]:checked + .checkmark {
  background: #8b5cf6;
  border-color: #8b5cf6;
}

.control-checkbox input[type="checkbox"]:checked + .checkmark::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.label-text {
  color: #e8e9ec;
  font-weight: 500;
}

/* Управление балами */

.points-display {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 16px;
  margin-bottom: 1rem;
}

.points-display-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.points-display-content {
  flex: 1;
}

.points-display-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #e8e9ec;
  line-height: 1;
}

.points-display-label {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-top: 0.25rem;
}

.input-group {
  display: flex;
  gap: 0.75rem;
}

.points-input,
.reason-input {
  flex: 1;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #e8e9ec;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.points-input:focus,
.reason-input:focus {
  outline: none;
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
}

.points-input::placeholder,
.reason-input::placeholder {
  color: #9ca3af;
}

/* Кнопка сохранения */
.save-btn {
  width: 100%;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
}

.save-btn:active {
  transform: translateY(0);
}

.save-btn svg {
  width: 18px;
  height: 18px;
}

/* Промокоды и доставка */
.promocodes-section,
.delivery-section {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}

/* Улучшенный дизайн для секции доставки */
.delivery-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.delivery-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8b5cf6, #a855f7, #ec4899);
  border-radius: 20px 20px 0 0;
}

.promocodes-section h4,
.delivery-section h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #e8e9ec;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.promocodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.promocode-item {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

.promocode-item:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
}

.promocode-code {
  font-size: 1.1rem;
  font-weight: 700;
  color: #8b5cf6;
  margin-bottom: 0.5rem;
  font-family: 'Courier New', monospace;
}

.promocode-discount {
  font-size: 0.9rem;
  color: #22c55e;
  margin-bottom: 0.5rem;
}

.promocode-status {
  font-size: 0.8rem;
  color: #9ca3af;
}

.promocode-status.used {
  color: #ef4444;
}

.promocode-status.active {
  color: #22c55e;
}

.promocode-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.promocode-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.promocode-btn.give {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.promocode-btn.give:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.promocode-btn.remove {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.promocode-btn.remove:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.delivery-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.delivery-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  min-height: 100px;
  justify-content: center;
}

.delivery-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
  transition: left 0.6s ease;
}

.delivery-item:hover::before {
  left: 100%;
}

.delivery-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
}

.delivery-label {
  font-size: 0.75rem;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.8;
  position: relative;
}

.delivery-label::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, #8b5cf6, transparent);
  border-radius: 1px;
}

.delivery-value {
  font-size: 1.1rem;
  color: #e8e9ec;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.5rem 0;
}

/* Специальные стили для УБД статуса */
.delivery-value .ubd-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 20px;
  color: #22c55e;
  font-size: 0.9rem;
  font-weight: 600;
}

.delivery-value .ubd-status::before {
  content: '✓';
  font-weight: bold;
  color: #22c55e;
}

.filter-stat-item.status-new .filter-stat-number {
  color: #f59e0b; /* Желтый для "В обробці" */
}

.filter-stat-item.status-prep .filter-stat-number {
  color: #3b82f6; /* Синий для "Готується до відправлення" */
}

.filter-stat-item.status-ship .filter-stat-number {
  color: #f97316; /* Оранжевый для "Відправлено" */
}

.filter-stat-item.status-done .filter-stat-number {
  color: #22c55e; /* Зеленый для "Отримано" */
}

.filter-stat-item.status-cancelled .filter-stat-number {
  color: #ef4444; /* Красный для "Скасовано" */
}

/* Цветовое кодирование статусов оплаты */
.filter-stat-item.payment-unpaid .filter-stat-number {
  color: #f59e0b; /* Желтый для "Не оплачено" */
}

.filter-stat-item.payment-checking .filter-stat-number {
  color: #f59e0b; /* Желтый для "На перевірці" */
}

.filter-stat-item.payment-partial .filter-stat-number {
  color: #f97316; /* Оранжевый для "Частково оплачено" */
}

.filter-stat-item.payment-paid .filter-stat-number {
  color: #22c55e; /* Зеленый для "Оплачено" */
}

.filter-stat-item {
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.filter-stat-item:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
}

/* Специальные hover-эффекты для статусов */
.filter-stat-item.status-new:hover {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}

.filter-stat-item.status-prep:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

.filter-stat-item.status-ship:hover {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.3);
}

.filter-stat-item.status-done:hover {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

.filter-stat-item.status-cancelled:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

/* Специальные hover-эффекты для статусов оплаты */
.filter-stat-item.payment-unpaid:hover,
.filter-stat-item.payment-checking:hover {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}

.filter-stat-item.payment-partial:hover {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.3);
}

.filter-stat-item.payment-paid:hover {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

.filter-stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #e8e9ec;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.filter-stat-item:hover .filter-stat-number {
  transform: scale(1.1);
  text-shadow: 0 0 10px currentColor;
}

.filter-stat-label {
  font-size: 0.8rem;
  color: #9ca3af;
}

.filter-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-select {
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #e8e9ec;
  font-size: 0.9rem;
  min-width: 200px;
}

.filter-select:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.1);
}

/* Карточки заказов в админке */
.admin-order-card {
  background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
  border: 1px solid #404040;
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  color: #e8e9ec;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.admin-order-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #f59e0b);
  border-radius: 16px 16px 0 0;
  animation: shimmer 3s ease-in-out infinite;
}

.admin-order-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.admin-order-card:hover::after {
  left: 100%;
}

.admin-order-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(139, 92, 246, 0.25);
  border-color: #8b5cf6;
  background: linear-gradient(135deg, #303030 0%, #222222 100%);
}

@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Кликабельные статусы для админа */
.admin-status-track .status-step {
  cursor: pointer;
  transition: all 0.3s ease;
}

.admin-status-track .status-step:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

.admin-status-track .status-step:active {
  transform: scale(0.95);
}

/* Статус оплаты */
.order-payment-status {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
}

.payment-status-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: #e8e9ec;
  font-weight: 600;
}

.payment-status-select {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.75rem;
  color: #e8e9ec;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.payment-status-select:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

/* Сворачиваемый скриншот */
.payment-screenshot-collapsible {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin: 1rem 0;
  overflow: hidden;
}

.screenshot-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #e8e9ec;
  font-weight: 600;
}

.screenshot-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.screenshot-status {
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-left: auto;
  margin-right: 0.5rem;
}

.screenshot-status.checking {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.screenshot-status.approved {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.screenshot-status.partial {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.screenshot-status.unpaid {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.toggle-icon {
  margin-left: auto;
  transition: transform 0.3s ease;
}

.screenshot-content {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1rem;
}

.screenshot-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.payment-screenshot {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.screenshot-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-approve, .btn-reject {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-approve {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.btn-approve:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
}

.btn-reject {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.btn-reject:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
}

.screenshot-info {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  color: #9ca3af;
  font-size: 0.9rem;
}

.info-value {
  color: #e8e9ec;
  font-weight: 600;
  font-size: 0.9rem;
}

.order-customer-info {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  align-items: center;
}

.customer-details {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.customer-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e8e9ec;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.customer-name::before {
  content: '👤';
  font-size: 1rem;
}

.customer-phone {
  font-size: 0.9rem;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.customer-phone::before {
  content: '📞';
  font-size: 0.8rem;
}

.customer-email {
  font-size: 0.85rem;
  color: #8b5cf6;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.customer-email::before {
  content: '✉️';
  font-size: 0.8rem;
}

.order-date-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.order-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #9ca3af;
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.order-date svg {
  color: #8b5cf6;
}

/* Сумма заказа */
.order-total-section {
  margin: 1rem 0;
}

.order-total-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.order-total-card:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.15));
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
}

.total-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  border-radius: 10px;
  color: white;
}

.total-content {
  flex: 1;
}

.total-label {
  font-size: 0.85rem;
  color: #9ca3af;
  margin-bottom: 0.25rem;
}

.total-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fbbf24;
}

.order-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  text-align: right;
}

.delivery-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #9ca3af;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: all 0.2s ease;
}

.delivery-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(139, 92, 246, 0.3);
}

.delivery-item svg {
  color: #8b5cf6;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.order-items h4::before {
  content: '🛍️';
  font-size: 1rem;
}

.order-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #6366f1, #8b5cf6, #ec4899);
  border-radius: 12px 0 0 12px;
}

.order-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateX(4px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.2);
}

.order-item:hover 

.order-item:hover 

.item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.25rem 0;
}

.item-name {
  font-weight: 700;
  color: #e8e9ec;
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 0.2rem;
}

.item-description {
  font-size: 0.85rem;
  color: #9ca3af;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.item-quantity::before {
  content: '📦';
  font-size: 0.8rem;
}

.unit-price::before {
  content: '💵';
  font-size: 0.8rem;
}

.total-price::before {
  content: '💰';
  font-size: 0.9rem;
}

.item-description {
  font-size: 0.85rem;
  color: #9ca3af;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* Скриншот оплаты */

.screenshot-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.payment-screenshot {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  object-fit: contain;
}

.screenshot-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-approve, .btn-reject {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-approve {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.8));
  color: #ffffff;
}

.btn-approve:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 1), rgba(22, 163, 74, 0.9));
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.btn-reject {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.8));
  color: #ffffff;
}

.btn-reject:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 1), rgba(220, 38, 38, 0.9));
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

/* Управление статусами */

.order-management::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
}

.status-group label::before {
  content: '⚙️';
  font-size: 0.8rem;
}

.status-select:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(139, 92, 246, 0.4);
}

.status-select:focus {
  outline: none;
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.order-summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #6366f1, #8b5cf6, #ec4899);
  border-radius: 10px 0 0 10px;
}

.summary-item:last-child {
  border-bottom: none;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fbbf24;
  padding-top: 0.5rem;
  border-top: 2px solid rgba(139, 92, 246, 0.2);
}

.summary-label::before {
  content: '💰';
  font-size: 0.8rem;
}

/* Уведомления */

/* Адаптивность */
@media (max-width: 768px) {
  .admin-header-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .admin-nav {
    width: 100%;
    justify-content: center;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .filter-controls {
    flex-direction: column;
  }
  
  .filter-select {
    min-width: auto;
  }

}

/* Адаптивность для модального окна */
@media (max-width: 768px) {
  .payment-modal-content {
    width: 95%;
    max-height: 95vh;
  }
  
  .payment-modal-header {
    padding: 1rem;
  }
  
  .payment-modal-title {
    font-size: 1.1rem;
  }
  
  .payment-modal-body {
    padding: 1rem;
  }
  
  .payment-modal-footer {
    padding: 1rem;
  }
  
  .payment-confirm-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Кнопки оплаты */
.payment-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.payment-btn::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.5s ease;
}

.payment-btn:hover::before {
  left: 100%;
}

.payment-btn-partial {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.9), rgba(245, 158, 11, 0.8));
  color: #1f2937;
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
}

.payment-btn-partial:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 1), rgba(245, 158, 11, 0.9));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
}

.payment-btn-full {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.8));
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.payment-btn-full:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 1), rgba(22, 163, 74, 0.9));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

/* Сводка заказа */

.order-final-label {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

.order-final-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: #22c55e;
}

/* Уведомление о копировании */
.copy-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.copy-notification.show {
  transform: translateX(0);
}

.copy-notification-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(22, 163, 74, 0.9));
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
}

.copy-notification-content svg {
  color: #ffffff;
  flex-shrink: 0;
}

/* Адаптивные стили для заказов */
@media (max-width: 768px) {
  .order-delivery-compact {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .order-status-track {
    display: flex;
    flex-direction: row !important;
    gap: 0.1rem;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
  }
  
  .order-status-track::-webkit-scrollbar {
    display: none;
  }
  
  .status-step {
    flex-shrink: 0;
    min-width: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
  }
  
  .status-step-icon {
    width: 20px;
    height: 20px;
  }
  
  .status-step-label {
    font-size: 0.5rem;
    margin-top: 0.1rem;
    white-space: nowrap;
    line-height: 1;
  }
  
  .status-connector {
    flex: 1 !important;
    min-width: 20px !important;
    height: 2px !important;
    background: rgba(94, 102, 115, 0.6) !important;
    border-radius: 1px !important;
    opacity: 0.8 !important;
    margin: 0 0.3rem !important;
  }
  
  .order-header-row {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    max-width: 100%;
    padding: 0.5rem 0;
  }
  
  .order-number-container {
    align-self: center;
  }
  
  .order-points-card {
    width: 100%;
    max-width: 280px;
    height: auto;
    min-height: 70px;
  }
  
  .order-date-card {
    width: 100%;
    max-width: 280px;
    height: auto;
    min-height: 70px;
    justify-content: center;
  }
  
  .order-summary-compact {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
  
  .order-payment-info {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .payment-method {
    width: 100%;
    justify-content: space-between;
  }
  
  .payment-method-actions {
    width: 100%;
    align-items: stretch;
  }
  
  .payment-method-editor {
    width: 100%;
    min-width: auto;
  }
  
  .payment-btn {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.25rem;
  }
  
  .order-item-card {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .order-item-content {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .order-item-side {
    align-items: flex-start;
  }
  
  .copy-notification {
    top: 10px;
    right: 10px;
    left: 10px;
  }
  
  .copy-notification-content {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 576px) {
  .orders-page {
    padding: 1rem 0;
  }
  
  .order-card {
    padding: 1rem;
    margin-bottom: 0.75rem;
  }
  
  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .order-total {
    align-self: flex-end;
  }
}

/* Пустое состояние */
.orders-empty {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(15,17,22,0.98), rgba(5,7,12,0.95));
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(139, 92, 246, 0.05);
  backdrop-filter: blur(30px);
}

.orders-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 2px solid rgba(139, 92, 246, 0.3);
  border-radius: 50%;
  color: #8b5cf6;
}

.orders-empty-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e8e9ec;
  margin: 0 0 1rem 0;
}

.orders-empty-text {
  font-size: 1rem;
  color: #9ca3af;
  margin: 0 0 2rem 0;
}

.orders-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  color: #8b5cf6;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.orders-empty-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-1px);
  color: #8b5cf6;
}

/* Адаптивность */
@media (max-width: 768px) {
  .orders-header-content {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .orders-title {
    font-size: 1.5rem;
  }
  
  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .order-status-track {
    flex-direction: column;
    gap: 1rem;
  }
  
  .status-connector {
    width: 2px;
    height: 20px;
    margin: 0;
  }

  .order-item-price {
    text-align: left;
    width: 100%;
  }
}

.cart-delivery-info {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: rgba(139, 92, 246, 0.05);
  border-radius: 8px;
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}

.cart-delivery-info svg {
  color: #8b5cf6;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.cart-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2));
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 12px;
  color: #22c55e;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.cart-checkout-btn:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.3));
  border-color: rgba(34, 197, 94, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(34, 197, 94, 0.4);
}

/* Адаптивность */
@media (max-width: 1024px) {
  .cart-page-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .cart-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .cart-page-container {
    padding: 1rem 0;
  }
  
  .cart-page-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .cart-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .cart-item-actions {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .cart-sidebar-card {
    padding: 1.25rem;
  }
}

@media (max-width: 576px) {
  .cart-page-header {
    padding: 1rem;
  }
  
  .cart-page-title {
    font-size: 1.5rem;
  }
  
  .cart-item {
    padding: 1rem;
  }
  
  .cart-item-image {
    width: 60px;
    height: 60px;
  }
  
  .cart-sidebar-card {
    padding: 1rem;
  }
}

/* ===== НАВИГАЦИЯ ===== */
/* Адаптивность для панелей */
@media (min-width: 769px) {
  .cart-panel,
  .user-panel {
    max-width: 380px;
  }
  
  /* Предотвращение выхода за правый край экрана */
  .cart-container:last-child .cart-panel,
  .user-profile-container:last-child .user-panel {
    right: 0;
  }
}

@media (max-width: 768px) {
  .cart-panel,
  .user-panel {
    position: fixed;
    top: 70px;
    right: 10px;
    left: 10px;
    width: auto;
    max-width: none;
  }
  
  /* Мобильные стили для navbar */
  .navbar .container-xxl {
    padding: 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
    display: flex !important;
  }
  
  .navbar-brand {
    font-size: 1.25rem !important;
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    align-items: center !important;
    gap: 0.5rem !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  
  /* Принудительно устанавливаем позицию логотипа */
  .navbar > .container-xxl > .navbar-brand {
    margin: 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
  }
  
  .navbar-brand img {
    width: 28px !important;
    height: 28px !important;
  }
  
  .navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: auto !important;
  }
  
  .navbar-collapse {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(13, 14, 17, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  .navbar .d-flex.align-items-center.gap-2 {
    gap: 0.5rem !important;
    margin-left: auto !important;
  }
  
  .navbar .cart-container {
    margin-left: 0; /* Убрано для правильного расстояния */
  }
  
  .navbar .btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
}

@media (max-width: 576px) {
  .cart-panel,
  .user-panel {
    top: 60px;
    right: 5px;
    left: 5px;
    padding: 1rem;
  }
  /* Сохраняем горизонтальный заголовок в мини‑профиле на мобильных */
  #user-panel-mobile .user-header {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 1rem;
  }
  #user-panel-mobile .user-avatar-large { width: 56px; height: 56px; }
  #user-panel-mobile .username { font-size: 1.1rem; }
  #user-panel-mobile .user-phone { font-size: 0.9rem; }
  
  /* Стили для очень маленьких экранов */
  .navbar .container-xxl {
    padding: 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
    display: flex !important;
  }
  
  .navbar-brand {
    font-size: 1.25rem !important;
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    align-items: center !important;
    gap: 0.5rem !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  
  /* Принудительно устанавливаем позицию логотипа */
  .navbar > .container-xxl > .navbar-brand {
    margin: 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
  }
  
  .navbar-brand img {
    width: 28px !important;
    height: 28px !important;
  }
  
  .navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: auto !important;
  }
  
  .navbar-collapse {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(13, 14, 17, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Принудительно убираем все отступы у контейнера */
  .navbar > .container-xxl {
    padding: 0 !important;
  }
  
  /* Принудительно убираем все отступы у логотипа */
  .navbar > .container-xxl > .navbar-brand {
    padding: 0.25rem 0 0.25rem 0 !important;
    margin: 0 !important;
  }
  
  /* Принудительно убираем все отступы у navbar */
  .navbar {
    padding: 0.5rem 0 0.5rem 0 !important;
  }
  
  /* Принудительно убираем все отступы у body и html */
  body, html {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Принудительно переопределяем основные стили для мобильных */
  .navbar > .container-xxl {
    padding: 0 !important;
    justify-content: flex-start !important;
  }
  
  .navbar > .container-xxl > .navbar-brand {
    padding: 0.25rem 0 0.25rem 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
  
  .navbar > .container-xxl > .navbar-toggler {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  
  /* Принудительно убираем все отступы у navbar */
  .navbar {
    padding: 0.5rem 0 0.5rem 0 !important;
  }
  
  /* Принудительно переопределяем основные стили для мобильных */
  .navbar > .container-xxl {
    padding: 0 !important;
    justify-content: flex-start !important;
  }
  
  .navbar > .container-xxl > .navbar-brand {
    padding: 0.25rem 0 0.25rem 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
  
  .navbar > .container-xxl > .navbar-toggler {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  
  .navbar .d-flex.align-items-center.gap-2 {
    gap: 0.5rem !important;
  }
  
  .navbar .cart-container {
    margin-left: 0; /* Убрано для правильного расстояния */
  }
  
  .navbar .btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
}
.navbar {
  min-height: auto !important;
  padding: 0.5rem 0 !important;
}

.navbar .container-xxl {
  padding: 0 1rem !important;
}

.navbar-brand {
  font-size: 1.25rem !important;
  padding: 0.25rem 0 !important;
}

.navbar-nav {
  margin: 0 !important;
}

.navbar-nav .nav-link {
  padding: 0.5rem 1rem !important;
  font-size: 0.9rem !important;
}

.navbar .d-flex.align-items-center.gap-2 {
  align-items: center !important;
  gap: 0.25rem; /* Уменьшено с 0.5rem до 0.25rem */
  margin: 0 !important;
  padding: 0 !important;
  margin-left: auto !important;
}

.navbar .cart-container,
.navbar .user-profile-container {
  display: inline-flex !important;
  align-items: center !important;
  /* margin: 0 убрано чтобы ms-4 работал */
}

.navbar .cart-container {
  margin-left: 0; /* Убрано для правильного расстояния */
}

.navbar .btn-sm {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
}

.navbar .form-control-sm {
  height: calc(1.5em + 0.5rem + 2px) !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
}

/* ===== КОРЗИНА ===== */
.cart-container {
  position: relative;
  display: inline-block;
}

.cart-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  display: inline-block;
}

.cart-btn:hover {
  transform: scale(1.05);
}

.cart-icon-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: visible;
  border: 2px solid rgba(139, 92, 246, 0.3);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.cart-icon-wrapper:hover {
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
}

.cart-icon {
  color: #8b5cf6;
  transition: all 0.3s ease;
  width: 20px;
  height: 20px;
}

.cart-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.cart-icon-wrapper:hover .cart-glow {
  opacity: 1;
  animation: cartPulse 2s ease-in-out infinite;
}

@keyframes cartPulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.6; }
}

.cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid #1a1a1a;
  animation: cartBadgePulse 2s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  line-height: 1;
  z-index: 10;
}

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

/* Контейнер для корзины и избранного */
.cart-favorites-container {
  display: flex;
  align-items: center;
  gap: 0.25rem; /* Уменьшено с 0.5rem до 0.25rem */
}

/* Стили для иконки избранного */
.favorites-container {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.favorites-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  width: 100%;
  height: 100%;
  display: block;
}

.favorites-btn:hover {
  transform: scale(1.05);
  text-decoration: none;
  color: inherit;
}

.favorites-icon-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(15, 17, 22, 0.95), rgba(5, 7, 12, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.favorites-icon-wrapper:hover {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
}

.favorites-icon {
  width: 20px;
  height: 20px;
  color: #ef4444;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
}

.favorites-icon-wrapper:hover .favorites-icon {
  color: #fca5a5;
  transform: translate(-50%, -50%) scale(1.1);
  filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.8)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Анимация сердечка когда есть товары в избранном */
.favorites-icon-wrapper.has-items .favorites-icon {
  animation: heartBeat 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@keyframes heartBeat {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }
  25% { 
    transform: translate(-50%, -50%) scale(1.1);
    filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.8)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.05);
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.7)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }
  75% { 
    transform: translate(-50%, -50%) scale(1.1);
    filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.8)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }
}

.favorites-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, transparent 70%);
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.favorites-icon-wrapper:hover .favorites-glow {
  opacity: 1;
  /* animation: favoritesPulse 2s ease-in-out infinite; */ /* Отключено для отладки */
}

/* Постоянное свечение когда есть товары в избранном */
.favorites-icon-wrapper.has-items .favorites-glow {
  opacity: 0.4;
  /* animation: favoritesConstantGlow 3s ease-in-out infinite; */ /* Отключено для отладки */
}

@keyframes favoritesPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
}

@keyframes favoritesConstantGlow {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1); 
    opacity: 0.4;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 70%);
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.1); 
    opacity: 0.6;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.6) 0%, transparent 70%);
  }
}

.favorites-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex; /* Всегда виден */
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid transparent;
  /* animation: favoritesBadgePulse 0.6s ease-out; */ /* Отключено для отладки */
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  line-height: 1;
  z-index: 10;
  transition: all 0.3s ease;
}

@keyframes favoritesBadgePulse {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.favorites-icon-wrapper:hover .favorites-badge {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
}

/* Панель корзины */
.cart-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 10px; /* Сдвиг влево для лучшего позиционирования */
  width: 380px;
  max-width: calc(100vw - 40px);
  background: linear-gradient(135deg, rgba(20,22,27,0.98), rgba(10,12,17,0.95));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(139, 92, 246, 0.1);
  backdrop-filter: blur(30px);
  z-index: 1080;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Контейнер для искр корзины */
.cart-sparks-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* Искры корзины */
.cart-spark {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(139, 92, 246, 0.6);
  border-radius: 50%;
  opacity: 0;
  animation: cartSparkFloat 4s ease-in-out infinite;
}

.cart-spark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  box-shadow: 0 0 4px rgba(139, 92, 246, 0.8);
}

.cart-spark-1 {
  top: 15%;
  left: 20%;
  animation-delay: 0.5s;
  animation-duration: 3.8s;
}

.cart-spark-2 {
  top: 65%;
  left: 30%;
  animation-delay: 1.2s;
  animation-duration: 4.5s;
}

.cart-spark-3 {
  top: 25%;
  left: 75%;
  animation-delay: 0.8s;
  animation-duration: 3.5s;
}

.cart-spark-4 {
  top: 75%;
  left: 85%;
  animation-delay: 1.8s;
  animation-duration: 4.2s;
}

.cart-spark-5 {
  top: 45%;
  left: 50%;
  animation-delay: 0.3s;
  animation-duration: 3.2s;
}

.cart-spark-6 {
  top: 85%;
  left: 65%;
  animation-delay: 1.5s;
  animation-duration: 4s;
}

@keyframes cartSparkFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  20% {
    opacity: 0.8;
    transform: translateY(-8px) scale(1);
  }
  80% {
    opacity: 0.6;
    transform: translateY(-20px) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateY(-35px) scale(0);
  }
}

/* Усиление анимации при hover */
.cart-panel:hover .cart-spark {
  animation-duration: 2.8s;
}

.cart-panel:hover .cart-spark::before {
  box-shadow: 0 0 6px rgba(139, 92, 246, 1);
}

.cart-panel.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Заголовок корзины */
.cart-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  position: relative;
  z-index: 2;
}

.cart-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border-radius: 10px;
  color: #8b5cf6;
}

.cart-title {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 600;
  color: #e8e9ec;
}

/* Содержимое корзины */
.cart-content {
  min-height: 200px;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.cart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  gap: 1rem;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(139, 92, 246, 0.2);
  border-top: 3px solid #8b5cf6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 0.9rem;
  color: #9ca3af;
}

/* Меню корзины */
.cart-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.cart-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  color: #e8e9ec;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cart-menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
  transition: left 0.5s ease;
}

.cart-menu-item:hover::before {
  left: 100%;
}

.cart-menu-item:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateX(4px);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.cart-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 8px;
  color: #8b5cf6;
  transition: all 0.3s ease;
}

.cart-menu-item:hover .cart-menu-icon {
  background: rgba(139, 92, 246, 0.2);
  transform: scale(1.1);
}

.cart-menu-item span {
  flex: 1;
  font-weight: 500;
}

.cart-menu-arrow {
  color: #6b7280;
  transition: all 0.3s ease;
}

.cart-menu-item:hover .cart-menu-arrow {
  color: #8b5cf6;
  transform: translateX(2px);
}

.checkout-item {
  border-color: rgba(16, 185, 129, 0.3);
}

.checkout-item:hover {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.checkout-item .cart-menu-icon {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.checkout-item:hover .cart-menu-icon {
  background: rgba(16, 185, 129, 0.2);
}

/* Информационная панель корзины */
.cart-info {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 12px;
  position: relative;
  z-index: 2;
}

.cart-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 6px;
  color: #8b5cf6;
  flex-shrink: 0;
}

.cart-info-text {
  font-size: 0.85rem;
  color: #9ca3af;
  line-height: 1.4;
}

/* ===== СТРАНИЦА ПРОФИЛЯ ===== */

/* Контейнер профиля */
.profile-container {
  padding: 2rem 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.3), rgba(0,0,0,0.1));
  min-height: 100vh;
}

/* Заголовок страницы */
.profile-header {
  margin-bottom: 3rem;
}

.profile-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border-radius: 50%;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3);
  animation: profileGlow 3s ease-in-out infinite alternate;
}

@keyframes profileGlow {
  0% { box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3); }
  100% { box-shadow: 0 12px 48px rgba(139, 92, 246, 0.5); }
}

.profile-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #e8e9ec, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.profile-subtitle {
  font-size: 1.1rem;
  color: #9ca3af;
  font-weight: 400;
}

/* Карточка профиля */
.profile-card {
  background: linear-gradient(135deg, rgba(20,22,27,0.95), rgba(10,12,17,0.9));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(139, 92, 246, 0.1);
  backdrop-filter: blur(30px);
  margin-bottom: 2rem;
  animation: profileCardGlow 4s ease-in-out infinite alternate;
}

@keyframes profileCardGlow {
  0% { 
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
  }
  100% { 
    box-shadow: 0 25px 80px rgba(0,0,0,0.6), 0 0 60px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
  }
}

/* Секция аватара */
.profile-avatar-section {
  text-align: center;
}

.avatar-upload-container {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 400px;
  margin: 0 auto;
}

.avatar-preview {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(139, 92, 246, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.avatar-preview:hover {
  border-color: rgba(139, 92, 246, 0.6);
  transform: scale(1.05);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
}

.avatar-preview:hover .avatar-overlay {
  opacity: 1;
}

.avatar-info {
  flex: 1;
  text-align: left;
}

.avatar-label {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  display: block;
}

.avatar-hint {
  color: #9ca3af;
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* Секции формы */
.form-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border-radius: 12px;
  color: #8b5cf6;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: #e8e9ec;
}

/* Группы полей */
.form-group {
  margin-bottom: 1rem;
}

.form-label {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  display: block;
  color: #e8e9ec;
}

.required {
  color: #ef4444;
  font-weight: 700;
}

.recommended {
  color: #fbbf24;
  font-weight: 600;
  margin-left: 0.25rem;
}

.form-hint {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-top: 0.25rem;
  display: block;
}

.input-with-icon {
  position: relative;
}

.input-with-icon .form-control {
  padding-left: 3rem !important;
}

.input-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  z-index: 10;
}

/* Поля ввода */
.form-control, .form-select {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
  color: #e8e9ec !important;
  font-size: 0.95rem !important;
  transition: all 0.3s ease !important;
}

.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: #9ca3af !important;
}

/* Сообщения об ошибках */
.error-message {
  color: #ef4444;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.error-message::before {
  content: '⚠';
  font-size: 1rem;
}

/* Кликабельная карточка с баллами */
.points-info-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.3s ease;
}

.points-info-card-link:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-4px);
}

.points-info-card-link:hover .points-info-card {
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 50px rgba(139, 92, 246, 0.3);
  border-color: rgba(139, 92, 246, 0.6);
}

/* Карточка с баллами */
.points-info-card {
  background: linear-gradient(135deg, rgba(20,22,27,0.95), rgba(10,12,17,0.9));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(139, 92, 246, 0.15);
  backdrop-filter: blur(25px);
  animation: pointsCardGlow 3s ease-in-out infinite alternate;
  cursor: pointer;
  transition: all 0.3s ease;
}

@keyframes pointsCardGlow {
  0% { 
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
  }
  100% { 
    box-shadow: 0 16px 50px rgba(0,0,0,0.5), 0 0 40px rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.5);
  }
}

.points-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.points-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
  border-radius: 16px;
  color: #8b5cf6;
  animation: pointsIconPulse 2s ease-in-out infinite;
}

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

.points-content {
  flex: 1;
}

.points-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #e8e9ec;
}

.points-amount {
  font-size: 2rem;
  font-weight: 700;
  color: #8b5cf6;
  margin-bottom: 0.25rem;
  text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.points-description {
  font-size: 0.9rem;
  color: #9ca3af;
  margin: 0;
}

.btn-spend-points:hover {
  background: rgba(139, 92, 246, 0.2) !important;
  border-color: rgba(139, 92, 246, 0.6) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3) !important;
}

.points-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.points-action-text {
  font-weight: 600;
  font-size: 0.95rem;
  color: #8b5cf6;
}

.points-action-icon {
  color: #8b5cf6;
  transition: transform 0.3s ease;
}

.points-info-card-link:hover .points-action {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.5);
}

.points-info-card-link:hover .points-action-icon {
  transform: translateX(4px);
}

/* Секция УБД */
.ubd-section {
  background: linear-gradient(135deg, rgba(20,22,27,0.95), rgba(10,12,17,0.9));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 20px;
  padding: 2rem;
  margin-top: 1rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 20px rgba(139, 92, 246, 0.1);
  backdrop-filter: blur(20px);
}

.ubd-toggle-container {
  margin-bottom: 1.5rem;
}

.ubd-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  margin: 0 2rem;
  position: relative;
  overflow: hidden;
}

.ubd-toggle-wrapper:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.ubd-checkbox {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.ubd-checkbox input[type="checkbox"] {
  position: relative;
  z-index: 15;
  margin: 0;
}

.ubd-checkbox .form-check-input {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid rgba(139, 92, 246, 0.3);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  transition: all 0.3s ease;
}

.ubd-checkbox .form-check-input:checked {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border-color: #8b5cf6;
}

.ubd-label {
  font-weight: 600;
  font-size: 1.1rem;
  color: #e8e9ec;
  cursor: pointer;
  margin: 0;
}

.ubd-info {
  flex: 1;
}

.ubd-description {
  font-weight: 500;
  color: #e8e9ec;
  margin-bottom: 0.25rem;
}

.ubd-benefits {
  font-size: 0.9rem;
  color: #8b5cf6;
  margin: 0;
}

/* Секция документа УБД */
.ubd-document-section {
  transition: all 0.4s ease;
}

.document-upload-container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
}

.document-preview {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(139, 92, 246, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.document-preview:hover {
  border-color: rgba(139, 92, 246, 0.6);
  transform: scale(1.05);
}

.document-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.document-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
}

.document-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
}

.document-preview:hover .document-overlay {
  opacity: 1;
}

.document-info {
  flex: 1;
}

.document-label {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  display: block;
  color: #e8e9ec;
}

.document-hint {
  color: #9ca3af;
  font-size: 0.9rem;
  margin: 0;
}

/* Кнопки действий */
.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.btn-save {
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0.75rem 2rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3) !important;
}

.btn-save:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4) !important;
}

.btn-cancel {
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 12px !important;
  padding: 0.75rem 2rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
}

.btn-cancel:hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.3) !important;
}

/* Информационная панель */
.info-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.info-item:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
  border-color: rgba(139, 92, 246, 0.2);
  transform: translateY(-2px);
}

.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border-radius: 10px;
  color: #8b5cf6;
  flex-shrink: 0;
}

.info-content h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #e8e9ec;
}

.info-content p {
  font-size: 0.9rem;
  color: #9ca3af;
  margin: 0;
  line-height: 1.5;
}

/* Скрытие файловых инпутов только в определенных контекстах */
.file-upload-wrapper input[type="file"] {
  display: none;
}

/* Адаптивность для профиля */
@media (max-width: 768px) {
  .profile-container {
    padding: 1rem 0;
  }
  
  .profile-title {
    font-size: 2rem;
  }
  
  .profile-card {
    padding: 1.5rem;
    border-radius: 16px;
  }
  
  .avatar-upload-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .ubd-toggle-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .document-upload-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .info-panel {
    grid-template-columns: 1fr;
  }
}

/* Адаптивность для карточек товаров на мобильных устройствах */
@media (max-width: 768px) {
  /* Выравнивание сетки на мобильных */
  .row[data-stagger-grid] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
  }
  
  .row[data-stagger-grid] .col {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Фиксированная высота карточек */
  .card.product {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
  }
  
  .card.product .card-body {
    padding: 0.5rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    min-height: 0 !important;
  }
  
  /* Фиксированная высота изображения */
  .card.product .ratio {
    height: 180px !important;
    min-height: 180px !important;
  }
  
  .card.product .card-title,
  .card.product h3,
  .card.product h4,
  .card.product h5 {
    font-size: 0.85rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.125rem !important;
    height: 1.1em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .card.product .small {
    font-size: 0.75rem !important;
    line-height: 1.1 !important;
    height: 1.1em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .card.product .fw-semibold {
    font-size: 0.85rem !important;
  }
  
  /* Фиксированная высота названия товара на мобильных */
  .card.product .product-title {
    height: 2.2em !important;
    min-height: 2.2em !important;
    max-height: 2.2em !important;
    font-size: 0.85rem !important;
  }
  
  .card.product .badge {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
  }
  
  .card.product .points-reward-card {
    margin-top: 0.25rem;
    height: auto !important;
  }
  
  .card.product .points-text-small {
    font-size: 0.7rem !important;
  }
  
  .card.product .points-help-small {
    padding: 0.125rem 0.25rem !important;
    font-size: 0.6rem !important;
  }
  
  /* Уменьшаем отступы в карточке */
  .card.product .card-body > * {
    margin-bottom: 0.25rem !important;
  }
  
  .card.product .card-body > *:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Адаптируем цену */
  .card.product .d-flex.align-items-center.gap-2 {
    gap: 0.25rem !important;
    height: auto !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  
  /* Предотвращение переноса цен на мобильных */
  .card.product .price-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-shrink: 0 !important;
    font-size: 0.8rem !important;
  }
  
  .card.product .text-decoration-line-through {
    font-size: 0.7rem !important;
  }
  
  /* Выравнивание сетки */
  .row .col {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .row .col .card.product {
    flex: 1 !important;
  }
}

/* Еще более компактно для очень маленьких экранов */
@media (max-width: 480px) {
  /* Выравнивание сетки на маленьких экранах */
  .row[data-stagger-grid] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
  }
  
  .row[data-stagger-grid] .col {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Фиксированная высота карточек */
  .card.product {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .card.product .card-body {
    padding: 0.5rem;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
  }
  
  /* Фиксированная высота изображения */
  .card.product .ratio {
    height: 200px !important;
    min-height: 200px !important;
  }
  
  .card.product .card-title,
  .card.product h3,
  .card.product h4,
  .card.product h5 {
    font-size: 0.8rem !important;
    line-height: 1.1 !important;
    height: 1.1em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .card.product .small {
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
    height: 1.1em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .card.product .fw-semibold {
    font-size: 0.8rem !important;
  }
  
  /* Фиксированная высота названия товара на очень маленьких экранах */
  .card.product .product-title {
    height: 2.0em !important;
    min-height: 2.0em !important;
    max-height: 2.0em !important;
    font-size: 0.8rem !important;
  }
  
  .card.product .badge {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.4rem !important;
  }
  
  .card.product .points-text-small {
    font-size: 0.65rem !important;
  }
  
  /* Предотвращение переноса цен на очень маленьких экранах */
  .card.product .price-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-shrink: 0 !important;
    font-size: 0.75rem !important;
  }
  
  .card.product .d-flex.align-items-center.gap-2 {
    gap: 0.2rem !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  
  /* Адаптируем сетку карточек */
  .row .col {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .row {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
  }
  
  .row .col .card.product {
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  
  /* Принудительное выравнивание всех карточек */
  .product-card-wrap {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }
  
  .product-card-wrap .card.product {
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* Дополнительные улучшения для планшетов */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Выравнивание сетки на планшетах */
  .row[data-stagger-grid] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    align-items: stretch !important;
  }
  
  .row[data-stagger-grid] .col {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Фиксированная высота карточек */
  .card.product {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .card.product .card-body {
    padding: 0.875rem;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  
  /* Фиксированная высота изображения */
  .card.product .ratio {
    height: 220px !important;
    min-height: 220px !important;
  }
  
  .card.product .card-title,
  .card.product h3,
  .card.product h4,
  .card.product h5 {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    height: 1.3em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .card.product .small {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    height: 1.2em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* Выравнивание сетки */
  .row .col {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .row .col .card.product {
    flex: 1 !important;
  }
}.hover-raise:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.35);border-color:rgba(139,92,246,.35)}.navbar.bg-body{backdrop-filter:saturate(110%) blur(5px);background-color:rgba(13,14,17,.72)!important}.navbar .nav-link{color:var(--tc-text);opacity:.8}.navbar .nav-link:hover,.navbar .nav-link.active{opacity:1}.btn-cta{
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border: none;
  color: #fff;
  box-shadow: 0 8px 32px rgba(139,92,246,.4);
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left 0.5s;
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(139,92,246,.5);
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.btn-cta:hover::before {
  left: 100%;
}

.btn-cta:active {
  transform: translateY(0);
  box-shadow: 0 6px 24px rgba(139,92,246,.4);
}

/* Bottom Navigation - Fixed at bottom */
.bottom-nav {
  position: fixed !important;
  left: 50% !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;
  width: min(560px, 92%) !important;
  max-width: 92vw !important;
  background: rgba(20, 22, 27, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(5px) saturate(110%);
  border-radius: 18px;
  padding: 8px;
  z-index: 1030 !important;
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.2s ease;
  will-change: auto; /* Changed back to auto to prevent jank with position: fixed */
  display: flex !important; /* Override Bootstrap d-lg-none */
  box-sizing: border-box !important;
}

/* Hide on desktop (lg and up) */
@media (min-width: 992px) {
  .bottom-nav {
    display: none !important;
  }
}

/* Extra rules for mobile to ensure it stays fixed */
@media (max-width: 991px) {
  .bottom-nav {
    position: fixed !important;
    left: 50% !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
  }
}

.bottom-nav.bottom-nav--hidden {
  transform: translateX(-50%) translateY(calc(100% + 20px)) !important;
  opacity: 0;
  pointer-events: none;
}

/* Улучшение плавности рендеринга */
.bottom-nav,
.bottom-nav * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

.bottom-nav .btn {
  flex: 1 1 0;
  background: transparent;
  border: none;
  color: var(--tc-text);
  opacity: 0.8;
}

.bottom-nav .btn.active,
.bottom-nav .btn:hover {
  opacity: 1;
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: 400ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}
/* Поочередное красивое появление карточек — keyframes + индивидуальная задержка */
@keyframes cardLift {
  0%   { opacity:0; transform:translateY(24px) scale(.94); filter:blur(10px); }
  60%  { opacity:1; transform:translateY(-2px) scale(1.01); filter:blur(0); }
  100% { opacity:1; transform:none; filter:none; }
}
.reveal-stagger{opacity:0}
.reveal-stagger.visible{animation:cardLift 560ms cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--d,0ms)}
/* Масштабирование: растягивание в контейнер без обрезания */

.object-fit-contain{object-fit:contain;background-color:var(--tc-elevate)}
.object-fit-cover{object-fit:cover}
/* Красивый контрол количества */
.qty-control{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:6px 8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.qty-control button{width:34px;height:34px;border:none;border-radius:10px;background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(99,102,241,.25));color:var(--tc-text);display:inline-flex;align-items:center;justify-content:center;font-weight:700;transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.qty-control button:hover{box-shadow:0 6px 16px rgba(99,102,241,.35)}
.qty-control button:active{transform:scale(.94)}
.qty-control input[type=number]{width:56px;text-align:center;background:transparent;border:none;color:var(--tc-text);font-weight:700;font-variant-numeric:tabular-nums}
.qty-control input::-webkit-outer-spin-button,.qty-control input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-control input[type=number]{-moz-appearance:textfield;appearance:textfield}
.thumb{border:1px solid rgba(255,255,255,.08);border-radius:.75rem;padding:0;overflow:hidden;background:transparent}.thumb img{width:72px;height:72px;object-fit:cover;display:block}
.thumb.active{border-color:rgba(139,92,246,.8); box-shadow:0 0 0 2px rgba(139,92,246,.35) inset}

/* Admin product form: секции и единый стиль */
.admin-product-form .form-label{font-weight:600}
.admin-form-section{border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px 12px 10px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)); margin-bottom:10px}
.admin-form-section .hint{color:#9aa0aa; font-size:.85rem}
.section-chip{display:inline-block; padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:600; margin-bottom:8px; background:rgba(139,92,246,.15); border:1px solid rgba(139,92,246,.35); color:#c9c2ff}

/* Кружочки кольорів у карточках (на головній) */
.color-dot{
  width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  display:inline-block;
  background: var(--c1, #000);
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,.1),
    0 2px 8px rgba(0,0,0,.2);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Адаптивность для цветовых точек на мобильных */
@media (max-width: 768px) {
  .color-dot {
    width: 16px;
    height: 16px;
  }

}

@media (max-width: 480px) {
  .color-dot {
    width: 14px;
    height: 14px;
  }

}

/* Комбинированные цвета для color-dot */
.color-dot[style*="--c2"]:not([style*="--c2: ;"]):not([style*="--c2: transparent"]):not([style*="--c2: none"]):not([style*="--c2: ''"]):not([style*="--c2: undefined"]) {
  background: var(--c1, #000);
}

.color-dot[style*="--c2"]:not([style*="--c2: ;"]):not([style*="--c2: transparent"]):not([style*="--c2: none"]):not([style*="--c2: ''"]):not([style*="--c2: undefined"])::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--c1, #000);
}

.color-dot[style*="--c2"]:not([style*="--c2: ;"]):not([style*="--c2: transparent"]):not([style*="--c2: none"]):not([style*="--c2: ''"]):not([style*="--c2: undefined"])::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--c2, transparent);
}

.color-dot.visible {
  opacity: 1;
  transform: scale(1);
}

/* Hover эффект для цветовых точек */
.color-dot:hover {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,.2),
    0 4px 12px rgba(0,0,0,.3);
  transform: scale(1.05);
}

/* Активное состояние цветовой точки */
.color-dot.active {
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,.3),
    0 0 0 3px rgba(255, 255, 255, 0.4), 
    0 4px 16px rgba(0, 0, 0, 0.4);
  transform: scale(1.15);
}

/* Анимация переключения цветовых точек */
.color-dot.switching {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,.1),
    0 2px 8px rgba(0,0,0,.2);
  transform: scale(0.9);
  opacity: 0.7;
}

/* Анимация переключения изображений */
.product-main-image {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.product-main-image.switching {
  opacity: 0.7;
  transform: scale(1.05);
}

/* Анимация пульсации при переключении цветов */
@keyframes colorSwitchPulse {
  0% { 
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  50% { 
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.2);
  }
  100% { 
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
}

.product-card-wrap{position:relative}
.product-card-dots{
  position:absolute;
  right:12px;
  top:12px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 10;
  font-size: 0.75rem;
}

/* Показываем цветовые точки при hover на карточку */
.product-card-wrap:hover .product-card-dots {
  opacity: 1;
  transform: translateY(0);
}

.product-card-dots.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Счетчик заказов в обработке */

/* Стили для информации о баллах в заказах */
.points-info {
  margin-top: 0.5rem;
}

/* Стили для отображения баллов в админпанели пользователей */
.points-display {
  min-width: 120px;
}

.points-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.points-value {
  font-weight: 600;
  font-size: 1rem;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

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

/* Блок "Рекомендовано" - профессиональный дизайн */

.featured-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes featuredGlow {
    0% { box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3); }
    100% { box-shadow: 0 12px 48px rgba(139, 92, 246, 0.5); }
  }
}

.featured-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 80px rgba(0,0,0,0.4);
  border-color: rgba(139, 92, 246, 0.3);
}

.featured-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.5), transparent);
  z-index: 1;
}

.featured-card:hover .featured-image {
  transform: scale(1.05);
}

.featured-card:hover .featured-overlay {
  opacity: 1;
}

/* Комбинированные цвета для featured-color-dot */
.featured-color-dot[style*="--c2"]:not([style*="--c2: ;"]):not([style*="--c2: transparent"]):not([style*="--c2: none"]):not([style*="--c2: ''"]):not([style*="--c2: undefined"]) {
  background: var(--c1, #000);
}

.featured-color-dot[style*="--c2"]:not([style*="--c2: ;"]):not([style*="--c2: transparent"]):not([style*="--c2: none"]):not([style*="--c2: ''"]):not([style*="--c2: undefined"])::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--c1, #000);
}

.featured-color-dot[style*="--c2"]:not([style*="--c2: ;"]):not([style*="--c2: transparent"]):not([style*="--c2: none"]):not([style*="--c2: ''"]):not([style*="--c2: undefined"])::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--c2, transparent);
}

.featured-color-dot:hover {
  transform: scale(1.2);
}

.featured-description {
  color: #9ca3af;
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 400;
}

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

.featured-btn-primary::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.5s;
}

.featured-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.4);
  color: white;
  text-decoration: none;
}

.featured-btn-primary:hover::before {
  left: 100%;
}

/* Заголовок-кнопка управления блоком "Рекомендовано" */
.featured-header-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(15px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.featured-header-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.featured-header-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  border-color: rgba(139, 92, 246, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.featured-header-btn:hover::before {
  left: 100%;
}

.featured-header-btn:active {
  transform: translateY(0);
}

.featured-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
}

.featured-header-btn:hover 

.featured-header-btn.collapsed .toggle-hint-icon {
  transform: rotate(180deg);
}

/* Анимация скрытия/показа блока */

@keyframes expandBlock {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
    max-height: 0;
    filter: blur(2px);
  }
  30% {
    opacity: 0.6;
    transform: translateY(-15px) scale(0.95);
    filter: blur(1px);
  }
  70% {
    opacity: 0.9;
    transform: translateY(-5px) scale(0.98);
    filter: blur(0.5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 2000px;
    filter: blur(0);
  }
}

/* Анимация для подсказки при скрытии */
.featured-header-btn.collapsed .toggle-hint-text {
  animation: smoothFadeInOut 0.5s ease;
}

@keyframes smoothFadeInOut {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  40% { opacity: 0; transform: scale(0.95) translateY(-2px); }
  60% { opacity: 0; transform: scale(0.95) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Эффект пульсации для заголовка-кнопки */
.featured-header-btn.pulsing {
  animation: headerPulseGlow 0.8s ease-in-out;
}

@keyframes headerPulseGlow {
  0% { 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
  }
  50% { 
    box-shadow: 0 8px 35px rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.3);
  }
  100% { 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
  }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {

  .featured-header-btn {
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
  }
  
  .featured-header-content {
    gap: 0.3rem;
  }
  
  .featured-toggle-hint {
    font-size: 0.75rem;
  }
}

/* ===== КОМПАКТНЫЙ БЛОК РЕКОМЕНДАЦИЙ В СТИЛЕ КАТЕГОРИЙ ===== */

/* Основной блок рекомендаций */
.featured-unified-block {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(255, 193, 7, 0.12) 0%,
    rgba(255, 152, 0, 0.08) 50%,
    rgba(255, 87, 34, 0.12) 100%
  );
  border: 1px solid rgba(255, 193, 7, 0.25);
  border-radius: 20px;
  padding: 1.5rem;
  backdrop-filter: blur(20px) saturate(120%);
  box-shadow: 
    0 8px 32px rgba(255, 193, 7, 0.15),
    0 0 0 1px rgba(255, 193, 7, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.featured-unified-block::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, 
    rgba(255, 193, 7, 0.3) 0%,
    rgba(255, 152, 0, 0.2) 50%,
    rgba(255, 87, 34, 0.3) 100%
  );
  border-radius: 22px;
  z-index: -1;
  filter: blur(8px);
  opacity: 0.6;
  animation: featuredOuterGlow 4s ease-in-out infinite;
}

@keyframes featuredOuterGlow {
  0%, 100% { 
    opacity: 0.4; 
    transform: scale(1);
    filter: blur(8px);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.02);
    filter: blur(12px);
  }
}

.featured-unified-block:hover {
  border-color: rgba(255, 193, 7, 0.4);
  box-shadow: 
    0 12px 40px rgba(255, 193, 7, 0.25),
    0 0 0 1px rgba(255, 193, 7, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.featured-unified-block:hover::before {
  opacity: 1;
  filter: blur(15px);
}

/* Фоновые эффекты */
.featured-bg-unified {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 20px;
}

.featured-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.featured-particles .particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(255, 193, 7, 0.8) 0%, rgba(255, 152, 0, 0.4) 50%, transparent 70%);
  border-radius: 50%;
  animation: featuredFloat 6s infinite ease-in-out;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
}

.featured-particles .particle:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
  animation-duration: 12s;
}

.featured-particles .particle:nth-child(2) {
  top: 60%;
  right: 15%;
  animation-delay: 3s;
  animation-duration: 10s;
}

.featured-particles .particle:nth-child(3) {
  bottom: 30%;
  left: 20%;
  animation-delay: 6s;
  animation-duration: 14s;
}

.featured-particles .particle:nth-child(4) {
  top: 40%;
  right: 30%;
  animation-delay: 9s;
  animation-duration: 11s;
}

@keyframes featuredFloat {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); 
    opacity: 0.6; 
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
  }
  25% { 
    transform: translateY(-25px) translateX(15px) scale(1.3) rotate(90deg); 
    opacity: 1; 
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.8);
  }
  50% { 
    transform: translateY(-15px) translateX(-10px) scale(0.9) rotate(180deg); 
    opacity: 0.7; 
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.6);
  }
  75% { 
    transform: translateY(-35px) translateX(20px) scale(1.2) rotate(270deg); 
    opacity: 0.9; 
    box-shadow: 0 0 18px rgba(255, 193, 7, 0.7);
  }
}

.featured-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, 
    rgba(255, 193, 7, 0.2) 0%, 
    rgba(255, 152, 0, 0.1) 40%, 
    transparent 70%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: featuredGlow 5s ease-in-out infinite;
  filter: blur(2px);
}

@keyframes featuredGlow {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1) rotate(0deg); 
    opacity: 0.4; 
    filter: blur(2px);
  }
  25% { 
    transform: translate(-50%, -50%) scale(1.1) rotate(90deg); 
    opacity: 0.7; 
    filter: blur(3px);
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.3) rotate(180deg); 
    opacity: 0.8; 
    filter: blur(4px);
  }
  75% { 
    transform: translate(-50%, -50%) scale(1.1) rotate(270deg); 
    opacity: 0.6; 
    filter: blur(3px);
  }
}

.featured-gradient-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.05) 0%,
    transparent 50%,
    rgba(59, 130, 246, 0.05) 100%
  );
  border-radius: 20px;
}

.featured-gradient-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at top left, 
    rgba(139, 92, 246, 0.08) 0%,
    transparent 60%
  );
  border-radius: 20px;
}

.featured-floating-logos {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.featured-floating-logos .floating-logo {
  position: absolute;
  opacity: 0.1;
  animation: featuredLogoFloat 20s infinite linear;
}

.featured-floating-logos .logo-1 {
  top: 15%;
  left: 10%;
  animation-delay: 0s;
  animation-duration: 25s;
}

.featured-floating-logos .logo-2 {
  top: 70%;
  right: 20%;
  animation-delay: 8s;
  animation-duration: 30s;
}

.featured-floating-logos .logo-3 {
  bottom: 20%;
  left: 30%;
  animation-delay: 16s;
  animation-duration: 22s;
}

@keyframes featuredLogoFloat {
  0% { transform: translateY(0px) rotate(0deg); opacity: 0.1; }
  25% { transform: translateY(-15px) rotate(90deg); opacity: 0.2; }
  50% { transform: translateY(-5px) rotate(180deg); opacity: 0.15; }
  75% { transform: translateY(-20px) rotate(270deg); opacity: 0.25; }
  100% { transform: translateY(0px) rotate(360deg); opacity: 0.1; }
}

/* Заголовок */
.featured-header-unified {
  position: relative;
  z-index: 2;
  margin-bottom: 1rem;
}

.featured-title-compact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.title-with-star-icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.featured-badge-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, 
    rgba(255, 193, 7, 0.9) 0%,
    rgba(255, 152, 0, 0.8) 50%,
    rgba(255, 87, 34, 0.9) 100%
  );
  color: rgba(0, 0, 0, 0.8);
  padding: 0.5rem 1rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 
    0 4px 15px rgba(255, 193, 7, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 193, 7, 0.4);
  animation: featuredBadgeGlow 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.featured-badge-compact::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  transition: left 0.6s ease;
}

.featured-badge-compact:hover::before {
  left: 100%;
}

@keyframes featuredBadgeGlow {
  0%, 100% { 
    box-shadow: 
      0 4px 15px rgba(255, 193, 7, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1);
  }
  50% { 
    box-shadow: 
      0 6px 20px rgba(255, 193, 7, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: scale(1.02);
  }
}

.featured-subtitle-compact {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  font-style: italic;
  margin-left: 0.5rem;
}

.featured-accent-line {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, 
    rgba(255, 193, 7, 0.9) 0%,
    rgba(255, 152, 0, 0.7) 50%,
    rgba(255, 87, 34, 0.9) 100%
  );
  border-radius: 2px;
  animation: featuredLineGlow 3s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
}

@keyframes featuredLineGlow {
  0%, 100% { 
    opacity: 0.7; 
    transform: scaleX(1); 
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
  }
  50% { 
    opacity: 1; 
    transform: scaleX(1.2); 
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.8);
  }
}

/* Кнопка сворачивания */
.featured-toggle-btn {
  background: linear-gradient(135deg, 
    rgba(255, 193, 7, 0.2) 0%,
    rgba(255, 152, 0, 0.15) 50%,
    rgba(255, 87, 34, 0.2) 100%
  );
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 15px rgba(255, 193, 7, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.featured-toggle-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  transition: left 0.6s ease;
}

.featured-toggle-btn:hover {
  background: linear-gradient(135deg, 
    rgba(255, 193, 7, 0.3) 0%,
    rgba(255, 152, 0, 0.25) 50%,
    rgba(255, 87, 34, 0.3) 100%
  );
  border-color: rgba(255, 193, 7, 0.5);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 25px rgba(255, 193, 7, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.featured-toggle-btn:hover::before {
  left: 100%;
}

.featured-toggle-btn:active {
  transform: translateY(0);
}

.featured-toggle-btn.collapsed {
  background: linear-gradient(135deg, 
    rgba(34, 197, 94, 0.2) 0%,
    rgba(34, 197, 94, 0.15) 50%,
    rgba(34, 197, 94, 0.2) 100%
  );
  border-color: rgba(34, 197, 94, 0.3);
  color: rgba(255, 255, 255, 0.9);
}

.featured-toggle-btn.collapsed:hover {
  background: linear-gradient(135deg, 
    rgba(34, 197, 94, 0.3) 0%,
    rgba(34, 197, 94, 0.25) 50%,
    rgba(34, 197, 94, 0.3) 100%
  );
  border-color: rgba(34, 197, 94, 0.5);
}

.toggle-btn-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}

.toggle-icon {
  transition: transform 0.3s ease;
}

.featured-spacer {
  width: 120px; /* Для выравнивания кнопки по центру */
}

/* Контент */
.featured-content-unified {
  position: relative;
  z-index: 2;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.featured-card-compact {
  display: flex;
  gap: 1.5rem;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  backdrop-filter: blur(15px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.featured-card-compact:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 16px 48px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border-color: rgba(139, 92, 246, 0.2);
}

.featured-image-compact {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
}

.featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.featured-card-compact:hover .featured-img {
  transform: scale(1.05);
}

.featured-discount-compact {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.featured-info-compact {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.featured-category-compact {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.featured-title-compact-text {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
}

.featured-price-compact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.featured-price-current-compact {
  font-size: 1.5rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
}

.featured-price-old-compact {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
  font-weight: 500;
}

.featured-btn-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
  align-self: flex-start;
  margin-top: auto;
}

.featured-btn-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
  color: white;
  text-decoration: none;
}

.featured-btn-compact:active {
  transform: translateY(0);
}

/* Адаптивные стили */
@media (max-width: 768px) {
  .featured-unified-block {
    padding: 1rem;
  }

  .featured-card-compact {
    flex-direction: column;
    gap: 1rem;
  }
  
  .featured-image-compact {
    width: 100%;
    height: 180px;
  }
  
  .featured-spacer {
    width: 80px;
  }
  
  .featured-toggle-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }

  /* Исправление расположения кнопки на мобильных */
  .featured-header-unified .d-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }

  .featured-title-compact {
    width: 100% !important;
    text-align: center !important;
  }

  .featured-toggle-btn {
    align-self: center !important;
    margin: 0 auto !important;
    order: 2 !important;
  }

  .featured-spacer {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .featured-unified-block {
    padding: 0.75rem;
  }

  .featured-card-compact {
    padding: 1rem;
  }
  
  .featured-image-compact {
    height: 160px;
  }
  
  .featured-title-compact-text {
    font-size: 1.1rem;
  }
  
  .featured-price-current-compact {
    font-size: 1.25rem;
  }

  /* Дополнительные стили для очень маленьких экранов */
  .featured-header-unified .d-flex {
    gap: 0.75rem !important;
  }

  .featured-toggle-btn {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    min-width: 120px !important;
  }

  .featured-badge-compact {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.9rem !important;
  }

  .featured-subtitle-compact {
    font-size: 0.8rem !important;
  }
  
  .featured-spacer {
    width: 60px;
  }
}

/* Страница успешного заказа */
.order-success-section {
  padding: 2rem 0;
}

.order-success-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  backdrop-filter: blur(20px);
}

.order-success-header {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
  border-bottom: 1px solid rgba(34, 197, 94, 0.2);
}

.success-icon {
  color: #22c55e;
  margin-bottom: 1rem;
  animation: successPulse 2s ease-in-out infinite;
}

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

.order-success-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: #e5e7eb;
}

.order-number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  padding: 8px 16px;
  margin: 0 auto;
  width: fit-content;
}

.order-number-label {
  font-size: 0.9rem;
  color: #9ca3af;
}

.order-number-value {
  font-weight: 700;
  color: #22c55e;
  font-family: monospace;
  font-size: 1rem;
}

.order-success-content {
  padding: 2rem;
}

.success-message {
  text-align: center;
  margin-bottom: 2rem;
}

.success-message h3 {
  color: #e5e7eb;
  font-weight: 700;
  margin-bottom: 1rem;
}

.success-message p {
  color: #9ca3af;
  font-size: 1rem;
  line-height: 1.6;
}

.order-details {
  background: rgba(0,0,0,0.2);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.order-details h4 {
  color: #e5e7eb;
  font-weight: 700;
  margin-bottom: 1rem;
}

.order-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  color: #9ca3af;
  font-size: 0.9rem;
}

.info-value {
  color: #e5e7eb;
  font-weight: 600;
}

.auth-suggestion {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.auth-suggestion-content h4 {
  color: #e5e7eb;
  font-weight: 700;
  margin-bottom: 1rem;
}

.auth-suggestion-content p {
  color: #9ca3af;
  margin-bottom: 1rem;
}

.auth-benefits {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.auth-benefits li {
  color: #9ca3af;
  padding: 4px 0;
  font-size: 0.9rem;
}

.auth-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 1rem;
}

.auth-buttons .btn {
  flex: 1;
}

.auth-note {
  text-align: center;
  color: #6b7280;
  font-style: italic;
}

.order-success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.order-success-actions .btn {
  min-width: 160px;
}

/* Адаптивность для страницы успешного заказа */
@media (max-width: 768px) {
  .order-success-header {
    padding: 1.5rem;
  }
  
  .order-success-title {
    font-size: 1.5rem;
  }
  
  .order-success-content {
    padding: 1.5rem;
  }
  
  .auth-buttons {
    flex-direction: column;
  }
  
  .order-success-actions {
    flex-direction: column;
  }
  
  .order-success-actions .btn {
    width: 100%;
  }
}

/* Стили для валидации форм */
.form-control.is-invalid,

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.alert-danger {
  background-color: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #dc3545;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 1rem;
}

/* Анимация для полей с ошибками */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Админ панель заказов - новый дизайн */
.orders-admin-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.orders-header {
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 1.5rem;
  backdrop-filter: blur(20px);
}

.orders-title {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #e5e7eb;
  margin: 0;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0,0,0,0.2);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
}

.stat-label {
  color: #9ca3af;
  font-size: 0.9rem;
}

.stat-value {
  color: #e5e7eb;
  font-weight: 700;
  font-size: 1.1rem;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  transition: all 0.3s ease;
}

.order-card:hover {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.order-number-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-number {
  font-size: 1.3rem;
  font-weight: 800;
  color: #8b5cf6;
  font-family: monospace;
}

.order-date {
  color: #9ca3af;
  font-size: 0.9rem;
}

.status-update-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.2rem;
}

.customer-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.customer-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #e5e7eb;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9ca3af;
  font-size: 0.9rem;
}

.delivery-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.delivery-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9ca3af;
  font-size: 0.9rem;
}

.order-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: rgba(0,0,0,0.2);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
}

.total-label {
  color: #9ca3af;
  font-size: 1rem;
}

.total-amount {
  color: #e5e7eb;
  font-size: 1.3rem;
  font-weight: 800;
}

.order-details {
  border-top: 1px solid rgba(255,255,255,0.1);
}

.details-toggle:hover {
  background: rgba(0,0,0,0.1);
  color: #e5e7eb;
}

.toggle-icon {
  transition: transform 0.3s ease;
}

.details-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(180deg);
}

.item-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: #9ca3af;
  font-size: 0.9rem;
}

/* Адаптивность для админ панели заказов */
@media (max-width: 768px) {

  .order-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .delivery-info {
    flex-direction: column;
    align-items: flex-start;
  }

}

/* Hero секция с логотипом TWO COMMS */
.hero-section {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
}

.hero-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  --hero-gutter-x: 1.5rem;
  --hero-gutter-y: 1.5rem;
  margin-top: calc(-1 * var(--hero-gutter-y));
  margin-right: calc(-.5 * var(--hero-gutter-x));
  margin-left: calc(-.5 * var(--hero-gutter-x));
  padding: 3rem 2rem;
  z-index: 2;
}

.hero-container > [class*='col-'] {
  flex: 0 0 auto;
  padding-right: calc(var(--hero-gutter-x) * .5);
  padding-left: calc(var(--hero-gutter-x) * .5);
  padding-top: var(--hero-gutter-y);
  padding-bottom: 0;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .hero-container > .col-md-6 {
    width: 50%;
    max-width: 50%;
  }
}

/* Фоновый логотип */
.hero-logo-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 600px;
  max-height: 600px;
  opacity: 0.1;
  z-index: 1;
  animation: logoFloat 8s ease-in-out infinite;
  pointer-events: none;
}

.hero-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  will-change: transform;
}

@keyframes logoFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50% { transform: translate(-50%, -50%) scale(1.05) rotate(1deg); }
}

/* Основной контент */
.hero-section .hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 600px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.hero-section .hero-text-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: clamp(320px, 28vw, 420px);
}

.hero-section .hero-title {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.hero-section .hero-title-main {
  font-size: 3.5rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size-adjust: 0.52;
}

.hero-section .hero-title-accent {
  font-size: 2.5rem;
  font-weight: 700;
  color: #8b5cf6;
  text-shadow: 0 2px 15px rgba(139, 92, 246, 0.4);
  letter-spacing: 0.05em;
  font-size-adjust: 0.52;
}

.hero-section .hero-subtitle {
  font-size: 1.2rem;
  color: #d1d5db;
  font-weight: 400;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  font-size-adjust: 0.52;
}

.hero-section .hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.hero-section .hero-btn-primary {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border: none;
  border-radius: 50px;
  color: white;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.3);
  position: relative;
  overflow: hidden;
}

.hero-section .hero-btn-primary::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;
}

.hero-section .hero-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.4);
  color: white;
  text-decoration: none;
}

.hero-section .hero-btn-primary:hover::before {
  left: 100%;
}

.hero-section .hero-btn-primary:active {
  transform: translateY(-1px);
}

.hero-section .hero-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 25px;
  padding: 8px 16px;
  color: #e5e7eb;
  font-size: 0.9rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
}

/* Декоративные элементы */
.hero-section .hero-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-section .hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}

.hero-section .hero-particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.hero-section .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  animation: particleFloat 6s ease-in-out infinite;
}

.hero-section .particle:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.hero-section .particle:nth-child(2) {
  top: 60%;
  left: 80%;
  animation-delay: 1s;
}

.hero-section .particle:nth-child(3) {
  top: 80%;
  left: 20%;
  animation-delay: 2s;
}

.hero-section .particle:nth-child(4) {
  top: 30%;
  left: 70%;
  animation-delay: 3s;
}

.hero-section .particle:nth-child(5) {
  top: 70%;
  left: 60%;
  animation-delay: 4s;
}

@keyframes particleFloat {
  0%, 100% { 
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }
  50% { 
    transform: translateY(-20px) scale(1.2);
    opacity: 0.8;
  }
}

/* Адаптивность для hero секции */
@media (max-width: 768px) {
  .hero-section {
    min-height: 300px;
    border-radius: 16px;
  }
  
  .hero-section .hero-container {
    padding: 2rem 1rem;
  }
  
  .hero-section .hero-text-section {
    min-height: 340px;
  }

  .hero-section .hero-title-main {
    font-size: 2.5rem;
  }
  
  .hero-section .hero-title-accent {
    font-size: 1.8rem;
  }
  
  .hero-section .hero-subtitle {
    font-size: 1rem;
  }
  
  .hero-section .hero-btn-primary {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }
  
  .hero-section .hero-logo-bg {
    max-width: 400px;
    max-height: 400px;
  }
}

/* Селектор кольорів у товарі — темний «вдавлений» */

/* Удалено - дублирующийся стиль */

.color-swatch:active{ transform: scale(.98); }

/* Перемикачі і панелі для опису/сітки */
.toggle-chip{
  background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  color: var(--tc-text);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight:600;
  transition: border-color .2s ease, box-shadow .2s ease, transform .08s;
}
.toggle-chip.active{
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 0 0 2px rgba(139,92,246,.25);
}
.toggle-chip:active{ transform: scale(.98); }

.panel-wrap{display:block}

/* Красивые вкладки для описания и размерной сетки в стиле селектора цветов */
.product-tabs-container {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.product-tabs-header {
  display: flex;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 6px;
  gap: 6px;
}

.product-tab-button {
  flex: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  color: var(--tc-text);
  padding: 8px 12px;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 8px;
  transition: box-shadow .2s ease, border-color .2s ease, transform .08s;
  position: relative;
  cursor: pointer;
}

.product-tab-button:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color: var(--tc-text);
}

.product-tab-button.active {
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 0 0 2px rgba(139,92,246,.25);
  background: linear-gradient(180deg, rgba(139,92,246,.15), rgba(99,102,241,.15));
  color: #c9c2ff;
}

.product-tab-button:active {
  transform: scale(.98);
}

.product-tab-content {
  padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-radius: 0 0 12px 12px;
}

.product-tab-pane {
  display: none;
  animation: fadeInUp 0.3s ease;
}

.product-tab-pane.active {
  display: block;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Стили для таблицы размеров в стиле селектора цветов */
.product-tab-content .table {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.product-tab-content .table thead th {
  background: linear-gradient(180deg, rgba(139,92,246,.2), rgba(99,102,241,.2));
  border: none;
  color: #c9c2ff;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.product-tab-content .table tbody td {
  border: none;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background-color 0.2s ease;
  color: #b8bcc7;
}

.product-tab-content .table tbody tr:hover td {
  background: rgba(255,255,255,.03);
}

.product-tab-content .table tbody tr:last-child td {
  border-bottom: none;
}

.product-tab-content .fw-semibold {
  color: var(--tc-text);
  font-weight: 600;
}

/* Улучшенная читаемость текста в описании */
.product-tab-content .text-secondary {
  color: #b8bcc7 !important;
  line-height: 1.6;
  font-size: 0.95rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.product-tab-content p {
  margin-bottom: 1rem;
  color: #b8bcc7;
  line-height: 1.6;
}

.product-tab-content h6 {
  color: #e8e9ec;
  font-weight: 600;
  margin-bottom: 1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.product-tab-content .text-muted {
  color: #9aa0aa !important;
  line-height: 1.5;
}

/* Унифицированный вид инпутов */
.admin-product-form input[type=text],
.admin-product-form input[type=number],
.admin-product-form input[type=file],
.admin-product-form select,
.admin-product-form textarea {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: var(--tc-text);
  padding: .5rem .75rem;
}
.admin-product-form textarea{min-height:110px; resize:vertical}
.admin-product-form input[type=checkbox]{cursor:pointer}

/* Admin product form: hide slug and extra_images fields if present */
.card form .form-section p:has(input[name="slug"]),
.card form .form-section p:has(input[name="extra_images"]),
.card form .form-section div:has(input[name="slug"]),
.card form .form-section div:has(input[name="extra_images"]) {
  display: none !important;
}

/* Анимации мини‑кошика */
#mini-cart-panel{opacity:0;transform:translateY(-6px) scale(.98);transition:opacity .22s ease,transform .22s ease}
#mini-cart-panel.show{opacity:1;transform:none}
#mini-cart-panel.hiding{opacity:0;transform:translateY(-6px) scale(.98)}
@media (max-width: 575.98px){
  #mini-cart-panel.position-fixed{transition:opacity .24s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
  #mini-cart-panel.position-fixed:not(.show){transform:translateY(10px)}
  #mini-cart-panel.position-fixed.hiding{transform:translateY(10px);opacity:0}
}
/* Панель користувача — така ж анімація */
#user-panel{opacity:0;transform:translateY(-6px) scale(.98);transition:opacity .22s ease,transform .22s ease}
#user-panel.show{opacity:1;transform:none}

/* ===== ПРОМОКОДЫ ===== */

/* Секция промокодов */
.promocodes-admin-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* Заголовок секции */
.promocodes-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.promocodes-title-section {
  flex: 1;
}

.promocodes-title {
  display: flex;
  align-items: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem 0;
}

.promocodes-stats {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 0.9rem;
}

.stat-item.active {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.stat-label {
  color: rgba(255, 255, 255, 0.7);
}

.stat-value {
  font-weight: 600;
  color: #fff;
}

.promocodes-actions {
  display: flex;
  gap: 1rem;
}

.promocode-create-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}

.promocode-create-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
  color: #fff;
}

/* Список промокодов */
.promocodes-list {
  display: grid;
  gap: 1.5rem;
}

.promocode-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.promocode-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border-color: rgba(139, 92, 246, 0.3);
}

.promocode-main-info {
  margin-bottom: 1.5rem;
}

.promocode-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.promocode-code-section {
  flex: 1;
}

.promocode-code {
  font-size: 1.5rem;
  font-weight: 700;
  color: #8b5cf6;
  margin-bottom: 0.25rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}

.promocode-date {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.promocode-status-section {
  display: flex;
  align-items: center;
}

.promocode-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

.promocode-status.active {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

/* Детали промокода */
.promocode-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.promocode-discount {
  display: flex;
  align-items: center;
}

.discount-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.discount-type {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.discount-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #10b981;
}

.promocode-usage {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.usage-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.usage-label {
  color: rgba(255, 255, 255, 0.7);
}

.usage-current {
  font-weight: 600;
  color: #8b5cf6;
}

.usage-separator {
  color: rgba(255, 255, 255, 0.5);
}

.usage-max {
  color: rgba(255, 255, 255, 0.8);
}

.usage-unlimited {
  color: #10b981;
  font-weight: 700;
}

.usage-progress {
  width: 100%;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Статистика промокода */
.promocode-stats {
  display: flex;
  gap: 1.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.promocode-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.promocode-stats .stat-item svg {
  color: #8b5cf6;
}

/* Действия с промокодом */
.promocode-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.action-btn.edit {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

.action-btn.edit:hover {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.action-btn.toggle.activate:hover {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

.action-btn.toggle.deactivate:hover {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

.action-btn.delete {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* Состояние без промокодов */
.no-promocodes {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.no-promocodes-icon {
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.5);
}

.no-promocodes-text {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.5rem;
}

.create-first-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}

.create-first-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
  color: #fff;
}

/* ===== ФОРМА ПРОМОКОДА ===== */

.promocode-form-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

.promocode-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.form-title-section {
  flex: 1;
}

.form-title {
  display: flex;
  align-items: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem 0;
}

.form-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
}

.form-actions {
  display: flex;
  gap: 1rem;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.promocode-form-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem;
  backdrop-filter: blur(10px);
}

.promocode-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group.checkbox-group {
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #fff;
  font-size: 0.95rem;
}

.form-label svg {
  color: #8b5cf6;
}

.form-help {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.25rem;
}

.form-error {
  font-size: 0.85rem;
  color: #f87171;
  margin-top: 0.25rem;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.checkbox-label svg {
  color: #10b981;
}

.form-actions-bottom {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.submit-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
}

.cancel-btn {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Стили для информации о промокоде в заказах */

.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Стили для отображения баллов */

.points-icon {
  color: #f39c12;
}

.points-reward-card {
  margin-top: 8px;
  padding: 6px 10px;
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(230, 126, 34, 0.1));
  border: 1px solid rgba(243, 156, 18, 0.2);
  border-radius: 6px;
}

.points-icon-small {
  color: #f39c12;
}

.points-text-small {
  color: #ecf0f1;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Компактное отображение баллов в блоке с цветами */
.points-reward-compact {
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.15), rgba(230, 126, 34, 0.15));
  border: 1px solid rgba(243, 156, 18, 0.25);
  border-radius: 8px;
  padding: 6px 10px;
  backdrop-filter: blur(4px);
}

.points-help-small {
  padding: 2px 4px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

/* Стили для анимации кнопок сохранения */
.btn-success {
  background: linear-gradient(135deg, #28a745, #20c997);
  border: none;
  color: white;
  box-shadow: 0 8px 32px rgba(40, 167, 69, 0.4);
}

.btn-danger {
  background: linear-gradient(135deg, #dc3545, #c82333);
  border: none;
  color: white;
  box-shadow: 0 8px 32px rgba(220, 53, 69, 0.4);
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Анимация для кнопок */
.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Адаптивность для промокодов */
@media (max-width: 768px) {
  .promocodes-header {
    flex-direction: column;
    gap: 1rem;
  }
  
  .promocodes-stats {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .promocode-details {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .promocode-stats {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .promocode-actions {
    justify-content: center;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .form-actions-bottom {
    flex-direction: column;
  }
  
  .promocode-form-header {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Unified product edit page */
.bg-dark-subtle {
  background-color: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.card-header h6 {
  color: #e9ecef;
  font-weight: 600;
}

.form-label.fw-semibold {
  color: #e9ecef;
  font-weight: 600;
}

.form-text {
  color: #adb5bd;
  font-size: 0.875rem;
}

/* Button animations */

/* Color and image cards */
.card.bg-dark {
  transition: transform 0.2s ease-in-out;
}

.card.bg-dark:hover {
  transform: translateY(-2px);
}

.card-img-top {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

/* Enhanced product edit page styles */
.nav-pills .nav-link {
  color: var(--tc-text);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin-bottom: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.005));
  backdrop-filter: blur(12px);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.025em;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.nav-pills .nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

.nav-pills .nav-link:hover {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.03));
  border-color: rgba(139, 92, 246, 0.25);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25);
}

.nav-pills .nav-link:hover::before {
  left: 100%;
}

.nav-pills .nav-link.active {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border-color: #8b5cf6;
  color: #fff;
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.5);
  transform: translateY(-3px);
  font-weight: 700;
}

.nav-pills .nav-link .badge {
  font-size: 0.7rem !important;
  padding: 0.375rem 0.625rem !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(4px) !important;
  margin-left: auto !important;
  align-self: center !important;
}

.nav-pills .nav-link i {
  margin-right: 0.5rem !important;
  width: 16px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.nav-pills .nav-link span:not(.badge) {
  flex: 1 !important;
  text-align: left !important;
}

/* Modal enhancements */
.modal-content {
  border-radius: 20px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(20px);
}

.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.75rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}

.modal-body {
  padding: 1.75rem;
}

.modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.75rem;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.02));
}

/* Card enhancements */
.card.h-100 {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
  backdrop-filter: blur(8px);
}

.card.h-100:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  border-color: rgba(139, 92, 246, 0.3);
}

/* Form group enhancements */
.form-group {
  margin-bottom: 1.75rem;
}

.form-label {
  margin-bottom: 0.625rem;
  font-weight: 600;
  color: var(--tc-text);
  font-size: 0.95rem;
  letter-spacing: 0.025em;
}

.form-control {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  color: var(--tc-text);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0.875rem 1rem;
  font-size: 0.95rem;
  backdrop-filter: blur(4px);
}

.form-control:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  transform: translateY(-1px);
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Badge enhancements */
.badge {
  font-weight: 600;
  padding: 0.625rem 0.875rem;
  border-radius: 8px;
  font-size: 0.8rem;
  letter-spacing: 0.025em;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}

/* Empty state enhancements */
.text-center.py-5 {
  padding: 4rem 1.5rem;
}

.text-center.py-5 i {
  opacity: 0.4;
  filter: blur(0.5px);
}

/* Enhanced glass effect for cards */
.card.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.card.glass .card-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Lighter background matching site style */
.container-fluid {
  background: linear-gradient(135deg, #111318 0%, #161a22 50%, #111318 100%);
  min-height: 100vh;
  padding: 2rem 0;
}

/* Enhanced card backgrounds */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Enhanced sidebar */
.card.glass .card-body {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.005));
}

/* Enhanced button styles */
.btn-outline-primary {
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
  backdrop-filter: blur(4px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outline-primary:hover {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1));
  border-color: #8b5cf6;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}

/* Enhanced tab content */
.tab-content {
  animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced sidebar */
.card.glass .card-body {
  padding: 1.5rem;
}

/* Enhanced gradient backgrounds */
.bg-gradient-primary {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

/* Enhanced empty states */
.text-center.py-5 .position-relative {
  transition: transform 0.3s ease;
}

.text-center.py-5:hover .position-relative {
  transform: scale(1.05);
}

/* Enhanced card headers */
.card-header .position-relative {
  transition: transform 0.3s ease;
}

.card-header:hover .position-relative {
  transform: scale(1.1);
}

/* Enhanced form sections */
.card.bg-dark-subtle {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  backdrop-filter: blur(12px);
}

.card.bg-dark-subtle .card-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Enhanced form checkboxes */
.form-check-input {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.form-check-input:checked {
  background-color: #8b5cf6;
  border-color: #8b5cf6;
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

/* Enhanced textarea */
textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* Enhanced file inputs */
input[type="file"].form-control {
  padding: 0.75rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

/* Enhanced select dropdowns */
select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23e9ecef' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Enhanced animations */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tab-pane.fade.show {
  animation: slideInRight 0.4s ease-out;
}

/* Enhanced hover effects */
.card.h-100 .card-body {
  transition: all 0.3s ease;
}

.card.h-100:hover .card-body {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
}

/* Professional form sections */
.form-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  margin-bottom: 1.5rem;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.section-title {
  color: var(--tc-text);
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
  letter-spacing: 0.025em;
  opacity: 0.9;
}

/* Новый стильный дизайн для основных данных */
.product-info-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.info-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: start;
}

.info-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.info-group:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.info-group.full-width {
  grid-column: 1 / -1;
}

/* Цветовые акценты для разных групп */
.info-group.category {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(41, 128, 185, 0.1));
  border-color: rgba(52, 152, 219, 0.3);
}

.info-group.main-title {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(39, 174, 96, 0.1));
  border-color: rgba(46, 204, 113, 0.3);
}

.info-group.featured {
  background: linear-gradient(135deg, rgba(241, 196, 15, 0.1), rgba(243, 156, 18, 0.1));
  border-color: rgba(241, 196, 15, 0.3);
}

.info-group.price {
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(142, 68, 173, 0.1));
  border-color: rgba(155, 89, 182, 0.3);
}

.info-group.points {
  background: linear-gradient(135deg, rgba(230, 126, 34, 0.1), rgba(211, 84, 0, 0.1));
  border-color: rgba(230, 126, 34, 0.3);
}

.info-group.discount {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(192, 57, 43, 0.1));
  border-color: rgba(231, 76, 60, 0.3);
}

.info-group.url-slug {
  background: linear-gradient(135deg, rgba(149, 165, 166, 0.1), rgba(127, 140, 141, 0.1));
  border-color: rgba(149, 165, 166, 0.3);
}

.info-group.image-input {
  background: linear-gradient(135deg, rgba(26, 188, 156, 0.1), rgba(22, 160, 133, 0.1));
  border-color: rgba(26, 188, 156, 0.3);
}

.info-group.image-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  padding: 1rem;
}

.current-image {
  position: relative;
  max-width: 250px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
}

.current-image:hover {
  transform: scale(1.05);
}

.current-image img {
  width: 100%;
  height: auto;
  display: block;
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
  padding: 1.5rem;
  color: white;
  text-align: center;
}

.image-label {
  font-size: 0.9rem;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Стили для переключателя "Рекомендованный" */
.featured-toggle {
  margin-top: 0.5rem;
}

.form-check.form-switch {
  padding-left: 0;
}

.form-check-input {
  width: 3rem;
  height: 1.5rem;
  margin-right: 0.75rem;
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
  transition: all 0.3s ease;
}

.form-check-input:checked {
  background-color: #f39c12;
  border-color: #f39c12;
  box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.25);
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.25);
}

.toggle-label {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

/* Стили для секции ценообразования */
.pricing-section {
  background: linear-gradient(135deg, rgba(52, 73, 94, 0.05), rgba(44, 62, 80, 0.05));
  border-radius: 20px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 1rem 0;
}

/* Улучшенные стили для полей ввода */
.form-control, .form-select {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: white;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 0.875rem 1rem;
}

.form-control:focus, .form-select:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(52, 152, 219, 0.6);
  box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
  color: white;
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.form-label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.form-hint {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.25rem;
  font-style: italic;
}

/* Стили для кнопки сохранения */
.btn-cta {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border: none;
  color: white;
  font-weight: 600;
  padding: 0.875rem 2rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}

.btn-cta:hover {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
}

.btn-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}

/* Стили для модала с палитрой цветов */
.color-type-selector {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 1rem;
}

.color-type-options {
  display: flex;
  gap: 1rem;
}

.color-type-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--tc-text);
}

.color-type-option:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(139, 92, 246, 0.2);
}

.color-type-option.active {
  background: rgba(139, 92, 246, 0.1);
  border-color: #8b5cf6;
  color: #8b5cf6;
}

.color-type-icon {
  width: 40px;
  height: 40px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.color-type-option.active .color-type-icon {
  background: #8b5cf6;
  color: white;
}

/* Переключатель режимов цвета */
.color-mode-selector .btn-group {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 0.25rem;
}

.color-mode-selector .btn {
  border: none;
  background: transparent;
  color: var(--tc-text);
  transition: all 0.2s ease;
}

.color-mode-selector .btn-check:checked + .btn {
  background: #8b5cf6;
  color: white;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* Color picker контейнер */
.color-picker-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.color-picker {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: none;
}

.color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

.hex-input {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  text-align: center;
}

/* Стили для загрузки множественных изображений */
.image-upload-area {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 1rem;
}

.upload-instructions {
  text-align: center;
}

.image-preview-container {
  margin-top: 1rem;
}

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.image-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-item .remove-image {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.image-preview-item .remove-image:hover {
  background: #dc3545;
  transform: scale(1.1);
}

.image-preview-item .image-number {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.7rem;
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
}

/* Предварительный просмотр */
.color-preview {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 1rem;
}

.preview-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.color-preview-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.preview-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.combined-preview {
  position: relative;
  overflow: hidden;
}

.combined-preview::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--primary-color, #000000);
}

.combined-preview::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--secondary-color, #FFFF00);
}

.combined-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  transform: translateX(-50%);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

/* Стили для цветовых кружков в карточках товаров */

/* Стили для цветовых кружков в корзине и заказах */
.swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Стили для комбинированных цветов в карточках */
.color-swatch .swatch[data-secondary]:not([data-secondary=""]) {
  position: relative;
  overflow: hidden;
  background: transparent !important;
}

.color-swatch .swatch[data-secondary]:not([data-secondary=""])::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--primary-color);
  border-radius: 50% 0 0 50%;
}

.color-swatch .swatch[data-secondary]:not([data-secondary=""])::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--secondary-color);
  border-radius: 0 50% 50% 0;
}

/* Разделительная линия для комбинированных цветов */
.color-swatch .swatch[data-secondary]:not([data-secondary=""]) .divider {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: translateX(-50%);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Стили для комбинированных цветов в корзине и заказах */
.swatch[data-secondary]:not([data-secondary=""]) {
  position: relative;
  overflow: hidden;
}

.swatch[data-secondary]:not([data-secondary=""])::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--primary-color);
  border-radius: 50% 0 0 50%;
}

.swatch[data-secondary]:not([data-secondary=""])::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--secondary-color);
  border-radius: 0 50% 50% 0;
}

.preview-text {
  color: var(--tc-text);
  font-weight: 500;
  font-size: 0.9rem;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {

  .color-type-options {
    flex-direction: column;
  }
  
  .preview-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* Enhanced form labels */
.form-label {
  color: var(--tc-text);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  letter-spacing: 0.025em;
  opacity: 0.9;
}

.form-label i {
  color: #8b5cf6;
  opacity: 0.8;
}

/* Enhanced form hints */
.form-hint {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  margin-top: 0.375rem;
  padding: 0.375rem 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  border-left: 2px solid #8b5cf6;
}

.form-hint i {
  color: #8b5cf6;
  opacity: 0.6;
  margin-right: 0.25rem;
}

/* Enhanced form controls */
.form-control {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--tc-text);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.form-control:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
  outline: none;
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* Enhanced checkboxes */
.form-check {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  padding: 0.75rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.form-check:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  border-color: rgba(139, 92, 246, 0.2);
}

.form-check-input {
  width: 1.125rem;
  height: 1.125rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  transition: all 0.2s ease;
  margin-right: 0.75rem;
}

.form-check-input:checked {
  background: #8b5cf6;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
  outline: none;
}

.form-check-label {
  color: var(--tc-text);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.2s ease;
  margin: 0;
  flex: 1;
}

.form-check-label:hover {
  color: #8b5cf6;
}

.form-check-label i {
  color: #8b5cf6;
  opacity: 0.8;
  margin-right: 0.5rem;
}

/* Promo settings */

.promo-option:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(139, 92, 246, 0.2);
}

/* Image upload section */

.current-image {
  text-align: center;
}

.image-preview {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.image-preview img {
  max-height: 180px;
  width: auto;
  display: block;
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));
  padding: 1rem 0.5rem 0.5rem;
  text-align: center;
}

.image-label {
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.9;
}

/* Enhanced alerts */
.alert {
  border-radius: 8px;
  border: none;
  padding: 0.75rem 1rem;
}

.alert-danger {
  background: rgba(220, 53, 69, 0.1);
  color: #ff6b6b;
  border-left: 3px solid #dc3545;
}

.alert-icon {
  width: 32px;
  height: 32px;
  background: #dc3545;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.875rem;
}

/* Enhanced textarea */
textarea.form-control {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

/* Enhanced select */
select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23e9ecef' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  padding-right: 2.5rem;
}

/* Enhanced file input */
input[type="file"].form-control {
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(139, 92, 246, 0.3);
  transition: all 0.2s ease;
}

input[type="file"].form-control:hover {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.03);
}

/* Form floating styles - более специфичные селекторы */

.form-floating > .form-control,
.form-floating > input.form-control,
.form-floating > textarea.form-control,

.form-floating > .form-control:focus,
.form-floating > input.form-control:focus,
.form-floating > textarea.form-control:focus,
.form-floating > select.form-control:focus {
  padding-top: 1.625rem !important;
  padding-bottom: 0.625rem !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
  outline: none !important;
}

.form-floating > .form-control:not(:placeholder-shown),
.form-floating > input.form-control:not(:placeholder-shown),
.form-floating > textarea.form-control:not(:placeholder-shown),

.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > input.form-control:not(:placeholder-shown) ~ label,
.form-floating > textarea.form-control:not(:placeholder-shown) ~ label,

.form-floating > .form-control:focus ~ label,
.form-floating > input.form-control:focus ~ label,
.form-floating > textarea.form-control:focus ~ label,
.form-floating > select.form-control:focus ~ label {
  opacity: 0.65 !important;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > input.form-control:focus ~ label,
.form-floating > input.form-control:not(:placeholder-shown) ~ label,
.form-floating > textarea.form-control:focus ~ label,
.form-floating > textarea.form-control:not(:placeholder-shown) ~ label,
.form-floating > select.form-control:focus ~ label,

/* Form floating textarea - специфичные стили */

.form-floating > textarea.form-control:focus {
  padding-top: 1.625rem !important;
  padding-bottom: 0.625rem !important;
}

/* Form floating file input - специфичные стили */
.form-floating > input[type="file"].form-control {
  height: calc(3.5rem + 2px) !important;
  padding-top: 1.625rem !important;
  padding-bottom: 0.625rem !important;
  display: block !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: #e8e9ec !important;
  cursor: pointer !important;
}

.form-floating > input[type="file"].form-control:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #8b5cf6 !important;
}

.form-floating > input[type="file"].form-control ~ label {
  opacity: 0.65 !important;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

/* КРИТИЧЕСКИЕ ИСПРАВЛЕНИЯ ДЛЯ FORM-FLOATING - ПРИНУДИТЕЛЬНОЕ ПРИМЕНЕНИЕ */
.form-floating > .form-control,
.form-floating > input.form-control,
.form-floating > textarea.form-control,

.form-floating > .form-control:focus,
.form-floating > input.form-control:focus,
.form-floating > textarea.form-control:focus,
.form-floating > select.form-control:focus {
  padding-top: 1.625rem !important;
  padding-bottom: 0.625rem !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
  outline: none !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > input.form-control:focus ~ label,
.form-floating > input.form-control:not(:placeholder-shown) ~ label,
.form-floating > textarea.form-control:focus ~ label,
.form-floating > textarea.form-control:not(:placeholder-shown) ~ label,
.form-floating > select.form-control:focus ~ label,

/* КРИТИЧЕСКИЕ ИСПРАВЛЕНИЯ ДЛЯ НАВИГАЦИИ */
.nav-pills .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.nav-pills .nav-link .badge {
  margin-left: auto !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

.nav-pills .nav-link i {
  margin-right: 0.5rem !important;
  width: 16px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.nav-pills .nav-link span:not(.badge) {
  flex: 1 !important;
  text-align: left !important;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .nav-pills {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
  }
  
  .nav-pills .nav-link {
    white-space: nowrap;
    margin-bottom: 0;
    margin-right: 0.75rem;
    min-width: 140px;
    text-align: center;
  }
  
  .card-body {
    padding: 1.25rem;
  }
  
  .modal-dialog {
    margin: 1rem;
  }
  
  .form-control {
    padding: 0.75rem 0.875rem;
  }
}

/* ===== КРАСИВОЕ НИЖНЕЕ МЕНЮ ДЛЯ МОБИЛЬНЫХ ===== */
/* Стили перенесены в основной блок выше - удаляем дубликаты */

@keyframes bottomNavHintUpDown {
  0% { transform: translateY(0); }
  35% { transform: translateY(4px); }
  70% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
.bottom-nav.hint-wiggle {
  animation: bottomNavHintUpDown 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bottom-nav-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0.5rem;
  gap: 0.25rem;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  padding: 0.6rem 0.8rem;
  border-radius: 16px;
  flex: 1;
  max-width: 80px;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
}

/* Красивое активное состояние с "island" эффектом */
.bottom-nav-item.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.12));
  box-shadow: 
    0 4px 12px rgba(139, 92, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #a78bfa;
  transform: translateY(-2px);
}

/* Hover эффект */
.bottom-nav-item:hover:not(.active) {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.bottom-nav-icon {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.3rem;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Анимированное свечение для активной иконки */
.bottom-nav-item.active .bottom-nav-icon::before {
  content: '';
  position: absolute;
  inset: -6px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  animation: icon-glow 2s ease-in-out infinite;
  opacity: 0.8;
}

/* Анимация иконки при hover */
.bottom-nav-item:hover .bottom-nav-icon {
  transform: scale(1.15) translateY(-2px);
}

.bottom-nav-item.active .bottom-nav-icon {
  transform: scale(1.12);
}

/* SVG иконки */
.bottom-nav-icon svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  transition: filter 0.3s ease;
}

.bottom-nav-item.active .bottom-nav-icon svg {
  filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.5));
}

.bottom-nav-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0.9;
  letter-spacing: 0.3px;
}

.bottom-nav-item.active .bottom-nav-label {
  opacity: 1;
  font-weight: 700;
  transform: scale(1.05);
}

/* Анимации для нижнего меню */
@keyframes icon-glow {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes badge-bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes badge-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
  }
}

/* Анимация при наведении на иконки */
.bottom-nav-icon svg {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
}

.bottom-nav-item:hover .bottom-nav-icon svg {
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6));
  transform: translate(-50%, -50%) scale(1.1);
}

.bottom-nav-item.active .bottom-nav-icon svg {
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.8));
  transform: translate(-50%, -50%) scale(1.1);
}

/* Эффект нажатия */
.bottom-nav-item:active {
  transform: scale(0.95);
}

.bottom-nav-item:active .bottom-nav-icon {
  transform: scale(0.9);
}

/* Адаптивность для очень маленьких экранов */
@media (max-width: 360px) {
  .bottom-nav-container {
    padding: 0 0.5rem;
  }
  
  .bottom-nav-item {
    min-width: 50px;
    padding: 0.4rem;
  }
  
  .bottom-nav-icon {
    width: 28px;
    height: 28px;
  }
  
  .bottom-nav-label {
    font-size: 0.7rem;
  }
}

/* Позиционирование мини-панелей на мобильных устройствах */
@media (max-width: 768px) {
  .cart-panel,
  .user-panel {
    bottom: 80px !important;
    top: auto !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-width: none !important;
    position: fixed !important;
    z-index: 1001 !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.3) !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  .cart-panel.show,
  .user-panel.show {
    transform: translateY(0) !important;
  }
  
  /* Убираем отступ снизу у основного контента */
  main.container-xxl {
    padding-bottom: 100px !important;
  }
  
  /* Анимация появления снизу */
  .cart-panel,
  .user-panel {
    animation: slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  @keyframes slideUpFromBottom {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* Дополнительные стили для мобильных панелей */
  .cart-panel .cart-header,
  .user-panel .user-header {
    border-radius: 20px 20px 0 0 !important;
    padding: 1.25rem !important;
  }
  
  .cart-panel .cart-content,
  .user-panel .user-menu {
    padding: 0 1.25rem 1.25rem !important;
  }
  
  /* Улучшенная прокрутка для мобильных */
  .cart-panel::-webkit-scrollbar,
  .user-panel::-webkit-scrollbar {
    width: 4px !important;
  }
  
  .cart-panel::-webkit-scrollbar-track,
  .user-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 2px !important;
  }
  
  .cart-panel::-webkit-scrollbar-thumb,
  .user-panel::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3) !important;
    border-radius: 2px !important;
  }
  
  .cart-panel::-webkit-scrollbar-thumb:hover,
  .user-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.5) !important;
  }
}

/* Мобильные стили для корзины и профиля в нижнем меню */
.cart-container-mobile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Стили для мобильных панелей в base.html */
#mini-cart-panel-mobile,
#user-panel-mobile {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  max-height: 85vh !important;
  border-radius: 20px 20px 0 0 !important;
  z-index: 1050 !important;
  background: linear-gradient(135deg, rgba(20,22,27,0.98), rgba(10,12,17,0.95)) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-bottom: none !important;
  box-shadow: 0 -16px 48px rgba(0,0,0,0.45), 0 0 32px rgba(139, 92, 246, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex !important;
  pointer-events: none; /* не перехватывать клики, пока панель скрыта */
  flex-direction: column;
  padding: 1.5rem !important;
  overflow: hidden;
}

#mini-cart-panel-mobile.show,
#user-panel-mobile.show {
  transform: translateY(0);
  pointer-events: auto; /* кликабельна только когда показана */
}

#mini-cart-panel-mobile .cart-header,
#user-panel-mobile .user-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  position: relative;
  z-index: 2;
}

/* ===== Мобильный мини‑профиль: кнопки как на десктопе ===== */
#user-panel-mobile .user-menu {
  gap: 0.75rem;
}

#user-panel-mobile .menu-item {
  padding: 1rem 1.25rem;
  border-radius: 16px;
  font-size: 1.02rem;
}

#user-panel-mobile .menu-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

#user-panel-mobile .menu-arrow {
  font-size: 1rem;
}

/* ===== Мобильный мини‑профиль: компактная карточка баллов ===== */
#user-panel-mobile .points-card-link { margin-bottom: 1rem; }
#user-panel-mobile .points-card {
  padding: 1rem 0.8rem;
  gap: 1rem;
  border-radius: 16px;
  min-height: 70px;
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.08) 0%, 
    rgba(255, 193, 7, 0.12) 25%,
    rgba(255, 152, 0, 0.08) 50%,
    rgba(255, 215, 0, 0.06) 75%,
    rgba(255, 193, 7, 0.1) 100%);
  border: 2px solid rgba(255, 215, 0, 0.4);
}
#user-panel-mobile .points-icon {
  width: 45px;
  height: 45px;
  border-radius: 14px;
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.2) 0%, 
    rgba(255, 193, 7, 0.3) 50%,
    rgba(255, 152, 0, 0.2) 100%);
  border: 2px solid rgba(255, 215, 0, 0.6);
  color: #FFD700;
}
#user-panel-mobile .points-label { 
  font-size: 0.75rem; 
  margin-bottom: 0.25rem; 
  color: rgba(255, 215, 0, 0.9);
  font-weight: 700;
}
#user-panel-mobile .points-amount { 
  font-size: 1.3rem; 
  margin-bottom: 0.25rem; 
  color: #FFD700;
  font-weight: 900;
}
#user-panel-mobile .points-hint { 
  font-size: 0.65rem; 
  color: #9ca3af;
  font-weight: 500;
}

#mini-cart-panel-mobile .cart-content,
#user-panel-mobile .user-menu {
  flex: 1;
  overflow-y: auto;
  position: relative;
  z-index: 2;
  max-height: calc(85vh - 200px);
}

/* Адаптивная высота для панелей */
@media (max-height: 600px) {
  #mini-cart-panel-mobile,
  #user-panel-mobile {
    max-height: 90vh !important;
  }
  
  #mini-cart-panel-mobile .cart-content,
  #user-panel-mobile .user-menu {
    max-height: calc(90vh - 150px);
  }
}

@media (min-height: 800px) {
  #mini-cart-panel-mobile,
  #user-panel-mobile {
    max-height: 75vh !important;
  }
  
  #mini-cart-panel-mobile .cart-content,
  #user-panel-mobile .user-menu {
    max-height: calc(75vh - 200px);
  }
}

#mini-cart-panel-mobile .close-btn,
#user-panel-mobile .close-btn {
  background: none;
  border: none;
  color: #9ca3af;
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#mini-cart-panel-mobile .close-btn:hover,
#user-panel-mobile .close-btn:hover {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  transform: scale(1.1);
}

/* Специальные стили для мобильных панелей */
#mini-cart-panel-mobile .cart-sparks-container,
#user-panel-mobile .sparks-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* Мобильные панели используют общие стили десктопных панелей */
#mini-cart-panel-mobile .cart-menu,
#user-panel-mobile .user-menu {
  position: relative;
  z-index: 2;
}

#mini-cart-panel-mobile .cart-menu-item,
#user-panel-mobile .menu-item {
  position: relative;
  z-index: 2;
}

#mini-cart-panel-mobile .checkout-item {
  border-color: rgba(16, 185, 129, 0.3);
}

#mini-cart-panel-mobile .checkout-item:hover {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

#mini-cart-panel-mobile .checkout-item .cart-menu-icon {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

#mini-cart-panel-mobile .checkout-item:hover .cart-menu-icon {
  background: rgba(16, 185, 129, 0.2);
}

#mini-cart-panel-mobile .cart-info,
#user-panel-mobile .logout-section {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 12px;
  position: relative;
  z-index: 2;
}

#mini-cart-panel-mobile .cart-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 6px;
  color: #8b5cf6;
  flex-shrink: 0;
}

#mini-cart-panel-mobile .cart-info-text {
  font-size: 0.85rem;
  color: #9ca3af;
  line-height: 1.4;
}

/* Мобильные панели используют общие стили десктопных панелей для кнопки выхода */
#user-panel-mobile .logout-btn {
  position: relative;
  z-index: 2;
}

/* Мобильные панели используют общие стили десктопных панелей для блока с баллами */
#user-panel-mobile .points-card {
  position: relative;
  z-index: 2;
}

/* Стили для аутентификации в мобильной панели */
#user-panel-mobile .auth-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

#user-panel-mobile .auth-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  border-radius: 12px;
  color: #8b5cf6;
}

#user-panel-mobile .auth-title {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 600;
  color: #e8e9ec;
}

#user-panel-mobile .auth-menu {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

#user-panel-mobile .auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

#user-panel-mobile .auth-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

#user-panel-mobile .auth-btn:hover::before {
  left: 100%;
}

#user-panel-mobile .auth-btn.primary {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: white;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

#user-panel-mobile .auth-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

#user-panel-mobile .auth-btn.secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #e8e9ec;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#user-panel-mobile .auth-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

#user-panel-mobile .auth-info {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 12px;
}

#user-panel-mobile .info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 6px;
  color: #8b5cf6;
  flex-shrink: 0;
}

#user-panel-mobile .info-text {
  font-size: 0.85rem;
  color: #9ca3af;
  line-height: 1.4;
}

.cart-btn-mobile {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
}

.cart-btn-mobile:hover {
  transform: scale(1.1);
}

.bottom-nav-item.active .cart-btn-mobile {
  filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.4));
}

.cart-icon-wrapper-mobile {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: visible;
  border: 2px solid rgba(139, 92, 246, 0.3);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.cart-icon-wrapper-mobile:hover {
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
}

.cart-icon {
  color: #8b5cf6;
  transition: all 0.3s ease;
  width: 20px;
  height: 20px;
}

.cart-glow-mobile {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
  opacity: 0;
  transition: all 0.3s ease;
  z-index: -1;
}

.cart-icon-wrapper-mobile:hover .cart-glow-mobile {
  opacity: 1;
  transform: scale(1.1);
}

.cart-badge-mobile {
  position: absolute;
  top: -6px;
  right: -6px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 10px;
  box-shadow: 
    0 2px 8px rgba(239, 68, 68, 0.5),
    0 0 0 2px rgba(20, 22, 27, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: badge-pulse 2s infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid #1a1a1a;
  animation: cartBadgePulse 2s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  line-height: 1;
  z-index: 10;
}

/* Мобильные стили для профиля */
.user-profile-container-mobile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Счетчик избранного для мобильных */
.favorites-badge-mobile {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  box-sizing: border-box;
  display: none; /* Скрыт по умолчанию */
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  line-height: 1;
  z-index: 10;
  transition: all 0.3s ease;
}

/* Анимация и свечение для мобильного сердечка избранного - специфичный селектор */
a[href*="favorites"] .bottom-nav-icon.has-items svg {
  animation: heartBeat 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transform: translate(-50%, -50%) scale(1);
}

a[href*="favorites"] .bottom-nav-icon.has-items::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* animation: favoritesConstantGlow 3s ease-in-out infinite; */ /* Отключено для отладки */
  pointer-events: none;
  z-index: -1;
}

.user-avatar-btn-mobile {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-avatar-btn-mobile:hover {
  transform: scale(1.05);
}

.user-login-link-mobile {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.user-login-link-mobile:hover {
  transform: scale(1.05);
}

.avatar-wrapper-mobile {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: visible;
  border: 2px solid rgba(139, 92, 246, 0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-wrapper-mobile:hover {
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.avatar-image-mobile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.avatar-glow-mobile {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.avatar-wrapper-mobile:hover .avatar-glow-mobile {
  opacity: 1;
  animation: avatarPulse 2s ease-in-out infinite;
}

.orders-badge-mobile {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid #1a1a1a;
  animation: badgePulse 2s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  line-height: 1;
  z-index: 10;
}

/* Активные состояния для мобильных элементов */
.bottom-nav-item.active .cart-icon-wrapper-mobile,
.bottom-nav-item.active .avatar-wrapper-mobile {
  border-color: rgba(139, 92, 246, 0.8);
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.6);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
}

.bottom-nav-item.active .cart-glow-mobile,
.bottom-nav-item.active .avatar-glow-mobile {
  opacity: 1;
  transform: scale(1.1);
}

/* МАКСИМАЛЬНО АГРЕССИВНЫЕ СТИЛИ ДЛЯ МОБИЛЬНОГО NAVBAR - В КОНЦЕ ФАЙЛА */
@media (max-width: 768px) {
  /* Принудительно переопределяем ВСЕ стили Bootstrap */
  nav.navbar.navbar-expand-lg.border-bottom.sticky-top.bg-body.backdrop-blur > div.container-xxl {
    padding: 0 1rem !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
    display: flex !important;
    width: 100% !important;
  }
  
  nav.navbar.navbar-expand-lg.border-bottom.sticky-top.bg-body.backdrop-blur > div.container-xxl > a.navbar-brand.fw-bold.d-flex.align-items-center.gap-2 {
    padding: 0.5rem 0 0.5rem 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    order: 1 !important;
  }
  
  nav.navbar.navbar-expand-lg.border-bottom.sticky-top.bg-body.backdrop-blur > div.container-xxl > button.navbar-toggler.position-relative {
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0.5rem !important;
    flex-shrink: 0 !important;
    order: 3 !important;
  }
  
  nav.navbar.navbar-expand-lg.border-bottom.sticky-top.bg-body.backdrop-blur > div.container-xxl > div.collapse.navbar-collapse {
    order: 2 !important;
  }
}

/* ===== КОМПАКТНЫЙ ТЕМНЫЙ БЛОК КАТЕГОРИЙ В СТИЛЕ HERO ===== */

/* Основная секция категорий */
.categories-section {
  position: relative;
  overflow: hidden;
}

/* Единый блок категорий */
.categories-unified-block {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(8, 8, 20, 0.98) 0%,
    rgba(12, 12, 30, 0.95) 25%,
    rgba(18, 18, 40, 0.92) 50%,
    rgba(12, 12, 30, 0.95) 75%,
    rgba(8, 8, 20, 0.98) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 20px;
  backdrop-filter: blur(25px);
  overflow: hidden;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 8px 25px rgba(139, 92, 246, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Заголовок в едином блоке */
.categories-header-unified {
  position: relative;
  padding: 2rem 2rem 1rem 2rem;
  z-index: 2;
  background: linear-gradient(180deg, 
    rgba(139, 92, 246, 0.03) 0%,
    rgba(99, 102, 241, 0.02) 50%,
    transparent 100%
  );
  border-bottom: 1px solid rgba(139, 92, 246, 0.08);
}

/* Фоновые эффекты для единого блока */
.categories-bg-unified {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.dark-particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.dark-particles .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, 
    rgba(139, 92, 246, 0.8) 0%,
    rgba(99, 102, 241, 0.6) 50%,
    rgba(59, 130, 246, 0.4) 100%
  );
  border-radius: 50%;
  animation: darkParticleFloat 8s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.dark-particles .particle:nth-child(1) {
  top: 25%;
  left: 15%;
  animation-delay: 0s;
}

.dark-particles .particle:nth-child(2) {
  top: 65%;
  left: 75%;
  animation-delay: 1.5s;
}

.dark-particles .particle:nth-child(3) {
  top: 75%;
  left: 25%;
  animation-delay: 3s;
}

.dark-particles .particle:nth-child(4) {
  top: 35%;
  left: 65%;
  animation-delay: 4.5s;
}

@keyframes darkParticleFloat {
  0%, 100% { 
    transform: translateY(0) scale(1);
    opacity: 0.4;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
  }
  25% { 
    transform: translateY(-10px) scale(1.2);
    opacity: 0.7;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
  }
  50% { 
    transform: translateY(-20px) scale(1.3);
    opacity: 1;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
  }
  75% { 
    transform: translateY(-10px) scale(1.1);
    opacity: 0.6;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
  }
}

.dark-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, 
    rgba(139, 92, 246, 0.08) 0%,
    rgba(99, 102, 241, 0.05) 30%,
    rgba(59, 130, 246, 0.03) 60%,
    transparent 100%
  );
  animation: darkGlowPulse 6s ease-in-out infinite;
  filter: blur(1px);
}

@keyframes darkGlowPulse {
  0%, 100% { 
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(1px);
  }
  25% { 
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1.05);
    filter: blur(1.5px);
  }
  50% { 
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.1);
    filter: blur(2px);
  }
  75% { 
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1.08);
    filter: blur(1.2px);
  }
}

/* Компактный заголовок */
.categories-title-compact {
  position: relative;
  z-index: 2;
}

/* Заголовок с иконкой каталога */
.title-with-catalog-icon {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Иконка каталога для мобильных */
.catalog-icon-mobile {
  display: none; /* Скрыта по умолчанию */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.15) 0%,
    rgba(99, 102, 241, 0.1) 50%,
    rgba(59, 130, 246, 0.08) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.1);
}

.catalog-icon-mobile:hover {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.25) 0%,
    rgba(99, 102, 241, 0.2) 50%,
    rgba(59, 130, 246, 0.15) 100%
  );
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-2px) scale(1.1);
  box-shadow: 
    0 8px 25px rgba(139, 92, 246, 0.3),
    0 4px 15px rgba(99, 102, 241, 0.2);
  color: #8b5cf6;
  text-decoration: none;
}

.catalog-icon-mobile:active {
  transform: translateY(0) scale(0.95);
  transition: all 0.1s ease;
}

.categories-title-text {
  font-size: 1.75rem;
  font-weight: 800;
  background: linear-gradient(135deg, 
    #ffffff 0%,
    #e0e7ff 30%,
    #8b5cf6 60%,
    #6366f1 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  text-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
  letter-spacing: -0.02em;
}

.title-accent-line {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, 
    #8b5cf6 0%,
    #a855f7 25%,
    #6366f1 50%,
    #3b82f6 75%,
    #8b5cf6 100%
  );
  border-radius: 2px;
  margin-top: 0.75rem;
  animation: accentLineGlow 4s ease-in-out infinite;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
}

@keyframes accentLineGlow {
  0%, 100% { 
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
    transform: scaleX(1);
  }
  25% { 
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.7);
    transform: scaleX(1.1);
  }
  50% { 
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.8);
    transform: scaleX(1.2);
  }
  75% { 
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.7);
    transform: scaleX(1.1);
  }
}

/* Компактная кнопка "Весь каталог" */
.catalog-link-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.1) 0%,
    rgba(99, 102, 241, 0.06) 50%,
    rgba(59, 130, 246, 0.04) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 30px;
  color: #8b5cf6;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.06);
}

/* Текст кнопки каталога */
.catalog-text {
  display: inline;
}

/* Иконка кнопки каталога */
.catalog-icon {
  display: inline;
}

.catalog-link-compact::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.5s ease;
}

.catalog-link-compact:hover {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.15) 0%,
    rgba(99, 102, 241, 0.1) 50%,
    rgba(59, 130, 246, 0.08) 100%
  );
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 8px 25px rgba(139, 92, 246, 0.2),
    0 4px 15px rgba(99, 102, 241, 0.15);
  color: #8b5cf6;
  text-decoration: none;
}

.catalog-link-compact:hover::before {
  left: 100%;
}

/* ===== КРАСИВАЯ КНОПКА СВОРАЧИВАНИЯ КАТЕГОРИЙ ===== */

/* Основная кнопка сворачивания */
.categories-toggle-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.12) 0%,
    rgba(99, 102, 241, 0.08) 50%,
    rgba(59, 130, 246, 0.05) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 30px;
  color: #8b5cf6;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  backdrop-filter: blur(15px);
  z-index: 2;
  min-width: 130px;
  box-shadow: 
    0 4px 15px rgba(139, 92, 246, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.categories-toggle-btn:hover {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.18) 0%,
    rgba(99, 102, 241, 0.12) 50%,
    rgba(59, 130, 246, 0.08) 100%
  );
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 
    0 12px 35px rgba(139, 92, 246, 0.25),
    0 6px 20px rgba(99, 102, 241, 0.2);
  color: #8b5cf6;
}

.categories-toggle-btn:active {
  transform: translateY(0) scale(0.98);
  transition: all 0.1s ease;
}

/* Контент кнопки */
.toggle-btn-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

/* Иконка стрелки */
.toggle-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-arrow {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* Текст кнопки */
.toggle-text {
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* Свечение кнопки */
.toggle-btn-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
}

.categories-toggle-btn:hover .toggle-btn-glow {
  width: 100px;
  height: 100px;
  opacity: 1;
  animation: toggleBtnGlowPulse 2s ease-in-out infinite;
}

@keyframes toggleBtnGlowPulse {
  0%, 100% { 
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% { 
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Ripple эффект при клике */
.toggle-btn-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
  pointer-events: none;
}

.categories-toggle-btn:active .toggle-btn-ripple {
  width: 150px;
  height: 150px;
  opacity: 0;
}

/* Состояние свернуто */
.categories-toggle-btn.collapsed .toggle-arrow {
  transform: rotate(180deg);
}

.categories-toggle-btn.collapsed .toggle-text {
  opacity: 0.7;
}

/* Анимация сворачивания контента */
.categories-content-unified {
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}

.categories-content-unified.collapsed {
  max-height: 0;
  padding: 0 1.5rem;
  opacity: 0;
  transform: translateY(-30px) scale(0.95);
}

/* Анимация появления/исчезновения сетки */
.categories-grid-compact {
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.categories-content-unified.collapsed .categories-grid-compact {
  opacity: 0;
  transform: translateY(-40px) scale(0.9);
}

/* Анимация фоновых эффектов */
.categories-bg-unified {
  transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.categories-content-unified.collapsed ~ .categories-bg-unified {
  opacity: 0.3;
  transform: scale(0.95);
}

/* Улучшенные анимации для сворачивания */
.categories-content-unified.expanding {
  animation: categoriesExpandUnified 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.categories-content-unified.collapsing {
  animation: categoriesCollapseUnified 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes categoriesExpandUnified {
  0% {
    max-height: 0;
    opacity: 0;
    transform: translateY(-40px) scale(0.9);
    filter: blur(8px);
  }
  30% {
    opacity: 0.3;
    transform: translateY(-25px) scale(0.95);
    filter: blur(4px);
  }
  70% {
    opacity: 0.8;
    transform: translateY(-5px) scale(0.98);
    filter: blur(1px);
  }
  100% {
    max-height: 1000px;
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes categoriesCollapseUnified {
  0% {
    max-height: 1000px;
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  30% {
    opacity: 0.8;
    transform: translateY(-5px) scale(0.98);
    filter: blur(1px);
  }
  70% {
    opacity: 0.3;
    transform: translateY(-25px) scale(0.95);
    filter: blur(4px);
  }
  100% {
    max-height: 0;
    opacity: 0;
    transform: translateY(-40px) scale(0.9);
    filter: blur(8px);
  }
}

/* Эффект пульсации кнопки */
.categories-toggle-btn.pulsing {
  animation: toggleBtnPulse 0.6s ease-in-out;
}

@keyframes toggleBtnPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.4);
  }
  100% {
    transform: scale(1);
  }
}

/* Контент категорий в едином блоке */
.categories-content-unified {
  position: relative;
  padding: 1rem 1.5rem 1.5rem 1.5rem; /* Добавлен отступ сверху */
  z-index: 2;
}

/* Темные фоновые эффекты */

.dark-gradient-1 {
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle, 
    rgba(139, 92, 246, 0.08) 0%,
    rgba(99, 102, 241, 0.05) 30%,
    rgba(59, 130, 246, 0.03) 60%,
    transparent 100%
  );
  animation: darkBgRotate1 20s linear infinite;
  filter: blur(2px);
}

.dark-gradient-2 {
  position: absolute;
  top: -40%;
  right: -40%;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle, 
    rgba(99, 102, 241, 0.06) 0%,
    rgba(59, 130, 246, 0.04) 30%,
    rgba(139, 92, 246, 0.02) 60%,
    transparent 100%
  );
  animation: darkBgRotate2 25s linear infinite reverse;
  filter: blur(1.5px);
}

@keyframes darkBgRotate1 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes darkBgRotate2 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* Летающие логотипчики */
.floating-logos {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.floating-logo {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.08) 0%,
    rgba(99, 102, 241, 0.05) 50%,
    rgba(59, 130, 246, 0.03) 100%
  );
  backdrop-filter: blur(8px);
  border: 1px solid rgba(139, 92, 246, 0.15);
  box-shadow: 
    0 4px 15px rgba(139, 92, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  opacity: 0.6;
  transition: all 0.3s ease;
}

.floating-logo img {
  filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.3));
  transition: all 0.3s ease;
}

.floating-logo.logo-1 {
  width: 32px;
  height: 32px;
  top: 15%;
  left: 15%;
  animation: logoFloat1 25s ease-in-out infinite;
}

.floating-logo.logo-2 {
  width: 28px;
  height: 28px;
  top: 65%;
  right: 20%;
  animation: logoFloat2 30s ease-in-out infinite;
}

.floating-logo.logo-3 {
  width: 36px;
  height: 36px;
  bottom: 25%;
  left: 25%;
  animation: logoFloat3 35s ease-in-out infinite;
}

.floating-logo.logo-4 {
  width: 24px;
  height: 24px;
  top: 35%;
  right: 35%;
  animation: logoFloat4 28s ease-in-out infinite;
}

.floating-logo.logo-5 {
  width: 30px;
  height: 30px;
  bottom: 45%;
  right: 15%;
  animation: logoFloat5 32s ease-in-out infinite;
}

@keyframes logoFloat1 {
  0%, 100% { 
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity: 0.6;
  }
  25% { 
    transform: translateY(-15px) translateX(10px) rotate(90deg) scale(1.1);
    opacity: 0.8;
  }
  50% { 
    transform: translateY(-25px) translateX(-5px) rotate(180deg) scale(0.9);
    opacity: 0.4;
  }
  75% { 
    transform: translateY(-10px) translateX(-15px) rotate(270deg) scale(1.05);
    opacity: 0.7;
  }
}

@keyframes logoFloat2 {
  0%, 100% { 
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity: 0.5;
  }
  30% { 
    transform: translateY(-20px) translateX(-10px) rotate(120deg) scale(1.15);
    opacity: 0.8;
  }
  60% { 
    transform: translateY(-30px) translateX(15px) rotate(240deg) scale(0.85);
    opacity: 0.3;
  }
  90% { 
    transform: translateY(-5px) translateX(20px) rotate(360deg) scale(1.1);
    opacity: 0.6;
  }
}

@keyframes logoFloat3 {
  0%, 100% { 
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity: 0.7;
  }
  20% { 
    transform: translateY(-18px) translateX(12px) rotate(72deg) scale(1.2);
    opacity: 0.9;
  }
  40% { 
    transform: translateY(-35px) translateX(-8px) rotate(144deg) scale(0.8);
    opacity: 0.4;
  }
  60% { 
    transform: translateY(-22px) translateX(-18px) rotate(216deg) scale(1.1);
    opacity: 0.6;
  }
  80% { 
    transform: translateY(-8px) translateX(25px) rotate(288deg) scale(0.95);
    opacity: 0.8;
  }
}

@keyframes logoFloat4 {
  0%, 100% { 
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity: 0.4;
  }
  35% { 
    transform: translateY(-12px) translateX(-15px) rotate(126deg) scale(1.25);
    opacity: 0.7;
  }
  70% { 
    transform: translateY(-28px) translateX(18px) rotate(252deg) scale(0.75);
    opacity: 0.3;
  }
}

@keyframes logoFloat5 {
  0%, 100% { 
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity: 0.6;
  }
  40% { 
    transform: translateY(-16px) translateX(14px) rotate(144deg) scale(1.3);
    opacity: 0.9;
  }
  80% { 
    transform: translateY(-24px) translateX(-12px) rotate(288deg) scale(0.8);
    opacity: 0.4;
  }
}

/* Компактная сетка категорий */
.categories-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  position: relative;
  z-index: 2;
}

/* Компактные карточки категорий */
.category-card-compact {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.01) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  backdrop-filter: blur(20px);
  min-height: 110px;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.2),
    0 2px 10px rgba(139, 92, 246, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.category-card-compact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.6), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.category-card-compact:hover {
  transform: translateY(-6px) scale(1.08);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 8px 30px rgba(139, 92, 246, 0.15),
    0 4px 15px rgba(99, 102, 241, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  text-decoration: none;
  color: inherit;
}

.category-card-compact:hover::before {
  opacity: 1;
}

/* Темные фоновые эффекты карточек */
.card-bg-dark {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.card-glow-dark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.category-card-compact:hover .card-glow-dark {
  width: 120px;
  height: 120px;
  opacity: 1;
  animation: cardGlowDarkPulse 2s ease-in-out infinite;
}

@keyframes cardGlowDarkPulse {
  0%, 100% { 
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1);
  }
  50% { 
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.card-ripple-dark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  pointer-events: none;
}

.category-card-compact:active .card-ripple-dark {
  width: 150px;
  height: 150px;
  opacity: 0;
}

/* Компактный контент карточки */
.card-content-compact {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  flex: 1;
}

/* Компактная иконка */
.card-icon-compact {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.12) 0%,
    rgba(99, 102, 241, 0.08) 50%,
    rgba(59, 130, 246, 0.05) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4px 15px rgba(139, 92, 246, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.category-card-compact:hover .card-icon-compact {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.2) 0%,
    rgba(99, 102, 241, 0.15) 50%,
    rgba(59, 130, 246, 0.1) 100%
  );
  border-color: rgba(139, 92, 246, 0.4);
  transform: scale(1.15) rotate(8deg);
  box-shadow: 
    0 8px 25px rgba(139, 92, 246, 0.25),
    0 4px 15px rgba(99, 102, 241, 0.2);
}

.card-icon-compact img {
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.category-card-compact:hover .card-icon-compact img {
  filter: 
    drop-shadow(0 6px 12px rgba(139, 92, 246, 0.5))
    drop-shadow(0 2px 6px rgba(99, 102, 241, 0.3))
    brightness(1.1);
  transform: scale(1.1);
}

/* Компактный текст */
.card-text-compact {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-title-compact {
  font-size: 0.9rem;
  font-weight: 700;
  background: linear-gradient(135deg, 
    #ffffff 0%,
    #e0e7ff 50%,
    #8b5cf6 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  letter-spacing: -0.01em;
}

.category-card-compact:hover .card-title-compact {
  background: linear-gradient(135deg, 
    #8b5cf6 0%,
    #a855f7 50%,
    #6366f1 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transform: translateY(-2px) scale(1.05);
  text-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* Анимация появления компактных карточек */
.category-card-compact {
  animation: categoryCardCompactAppear 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

.category-card-compact:nth-child(1) { animation-delay: 0.1s; }
.category-card-compact:nth-child(2) { animation-delay: 0.15s; }
.category-card-compact:nth-child(3) { animation-delay: 0.2s; }
.category-card-compact:nth-child(4) { animation-delay: 0.25s; }
.category-card-compact:nth-child(5) { animation-delay: 0.3s; }
.category-card-compact:nth-child(6) { animation-delay: 0.35s; }
.category-card-compact:nth-child(7) { animation-delay: 0.4s; }
.category-card-compact:nth-child(8) { animation-delay: 0.45s; }

@keyframes categoryCardCompactAppear {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    filter: blur(5px);
  }
  60% {
    opacity: 0.9;
    transform: translateY(-2px) scale(1.02);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Адаптивность для планшетов */
@media (max-width: 1024px) {
  .categories-header-unified {
    padding: 1.25rem 1.25rem 0 1.25rem;
  }
  
  .categories-content-unified {
    padding: 0.75rem 1.25rem 1.25rem 1.25rem; /* Добавлен отступ сверху */
  }
  
  .categories-title-text {
    font-size: 1.3rem;
  }

  .categories-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.875rem;
  }
  
  .category-card-compact {
    padding: 0.875rem;
    min-height: 90px;
  }
  
  .card-icon-compact {
    width: 45px;
    height: 45px;
  }
  
  .card-icon-compact img {
    width: 22px;
    height: 22px;
  }
  
  .card-title-compact {
    font-size: 0.8rem;
  }
  
  /* Адаптивность кнопки сворачивания */
  .categories-toggle-btn {
    padding: 8px 16px;
    font-size: 0.8rem;
    min-width: 100px;
  }
  
  .toggle-icon {
    width: 18px;
    height: 18px;
  }
  
  .toggle-arrow {
    width: 14px;
    height: 14px;
  }
  
  /* Адаптивность кнопки "Весь каталог" */
  .catalog-link-compact {
    padding: 8px 16px;
    font-size: 0.8rem;
  }
  
  /* Показываем иконку каталога для планшетов */
  .catalog-icon-mobile {
    display: flex;
    width: 32px;
    height: 32px;
  }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .categories-unified-block {
    border-radius: 12px;
  }
  
  .categories-header-unified {
    padding: 1rem 1rem 0 1rem;
  }
  
  .categories-content-unified {
    padding: 0.5rem 1rem 1rem 1rem; /* Добавлен отступ сверху */
  }
  
  .categories-title-text {
    font-size: 1.2rem;
  }
  
  .catalog-link-compact {
    padding: 6px 12px;
    font-size: 0.75rem;
    min-width: auto;
  }
  
  /* Скрываем текст кнопки каталога на мобильных */
  .catalog-text {
    display: none;
  }
  
  /* Показываем только иконку */
  .catalog-icon {
    display: inline;
  }
  
  /* Показываем иконку каталога в заголовке */
  .catalog-icon-mobile {
    display: flex;
    width: 30px;
    height: 30px;
  }

  .categories-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.75rem;
  }
  
  .category-card-compact {
    padding: 0.75rem;
    min-height: 80px;
    border-radius: 10px;
  }
  
  .card-content-compact {
    gap: 0.5rem;
  }
  
  .card-icon-compact {
    width: 40px;
    height: 40px;
  }
  
  .card-icon-compact img {
    width: 20px;
    height: 20px;
  }
  
  .card-title-compact {
    font-size: 0.75rem;
  }
  
  /* Уменьшаем количество частиц на мобильных */
  .dark-particles .particle {
    width: 2px;
    height: 2px;
  }
  
  /* Упрощаем анимации для лучшей производительности */
  .dark-gradient-1,
  .dark-gradient-2 {
    animation-duration: 30s;
  }
  
  .floating-logo {
    animation-duration: 30s;
  }
  
  /* Адаптивность кнопки сворачивания для мобильных */
  .categories-toggle-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
    min-width: 90px;
    order: 2; /* Размещаем по центру */
  }
  
  /* Изменяем порядок элементов в заголовке для мобильных */
  .categories-header-unified .d-flex {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  
  .categories-title-compact {
    order: 1; /* Заголовок сверху */
  }
  
  .catalog-link-compact {
    order: 3; /* Кнопка "Весь каталог" снизу */
    display: none; /* Скрываем кнопку на мобильных */
  }
  
  .toggle-icon {
    width: 16px;
    height: 16px;
  }
  
  .toggle-arrow {
    width: 12px;
    height: 12px;
  }
}

/* Адаптивность для маленьких мобильных устройств */
@media (max-width: 480px) {
  .categories-header-unified {
    padding: 0.75rem 0.75rem 0 0.75rem;
  }
  
  .categories-content-unified {
    padding: 0.5rem 0.75rem 0.75rem 0.75rem; /* Добавлен отступ сверху */
  }
  
  .categories-title-text {
    font-size: 1.1rem;
  }
  
  .catalog-link-compact {
    padding: 5px 10px;
    font-size: 0.7rem;
    min-width: auto;
  }
  
  /* Скрываем текст кнопки каталога на маленьких экранах */
  .catalog-text {
    display: none;
  }
  
  /* Показываем только иконку */
  .catalog-icon {
    display: inline;
  }
  
  /* Показываем иконку каталога в заголовке */
  .catalog-icon-mobile {
    display: flex;
    width: 28px;
    height: 28px;
  }

  .categories-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.5rem;
  }
  
  .category-card-compact {
    padding: 0.5rem;
    min-height: 70px;
    border-radius: 8px;
  }
  
  .card-content-compact {
    gap: 0.375rem;
  }
  
  .card-icon-compact {
    width: 35px;
    height: 35px;
  }
  
  .card-icon-compact img {
    width: 18px;
    height: 18px;
  }
  
  .card-title-compact {
    font-size: 0.7rem;
  }
  
  /* Уменьшаем интенсивность сложных анимаций на очень маленьких экранах */
  .dark-gradient-1,
  .dark-gradient-2 {
    animation-duration: 20s;
    opacity: 0.5;
  }
  
  .floating-logo {
    animation-duration: 15s;
    opacity: 0.7;
  }
  
  .dark-particles .particle {
    animation-duration: 25s;
    opacity: 0.3;
  }
  
  /* Адаптивность кнопки сворачивания для маленьких экранов */
  .categories-toggle-btn {
    padding: 5px 10px;
    font-size: 0.7rem;
    min-width: 80px;
    order: 2; /* Размещаем по центру */
  }
  
  /* Изменяем порядок элементов в заголовке для маленьких экранов */
  .categories-header-unified .d-flex {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  .categories-title-compact {
    order: 1; /* Заголовок сверху */
  }
  
  .catalog-link-compact {
    order: 3; /* Кнопка "Весь каталог" снизу */
    display: none; /* Скрываем кнопку на маленьких экранах */
  }
  
  .toggle-icon {
    width: 14px;
    height: 14px;
  }
  
  .toggle-arrow {
    width: 10px;
    height: 10px;
  }
}

/* Оптимизация производительности */
@media (prefers-reduced-motion: reduce) {
  .dark-gradient-1,
  .dark-gradient-2,
  .floating-logo,
  .dark-particles .particle,
  .card-glow-dark,
  .title-accent-line {
    animation: none !important;
  }
  
  .category-card-compact {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .category-card-compact:hover {
    transform: translateY(-2px);
  }
}

/* ===== КРАСИВЫЕ КНОПКИ КАТЕГОРИЙ (ТОЛЬКО ИКОНКИ) ===== */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.category-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 16px;
}

.category-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.category-btn:hover::before {
  opacity: 1;
}

.category-btn:active {
  transform: translateY(-2px) scale(1.02);
  transition: all 0.1s ease;
}

.category-btn:hover .category-btn-icon {
  transform: scale(1.1);
}

.category-btn:hover .category-btn-icon img,
.category-btn:hover 

.category-btn:hover .category-btn-glow {
  opacity: 1;
  animation: categoryGlowPulse 2s ease-in-out infinite;
}

.category-btn:active .category-btn-ripple {
  width: 100px;
  height: 100px;
  opacity: 0;
}

/* Все кнопки категорий в зеленом стиле */

.category-btn:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(16, 185, 129, 0.2));
  border-color: rgba(34, 197, 94, 0.5);
}

/* Специальная кнопка "Все" - можно оставить как есть или сделать еще более выделенной */

.category-btn-all:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(16, 185, 129, 0.25));
  border-color: rgba(34, 197, 94, 0.6);
}

@keyframes categoryGlowPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

/* Анимация появления кнопок */

.category-btn:nth-child(1) { animation-delay: 0.1s; }
.category-btn:nth-child(2) { animation-delay: 0.2s; }
.category-btn:nth-child(3) { animation-delay: 0.3s; }
.category-btn:nth-child(4) { animation-delay: 0.4s; }
.category-btn:nth-child(5) { animation-delay: 0.5s; }
.category-btn:nth-child(6) { animation-delay: 0.6s; }
.category-btn:nth-child(7) { animation-delay: 0.7s; }
.category-btn:nth-child(8) { animation-delay: 0.8s; }

@keyframes categoryBtnAppear {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
  .categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.875rem;
  }

  .category-btn-icon img {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 0.6rem;
  }

  .category-btn-icon img,
  .category-btn-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* ===== КНОПКА ИЗБРАННОГО ===== */
.favorite-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform-origin: center;
  will-change: transform, background-color, box-shadow;
  box-sizing: border-box;
}

.favorite-btn:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.favorite-btn:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

.favorite-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5);
}

.favorite-btn-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform-origin: center;
}

.favorite-icon-empty {
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.favorite-icon-filled {
  color: #ef4444;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  filter: drop-shadow(0 1px 3px rgba(239, 68, 68, 0.4));
}

.favorite-btn.is-favorite .favorite-icon-empty {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8) rotate(180deg);
}

.favorite-btn.is-favorite .favorite-icon-filled {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: heartBeat 0.8s cubic-bezier(0.4, 0, 0.2, 1), favoriteHeartGlow 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.8)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.favorite-btn-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.4), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}

.favorite-btn.is-favorite .favorite-btn-glow {
  opacity: 1;
  animation: favoriteGlow 3s ease-in-out infinite, favoriteGlowPulse 1.5s ease-in-out infinite;
}

/* Анимация пульсации для активного состояния */
.favorite-btn.is-favorite {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.4), rgba(220, 38, 38, 0.35));
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 
    0 0 0 3px rgba(239, 68, 68, 0.5),
    0 6px 25px rgba(239, 68, 68, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: favoriteButtonPulse 1.5s ease-in-out infinite;
  transform: scale(1.05);
}

.favorite-btn.is-favorite:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.5), rgba(220, 38, 38, 0.45));
  border-color: rgba(239, 68, 68, 1);
  box-shadow: 
    0 0 0 4px rgba(239, 68, 68, 0.6),
    0 8px 35px rgba(239, 68, 68, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* Эффект искр для избранного товара */
.favorite-btn.is-favorite::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, 
    transparent 0deg, 
    transparent 60deg,
    rgba(239, 68, 68, 0.4) 80deg, 
    transparent 100deg,
    transparent 180deg,
    transparent 240deg,
    rgba(255, 215, 0, 0.4) 260deg,
    transparent 280deg,
    transparent 360deg);
  animation: favoriteSparkle 3s linear infinite;
  z-index: 1;
  opacity: 0.8;
}

.favorite-btn.is-favorite::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, 
    rgba(239, 68, 68, 0.3) 0%, 
    transparent 60%);
  animation: favoriteSparkleGlow 2s ease-in-out infinite;
  z-index: 0;
}

/* Анимация загрузки */
.favorite-btn.loading {
  pointer-events: none;
  opacity: 0.7;
}

.favorite-btn.loading .favorite-btn-icon {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes heartBeat {
  0% { 
    transform: translate(-50%, -50%) scale(1);
  }
  15% { 
    transform: translate(-50%, -50%) scale(1.3);
  }
  30% { 
    transform: translate(-50%, -50%) scale(1.1);
  }
  45% { 
    transform: translate(-50%, -50%) scale(1.25);
  }
  60% { 
    transform: translate(-50%, -50%) scale(1.05);
  }
  75% { 
    transform: translate(-50%, -50%) scale(1.15);
  }
  100% { 
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes favoriteGlow {
  0%, 100% { 
    opacity: 0.6;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes pulse {
  0%, 100% { 
    opacity: 1;
  }
  50% { 
    opacity: 0.5;
  }
}

/* Новые анимации для улучшенного состояния избранного */
@keyframes favoriteButtonPulse {
  0%, 100% { 
    box-shadow: 
      0 0 0 3px rgba(239, 68, 68, 0.5),
      0 6px 25px rgba(239, 68, 68, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% { 
    box-shadow: 
      0 0 0 5px rgba(239, 68, 68, 0.7),
      0 8px 35px rgba(239, 68, 68, 0.8),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

@keyframes favoriteHeartGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 12px rgba(239, 68, 68, 1)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
  }
  50% { 
    filter: drop-shadow(0 0 20px rgba(239, 68, 68, 1.2)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  }
}

@keyframes favoriteGlowPulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
}

@keyframes favoriteSparkle {
  0% { 
    transform: rotate(0deg);
    opacity: 0.8;
  }
  50% { 
    opacity: 1;
  }
  100% { 
    transform: rotate(360deg);
    opacity: 0.8;
  }
}

@keyframes favoriteSparkleGlow {
  0%, 100% { 
    opacity: 0.3;
    transform: scale(1);
  }
  50% { 
    opacity: 0.5;
    transform: scale(1.1);
  }
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
  .favorite-btn {
    width: 36px;
    height: 36px;
    top: 10px;
    left: 10px;
    box-sizing: border-box;
  }
  
  .favorite-btn:hover {
    transform: scale(1.02);
  }
  
  .favorite-btn:active {
    transform: scale(0.96);
  }
}

@media (max-width: 480px) {
  .favorite-btn {
    width: 32px;
    height: 32px;
    top: 8px;
    left: 8px;
    box-sizing: border-box;
  }
  
  .favorite-btn-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* Стили для пустой страницы избранного */
.empty-favorites {
  text-align: center;
  padding: 3rem 1rem;
}

.empty-favorites-icon {
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 1.5rem;
}

.empty-favorites-title {
  color: #e8e9ec;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.empty-favorites-text {
  color: #9ca3af;
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Стили для уведомления гостей */
.guest-favorites-notice {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 197, 253, 0.05));
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

.guest-notice-icon {
  color: #3b82f6;
  margin-bottom: 1rem;
}

.guest-notice-text {
  color: #e8e9ec;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.guest-notice-text a {
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.guest-notice-text a:hover {
  color: #60a5fa !important;
}

/* ===== АВАТАР ДЛЯ ГОСТЕЙ ===== */
.guest-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 197, 253, 0.1));
  border-radius: 50%;
  color: #3b82f6;
  transition: all 0.3s ease;
}

.guest-avatar:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(147, 197, 253, 0.2));
  transform: scale(1.05);
}

.guest-avatar-mobile {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 197, 253, 0.1));
  border-radius: 50%;
  color: #3b82f6;
  transition: all 0.3s ease;
}

.guest-avatar-mobile:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(147, 197, 253, 0.2));
  transform: scale(1.05);
}

/* ===== УВЕДОМЛЕНИЯ ===== */

.notification-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.notification-close:hover {
  color: #e8e9ec;
  background: rgba(255,255,255,0.1);
}

.notification-success::before {
  content: '✓';
  color: #22c55e;
  margin-right: 0.5rem;
  font-weight: bold;
}

.notification-error::before {
  content: '✗';
  color: #ef4444;
  margin-right: 0.5rem;
  font-weight: bold;
}

.notification-info::before {
  content: 'ℹ';
  color: #3b82f6;
  margin-right: 0.5rem;
  font-weight: bold;
}

/* CSS v=2025.08.28.185 */

/* Информация о фильтрации по пользователю */
.user-filter-info {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.user-filter-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8b5cf6, #3b82f6);
}

.user-filter-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #e8e9ec;
}

.user-filter-header svg {
  color: #8b5cf6;
  flex-shrink: 0;
}

.user-filter-header span {
  font-size: 1.1rem;
  font-weight: 600;
  flex: 1;
}

.clear-user-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #9ca3af;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(156, 163, 175, 0.3);
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.clear-user-filter:hover {
  color: #e8e9ec;
  border-color: rgba(156, 163, 175, 0.5);
  background: rgba(156, 163, 175, 0.1);
  text-decoration: none;
}

.clear-user-filter svg {
  color: #9ca3af;
  transition: color 0.3s ease;
}

.clear-user-filter:hover svg {
  color: #e8e9ec;
}

/* Catalogs Admin Section Styles */
.catalogs-admin-section {
  padding: 2rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.catalogs-search-section {
  margin: 2rem 0;
}

.search-container {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  z-index: 2;
}

.catalogs-search-input {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  color: #1f2937;
  font-size: 1rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.catalogs-search-input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.catalogs-search-input::placeholder {
  color: #9ca3af;
}

.search-clear-btn {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: none;
}

.search-clear-btn:hover {
  background: rgba(107, 114, 128, 0.1);
  color: #374151;
}

.subsection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.subsection-header h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.subsection-header svg {
  color: #8b5cf6;
}

.add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
  color: white;
  text-decoration: none;
}

.add-btn svg {
  width: 16px;
  height: 16px;
}

/* Categories Grid */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.category-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.category-card:hover {
  transform: translateY(-5px);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

.category-sparks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.category-spark {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: sparkle 2s infinite;
}

.category-spark-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.category-spark-2 {
  top: 60%;
  right: 15%;
  animation-delay: 0.5s;
}

.category-spark-3 {
  bottom: 30%;
  left: 50%;
  animation-delay: 1s;
}

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

.category-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.category-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.category-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-icon-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.category-info {
  flex: 1;
}

.category-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.25rem;
}

.category-order {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.category-slug {
  font-size: 0.75rem;
  color: #9ca3af;
  font-family: monospace;
  background: rgba(139, 92, 246, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  display: inline-block;
}

.category-stats {
  margin-bottom: 1.5rem;
}

.category-stat {
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: #8b5cf6;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.category-actions {
  display: flex;
  gap: 0.75rem;
}

.action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: none;
  border-radius: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.action-btn.edit {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
}

.action-btn.edit:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.action-btn.manage {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
}

.action-btn.manage:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.action-btn.delete {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.action-btn.delete:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.action-btn svg {
  width: 14px;
  height: 14px;
}

/* Products Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}

.product-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

.product-sparks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.product-spark {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: sparkle 2s infinite;
}

.product-spark-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.product-spark-2 {
  top: 60%;
  right: 15%;
  animation-delay: 0.5s;
}

.product-spark-3 {
  bottom: 30%;
  left: 50%;
  animation-delay: 1s;
}

.product-header {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

.product-info {
  flex: 1;
}

.product-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.product-category {
  font-size: 0.875rem;
  color: #6b7280;
  background: rgba(139, 92, 246, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
  display: inline-block;
}

.product-details {
  margin-bottom: 1.5rem;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.price-old {
  font-size: 1rem;
  color: #9ca3af;
  text-decoration: line-through;
}

.price-new {
  font-size: 1.25rem;
  font-weight: 700;
  color: #10b981;
}

.price-current {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
}

.discount-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}

.product-features {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.feature-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
}

.feature-badge.featured {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.feature-badge.points {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
}

.product-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.product-stat {
  text-align: center;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.product-actions {
  display: flex;
  gap: 0.75rem;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
}

.empty-icon {
  color: #9ca3af;
  margin-bottom: 1.5rem;
}

.empty-state h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.75rem;
}

.empty-state p {
  color: #6b7280;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.empty-state .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .catalogs-admin-section {
    padding: 1rem;
  }
  
  .categories-grid,
  .products-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .subsection-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  
  .add-btn {
    width: 100%;
    justify-content: center;
  }
  
  .category-actions,
  .product-actions {
    flex-direction: column;
  }
  
  .product-header {
    flex-direction: column;
    text-align: center;
  }
  
  .product-image {
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }
  
  .product-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .catalogs-admin-section {
    padding: 0.75rem;
  }
  
  .category-card,
  .product-card {
    padding: 1rem;
  }
  
  .section-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .section-stats {
    justify-content: center;
  }
}

/* CSS v=2025.08.28.188 */

/* ===== СЕКЦИЯ ПРОМОКОДОВ ===== */

.promocodes-admin-section {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.2);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.promocodes-search-section {
  margin-bottom: 2rem;
}

.promocodes-search-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 0.75rem 1rem 0.75rem 3rem;
  color: #fff;
  font-size: 1rem;
  width: 100%;
  transition: all 0.3s ease;
}

.promocodes-search-input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
  background: rgba(255, 255, 255, 0.15);
}

.promocodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.promocode-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.promocode-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.3);
  border-color: rgba(139, 92, 246, 0.4);
}

.promocode-sparks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.promocode-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: linear-gradient(45deg, #8b5cf6, #ec4899);
  border-radius: 50%;
  animation: sparkle 3s infinite;
}

.promocode-spark-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.promocode-spark-2 {
  top: 60%;
  right: 15%;
  animation-delay: 1s;
}

.promocode-spark-3 {
  bottom: 30%;
  left: 20%;
  animation-delay: 2s;
}

.promocode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.promocode-code {
  font-size: 1.25rem;
  font-weight: 700;
  color: #8b5cf6;
  font-family: monospace;
  background: rgba(139, 92, 246, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.promocode-status {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.promocode-status.active {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.promocode-details {
  margin-bottom: 1.5rem;
}

.promocode-type {
  margin-bottom: 1rem;
}

.type-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
}

.type-badge.fixed {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
}

.promocode-usage {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.usage-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.usage-label {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 0.25rem;
}

.usage-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #8b5cf6;
}

.promocode-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.promocode-stat {
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: #8b5cf6;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.75rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.promocode-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ===== СЕКЦИЯ ОФФЛАЙН МАГАЗИНОВ ===== */

.offline-stores-admin-section {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.2);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.offline-stores-search-section {
  margin-bottom: 2rem;
}

.offline-stores-search-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  padding: 0.75rem 1rem 0.75rem 3rem;
  color: #fff;
  font-size: 1rem;
  width: 100%;
  transition: all 0.3s ease;
}

.offline-stores-search-input:focus {
  outline: none;
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  background: rgba(255, 255, 255, 0.15);
}

.offline-stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.offline-store-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.offline-store-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(34, 197, 94, 0.3);
  border-color: rgba(34, 197, 94, 0.4);
}

.offline-store-sparks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.offline-store-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: linear-gradient(45deg, #22c55e, #3b82f6);
  border-radius: 50%;
  animation: sparkle 3s infinite;
}

.offline-store-spark-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.offline-store-spark-2 {
  top: 60%;
  right: 15%;
  animation-delay: 1s;
}

.offline-store-spark-3 {
  bottom: 30%;
  left: 20%;
  animation-delay: 2s;
}

.offline-store-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.offline-store-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #22c55e;
}

.offline-store-status {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.offline-store-status.active {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.offline-store-details {
  margin-bottom: 1.5rem;
}

.offline-store-address,
.offline-store-phone,
.offline-store-hours {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.offline-store-address svg,
.offline-store-phone svg,
.offline-store-hours svg {
  color: #22c55e;
  flex-shrink: 0;
}

.offline-store-address span,
.offline-store-phone span,
.offline-store-hours span {
  color: #e5e7eb;
  font-size: 0.875rem;
  line-height: 1.4;
}

.offline-store-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.offline-store-stat {
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.offline-store-stat .stat-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: #22c55e;
  margin-bottom: 0.25rem;
}

.offline-store-stat .stat-label {
  font-size: 0.75rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.offline-store-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ===== АДАПТИВНОСТЬ ДЛЯ НОВЫХ СЕКЦИЙ ===== */

@media (max-width: 768px) {
  .promocodes-grid,
  .offline-stores-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .promocode-card,
  .offline-store-card {
    padding: 1rem;
  }
  
  .promocode-actions,
  .offline-store-actions {
    flex-direction: column;
  }
  
  .action-btn {
    width: 100%;
    justify-content: center;
  }
  
  .promocode-stats,
  .offline-store-stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .promocode-usage {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .usage-info {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .promocodes-admin-section,
  .offline-stores-admin-section {
    padding: 1rem;
  }
  
  .section-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .section-stats {
    justify-content: center;
  }
  
  .promocode-header,
  .offline-store-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
  
  .promocode-code,
  .offline-store-name {
    font-size: 1rem;
  }
}

/* ===== ЗАПРОПОНОВАНІ ПРИНТИ ===== */

/* Секция запропонованих принтов */
.print-proposals-admin-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* Заголовок секции */
.print-proposals-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

/* Поиск */
.print-proposals-search-section {
  margin-bottom: 2rem;
}

.search-container {
  position: relative;
  max-width: 400px;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  z-index: 2;
}

.print-proposals-search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 3rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #e8e9ec;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.print-proposals-search-input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.search-clear-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.search-clear-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Список принтов */
.print-proposals-list-section {
  margin-bottom: 2rem;
}

.subsection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.subsection-header h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #e8e9ec;
  margin: 0;
}

.print-proposals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}

.print-proposal-card {
  position: relative;
  background: linear-gradient(135deg, rgba(15, 17, 22, 0.95), rgba(5, 7, 12, 0.95));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  overflow: hidden;
}

.print-proposal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.4);
}

/* Искры */
.print-proposal-sparks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.print-proposal-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: sparkle 3s infinite;
}

.print-proposal-spark-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.print-proposal-spark-2 {
  top: 60%;
  right: 15%;
  animation-delay: 1s;
}

.print-proposal-spark-3 {
  bottom: 30%;
  left: 20%;
  animation-delay: 2s;
}

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

/* Заголовок карточки */
.print-proposal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.print-proposal-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(139, 92, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: 600;
  color: #e8e9ec;
  margin-bottom: 0.25rem;
}

.user-full-name {
  font-size: 0.85rem;
  color: #9ca3af;
}

.print-proposal-status {
  flex-shrink: 0;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.pending {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-badge.approved {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge.rejected {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Изображение принта */
.print-proposal-image {
  margin-bottom: 1rem;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.print-proposal-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* Ссылка на изображение */
.link-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  height: 200px;
}

.link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 12px;
  color: #8b5cf6;
  flex-shrink: 0;
}

.link-info {
  flex: 1;
}

.link-label {
  font-size: 0.8rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.link-url {
  color: #8b5cf6;
  text-decoration: none;
  word-break: break-all;
  font-size: 0.9rem;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.link-url:hover {
  color: #a78bfa;
  text-decoration: underline;
}

/* Отсутствующий контент */
.no-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #9ca3af;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.no-content svg {
  color: #6b7280;
}

/* Описание */
.print-proposal-description {
  margin-bottom: 1rem;
}

.description-label {
  font-size: 0.8rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.description-text {
  color: #e8e9ec;
  line-height: 1.5;
  font-size: 0.9rem;
}

/* Контакты */
.print-proposal-contact {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.contact-item svg {
  color: #8b5cf6;
  flex-shrink: 0;
}

.contact-item a {
  color: #8b5cf6;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-item a:hover {
  color: #a78bfa;
}

/* Статистика */
.print-proposal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.proposal-stat {
  text-align: center;
}

.proposal-stat .stat-number {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e8e9ec;
  margin-bottom: 0.25rem;
}

.proposal-stat .stat-label {
  font-size: 0.7rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Действия */
.print-proposal-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.action-btn.approve {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2));
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.action-btn.approve:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.3));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

.action-btn.reject {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.action-btn.reject:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.3));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.action-btn.award-points {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.action-btn.award-points:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.action-btn.award-promocode {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.action-btn.award-promocode:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.3));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

/* Пустое состояние */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: #9ca3af;
}

.empty-icon {
  margin-bottom: 1rem;
  color: #6b7280;
}

.empty-state h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #e8e9ec;
  margin-bottom: 0.5rem;
}

.empty-state p {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* Адаптивность для запропонованных принтов */
@media (max-width: 768px) {
  .print-proposals-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .print-proposal-card {
    padding: 1rem;
  }
  
  .print-proposal-actions {
    flex-direction: column;
  }
  
  .action-btn {
    width: 100%;
    justify-content: center;
  }
  
  .print-proposal-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .print-proposal-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
  
  .print-proposal-user {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .print-proposals-admin-section {
    padding: 1rem;
  }
  
  .print-proposal-stats {
    grid-template-columns: 1fr;
  }
  
  .print-proposal-contact {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ===== КРАСИВАЯ КНОПКА "ЗАПРОПОНУВАТИ ПРИНТ" ===== */

.btn-gradient-suggest {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(99, 102, 241, 0.8));
  border: 1px solid rgba(139, 92, 246, 0.5);
  color: #ffffff !important;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
  position: relative;
  overflow: hidden;
}

.btn-gradient-suggest::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.5s ease;
}

.btn-gradient-suggest:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 1), rgba(99, 102, 241, 0.9));
  border-color: rgba(139, 92, 246, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
  color: #ffffff !important;
  text-decoration: none;
}

.btn-gradient-suggest:hover::before {
  left: 100%;
}

.btn-gradient-suggest:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}

.btn-gradient-suggest svg {
  transition: transform 0.3s ease;
}

.btn-gradient-suggest:hover svg {
  transform: scale(1.1);
}

/* Анимация для иконки */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-2px);
  }
}

.btn-gradient-suggest:hover svg {
  animation: bounce 0.6s ease;
}

/* Адаптивность */
@media (max-width: 768px) {
  .btn-gradient-suggest {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
  }
  
  .btn-gradient-suggest svg {
    width: 14px;
    height: 14px;
  }
}

/* ===== COOPERATION PAGE STYLES ===== */

.cooperation-hero {
  background: linear-gradient(135deg, rgba(6, 6, 12, 0.98), rgba(1, 1, 3, 0.99));
  border-radius: 32px;
  padding: 6rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cooperation-hero .hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.cooperation-hero .hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
}

.cooperation-hero .hero-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
}

.cooperation-hero .hero-sparkles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.cooperation-hero .hero-sparkles .sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: sparkleFloat 3s ease-in-out infinite;
}

.cooperation-hero .hero-sparkles .sparkle-1 { top: 15%; left: 8%; animation-delay: 0s; }
.cooperation-hero .hero-sparkles .sparkle-2 { top: 25%; right: 12%; animation-delay: 0.3s; }
.cooperation-hero .hero-sparkles .sparkle-3 { bottom: 30%; left: 15%; animation-delay: 0.6s; }
.cooperation-hero .hero-sparkles .sparkle-4 { bottom: 40%; right: 20%; animation-delay: 0.9s; }
.cooperation-hero .hero-sparkles .sparkle-5 { top: 45%; left: 45%; animation-delay: 1.2s; }
.cooperation-hero .hero-sparkles .sparkle-6 { top: 60%; right: 30%; animation-delay: 1.5s; }
.cooperation-hero .hero-sparkles .sparkle-7 { bottom: 20%; left: 60%; animation-delay: 1.8s; }
.cooperation-hero .hero-sparkles .sparkle-8 { top: 35%; right: 60%; animation-delay: 2.1s; }

@keyframes sparkleFloat {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0); }
  50% { opacity: 1; transform: translateY(-20px) scale(1); }
}


.cooperation-hero .hero-content {
  position: relative;
  z-index: 1;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6rem) 1.5rem clamp(3rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 4vw, 2.75rem);
}

.cooperation-hero .hero-logo {
  position: absolute;
  top: clamp(-3rem, -8vw, -2rem);
  left: 50%;
  transform: translate(-50%, 0);
  width: clamp(180px, 28vw, 260px);
  height: clamp(180px, 28vw, 260px);
  margin: 0;
  opacity: 0.18;
  pointer-events: none;
  filter: none;
  border: none;
  box-shadow: none;
}

.cooperation-hero .logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  border: none;
  box-shadow: none;
  transition: none;
}

.cooperation-hero .logo-glow {
  display: none;
}

.cooperation-hero .hero-text,
.cooperation-hero .hero-features,
.cooperation-hero .hero-cta {
  position: relative;
  z-index: 2;
  width: 100%;
}

@keyframes logoGlow {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

.cooperation-hero .hero-text {
  margin-bottom: 0;
}

.cooperation-hero .hero-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 2rem;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.cooperation-hero .title-line {
  display: block;
  animation: titleSlideIn 1s ease-out;
}

.cooperation-hero .title-line:first-child {
  animation-delay: 0.2s;
  animation-fill-mode: both;
}

.cooperation-hero .title-line:last-child {
  animation-delay: 0.4s;
  animation-fill-mode: both;
}

@keyframes titleSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.cooperation-hero .gradient-text {
  background: linear-gradient(135deg, #8b5cf6, #6366f1, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cooperation-hero .hero-subtitle {
  font-size: 1.4rem;
  color: #d1d5db;
  margin-bottom: 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  animation: subtitleFadeIn 1s ease-out 0.6s both;
}

.cooperation-hero .hero-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.25rem, 3vw, 2.5rem);
}

@keyframes subtitleFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.cooperation-hero .hero-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: min(100%, 1024px);
  margin: 0 auto;
}

.cooperation-hero .hero-features .feature-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  animation: none;
  opacity: 1;
  transform: none;
}

.feature-card:nth-child(1) { animation-delay: 0.8s; animation-fill-mode: both; }
.feature-card:nth-child(2) { animation-delay: 1s; animation-fill-mode: both; }
.feature-card:nth-child(3) { animation-delay: 1.2s; animation-fill-mode: both; }

@keyframes cardSlideIn {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
  transition: left 0.6s ease;
}

.feature-card:hover::before {
  left: 100%;
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 15px 35px rgba(139, 92, 246, 0.15);
}

.feature-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
  margin: 0 auto 1.5rem;
  transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.feature-content {
  text-align: center;
}

.feature-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.feature-desc {
  font-size: 0.95rem;
  color: #9ca3af;
  line-height: 1.4;
}

.hero-cta {
  animation: ctaFadeIn 1s ease-out 1.4s both;
}

@media (max-width: 1200px) {
  .cooperation-hero .hero-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .cooperation-hero .hero-features {
    grid-template-columns: 1fr;
  }
}

@keyframes ctaFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #ffffff;
  text-decoration: none;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
  position: relative;
  overflow: hidden;
}

.cta-button::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.5s ease;
}

.cta-button:hover::before {
  left: 100%;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(139, 92, 246, 0.4);
  color: #ffffff;
  text-decoration: none;
}

.cta-button svg {
  transition: transform 0.3s ease;
}

.cta-button:hover svg {
  transform: translateY(2px);
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
}

.section-subtitle {
  font-size: 1.1rem;
  color: #9ca3af;
  max-width: 600px;
  margin: 0 auto;
}

.partnership-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
}

.partnership-card:hover {
  transform: translateY(-8px);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 20px 40px rgba(139, 92, 246, 0.1);
}

.card-sparkles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.card-sparkles .sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: sparkleFloat 4s ease-in-out infinite;
}

.card-sparkles .sparkle:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
.card-sparkles .sparkle:nth-child(2) { top: 25%; right: 15%; animation-delay: 1s; }
.card-sparkles .sparkle:nth-child(3) { bottom: 20%; left: 20%; animation-delay: 2s; }

.partnership-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: #8b5cf6;
}

.partnership-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
}

.partnership-description {
  color: #9ca3af;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.partnership-benefits {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
  text-align: left;
}

.partnership-benefits li {
  color: #d1d5db;
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
  position: relative;
}

.partnership-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #8b5cf6;
  font-weight: bold;
}

.partnership-commission {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 2rem;
}

.commission-label {
  color: #9ca3af;
  font-size: 0.9rem;
}

.commission-value {
  color: #8b5cf6;
  font-weight: 700;
  font-size: 1.1rem;
}

.partnership-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #ffffff;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  width: 100%;
  justify-content: center;
}

.partnership-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
  color: #ffffff;
  text-decoration: none;
}

.designers-section, .models-section, .bloggers-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 4rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.designers-sparkles, .models-sparkles, .bloggers-sparkles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.designers-sparkles .sparkle, .models-sparkles .sparkle, .bloggers-sparkles .sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: sparkleFloat 3s ease-in-out infinite;
}

.designers-sparkles .sparkle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.designers-sparkles .sparkle:nth-child(2) { top: 30%; right: 15%; animation-delay: 0.5s; }
.designers-sparkles .sparkle:nth-child(3) { bottom: 25%; left: 20%; animation-delay: 1s; }
.designers-sparkles .sparkle:nth-child(4) { bottom: 35%; right: 25%; animation-delay: 1.5s; }

.models-sparkles .sparkle:nth-child(1) { top: 15%; left: 15%; animation-delay: 0s; }
.models-sparkles .sparkle:nth-child(2) { top: 25%; right: 20%; animation-delay: 1s; }
.models-sparkles .sparkle:nth-child(3) { bottom: 30%; left: 25%; animation-delay: 2s; }

.bloggers-sparkles .sparkle:nth-child(1) { top: 18%; left: 12%; animation-delay: 0s; }
.bloggers-sparkles .sparkle:nth-child(2) { top: 28%; right: 18%; animation-delay: 0.7s; }
.bloggers-sparkles .sparkle:nth-child(3) { bottom: 28%; left: 22%; animation-delay: 1.4s; }
.bloggers-sparkles .sparkle:nth-child(4) { bottom: 38%; right: 28%; animation-delay: 2.1s; }

.designers-icon, .models-icon, .bloggers-icon {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  color: #8b5cf6;
}

.designers-title, .models-title, .bloggers-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #ffffff;
}

.designers-description, .models-description, .bloggers-description {
  font-size: 1.1rem;
  color: #9ca3af;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.designers-benefits, .models-benefits, .bloggers-benefits {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #d1d5db;
  font-weight: 500;
}

.benefit-item svg {
  color: #8b5cf6;
  flex-shrink: 0;
}

.designers-btn, .models-btn, .bloggers-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #ffffff;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 16px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.designers-btn:hover, .models-btn:hover, .bloggers-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.4);
  color: #ffffff;
  text-decoration: none;
}

.contact-section {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.05));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 24px;
  padding: 4rem 2rem;
  text-align: center;
}

.contact-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
}

.contact-description {
  font-size: 1.1rem;
  color: #9ca3af;
  margin-bottom: 2.5rem;
}

.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border-radius: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact-btn.primary {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #ffffff;
}

.contact-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-btn:hover {
  transform: translateY(-3px);
  color: #ffffff;
  text-decoration: none;
}

.contact-btn.primary:hover {
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.4);
}

.contact-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .cooperation-hero {
    padding: clamp(3rem, 8vw, 4rem) 1.5rem;
    min-height: 60vh;
  }
  
  .cooperation-hero .hero-title {
    font-size: 2.6rem;
  }
  
  .cooperation-hero .hero-features {
    grid-template-columns: 1fr;
    width: min(100%, 520px);
    gap: 1.25rem;
  }
  
  .cooperation-hero .hero-features .feature-card {
    padding: 1.5rem;
  }
  
  .cooperation-hero .hero-subtitle {
    font-size: 1.1rem;
  }

  .cooperation-hero .hero-logo {
    top: clamp(-2rem, -12vw, -1.25rem);
    width: clamp(150px, 42vw, 210px);
    height: clamp(150px, 42vw, 210px);
  }

  .cooperation-hero .hero-content {
    padding: clamp(3rem, 10vw, 4.5rem) 1rem clamp(2.5rem, 8vw, 3.5rem);
  }

  .about-hero {
    padding: clamp(3rem, 8vw, 4.5rem) 1.5rem;
  }

  .about-hero .hero-content {
    padding: clamp(3rem, 10vw, 4.5rem) 1rem clamp(2.5rem, 8vw, 3.5rem);
  }

  .about-hero .hero-logo {
    top: clamp(-2rem, -12vw, -1rem);
    width: clamp(150px, 44vw, 210px);
    height: clamp(150px, 44vw, 210px);
  }

  .about-hero .hero-title {
    font-size: 2.5rem;
  }

  .about-hero .hero-subtitle {
    font-size: 1.1rem;
  }

  .about-hero .hero-features {
    grid-template-columns: 1fr;
    width: min(100%, 520px);
    gap: 1.25rem;
  }

  .about-hero .feature-card {
    padding: 1.5rem;
  }

  .contacts-hero {
    padding: clamp(3rem, 9vw, 4.5rem) 1.5rem;
  }

  .contacts-hero .hero-content {
    padding: clamp(2.5rem, 8vw, 3.5rem) 1rem;
  }

  .contacts-hero::before {
    top: clamp(-1.5rem, -10vw, -0.5rem);
    width: clamp(140px, 46vw, 200px);
    height: clamp(140px, 46vw, 200px);
  }

  .contacts-hero .hero-title {
    font-size: 2.4rem;
  }

  .contacts-hero .hero-subtitle {
    font-size: 1.05rem;
  }

  .contacts-hero .hero-icon {
    width: 68px;
    height: 68px;
    margin-bottom: 1rem;
  }

  .section-title {
    font-size: 2rem;
  }
  
  .designers-title, .models-title, .bloggers-title, .contact-title {
    font-size: 2rem;
  }
  
  .designers-benefits, .models-benefits, .bloggers-benefits {
    flex-direction: column;
    gap: 1rem;
  }
  
  .contact-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .contact-btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

/* About page styles */
.about-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  border-radius: 2rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.05));
  backdrop-filter: blur(20px);
}

.about-hero .hero-background {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.about-hero .hero-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(99, 102, 241, 0.2) 0%, transparent 50%);
}

.about-hero .hero-pattern {
  position: absolute;
  inset: 0;
  background: url('../img/noise_optimized.png') repeat;
  opacity: 0.1;
}

.about-hero .hero-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-hero .hero-sparkles .sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: linear-gradient(45deg, #8b5cf6, #6366f1);
  border-radius: 50%;
  animation: sparkleFloat 3s ease-in-out infinite;
}

.about-hero .sparkle-1 { top: 20%; left: 10%; animation-delay: 0s; }
.about-hero .sparkle-2 { top: 30%; right: 15%; animation-delay: 0.5s; }
.about-hero .sparkle-3 { top: 60%; left: 20%; animation-delay: 1s; }
.about-hero .sparkle-4 { top: 70%; right: 25%; animation-delay: 1.5s; }
.about-hero .sparkle-5 { top: 40%; left: 5%; animation-delay: 2s; }
.about-hero .sparkle-6 { top: 80%; right: 10%; animation-delay: 2.5s; }
.about-hero .sparkle-7 { top: 10%; left: 50%; animation-delay: 3s; }
.about-hero .sparkle-8 { top: 90%; right: 50%; animation-delay: 3.5s; }

@keyframes sparkleFloat {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 0.7; }
  50% { transform: translateY(-20px) scale(1.2); opacity: 1; }
}

.about-hero .hero-content {
  position: relative;
  text-align: center;
  z-index: 1;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6rem) 1.5rem clamp(3rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.75rem);
}

.about-hero .hero-logo {
  position: absolute;
  top: clamp(-2.5rem, -7vw, -1.5rem);
  left: 50%;
  transform: translate(-50%, 0);
  width: clamp(170px, 26vw, 240px);
  height: clamp(170px, 26vw, 240px);
  opacity: 0.16;
  margin: 0;
  pointer-events: none;
  filter: drop-shadow(0 28px 110px rgba(139, 92, 246, 0.45));
}

.about-hero .logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  animation: none;
}

.about-hero .logo-glow {
  display: none;
}

.about-hero .hero-text,
.about-hero .hero-features {
  position: relative;
  z-index: 2;
  width: 100%;
}

@keyframes logoGlow {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.1); }
}

.about-hero .hero-text {
  margin-bottom: 0;
}

.about-hero .hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.about-hero .title-line {
  display: block;
  animation: titleSlideIn 1s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
}

.about-hero .title-line:first-child {
  animation-delay: 0.2s;
}

.about-hero .title-line:last-child {
  animation-delay: 0.4s;
}

.about-hero .gradient-text {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes titleSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.about-hero .hero-subtitle {
  font-size: 1.25rem;
  color: rgba(232, 233, 236, 0.8);
  animation: subtitleFadeIn 1s ease-out 0.6s forwards;
  opacity: 0;
}

@keyframes subtitleFadeIn {
  to { opacity: 1; }
}


.about-hero .hero-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  width: min(100%, 960px);
  margin: 3rem auto 0;
}

.about-hero .hero-features .feature-card {
  padding: 2rem;
}

.feature-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: cardSlideIn 1s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
}

.feature-card:nth-child(1) { animation-delay: 0.8s; }
.feature-card:nth-child(2) { animation-delay: 1s; }
.feature-card:nth-child(3) { animation-delay: 1.2s; }

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.feature-card:hover::before {
  left: 100%;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
}

@keyframes cardSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--tc-text);
}

.feature-desc {
  color: rgba(232, 233, 236, 0.7);
  font-size: 0.9rem;
}

/* Story Section */
.story-section, .mission-section, .support-section, .points-section, .future-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2rem;
  padding: 4rem 3rem;
  position: relative;
  overflow: hidden;
  margin-bottom: 3rem;
}

.story-content, .mission-content, .support-content, .points-content, .future-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.story-sparkles, .mission-sparkles, .support-sparkles, .points-sparkles, .future-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.story-sparkles .sparkle, .mission-sparkles .sparkle, .support-sparkles .sparkle, 
.points-sparkles .sparkle, .future-sparkles .sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: linear-gradient(45deg, #8b5cf6, #6366f1);
  border-radius: 50%;
  animation: sparkleFloat 4s ease-in-out infinite;
}

.story-sparkles .sparkle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.story-sparkles .sparkle:nth-child(2) { top: 30%; right: 15%; animation-delay: 1s; }
.story-sparkles .sparkle:nth-child(3) { top: 70%; left: 20%; animation-delay: 2s; }
.story-sparkles .sparkle:nth-child(4) { top: 80%; right: 25%; animation-delay: 3s; }

.story-icon, .mission-icon, .support-icon, .points-icon, .future-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 2rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
}

.story-title, .mission-title, .support-title, .points-title, .future-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.story-description, .mission-description, .support-description, .points-description, .future-description {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(232, 233, 236, 0.8);
  margin-bottom: 2rem;
}

.story-highlights, .mission-values, .support-benefits, .points-features, .future-goals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.highlight-item, .value-item, .benefit-item, .feature-item, .goal-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  transition: all 0.3s ease;
}

.highlight-item:hover, .value-item:hover, .benefit-item:hover, .feature-item:hover, .goal-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
}

.highlight-item svg, .benefit-item svg, .goal-item svg {
  color: #10b981;
  flex-shrink: 0;
}

.value-item .value-icon, .feature-item .feature-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
  flex-shrink: 0;
}

.value-content, .feature-content {
  flex: 1;
}

.value-title, .feature-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--tc-text);
}

.value-desc, .feature-desc {
  color: rgba(232, 233, 236, 0.7);
  font-size: 0.9rem;
}

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  padding: 4rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}

.cta-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-description {
  font-size: 1.1rem;
  color: rgba(232, 233, 236, 0.8);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 1rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cta-button.primary {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: white;
  border: 1px solid rgba(139, 92, 246, 0.5);
}

.cta-button.secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--tc-text);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-button::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.5s ease;
}

.cta-button:hover::before {
  left: 100%;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .about-hero {
    min-height: 60vh;
    padding: 2rem 1rem;
  }
  
  .about-hero .hero-title {
    font-size: 2.5rem;
  }
  
  .about-hero .hero-features {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .story-section, .mission-section, .support-section, .points-section, .future-section, .cta-section {
    padding: 2rem 1.5rem;
  }
  
  .story-title, .mission-title, .support-title, .points-title, .future-title, .cta-title {
    font-size: 2rem;
  }
  
  .story-highlights, .mission-values, .support-benefits, .points-features, .future-goals {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-button {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

/* Contacts page styles */
.contacts-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  border-radius: 2rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.05));
  backdrop-filter: blur(20px);
}

.contacts-hero::before {
  content: '';
  position: absolute;
  top: clamp(-2.5rem, -7vw, -1.5rem);
  left: 50%;
  transform: translate(-50%, 0);
  width: clamp(170px, 28vw, 240px);
  height: clamp(170px, 28vw, 240px);
  background: url('../img/logo.svg') center/contain no-repeat;
  opacity: 0.14;
  pointer-events: none;
  filter: drop-shadow(0 28px 110px rgba(139, 92, 246, 0.4));
  z-index: 0;
}

.contacts-hero .hero-background {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.contacts-hero .hero-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(99, 102, 241, 0.2) 0%, transparent 50%);
}

.contacts-hero .hero-pattern {
  position: absolute;
  inset: 0;
  background: url('../img/noise_optimized.png') repeat;
  opacity: 0.1;
}

.contacts-hero .hero-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.contacts-hero .hero-sparkles .sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: linear-gradient(45deg, #8b5cf6, #6366f1);
  border-radius: 50%;
  animation: sparkleFloat 3s ease-in-out infinite;
}

.contacts-hero .sparkle-1 { top: 20%; left: 10%; animation-delay: 0s; }
.contacts-hero .sparkle-2 { top: 30%; right: 15%; animation-delay: 0.5s; }
.contacts-hero .sparkle-3 { top: 60%; left: 20%; animation-delay: 1s; }
.contacts-hero .sparkle-4 { top: 70%; right: 25%; animation-delay: 1.5s; }
.contacts-hero .sparkle-5 { top: 40%; left: 5%; animation-delay: 2s; }
.contacts-hero .sparkle-6 { top: 80%; right: 10%; animation-delay: 2.5s; }

.contacts-hero .hero-content {
  position: relative;
  text-align: center;
  z-index: 1;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 5rem) 1.5rem clamp(2.5rem, 6vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.contacts-hero .hero-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 2rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
  position: relative;
  z-index: 2;
}

.contacts-hero .hero-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 2;
}

.contacts-hero .hero-subtitle {
  font-size: 1.25rem;
  color: rgba(232, 233, 236, 0.8);
  position: relative;
  z-index: 2;
}

/* Contact Methods */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.contact-method {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.contact-method::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.contact-method:hover::before {
  left: 100%;
}

.contact-method:hover {
  transform: translateY(-5px);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
}

.method-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
  flex-shrink: 0;
}

.method-content {
  flex: 1;
}

.method-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--tc-text);
}

.phone-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.show-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 0.5rem;
  color: #8b5cf6;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.show-phone-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-1px);
}

.phone-number {
  color: #10b981;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.phone-number:hover {
  color: #059669;
  text-decoration: underline;
}

.contact-link {
  color: #8b5cf6;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.contact-link:hover {
  color: #7c3aed;
  text-decoration: underline;
}

/* Store Locations */
.store-locations {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2rem;
  padding: 3rem;
  margin-bottom: 3rem;
}

.locations-header {
  text-align: center;
  margin-bottom: 3rem;
}

.locations-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.locations-subtitle {
  font-size: 1.1rem;
  color: rgba(232, 233, 236, 0.8);
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.location-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  padding: 2rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.location-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.location-card:hover::before {
  left: 100%;
}

.location-card:hover {
  transform: translateY(-5px);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
}

.location-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
  margin-bottom: 1.5rem;
}

.location-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--tc-text);
}

.location-address {
  font-size: 1rem;
  color: rgba(232, 233, 236, 0.8);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.location-address.blurred {
  filter: blur(3px);
  user-select: none;
  pointer-events: none;
  opacity: 0.6;
}

.location-hours {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hours-label {
  font-size: 0.9rem;
  color: rgba(232, 233, 236, 0.6);
  font-weight: 500;
}

.hours-time {
  font-size: 1rem;
  color: #10b981;
  font-weight: 600;
}

/* Contact Form */
.contact-form-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2rem;
  padding: 3rem;
}

.form-header {
  text-align: center;
  margin-bottom: 3rem;
}

.form-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.form-subtitle {
  font-size: 1.1rem;
  color: rgba(232, 233, 236, 0.8);
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tc-text);
  margin-bottom: 0.5rem;
}

.form-input, .form-textarea {
  width: 100%;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  color: var(--tc-text);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border: 1px solid rgba(139, 92, 246, 0.5);
  border-radius: 1rem;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.submit-btn::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.5s ease;
}

.submit-btn:hover::before {
  left: 100%;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .contacts-hero {
    min-height: 50vh;
    padding: 2rem 1rem;
  }
  
  .contacts-hero .hero-title {
    font-size: 2.5rem;
  }
  
  .contact-methods {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .contact-method {
    padding: 1.5rem;
  }
  
  .store-locations, .contact-form-section {
    padding: 2rem 1.5rem;
  }
  
  .locations-title, .form-title {
    font-size: 2rem;
  }
  
  .locations-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .submit-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Hide cart and profile on mobile in header - теперь скрыты Bootstrap классами */
/* @media (max-width: 991.98px) {
  .navbar .cart-container,
  .navbar .user-profile-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
} */

/* Force hide cart and profile on mobile - highest priority - теперь скрыты Bootstrap классами */
/* @media (max-width: 991.98px) {
  .navbar .d-flex .cart-container,
  .navbar .d-flex .user-profile-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
} */

/* Admin Panel Stats Categories */
.stats-category {
  margin-bottom: 3rem;
}

.stats-category-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--tc-text);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(139, 92, 246, 0.2);
}

.stats-category-title svg {
  color: #8b5cf6;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.stat-card:hover::before {
  left: 100%;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

.stat-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
  flex-shrink: 0;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tc-text);
  margin-bottom: 0.25rem;
  line-height: 1.2;
}

.stat-label {
  font-size: 0.9rem;
  color: rgba(232, 233, 236, 0.7);
  font-weight: 500;
}

/* Stats Filters */
.stats-filters {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
}

.stats-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.stats-filters-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tc-text);
  margin: 0;
}

.stats-filters-title svg {
  color: #8b5cf6;
}

.stats-period-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.period-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  color: rgba(232, 233, 236, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.period-btn:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
  transform: translateY(-1px);
}

.period-btn.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
  border-color: #8b5cf6;
  color: #8b5cf6;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.period-btn svg {
  width: 16px;
  height: 16px;
}

/* Not Working Badge */
.not-working-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 0.5rem;
}

.stat-card.not-working {
  opacity: 0.7;
  border-color: rgba(239, 68, 68, 0.2);
}

.stat-card.not-working:hover {
  border-color: rgba(239, 68, 68, 0.3);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.1);
}

.stat-card.not-working .stat-icon {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
  color: #ef4444;
}

/* Responsive stats */
@media (max-width: 768px) {
  .stats-category-title {
    font-size: 1.25rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .stat-card {
    padding: 1.25rem;
  }
  
  .stat-value {
    font-size: 1.5rem;
  }
  
  .stats-filters-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .stats-period-buttons {
    width: 100%;
    justify-content: center;
  }
  
  .period-btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
}

/* Category Form Styles */
.category-form-section {
  max-width: 800px;
  margin: 0 auto;
}

.category-form-container {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.category-form-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
  transition: left 0.8s ease;
}

.category-form-container:hover::before {
  left: 100%;
}

.category-form-header {
  text-align: center;
  margin-bottom: 2rem;
}

.category-form-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tc-text);
  margin-bottom: 0.5rem;
}

.category-form-title svg {
  color: #8b5cf6;
}

.category-form-description {
  color: rgba(232, 233, 236, 0.7);
  font-size: 1rem;
  margin: 0;
}

.form-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tc-text);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.form-section-title svg {
  color: #8b5cf6;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tc-text);
  margin-bottom: 0.5rem;
}

.form-label svg {
  color: #8b5cf6;
  width: 16px;
  height: 16px;
}

.form-group input,
.form-group select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  color: var(--tc-text);
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
  background: rgba(255, 255, 255, 0.08);
}

/* File inputs в form-group используют стили из .file-upload-wrapper */

/* Стили для textarea в форме категории */
.form-group textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  color: var(--tc-text);
  font-size: 0.95rem;
  transition: all 0.3s ease;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}

.form-group textarea:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
  background: rgba(255, 255, 255, 0.08);
}

/* Стили для чекбоксов в форме категории */
.form-group.checkbox-group {
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  transition: all 0.3s ease;
}

.form-group.checkbox-group:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(139, 92, 246, 0.3);
}

.form-group.checkbox-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #8b5cf6;
  margin-right: 0.5rem;
}

.form-group.checkbox-group .form-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
  font-weight: 600;
}

.form-group.checkbox-group .form-label svg {
  width: 16px;
  height: 16px;
  color: #8b5cf6;
}

.form-hint {
  font-size: 0.85rem;
  color: rgba(232, 233, 236, 0.6);
  margin-top: 0.5rem;
}

.form-errors {
  margin-top: 0.5rem;
}

.form-error {
  display: block;
  font-size: 0.85rem;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
}

.file-upload-wrapper {
  position: relative;
  cursor: pointer;
}

.file-upload-wrapper input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.file-upload-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  padding: 2rem 1rem;
  text-align: center;
  color: rgba(232, 233, 236, 0.7);
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 120px;
  position: relative;
  z-index: 1;
}

.file-upload-preview:hover {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.05);
  color: #8b5cf6;
}

.file-upload-preview svg {
  width: 24px;
  height: 24px;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-create-category {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 2rem;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-create-category:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

.btn-cancel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 1rem 2rem;
  color: rgba(232, 233, 236, 0.8);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--tc-text);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
  .category-form-container {
    padding: 1.5rem;
    margin: 1rem;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .btn-create-category,
  .btn-cancel {
    width: 100%;
    justify-content: center;
  }
}

/* Admin Panel Category Buttons */
.btn-create-category-new {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border: none;
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-create-category-new:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: white;
  text-decoration: none;
}

.btn-create-category-new svg {
  width: 20px;
  height: 20px;
}

.btn-create-category-empty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 2rem;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
  margin-top: 1rem;
}

.btn-create-category-empty:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: white;
  text-decoration: none;
}

.btn-create-category-empty svg {
  width: 20px;
  height: 20px;
}

/* Responsive category buttons */
@media (max-width: 768px) {
  .btn-create-category-new,
  .btn-create-category-empty {
    width: 100%;
    justify-content: center;
  }
}

/* Print Hero Styles */
.print-hero{min-height:120px; background:linear-gradient(135deg, rgba(17,17,24,.8), rgba(10,10,16,.9)); border:1px solid rgba(124,58,237,.2);}
.hero-logo{flex-shrink:0; width:60px; height:60px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(124,58,237,.1), rgba(124,58,237,.2)); border-radius:16px; border:1px solid rgba(124,58,237,.3);}
.logo-img{width:40px; height:40px; filter:brightness(1.2);}
.hero-actions{flex-shrink:0; display:flex; gap:.5rem; flex-wrap:wrap;}
.hero-actions .btn{font-size:.85rem; padding:.4rem .8rem;}

.hero-badge{background:linear-gradient(135deg,var(--accent-color),#7c3aed); color:#fff; display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; padding:.3rem .7rem;}
.sparkles{position:absolute; inset:0; pointer-events:none;}
.spark{position:absolute; width:4px; height:4px; background:radial-gradient(circle,#fff,rgba(255,255,255,.3)); border-radius:50%; animation:spark 8s linear infinite;}
.spark.s1{top:15%; left:10%; animation-delay:0s}
.spark.s2{top:25%; right:15%; animation-delay:2s}
.spark.s3{bottom:20%; left:20%; animation-delay:4s}
.spark.s4{bottom:15%; right:20%; animation-delay:6s}
.spark.s5{top:60%; left:50%; animation-delay:1s}
.spark.s6{top:40%; right:40%; animation-delay:3s}
@keyframes spark{0%{transform:translateY(0) scale(1); opacity:.6} 50%{transform:translateY(-6px) scale(1.2); opacity:.9} 100%{transform:translateY(0) scale(1); opacity:.4}}

/* Responsive adjustments */
@media (max-width: 768px) {
  .print-hero .d-flex{flex-direction:column; align-items:flex-start!important; gap:1rem!important;}
  .hero-logo{width:50px; height:50px;}
  .logo-img{width:32px; height:32px;}
  .hero-actions{width:100%; justify-content:flex-start;}
}

/* Стили для кнопки "Показать еще" */
#load-more-container {
  margin-top: 2rem;
}

#load-more-btn {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.1) 0%,
    rgba(99, 102, 241, 0.05) 50%,
    rgba(59, 130, 246, 0.1) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: var(--tc-text);
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 15px rgba(139, 92, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#load-more-btn:hover {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.2) 0%,
    rgba(99, 102, 241, 0.1) 50%,
    rgba(59, 130, 246, 0.2) 100%
  );
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 25px rgba(139, 92, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#load-more-btn:active {
  transform: translateY(0);
  box-shadow: 
    0 4px 15px rgba(139, 92, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

#load-more-btn .btn-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}

#load-more-btn .spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.1em;
}

/* Анимация появления новых карточек теперь использует существующую систему reveal-stagger */

/* Стили для кнопки подтверждения Telegram */
.telegram-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.telegram-input-container input {
  padding-right: 140px; /* Место для кнопки */
}

.telegram-button-container {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Подсказка для Telegram */
.telegram-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.4;
}

.telegram-hint svg {
  flex-shrink: 0;
  color: #3b82f6;
  margin-top: 0.125rem;
}

.telegram-hint span {
  flex: 1;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .telegram-input-container {
    position: static;
    display: block;
  }
  
  .telegram-input-container input {
    padding-right: 1rem; /* Возвращаем обычный padding */
  }
  
  .telegram-button-container {
    position: static;
    transform: none;
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-start;
  }
  
  .telegram-hint {
    margin-top: 0.75rem;
  }
}

.telegram-confirm-btn,
.telegram-status-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 140px;
  justify-content: center;
}

.telegram-confirm-btn {
  background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
  border: 1px solid #0088cc;
  color: white;
}

.telegram-confirm-btn:hover {
  background: linear-gradient(135deg, #006699 0%, #004466 100%);
  border-color: #006699;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
}

.telegram-status-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 1px solid #10b981;
  color: white;
  cursor: default;
}

.telegram-confirm-btn svg,
.telegram-status-btn svg {
  flex-shrink: 0;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {

  .telegram-confirm-btn,
  .telegram-status-btn {
    min-width: auto;
    width: 100%;
  }
}

/* Стили для кнопки Telegram в заказах */
.telegram-notification-item {
  margin-left: 1rem;
  display: flex;
  align-items: center;
}

.telegram-notification-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
  border: 1px solid #0088cc;
  color: white;
}

.telegram-notification-btn:hover {
  background: linear-gradient(135deg, #006699 0%, #004466 100%);
  border-color: #006699;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 136, 204, 0.3);
  color: white;
}

.telegram-notification-btn svg {
  flex-shrink: 0;
}

/* Анимация загрузки для кнопки Telegram */
.telegram-loading-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: 1px solid #f59e0b;
  color: white;
  cursor: default;
}

.telegram-loading-btn svg.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Кнопка информации о баллах поверх блока с баллами */
.points-info-overlay-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.points-info-overlay-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.1);
  color: #ffd700;
}

.points-info-overlay-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.points-info-overlay-btn svg {
  transition: all 0.3s ease;
}

.points-info-overlay-btn:hover svg {
  transform: rotate(180deg);
}

/* Соотношение сторон для карточек товаров 1080x1350 */
.ratio-product {
  --bs-aspect-ratio: calc(1350 / 1080 * 100%);
}

/* Соотношение сторон для детальной страницы товара - более вытянутое по вертикали */
.ratio-product-detail {
  --bs-aspect-ratio: 125% !important;
  background-color: var(--tc-elevate);
}

.ratio-product-detail img {
  object-fit: contain !important;
  background-color: var(--tc-elevate);
}

/* Дополнительные стили для стабильного отображения изображений товара */
#mainImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Убираем возможные конфликты с ratio */
.ratio img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Дополнительные стили для карточек товаров */
.product-card-wrap .ratio img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Убираем возможные проблемы с z-index */
.product-card-wrap .ratio {
  position: relative !important;
}

.product-card-wrap .ratio img {
  z-index: 1 !important;
}

/* АГРЕССИВНЫЕ стили для принудительного отображения изображений */
.ratio img, .ratio picture {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

.ratio img {
  object-fit: cover !important;
}

/* Убираем все возможные скрытия */
.ratio img[style*="display: none"] {
  display: block !important;
}

.ratio img[style*="visibility: hidden"] {
  visibility: visible !important;
}

.ratio img[style*="opacity: 0"] {
  opacity: 1 !important;
}

/* Уменьшаем высоту изображения на десктопе */
@media (min-width: 992px) {
  .ratio:not(.ratio-product-detail) {
    --bs-aspect-ratio: 110% !important;
  }
}

#google-pay-button-container > button {
  width: 100%;
  min-height: 56px;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.2);
}

/* ========================================
   Monobank & Mono Checkout Styles
   ======================================== */

/* Mini Cart - Mono Checkout Button */
.mono-checkout-mini {
  margin-top: 0.5rem;
}

.mono-checkout-btn-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(20, 22, 27, 0.9) 0%, rgba(30, 32, 37, 0.95) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  color: var(--tc-text);
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.mono-checkout-btn-mini::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.15) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mono-checkout-btn-mini:hover {
  border-color: rgba(139, 92, 246, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.25);
}

.mono-checkout-btn-mini:hover::before {
  opacity: 1;
}

.mono-checkout-btn-mini:active {
  transform: translateY(0);
}

.mono-checkout-label {
  font-size: 0.9rem;
  color: rgba(232, 233, 236, 0.9);
}

.mono-checkout-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.mono-cat-icon {
  width: 20px;
  height: 20px;
  margin-right: 0.25rem;
}

.mono-cat-head {
  fill: #8b5cf6;
  transition: fill 0.3s ease;
}

.mono-cat-eye {
  fill: #fff;
}

.mono-cat-mouth {
  fill: none;
  stroke: #fff;
  stroke-width: 0.5;
  stroke-linecap: round;
}

.mono-checkout-btn-mini:hover .mono-cat-head {
  fill: #a78bfa;
}

.mono-logo-word {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.mono-logo-word--mono {
  color: #8b5cf6;
}

.mono-logo-word--checkout {
  color: rgba(232, 233, 236, 0.8);
  font-weight: 600;
}

.mono-checkout-status {
  font-size: 0.75rem;
  min-height: 1.2rem;
  color: rgba(232, 233, 236, 0.6);
}

.mono-checkout-status.error {
  color: #ef4444;
}

.mono-checkout-status.success {
  color: #10b981;
}

.mono-checkout-btn-mini:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.mono-checkout-btn-mini:disabled:hover {
  border-color: rgba(139, 92, 246, 0.3);
  transform: none;
  box-shadow: none;
}

/* Cart Page - Monobank Payment Button */
.cart-monobank-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cart-monobank-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #2c1a43 0%, #6d37ff 45%, #ff2d85 100%);
  color: #ffffff;
  box-shadow: 0 12px 32px rgba(109, 55, 255, 0.35);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cart-monobank-btn:hover:not(.loading) {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(109, 55, 255, 0.45);
}

.cart-monobank-btn.loading {
  cursor: progress;
  opacity: 0.78;
  box-shadow: 0 8px 22px rgba(109, 55, 255, 0.28);
}

.cart-monobank-logo {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  font-size: 1.32rem;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

.cart-monobank-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.cart-monobank-logo .mono {
  font-weight: 600;
}

.cart-monobank-logo .dot {
  opacity: 0.7;
  font-weight: 500;
}

.cart-monobank-logo .pay {
  font-weight: 700;
}

.cart-monobank-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 1.05rem;
  line-height: 1.12;
}

.cart-monobank-badges {
  display: flex;
  gap: 0.45rem;
}

.cart-monobank-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  height: 28px;
  padding: 0 0.8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  font-family: 'Inter', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #ffffff;
}

.cart-monobank-badge .badge-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.cart-monobank-badge .badge-text {
  display: inline-flex;
  align-items: center;
}

.cart-monobank-badge-gpay .badge-symbol {
  background: linear-gradient(90deg, #4285f4, #ea4335 35%, #fbbc05 65%, #34a853 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cart-monobank-badge-apple {
  font-weight: 500;
}

.cart-monobank-badge-apple .badge-symbol {
  font-size: 1.05rem;
  line-height: 1;
}

.cart-monobank-badge-apple .badge-text {
  font-weight: 600;
}

.cart-monobank-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: monobank-spin 0.8s linear infinite;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cart-monobank-btn.loading .cart-monobank-spinner {
  opacity: 1;
  transform: scale(1);
}

.cart-monobank-status {
  min-height: 1.1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.cart-monobank-status.error {
  color: #ff90b4;
}

.cart-monobank-status.success {
  color: #b8f7c7;
}

@keyframes monobank-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 520px) {
  .cart-monobank-btn {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .cart-monobank-logo {
    font-size: 1.18rem;
  }

  .cart-monobank-text {
    font-size: 0.98rem;
  }

  .cart-monobank-badges {
    gap: 0.35rem;
  }

  .cart-monobank-badge {
    padding: 0 0.7rem;
  }
}