/* =============================================
   PENRUST — GameStores FINAL CSS
   Вставить целиком в: Внешний вид → Продвинутая конфигурация → CSS
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg:     #0d0d0d;
  --bg2:    #111111;
  --bg3:    #171717;
  --bg4:    #1e1e1e;
  --border: #252525;
  --border2:#303030;
  --text:   #d8d8d8;
  --text2:  #808080;
  --text3:  #464646;
  --white:  #ffffff;
}

*, *::before, *::after {
  font-family: 'Inter', Arial, sans-serif !important;
  box-sizing: border-box;
}

/* === АНИМИРОВАННАЯ ПОЛОСА СВЕРХУ === */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #0d0d0d, #666, #fff, #666, #0d0d0d);
  background-size: 300% 100%;
  animation: topSlide 5s linear infinite;
  z-index: 100000;
  pointer-events: none;
}
@keyframes topSlide {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* === ФОН === */
body {
  background-color: var(--bg) !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* === НАВБАР === */
header, nav,
.headerContainer,
[class*="Header-module"],
[class*="header-module"],
[class*="Navbar"],
[class*="navbar"] {
  background: rgba(5,5,5,0.97) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 2px 30px rgba(0,0,0,0.8) !important;
  backdrop-filter: blur(16px) !important;
}

<a href="https://freekassa.net" target="_blank" rel="noopener noreferrer">
  <img src="https://cdn.freekassa.net/banners/big-dark-1.png" title="Прием платежей на сайте для физических лиц и т.д.">
</a>

header img, nav img,
[class*="Header"] img,
[class*="logo"] img {
  max-height: 28px !important;
  width: auto !important;
  max-width: 150px !important;
  object-fit: contain !important;
}

header a, nav a,
[class*="Header"] a,
[class*="nav"] a {
  color: #777 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: color 0.2s !important;
}
header a:hover, nav a:hover { color: var(--white) !important; }

/* === ОСНОВНОЙ КОНТЕЙНЕР === */
.Index-module__wrapper,
[class*="Index-module"],
[class*="Layout-module"],
main {
  background: transparent !important;
}

/* === БОКОВАЯ ПАНЕЛЬ === */
.Widgets-module__wrapper,
[class*="Widgets-module"] {
  background: transparent !important;
}

[class*="Widgets-module__wrapper"] section,
[data-widgettype="monitoring"] {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}

/* === ЗАГОЛОВКИ "Мониторинг" и "Магазин" === */
h2.boxHeader.MonitoringWidget-module__header,
h2.boxHeader.Shop-module__header,
h2.boxHeader,
.boxHeader {
  background: var(--bg2) !important;
  color: var(--white) !important;
  font-family: 'Bebas Neue', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.MonitoringWidget-module__body,
.boxBody,
[class*="Widget-module__body"],
[class*="module__body"] {
  background: var(--bg3) !important;
  color: var(--text2) !important;
  padding: 12px !important;
  font-size: 12px !important;
}

.MonitoringWidget-module__body *,
.boxBody * {
  color: var(--text3) !important;
  font-size: 12px !important;
}

/* === СЕКЦИЯ МАГАЗИНА === */
.Shop-module__wrapper,
[class*="Shop-module"] {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 16px !important;
}

/* === КНОПКИ КАТЕГОРИЙ === */
[class*="Filter"] button,
[class*="category"] button,
[class*="Category"] button,
.nav a, .nav li a,
.nav-tabs a, .nav-tabs li a,
.nav-pills a, .nav-pills li a,
.nav button, .nav-tabs button {
  background: #1c1c1c !important;
  color: #aaaaaa !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  transition: all 0.18s !important;
  cursor: pointer !important;
}

[class*="Filter"] button:hover,
.nav a:hover, .nav li a:hover,
.nav-tabs a:hover, .nav-pills a:hover {
  background: #2a2a2a !important;
  color: var(--white) !important;
  border-color: var(--border2) !important;
}

[class*="Filter"] button.active,
.btn-success,
.nav li.active a,
.nav-tabs li.active a,
button.active {
  background: var(--white) !important;
  color: #111111 !important;
  border-color: var(--white) !important;
  font-weight: 800 !important;
}

/* === ПОИСК === */
input[placeholder*="Назван"],
input[type="search"],
input[type="text"] {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 7px !important;
  color: var(--white) !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
}
input::placeholder { color: var(--text3) !important; }
input:focus {
  border-color: #444 !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04) !important;
  outline: none !important;
}

/* === КАРТОЧКИ ТОВАРОВ === */
.Product-module__wrapper,
[class*="Product-module__wrapper"] {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  overflow: hidden !important;
  position: relative !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
  box-shadow: 0 3px 16px rgba(0,0,0,0.4) !important;
  animation: cardIn 0.4s ease both !important;
  cursor: pointer !important;
}

.Product-module__wrapper:hover,
[class*="Product-module__wrapper"]:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65) !important;
  border-color: var(--border2) !important;
}

@keyframes cardIn {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Картинка */
.Product-module__img,
[class*="Product-module__img"] {
  width: 100% !important;
  height: 160px !important;
  object-fit: contain !important;
  background: #161616 !important;
  padding: 14px !important;
  display: block !important;
  transition: transform 0.28s ease !important;
}

.Product-module__wrapper:hover .Product-module__img,
[class*="Product-module__wrapper"]:hover [class*="Product-module__img"] {
  transform: scale(1.07) !important;
}

/* ЦЕНА */
.Product-module__price,
[class*="Product-module__price"] {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: var(--white) !important;
  color: #111111 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
  z-index: 10 !important;
  line-height: 1.6 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
  letter-spacing: 0.02em !important;
}

/* НАЗВАНИЕ */
.Product-module__name,
[class*="Product-module__name"] {
  color: var(--white) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: block !important;
  padding: 8px 11px 4px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: var(--bg3) !important;
  letter-spacing: 0.02em !important;
}

/* Кнопка под карточкой */
.Product-module__wrapper [role="button"],
[class*="Product-module__wrapper"] [role="button"],
[class*="Product-module"] button {
  display: block !important;
  width: calc(100% - 16px) !important;
  margin: 4px 8px 8px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 7px !important;
  color: var(--text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 8px 0 !important;
  text-align: center !important;
  transition: all 0.18s !important;
  cursor: pointer !important;
}

.Product-module__wrapper [role="button"]:hover,
[class*="Product-module"] button:hover {
  background: var(--white) !important;
  color: #111 !important;
  border-color: var(--white) !important;
}

/* === TITAN — бейдж и цена не налезают === */
.titan-card [class*="Product-module__price"] {
  top: 30px !important;
}

.titan-badge-el {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  background: var(--white) !important;
  color: #111 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  text-align: center !important;
  padding: 3px 0 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  z-index: 11 !important;
  border-radius: 10px 10px 0 0 !important;
  line-height: 1.4 !important;
}

@keyframes titanGlow {
  0%,100% { box-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 28px rgba(255,255,255,.04); }
  50%      { box-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 56px rgba(255,255,255,.15); }
}

.titan-card {
  border-color: rgba(255,255,255,0.4) !important;
  animation: titanGlow 3s ease-in-out infinite !important;
}

/* === МОДАЛКА ТОВАРА === */
[class*="Modal"],
[class*="modal"],
.modal-content {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.9) !important;
  color: var(--text) !important;
}

[class*="Modal"] header,
[class*="Modal"] [class*="header"],
.modal-header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 16px 20px !important;
}

[class*="Modal"] h2,
[class*="Modal"] h3,
.modal-title {
  color: var(--white) !important;
  font-family: 'Bebas Neue', Arial, sans-serif !important;
  font-size: 22px !important;
  letter-spacing: 0.08em !important;
}

[class*="Modal"] p,
[class*="Modal"] li,
[class*="Modal"] span,
.modal-body p,
.modal-body li {
  color: var(--text2) !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
}

[class*="Modal"] [class*="price"],
.modal-body .price {
  color: var(--white) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  display: block !important;
  margin: 12px 0 !important;
}

[class*="Modal"] .btn-success,
.modal-footer .btn-success {
  background: var(--white) !important;
  color: #111 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 11px 28px !important;
}

[class*="Modal"] .btn-success:hover { background: #e0e0e0 !important; }

.modal-footer, [class*="Modal"] footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 14px 14px !important;
}

.close, .btn-close {
  filter: invert(1) !important;
  opacity: 0.5 !important;
}
.close:hover, .btn-close:hover { opacity: 1 !important; }

/* === ГЛОБАЛЬНЫЕ КНОПКИ === */
.btn-default, .btn-secondary, .btn-light {
  background: var(--bg4) !important;
  color: var(--text2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 6px !important;
}
.btn-default:hover, .btn-secondary:hover {
  background: var(--bg3) !important;
  color: var(--white) !important;
}

/* === ДРОПДАУНЫ === */
.dropdown-menu, [class*="dropdown"] ul {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.7) !important;
  padding: 6px !important;
}
.dropdown-item, .dropdown-menu a, .dropdown-menu li a {
  color: var(--text2) !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  padding: 7px 12px !important;
  transition: all 0.15s !important;
}
.dropdown-item:hover, .dropdown-menu a:hover {
  background: var(--bg4) !important;
  color: var(--white) !important;
}

/* === ТАБЛИЦЫ === */
table { color: var(--text) !important; }
th {
  background: var(--bg2) !important;
  color: var(--white) !important;
  border-color: var(--border) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
}
td { border-color: var(--border) !important; color: var(--text2) !important; }
tr:hover td { background: var(--bg4) !important; }

/* === ФОРМЫ === */
input, select, textarea {
  background: var(--bg3) !important;
  border: 1px solid var(--border2) !important;
  color: var(--white) !important;
  border-radius: 7px !important;
}
input:focus, select:focus {
  border-color: #444 !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04) !important;
  outline: none !important;
}

/* === АЛЕРТЫ === */
.alert-success { background:#0a1a0a!important; border-color:#1a3d1a!important; color:#4caf82!important; border-radius:8px!important; }
.alert-danger   { background:#1a0a0a!important; border-color:#3d1a1a!important; color:#ff6b6b!important; border-radius:8px!important; }
.alert-info     { background:#0a1020!important; border-color:#1a2e50!important; color:#6baed5!important; border-radius:8px!important; }

/* === ПАГИНАЦИЯ === */
.pagination > li > a {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
}
.pagination > li > a:hover { background: var(--bg4) !important; color: var(--white) !important; }
.pagination > .active > a { background: var(--white) !important; color: #111 !important; border-color: var(--white) !important; }

/* === ФУТЕР === */
footer, [class*="Footer"] {
  background: #070707 !important;
  border-top: 1px solid #131313 !important;
  color: #303030 !important;
  font-size: 11px !important;
}
footer a, [class*="Footer"] a { color: #404040 !important; }
footer a:hover { color: #666 !important; }

/* === СКРОЛЛБАР === */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:#0a0a0a; }
::-webkit-scrollbar-thumb { background:#282828; border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:#404040; }
::selection { background:#282828; color:#fff; }