/**
 * Bokifa Infinite Scroll Custom Styles
 * Hide scrollbar and inline loading indicators
 */

/* Hide sorting and pagination for infinite scroll */
.bokifa-products-infinite-scroll .bokifa-sorting,
.bokifa-products-infinite-scroll .woocommerce-pagination-wrap,
.bokifa-products-infinite-scroll .infinite-scroll-loading,
.bokifa-products-infinite-scroll .infinite-scroll-loading-inline,
.bokifa-products-infinite-scroll .bokifa-loading,
.bokifa-products-infinite-scroll .loading-indicator,
.bokifa-products-infinite-scroll .bokifa-spinner {
    display: none !important;
}

/* Hide scrollbar for infinite scroll containers */
.bokifa-products-infinite-scroll .woocommerce ul.products {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.bokifa-products-infinite-scroll .woocommerce ul.products::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none; /* Chrome, Safari, Opera */
}

/* Optimize carousel containers without completely blocking scroll */
.bokifa-products-infinite-scroll[data-is-carousel="true"] {
    /* Allow vertical overflow but optimize for horizontal swiping */
    /* overflow-x: hidden; Prevent horizontal scroll conflicts */
    /* overflow-y: auto; Allow vertical scrolling */
}

.bokifa-products-infinite-scroll[data-is-carousel="true"] .woocommerce {
    /* Remove height restrictions that force scrollbars */
    max-height: none !important;
    height: auto !important;
    overflow-x: hidden; /* Prevent horizontal scroll conflicts */
    overflow-y: visible; /* Allow content to flow vertically */
}

.bokifa-products-infinite-scroll[data-is-carousel="true"] ul.products {
    /* Remove height restrictions but allow vertical layout */
    max-height: none !important;
    height: auto !important;
    overflow-x: hidden; /* Prevent horizontal scroll conflicts */
    overflow-y: visible; /* Allow vertical flow */
}

/* Hide horizontal scrollbars only */
.bokifa-products-infinite-scroll[data-is-carousel="true"] ul.products::-webkit-scrollbar:horizontal {
    display: none !important; /* Hide horizontal webkit scrollbar */
}

/* Swiper touch handling improvements */
.bokifa-products-infinite-scroll[data-is-carousel="true"] .swiper {
    touch-action: pan-x pan-y; /* Allow both horizontal and vertical panning */
    -webkit-touch-callout: none; /* Disable iOS callout */
    -webkit-user-select: none; /* Disable text selection during swipe */
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: visible !important; /* Ensure swiper doesn't create scroll conflicts */
}

/* Optimize swiper containers for both directions */
.bokifa-products-infinite-scroll[data-is-carousel="true"] .swiper-wrapper {
    touch-action: pan-x pan-y; /* Allow both directions */
    will-change: transform; /* Optimize for animations */
    overflow: visible !important; /* No scroll conflicts on wrapper */
}

/* Ensure swiper slides work well with page scroll */
.bokifa-products-infinite-scroll[data-is-carousel="true"] .swiper-slide {
    touch-action: pan-x pan-y; /* Allow both directions */
    pointer-events: auto;
    overflow: visible !important; /* No scroll conflicts on slides */
}

/* Improve swiper responsiveness on touch devices */
@media (hover: none) and (pointer: coarse) {
    .bokifa-products-infinite-scroll[data-is-carousel="true"] .swiper {
        touch-action: pan-x pan-y; /* Allow both directions on touch devices */
        -webkit-overflow-scrolling: touch;
    }
    
    .bokifa-products-infinite-scroll[data-is-carousel="true"] .swiper-wrapper {
        cursor: grab;
        cursor: -webkit-grab;
    }
    
    .bokifa-products-infinite-scroll[data-is-carousel="true"] .swiper-wrapper:active {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }
}

