/* Główne okno wyszukiwania mobilnego */
.search-overlay-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Zajmuje całą wysokość ekranu */
    background-color: rgb(239, 241, 243);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); /* Dodany cień */
    z-index: 10000;
    flex-direction: column;
    overflow-y: auto; /* Scroll dla długich wyników */
    display: none;
    box-sizing: border-box;
}

.search-header-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
}

/* Styl dla przycisku "Back" */
.back-btn-mobile {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333; /* Kolor ikony strzałki */
}

.search-input-mobile {
    flex-grow: 1;
    padding: 8px 10px; /* Normalny padding */
    border: none;
    border-radius: 25px;
    margin: 0 10px; /* Margines pomiędzy polem wyszukiwania a przyciskiem */
    font-size: 16px; /* Standardowy rozmiar czcionki */
    box-sizing: border-box; /* Upewnij się, że padding nie rozciąga kontenera */
    min-width: 0; /* Zapobiega rozciąganiu na pełną szerokość */
}

/* Styl placeholdera */
.search-input-mobile::placeholder {
    color: #333;
    font-size: 16px; /* Większy placeholder */
    font-weight: 400;
}

/* Usunięcie obramowania po kliknięciu w pole wyszukiwania */
.search-input-mobile:focus {
    outline: none; /* Usuwa niebieskie obramowanie */
    box-shadow: none; /* Zapewnia brak cienia po kliknięciu */
}

/* Styl dla przycisku zamykania (krzyżyk) */
.close-btn-mobile {
    background: none;
    border: none;
    font-size: 24px; /* Standardowy rozmiar ikony */
    color: #333;
    cursor: pointer;
    margin-left: auto; /* Przesunięcie krzyżyka na prawą stronę */
}

/* Kontener dla sekcji zakładek i tagów */
.search-tabs-container {
    margin-top: 20px; /* Margines od góry dla całego kontenera */
}

/* Styl dla zakładek (Produkty, Kategorie, Marki) */
.search-tabs-mobile {
    display: flex;
    justify-content: center; /* Wyśrodkowanie zakładek */
    gap: 20px; /* Odstępy między zakładkami */
    margin-bottom: 20px; /* Większy margines w dół, aby odsunąć od tagów */
}

.tab-btn-mobile {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    color: #999; /* Kolor dla nieaktywnych zakładek */
    padding: 5px 10px;
}

.tab-btn-mobile.active {
    font-weight: bold; /* Pogrubienie aktywnej zakładki */
    color: #000; /* Kolor czarny dla aktywnej zakładki */
    position: relative;
}

.tab-btn-mobile.active::after {
    content: "";
    display: block;
    width: 90%; /* Zwiększona szerokość linii */
    height: 2px; /* Zmniejszona grubość linii */
    background-color: #000; /* Kolor podkreślenia */
    position: absolute;
    left: 50%; /* Wyśrodkowanie linii */
    bottom: -5px;
    transform: translateX(-50%);
}

/* Styl dla tagów wyszukiwania */
.search-tags-mobile {
    display: flex;
    justify-content: center; /* Wyśrodkowanie poziome tagów */
    flex-wrap: wrap;
    gap: 10px; /* Odstępy między tagami */
    margin-bottom: 20px; /* Większy margines w dół, aby odsunąć od wyników */
}

.tag-btn-mobile {
    background-color: #CC240F; /* Czerwony kolor dla tagów */
    color: white;
    padding: 5px 8px;
    border: none;
    border-radius: 5px; /* Zaokrąglone rogi */
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/************************  Wyszukiwarka itemy */

/* Styl dla pojedynczego elementu wyniku (opakowanego w link) */
.search-item-mobile {
    display: flex;
    align-items: center;
    background-color: white; /* Białe tło dla produktu */
    border-bottom: 1px solid #ddd; /* Cienka szara linia oddzielająca produkty */
    transition: background-color 0.3s ease;
    padding: 10px 10px 10px 25px; /* Zwiększ padding od lewej, aby przesunąć całość w prawo */
}

/* Styl dla obrazka produktu */
.search-item-mobile img {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    border-radius: 8px;
}

/* Informacje o produkcie */
.product-info-mobile {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 5px;
}

/* ✅ Tytuł produktu - PEŁNY (bez skracania) */
.product-title-mobile {
    font-size: 14px;
    margin-bottom: 5px;
    color: #333;
    line-height: 1.4;
    /* ✅ USUNIĘTE skracanie */
}

/* ✅ SKU produktu */
.product-sku-mobile {
    font-size: 11px;
    color: #666;
    margin-bottom: 8px;
}

/* ✅ Kontener dla dostępności + ceny */
.price-availability-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 5px;
}

/* ✅ Dostępność - zielona */
.mobile-available-tag {
    font-size: 11px;
    font-weight: 600;
    color: #2e7d32;
}

/* ✅ Niedostępność - czerwona */
.mobile-not-available-tag {
    font-size: 11px;
    font-weight: 600;
    color: #d32f2f;
}

/* ✅ Cena produktu */
.product-price-mobile {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-align: right;
}

/* Kontener dla przycisku */
.button-container-show-products {
    display: flex;
    justify-content: center; /* Wyśrodkowanie poziome */
    align-items: center; /* Wyśrodkowanie pionowe */
    padding: 20px 0; /* Odstępy nad i pod kontenerem */
    background-color: rgb(239, 241, 243);
}

/* Styl dla przycisku */
.show-all-products-btn {
    background: linear-gradient(to right, #0d3c55, #00b894); /* Gradient od ciemnego niebieskiego do zielonego */
    color: white;
    border: none;
    border-radius: 25px;
    padding: 15px 30px; /* Większe wymiary przycisku */
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Efekt hover dla przycisku */
.show-all-products-btn:hover {
    transform: scale(1.05); /* Powiększenie przycisku na hover */
}

@media (max-width: 515px) {
    .search-header-mobile {
        width: 100%; /* Upewnij się, że nagłówek ma pełną szerokość */
        box-sizing: border-box;
    }

    .search-input-mobile {
        font-size: 14px; /* Normalny rozmiar tekstu */
        flex-grow: 1; /* Rozciągnij pole wyszukiwania na pełną szerokość */
        padding: 8px 10px;
    }

    /* ✅ USUNIĘTE skracanie tytułu */
    .product-title-mobile {
        font-size: 14px;
        color: #333;
        line-height: 1.4;
    }

    .product-info-mobile {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* Zapewnienie, że wszystko będzie się mieścić w kontenerze i nie przesuwało */
    body {
        overflow-x: hidden; /* Zablokowanie przewijania w poziomie */
    }
}

@media (max-width: 360px) {
 
    .product-title-mobile {
        font-size: 13px;
    }

    .tag-btn-mobile {
        padding: 5px 5px;
    }
}



@media (max-width: 325px) {
 
   .product-price-mobile {
      font-size: 12px;
   }

}