@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* ========================================================= */
/* --- 1. ЭФФЕКТ СТЕКЛА И УДАЛЕНИЕ ГЛУХИХ ФОНОВ --- */
/* ========================================================= */
body, html, #root, .wrapper, [class*="Index-module__wrapper"], [class*="App-module__"] {
    background: transparent !important;
    background-color: transparent !important;
}

[class*="Shop-module__wrapper"], 
aside > div,
section[class*="Widgets-module__widgetWrapper"],
.navbar, 
[class*="Header-module__wrapper"], 
.footer,
.dropdown-menu {
    background-color: rgba(25, 25, 25, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: none !important;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4) !important;
}

/* Делаем внутренние блоки магазина и виджетов прозрачными, чтобы фон светился */
aside, 
[class*="Widgets-module__wrapper"],
.xbox, .xbox__header, .xbox__body, .xbox__footer,
[class*="MonitoringWidget-module__header"],
[class*="MonitoringWidget-module__body"],
[class*="MonitoringWidget-module__footer"],
[class*="MonitoringWidget-module__updatingLoaderWrapper"],
[class*="MonitoringServer-module__wrapper"],
[class*="Shop-module__wrapper"] .boxHeader,
[class*="Shop-module__wrapper"] .boxBody,
[class*="Shop-module__wrapper"] .boxFooter,
section[class*="Widgets-module__widgetWrapper"] .boxHeader,
section[class*="Widgets-module__widgetWrapper"] .boxBody,
section[class*="Widgets-module__widgetWrapper"] .boxFooter {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ========================================================= */
/* --- 2. БАЗОВЫЕ НАСТРОЙКИ (Шрифты, Отступы, Кнопки) --- */
/* ========================================================= */
body { font-family: "Roboto Condensed", sans-serif; font-size: 17px; font-weight: normal; color: rgba(255, 250, 234, 0.85); margin: 0; padding: 0; border-width: 0; }

.xbox__header { padding: 20px 20px 0 20px; border-radius: 0 }
.xbox__body { padding: 19px 20px 20px }
.xbox_store .xbox__body { padding: 20px }
.xbox_store .xbox__header { padding: 0px 20px }
.xbox_widget_stats .xbox__header { padding: 20px 20px 18px 20px }
.xbox__footer { padding: 20px; border-radius: 0 }

.topbar { position: absolute; display: block; top: 0; left: 0; right: 0; z-index: 1000 }
.navbar-brand { display: none }
.header__image { margin-top: 56px; margin-bottom: 20px }
.navbar .navbar-nav .nav-link:focus, .navbar .navbar-nav .nav-link:hover { color: #E60000; border-bottom: solid 1px #E60000 }
.dropdown-item { color: #a09f9d }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(255, 255, 255, 0.05); color: #a09f9d }

.btn { padding: 0.5rem 0.8rem 0.5rem 0.8rem; font-family: inherit; border-radius: 0; font-size: 1.125rem; font-weight: bold; }
.btn-success { background: #E60000 !important; border: solid 1px #E60000 !important; color: #fff !important; text-transform: uppercase; font-weight: bold; opacity: 1 !important;}
.btn-success:hover, .btn-success:active, .btn-success:focus { opacity: 0.8; background: #92000A !important; border: solid 1px #92000A !important; color: #fff !important; box-shadow: none; }
.btn-success:disabled, .btn-success.disabled { opacity: 0.5; background-color: #92000A !important; border-color: #92000A !important; }

.bg-success { background-color: #E60000 !important }
.progress-bar[aria-valuemax="0"] { width: 100%; background-color: #92000A !important }
.progress { background: rgba(255, 255, 255, 0.2) !important; border-radius: 0; display: flex; overflow: hidden; font-size: 0.75rem; line-height: 1rem; text-align: center; }
.progress-bar { background-color: #E60000 !important; background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent) !important; background-size: 1rem 1rem !important; height: 1.125rem }

.btn-secondary.active, .btn-secondary:active, .show > .btn-secondary.dropdown-toggle, .nav-pills .nav-link.active, .nav-pills .nav-link:focus, .nav-pills .nav-link:hover { color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .2) }
.btn-primary { color: #fff; background-color: #92000A; border: solid 1px #92000A }
.btn-primary:hover, .btn-primary:focus { color: #fff; background-color: #E60000; border: solid 1px #E60000; opacity: 0.8 }

a { color: #E60000; transition: 0.2s }
a:hover, a:focus { color: #ff4d4d; transition: 0.2s }

/* ========================================================= */
/* --- 3. ШАПКА САЙТА (ИКОНКИ И БЕЛЫЙ ТЕКСТ) --- */
/* ========================================================= */
div[class*="Header-module__"] a, div[class*="Header-module__"] span, div[class*="Header-module__"] button, div[class*="Header-module__balance"], div[class*="Header-module__Right"] span, div[class*="Header-module__Right"] div, .navbar-nav .nav-link, header a, header span, .topbar a, .topbar span { color: #ffffff !important; text-transform: uppercase !important; font-weight: bold !important; font-size: 14px !important; letter-spacing: 0.5px !important; text-decoration: none !important; opacity: 1 !important; }
div[class*="Header-module__"] a:hover, .navbar-nav .nav-link:hover, header a:hover { color: #E60000 !important; }
div[class*="Header-module__"] a i, header a i, div[class*="Header-module__"] svg { display: none !important; }
div[class*="Header-module__"] a::before, .navbar-nav .nav-link::before, header a::before, div[class*="Header-module__balance"]::before, a[href*="profile"]::before { font-family: "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 900 !important; margin-right: 6px !important; font-size: 15px !important; display: inline-block; content: ""; }
a[href="/"]::before, a[href*="products"]::before { content: "\f07a" !important; }
a[href*="about"]::before { content: "\f05a" !important; }
a[href*="rules"]::before { content: "\f0e3" !important; }
a[href*="support"]::before { content: "\f0e0" !important; }
a[href*="vk."]::before { font-family: "Font Awesome 5 Brands", "FontAwesome" !important; font-weight: 400 !important; content: "\f189" !important; }
a[href*="t.me"]::before { font-family: "Font Awesome 5 Brands", "FontAwesome" !important; font-weight: 400 !important; content: "\f2c6" !important; }
a[href*="discord"]::before { font-family: "Font Awesome 5 Brands", "FontAwesome" !important; font-weight: 400 !important; content: "\f392" !important; }
div[class*="Header-module__balance"]::before, a[href*="pay"]::before { content: "\f0fe" !important; }

/* ========================================================= */
/* --- 4. КНОПКИ КАТЕГОРИЙ (ФИЛЬТРЫ) И ПОИСК --- */
/* ========================================================= */
.store-categories, div[class*="Categories-module__"], div[class*="Category"] { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; margin-bottom: 15px !important; width: 100% !important; }
.store-categories .btn, .store-categories .btn-secondary, div[class*="Categories-module__"] button, div[class*="Category"] button { background-color: rgba(255, 255, 255, 0.07) !important; color: #ffffff !important; border-radius: 0 !important; border: none !important; text-transform: uppercase !important; padding: 4px 8px !important; font-size: 12px !important; letter-spacing: 0.5px !important; font-weight: bold !important; margin: 0 !important; transition: 0.2s !important; }
.store-categories .btn:hover, .store-categories .btn-secondary:hover, div[class*="Categories-module__"] button:hover { background-color: #92000A !important; color: #fff !important; }
.store-categories .btn.active, .store-categories .btn-secondary.active, div[class*="Categories-module__"] button[class*="active"], div[class*="Categories-module__"] button[style*="background"] { background-color: #E60000 !important; color: #fff !important; }

input[class*="Search"], .form-control { border-radius: 0 !important; background-color: rgba(0, 0, 0, 0.4) !important; color: #fff !important; border: none !important; height: 36px !important; font-size: 13px !important; }
button[class*="Search"], .input-group-addon { border-radius: 0 !important; background-color: #d9534f !important; color: #fff !important; border: none !important; height: 36px !important; }

/* ========================================================= */
/* --- 5. СЕТКА ТОВАРОВ И АНИМАЦИЯ --- */
/* ========================================================= */
.Products-module__wrapper, .store-products { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    justify-content: center !important; 
    gap: 20px !important; 
    padding: 0 !important; 
    margin: 25px 0 0 0 !important; 
}

.store-products__item, [class*="Product-module__wrapper"] { 
    background-color: rgba(255, 255, 255, 0.05) !important; 
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 8px 2px !important; 
    border-radius: 0 !important; 
    border: none !important; 
    position: relative !important; 
    transition: all 0.2s !important; 
    overflow: hidden !important; 
    display: block !important; 
    width: calc(20% - 16px) !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    aspect-ratio: 1 / 1 !important; 
    flex-shrink: 0 !important; 
}

@media (max-width: 1199px) { .store-products__item, [class*="Product-module__wrapper"] { width: calc(25% - 15px) !important; } }
@media (max-width: 991px) { .store-products__item, [class*="Product-module__wrapper"] { width: calc(25% - 15px) !important; } }
@media (max-width: 767px) { 
    .Products-module__wrapper, .store-products { gap: 15px !important; margin: 15px 0 0 0 !important; } 
    .store-products__item, [class*="Product-module__wrapper"] { width: calc(33.333% - 10px) !important; } 
}
@media (max-width: 479px) { 
    .Products-module__wrapper, .store-products { gap: 10px !important; margin: 10px 0 0 0 !important; } 
    .store-products__item, [class*="Product-module__wrapper"] { width: calc(50% - 5px) !important; } 
}

.store-products__item:hover, [class*="Product-module__wrapper"]:hover { transform: scale(1.08) !important; z-index: 10 !important; }

.Products-module__wrapper img, .store-products img { 
    position: absolute !important; 
    top: 50% !important; 
    left: 50% !important; 
    transform: translate(-50%, -50%) !important; 
    width: 119px !important; 
    height: 119px !important; 
    max-width: 100% !important; 
    max-height: 100% !important; 
    object-fit: contain !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    filter: contrast(0.85) saturate(0.9) brightness(0.85) !important; 
    transition: all 0.2s !important; 
    display: block !important; 
}
.store-products__item:hover img, [class*="Product-module__wrapper"]:hover img { 
    filter: none !important; 
    transform: translate(-50%, -50%) scale(1.1) !important; 
}

.Product-module__price, .product__price, [class*="Product-module__price"] { position: absolute !important; top: 0 !important; left: 0 !important; background-color: rgba(255, 255, 255, 0.1) !important; padding: 2px 5px !important; color: rgba(242, 239, 229, 0.75) !important; font-size: 14px !important; font-weight: 500 !important; z-index: 2 !important; transition: 0.2s !important; border-radius: 0 !important; }
[class*="Product-module__wrapper"]:hover [class*="Product-module__price"], .product:hover .product__price { color: rgba(242, 239, 229, 1) !important; }

.Product-module__count, .product__quantity, [class*="Product-module__count"] { position: absolute !important; right: 3px !important; bottom: 3px !important; background-color: rgba(0, 0, 0, 0.25) !important; color: rgba(242, 239, 229, 0.7) !important; padding: 0 5px !important; font-size: 14px !important; font-weight: 500 !important; z-index: 1 !important; transition: opacity 0.2s !important; border-radius: 0 !important; }
[class*="Product-module__wrapper"]:hover [class*="Product-module__count"], .product:hover .product__quantity { opacity: 0 !important; }

.Product-module__name, .product__name, [class*="Product-module__name"] { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; background-color: rgba(25, 25, 25, 0.85) !important; color: #ffffff !important; font-size: 12px !important; font-weight: bold !important; text-align: center !important; padding: 6px 5px !important; opacity: 0 !important; transform: translateY(100%) !important; transition: all 0.2s ease-in-out !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; z-index: 10 !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 28px !important; }
[class*="Product-module__wrapper"]:hover [class*="Product-module__name"], .product:hover .product__name, .store-products__item:hover .product__name { opacity: 1 !important; transform: translateY(0) !important; }

/* ========================================================= */
/* --- 6. ЗАГОЛОВКИ ПАНЕЛЕЙ --- */
/* ========================================================= */
.xbox_monitoring .xbox__header h4, [class*="Widget-module__header"] { text-align: center !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 1.25rem !important; letter-spacing: 0.5px !important; margin: 0 auto !important; display: block !important; width: 100% !important; }

/* ========================================================= */
/* --- 7. ОБЩИЙ ДИЗАЙН МОДАЛЬНОГО ОКНА --- */
/* ========================================================= */
div[class*="ModalLayout-module__positionWrapper"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

div[class*="ModalLayout-module__modal"] {
    background: #363636 !important;
    background-color: #363636 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 50px rgba(0,0,0,0.9) !important;
    margin: auto !important;
    width: 100% !important;
    overflow: hidden !important;
}

div[class*="ModalLayout-module__modal"] .boxHeader {
    background: #444444 !important;
    background-color: #444444 !important;
    padding: 15px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-bottom: none !important;
}
div[class*="ModalLayout-module__modal"] .boxHeader div,
div[class*="ModalLayout-module__modal"] .boxHeader span,
div[class*="ModalLayout-module__modal"] .boxHeader h4 {
    text-align: center !important;
    width: 100% !important;
    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

div[class*="ModalLayout-module__modal"] .boxBody {
    background: #363636 !important;
    background-color: #363636 !important;
    padding: 20px !important;
    text-align: center !important;
}

div[class*="ModalLayout-module__modal"] input,
div[class*="ModalLayout-module__modal"] select,
div[class*="ModalLayout-module__modal"] button[class*="btn-outline-secondary"],
div[class*="ModalLayout-module__modal"] .input-group-append button,
div[class*="ModalLayout-module__modal"] .input-group-prepend button {
    background: #2c2c2c !important;
    background-color: #2c2c2c !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: bold !important;
}
div[class*="ModalLayout-module__modal"] select { border: 1px solid #444444 !important; }

div[class*="ModalLayout-module__modal"] .bg-danger,
div[class*="ModalLayout-module__modal"] .input-group-prepend .input-group-text,
div[class*="ModalLayout-module__modal"] .input-group-prepend span {
    background: #d9534f !important;
    background-color: #d9534f !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: 900 !important;
}

div[class*="ModalLayout-module__modal"] label,
div[class*="ModalLayout-module__modal"] strong {
    color: #e0e0e0 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    display: block !important;
    text-align: left !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
}

/* ИНСТРУКЦИЯ И ОПИСАНИЕ ТОВАРА (ОДИНАКОВЫЙ ЖИРНЫЙ ШРИФТ И БЕЛЫЙ ЦВЕТ) */
div[class*="ModalLayout-module__modal"] p,
div[class*="ModalLayout-module__modal"] .text-danger,
div[class*="ModalLayout-module__modal"] span[style*="color"] {
    color: #ffffff !important;
    font-family: "Roboto Condensed", sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-top: 15px !important;
    display: block !important;
}

div[class*="ModalLayout-module__modal"] .boxFooter {
    background: #444444 !important;
    background-color: #444444 !important;
    padding: 15px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    border-top: none !important;
}
div[class*="ModalLayout-module__modal"] .boxFooter button {
    border-radius: 0 !important;
    text-transform: uppercase !important;
    padding: 9px 18px !important;
    font-weight: 900 !important;
    font-size: 15px !important;
}
div[class*="ModalLayout-module__modal"] .boxFooter button:first-child {
    background: #2c2c2c !important;
    background-color: #2c2c2c !important;
    color: #b0b0b0 !important;
    border: 1px solid #222222 !important;
}
div[class*="ModalLayout-module__modal"] .boxFooter button:last-child {
    background: #d9534f !important;
    background-color: #d9534f !important;
    color: #ffffff !important;
    border: none !important;
}

/* ========================================================= */
/* --- 8. ОДИНОЧНОЕ ОРУЖИЕ --- */
/* ========================================================= */
div[class*="ModalLayout-module__modal"]:not([data-modalproducttype="set"]) {
    max-width: 460px !important;
}
div[class*="ModalLayout-module__modal"]:not([data-modalproducttype="set"]) .boxBody img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    margin: 0 auto 20px auto !important;
    max-width: 100% !important;
    max-height: 230px !important;
    width: auto !important;
    height: auto !important;
    filter: none !important;
}

/* ========================================================= */
/* --- 9. НАБОРЫ (КИТЫ) --- */
/* ========================================================= */

/* Расширяем окно набора */
div[class*="ModalLayout-module__modal"][data-modalproducttype="set"] {
    max-width: 650px !important;
    width: 100% !important;
}

/* 1. Главный контейнер сетки (первый div внутри boxBody) */
div[data-modalproducttype="set"] .boxBody > div:first-child {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    width: 100% !important;
}

/* 2. ПРОБИВАЕМ невидимые пустые обертки React */
div[data-modalproducttype="set"] .boxBody > div:first-child > div {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Сама карточка предмета (серый квадрат) */
div[data-modalproducttype="set"] .boxBody > div:first-child > div > div {
    background-color: #444444 !important;
    border: none !important;
    border-radius: 4px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important; 
    padding: 10px !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* 4. Картинка предмета в центре карточки */
div[data-modalproducttype="set"] .boxBody > div:first-child > div > div > img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 80% !important;
    max-height: 80% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    object-fit: contain !important;
}

/* 5. ПОЛНОСТЬЮ СКРЫВАЕМ НАЗВАНИЕ ПРЕДМЕТА */
div[data-modalproducttype="set"] span[class*="itemName"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    font-size: 0 !important;
    position: absolute !important;
    z-index: -999 !important;
}

/* 6. Количество */
div[data-modalproducttype="set"] [class*="itemCount"] {
    position: absolute !important;
    bottom: 5px !important;
    right: 5px !important;
    left: auto !important; /* Убираем привязку слева */
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    line-height: 1 !important;
    z-index: 2 !important;
    display: block !important;
    text-align: right !important;
}

/* Адаптивность для телефонов */
@media (max-width: 767px) {
    div[data-modalproducttype="set"] .boxBody > div:first-child {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
@media (max-width: 479px) {
    div[data-modalproducttype="set"] .boxBody > div:first-child {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ========================================================= */
/* --- 10. УДАЛЕНИЕ КНОПКИ RED HAZE И СДВИГ ВЛЕВО --- */
/* ========================================================= */
h1[class*="Header-module__logoWrapper"] {
    display: none !important;
}

nav[class*="Header-module__navWrapper"],
nav[class*="Header-module__nav"] {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
}