/* Ensure swiper containers work well with page layout */
.bokifa-products-infinite-scroll[data-is-carousel="true"] .swiper,
.bokifa-products-infinite-scroll[data-is-carousel="true"] .swiper-container,
.bokifa-products-infinite-scroll[data-is-carousel="true"] .bokifa-swiper-wrapper {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* Make loading indicator inline with products grid */
.infinite-scroll-loading-inline {
    display: none;
    text-align: center;
    padding: 20px 15px;
    margin: 0;
    background: transparent;
}

/* Swiper-specific loading indicator */
.infinite-scroll-loading-inline.swiper-loading {
    margin: 20px 0;
    padding: 15px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Make the inline loading indicator work with the existing layout */
.infinite-scroll-loading-inline.show {
    display: block !important;
    opacity: 1;
}

.infinite-scroll-loading-inline.hide {
    opacity: 0;
}

/* Loading spinner styling */
.infinite-scroll-loading-inline .bokifa-spinner {
    margin: 0 auto 15px;
    width: 32px;
    height: 32px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--e-global-color-primary, #0073aa);
    border-radius: 50%;
    animation: bokifa-spin 1s linear infinite;
}

.infinite-scroll-loading-inline p {
    margin: 0;
    font-size: 13px;
    color: #666;
    font-weight: normal;
}

@keyframes bokifa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ensure sentinel is properly positioned and hidden */
.infinite-scroll-sentinel {
    height: 1px !important;
    visibility: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    display: block !important;
    position: relative !important;
    clear: both !important;
    float: none !important;
    pointer-events: none !important;
}

/* Mobile optimizations */
@media (max-width: 1024px) {
    .bokifa-products-infinite-scroll {
        position: relative !important;
        overflow: visible !important;
    }
    
    .bokifa-products-infinite-scroll .woocommerce {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    .bokifa-products-infinite-scroll ul.products {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        position: relative !important;
    }
    
    /* Ensure products list is properly laid out on mobile */
    .bokifa-products-infinite-scroll ul.products li {
        position: relative !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .bokifa-products-infinite-scroll {
        -webkit-overflow-scrolling: touch;
    }
    
    .infinite-scroll-sentinel {
        min-height: 3px !important;
        height: 3px !important;
    }
}

/* Mobile-specific sentinel improvements */
@media (max-width: 1024px) {
    .infinite-scroll-sentinel {
        min-height: 2px !important;
        height: 2px !important;
    }
}

/* Hide any existing non-inline loading indicators */
.bokifa-products-infinite-scroll > .infinite-scroll-loading {
    display: none !important;
}

/* Additional scrollbar hiding for different browsers */
.bokifa-products-infinite-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bokifa-products-infinite-scroll::-webkit-scrollbar {
    display: none;
}

/* Smooth transitions for loading state */
.infinite-scroll-loading-inline {
    transition: opacity 0.3s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .infinite-scroll-loading-inline {
        padding: 18px 12px;
    }
    
    .infinite-scroll-loading-inline .bokifa-spinner {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 768px) {
    .infinite-scroll-loading-inline {
        padding: 15px 10px;
    }
    
    .infinite-scroll-loading-inline .bokifa-spinner {
        width: 28px;
        height: 28px;
    }
    
    .infinite-scroll-loading-inline p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .infinite-scroll-loading-inline {
        padding: 12px 8px;
    }
    
    .infinite-scroll-loading-inline .bokifa-spinner {
        width: 24px;
        height: 24px;
        margin-bottom: 10px;
    }
    
    .infinite-scroll-loading-inline p {
        font-size: 11px;
    }
}

/* Additional mobile optimizations */
@media (max-width: 320px) {
    .infinite-scroll-loading-inline {
        padding: 10px 5px;
    }
    
    .infinite-scroll-loading-inline .bokifa-spinner {
        width: 20px;
        height: 20px;
        border-width: 1.5px;
        margin-bottom: 8px;
    }
    
    .infinite-scroll-loading-inline p {
        font-size: 10px;
    }
}

/* Orientation-specific optimizations */
@media (orientation: landscape) and (max-height: 500px) {
    .infinite-scroll-loading-inline {
        padding: 8px 10px;
    }
    
    .infinite-scroll-loading-inline .bokifa-spinner {
        width: 20px;
        height: 20px;
        margin-bottom: 5px;
    }
    
    .infinite-scroll-loading-inline p {
        font-size: 10px;
    }
}

/* Free Mode Swiper Styles - Smooth momentum scrolling with native touch support */
.swiper-free-mode .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.swiper-free-mode.swiper-container {
    overflow: hidden;
    /* Enhanced touch responsiveness for mobile with native touch support */
    touch-action: pan-x pan-y pinch-zoom; /* Allow both horizontal and vertical panning */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Better touch target size */
    min-height: 44px;
}

.swiper-free-mode .swiper-slide {
    transition: transform 0.3s ease-out;
    /* Improve touch targets */
    pointer-events: auto;
    /* Ensure minimum touch target size */
    min-height: 44px;
}

/* Enhanced momentum for free mode with native touch optimization */
.bokifa-products-infinite-scroll .swiper-free-mode .swiper-wrapper {
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    /* Better touch responsiveness */
    will-change: transform;
    /* Native touch handling - allow both horizontal and vertical panning */
    touch-action: pan-x pan-y pinch-zoom;
}

/* Enhanced momentum and movement experience */
@media (pointer: coarse) {
    .swiper-free-mode .swiper-wrapper {
        /* Advanced easing curves for natural movement */
        transition-duration: 0.6s !important;
        transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        /* Hardware acceleration for smooth performance */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        /* Better momentum physics */
        -webkit-overflow-scrolling: touch;
    }
    
    /* Enhanced touch feedback and responsiveness */
    .swiper-free-mode .swiper-slide {
        cursor: grab;
        cursor: -webkit-grab;
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        /* Better touch response */
        min-height: 48px;
        /* Improve touch responsiveness */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    .swiper-free-mode .swiper-slide:active {
        cursor: grabbing;
        cursor: -webkit-grabbing;
        /* Enhanced visual feedback with subtle transform */
        transform: scale(0.98);
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
        transition: transform 0.1s ease-out;
    }
    
    /* Add momentum visual cues */
    .swiper-free-mode.swiper-container-horizontal > .swiper-wrapper {
        /* Enhanced momentum curve */
        transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    /* Better slide spacing for smoother movement */
    .swiper-free-mode .swiper-slide {
        margin-right: 15px; /* Consistent spacing */
    }
    
    .swiper-free-mode .swiper-slide:last-child {
        margin-right: 0;
    }
    
    /* Prevent image dragging and improve cursor interaction */
    .swiper-free-mode .swiper-slide img,
    .swiper-free-mode .swiper-slide picture,
    .swiper-free-mode .swiper-slide .product-image {
        -webkit-user-drag: none !important;
        -khtml-user-drag: none !important;
        -moz-user-drag: none !important;
        -o-user-drag: none !important;
        pointer-events: none !important; /* Prevent image interaction */
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        /* Prevent context menu on long press */
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Ensure swiper area has absolute priority for interactions */
    .swiper-free-mode .swiper-slide {
        cursor: grab !important;
        position: relative;
        /* Create stacking context for interaction priority */
        z-index: 1;
    }
    
    .swiper-free-mode .swiper-slide:active {
        cursor: grabbing !important;
    }
    
    /* During swipe gestures, elements should not interfere */
    .swiper-free-mode.swiper-container.swiping .swiper-slide * {
        pointer-events: none !important;
    }
    
    .swiper-free-mode.swiper-container.swiping .swiper-slide {
        cursor: grabbing !important;
    }
    
    /* Make sure links and text still work but don't interfere with dragging */
    .swiper-free-mode .swiper-slide a,
    .swiper-free-mode .swiper-slide .product-title,
    .swiper-free-mode .swiper-slide .price {
        pointer-events: auto !important;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }
    
    /* Improve touch responsiveness with native touch handling */
    .bokifa-products-infinite-scroll .swiper-container {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        /* Native touch handling - allow both horizontal and vertical panning */
        touch-action: pan-x pan-y pinch-zoom;
        /* Smoother touch interactions */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Better touch gesture recognition */
    .bokifa-products-infinite-scroll .swiper-wrapper {
        /* Enable hardware acceleration for smoother touch */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }
}

/* Ensure smooth scrolling behavior with enhanced native touch support */
.bokifa-products-infinite-scroll .swiper-container {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Enhanced mobile touch handling - allow both horizontal and vertical panning */
    touch-action: pan-x pan-y pinch-zoom;
    -ms-touch-action: pan-x pan-y;
    /* Better performance on mobile */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Additional mobile touch optimizations with native touch support */
@media (max-width: 768px) {
    .bokifa-products-infinite-scroll .swiper-wrapper {
        /* More responsive on small screens with hardware acceleration */
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Larger and more responsive touch targets on mobile */
    .swiper-free-mode .swiper-slide {
        min-height: 52px; /* Larger minimum touch target for small screens */
        /* Better touch feedback */
        transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    }
    
    /* Active touch state for better feedback */
    .swiper-free-mode .swiper-slide:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Ensure wrapper responds to touch properly */
    .bokifa-products-infinite-scroll .swiper-free-mode .swiper-wrapper {
        /* Optimized for touch performance */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}