/* ==========================================================================
   FACSMP · КАСТОМНЫЙ CSS · «NEON DARK» · палитра Лёд   (версия для EasyDonate / тема Colibri)
   --------------------------------------------------------------------------
   Установка: Панель EasyDonate → Магазин → Оформление → «Кастомные CSS стили»
              → загрузите этот файл.
   Настройка: вся палитра — в блоке :root (раздел 1). Меняете 2 цвета —
              перекрашивается весь магазин.
   ========================================================================== */

/* Шрифты. Строка @import должна быть первой. Если платформа её вырежет —
   ничего не сломается, сработает встроенный шрифт темы (Golos). */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&family=Manrope:wght@400;500;600;700;800&display=swap');


/* ==========================================================================
   1. ПАЛИТРА — правьте только здесь
   ========================================================================== */
:root {
  --accent:    #3b82f6;  /* основной акцент (фиолетовый) */
  --accent-2:  #67e8f9;  /* второй акцент (циан)         */
  --accent-3:  #f472b6;  /* скидки / распродажа          */
  --success:   #2ee6a8;  /* онлайн / успех               */

  --bg:        #0b0e14;  /* фон страницы                 */
  --bg-2:      #111722;  /* фон крупных секций           */
  --bg-3:      #161c2a;  /* приподнятые поверхности      */
  --border:    rgba(255, 255, 255, .09);
  --border-hi: rgba(59,130,246,.6);

  --text:      #e9edf7;
  --text-dim:  #98a2bb;

  --grad:      linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --glow:      0 18px 45px -18px rgba(124, 92, 255, .75);
  --glow-2:    0 18px 45px -18px rgba(34, 211, 238, .65);

  --font-display: 'Unbounded', 'Golos', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', 'Golos', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/*  Альтернативные палитры — раскомментируйте одну из строк:
    :root { --accent:#ff6a00; --accent-2:#ffd200; --accent-3:#ff2d55; --border-hi:rgba(255,106,0,.6); }   Огонь
    :root { --accent:#10b981; --accent-2:#a3e635; --accent-3:#f59e0b; --border-hi:rgba(16,185,129,.6); }  Изумруд
    :root { --accent:#ff4d8d; --accent-2:#c084fc; --accent-3:#fb7185; --border-hi:rgba(255,77,141,.6); }   Сакура
    :root { --accent:#3b82f6; --accent-2:#67e8f9; --accent-3:#f472b6; --border-hi:rgba(59,130,246,.6); }   Лёд
*/


/* ==========================================================================
   2. БАЗА
   ========================================================================== */
html, body { background-color: var(--bg) !important; }

body {
  /* «северное сияние» на весь фон страницы */
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(124, 92, 255, .20), transparent 62%),
    radial-gradient(950px 520px at 88% -4%, rgba(34, 211, 238, .15), transparent 62%),
    radial-gradient(1000px 760px at 50% 106%, rgba(124, 92, 255, .10), transparent 66%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  color: var(--text-dim) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
}

/* Прозрачные поверхности, чтобы сквозил градиент body.
   ВАЖНО: селекторы нарочно усилены (html body …) — кастомный CSS на EasyDonate
   вставляется ВЫШЕ style.css темы, и theme'овский `.bg-light{…!important}`
   иначе перебивал бы эти правила (белые подложки у иконок в корзине). */
html body .bg-light      { background-color: transparent !important; }
html body .bg-light-dark { background-color: rgba(255, 255, 255, .035) !important; }
html body .bg-soft-light { background-color: rgba(255, 255, 255, .035) !important; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display) !important;
  color: var(--text) !important;
  letter-spacing: -.015em;
}

.text-black, .text-dark   { color: var(--text) !important; }
.text-muted, .small, small, .text-light { color: var(--text-dim) !important; }
p { color: var(--text-dim); }

::selection { background: rgba(124, 92, 255, .5); color: #fff; }

/* «волны»-разделители секций должны быть цвета фона страницы */
.pattern svg path, .pattern.top svg path { fill: var(--bg) !important; }

main, footer { animation: fac-fade .55s ease both; }
@keyframes fac-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }


/* ==========================================================================
   3. СКРОЛЛБАР
   ========================================================================== */
html { scrollbar-width: thin; scrollbar-color: var(--accent) #080b11; }
::-webkit-scrollbar        { width: 10px !important; height: 10px !important; }
::-webkit-scrollbar-track  { background: #080b11 !important; }
::-webkit-scrollbar-thumb  { background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important; border-radius: 10px !important; border: 2px solid #080b11 !important; }
::-webkit-scrollbar-thumb:hover { filter: brightness(1.25); }
.categories::-webkit-scrollbar { display: none; }


/* ==========================================================================
   4. ШАПКА
   ========================================================================== */
nav.navbar,
.navbar.navbar-theme-light,
.navbar-theme-light:not(.headroom),
.navbar-theme-light:not(.navbar-transparent) {
  background: rgba(11, 14, 20, .66) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 12px 40px -24px rgba(0, 0, 0, .9);
}

.navbar-theme-light .navbar-nav .nav-link,
.navbar-theme-light.navbar-light:not(.headroom) .navbar-nav .nav-link,
.headroom--not-top.navbar-theme-light .nav-link {
  color: var(--text-dim) !important;
  font-weight: 600;
  border-radius: 12px;
  padding: .45rem .95rem !important;
  transition: color .22s, background .22s, transform .22s;
}
.navbar-theme-light .navbar-nav .nav-link:hover,
.navbar-theme-light.navbar-light:not(.headroom) .navbar-nav .nav-link:hover,
.headroom--not-top.navbar-theme-light .nav-link:hover {
  color: #fff !important;
  background: rgba(124, 92, 255, .16) !important;
  transform: translateY(-1px);
}
.navbar-theme-light .navbar-nav .nav-link i { color: var(--accent-2); }

.navbar-brand img { filter: drop-shadow(0 0 16px rgba(124, 92, 255, .5)); transition: transform .3s, filter .3s; }
.navbar-brand:hover img { transform: scale(1.06); filter: drop-shadow(0 0 24px rgba(34, 211, 238, .65)); }

.navbar-collapse, .navbar-collapse-header { border-radius: 18px !important; }
@media (max-width: 991.98px) {
  .navbar-collapse, .navbar-collapse-header { background: #0d111a !important; border: 1px solid var(--border); }
}
.navbar-toggler-icon { filter: invert(1) brightness(1.7); }
.collapse-close i { color: var(--text) !important; }

/* плавный скролл по якорям + отступ под липкую шапку */
html { scroll-behavior: smooth; }
#shop, #help, #welcome-section { scroll-margin-top: 84px; }


/* ==========================================================================
   5. ГЕРОЙ + ОНЛАЙН
   ========================================================================== */
#welcome-section { position: relative; overflow: hidden; }

#welcome-section.overlay-dark:before,
#welcome-section.overlay-dark::before {
  background: linear-gradient(180deg,
              rgba(8, 10, 16, .66) 0%,
              rgba(10, 13, 20, .48) 40%,
              rgba(11, 14, 20, .90) 86%,
              var(--bg) 100%) !important;
  opacity: 1 !important;
}

#welcome-section::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(720px 300px at 16% 106%, rgba(124, 92, 255, .50), transparent 70%),
    radial-gradient(720px 300px at 84% 106%, rgba(34, 211, 238, .36), transparent 70%);
  mix-blend-mode: screen;
  animation: fac-breathe 9s ease-in-out infinite alternate;
}
@keyframes fac-breathe { from { opacity: .6; } to { opacity: 1; } }

/* Название магазина: градиентный текст с пробегающим блеском */
.shop-name, h1.shop-name, h1.display-1.shop-name {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  background: linear-gradient(100deg, #ffffff 0%, #cdbcff 26%, #7ef0ff 50%, #ffffff 74%, #cdbcff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
  filter: drop-shadow(0 8px 34px rgba(124, 92, 255, .6));
  animation: fac-shine 9s linear infinite;
}
@keyframes fac-shine { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }

.shop-description, h3.shop-description {
  color: rgba(233, 237, 247, .85) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .7);
}

.calimbula-radius { position: relative; box-shadow: 0 46px 90px -52px rgba(124, 92, 255, .9); }

/* Онлайн-счётчик: аккуратная стеклянная «пилюля» */
.general-online p, .general-online > span { margin: 0 !important; }
.general-online p > span, .general-online span[style] {
  background: rgba(10, 13, 20, .55) !important;
  border: 1px solid var(--border) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 999px !important;
  padding: .42rem 1.1rem !important;
  color: var(--text) !important;
  font-weight: 600; font-size: .9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}


/* ==========================================================================
   6. ПАНЕЛЬ КАТЕГОРИЙ + ВЫБОР СЕРВЕРА
   ========================================================================== */
.shop > .card, .shop > .card.border-0 {
  background: linear-gradient(165deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 55%), var(--bg-3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .95) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  overflow: hidden;
}
.shop > .card .card-body { background: transparent !important; }

.categories { scrollbar-width: none; }

.category, .filter-button {
  color: var(--text-dim) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .01em;
  transition: color .22s, background .22s, transform .22s, box-shadow .22s;
  border-radius: 14px !important;
}
.category i { color: var(--accent-2); transition: color .22s, transform .22s; }
.category:hover { color: #fff !important; background: rgba(124, 92, 255, .14) !important; }
.category:hover i { transform: rotate(-8deg) scale(1.15); }

.category.active, .category.badge-active {
  background: var(--grad) !important;
  color: #fff !important;
  box-shadow: var(--glow) !important;
}
.category.active i { color: #fff; }

/* выбор сервера */
.select-server .btn-group { color: var(--text-dim) !important; }
.select-server .dropdown-toggle,
.select-server a[style*="color"] {
  color: var(--accent-2) !important;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .3rem .8rem !important;
  transition: .22s;
  cursor: pointer;
}
.select-server .dropdown-toggle:hover { background: rgba(124, 92, 255, .16); border-color: var(--border-hi); color: #fff !important; }


/* ==========================================================================
   7. КАРТОЧКИ ТОВАРОВ
   ========================================================================== */
.product-card {
  background: linear-gradient(168deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .012) 48%), var(--bg-3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 36px -24px rgba(0, 0, 0, .95) !important;
  position: relative;
  overflow: hidden;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1), box-shadow .38s, border-color .38s;
}

.card.product-card { border-radius: 20px !important; }
.modal .modal-content { border-radius: 24px !important; }

/* градиентная рамка при наведении */
.product-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  opacity: 0; transition: opacity .38s; pointer-events: none; z-index: 4;
}
/* свечение за картинкой */
.product-card::after {
  content: ""; position: absolute; left: 50%; top: 30%; width: 200px; height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(124, 92, 255, .32), transparent 68%);
  opacity: 0; transition: opacity .45s; pointer-events: none; z-index: 0;
}
.product-card:hover {
  transform: translateY(-9px);
  border-color: transparent !important;
  box-shadow: 0 32px 62px -26px rgba(124, 92, 255, .8), 0 10px 30px -18px rgba(34, 211, 238, .5) !important;
}
.product-card:hover::before, .product-card:hover::after { opacity: 1; }

.product-card .card-header { background: transparent !important; border-bottom: 0 !important; padding: 1.25rem 1rem .35rem !important; position: relative; z-index: 1; }
.product-card .card-body   { background: transparent !important; position: relative; z-index: 2; }
.product-card .card-footer { background: transparent !important; border-top: 0 !important; padding: 0 .8rem .85rem !important; position: relative; z-index: 2; }

/* картинка товара */
.product-card .card-header img, .product-image {
  position: relative; z-index: 1;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .65)) drop-shadow(0 0 18px rgba(124, 92, 255, .3));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s;
}
.product-card:hover .card-header img { transform: scale(1.1) translateY(-4px); }
.product-card:hover .product-image   { transform: translate(-50%, -50%) scale(1.09); }
.product-card:hover .card-header img,
.product-card:hover .product-image {
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .7)) drop-shadow(0 0 28px rgba(34, 211, 238, .55));
}

/* название */
.product-card .card-body h5 {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}
/* цена */
.product-card .card-body h4 {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
  filter: drop-shadow(0 4px 16px rgba(124, 92, 255, .4));
}

/* кнопка «Купить / Подробнее» */
.product-card .card-footer .btn {
  background: var(--grad) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: .62rem 1rem !important;
  font-size: .82rem !important;
  letter-spacing: .06em;
  box-shadow: 0 12px 26px -12px rgba(124, 92, 255, .9) !important;
  position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s, filter .25s;
}
.product-card .card-footer .btn i,
.product-card .card-footer .btn svg { color: #fff; fill: #fff; }
.product-card .card-footer .btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow: 0 18px 36px -12px rgba(34, 211, 238, .85) !important;
}
.product-card .card-footer .btn:active { transform: scale(.97); }

/* иконка «i» в углу кнопки */
.product-info {
  background: rgba(11, 14, 20, .35) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 50% !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .25s, background .25s, box-shadow .25s;
}
.product-info:hover {
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: 0 0 18px rgba(255, 255, 255, .55);
  transform: scale(1.15);
}
.product-info:hover > img { filter: none !important; }

/* бейдж скидки */
.sale { box-shadow: 0 10px 28px -8px rgba(255, 77, 141, .85) !important; z-index: 5; }
.sale__size  { background: linear-gradient(135deg, #ff2d6f, var(--accent-3)) !important; font-weight: 800 !important; }
.sale__timer { background: rgba(255, 45, 111, .85) !important; }
.sale__timer .text { font-weight: 700; }


/* ==========================================================================
   8. КНОПКИ (общие)
   ========================================================================== */
body .btn { border-radius: 13px !important; font-weight: 700 !important; transition: all .25s; }

.btn-primary, .btn-primary:focus, .btn-dark,
#cart-form .btn.text-white, .modal .btn.text-white {
  background: var(--grad) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 12px 28px -12px rgba(124, 92, 255, .85) !important;
}
.btn-primary:hover, .btn-dark:hover, .modal .btn.text-white:hover {
  transform: translateY(-2px); filter: brightness(1.1);
  box-shadow: 0 18px 38px -12px rgba(34, 211, 238, .8) !important; color: #fff !important;
}
.btn.disabled, .btn:disabled { background: rgba(255, 255, 255, .08) !important; color: rgba(255, 255, 255, .35) !important; box-shadow: none !important; }

.btn-secondary, .btn-outline-primary { background: rgba(255, 255, 255, .06) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
.btn-secondary:hover, .btn-outline-primary:hover { background: rgba(124, 92, 255, .2) !important; border-color: var(--border-hi) !important; color: #fff !important; }
.btn-success { background: linear-gradient(135deg, #10b981, var(--success)) !important; border: 0 !important; color: #06120d !important; }
.btn-danger  { background: linear-gradient(135deg, #ef4444, #ff2d6f) !important; border: 0 !important; }


/* ==========================================================================
   9. КОРЗИНА (кнопка + модалка + оформление платежа)
   ========================================================================== */
.basket-button {
  background: var(--grad) !important; border: 0 !important;
  box-shadow: 0 14px 34px -10px rgba(124, 92, 255, .9) !important;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.basket-button:hover { transform: translateY(-4px) scale(1.07); box-shadow: 0 20px 44px -10px rgba(34, 211, 238, .85) !important; }
.cart-counter { background: #fff !important; color: var(--accent) !important; font-weight: 800 !important; }

.modal-content, .modal-content.rounded-0, .cart-content, .cart-content.bg-light {
  background: linear-gradient(180deg, #151b29 0%, #0d111a 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  color: var(--text) !important;
  box-shadow: 0 60px 130px -34px rgba(0, 0, 0, .92), 0 0 0 1px rgba(124, 92, 255, .12) !important;
  overflow: hidden;
}
.modal-header, .modal-footer { border-color: var(--border) !important; background: transparent !important; }
.modal-body { background: transparent !important; }
.modal-backdrop.show { opacity: .8; background: #05070c; }
.close, .close:hover { color: var(--text) !important; text-shadow: none; }

/* левая колонка корзины */
.cart-content .col-lg-7 { background: rgba(255, 255, 255, .03) !important; }
.cart-products .text-center i { color: var(--accent) !important; }

/* пунктирная линия «Итого» */
.cart-content [style*="dashed"] { border-bottom-color: rgba(255, 255, 255, .16) !important; }
.cart-cost { color: #fff !important; }
.cart-content .fa-ruble-sign, .cart-content .cart-cost + i { color: var(--accent-2) !important; }

/* предупреждение в корзине (используется без класса .alert) */
.alert-warning, .alert-success, .alert-danger, .alert-info {
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  color: var(--text-dim) !important;
}
.alert-warning { border-left: 3px solid #f5b759 !important; }
.alert-warning .alert-inner--icon i, .alert-warning i { color: #f5b759 !important; }
.alert-success { border-left: 3px solid var(--success) !important; }
.alert-danger  { border-left: 3px solid #ff4d6d !important; }
.alert-info    { border-left: 3px solid var(--accent-2) !important; }
.alert { background: rgba(18, 23, 36, .95) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 16px !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 55px -22px rgba(0,0,0,.9) !important; }


/* тексты .text-muted ВНУТРИ контейнеров .text-black/.text-dark — тема перекрашивает
   их контекстом (.text-black .text-muted), поэтому нужен селектор той же силы */
.text-black .text-muted, .text-dark .text-muted,
.text-black .small, .text-black small,
.text-dark .small, .text-dark small { color: var(--text-dim) !important; }

/* ссылки .text-dark внутри тёмных блоков (соглашения, политика) */
.text-black a.text-dark, .text-dark a.text-dark,
.modal a.text-dark, .cart-content a.text-dark {
  color: var(--accent-2) !important;
  text-decoration: underline;
}

/* --- чекбоксы «Я принимаю условия…» (Argon .form-check-sign) --- */
.form-check .form-check-sign::before,
.form-check .form-check-sign::after {
  width: 18px; height: 18px; left: 0; top: 1px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, .08);
  border: 1px solid var(--border);
  box-shadow: none;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.form-check .form-check-sign::after {
  background-color: transparent;
  border: 0;
  color: #fff;
  font-size: .6rem;
  line-height: 2.1;
  text-align: center;
}
.form-check input[type="checkbox"]:checked + .form-check-sign::before {
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 6px 16px -6px rgba(124, 92, 255, .85);
}
.form-check input[type="checkbox"]:checked + .form-check-sign::after {
  background-color: transparent;
  color: #fff;
  opacity: 1;
}
.form-check .form-check-label { color: var(--text-dim) !important; transition: color .2s; }
.form-check .form-check-label:hover { color: var(--text) !important; }

/* страховка: если модалка выше экрана — пусть скроллится, а не обрезается */
#cart .modal-content, .modal-content.cart { overflow-y: auto !important; }

/* --------------------------------------------------------------------------
   КОРЗИНА-DRAWER В СТИЛЕ ТЕМЫ SPIRIT
   Панель выезжает справа во всю высоту: заголовок «Корзина», карточки товаров,
   форма ниже и липкая кнопка «К оформлению» внизу.
   -------------------------------------------------------------------------- */

/* сама панель справа */
#cart .modal-dialog,
#cart .modal-dialog.modal-xl.modal-dialog-centered {
  display: block;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  margin: 0 !important;
  width: 100%;
  max-width: 760px;
  height: 100%;
  max-height: none;
  transform: translateX(103%);
  transition: transform .45s cubic-bezier(.22, .8, .24, 1);
}
#cart.show .modal-dialog,
#cart.show .modal-dialog.modal-xl.modal-dialog-centered { transform: none !important; }

/* убираем распорку бутстрапа, которая центрирует модалку и ломает drawer */
#cart .modal-dialog::before,
#cart .modal-dialog-centered::before { display: none !important; content: none !important; height: 0 !important; }

#cart .modal-content, #cart .modal-content.cart {
  height: 100%;
  border-radius: 26px 0 0 26px !important;
  border-color: rgba(255, 255, 255, .1) !important;
  box-shadow: -40px 0 100px -30px rgba(0, 0, 0, .92) !important;
}

/* заголовок «Корзина» вместо «Оформление платежа» */
#cart h3.h3 { display: none; }
#cart .modal-content > .container-fluid { padding: 0 !important; }
#cart .modal-content > .container-fluid::before {
  content: "Корзина";
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: -.02em;
  color: #fff !important;
  padding: 26px 28px 4px;
}

/* одна колонка: товары сверху, форма и итог ниже */
#cart-form > .row.text-black { display: flex; flex-direction: column; }
#cart-form .col-lg-7, #cart-form .col-lg-5 { width: 100%; max-width: 100%; flex: 0 0 auto; }
#cart-form .col-lg-7, #cart-form .col-lg-7 .col-12 { background: transparent !important; }
#cart .m-3.mt-4 { margin: 0 !important; padding: 0 28px; }
#cart .select-server { margin: 6px 0 14px; }

/* карточка товара в корзине — как плитка в spirit */
#cart .profile-card .card {
  background: rgba(255, 255, 255, .035) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}
#cart .profile-card > .card > .card-body { padding: 14px; }
#cart .profile-card .card-image {
  width: 104px; height: 104px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  border-radius: 18px;
}
#cart .profile-card .card-image img { max-height: 82px !important; width: auto !important; }
#cart .profile-card h5.card-title { color: #fff !important; font-size: 1.06rem !important; margin-bottom: .7rem !important; }
#cart .profile-card .d-flex.mb-4 { gap: 10px; margin-bottom: .9rem !important; }
#cart .profile-card .input-group { width: 110px; }
#cart .profile-card .form-group { margin-bottom: 0; position: relative; }
#cart .profile-card .form-group small { color: var(--text-dim) !important; font-size: 10px; letter-spacing: .04em; }
#cart .profile-card .fa-exchange-alt { color: var(--text-dim); }
#cart .profile-card .btn-danger { width: 42px; height: 42px; border-radius: 13px; padding: 0 !important; margin: 0 !important; }
#cart .profile-card .btn-light,
#cart .profile-card .bg-elegant {
  width: 42px; height: 42px; border-radius: 13px; padding: 0 !important; margin: 0 6px 0 0 !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  transition: background .2s, border-color .2s, transform .2s;
}
#cart .profile-card .btn-light.disabled { opacity: .4; cursor: not-allowed !important; }
#cart .profile-card .bg-elegant:hover { background: rgba(124, 92, 255, .25) !important; border-color: var(--border-hi) !important; transform: translateY(-1px); }
#cart .profile-card h6 { color: #fff !important; font-weight: 800 !important; }
#cart .profile-card h6 i { color: var(--accent-2) !important; }

/* инструкция внутри корзины не нужна — она есть на странице */
#cart .more-products { display: none !important; }
#cart .cart-products { margin-top: 0 !important; margin-bottom: 1.4rem !important; }

/* правая колонка становится продолжением панели */
#cart .col-lg-5 .mx-3 { margin-left: 28px !important; margin-right: 28px !important; }
#cart .col-lg-5 .mx-3:not([style*="border-bottom"]) { display: flex; flex-direction: column; }
#cart .col-lg-5 .mx-3:not([style*="border-bottom"]) > .row { order: 0; }
#cart .col-lg-5 .mx-3:not([style*="border-bottom"]) > p.small { order: 1; margin: 10px 0 0 !important; }
#cart .col-lg-5 .mx-3:not([style*="border-bottom"]) > .d-flex { order: 2; }

/* липкая нижняя панель с кнопкой «К оформлению» — как в spirit */
#cart .d-flex.justify-content-between.md-md-0 {
  position: sticky;
  bottom: 0;
  z-index: 6;
  align-items: center;
  gap: 14px;
  margin: 20px 0 0 !important;
  padding: 16px 28px 20px;
  background: linear-gradient(180deg, rgba(13, 17, 26, 0) 0%, rgba(13, 17, 26, .94) 42%, #0d111a 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#cart .d-flex.justify-content-between.md-md-0 > .btn {
  flex: 1 1 auto;
  padding: .95rem 1.2rem !important;
  border-radius: 16px !important;
  font-size: 1.04rem !important;
  letter-spacing: .01em;
  color: transparent !important;   /* прячем родное «Купить»… */
  position: relative;
}
#cart .d-flex.justify-content-between.md-md-0 > .btn::after {
  content: "К оформлению";          /* …и показываем дух spirit */
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800;
}
#cart .d-flex.justify-content-between.md-md-0 > a { flex: 0 0 auto; }

@media (max-width: 575.98px) {
  #cart .modal-dialog { max-width: 100%; }
  #cart .modal-content { border-radius: 20px 0 0 20px !important; }
  #cart .modal-content > .container-fluid::before, #cart .m-3.mt-4 { padding-left: 18px; padding-right: 18px; }
  #cart .col-lg-5 .mx-3 { margin-left: 18px !important; margin-right: 18px !important; }
  #cart .d-flex.justify-content-between.md-md-0 { padding: 14px 18px 16px; }
  #cart .profile-card .card-image { width: 84px; height: 84px; }
  #cart .profile-card .card-image img { max-height: 64px !important; }
  #cart .profile-card .input-group { width: 88px; }
  #cart .profile-card .d-flex.mb-4 { gap: 6px; }
  #cart .profile-card .my-auto.mx-2 { margin: 0 !important; }
  #cart .profile-card .fa-exchange-alt { font-size: .7rem; }
}

/* ==========================================================================
   10. ФОРМЫ
   ========================================================================== */
.form-control, .custom-select, input[type="text"], input[type="email"], input[type="number"],
input[type="tel"], input[type="password"], select, textarea {
  background-color: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 13px !important;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--text-dim) !important; opacity: .65; }
.form-control:focus, input:focus, select:focus, textarea:focus {
  background-color: rgba(255, 255, 255, .08) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .22) !important;
  color: #fff !important; outline: 0 !important;
}
label, .form-text { color: var(--text-dim) !important; }

/* поля с иконкой слева (ник, email, промокод) — единая «капсула» */
.input-group {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  border-radius: 13px;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.input-group:focus-within {
  border-color: var(--accent);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .22);
}
.input-group-text { background: transparent !important; border: 0 !important; color: var(--accent-2) !important; padding-right: 0 !important; }
.input-group .form-control { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.input-group .form-control:focus { background: transparent !important; box-shadow: none !important; }


/* ==========================================================================
   11. СПОСОБЫ ОПЛАТЫ (#payment-type)
   ========================================================================== */
#payment-type .modal-body { background: transparent !important; }
#payment-type .card, .card.mb-2.border-0.rounded-0 {
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: transform .25s, border-color .25s, background .25s, box-shadow .25s;
}
#payment-type .card:hover, .card.mb-2.border-0.rounded-0:hover {
  transform: translateY(-3px);
  border-color: var(--border-hi) !important;
  background: rgba(124, 92, 255, .12) !important;
  box-shadow: var(--glow) !important;
}
#payment-type .card .small, #payment-type .card p { color: var(--text-dim) !important; }


/* ==========================================================================
   12. ПОСЛЕДНИЕ ПОКУПКИ
   ========================================================================== */
#last-payments, #last-payments section, section#last-payments {
  background: var(--bg-2) !important;
  visibility: visible !important;
}
#last-payments .card {
  background: rgba(255, 255, 255, .035) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: transform .25s, border-color .25s;
  padding: .5rem 0;
}
#last-payments .card:hover { transform: translateY(-4px); border-color: var(--border-hi) !important; }
#last-payments img, .img-center { filter: drop-shadow(0 6px 16px rgba(124, 92, 255, .45)); }
#last-payments .card-footer { background: transparent !important; border: 0 !important; }

.owl-dot span { background: rgba(255, 255, 255, .22) !important; border-color: transparent !important; transition: .25s; }
.owl-dot.active span, .owl-dot.owl-dot-white.active > span { background: var(--grad) !important; box-shadow: 0 0 14px rgba(124, 92, 255, .8); }
.owl-nav button, .owl-nav [class*="owl-"] { color: var(--text) !important; }


/* ==========================================================================
   13. ИНСТРУКЦИЯ ПО ПОКУПКЕ
   ========================================================================== */
.main-instruction, #help { color: var(--text-dim) !important; }
.main-instruction h2, #help h2 { position: relative; display: inline-block; padding-bottom: 14px; color: #fff !important; }
.main-instruction h2::after, #help h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px;
  border-radius: 3px; background: var(--grad); box-shadow: 0 0 16px rgba(124, 92, 255, .8);
}
#help p.font-weight-bolder { color: #fff !important; }
#help .col-md-6 {
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 30px 32px !important;
  box-shadow: 0 24px 55px -32px rgba(0, 0, 0, .95);
}
.more-products h5 { color: #fff !important; }


/* ==========================================================================
   14. ПОДВАЛ
   ========================================================================== */
body footer.footer, body footer.bg-elegant-night {
  background: linear-gradient(180deg, #0c1017 0%, #070910 100%) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}
footer p, footer .small { color: var(--text-dim) !important; }
footer a:not(.btn), footer .seller-credentials, footer b.seller-credentials { color: var(--accent-2) !important; }
footer a:not(.btn):hover { color: #fff !important; }
.footer-brand img { filter: drop-shadow(0 0 16px rgba(124, 92, 255, .45)); }

/* --- Кнопки «Мы в Telegram / Discord / YouTube» --- */
#footer-social-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}

#footer-social-links::before {
  content: "Мы в социальных сетях:";
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: #fff !important;
  margin-bottom: 16px; /* отступ от заголовка до первой кнопки */
}

/* пространство между кнопками — через margin-bottom */
#footer-social-links .list-inline-item {
  display: block;
  margin: 0 0 18px 0 !important;
}

/* у последней кнопки убираем нижний отступ */
#footer-social-links .list-inline-item:last-child {
  margin-bottom: 0 !important;
}

#footer-social-links .btn,
#footer-social-links .btn-link {
  display: flex !important;
  align-items: center;
  gap: 14px;
  width: 300px;
  max-width: 100%;
  padding: 13px 48px 13px 13px !important;
  border-radius: 20px !important;
  border: 0 !important;
  color: #fff !important;
  text-decoration: none !important;
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .85);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, filter .28s;
}

/* белая плашка под иконку (как .social-icon в limbo) */
#footer-social-links .btn i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 13px;
  background: #fff;
  font-size: 23px;
}

/* подпись в две строки */
#footer-social-links .btn::after {
  content: "Мы в\A Telegram";
  white-space: pre-line;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: #fff;
  text-transform: none;
}

