/* 1. TO JEST KLUCZOWE: Rodzic (formularz) musi być relative, żeby absolute wyników wiedziało, czego się trzymać */
.navbar-search-form {
    position: relative !important;
    overflow: visible !important; /* To jest magia, która wyłączy obcinanie! */
}

/* 2. Główny kontener wyników z nowym tłem i cieniem */
.search-result {
    position: absolute!important;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 12px; /* Odstęp od inputa */
    background: #f4f7f6; /* Bardzo delikatne, eleganckie tło całości */
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05); /* Miękki cień i subtelna zewnętrzna ramka */
    padding: 8px 0; /* Górny i dolny margines wewnętrzny */
    display: none;
}

.search-result.active {
    display: block;
    animation: slideDown 0.2s ease-out forwards;
}

/* 3. Lista i scrollbar */
.search-result ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 450px;
    overflow-y: auto;
}

/* Ładniejszy scrollbar dla webkita */
.search-result ul::-webkit-scrollbar {
    width: 6px;
}
.search-result ul::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

/* 4. Pojedynczy produkt jako "Karta" */
.small-product {
    display: block;
    padding: 12px 16px;
    background: #ffffff; /* Biała karta produktu */
    margin: 0 12px 10px 12px; /* Odstępy: góra/dół i po bokach (oddziela od brzegów kontenera) */
    border-radius: 8px;
    border: 1px solid #e9ecef !important; /* Wyraźna, ale jasna ramka karty */
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Usuwamy margines z ostatniego elementu, żeby dół kontenera wyglądał równo */
.small-product:last-child {
    margin-bottom: 0;
}

/* 5. Efekt najechania myszką (Hover) */
.small-product:hover {
    border-color: #b8daff !important; /* Zmiana koloru ramki na niebieskawy */
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.08); /* Lekki, niebieski cień */
    transform: translateY(-2px); /* Delikatne podniesienie karty */
}

/* 6. Wnętrze karty (zdjęcie, tekst) */
.formated-content {
    display: flex;
    align-items: center;
}

.small-product img {
    border-radius: 6px;
    object-fit: cover;
    aspect-ratio: 1/1;
    max-height: 80px;
    width: auto;
    border: 1px solid #f1f3f5;
}

.small-product h5 {
    font-size: 20px!important;
    font-weight: 600;
    color: black;
    margin: 0 0 4px 0;
}

.small-product .sprice {
    font-size: 14px;
    font-weight: 700;
    color: black;
    margin: 0;
}

/* 7. Produkty niedostępne */
.small-product.no_available {
    background: white!important;
    border-color: #e9ecef !important;
    opacity: 0.7;
}

.small-product.no_available:hover {
    transform: none;
    box-shadow: none;
    border-color: #e9ecef !important;
}

/* Animacja */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.search-result article div a{
    text-decoration: none!important;
}
.bigmenu-category-grid img{
    width: 41px;
}
.navbar .bigmenu-category-grid a{
    padding-top:0.5rem!important;
    padding-bottom: 0.5rem!important;
}

.promo-grid {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 1rem;
    width: 100%;
}
.promo-grid a.promo-item {
    position: relative;
    display: flex; /* Zmieniamy z block, aby lepiej kontrolować wysokość */
    flex: 1;       /* Każdy boks zajmie tyle samo szerokości */
    overflow: hidden;
    border-radius: 8px; /* Opcjonalnie, by pasowało do stylu grafik */
}

/* Ustawiamy proporcje 40% / 30% / 30% */
.promo-grid a.promo-item:nth-child(1) {
    flex: 0 0 40%; /* Nie rośnij, nie kurcz się, zajmij bazowo 40% */
}

.promo-grid a.promo-item:nth-child(2),
.promo-grid a.promo-item:nth-child(3) {
    flex: 0 0 calc(30% - 0.5rem); /* Odejmujemy połowę gap, żeby zmieściło się w 100% */
}

.promo-grid a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Wypełnia przestrzeń bez pasów */
    transition: transform 0.2s ease;
}

/* Opcjonalnie: Responsywność - na komórkach dajemy 100% szerokości */
@media (max-width: 768px) {
    .promo-grid {
        flex-direction: column;
    }
    .promo-grid a.promo-item:nth-child(1),
    .promo-grid a.promo-item:nth-child(2),
    .promo-grid a.promo-item:nth-child(3) {
        flex: 0 0 100%;
    }
}

.addToFavourite.active{
    color: var(--theme-7a9826)!important;
}

/* 1. Rozciągnięcie kontenera na całą wysokość kolumny */
.rooms-item {
    height: 100%;
    position: relative; /* Przydatne, żeby np. wypozycjonować przycisk/span na zdjęciu */
    overflow: hidden; /* Opcjonalne: zapobiega wychodzeniu obrazka poza ramy (np. przy zaokrąglonych rogach) */
    display: flex; /* Ułatwia zarządzanie zawartością, jeśli masz tam więcej rzeczy */
    flex-direction: column;
}

/* 2. Rozciągnięcie obrazka i zachowanie jego proporcji */
.rooms-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* KLUCZOWE: Obrazek wypełni cały div, przycinając brzegi, ale nie zniekształci się */
    display: block;
}

/* 3. Opcjonalnie: Pozycjonowanie przycisku, jeśli miał być nałożony na zdjęcie */
.rooms-item .btn {
    position: absolute;
    bottom: 20px; /* Zmień tę wartość, aby podnieść/opuścić przycisk */
    left: 50%;
    transform: translateX(-50%); /* To zaklęcie idealnie wyśrodkowuje element */
    z-index: 2;
}
.badges-wrapper{
    position: absolute;
    margin-top: 60px;
    pointer-events: none;
}
.button-tabs .btn.active{
    background: white;
    color: black;
}
.compare-header img{
    max-width: 300px;
}