/**
 * Lukuro Product Slider - Styles
 * 
 * Style dla Custom Element <lukuro-product-slider>
 * Bazuje na architekturze WAG z adaptacją do product-slider
 * @version 1.1.0
 */

/* ==========================================================================
   CSS Variables (WAG Compatible)
   ========================================================================== */

:root {
    /* Swiper Navigation */
    --lukuro-swiper-nav-color: var(--white-trans-90, rgba(255, 255, 255, 0.9));
    --lukuro-swiper-nav-color-hover: var(--white, #ffffff);
    --lukuro-swiper-nav-size: 44px;
    --lukuro-swiper-icon-size: var(--icon-size-m, 18px);
    --lukuro-swiper-nav-bg: rgba(255, 255, 255, 0.9);
    --lukuro-swiper-nav-bg-hover: rgba(255, 255, 255, 1);
    --lukuro-swiper-nav-border-radius: 50%;
    --lukuro-swiper-nav-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    
    /* Product Slider Layout */
    --lukuro-slider-gap: 8px;
    --lukuro-thumb-width: 100px;
    --lukuro-thumb-opacity: 0.5;
    --lukuro-thumb-opacity-active: 1;
    --lukuro-transition-speed: 0.15s;
}

/* ==========================================================================
   Base Styles & FOUC Prevention
   ========================================================================== */

lukuro-product-slider {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    opacity: 0;
    transition: opacity var(--lukuro-transition-speed) ease-in-out;
}

/* FOUC Prevention - reveal once initialized */
lukuro-product-slider.lukuro-initialized {
    opacity: 1;
}

/* Loading state */
lukuro-product-slider:not(.lukuro-initialized) {
    min-height: 400px;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

lukuro-product-slider:not(.lukuro-initialized)::before {
    content: "Ładowanie slidera...";
    color: #666;
    font-size: 14px;
}

/* Hide during gallery updates */
lukuro-product-slider.lukuro-updating {
    opacity: 0;
}

/* ==========================================================================
   Product Slider Container
   ========================================================================== */

.lukuro-product-slider-container {
    display: flex;
    gap: var(--lukuro-slider-gap);
    width: 100%;
    position: relative;
}

/* Component wrapper class for global styles */
.lukuro-component {
    position: relative;
}

/* Vertical Layout (default) - thumbnails on left */
.lukuro-product-slider-container[data-layout="vertical"] {
    flex-direction: row;
}

.lukuro-product-slider-container[data-layout="vertical"] .lukuro-main-slider-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    order: 2;
}

.lukuro-product-slider-container[data-layout="vertical"] .lukuro-thumb-slider-wrapper {
    flex: 0 0 var(--lukuro-thumb-width);
    order: 1;
    height: 800px;
    max-height: 100vh;
}

/* Horizontal Layout */
.lukuro-product-slider-container[data-layout="horizontal"] {
    flex-direction: column;
}

.lukuro-product-slider-container[data-layout="horizontal"] .lukuro-main-slider-wrapper {
    order: 1;
}

.lukuro-product-slider-container[data-layout="horizontal"] .lukuro-thumb-slider-wrapper {
    height: 100px;
    order: 2;
    margin-top: 15px;
}

/* ==========================================================================
   Main Slider
   ========================================================================== */

.lukuro-main-slider-wrapper {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.lukuro-main-slider {
    width: 100%;
    height: 100%;
}

.lukuro-main-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.lukuro-product-slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Zoom Container */
.lukuro-image-zoom {
    width: 100%;
    height: 100%;
    cursor: zoom-in;
    overflow: hidden;
}

.lukuro-image-zoom img {
    transition: transform 0.3s ease;
}

.lukuro-image-zoom:hover img {
    transform: scale(1.1);
}

/* Navigation Buttons */
/* Navigation Arrows (WAG Compatible) */
.lukuro-component .swiper-button-next,
.lukuro-component .swiper-button-prev {
    width: var(--lukuro-swiper-nav-size);
    height: var(--lukuro-swiper-nav-size);
    background-color: var(--lukuro-swiper-nav-bg);
    border-radius: var(--lukuro-swiper-nav-border-radius);
    box-shadow: var(--lukuro-swiper-nav-shadow);
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.lukuro-component .swiper-button-next:hover,
.lukuro-component .swiper-button-prev:hover {
    background-color: var(--lukuro-swiper-nav-bg-hover);
}

.lukuro-component .swiper-button-next::after,
.lukuro-component .swiper-button-prev::after {
    font-size: var(--lukuro-swiper-icon-size);
    color: var(--lukuro-swiper-nav-color);
    transition: color 0.2s ease;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
}

.lukuro-component .swiper-button-next:hover::after,
.lukuro-component .swiper-button-prev:hover::after {
    color: var(--lukuro-swiper-nav-color-hover);
}

/* Hide arrows when disabled */
.lukuro-component .swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* Hide nav buttons for single-slide galleries */
.lukuro-product-slider--single-slide .swiper-button-next,
.lukuro-product-slider--single-slide .swiper-button-prev {
    display: none !important;
}

/* ==========================================================================
   Thumbnail Slider
   ========================================================================== */

.lukuro-thumb-slider-wrapper {
    position: relative;
}

/* Vertical Thumbnails */
.lukuro-product-slider-container[data-layout="vertical"] .lukuro-thumb-slider {
    height: 100%;
}

.lukuro-product-slider-container[data-layout="vertical"] .lukuro-thumb-slider .swiper-wrapper {
    display: flex !important;
    flex-direction: column !important;
}

.lukuro-product-slider-container[data-layout="vertical"] .lukuro-thumb-slider .swiper-slide {
    width: 100%;
    height: calc((100% - 24px) / 4); /* 4 slajdy z 8px gap między nimi */
    flex-shrink: 0;
    margin-bottom: 8px;
    opacity: var(--lukuro-thumb-opacity);
    cursor: pointer;
    transition: opacity 0.3s ease;
    border: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.lukuro-product-slider-container[data-layout="vertical"] .lukuro-thumb-slider .swiper-slide:last-child {
    margin-bottom: 0;
}

.lukuro-product-slider-container[data-layout="vertical"] .lukuro-thumb-slider .swiper-slide:hover {
    opacity: var(--lukuro-thumb-opacity-active);
}

.lukuro-product-slider-container[data-layout="vertical"] .lukuro-thumb-slider .swiper-slide-thumb-active {
    opacity: var(--lukuro-thumb-opacity-active);
}

/* Horizontal Thumbnails */
.lukuro-product-slider-container[data-layout="horizontal"] .lukuro-thumb-slider {
    width: 100%;
    height: 100px;
}

.lukuro-product-slider-container[data-layout="horizontal"] .lukuro-thumb-slider .swiper-slide {
    width: calc((100% - 24px) / 4); /* 4 slajdy z 8px gap między nimi */
    height: 100%;
    flex-shrink: 0;
    margin-right: 8px;
}

.lukuro-product-slider-container[data-layout="horizontal"] .lukuro-thumb-slider .swiper-slide:last-child {
    margin-right: 0;
}

/* Thumbnail Images */
.lukuro-thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
}

.lukuro-thumb-slider .swiper-slide-thumb-active .lukuro-thumb-image {
    transform: scale(1);
}

.lukuro-thumb-image:hover {
    transform: scale(1.1);
}

/* ==========================================================================
   Transitions & Animations
   ========================================================================== */

lukuro-product-slider.lukuro-updating .lukuro-product-slider-container {
    pointer-events: none;
}

/* Loading Animation */
@keyframes lukuroSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.lukuro-product-slider-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    flex-direction: column;
    gap: 15px;
}

.lukuro-product-slider-loading::before {
    content: "";
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007cba;
    border-radius: 50%;
    animation: lukuroSpin 1s linear infinite;
}

/* ==========================================================================
   States
   ========================================================================== */

/* Stan ukryty slidera */
lukuro-product-slider.lukuro-hidden {
    display: none !important;
}

/* Loading state */
lukuro-product-slider.lukuro-loading {
    opacity: 0.7;
    pointer-events: none;
}

lukuro-product-slider.lukuro-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--lukuro-color-primary, #007cba);
    border-top-color: transparent;
    border-radius: 50%;
    animation: lukuro-spin 1s linear infinite;
    z-index: 10;
}

@keyframes lukuro-spin {
    to {
        transform: rotate(360deg);
    }
}

.lukuro-product-slider-empty,
.lukuro-product-slider-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: #f8f8f8;
    color: #666;
    font-size: 16px;
    text-align: center;
}

