/* Glide Slider - Przewijalna nawigacja na mobile */
/* Ten plik dodaje funkcjonalność przewijalnej nawigacji z auto-centrowaniem */

/* Nadpisanie domyślnych stylów nawigacji */
.wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__navigation {
    /* Zmiana na przewijalny kontener */
    max-width: 90% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    
    /* Zmiana układu na flex-start zamiast center */
    justify-content: flex-start !important;
    
    /* Zmniejszenie odstępów */
    gap: 12px !important;
    padding: 8px !important;
    
    /* Stylizacja scrollbara */
    scrollbar-width: thin;
    scrollbar-color: rgba(31, 124, 78, 0.3) rgba(255, 255, 255, 0.1);
}

/* Stylizacja scrollbara dla WebKit (Chrome, Safari) */
.wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__navigation::-webkit-scrollbar {
    height: 4px !important;
    display: block !important;
}

.wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__navigation::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__navigation::-webkit-scrollbar-thumb {
    background: rgba(31, 124, 78, 0.3);
    border-radius: 2px;
    transition: background 0.3s ease;
}

.wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__navigation::-webkit-scrollbar-thumb:hover {
    background: rgba(31, 124, 78, 0.5);
}

/* Zapobieganie kurczeniu się przycisków */
.wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__nav-button {
    flex-shrink: 0 !important;
    min-width: auto !important;
}

/* Dodatkowa animacja dla aktywnego przycisku */
.wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__nav-button.glide__nav-button--active {
    transform: scale(1.05);
    transition: all 0.3s ease !important;
}

/* Media queries dla mobile */
@media (max-width: 768px) {
    .wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__navigation {
        max-width: 85% !important;
        gap: 8px !important;
        padding: 6px !important;
        bottom: 10px !important;
    }
    
    .wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__nav-button {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

/* Wskaźniki przewijania - opcjonalne gradienty na bokach */
.wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__navigation::before,
.wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__navigation::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__navigation::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
}

.wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__navigation::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
}

/* Pokazuj gradienty gdy jest możliwość przewijania */
.wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__navigation.has-scroll-left::before {
    opacity: 1;
}

.wp-block-glide-blocks-slider:not(.wp-block-glide-blocks-product-slider) .glide__navigation.has-scroll-right::after {
    opacity: 1;
}