/* Przycisk zamknięcia panelu szczegółów produktu */
.close-details {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0.7;
}

.close-details:hover {
    opacity: 1;
}

/* Styl dla aktywnego elementu na liście produktów */
.search-result-item.active {
    background-color: #f8f4e8;
    border-left: 3px solid #CE8946;
    position: relative;
}

.search-result-item.active::after {
    content: '';
  display:none;
}

/* Główny wrapper dla kontenera wyszukiwania */
.search-wrapper {
    display: flex;
    width: 100%;
    border: 1px solid #ddd;
    background: white;
    margin-top: 5px;
    position: relative;
}

/* Kolumna 1 - Lista produktów */
.column-1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    max-height: 500px;
    overflow-y: auto;
}

/* Kolumna 2 - Szczegóły produktu */
.column-2 {
    width: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    border-left: 0;
    background: white;
    position: relative;
    max-height: 500px;
    overflow-y: auto;
}

/* Stan po najechaniu na produkt */
.search-wrapper.show-details .column-1 {
    width: 50%;
}
.sk-add-to-cart-button{
    background-color: #CE8946;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.2s ease;
}
.search-wrapper.show-details .column-2 {
    width: 50%;
    padding: 15px;
    opacity: 1;
    border-left: 1px solid #ddd;
    box-shadow: inset 5px 0 15px -5px rgba(0, 0, 0, 0.05);
}

/* Lista kategorii */
.search-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
    max-height: 200px; /* Dodaj maksymalną wysokość */
    overflow-y: auto; /* Dodaj przewijanie */
}

/* Pojedyncza kategoria */
.search-category-item {
    display: block;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
    margin-bottom: 2px;
}

/* Hover efekt dla kategorii */
.search-category-item:hover {
    background: #f5f5f5;
}

/* Lista produktów */
.results-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: auto;
    max-height: 250px; /* Zmniejszyłem z 300px */
    margin-bottom: 15px;
    padding-right: 5px;
}

/* Wpisy produktów i kategorii */
.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 2px;
    position: relative;
    min-height: 60px;
    box-sizing: border-box;
}

/* Produkty mają obrazek */
.search-result-item img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    object-fit: cover;
}

/* Kategorie wyglądają jak produkty, ale bez obrazka */
.search-result-category {
    padding-left: 15px;
    font-weight: bold;
}

/* Hover efekt dla produktów */
.search-result-item:hover {
    background: #f5f5f5;
}

/* Stylizacja kontenera Swiper */
.search-results .swiper-container {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    margin-bottom: 15px;
    padding-bottom: 0; /* Usuń padding, jeśli istnieje */
}

/* Obrazki w slajdach */
.search-results .swiper-slide img {
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Przeniesienie kropek na dół */
.search-results .swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 0 !important;
    right: 0 !important;
    transform: none;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Stylizacja strzałek */
#search-results .swiper-button-prev,
#search-results .swiper-button-next {
    color: white;
    background-image: none !important;
    padding: 10px;
    border-radius: 50%;
    width: 55px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#search-results .swiper-button-prev::after,
#search-results .swiper-button-next::after {
    display: none;

}

.search-results .swiper-button-prev {
    left: 10px;
}

.search-results .swiper-button-next {
    right: 10px;
}

.search-results .swiper-pagination-bullet{
    background: transparent;
    border: solid 1px #CE8946;
    opacity: 1;
} 
.search-results .swiper-pagination-bullet-active{
    background: #CE8946;
    border: solid 1px #CE8946; 
}

/* Style dla warunku jednego slajdu w Swiperze */
.search-results .swiper-container.single-slide .swiper-button-prev,
.search-results .swiper-container.single-slide .swiper-button-next {
    display: none;
}

/* Style dla nagłówków sekcji w wynikach wyszukiwania */
.results-headling {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding: 10px 0;
    margin: 5px 0;
    border-bottom: 2px solid #CE8946;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.results-headling::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background-color: #CE8946;
}

/* Elementy szczegółów produktu */
.column-2 h2 {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}

.column-2 .price {
    font-size: 18px;
    font-weight: bold;
    color: #CE8946;
    margin-bottom: 10px;
}

.column-2 .stock {
    font-size: 14px;
    margin-bottom: 15px;
}

.column-2 .stock.in-stock {
    color: #4CAF50;
}

.column-2 .stock.out-of-stock {
    color: #F44336;
}

.column-2 .product-description {
    margin-bottom: 20px;
    line-height: 1.6;
    color: #555;
}



