/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Filter Buttons */
.filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* WhatsApp Button */
a[href*="wa.me"]:hover {
    background: #20ba5a !important;
    transform: scale(1.02);
}

/* General Buttons */
button:hover {
    background: #1e293b !important;
    transform: scale(1.02);
}

/* Close Modal Button */
#closeModal:hover {
    background: rgba(0, 0, 0, 0.2) !important;
    transform: rotate(90deg);
}

/* Modal WhatsApp Button */
#modalWhatsApp:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4) !important;
}

/* Product Card Transitions */
.product-card {
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.2) !important;
}

.product-card img {
    transition: transform 0.3s ease;
}

.product-card:hover img {
    transform: scale(1.05);
}

/* Sticky Category Navigation */
.sticky-category-nav {
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 100px;
    /* Header height (60px logo + 40px padding) */
    z-index: 990;
    /* Just below header (1000) */
    background: #f8fafc;
    /* Ensure opacity */
    transition: top 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Subtle shadow when sticking */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .sticky-category-nav {
        /* Mobile Header: 50px logo + 40px padding = 90px */
        top: 90px;
        padding: 10px 0 !important;
    }

    #categoryFilter {
        justify-content: flex-start !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        white-space: nowrap;
        padding-bottom: 5px;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE 10+ */

        /* Carousel Feel */
        scroll-behavior: smooth;
        scroll-padding-left: 24px;
        scroll-snap-type: x mandatory;
        padding-left: 24px;
        /* Ensure first item isn't flush against edge */
        padding-right: 24px;
    }

    #categoryFilter .filter-btn {
        scroll-snap-align: start;
        flex-shrink: 0;
        /* Prevent shrinking */
    }

    #categoryFilter::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    #productsGrid {
        grid-template-columns: 1fr !important;
    }

    #productModal>div {
        margin: 20px;
    }

    #productModal>div>div:first-child {
        padding: 20px !important;
    }

    #productModal>div>div>div:first-child {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}