:root {
    --blood-red: #8a0303;
    --dark-red: #3a0000;
    --black: #000000;
    --neon-red: #ff0000;
    --text-light: #f1f1f1;
}

body {
    font-family: 'Vazirmatn', sans-serif;
    background: linear-gradient(to bottom, var(--black), var(--dark-red));
    color: var(--text-light);
    transition: all 0.5s ease;
    min-height: 100vh;
    overflow-x: hidden;
}

.blood-btn {
    background: var(--blood-red);
    position: relative;
    overflow: hidden;
    border: none;
    transition: all 0.3s ease;
}

.blood-btn:hover {
    background: var(--neon-red);
    box-shadow: 0 0 10px var(--neon-red), 0 0 20px var(--neon-red);
}

.neon-text {
    text-shadow: 0 0 5px var(--neon-red), 0 0 10px var(--neon-red);
    animation: neon-pulse 2s infinite alternate;
}

@keyframes neon-pulse {
    from { text-shadow: 0 0 5px var(--neon-red), 0 0 10px var(--neon-red); }
    to { text-shadow: 0 0 10px var(--neon-red), 0 0 20px var(--neon-red), 0 0 30px var(--neon-red); }
}

.product-card {
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.product-card:hover {
    transform: rotateY(10deg) rotateX(5deg) scale(1.02);
}

.theme-toggle {
    position: relative;
    width: 60px;
    height: 30px;
    background: var(--dark-red);
    border-radius: 15px;
    cursor: pointer;
}

.theme-toggle::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--neon-red);
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: all 0.3s ease;
}

.dark .theme-toggle::before {
    left: 33px;
}

.hidden-section {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.hidden-section.active {
    max-height: 500px;
}

.payment-option {
    border: 2px solid var(--blood-red);
    transition: all 0.3s ease;
}

.payment-option:hover {
    background: var(--dark-red);
    box-shadow: 0 0 15px var(--neon-red);
}

/* افکت باران خون */
.blood-rain-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

.falling-drop {
    position: absolute;
    top: -20px;
    background: linear-gradient(to bottom, transparent, var(--blood-red));
    border-radius: 0 0 50% 50%;
    box-shadow: 0 0 5px var(--neon-red);
    animation: fallDown linear forwards;
}

@keyframes fallDown {
    0% { transform: translateY(0); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0.3; }
}