/**
 * Mobile Product Carousel Styles
 * Creates a mobile-friendly carousel effect where the center product is full size
 * and side products are partially visible at smaller scale
 */

/* Mobile Carousel Styles - Only apply on mobile devices */
@media (max-width: 768px) {
    /* Override any theme styles that might hide products */
    .bokifa-products ul.products.elementor-grid,
    .bokifa-products ul.products {
        display: flex !important;
        visibility: visible !important;
    }
    
    .bokifa-products ul.products li.product,
    .bokifa-products ul.products.elementor-grid li.product,
    ul.products li.product {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    /* Container for the product carousel */
    .bokifa-products {
        position: relative;
        overflow: visible;
        padding: 0 10px;
    }
    
    .bokifa-products ul.products.elementor-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        gap: 15px;
        padding: 0 10px 20px 10px;
        margin: 0;
        width: 100%;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        position: relative;
    }
    
    /* Create infinite loop by cloning first and last items */
    .bokifa-products ul.products.elementor-grid::before {
        content: '';
        flex: 0 0 280px;
        width: 280px;
        min-width: 280px;
        order: -1;
        background: transparent;
        pointer-events: none;
    }
    
    .bokifa-products ul.products.elementor-grid::after {
        content: '';
        flex: 0 0 280px;
        width: 280px;
        min-width: 280px;
        order: 999;
        background: transparent;
        pointer-events: none;
    }
    
    /* Hide scrollbar for Chrome, Safari and Opera */
    .bokifa-products ul.products.elementor-grid::-webkit-scrollbar {
        display: none;
    }
    
    /* Individual product items */
    ul.products li.product {
        flex: 0 0 200px !important;
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        scroll-snap-align: start;
        transform: scale(0.9) !important;
        transition: transform 0.3s ease !important;
        opacity: 0.8 !important;
        margin: 0;
        position: relative;
    }
    
    /* Active/center product scaling */
    ul.products li.product.mobile-active {
        transform: scale(1) !important;
        opacity: 1 !important;
        z-index: 2;
    }
    
    /* First product should be active by default */
    /* ul.products li.product:first-child {
        transform: scale(1) !important;
        opacity: 1 !important;
    } */
    
    /* Ensure product images maintain aspect ratio */
    ul.products li.product .attachment-woocommerce_thumbnail,
    ul.products li.product .wp-post-image {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    
    /* Product content adjustments for mobile */
    ul.products li.product .product-inner {
        padding: 15px;
        text-align: center;
    }
    
    /* Product title adjustments */
    ul.products li.product h2,
    ul.products li.product h3,
    ul.products li.product .woocommerce-loop-product__title {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 10px;
    }
    
    /* Price adjustments */
    ul.products li.product .price {
        font-size: 18px;
        justify-content: center;
        margin-bottom: 15px;
    }
    
    /* Add to cart button adjustments */
    ul.products li.product .add_to_cart_button,
    ul.products li.product .button {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }
    
    /* Show scroll indicators */
    .bokifa-products::before,
    .bokifa-products::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 20px;
        width: 30px;
        pointer-events: none;
        z-index: 3;
        transition: opacity 0.3s ease;
    }
    
    .bokifa-products::before {
        left: 0;
        /* background: linear-gradient(to right, rgba(255,255,255,0.9), transparent); */
    }
    
    .bokifa-products::after {
        right: 0;
        /* background: linear-gradient(to left, rgba(255,255,255,0.9), transparent); */
    }
    
    /* Add subtle shadow to container */
    .bokifa-products {
        /* box-shadow: inset 0 0 20px rgba(0,0,0,0.05); */
    }
    
    /* Hide pagination on mobile to focus on carousel */
    .woocommerce-pagination {
        display: none;
    }
    
    /* Smooth scrolling behavior */
    ul.products.elementor-grid {
        scroll-behavior: smooth;
    }
    
    /* For Swiper-enabled carousels */
    .bokifa-swiper {
        overflow: visible;
        padding: 0 15px;
    }
    
    .bokifa-swiper .swiper-wrapper {
        display: flex;
        flex-wrap: nowrap;
    }
    
    .bokifa-swiper .swiper-slide {
        flex: 0 0 280px;
        width: 280px !important;
        transform: scale(0.9);
        transition: transform 0.3s ease;
        opacity: 0.8;
    }
    
    .bokifa-swiper .swiper-slide.swiper-slide-active {
        transform: scale(1);
        opacity: 1;
        visibility: hidden;
        position: absolute;
    }
    
    /* Adjust swiper navigation for mobile */
    .bokifa-swiper .swiper-button-next,
    .bokifa-swiper .swiper-button-prev {
        display: none; /* Hide navigation arrows on mobile */
    }
    
    /* Show swiper pagination dots */
    .bokifa-swiper .swiper-pagination {
        position: relative;
        margin-top: 20px;
        text-align: center;
    }
    
    .bokifa-swiper .swiper-pagination-bullet {
        background: var(--e-global-color-primary, #007cba);
        opacity: 0.3;
        margin: 0 5px;
    }
    
    .bokifa-swiper .swiper-pagination-bullet-active {
        opacity: 1;
    }
    
    /* Ensure the container doesn't collapse */
    .bokifa-products ul.products.elementor-grid {
        min-height: 300px;
    }
    
    /* Fallback styles that work without JavaScript */
    .bokifa-products ul.products li.product {
        transform: scale(0.9) !important;
        opacity: 0.8 !important;
        transition: all 0.3s ease !important;
    }
    
    .bokifa-products ul.products li.product:first-child,
    .bokifa-products ul.products li.product.mobile-active {
        transform: scale(1) !important;
        opacity: 1 !important;
    }
    
    /* Styles for cloned products in infinite loop */
    ul.products li.product.cloned {
        opacity: 0.8 !important;
        transform: scale(0.9) !important;
    }
    
    ul.products li.product.cloned.mobile-active {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
    
    /* Ensure smooth transitions between real and cloned products */
    ul.products li.product {
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }
}

/* Tablet adjustments (768px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    ul.products li.product {
        flex: 0 0 calc(50% - 15px); /* Show 2 products per row on tablet */
    }
}

/* Small mobile devices (max 480px) */
@media (max-width: 480px) {
    .bokifa-products ul.products.elementor-grid {
        padding: 0 calc(50vw - 125px) 20px calc(50vw - 125px);
        gap: 15px;
    }
    
    ul.products li.product {
        flex: 0 0 250px;
        width: 250px;
        min-width: 250px;
    }
    
    ul.products li.product .product-inner {
        padding: 10px;
    }
    
    ul.products li.product h2,
    ul.products li.product h3,
    ul.products li.product .woocommerce-loop-product__title {
        font-size: 14px;
    }
    
    ul.products li.product .price {
        font-size: 16px;
    }
}