/* стрелка → справа */
#footer-social-links .btn::before {
  content: "";
  position: absolute;
  right: 17px;
  top: 50%;
  width: 24px;
  height: 20px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 21' fill='none'%3E%3Cpath d='M1 10.5H25M25 10.5L15.1176 1M25 10.5L15.1176 20' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .28s ease;
}
#footer-social-links .btn:hover::before { transform: translateY(-50%) translateX(5px); }

/* фирменные цвета сетей */
#footer-social-links .btn-twitter      { background: linear-gradient(60deg, #2AABEE, #229ED9) !important; }
#footer-social-links .btn-twitter i    { color: #229ED9; }
#footer-social-links .btn-dribbble     { background: #5865F2 !important; }
#footer-social-links .btn-dribbble i   { color: #5865F2; }
#footer-social-links .btn-dribbble::after { content: "Мы в\A Discord"; }
#footer-social-links .btn-google-plus  { background: #FF0000 !important; }
#footer-social-links .btn-google-plus i { color: #FF0000; }
#footer-social-links .btn-google-plus::after { content: "Мы в\A YouTube"; }

#footer-social-links .btn:hover {
  transform: translateY(-4px);
  filter: brightness(1.08) saturate(1.05);
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .9);
  color: #fff !important;
}
#footer-social-links .btn:active { transform: translateY(-1px) scale(.99); }

