/* UI/UX Enhancements and Animations */

/* Category Switching Transitions */
.category-transition {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.category-hidden {
    opacity: 0;
    transform: translateY(10px);
}

/* Button Animations */
.btn-add-animation {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-add-animation:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
}

.btn-add-animation:active {
    transform: scale(0.95);
}

.btn-add-success {
    background-color: #10b981 !important;
    /* green-500 */
    border-color: #10b981 !important;
}

/* Cart Side Panel Transitions */
#cart-side-panel {
    transition: opacity 0.3s ease-in-out;
}

#cart-content {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom Scrollbar for Category Lists */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Responsive Spacing Refinements */
@media (max-width: 640px) {
    .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Hero Carousel Dots */
.carousel-dot {
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot.active {
    width: 2rem;
    background-color: white;
}

/* Product Card Hover Effects */
.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

/* Missing Tailwind Utilities for Cart Header */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-blue-50 {
    --tw-gradient-from: #eff6ff;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0));
}

.to-indigo-50 {
    --tw-gradient-to: #eef2ff;
}

.text-blue-800 {
    color: #1e40af;
}

.bg-red-500 {
    background-color: #ef4444;
}

.text-white {
    color: #ffffff;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

/* Ensure z-index works for the bottom popup */
.z-50 {
    z-index: 50;
}

.fixed {
    position: fixed;
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.bg-white {
    background-color: #ffffff;
}

.border-t {
    border-top-width: 1px;
}

.border-gray-200 {
    border-color: #e5e7eb;
}

.shadow-\[0_-4px_6px_-1px_rgba\(0\,0\,0\,0\.1\)\] {
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
}