/* ============================================================
   DAYZ SHOP — THEME OVERRIDE
   Переопределение стилей нового магазина.
   Базируется на техниках из старого стиля:
   glassmorphism, purple-gradient bg, shimmer, ripple,
   neon-glow, hover-float, gradient-text и др.
   ============================================================ */

/* ── 1. CSS-переменные — фиолетовая цветовая система ────────── */
:root {
  /* Основные цвета — переопределяем светлую схему магазина */
  --main-bg-color:           transparent;
  --main-white-color:        rgba(255, 255, 255, 0.12);
  --main-white-gray-color:   rgba(255, 255, 255, 0.08);
  --header-background:       rgba(255, 255, 255, 0.10);
  --main-text-color:         #ffffff;
  --main-dark-color:         rgba(255, 255, 255, 0.18);

  --bg-muted:                rgba(255, 255, 255, 0.08);
  --panel-bg:                rgba(255, 255, 255, 0.10);
  --panel-bg-2:              rgba(255, 255, 255, 0.18);
  --border-muted:            rgba(255, 255, 255, 0.20);

  --muted-heading:           rgba(255, 255, 255, 0.85);
  --muted-desc:              rgba(255, 255, 255, 0.65);
  --muted-2:                 rgba(255, 255, 255, 0.50);
  --muted-3:                 rgba(255, 255, 255, 0.20);
  --muted-4:                 rgba(255, 255, 255, 0.15);
  --muted-5:                 rgba(255, 255, 255, 0.25);
  --muted-6:                 rgba(255, 255, 255, 0.60);
  --dark-2:                  rgba(255, 255, 255, 0.80);

  --text-body:               rgba(255, 255, 255, 0.90);
  --text-muted:              rgba(255, 255, 255, 0.55);
  --text-opaque:             rgba(255, 255, 255, 0.90);

  --primary:                 #1babff;
  --accent:                  #ff6b9d;
  --accent-2:                #c44bff;
  --success-color:           #27d8f7;
  --error-color:             #ff4d6d;
  --warning-color:           #ffc107;
  --info-color:              #36bcff;
  --info-bg:                 rgba(27, 171, 255, 0.15);
  --info-text:               #a8deff;
  --garland-green:           #00f746;

  /* Градиенты — часто используемые комбинации */
  --grad-purple:             linear-gradient(359deg, #65017ed6, #5600c7);
  --grad-neon:               linear-gradient(45deg, #1babff, #ff6b9d, #c44bff, #36bcff);
  --grad-hover-name:         linear-gradient(45deg, #1babff70, #ff61e7b3);
  --grad-progress:           linear-gradient(45deg, #ff6b9d, #c44bff, #ad8df7, #36bcff);
  --grad-banner-promo:       linear-gradient(91deg, #d300ffbd, #7e00ff);
}

/* ── 2. Фоновый градиент страницы ───────────────────────────── */
.app-wrapper {
  background: var(--grad-purple) !important;
  background-attachment: fixed !important;
  color: #ffffff;
}

/* Фон html/body — чтобы область за пределами контента
   (gutter скроллбара, overscroll) была фиолетовой, не белой */
html {
  background: #2a0050 !important;
  scrollbar-color: rgba(196, 75, 255, 0.60) rgba(30, 0, 55, 0.80); /* Firefox: thumb track */
}

body {
  background: var(--grad-purple);
  background-attachment: fixed;
  color: #ffffff;
}

/* ── 3. Навбар — glassmorphism ───────────────────────────────── */
.navbar {
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-left-radius: 15px !important;
  border-bottom-right-radius: 15px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: none !important;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.20) !important;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.10);
}

.auth-btn:hover,
.balance-btn:hover,
.profile-btn:hover {
  background: rgba(255, 255, 255, 0.20) !important;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.10);
}

/* ── 4. Кнопки серверов и категорий (app-button) — shimmer ──── */
.app-button {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  border: none !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  position: relative;
  overflow: hidden;
}

/* Shimmer-эффект на кнопках */
.app-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.20), transparent);
  transition: left 0.6s ease;
  z-index: 1;
  pointer-events: none;
}

.app-button:hover::before {
  left: 100%;
}

.app-button:hover,
.app-button--active {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px);
}

/* Активная кнопка — neon-glow синий */
.app-button--active,
.app-button.app-button--active {
  background: rgba(27, 171, 255, 0.82) !important;
  box-shadow: 0 8px 30px rgba(27, 171, 255, 0.40) !important;
  transform: translateY(-1px);
}

