/* Pavami Nebula Background Effect */
body.woocommerce,
body.woocommerce-page,
.pavami-nebula-bg {
    background: linear-gradient(135deg, #1a0b2e 0%, #16213e 50%, #0f3460 100%);
    background-attachment: fixed;
    position: relative;
    min-height: 100vh;
}

/* Nebula overlay with blue glow effect */
body.woocommerce::before,
body.woocommerce-page::before,
.pavami-nebula-bg::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at top left, rgba(58, 123, 213, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at top right, rgba(58, 123, 213, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(106, 17, 203, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(37, 99, 235, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Purple glow particles effect */
body.woocommerce::after,
body.woocommerce-page::after,
.pavami-nebula-bg::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(168, 85, 247, 0.4), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(139, 92, 246, 0.3), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(167, 139, 250, 0.3), transparent),
        radial-gradient(2px 2px at 80% 10%, rgba(196, 181, 253, 0.3), transparent),
        radial-gradient(1px 1px at 90% 60%, rgba(221, 214, 254, 0.2), transparent);
    background-size: 200% 200%;
    animation: particle-float 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes particle-float {

    0%,
    100% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }
}

/* Ensure content is above background */
.woocommerce,
.woocommerce-page {
    position: relative;
    z-index: 1;
}