/*
 * KavkazRust — GameStores custom theme (v2, "уютная версия")
 * Dark Rust / Caucasus visual style.
 *
 * ВАЖНО:
 * 1) Файл рассчитан на вставку в редактор CSS GameStores.
 * 2) Блок :root содержит наши переменные темы — менять цвета удобно там.
 * 3) Баннер лучше загрузить через настройки GameStores и указать его URL
 *    вместо YOUR_BANNER_URL ниже.
 * 4) Если добавляете KavkazRust_GameStores.js — часть эффектов (искры,
 *    кнопка "наверх", тосты, тултипы) заработает только вместе с ним.
 *    Без JS сайт всё равно будет выглядеть значительно приятнее — новые
 *    блоки внизу файла деградируют мягко.
 */

:root {
  --kr-bg: #080909;
  --kr-bg-2: #101211;
  --kr-panel: rgba(22, 24, 23, .92);
  --kr-panel-2: rgba(30, 32, 30, .96);
  --kr-border: rgba(255, 255, 255, .08);
  --kr-border-hover: rgba(232, 78, 42, .42);

  --kr-text: #f2eee7;
  --kr-text-muted: #9e9b94;

  --kr-accent: #e84e2a;
  --kr-accent-2: #ff7048;
  --kr-accent-dark: #9f2d1a;
  --kr-gold: #d8a85d;

  --kr-radius: 14px;
  --kr-radius-sm: 10px;
  --kr-radius-lg: 22px;
  --kr-shadow: 0 18px 50px rgba(0, 0, 0, .38);
  --kr-shadow-accent: 0 10px 30px rgba(232, 78, 42, .18);

  --kr-banner: url("YOUR_BANNER_URL");

  /* --- новое: тайминги для анимаций, чтобы менять "характер" сайта в одном месте --- */
  --kr-ease: cubic-bezier(.22, .61, .36, 1);
  --kr-fast: .18s;
  --kr-mid: .32s;
  --kr-slow: .6s;
}

/* ---------- Base ---------- */

html {
  background: var(--kr-bg) !important;
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 50% -10%, rgba(232, 78, 42, .12), transparent 34rem),
    radial-gradient(circle at 100% 30%, rgba(216, 168, 93, .06), transparent 28rem),
    var(--kr-bg) !important;
  color: var(--kr-text) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Subtle Rust-like texture without an external image */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

/* Приятная мелочь: свой цвет выделения текста вместо синего по умолчанию */
::selection {
  background: rgba(232, 78, 42, .35);
  color: #fff;
}

/* Приятная мелочь: аккуратный, но заметный фокус для клавиатурной навигации */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--kr-accent-2) !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Header / navigation ---------- */

header,
nav,
[class*="header"],
[class*="navbar"],
[class*="navigation"] {
  border-color: var(--kr-border) !important;
}

header,
[class*="header"],
[class*="navbar"] {
  background: rgba(8, 9, 9, .86) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: box-shadow var(--kr-mid) var(--kr-ease), background var(--kr-mid) var(--kr-ease);
}

/* Приятная мелочь: лёгкая тень появляется у шапки, когда страница проскроллена
   (класс добавляет JS; без JS шапка просто выглядит как раньше) */
header.kr-scrolled,
[class*="header"].kr-scrolled,
[class*="navbar"].kr-scrolled {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}

a:hover {
  color: var(--kr-accent-2) !important;
}

/* ---------- Main content ---------- */

main,
[class*="container"],
[class*="content"] {
  scrollbar-color: var(--kr-accent-dark) transparent;
}

h1, h2, h3, h4 {
  color: var(--kr-text) !important;
  letter-spacing: -.025em;
}

h1 {
  font-weight: 850 !important;
  /* Приятная мелочь: лёгкий градиент на заголовке в акцентных тонах */
  background: linear-gradient(120deg, var(--kr-text) 40%, var(--kr-gold) 70%, var(--kr-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

p,
small,
[class*="description"],
[class*="subtitle"] {
  color: var(--kr-text-muted);
}

/* ---------- Hero / banner ---------- */

[class*="banner"],
[class*="hero"],
[class*="cover"] {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--kr-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--kr-shadow);
  background:
    linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.24)),
    var(--kr-banner) center / cover no-repeat !important;
}

[class*="banner"]::after,
[class*="hero"]::after,
[class*="cover"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8,9,9,.9), transparent);
}

/* Приятная мелочь: очень медленный "кен-бёрнс" зум на фоне баннера, чтобы он
   не выглядел статичной картинкой */
[class*="banner"],
[class*="hero"],
[class*="cover"] {
  background-size: cover;
  animation: kr-banner-breathe 22s ease-in-out infinite;
}

