/* ==========================================
   💥 ИГРОВОЙ НЕОНОВЫЙ СТИЛЬ ДЛЯ МАГАЗИНА 💥
   ========================================== */

/* 1. Общий фон сайта — глубокий темный */
body {
    background: #0f0c1b !important; /* Темно-фиолетовый оттенок ночи */
    color: #f1f1f1 !important;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* 2. Карточки товаров (Донаты) */
.product-card, .card {
    background: rgba(25, 20, 40, 0.75) !important; /* Полупрозрачный фон */
    border: 2px solid #2d244e !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease-in-out !important;
}

/* Эффект при наведении на карточку доната */
.product-card:hover, .card:hover {
    transform: translateY(-5px) !important; /* Карточка слегка приподнимается */
    border-color: #ff007f !important; /* Розовый неоновый контур */
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.4) !important; /* Свечение */
}

/* 3. Названия товаров */
.product-title, .card-title {
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* 4. Кнопки «Купить» */
.btn-primary, .buy-button {
    background: linear-gradient(45deg, #ff007f, #7928ca) !important; /* Градиент от розового к фиолетовому */
    border: none !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    color: #fff !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 15px rgba(255, 0, 127, 0.3) !important;
}

/* Эффект при наведении на кнопку */
.btn-primary:hover, .buy-button:hover {
    background: linear-gradient(45deg, #7928ca, #ff007f) !important; /* Перелив градиента */
    box-shadow: 0 0 25px rgba(255, 0, 127, 0.6) !important; /* Яркое свечение */
    cursor: pointer;
}

/* 5. Поля ввода (Куда игрок пишет свой ник) */
.form-control, input[type="text"] {
    background: #18132b !important;
    border: 1px solid #433575 !important;
    color: #fff !important;
    border-radius: 8px !important;
}

.form-control:focus, input[type="text"]:focus {
    border-color: #7928ca !important;
    box-shadow: 0 0 10px rgba(121, 40, 202, 0.5) !important;
}

/* 6. Анимация для привлечения внимания к важным элементам */
@keyframes neonPulse {
    0% { text-shadow: 0 0 10px rgba(255,0,127,0.6); }
    50% { text-shadow: 0 0 20px rgba(255,0,127,1), 0 0 30px rgba(255,0,127,0.4); }
    100% { text-shadow: 0 0 10px rgba(255,0,127,0.6); }
}

/* Применяем пульсацию к главному заголовку магазина */
.site-title, .header-logo {
    animation: neonPulse 2s infinite ease-in-out;
    color: #ff007f !important;
}