html { scroll-behavior: smooth !important; }

:root {
  --a: #c47a3a; /* основной оранжевый */
  --a-light: #d38a4a;
  --a-glow: 0 0 6px rgba(196,122,58,.3);
  --a-glow-hover: 0 0 12px rgba(196,122,58,.5);
  --s0: #0a0b0e;
  --s1: #101217;
  --s2: #151922;
  --dark-bg: linear-gradient(180deg, #101217, #0a0b0e);
  --t: #c47a3a; /* весь основной текст оранжевый */
  --m: rgba(196,122,58,.7); /* второстепенный */
}

.gro-theme body {
  background: var(--s0) !important;
  color: var(--t) !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

.gro-theme * { box-sizing: border-box !important; }

.gro-theme a { color: var(--a) !important; text-decoration: none !important; }

.gro-theme a:hover { text-shadow: var(--a-glow-hover) !important; }

/* Хедер */
.gro-theme header,
.gro-theme .navbar {
  background: var(--dark-bg) !important;
  border-bottom: 1px solid rgba(196,122,58,.2) !important;
}

/* Баланс в хедере — теперь точно оранжевый */
.gro-theme .balance-btn,
.gro-theme .balance-btn * {
  color: var(--a-light) !important;
  font-weight: 850 !important;
  text-shadow: var(--a-glow-hover) !important;
}

/* Кнопки */
.gro-theme .gro-btn,
.gro-theme .btn,
.gro-theme button {
  background: var(--dark-bg) !important;
  border: 1px solid var(--a) !important;
  color: var(--t) !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-weight: 700 !important;
  box-shadow: var(--a-glow) !important;
  transition: all .2s ease !important;
}

.gro-theme .gro-btn:hover,
.gro-theme button:hover {
  box-shadow: var(--a-glow-hover) !important;
}

/* Карточки товаров + футер карточек */
.gro-theme .gro-card,
.gro-theme .card,
.gro-theme .product-card,
.gro-theme .item-card,
.gro-theme .card-body,
.gro-theme .card-footer,
.gro-theme .product-card-footer,
.gro-theme .product-item > div,
.gro-theme .product-item p,
.gro-theme .product-item span {
  background: var(--dark-bg) !important;
  color: var(--t) !important;
  border: none !important;
  box-shadow: none !important;
}

.gro-theme .gro-card:hover {
  box-shadow: var(--a-glow-hover), 0 15px 30px rgba(0,0,0,.7) !important;
}

/* Цены */
.gro-theme .gro-price,
.gro-theme .amount-control-total,
.gro-theme .price,
.gro-theme [class*="price"],
.gro-theme [class*="rub"] {
  color: var(--a-light) !important;
  font-weight: 900 !important;
  text-shadow: var(--a-glow-hover) !important;
}

/* Мониторинг серверов */
.gro-theme .monitoring {
  background: var(--dark-bg) !important;
  border: 1px solid rgba(196,122,58,.2) !important;
  border-radius: 18px !important;
  box-shadow: var(--a-glow) !important;
  color: var(--t) !important;
}

.gro-theme .monitoring-title,
.gro-theme .monitoring-title-span,
.gro-theme .monitoring-status-text {
  color: var(--a-light) !important;
  font-weight: 700 !important;
}

.gro-theme .monitoring-progress-fill {
  background: linear-gradient(90deg, var(--a), var(--a-light)) !important;
}

/* === МОДАЛЬНОЕ ОКНО — всё по центру, симметрично === */
.gro-theme .modal-overlay {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: rgba(0,0,0,.92) !important;
}

.gro-theme .modal,
.gro-theme .modal-content,
.gro-theme .product-modal {
  background: var(--dark-bg) !important;
  color: var(--t) !important;
  border-radius: 20px !important;
  box-shadow: var(--a-glow-hover) !important;
  max-width: 425px !important; /* не слишком широкая, но с воздухом */
  width: 90vw !important;
  padding: 0px !important;
  text-align: center !important; /* базовый центр для текста */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Заголовок по центру */
.gro-theme .product-modal-title {
  color: var(--a-light) !important;
  font-weight: 900 !important;
  text-shadow: var(--a-glow-hover) !important;
  margin-bottom: 5px !important;
}

/* Изображение по центру */
.gro-theme .product-modal-gallery {
  margin-bottom: 5px !important;
}

.gro-theme .gallery-main-image {
  max-width: 100% !important;
  height: auto !important;
  max-height: 300px !important;
  border-radius: 8px !important;
  box-shadow: var(--a-glow-hover) !important;
}

/* Описание по центру */
.gro-theme .product-modal-description {
  max-width: 90% !important;
  margin-bottom: 35px !important;
  line-height: 1.7 !important;
}

/* Inputs (селект, количество, цена) по центру */
.gro-theme .product-modal-inputs {
  width: 100% !important;
  max-width: 400px !important;
  margin-bottom: 5px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
}

.gro-theme .select-container,
.gro-theme .select-display {
  width: 100% !important;
}

.gro-theme .amount-control {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
}
.gro-theme .amount-control-counter {
  background: rgba(196,122,58,.1) !important;
  color: var(--t) !important;
}

.gro-theme .amount-control-counter-button {
  background: rgba(196,122,58,.15) !important;
  color: var(--t) !important;
  box-shadow: var(--a-glow) !important;
}

.gro-theme .amount-control-counter-button:hover {
  background: rgba(196,122,58,.3) !important;
  box-shadow: var(--a-glow-hover) !important;
}

/* Кнопки модалки — как было, но без смещения вправо */
.gro-theme .modal-close-button {
  background: rgba(196,122,58,.1) !important;
  color: var(--m) !important;
  border-radius: 12px !important;
}

.gro-theme .modal-close-button:hover {
  background: rgba(196,122,58,.3) !important;
  color: var(--t) !important;
}

.gro-theme .modal-primary-button {
  background: var(--dark-bg) !important;
  border: 2px solid var(--a) !important;
  color: var(--t) !important;
  box-shadow: var(--a-glow-hover) !important;
}

/* Футер модалки — центрирование без смещения, кнопки равные */
.gro-theme .modal-footer-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 15px !important; /* большой gap для воздуха */
  padding: 0px 0 !important;
  margin: 10 !important;
  background: transparent !important;
  width: 50% !important;
}

/* Кнопки — равные по ширине, без фиксированной (чтобы не "улетало") */
.gro-theme .modal-close-button,
.gro-theme .modal-primary-button {
  flex: 1 1 auto !important;
  max-width: 180px !important;
  min-width: 120px !important;
  background: var(--dark-bg) !important;
  border: 2px solid var(--a) !important;
  color: var(--t) !important;
  border-radius: 14px !important;
  padding: 7px 20px !important;
  font-weight: 750 !important;
  text-align: center !important;
  box-shadow: var(--a-glow) !important;
  transition: all .25s ease !important;
}

.gro-theme .modal-close-button:hover,
.gro-theme .modal-primary-button:hover {
  box-shadow: var(--a-glow-hover) !important;
  transform: translateY(-3px) !important;
  background: rgba(196,122,58,.15) !important;
}

/* "Приобрести" — выделяем */
.gro-theme .modal-primary-button {
  border-width: 3px !important;
  font-weight: 850 !important;
}

/* Текст внутри кнопок */
.gro-theme .modal-close-button-text,
.gro-theme .modal-primary-button-text {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--t) !important;
  text-shadow: var(--a-glow) !important;
}

/* Скроллбар */
.gro-theme ::-webkit-scrollbar { width: 8px; }
.gro-theme ::-webkit-scrollbar-track { background: var(--s1); }
.gro-theme ::-webkit-scrollbar-thumb { background: var(--a); box-shadow: var(--a-glow); border-radius: 4px; }

/* 3D tilt для карточек */
.gro-theme .gro-card {
  transition: transform .3s ease, box-shadow .3s ease !important;
  transform-style: preserve-3d !important;
  perspective: 2000px !important;
}

.gro-theme .gro-card:hover {
  box-shadow: var(--a-glow-hover), 0 0 40px rgba(196,122,58,.4), 0 20px 40px rgba(0,0,0,.8) !important;
}

@keyframes neonPulse {
  0% { box-shadow: var(--a-glow); }
  50% { box-shadow: 0 0 16px rgba(196,122,58,.7), 0 0 30px rgba(196,122,58,.4); }
  100% { box-shadow: var(--a-glow); }
}

.gro-theme .gro-price,
.gro-theme .modal-primary-button,
/* Количество и цена — по центру, тёмный фон, оранжевый акцент */
.gro-theme .amount-control {
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px !important;
  width: 100% !important;
  max-width: 500px !important;
}

/* Цена — большой блок по центру, тёмный фон, сильный неон */
.gro-theme .amount-control-total {
  background: var(--dark-bg) !important;
  color: var(--a-light) !important;
  font-weight: 900 !important;
  font-size: 2em !important; /* большой шрифт */
  text-shadow: var(--a-glow-hover) !important;
  text-align: center !important;
  padding: 20px !important;
  border-radius: 18px !important;
  border: 3px solid var(--a) !important;
  box-shadow: var(--a-glow-hover), 0 0 40px rgba(196,122,58,.4) !important;
  animation: neonPulse 3s ease-in-out infinite !important;
  width: 100% !important;
  max-width: 400px !important;
}

/* "RUB" — чуть меньше, тусклее */
.gro-theme .amount-control-total-rub {
  font-size: 0.6em !important;
  opacity: 0.8 !important;
  display: block !important;
  margin-bottom: 5px !important;
}

/* Кнопки +/- — по бокам от счётчика */
.gro-theme .amount-control-counter {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
}

@keyframes glitch {
  0% { text-shadow: 2px 0 #c47a3a, -2px 0 #c47a3a; }
  20% { text-shadow: 2px 2px #c47a3a, -2px -2px #c47a3a; }
  40% { text-shadow: -2px 0 #c47a3a, 2px 0 #c47a3a; }
  60% { text-shadow: 0 0 20px #c47a3a; }
  100% { text-shadow: 2px 0 #c47a3a, -2px 0 #c47a3a; }
}

.gro-theme .navbar-brand,
.gro-theme h1 {
  animation: glitch 4s linear infinite !important;
}

/* Радиационный шум — теперь над фоном, видно всегда */
.gro-theme body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: 0.15 !important;
  background:
    radial-gradient(circle at 20% 50%, rgba(196,122,58,.3) 0%, transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(100,200,100,.25) 0%, transparent 25%),
    radial-gradient(circle at 50% 80%, rgba(196,122,58,.25) 0%, transparent 35%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0px, transparent 2px, transparent 4px, rgba(0,0,0,.05) 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0px, transparent 2px, transparent 4px, rgba(0,0,0,.05) 6px);
  animation: radiationFlicker 7s linear infinite !important;
  mix-blend-mode: overlay !important;
}

@keyframes radiationFlicker {
  0%, 100% { opacity: 0.15; transform: translate(0,0); }
  25% { opacity: 0.20; transform: translate(8px, -8px); }
  50% { opacity: 0.12; transform: translate(-8px, 8px); }
  75% { opacity: 0.18; transform: translate(5px, 5px); }
}

/* Vignette — тёмные углы, фокус на центре (как в играх/фильмах) */
.gro-theme body::after {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(10,11,14,.7) 100%) !important;
  opacity: 0.6 !important;
}

/* Scanline — лёгкие полоски как на старом мониторе ПДА (сталкерская атмосфера) */
.gro-theme body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 3 !important;
  background: repeating-linear-gradient(0deg, rgba(196,122,58,.02) 0px, transparent 1px, transparent 2px, rgba(196,122,58,.02) 3px) !important;
  opacity: 0.4 !important;
  animation: scanlineMove 12s linear infinite !important;
  mix-blend-mode: overlay !important;
}

@keyframes scanlineMove {
  0% { transform: translateY(0); }
  100% { transform: translateY(3px); }
}

/* Усиленный border-glow на карточках и модалке (как премиум hover) */
.gro-theme .gro-card,
.gro-theme .modal,
.gro-theme .monitoring {
  border: 1px solid rgba(196,122,58,.3) !important;
  box-shadow: 0 0 20px rgba(196,122,58,.2), 0 15px 35px rgba(0,0,0,.6) !important;
  transition: all .4s ease !important;
}

.gro-theme .gro-card:hover,
.gro-theme .modal:hover {
  border-color: var(--a) !important;
  box-shadow: 0 0 40px rgba(196,122,58,.5), 0 25px 50px rgba(0,0,0,.8) !important;
}

/* Обновлённый glitch для скидок — старая цена без прыжков (только мерцание теней) */
@keyframes glitchOldPrice {
  0% {
    text-shadow: 2px 0 rgba(196,122,58,.5), -2px 0 rgba(196,122,58,.5);
  }
  20% {
    text-shadow: 3px 3px rgba(196,122,58,.4), -3px -3px rgba(196,122,58,.6);
  }
  40% {
    text-shadow: -2px 0 rgba(196,122,58,.5), 2px 0 rgba(196,122,58,.4);
  }
  60% {
    text-shadow: 0 0 15px rgba(196,122,58,.7);
  }
  80% {
    text-shadow: -3px -3px rgba(196,122,58,.5), 3px 3px rgba(196,122,58,.6);
  }
  100% {
    text-shadow: 2px 0 rgba(196,122,58,.5), -2px 0 rgba(196,122,58,.5);
  }
}

/* Новая цена со скидкой — лёгкий "прыжок" (bounce scale + glow) */
@keyframes bounceNewPrice {
  0%, 100% {
    transform: scale(1);
    text-shadow: var(--a-glow-hover);
  }
  50% {
    transform: scale(1.08);
    text-shadow: 0 0 30px rgba(196,122,58,.8), 0 0 50px rgba(196,122,58,.5);
  }
}

/* Старая цена — только мерцание теней, без прыжков */
.gro-theme .product-card-old-price {
  color: rgba(196,122,58,.5) !important;
  text-decoration: line-through !important;
  font-weight: 700 !important;
  animation: glitchOldPrice 3.5s linear infinite !important;
  display: inline-block !important;
  margin-right: 12px !important;
}

/* Новая цена — прыгает (bounce) + сильный glow */
.gro-theme .product-card-price.product-card-discount-price {
  color: var(--a-light) !important;
  font-weight: 900 !important;
  font-size: 1.3em !important;
  animation: bounceNewPrice 2s ease-in-out infinite !important;
  display: inline-block !important;
}

/* Бейдж скидки — оставляем как был (компактный) */
.gro-theme .product-card-badge-percentage {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: rgba(196,122,58,.3) !important;
  color: #fff !important;
  padding: 5px 9px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 0.9em !important;
  border: 1.5px solid var(--a) !important;
  box-shadow: 0 0 15px rgba(196,122,58,.6) !important;
  animation: glitchDiscount 2.8s linear infinite !important;
  z-index: 10 !important;
  backdrop-filter: blur(3px) !important;
}

/* Старая цена — перечёркнутая + glitch */
.gro-theme .product-card-old-price {
  color: rgba(196,122,58,.5) !important;
  text-decoration: line-through !important;
  font-weight: 700 !important;
  animation: glitchDiscount 3.2s linear infinite !important;
  display: inline-block !important;
  margin-right: 12px !important;
}

/* Новая цена со скидкой — ярче, без glitch */
.gro-theme .product-card-price.product-card-discount-price {
  color: var(--a-light) !important;
  font-weight: 900 !important;
  font-size: 1.3em !important;
  text-shadow: var(--a-glow-hover) !important;
}

/* Обёртка цен — для позиционирования */
.gro-theme .product-card-footer > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Карточка — relative для бейджа */
.gro-theme .product-card {
  position: relative !important;
}









/* Правка для селекта сервера в модалке — тёмный фон, нормальный шрифт, без белизны */
.gro-theme .select-container,
.gro-theme .select-display {
  background: rgba(255,255,255,.05) !important; /* тёмный полупрозрачный, как inputs */
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--t) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 1em !important; /* нормальный шрифт, не огромный */
  transition: all .2s ease !important;
}

.gro-theme .select-display:hover {
  border-color: var(--a) !important;
  box-shadow: var(--a-glow) !important;
}

.gro-theme .select-text {
  color: var(--m) !important; /* серый placeholder */
  font-size: 1em !important;
  margin: 0 !important;
}

.gro-theme .select-display svg {
  fill: var(--a) !important;
}

/* Дропдаун — тёмный, без сдвигов */
.gro-theme .select-options {
  background: var(--dark-bg) !important;
  color: var(--t) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: var(--a-glow-hover) !important;
  border-radius: 12px !important;
}

.gro-theme .select-option {
  color: var(--t) !important;
  padding: 10px 16px !important;
  font-size: 1em !important;
}

.gro-theme .select-option:hover {
  background: rgba(196,122,58,.25) !important;
}

.gro-theme .select-option[data-selected="true"] {
  color: var(--a-light) !important;
  font-weight: 700 !important;
}