@keyframes kr-banner-breathe {
  0%, 100% { background-position: center 50%; background-size: 104% auto; }
  50%      { background-position: center 46%; background-size: 112% auto; }
}

/* ---------- Shop / panels ---------- */

[class*="card"],
[class*="product"],
[class*="item"],
[class*="panel"],
[class*="modal"] {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--kr-border) !important;
  border-radius: var(--kr-radius) !important;
  background: linear-gradient(145deg, var(--kr-panel-2), var(--kr-panel)) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

[class*="card"]:hover,
[class*="product"]:hover,
[class*="item"]:hover {
  transform: translateY(-3px);
  border-color: var(--kr-border-hover) !important;
  box-shadow: var(--kr-shadow-accent);
}

/* Приятная мелочь: диагональный "блик" пробегает по карточке при наведении */
[class*="card"]::before,
[class*="product"]::before,
[class*="item"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, .06) 50%,
    transparent 60%
  );
  transform: translateX(-120%);
  transition: transform .7s var(--kr-ease);
}

[class*="card"]:hover::before,
[class*="product"]:hover::before,
[class*="item"]:hover::before {
  transform: translateX(120%);
}

/* Product images */
[class*="product"] img,
[class*="card"] img {
  border-radius: calc(var(--kr-radius) - 3px) !important;
  transition: transform var(--kr-mid) var(--kr-ease);
}

/* Приятная мелочь: лёгкий zoom картинки товара при наведении на карточку */
[class*="card"]:hover img,
[class*="product"]:hover img {
  transform: scale(1.045);
}

/* Приятная мелочь: карточки плавно "въезжают" при появлении в области экрана —
   требует JS, который добавляет .kr-visible; без JS карточки видны сразу
   (opacity задаётся только внутри html.kr-js-ready, см. ниже) */
html.kr-js-ready [class*="card"],
html.kr-js-ready [class*="product"] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--kr-slow) var(--kr-ease), transform var(--kr-slow) var(--kr-ease);
}

html.kr-js-ready [class*="card"].kr-visible,
html.kr-js-ready [class*="product"].kr-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Categories ---------- */

button,
[role="button"] {
  border-radius: var(--kr-radius-sm) !important;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

button:hover,
[role="button"]:hover {
  transform: translateY(-1px);
}

button:active,
[role="button"]:active {
  transform: translateY(0) scale(.97);
}

button:not(:disabled):hover {
  border-color: rgba(232, 78, 42, .45) !important;
}

[class*="category"] button,
[class*="categories"] button,
[class*="category"] [role="button"],
[class*="categories"] [role="button"] {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--kr-border) !important;
  color: var(--kr-text-muted) !important;
}

[class*="category"] button:hover,
[class*="categories"] button:hover,
[class*="category"] [aria-selected="true"],
[class*="categories"] [aria-selected="true"] {
  background: linear-gradient(135deg, var(--kr-accent), var(--kr-accent-dark)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 7px 20px rgba(232, 78, 42, .22);
}

/* ---------- Search / inputs ---------- */

input,
textarea,
select {
  color: var(--kr-text) !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid var(--kr-border) !important;
  border-radius: var(--kr-radius-sm) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

input::placeholder,
textarea::placeholder {
  color: #77756f !important;
}

input:focus,
textarea:focus,
select:focus {
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(232, 78, 42, .65) !important;
  box-shadow: 0 0 0 3px rgba(232, 78, 42, .11) !important;
}

/* ---------- Primary actions ---------- */

button[type="submit"],
[class*="buy"],
[class*="purchase"],
[class*="checkout"],
[class*="primary"] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--kr-accent), var(--kr-accent-dark)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(232, 78, 42, .18);
  font-weight: 750 !important;
}

button[type="submit"]:hover,
[class*="buy"]:hover,
[class*="purchase"]:hover,
[class*="checkout"]:hover,
[class*="primary"]:hover {
  filter: brightness(1.08);
  box-shadow: 0 11px 30px rgba(232, 78, 42, .28);
}

/* Приятная мелочь: глянцевый блик пробегает по кнопке покупки при наведении */
button[type="submit"]::after,
[class*="buy"]::after,
[class*="purchase"]::after,
[class*="checkout"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .55s var(--kr-ease);
  pointer-events: none;
}

button[type="submit"]:hover::after,
[class*="buy"]:hover::after,
[class*="purchase"]:hover::after,
[class*="checkout"]:hover::after {
  left: 130%;
}

/* ---------- Prices / badges ---------- */

[class*="price"] {
  color: var(--kr-accent-2) !important;
  font-weight: 850 !important;
}

