/* 1. ПОДКЛЮЧАЕМ ШРИФТЫ */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=JetBrains+Mono:wght@500&display=swap');

/* 2. ТЕМНАЯ ТЕМА И ГЛОБАЛЬНЫЙ ЦВЕТ */
/* Заставляем фон быть черным, а весь текст зеленым */
body, html, .app, #app, .main-wrapper {
    background-color: #050505 !important;
    background-image: none !important;
    color: #00ff41 !important;
    font-family: 'JetBrains Mono', monospace !important;
}

/* 3. ВЕРХНЯЯ ПАНЕЛЬ (МЕНЮ) */
header, .navbar, .header-container {
    background-color: #0a0a0a !important;
    border-bottom: 2px solid #00ff41 !important;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
}

.navbar a, .nav-link, header span {
    color: #00ff41 !important;
    font-family: 'VT323', monospace !important;
    font-size: 20px !important;
    text-transform: uppercase;
}

/* 4. ЦЕНТРАЛЬНЫЙ БАННЕР */
/* Делаем его темным с изумрудным свечением */
.banner, [class*="Hero"], [class*="Banner"] {
    background: rgba(0, 30, 0, 0.4) !important;
    border-radius: 0px !important;
    border-bottom: 1px solid #00ff41;
}

/* Название Amonis */
.banner h1, [class*="title"] h1, .header-content h1 {
    font-family: 'VT323', monospace !important;
    color: #00ff41 !important;
    text-shadow: 0 0 20px #00ff41, 0 0 5px #fff;
    font-size: 70px !important;
    text-transform: uppercase;
}

/* Описание под названием */
.banner p, [class*="subtitle"] {
    font-family: 'Press Start 2P', cursive !important;
    font-size: 10px !important;
    color: #00ff41 !important;
    opacity: 0.8;
}

/* 5. КАРТОЧКИ ТОВАРОВ */
.product-card, .card, [class*="Item"] {
    background: #0a0a0a !important;
    border: 2px solid #008f11 !important;
    border-radius: 0px !important; /* Квадратные в стиле ретро */
}

.product-card:hover {
    border-color: #00ff41 !important;
    box-shadow: 0 0 25px rgba(0, 255, 65, 0.4);
}

/* Названия товаров */
.product-card .name, [class*="itemName"] {
    font-family: 'VT323', monospace !important;
    font-size: 24px !important;
    color: #00ff41 !important;
}

/* 6. КНОПКИ КУПИТЬ */
button, .btn, [class*="Button"], .buy-btn {
    background: #008f11 !important;
    border: 2px solid #00ff41 !important;
    color: #fff !important;
    font-family: 'Press Start 2P', cursive !important;
    font-size: 9px !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 0 #004d09;
    transition: 0.1s;
}

button:hover, .btn:hover {
    background: #00ff41 !important;
    color: #000 !important;
    transform: translateY(2px);
    box-shadow: none;
}

/* 7. КАТЕГОРИИ (Кнопки "Все товары", "Валюта") */
.categories-list a, .tabs a {
    background: transparent !important;
    border: 1px solid #008f11 !important;
    color: #00ff41 !important;
    font-family: 'VT323', monospace !important;
}

.categories-list a.active, .tabs a.selected {
    background: #00ff41 !important;
    color: #000 !important;
}

/* 8. ЭФФЕКТ СТАРЫХ ПОЛОСОК МОНИТОРА */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
    background-size: 100% 4px, 3px 100%;
    z-index: 10000;
    pointer-events: none;
    opacity: 0.5;
}

/* 9. СКРЫВАЕМ ЛИШНИЕ КРУГЛЫЕ ЭЛЕМЕНТЫ */
.rounded, .img-rounded {
    border-radius: 0px !important;
}
/* 1. ИСПРАВЛЯЕМ ПОДЗАГОЛОВОК "Оригинальные сервера Minecraft" */
.banner p, .hero-section p, .header-content p, [class*="subtitle"], [class*="description"] {
    color: #00ff41 !important; /* Изумрудный цвет */
    font-family: 'Press Start 2P', cursive !important; /* Пиксельный шрифт */
    font-size: 10px !important; /* Делаем поменьше, так как шрифт широкий */
    line-height: 1.6 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    opacity: 0.9 !important;
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.5) !important;
}

/* 2. ИСПРАВЛЯЕМ ЗАГОЛОВОК "Наши товары" */
h1, h2, .section-title, .shop-title {
    color: #00ff41 !important;
    font-family: 'VT323', monospace !important;
    font-size: 45px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 15px rgba(0, 255, 65, 0.6) !important;
}

/* 3. СТИЛИЗУЕМ ПОИСК (Search) */
input[type="text"], .search-input, .form-control {
    background-color: #0a0a0a !important;
    border: 1px solid #008f11 !important;
    color: #00ff41 !important;
    font-family: 'JetBrains Mono', monospace !important;
    border-radius: 0px !important;
}

input[type="text"]:focus {
    border-color: #00ff41 !important;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.5) !important;
    outline: none !important;
}

/* 4. ИКОНКА ЛУПЫ В ПОИСКЕ */
.search-icon, .fa-search, [class*="search"] i {
    color: #00ff41 !important;
}

/* 10. УВЕЛИЧЕНИЕ ВТОРОГО ЛОГОТИПА (СПРАВА) */
.fh-300, img[src*="sides"], .hero-section img {
    height: 750px !important; /* Увеличиваем высоту (было 300px) */
    width: auto !important;   /* Чтобы пропорции не ломались */
    max-height: 80vh !important; /* Чтобы на телефонах логотип не был больше экрана */
    filter: drop-shadow(0 0 15px rgba(0, 255, 65, 0.4)) !important; /* Добавим ему изумрудное свечение под стиль */
    transition: 0.5s !important;
}

/* Эффект легкого "парения" для этого логотипа (опционально, в стиле RPG) */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.fh-300, img[src*="sides"] {
    animation: float 5s ease-in-out infinite;
}