.lukuro-product-slider-error {
    background: #ffeaea;
    color: #d63638;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Responsive Design - WAG Compatible */
@media (min-width: 768px) {
    .lukuro-product-slider-container {
        height: 800px;
        max-height: 100vh;
    }
    
    .lukuro-product-slider-container[data-layout="vertical"] .lukuro-thumb-slider-wrapper {
        height: 800px;
        max-height: 100vh;
    }
}

@media (max-width: 767px) {
    /* Hide thumbnails on mobile */
    .lukuro-thumb-slider-wrapper {
        display: none;
    }
    
    /* Hide navigation arrows on mobile */
    .lukuro-main-slider-wrapper .swiper-button-next,
    .lukuro-main-slider-wrapper .swiper-button-prev {
        display: none !important;
    }
    
    .lukuro-product-slider-container {
        gap: 0; /* Remove gap when thumbs are hidden */
    }
    
    .lukuro-main-slider-wrapper {
        width: 100%; /* Ensure main slider takes full width */
    }
}

/* Mobile Scrollbar (WAG Compatible) */
.lukuro-main-slider-wrapper .swiper-scrollbar {
    left: 0 !important;
    bottom: 0 !important; /* Przenieś wyżej dla debugowania */
    top: auto !important;
    height: 2px !important; /* Większa wysokość dla debugowania */
    width: 100% !important;
    background: rgba(0,0,0,0.1) !important; /* Tło dla debugowania */
    z-index: 100 !important;
    position: absolute !important;
}

.lukuro-main-slider-wrapper .swiper-scrollbar-drag {
    border-radius: 0;
    background: #000 !important; /* Tymczasowo czerwony dla debugowania */
    height: 2px !important; /* Większa wysokość dla debugowania */
    opacity: 1 !important;
}

/* Hide scrollbar on desktop (>= 767px) */
@media (min-width: 767px) {
    .lukuro-main-slider-wrapper .swiper-scrollbar {
        display: none !important;
    }
}

/* Show scrollbar only on mobile for multi-slide galleries */
@media (max-width: 766px) {
    .lukuro-main-slider-wrapper .swiper-scrollbar {
        display: block;
    }
    
    /* Hide scrollbar for single-slide galleries */
    .lukuro-product-slider--single-slide .swiper-scrollbar {
        display: none !important;
    }
}

/* Drift.js Zoom Styles */
.swiper-slide {
    position: relative;
    overflow: visible; /* Pozwól na zoom pane */
}

.lukuro-product-slider-image {
    position: relative;
}

/* Drift external zoom pane w slajdzie */
.drift-zoom-drift-zoom-pane {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 200px !important;
    height: 200px !important;
    z-index: 1000 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    background: #fff !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Zachowaj proporcje obrazu w zoom pane */
.drift-zoom-drift-zoom-pane img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
.drift-zoom-pane img  {
    object-fit: cover !important;

}
/* Responsive zoom pane */
@media (max-width: 1200px) {
    .drift-zoom-drift-zoom-pane {
        width: 150px !important;
        height: 150px !important;
    }
}

@media (max-width: 767px) {
    .drift-zoom-drift-zoom-pane {
        display: none !important;
    }
}

/* ==========================================================================
   Swiper Navigation Arrows (WAG Compatible)
   ========================================================================== */

/* Swiper 11 Navigation - Force Override */
.lukuro-product-slider {
    --swiper-navigation-color: rgba(255, 255, 255, 0.9) !important;
    --swiper-theme-color: rgba(255, 255, 255, 0.9) !important;
    --swiper-navigation-size: 60px;
}

.lukuro-product-slider .swiper-button-next,
.lukuro-product-slider .swiper-button-prev {
    color: rgba(255, 255, 255, 0.9) !important;
    background-color: rgba(0, 0, 0, 0.001) !important;
    border-radius: 0% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.01) !important;
    transition: background-color 0.2s ease, opacity 0.2s ease, color 0.2s ease !important;
    z-index: 10 !important;
}

.lukuro-product-slider .swiper-button-next:hover,
.lukuro-product-slider .swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #fff !important;
}