/* Kontener dla inputa i przycisku X */
.searchbar-container {
    align-items: center;
    width: 100%;
    border: 1px solid #ddd;
    padding: 0;
    border-radius: 5px;
    background: white;
    position: relative;
    z-index: 20;
    box-shadow: 0px 1px 4px 0px #00000040;
    min-width: 340px;
    display: flex; /* Dodajemy flex, aby wyrównać elementy */
}

/* Pole wyszukiwania */
.searchbar-container #search-input {
    width: 100%;
    padding: 5px 35px 5px 10px;
    border: none;
    outline: none;
    font-size: 14px;
  background: none;
  font-weight: 400;
  color: #A0A0A0;
}

/* Dla normalnego searchbar-container */
.searchbar-container::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.0258 12.612L14.7527 12.9683L15.0777 13.278L20.2705 18.2265L20.2707 18.2267C20.5764 18.5178 20.5764 18.9806 20.2707 19.2717C19.951 19.5761 19.4218 19.5761 19.1022 19.2717L13.9095 14.3234L13.6136 14.0415L13.2785 14.2753C11.9505 15.2016 10.311 15.7476 8.53167 15.7476C4.07152 15.7476 0.5 12.3125 0.5 8.12381C0.5 3.93513 4.07152 0.5 8.53167 0.5C12.9918 0.5 16.5633 3.93513 16.5633 8.12381C16.5633 9.80027 15.9923 11.3506 15.0258 12.612ZM8.53167 14.248C9.36968 14.248 10.2 14.0908 10.9755 13.785C11.7509 13.4791 12.4571 13.0302 13.053 12.4628C13.649 11.8953 14.1231 11.2203 14.4471 10.4755C14.7711 9.73074 14.9382 8.93154 14.9382 8.12381C14.9382 7.31608 14.7711 6.51688 14.4471 5.77208C14.1231 5.02735 13.649 4.3523 13.053 3.78481C12.4571 3.21737 11.7509 2.76848 10.9755 2.46262C10.2 2.15677 9.36968 1.99963 8.53167 1.99963C7.69366 1.99963 6.86332 2.15677 6.08788 2.46262C5.3124 2.76848 4.60625 3.21737 4.01032 3.78481C3.41434 4.3523 2.94021 5.02735 2.61624 5.77208C2.29224 6.51688 2.12513 7.31608 2.12513 8.12381C2.12513 8.93154 2.29224 9.73074 2.61624 10.4755C2.94021 11.2203 3.41434 11.8953 4.01032 12.4628C4.60625 13.0302 5.3124 13.4791 6.08788 13.785C6.86332 14.0908 7.69366 14.248 8.53167 14.248Z' fill='%23A0A0A0' stroke='%23A0A0A0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

/* Dla overlay-container usuwamy SVG */
.search-overlay-container .searchbar-container::after {
    content: none;
}

/* Przycisk X do czyszczenia */
#clear-search {
    position: absolute;
    right: 10px;
    cursor: pointer;
    font-size: 18px;
    color: #aaa !important;
    display: none; /* Ukryty, dopóki coś nie zostanie wpisane */
}

/* Hover efekt na X */
#clear-search:hover {
    color: #333;
}

/* Loader Overlay */
.search-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.search-loader {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #CE8946;
    border-radius: 50%;
    animation: search-spin 1s linear infinite;
}

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

/* Pozycjonowanie dla overlaya w wynikach wyszukiwania */
#search-results {
    position: relative;
    border-radius: 5px;
    overflow: visible;
}

/* Stylizacja scrollbarów dla wszystkich elementów z overflow */
.results-list::-webkit-scrollbar,
.column-1::-webkit-scrollbar,
.column-2::-webkit-scrollbar,
#search-results::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.results-list::-webkit-scrollbar-track,
.column-1::-webkit-scrollbar-track,
.column-2::-webkit-scrollbar-track,
#search-results::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.results-list::-webkit-scrollbar-thumb,
.column-1::-webkit-scrollbar-thumb,
.column-2::-webkit-scrollbar-thumb,
#search-results::-webkit-scrollbar-thumb {
    background: rgba(206, 137, 70, 0.4);
    border-radius: 10px;
}

.results-list::-webkit-scrollbar-thumb:hover,
.column-1::-webkit-scrollbar-thumb:hover,
.column-2::-webkit-scrollbar-thumb:hover,
#search-results::-webkit-scrollbar-thumb:hover {
    background: rgba(206, 137, 70, 0.6);
}

