@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@300;400;600;700&display=swap');

/* ============================================================
   SNOW RUST — ХОЛОДНАЯ ТЕМА ДЛЯ RED BLACK
   ============================================================ */

:root[data-theme=red_black] {
    /* ===== ОСНОВНЫЕ ЦВЕТА — ХОЛОДНЫЕ ===== */
    --accent-color-800: #2a5f8a;      /* Основной синий */
    --accent-color-900: #1a3f5a;      /* Тёмный синий */

    --font-color-700: #e8f0f8;        /* Светло-голубой */
    --font-color-800: #8ab0d0;        /* Мягкий голубой */
    --font-color-900: #4a6a8a;        /* Приглушённый синий */

    --bg-color-800: #0f1e2e;          /* Тёмно-синий */
    --bg-color-700: #0a1624;          /* Глубокий тёмный */
    --bg-color-900: #060e18;          /* Почти чёрный */

    --background-color: #050a12;      /* Фон */
    --product-items-trans-bg-color: rgba(42, 95, 138, 0.15);

    /* ===== ШРИФТЫ ===== */
    --default-font-family: 'Rajdhani', sans-serif;
    --title-font-family: 'Orbitron', sans-serif;
}

/* ============================================================
   ГЛОБАЛЬНЫЕ НАСТРОЙКИ
   ============================================================ */
:root {
    --safe-padding: 12px;
    --default-border-radius: 14px;
    --default-font-size: 15px;

    --title-font-size: 22px;
    --title-font-weight: 700;

    --price-font-size: 20px;
}

/* ============================================================
   ШАПКА
   ============================================================ */
.Header-module__logo {
    font-family: var(--title-font-family) !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, #ffffff 0%, #7fc3ff 40%, #4a90d9 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 40px rgba(74,144,217,0.15) !important;
}

