/* === ПОЛНЫЙ СТИЛЬ HYPEWORLD НА ОСНОВЕ ВАШЕГО РАБОЧЕГО КОДА (ФИКС КАРТОЧЕК) === */

:root {
    /* Переопределяем встроенные цвета темы Limbo */
    --white: #f3f4f6 !important;
    --black: #0d0e12 !important;
    --shade: #15161e !important;

    /* Фирменные переменные HypeWorld */
    --bg-color: #0d0e12 !important;
    --card-bg: #15161e !important;
    --accent-blue: #3b82f6 !important;
    --accent-hover: #2563eb !important;
    --text-main: #f3f4f6 !important;
    --text-muted: #9ca3af !important;
    --border-color: rgba(255, 255, 255, 0.06) !important;
}

/* 1. Отключаем фоновые картинки ТОЛЬКО у системных блоков сайта */
body, #app, .wrapper, .main-layout, .layout, .content, main {
    background-color: var(--bg-color) !important;
    background: var(--bg-color) !important;
    background-image: none !important;
    color: var(--text-main) !important;
}

/* Отключаем скрытые фоновые слои и размытия */
body::before, body::after, #app::before, #app::after, .wrapper::before, .wrapper::after {
    display: none !important;
    background: none !important;
}

/* === УЛУЧШЕНИЯ ДЛЯ ПОЛНОГО СОВПАДЕНИЯ С ГЛАВНЫМ САЙТОМ === */

/* Полностью скрываем гигантский баннер по центру с текстом "HypeWorld" */
.header-banner, .banner, .header-main, .header-content, [class*="banner"] {
    display: none !important;
}

/* Отключаем кривые фоновые волны (waves) под баннером */
.header-waves, .waves, .wave, svg[class*="wave"], [class*="wave"], svg {
    display: none !important;
}

/* 2. Делаем шапку плоской, темной и современной с эффектом размытия */
header, .header, .nav-layout, .navbar, .header-navigation {
    background-color: rgba(13, 14, 18, 0.8) !important;
    background: rgba(13, 14, 18, 0.8) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px) !important;
    padding: 16px 0 !important;
}

/* Настраиваем иконку логотипа */
.navbar-brand img, .logo img, [class*="logo"] img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
    display: inline-block !important;
    visibility: visible !important;
}

/* Ссылки меню в шапке */
.nav-link, .nav-item a, [class*="nav-link"] {
    color: var(--text-muted) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    transition: all 0.25s ease !important;
}
.nav-link:hover, .nav-item a:hover {
    color: var(--text-main) !important;
}

/* 3. Карточки товаров и серверов (в точности как на основном сайте) */
/* Убран общий класс [class*="card"], чтобы избежать эффекта "матрешки" */
.product-card, .server-card, .shop-item, .item-card, .social-card, .modal-content {
    background-color: var(--card-bg) !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    padding: 24px !important;
}

/* Делаем пиксельную иконку товара четкой */
.product-image, [class*="image"], [class*="img"] {
    image-rendering: pixelated !important;
}

/* Плавный синий блик при наведении на товары */
.product-card:hover, .server-card:hover, .shop-item:hover {
    border-color: rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 4px 24px rgba(59, 130, 246, 0.05) !important;
    transform: translateY(-3px) !important;
    transition: all 0.25s ease !important;
}

/* 4. Кнопки (в фирменный синий градиент) */
.btn, .btn-primary, .button, .buy-button, .btn-buy, .pay-button, [class*="button"], [class*="btn"] {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-hover)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 12px 24px !important;
}

/* 5. Поля ввода (Ник, промокоды) */
input, select, textarea, .form-control, .input-group-text {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
}
input:focus, select:focus {
    border-color: var(--accent-blue) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Оформление текстов и инструкций */
h1, h2, h3, h4, .title, .product-name, [class*="title"] {
    color: var(--text-main) !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

p, .description, .text-muted, .instruction-step {
    color: var(--text-muted) !important;
}