@media (min-width: 576px) {
  #footer-social-links { align-items: flex-end; }
}


/* ==========================================================================
   15. МЕЛОЧИ: загрузка, скелетоны, дропдауны, тултипы, мониторинг
   ========================================================================== */
.stripe-loading-indicator { height: 3px !important; background: transparent !important; }
html .stripe-loading-indicator .stripe, html .stripe-loading-indicator .stripe-loaded {
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent)) !important;
  background-size: 200% 100%; animation: fac-slide 1.2s linear infinite;
}
@keyframes fac-slide { from { background-position: 0% 0; } to { background-position: 200% 0; } }

.skeleton-box { background: #1a2130 !important; }
.skeleton-box::after {
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(124,92,255,.16) 25%, rgba(34,211,238,.2) 55%, rgba(255,255,255,0) 100%) !important;
}

.dropdown-menu {
  background-color: #121723 !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .9) !important;
  padding: .4rem !important;
}
.dropdown-item { color: var(--text-dim) !important; border-radius: 9px; }
.dropdown-item:hover, .dropdown-item.active { background: rgba(124, 92, 255, .18) !important; color: #fff !important; }

.tooltip-inner { background: #1b2231 !important; color: #fff !important; border-radius: 10px !important; }
.bs-tooltip-top .arrow::before { border-top-color: #1b2231 !important; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: #1b2231 !important; }

.monitor { background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--border); border-radius: 16px; }
.progress { background: rgba(255, 255, 255, .08) !important; }
.progress-bar { background: var(--grad) !important; box-shadow: 0 0 14px rgba(124, 92, 255, .7); }

.table { color: var(--text) !important; }
.table td, .table th { border-color: var(--border) !important; }
.list-group-item { background: rgba(255, 255, 255, .03) !important; border-color: var(--border) !important; color: var(--text) !important; }
hr { border-color: var(--border) !important; }
.apple-pay, .google-pay { border-color: var(--border) !important; filter: invert(1) brightness(1.5); }


/* ==========================================================================
   16. ДОСТУПНОСТЬ + МОБИЛЬНЫЕ
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .shop-name { animation: none !important; }
}

@media (max-width: 991.98px) {
  .shop-name, h1.display-1.shop-name { font-size: 2.4rem !important; }
  .shop-description { font-size: 1.05rem !important; }
  .product-card:hover { transform: none; }
  #help .col-md-6 { padding: 22px 20px !important; }
  .alert { width: calc(100% - 20px) !important; left: 10px !important; right: 10px !important; }
  .category { font-size: 14px !important; }
}

@media (max-width: 575.98px) {
  .shop-name, h1.display-1.shop-name { font-size: 1.9rem !important; }
  .product-card .card-body h4 { font-size: 1.12rem !important; }
  .general-online p > span { font-size: .78rem; padding: .35rem .9rem !important; }
  .basket-button { width: 46px !important; height: 46px !important; line-height: 46px !important; }
}


/* ==========================================================================
   17. ПОДРОБНОСТИ О ТОВАРЕ (модалка) — фикс цвета текста при наведении
   --------------------------------------------------------------------------
   Задача: при открытии окна «Подробнее о товаре» наведение курсора на текст
   НЕ должно менять его цвет. Кнопки — исключение, у них своя логика.
   ========================================================================== */

/* --- Заголовки в модалках: hover не перекрашивает --- */
.modal .modal-content h1:hover,
.modal .modal-content h2:hover,
.modal .modal-content h3:hover,
.modal .modal-content h4:hover,
.modal .modal-content h5:hover,
.modal .modal-content h6:hover,
.modal .modal-content .h1:hover,
.modal .modal-content .h2:hover,
.modal .modal-content .h3:hover,
.modal .modal-content .h4:hover,
.modal .modal-content .h5:hover,
.modal .modal-content .h6:hover {
  color: var(--text) !important;
  transition: none !important;
}

/* --- Абзацы и приглушённый текст --- */
.modal .modal-content p:hover,
.modal .modal-content small:hover,
.modal .modal-content .small:hover,
.modal .modal-content .text-muted:hover,
.modal .modal-content .text-light:hover,
.modal .modal-content .text-secondary:hover {
  color: var(--text-dim) !important;
  transition: none !important;
}

/* --- Тёмный/чёрный текст (тема иногда перекрашивает его в синий на hover) --- */
.modal .modal-content .text-black:hover,
.modal .modal-content .text-dark:hover,
.modal .modal-content .text-black *:hover,
.modal .modal-content .text-dark *:hover {
  color: var(--text) !important;
  transition: none !important;
}

/* --- Обычные span/div/li/b/strong/label — без transition на цвет --- */
.modal .modal-content span:hover,
.modal .modal-content div:hover,
.modal .modal-content li:hover,
.modal .modal-content b:hover,
.modal .modal-content strong:hover,
.modal .modal-content em:hover,
.modal .modal-content i:hover,
.modal .modal-content label:hover,
.modal .modal-content ul:hover,
.modal .modal-content ol:hover {
  transition: none !important;
}

/* --- Ссылки (не кнопки) в модалке: всегда один и тот же цвет --- */
.modal .modal-content a:not(.btn),
.modal .modal-content a:not(.btn):hover,
.modal .modal-content a:not(.btn):focus,
.modal .modal-content a:not(.btn):active,
.modal .modal-content a.text-dark:hover,
.modal .modal-content a.text-black:hover {
  color: var(--accent-2) !important;
  transition: none !important;
}

/* --- Кнопки — наоборот, всегда сохраняют белый текст на hover --- */
.modal .modal-content .btn,
.modal .modal-content .btn:hover,
.modal .modal-content .btn:focus,
.modal .modal-content .btn:active,
.modal .modal-content .btn.active {
  color: #fff !important;
}
.modal .modal-content .btn i,
.modal .modal-content .btn svg,
.modal .modal-content .btn:hover i,
.modal .modal-content .btn:hover svg {
  color: #fff !important;
  fill: #fff !important;
}

/* --- Хлебные крошки / бейджи / счётчики количества в модалке --- */
.modal .modal-content .badge:hover,
.modal .modal-content .cart-counter:hover {
  color: inherit !important;
  transition: none !important;
}

/* --- Специфично для окна подробностей: любые элементы с текстом --- */
#product-modal .text-muted:hover,
#product-modal .text-dark:hover,
#product-modal .text-black:hover,
#product-modal p:hover,
#product-modal span:hover,
#product-modal div:hover,
#product-modal li:hover,
#product-modal h1:hover,
#product-modal h2:hover,
#product-modal h3:hover,
#product-modal h4:hover,
#product-modal h5:hover,
#product-modal h6:hover,
#product .text-muted:hover,
#product .text-dark:hover,
#product .text-black:hover,
#product p:hover,
#product span:hover,
#product div:hover,
#product li:hover,
#product h1:hover,
#product h2:hover,
#product h3:hover,
#product h4:hover,
#product h5:hover,
#product h6:hover,
#product-info .text-muted:hover,
#product-info .text-dark:hover,
#product-info .text-black:hover,
#product-info p:hover,
#product-info span:hover,
#product-info div:hover,
#product-info h1:hover,
#product-info h2:hover,
#product-info h3:hover,
#product-info h4:hover,
#product-info h5:hover,
#product-info h6:hover {
  transition: none !important;
}


/* ==========================================================================
   КОНЕЦ · facsmp-ice.css
   ========================================================================== */