.Header-module__wrapper {
    background: rgba(10, 22, 36, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(74,144,217,0.1) !important;
    min-height: 70px;
    margin-bottom: var(--safe-padding);
    border-radius: 0 0 20px 20px !important;
}

/* ============================================================
   КАРТОЧКИ ТОВАРОВ
   ============================================================ */
.Product-module__wrapper {
    background: rgba(15, 30, 46, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(74,144,217,0.06) !important;
    border-radius: var(--default-border-radius) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.Product-module__wrapper:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(74,144,217,0.2) !important;
    box-shadow: 0 12px 40px rgba(74,144,217,0.05) !important;
}

.Product-module__name {
    font-family: var(--default-font-family) !important;
    font-weight: 600 !important;
    color: var(--font-color-700) !important;
    text-align: center;
}

/* ============================================================
   ЦЕНЫ
   ============================================================ */
.Product-module__price {
    font-family: var(--title-font-family) !important;
    font-weight: 700 !important;
    font-size: var(--price-font-size) !important;
    color: #7fc3ff !important;
    text-shadow: 0 0 30px rgba(74,144,217,0.1) !important;
    background: transparent !important;
    top: 10px;
    left: 10px;
}

/* ============================================================
   КНОПКИ
   ============================================================ */
.Button-module__btn.Button-module__accent {
    background: linear-gradient(135deg, #1a4b7a, #2d7dd2) !important;
    border-radius: 60px !important;
    font-family: var(--title-font-family) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 25px rgba(45,125,210,0.2) !important;
    transition: all 0.3s ease !important;
}

.Button-module__btn.Button-module__accent:hover {
    transform: scale(1.04) !important;
    box-shadow: 0 8px 40px rgba(45,125,210,0.35) !important;
}

/* ============================================================
   КАТЕГОРИИ
   ============================================================ */
.Categories-module__category {
    background: rgba(10, 22, 36, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(74,144,217,0.06) !important;
    border-radius: 60px !important;
    font-family: var(--default-font-family) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--font-color-800) !important;
    transition: all 0.3s ease !important;
    text-align: center;
    flex: 1;
}

.Categories-module__category:hover {
    background: rgba(74,144,217,0.08) !important;
    border-color: #4a90d9 !important;
    color: var(--font-color-700) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================
   МОНИТОРИНГ СЕРВЕРА
   ============================================================ */
.MonitoringServer-module__wrapper {
    background: rgba(10, 22, 36, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(74,144,217,0.06) !important;
    border-radius: var(--default-border-radius) !important;
    padding: var(--safe-padding);
}

.MonitoringServer-module__progressBarAnim {
    background: linear-gradient(90deg, #1a4b7a, #4a90d9) !important;
    border-radius: 10px !important;
}

.MonitoringServer-module__progressBarWrapper {
    background-color: var(--bg-color-800) !important;
    border-radius: 10px !important;
    height: 12px;
}

/* ============================================================
   ФУТЕР
   ============================================================ */
.DesktopCopyright-module__wrapper {
    background-color: transparent !important;
    font-family: var(--default-font-family) !important;
    font-size: 13px !important;
    color: var(--font-color-900) !important;
}

.DesktopCopyright-module__link {
    color: var(--font-color-800) !important;
    transition: color 0.3s ease !important;
}

.DesktopCopyright-module__link:hover {
    color: var(--font-color-700) !important;
}

/* ============================================================
   ВИДЖЕТЫ
   ============================================================ */
.Widgets-module__customWidgetWrapper .boxBody {
    background: rgba(10, 22, 36, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(74,144,217,0.06) !important;
    border-radius: var(--default-border-radius) !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    max-height: 84px;
    transition: all 0.3s ease !important;
}

.Widgets-module__customWidgetWrapper .boxBody:hover {
    transform: scale(0.97) !important;
    border-color: rgba(74,144,217,0.15) !important;
}

.Widgets-module__widgetPrefix {
    background: var(--accent-color-800) !important;
    border-radius: var(--default-border-radius) !important;
    padding: var(--safe-padding);
    font-weight: 700 !important;
    color: var(--font-color-700) !important;
}

/* ============================================================
   БАЛАНС
   ============================================================ */
.PlayerBalance-module__btn {
    background: rgba(10, 22, 36, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(74,144,217,0.06) !important;
    border-radius: 60px !important;
    font-family: var(--title-font-family) !important;
    font-weight: 700 !important;
    color: #7fc3ff !important;
    transition: all 0.3s ease !important;
}

.PlayerBalance-module__btn:hover {
    border-color: rgba(74,144,217,0.2) !important;
    box-shadow: 0 0 30px rgba(74,144,217,0.05) !important;
}

/* ============================================================
   МОДАЛЬНЫЕ ОКНА
   ============================================================ */
.ModalLayout-module__positionWrapper {
    background: rgba(0,0,0,0.85) !important;
    backdrop-filter: blur(12px) !important;
}

.boxHeader {
    background: var(--bg-color-900) !important;
    border-radius: var(--default-border-radius) var(--default-border-radius) 0 0 !important;
    font-family: var(--title-font-family) !important;
    font-weight: 700 !important;
}

.boxFooter {
    background: var(--bg-color-900) !important;
    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius) !important;
}

/* ============================================================
   БОНУСЫ ПРИ ПОПОЛНЕНИИ
   ============================================================ */
.PlayerBalanceModal-module__bonusContainer {
    background-color: var(--bg-color-700) !important;
    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius) !important;
    padding: var(--safe-padding);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.PlayerBalanceModal-module__bonusItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--bg-color-800);
    border-radius: var(--default-border-radius);
    border-left: 3px solid var(--accent-color-800);
}

.PlayerBalanceModal-module__bonusPercent {
    font-family: var(--title-font-family) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #7fc3ff !important;
}

.PlayerBalanceModal-module__bonusAmount {
    color: var(--font-color-800);
    font-size: 16px;
}

/* ============================================================
   ПРОФИЛЬ
   ============================================================ */
.ProfileNav-module__body.boxBody {
    background: var(--bg-color-700) !important;
    border-radius: var(--default-border-radius) !important;
    gap: var(--safe-padding);
}

.ProfileNav-module__navItem {
    background: var(--bg-color-900) !important;
    border-radius: var(--default-border-radius) !important;
    font-family: var(--default-font-family) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.ProfileNav-module__navItem:hover {
    background: var(--accent-color-800) !important;
    color: var(--font-color-700) !important;
}

.ProfileContent-module__body.boxBody {
    background: var(--bg-color-700) !important;
    border-radius: var(--default-border-radius) !important;
}

.ProfileContent-module__box {
    background-color: var(--bg-color-800) !important;
    border-radius: var(--default-border-radius) !important;
}

/* ============================================================
   КОРЗИНА И ИСТОРИЯ
   ============================================================ */
.BasketContent-module__wrapper .boxBody,
.HistoryContent-module__wrapper .boxBody {
    background: var(--bg-color-700) !important;
    border-radius: var(--default-border-radius) !important;
}

.BasketTable-module__tableHeader,
.HistoryTable-module__tableHeader {
    background: var(--bg-color-800) !important;
    border-radius: var(--default-border-radius) !important;
    font-family: var(--default-font-family) !important;
    font-weight: 600 !important;
}

.BasketTable-module__tableLine,
.HistoryTable-module__tableLine {
    border-radius: var(--default-border-radius) !important;
}

/* ============================================================
   СКРОЛЛ
   ============================================================ */
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background: var(--background-color);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-color-900), var(--accent-color-800));
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color-800);
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 980px) {
    .container.swiperContainer {
        display: none;
    }
    .resources-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 680px) {
    .resources-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .Product-module__price {
        font-size: 16px !important;
    }
}
.Header-module__logo img {
    max-height: 50px !important;    /* Высота лого — 50px (подбери под свой вкус) */
    width: auto !important;          /* Ширина автоматически */
    object-fit: contain !important;  /* Чтобы картинка не сжималась */
    display: block !important;
}

/* 2. Если картинка всё равно огромная — ограничиваем контейнер */
.Header-module__logoWrapper {
    max-width: 250px !important;
    display: flex !important;
    align-items: center !important;
}

/* 3. Уменьшаем саму шапку (чтобы не жрала место) */
.Header-module__wrapper {
    min-height: 70px !important;
    padding: 10px 20px !important;
}

/* 4. Чтобы лого не разъезжался на мобилках */
@media (max-width: 680px) {
    .Header-module__logo img {
        max-height: 35px !important;
    }
    .Header-module__logoWrapper {
        max-width: 150px !important;
    }
}