/* Tailwind CSS handles all styling via CDN */
/* Custom animations that Tailwind cannot handle */

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Category carousel fade effect */
.category-scroll-container {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.category-scroll-container::-webkit-scrollbar {
    display: none;
}
.category-scroll-wrapper {
    position: relative;
}
.category-scroll-wrapper::before,
.category-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.category-scroll-wrapper::before {
    left: 0;
    background: linear-gradient(to right, white 0%, transparent 100%);
    opacity: 0;
}
.category-scroll-wrapper::after {
    right: 0;
    background: linear-gradient(to left, white 0%, transparent 100%);
    opacity: 0;
}
.category-scroll-wrapper.fade-left::before {
    opacity: 1;
}
.category-scroll-wrapper.fade-right::after {
    opacity: 1;
}

/* Mobil cihazlarda ox düymələrini gizlət */
@media (max-width: 768px) {
    .category-arrow-btn {
        display: none !important;
    }
}