/* Custom CSS for PitsaTech */
body {
    background-color: #212529;
}

.card {
    border: 1px solid #495057;
}

.card-title {
    color: #0d6efd;
}

/* Best Seller Badge Animations */
.best-seller-badge {
    background: linear-gradient(45deg, #facc15, #f59e0b);
    color: #422006;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 0.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(250, 204, 21, 0.3);
    transition: all 0.3s ease;
}

/* Keyframe Animations - More visible movements */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(250, 204, 21, 0.3);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(250, 204, 21, 0.8);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(250, 204, 21, 0.3);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 25px rgba(250, 204, 21, 1), 0 0 35px rgba(250, 204, 21, 0.6);
        filter: brightness(1.3);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(-4px);
    }
}

@keyframes slide {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(8px);
    }
    75% {
        transform: translateX(-8px);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
        transform: scale(1);
    }
    50% {
        background-position: 0% 0;
        transform: scale(1.05);
    }
    100% {
        background-position: 200% 0;
        transform: scale(1);
    }
}

@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(-3deg) scale(1.05);
    }
    75% {
        transform: rotate(3deg) scale(1.05);
    }
}

/* Animation Classes - Always active */
.best-seller-badge.animate-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

.best-seller-badge.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

.best-seller-badge.animate-bounce {
    animation: bounce 1.8s ease-in-out infinite;
}

.best-seller-badge.animate-slide {
    animation: slide 2s ease-in-out infinite;
}

.best-seller-badge.animate-shimmer {
    background: linear-gradient(45deg, #facc15, #f59e0b, #facc15, #fbbf24, #facc15);
    background-size: 300% 100%;
    animation: shimmer 2.5s linear infinite;
}

.best-seller-badge.animate-wiggle {
    animation: wiggle 1.5s ease-in-out infinite;
}

/* Hover Effects - Optional enhancement */
.best-seller-badge:hover {
    animation-play-state: paused;
    transform: scale(1.15) !important;
    box-shadow: 0 6px 20px rgba(250, 204, 21, 0.8) !important;
    cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .best-seller-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.3rem;
    }
}