/* Style dla Firefox */
.results-list, .column-1, .column-2, #search-results {
    scrollbar-width: thin;
    scrollbar-color: rgba(206, 137, 70, 0.4) rgba(0, 0, 0, 0.05);
}

/* Ładniejszy wygląd wyników bez zawartości */
#search-results p.no-results {
    padding: 15px;
    font-style: italic;
    color: #666;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 4px;
    margin: 10px 0;
    width: 100%;
}

.search-result-item strong,
.search-category-item strong {
    color: #CE8946;
    font-weight: bold;
}

/* NOWE STYLE DLA OVERLAYA */

/* Overlay na całą stronę */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding-top: 100px;
    overflow-y: auto;
}

/* Widoczny overlay */
.search-overlay.active {
    display: flex;
}

/* Container dla wyszukiwarki w centrum overlaya */
.search-overlay-container {
    width: 90%;
    max-width: 1200px;
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    max-height: 85vh;
    overflow-y: auto;
}

/* Kontener dla inputa i przycisku X w overlayu */
.search-overlay .searchbar-container {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
    z-index: 20;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    top: 0;
}

.search-overlay-container #search-input {
    width: 100%;
    padding: 5px 35px 5px 10px;
    border: none;
    outline: none;
    font-size: 16px;
    background-image: none;
}

/* Przycisk zamknięcia overlaya */
.close-overlay {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10000;
}

.close-overlay:hover {
    color: #CE8946;
}

/* Zablokowanie przewijania strony gdy overlay jest aktywny */
body.overlay-active {
    overflow: hidden;
}

/* Dla mobilnych urządzeń - układ kolumn na całą szerokość */
@media (max-width: 768px) {
    .search-wrapper.show-details .column-1 {
        width: 100%;
    }
    
    .search-wrapper.show-details .column-2 {
        width: 100%;
        border-left: 0;
        border-top: 1px solid #ddd;
        margin-top: 15px;
    }
    
    .search-wrapper {
        flex-direction: column;
    }
    
    .search-overlay-container {
        width: 95%;
        padding: 15px;
    }
    
    .search-overlay {
        padding-top: 50px;
    }
    
    .search-result-item, .search-category-item {
        padding: 8px;
    }
    
    .results-headling {
        font-size: 14px;
        padding: 8px 0;
    }
    
    .search-results .swiper-container {
        height: 200px;
    }
}

/* Dodaj te style do istniejącego CSS */

/* 1. Popraw obszar klikalny dla pola wyszukiwania */
#search-input {
    -webkit-appearance: none; /* Dla Safari */
    appearance: none;
    cursor: pointer;
    position: relative;
    z-index: 5; /* Upewnij się, że ma odpowiedni z-index */
    min-height: 37px; /* Większa wysokość dla lepszego klikania na mobile */
    touch-action: manipulation; /* Poprawa obsługi dotyku */
}

/* 2. Usuń wszelkie nakładające się elementy */
.searchbar-container::after {
    z-index: 1; /* Niższy z-index niż input */
    pointer-events: none; /* Zapobiega przechwytywaniu kliknięć */
}

/* 3. Zapewnij wystarczający padding dla łatwiejszej obsługi dotykowej */
.searchbar-container {
    touch-action: manipulation;
}

/* 4. Naprawia problemy z pozycjonowaniem elementu #clear-search */
#clear-search {
    position: absolute;
    right: 10px;
    z-index: 10; /* Wyższy niż input */
    padding: 10px; /* Większy obszar dotykowy */
    touch-action: manipulation;
    width: 40px; /* Szerszy obszar dotykowy */
    height: 40px; /* Wyższy obszar dotykowy */
    text-align: center;
    line-height: 20px; /* Wyśrodkowanie znaku X */
}

/* 5. Dodaj style dla aktywnego stanu input, aby było widać że reaguje */
#search-input:active, 
#search-input:focus {
    outline: 2px solid rgba(252, 215, 146, 0.5); /* Subtelne podświetlenie */
}

/* 6. Poprawa mobilnego doświadczenia */
@media (max-width: 768px) {
    #search-input {
        min-height: 44px; /* Jeszcze większa wysokość dla mobile */
        font-size: 16px; /* Zapobiega automatycznemu powiększaniu na iOS */
    }
    
    .searchbar-container {
        margin: 5px 0; /* Dodatkowy odstęp wokół kontenera */
    }
}


/* Stan aktywny - wypełnione brązowym kolorem */
.sk-wishlist-added svg path {
    fill: #CE8946;
    stroke: #CE8946;
}