/**
 * 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;
    }
}