/* ── 5. Карточки товаров — glassmorphism + gradient border ───── */
.product-card {
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: 15px !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  position: relative;
}

/* Градиентный overlay при наведении */
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(27, 171, 255, 0) 0%,
    rgba(27, 171, 255, 0.10) 50%,
    rgba(255, 107, 157, 0.10) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: 15px;
  z-index: 1;
  pointer-events: none;
}

/* Анимированный neon-бордер при наведении */
.product-card::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(45deg, #1babff, #ff6b9d, #c44bff, #36bcff, #1babff);
  background-size: 300% 300%;
  opacity: 0;
  z-index: -1;
  border-radius: 17px;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.product-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    0 20px 40px rgba(27, 171, 255, 0.20),
    0 10px 20px rgba(255, 107, 157, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.product-card:hover::before { opacity: 1; }
.product-card:hover::after  { opacity: 0.70; }

/* Фоновая область изображения */
.product-card-image-container {
  background: transparent !important;
}

/* Имя и цена карточки */
.product-card-footer {
  background: rgba(0, 0, 0, 0.20);
  color: #ffffff !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.product-card-name,
.product-card-price {
  color: #ffffff !important;
}

.product-card-old-price {
  color: rgba(255, 255, 255, 0.50) !important;
}

.product-card-discount-price {
  color: #27d8f7 !important;
  text-shadow: 0 0 10px rgb(39, 197, 247);
}

/* Бейджи */
.product-card-badge-days {
  background-color: rgba(27, 171, 255, 0.82) !important;
}

.product-card-badge-percentage {
  background-color: rgba(39, 216, 247, 0.82) !important;
}

.product-card-label {
  background-color: rgba(27, 171, 255, 0.70) !important;
  color: #ffffff !important;
}

/* ── 6. Модальное окно — glassmorphism + purple inner glow ───── */
.modal {
  background: rgba(76, 0, 95, 0.21) !important;
  border-radius: 15px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: inset 0 0 100px 0 rgba(167, 46, 255, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.modal-overlay {
  background-color: rgba(0, 0, 0, 0.60) !important;
}

.modal-content {
  background: transparent !important;
  color: #ffffff;
}

.product-modal-title,
.product-modal-description {
  color: #ffffff !important;
}

/* Кнопка покупки — ripple + neon-glow */
.modal-primary-button {
  background-color: rgba(27, 171, 255, 0.82) !important;
  border-radius: 1.5rem 0 0 1.5rem !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

.modal-primary-button::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255, 255, 255, 0.20);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
  z-index: 0;
}

.modal-primary-button:hover::before {
  width: 300px;
  height: 300px;
}

.modal-primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(27, 171, 255, 0.40) !important;
}

.modal-primary-button-text {
  color: #ffffff !important;
  position: relative;
  z-index: 1;
}

.modal-close-button-text {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* ── 7. Сервера / мониторинг ────────────────────────────────── */
.monitoring {
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-left: 2px solid transparent;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.monitoring:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 10px 30px rgba(27, 171, 255, 0.20);
  transform: translateY(-3px);
}

.monitoring--active {
  border-color: #27d8f7 !important;
}

.monitoring--disabled {
  border-color: #ff4d6d !important;
}

.monitoring-title {
  color: #ffffff !important;
}

.monitoring-title-span {
  color: rgba(255, 255, 255, 0.55) !important;
}

.monitoring-progress-text {
  color: #ffffff !important;
}

/* Прогресс-бар с розово-фиолетовым градиентом */
.monitoring-progress-bar {
  background: rgba(255, 255, 255, 0.20) !important;
  border-radius: 25px !important;
  position: relative;
  overflow: hidden;
}

/* Shimmer-слой на прогресс-баре */
.monitoring-progress-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.20) 50%,
    transparent 100%);
  animation: progress-shimmer 2.5s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

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

.monitoring-progress-fill {
  background: var(--grad-progress) !important;
  background-size: 200% 200% !important;
  animation: gradient-shift 3s ease infinite;
  border-radius: 25px;
}

.monitoring-progress-fill--disabled {
  background: rgba(255, 255, 255, 0.30) !important;
  animation: none;
}

.monitoring-status-text {
  color: #ffffff !important;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── 8. Баннеры ─────────────────────────────────────────────── */
.banner-elem {
  border-radius: 15px !important;
  overflow: hidden;
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.banner-elem::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(27, 171, 255, 0.10) 0%,
    transparent 50%,
    rgba(255, 107, 157, 0.10) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 15px;
  pointer-events: none;
  z-index: 1;
}

.banner-elem:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 15px 35px rgba(27, 171, 255, 0.20) !important;
}

.banner-elem:hover::before { opacity: 1; }

.bunner-title,
.banner-content {
  color: #ffffff !important;
}

/* ── 9. Панель пополнения баланса ───────────────────────────── */
.recharge-panel {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 15px !important;
  color: #ffffff;
}

.recharge-panel-header,
.recharge-panel-label,
.recharge-panel-title {
  color: #ffffff !important;
}

.recharge-panel-provider {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease !important;
}

.recharge-panel-provider:hover,
.recharge-panel-provider.selected {
  border-color: rgba(27, 171, 255, 0.80) !important;
  background: rgba(27, 171, 255, 0.20) !important;
  box-shadow: 0 5px 20px rgba(27, 171, 255, 0.30);
}

.recharge-panel-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(238, 49, 232, 0.60) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease !important;
}

.recharge-panel-input-raw {
  color: #ffffff !important;
}

.recharge-panel-input-raw::placeholder {
  color: rgba(255, 255, 255, 0.40) !important;
}

.recharge-panel-input:focus-within,
.recharge-panel-input:hover {
  box-shadow: 0 0 20px rgba(109, 207, 255, 0.50) !important;
  transform: scale(1.02);
  border-color: rgba(93, 197, 255, 0.90) !important;
  outline: none;
}

input,
.text-input,
.search-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

input::placeholder,
.text-input::placeholder,
.search-input::placeholder {
  color: rgba(255, 255, 255, 0.40) !important;
}

input:focus,
.text-input:focus,
.search-input:focus {
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 0 20px rgba(27, 171, 255, 0.30) !important;
  border-color: rgba(93, 197, 255, 0.80) !important;
  outline: none;
}

/* ── 10. Счётчик количества ─────────────────────────────────── */
.amount-control-counter {
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: .5rem !important;
}

.amount-control-counter-button {
  color: #ffffff !important;
}

.amount-control-counter-button:hover {
  background: rgba(255, 255, 255, 0.20) !important;
}

.amount-control-count {
  color: #ffffff !important;
}

.amount-control-total {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

.amount-control-total-rub {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ── 11. Дроп-даун / select ─────────────────────────────────── */

/* Критично: контейнер ДОЛЖЕН быть position:relative
   чтобы выпадалка рендерилась относительно него,
   а не улетала в угол экрана */
.select-container {
  position: relative !important;
}

/* Выпадалка — position:absolute, не участвует в layout,
   НО модалка может скроллиться если её overflow-y: auto.
   Фиксируем: модалка не скроллится когда открыт select */
.modal-overlay {
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.modal-overlay::-webkit-scrollbar {
  display: none !important;
}

.modal-content {
  overflow: visible !important;     /* ключевое: не обрезаем выпадалку */
}

/* Скрываем скроллбар внутри самого списка */
.select-options {
  overflow-y: auto !important;
  scrollbar-width: none !important;       /* Firefox */
  -ms-overflow-style: none !important;    /* IE/Edge */
}
.select-options::-webkit-scrollbar {
  display: none !important;               /* Chrome/Safari */
}

/* Глобально прячем скроллбары везде — 
   фиолетовый дизайн выглядит чище без них */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: rgba(50, 0, 80, 0.60);
}
::-webkit-scrollbar-thumb {
  background: rgba(196, 75, 255, 0.50);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(196, 75, 255, 0.80);
}

/* Выпадающий список — привязываем к контейнеру */
.select-options {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  margin-top: 4px;

  background: rgba(30, 0, 55, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff !important;
  border: 1px solid rgba(196, 75, 255, 0.45);
  border-radius: .5rem !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.50), 0 0 20px rgba(196, 75, 255, 0.20);
}

.select-display {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: .5rem !important;
  cursor: pointer;
}

.select-text {
  color: #ffffff !important;
}

.select-arrow {
  fill: #ffffff !important;
}

.select-option {
  color: rgba(255, 255, 255, 0.85) !important;
  transition: background 0.2s;
}

.select-option:hover,
.select-option.active {
  background: rgba(27, 171, 255, 0.35) !important;
  color: #ffffff !important;
}

/* ── 12. Профиль — сайдбар ──────────────────────────────────── */
.profile-sidebar__header {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff;
}

.profile-sidebar__item {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff;
}

.profile-sidebar__link:hover {
  background: rgba(27, 171, 255, 0.40) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(27, 171, 255, 0.20);
}

.profile-sidebar__footer {
  border-color: #ff4d6d !important;
  color: #ff4d6d !important;
}

.profile-sidebar__footer > .profile-sidebar__link:hover {
  background: rgba(255, 77, 109, 0.40) !important;
}

/* ── 13. Таблица истории покупок ────────────────────────────── */
.table {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.table thead {
  background: rgba(255, 255, 255, 0.12) !important;
}

.table th,
.table td {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.table tbody {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ── 14. Рулетка ────────────────────────────────────────────── */
.roulette-wrapper {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(196, 75, 255, 0.60) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(5px);
}

.roulette-window {
  border-color: #c44bff !important;
  box-shadow: 0 0 20px rgba(196, 75, 255, 0.40);
}

.roulette-item {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  backdrop-filter: blur(5px);
}

.roulette-item-name {
  color: #ffffff !important;
}

.roulette-prize-card {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.roulette-prize-name {
  color: #ffffff !important;
}

.roulette-modal {
  background: rgba(76, 0, 95, 0.30) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: inset 0 0 100px rgba(167, 46, 255, 0.50) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ── 15. Тосты / уведомления ────────────────────────────────── */
.toast {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.toast.success { background-color: rgba(39, 216, 247, 0.80) !important; }
.toast.error   { background-color: rgba(255, 77, 109, 0.80) !important; }
.toast.info    { background-color: rgba(27, 171, 255, 0.80) !important; }
.toast.warning { background-color: rgba(255, 193, 7, 0.80) !important; color: #000; }

/* ── 16. Empty-state, форма, dropdowns, footer ───────────────── */
.empty-box {
  border-color: rgba(255, 255, 255, 0.20) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.empty-icon {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.empty-title,
.empty-description { color: #ffffff !important; }

.form {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(5px);
}

.dropdown {
  background: rgba(30, 0, 50, 0.80) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.dropdown li {
  color: rgba(255, 255, 255, 0.85) !important;
}

.dropdown li:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.footer,
.footer-link { color: rgba(255, 255, 255, 0.60) !important; }

/* ── 17. Бонусные чипы, promo ──────────────────────────────── */
.recharge-panel-bonus {
  background: rgba(27, 171, 255, 0.20) !important;
  color: #a8deff !important;
}

.promo-wrapper .promo-button {
  background-color: rgba(39, 216, 247, 0.80) !important;
}

/* ── 18. Зона-блок (server select) в модалке ─────────────────── */
.product-modal-inputs-zone-block {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
}

.product-modal-inputs-zone-block--nav > li {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* ── 19. Profile info ────────────────────────────────────────── */
.profile-info {
  background: rgba(255, 255, 255, 0.08) !important;
}

.profile-info__row--white {
  background: rgba(255, 255, 255, 0.10) !important;
}

.profile-info__row:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

.profile-info__cell a { color: #36bcff !important; }

/* ── 20. Дополнительные keyframe-анимации (перенесены из старого) */
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 3px 10px rgba(92, 184, 92, 0.50); }
  50%       { box-shadow: 0 5px 20px rgba(92, 184, 92, 0.80); }
}

@keyframes pulse-orange {
  0%, 100% { box-shadow: 0 3px 10px rgba(245, 168, 52, 0.50); }
  50%       { box-shadow: 0 5px 20px rgba(245, 168, 52, 0.80); }
}

@keyframes gradient-rotate {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── 21. Scroll-to-top ──────────────────────────────────────── */
.scroll-top-btn {
  filter: drop-shadow(0 0 6px rgba(27, 171, 255, 0.60));
}

/* ── 22. Cookie banner ──────────────────────────────────────── */
.cookie-banner {
  background: rgba(30, 0, 50, 0.90) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
}

.cookie-content p { color: rgba(255, 255, 255, 0.75) !important; }

.cookie-buttons button:first-child {
  background: rgba(27, 171, 255, 0.82) !important;
  color: #ffffff !important;
}

/* ── 23. Галерея в модалке ──────────────────────────────────── */
.gallery-nav {
  background: rgba(0, 0, 0, 0.50) !important;
  color: #ffffff !important;
}

.gallery-thumbnails img.active {
  border-color: #1babff !important;
  box-shadow: 0 0 8px rgba(27, 171, 255, 0.60);
}

.servers-buttons {
display: none !important;
}