/* === DiamondGrove Spring Edition 2026 === */
/* Жидкое стекло + Apple-стиль: прозрачность, морфинг, микрофлюиды + весенние градиенты */

:root {
    --main: #00ff88;        /* Яркий весенний мятный акцент */
    --light: #a8ffdb;       /* Светло-миントовый */
    --glow: #00ffaa;        /* Неоновая весенняя подсветка */
    --bg: #0a0f1a;          /* Тёмный космический фон */
    --glass: rgba(255, 255, 255, 0.08);      /* Основное стекло */
    --glass-hover: rgba(255, 255, 255, 0.15); /* Стекло при ховере */
    --text: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.8);
    --spring: linear-gradient(135deg, #00ff88 0%, #00d4aa 50%, #0099cc 100%);
}

/* Фон страницы — тёмный космос + весенний градиент */
body {
    background: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #0a0f1a 0%, #1a2338 100%) !important;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    backdrop-filter: blur(20px);
}

/* ГЛАВНАЯ ФИЧА: ЖИДКОЕ СТЕКЛО для карточек */
.product-card, .item {
    background: var(--glass) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 24px !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.product-card::before, .item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--spring);
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
    border-radius: 24px;
}

.product-card:hover::before, .item:hover::before {
    opacity: 0.08;
}

/* Apple-style hover: плавный лифт + морфинг стекла */
.product-card:hover, .item:hover {
    transform: translateY(-16px) scale(1.02) !important;
    background: var(--glass-hover) !important;
    border-color: rgba(0, 255, 136, 0.5) !important;
    box-shadow: 
        0 25px 50px rgba(0, 255, 136, 0.2),
        0 0 0 1px rgba(0, 255, 136, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Микрофлюидная анимация градиента внутри карточки */
.product-card::after, .item::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: 
        radial-gradient(circle, rgba(0, 255, 136, 0.1) 0%, transparent 70%),
        radial-gradient(circle at 80% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
    animation: fluidMove 8s infinite linear;
}

.product-card:hover::after, .item:hover::after { opacity: 1; }

@keyframes fluidMove {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(30px, 30px) rotate(360deg); }
}

/* Названия товаров — Apple SF Pro стиль */
.product-card .name, .item .title {
    color: var(--text) !important;
    font-weight: 600 !important;
    font-size: 1.4em !important;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Цены — жирный акцент */
.product-card .price, .item .price {
    background: var(--spring);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.9em !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
}

/* Старая цена */
.old-price, del { 
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 500;
    text-decoration: line-through;
}

/* Скидки — Apple-style бейджи */
.discount, .sale {
    background: rgba(0, 255, 136, 0.2) !important;
    backdrop-filter: blur(10px);
    color: var(--main) !important;
    font-weight: 700 !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 255, 136, 0.4);
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.2);
    animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}

/* Кнопки "В корзину" — чистый Apple glassmorphism */
.buy-button, .add-to-cart {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
    padding: 16px 32px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.buy-button::before, .add-to-cart::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.buy-button:hover::before, .add-to-cart:hover::before { left: 100%; }

.buy-button:hover, .add-to-cart:hover {
    background: rgba(0, 255, 136, 0.2) !important;
    border-color: rgba(0, 255, 136, 0.5) !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 15px 35px rgba(0, 255, 136, 0.3),
        0 0 0 1px rgba(0, 255, 136, 0.4) !important;
}

/* Иконки товаров */
.product-card img, .item img {
    border-radius: 20px;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.product-card:hover img, .item:hover img {
    transform: scale(1.05);
    box-shadow: 
        0 20px 50px rgba(0, 255, 136, 0.3),
        0 0 0 1px rgba(0, 255, 136, 0.4);
}

/* Заголовки */
h1, h2, h3 {
    background: var(--spring);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Шапка сайта — максимальное стекло */
.header, .navbar {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Дополнительные весенние эффекты */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 136, 0.5) transparent;
}

/* Плавные переходы для всего */
*::selection {
    background: var(--main);
    color: #000;
}