/* =============================================
   LUMYWORLD – ФИОЛЕТОВЫЙ КОСМИЧЕСКИЙ МАГАЗИН
   ============================================= */

/* === ЗВЁЗДНЫЙ ФОН (АНИМИРОВАННЫЙ) === */
body {
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%) !important;
    overflow-x: hidden; /* чтобы звёзды не выходили за край */
    color: var(--lumy-text) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Мелкие белые звёзды */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    box-shadow: 
        10px 20px #fff, 150px 300px #fff, 300px 50px #fff, 600px 400px #fff,
        50px 500px #fff, 700px 150px #fff, 250px 600px #fff, 800px 700px #fff,
        450px 100px #fff, 900px 250px #fff, 1100px 600px #fff, 1200px 100px #fff,
        200px 800px #fff, 550px 900px #fff, 1000px 800px #fff, 400px 400px #fff,
        850px 450px #fff, 1300px 350px #fff, 1600px 500px #fff;
    animation: drift 80s linear infinite;
    z-index: -2;
}

/* Средние фиолетовые звёзды */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    box-shadow:
        50px 80px #b44dff, 200px 180px #b44dff, 450px 320px #b44dff,
        750px 150px #b44dff, 1050px 450px #b44dff, 1250px 250px #b44dff,
        150px 700px #b44dff, 600px 800px #b44dff, 950px 650px #b44dff,
        1300px 700px #b44dff, 300px 400px #b44dff, 1100px 500px #b44dff;
    animation: drift 50s linear infinite reverse;
    z-index: -1;
}

@keyframes drift {
    from { transform: translateY(0); }
    to { transform: translateY(-200px); }
}

/* === ОСНОВНЫЕ ЦВЕТА === */
:root {
    --lumy-bg: #1a1124;
    --lumy-card-bg: rgba(45, 24, 61, 0.8);
    --lumy-primary: #b44dff;
    --lumy-primary-hover: #9a3fdb;
    --lumy-accent: #ffd700;
    --lumy-text: #f0e6ff;
    --lumy-text-muted: #a899b8;
    --lumy-border: rgba(180, 77, 255, 0.2);
}

/* === КАРТОЧКИ ТОВАРОВ === */
.card, .product-item {
    background: var(--lumy-card-bg) !important;
    border: 1px solid var(--lumy-border) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

.card:hover, .product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(180, 77, 255, 0.3) !important;
    border-color: var(--lumy-primary) !important;
}

/* === КНОПКИ === */
.btn, .btn-primary, .btn-info {
    background: linear-gradient(45deg, #b44dff, #9a3fdb) !important;
    border: none !important;
    color: white !important;
    border-radius: 12px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(180, 77, 255, 0.4) !important;
}

.btn:hover, .btn-primary:hover, .btn-info:hover {
    background: linear-gradient(45deg, #c56dff, #b44dff) !important;
    box-shadow: 0 6px 20px rgba(180, 77, 255, 0.6) !important;
    transform: translateY(-2px);
}

/* === ЗАГОЛОВКИ === */
h1, h2, h3, h4, h5, h6 {
    color: var(--lumy-primary) !important;
    font-weight: bold !important;
}

/* === НАВИГАЦИЯ === */
.navbar, .navbar-expand-lg {
    background: rgba(26, 17, 36, 0.9) !important;
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--lumy-border) !important;
}

.nav-link {
    color: var(--lumy-text-muted) !important;
    transition: color 0.3s ease !important;
    font-weight: 500 !important;
}

.nav-link:hover, .nav-link.active {
    color: var(--lumy-accent) !important;
}

/* === ТЕКСТ === */
.text-info {
    color: var(--lumy-accent) !important;
}

/* === КОРЗИНА === */
.cart-item {
    border-bottom: 1px solid var(--lumy-border) !important;
}

/* === СКРОЛЛБАР === */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--lumy-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--lumy-primary);
    border-radius: 4px;
}

/* === АНИМАЦИИ === */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.card, .product-item {
    animation: fadeIn 0.5s ease;
}