/* Show arrows always (ignore disabled state) */
.lukuro-product-slider .swiper-button-disabled,
.lukuro-product-slider .swiper-button-disabled-custom {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
}

/* Hide arrows for single-slide galleries */
.lukuro-product-slider--single-slide .swiper-button-next,
.lukuro-product-slider--single-slide .swiper-button-prev {
    display: none !important;
}

/* Hide arrows on mobile */
@media (max-width: 766px) {
    .lukuro-main-slider-wrapper .swiper-button-next,
    .lukuro-main-slider-wrapper .swiper-button-prev {
        display: none;
    }
}

/* ==========================================================================
   Integration with WooCommerce
   ========================================================================== */

/* WooCommerce product page integration */
.single-product lukuro-product-slider {
    margin-bottom: 0px;
}

/* WooCommerce gallery replacement */
.woocommerce-product-gallery {
    display: none;
}

.woocommerce-product-gallery + lukuro-product-slider {
    display: block;
}

/* ==========================================================================
   LazySizes Integration
   ========================================================================== */

/* Lazy loading states for main slider images */
.lukuro-product-slider-image.lazyload {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lukuro-product-slider-image.lazyloading {
    opacity: 0.5;
    background: #f8f8f8;
}

.lukuro-product-slider-image.lazyloaded {
    opacity: 1;
}

.lukuro-product-slider-image.lazyerror {
    opacity: 1;
    background: #ffeaea;
}

/* Lazy loading states for thumbnail images */
.lukuro-thumb-image.lazyload {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lukuro-thumb-image.lazyloading {
    opacity: 0.3;
    background: #f8f8f8;
}

.lukuro-thumb-image.lazyloaded {
    opacity: var(--lukuro-thumb-opacity);
}

.lukuro-thumb-image.lazyerror {
    opacity: var(--lukuro-thumb-opacity);
    background: #ffeaea;
}

/* Active thumbnail should be fully visible even when lazy loading */
.lukuro-thumb-slider .swiper-slide-thumb-active .lukuro-thumb-image.lazyloaded {
    opacity: var(--lukuro-thumb-opacity-active);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.lukuro-product-slider-image:focus,
.lukuro-thumb-image:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .lukuro-product-slider-image,
    .lukuro-thumb-image,
    .lukuro-main-slider-wrapper .swiper-button-next,
    .lukuro-main-slider-wrapper .swiper-button-prev,
    lukuro-product-slider.lukuro-updating {
        transition: none;
    }
    
    .lukuro-image-zoom:hover img {
        transform: none;
    }
    
    @keyframes lukuroSpin {
        0%, 100% { transform: rotate(0deg); }
    }
}