[class*="badge"],
[class*="discount"],
[class*="tag"] {
  border-radius: 999px !important;
  font-weight: 750 !important;
}

/* Приятная мелочь: бейдж скидки/новинки мягко "дышит", привлекая внимание */
[class*="discount"],
[class*="badge"][class*="new"],
[class*="tag"][class*="new"] {
  animation: kr-pulse-soft 2.4s ease-in-out infinite;
}

@keyframes kr-pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 78, 42, .35); }
  50%      { box-shadow: 0 0 0 6px rgba(232, 78, 42, 0); }
}

/* ---------- Monitoring / server blocks ---------- */

[class*="monitor"],
[class*="server"] {
  border-radius: var(--kr-radius) !important;
}

[class*="online"],
[class*="status"][class*="active"] {
  color: #77d69a !important;
  position: relative;
  padding-left: 16px;
}

/* Приятная мелочь: живая "радар"-точка рядом со статусом "онлайн" */
[class*="online"]::before,
[class*="status"][class*="active"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #77d69a;
  box-shadow: 0 0 0 0 rgba(119, 214, 154, .6);
  animation: kr-radar 1.8s ease-out infinite;
}

@keyframes kr-radar {
  0%   { box-shadow: 0 0 0 0 rgba(119, 214, 154, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(119, 214, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(119, 214, 154, 0); }
}

/* ---------- Footer ---------- */

footer {
  margin-top: 60px;
  border-top: 1px solid var(--kr-border) !important;
  background: rgba(6, 7, 7, .8) !important;
  color: var(--kr-text-muted) !important;
}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: #080909;
}

::-webkit-scrollbar-thumb {
  background: #292b29;
  border: 2px solid #080909;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--kr-accent-dark);
}

/* ---------- Новые вспомогательные блоки (для JS-файла) ---------- */

/* Искры/угли, летящие вверх по экрану — элементы создаёт JS */
.kr-embers {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.kr-ember {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--kr-accent-2);
  box-shadow: 0 0 6px 1px rgba(255, 112, 72, .8);
  opacity: 0;
  animation: kr-ember-rise linear forwards;
}

@keyframes kr-ember-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
  10%  { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--kr-drift, 20px), -100vh) scale(1); }
}

/* Кнопка "наверх" */
.kr-top-btn {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--kr-border);
  background: linear-gradient(135deg, var(--kr-accent), var(--kr-accent-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition: opacity var(--kr-mid) var(--kr-ease), transform var(--kr-mid) var(--kr-ease);
}

.kr-top-btn.kr-show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.kr-top-btn:hover {
  filter: brightness(1.1);
}

/* Тосты-уведомления */
.kr-toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.kr-toast {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--kr-border);
  background: rgba(16, 18, 17, .95);
  color: var(--kr-text);
  font-size: 13px;
  font-weight: 650;
  box-shadow: var(--kr-shadow);
  opacity: 0;
  transform: translateY(10px);
  animation: kr-toast-in .35s var(--kr-ease) forwards, kr-toast-out .35s var(--kr-ease) 2.2s forwards;
}

@keyframes kr-toast-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes kr-toast-out {
  to { opacity: 0; transform: translateY(-8px); }
}

/* Мини-тултип по data-kr-tooltip */
[data-kr-tooltip] {
  position: relative;
}

[data-kr-tooltip]::after {
  content: attr(data-kr-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: rgba(16, 18, 17, .96);
  color: var(--kr-text);
  border: 1px solid var(--kr-border);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--kr-fast) ease, transform var(--kr-fast) ease;
  z-index: 30;
}

[data-kr-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Мини-конфетти при покупке (частицы создаёт JS) */
.kr-confetti-piece {
  position: fixed;
  z-index: 55;
  width: 6px;
  height: 6px;
  pointer-events: none;
  border-radius: 2px;
  animation: kr-confetti-burst .8s ease-out forwards;
}

@keyframes kr-confetti-burst {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--kr-cx, 40px), var(--kr-cy, -60px)) rotate(240deg); }
}

/* ---------- Mobile ---------- */

@media (max-width: 700px) {
  body {
    font-size: 14px !important;
  }

  [class*="banner"],
  [class*="hero"],
  [class*="cover"] {
    border-radius: 14px !important;
  }

  [class*="card"],
  [class*="product"],
  [class*="item"] {
    border-radius: 11px !important;
  }

  .kr-top-btn {
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
  }
}

/* ---------- Accessibility / reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }

  html.kr-js-ready [class*="card"],
  html.kr-js-ready [class*="product"] {
    opacity: 1 !important;
    transform: none !important;
  }

  .kr-embers { display: none !important; }
}