/* Podmiana tekstu "Właściwości pokoju" na "Właściwości apartamenty" */
.tabs__item#room_data_mobile span {
    font-size: 0; /* Ukrywa oryginalny tekst */
}

.tabs__item#room_data_mobile span::after {
    content: "Właściwości apartamenty"; /* Dodaje nowy tekst */
    font-size: 16px; /* Rozmiar tekstu - dostosuj do potrzeb */
    display: inline-block; /* Poprawne wyświetlanie */
    color: #000; /* Widoczny kolor - zmień, jeśli tło wymaga innego */
}

/* Ukrycie całego elementu tabs__item */
.tabs__item#room_data_mobile {
    display: none; /* Ukrywa całą zakładkę */
}

#room_data h2.label {
    font-size: 0; /* Ukrywa oryginalny tekst "Właściwości pokoju:" */
}

#room_data h2.label::after {
    content: "Właściwości apartamentu:"; /* Dodaje nowy tekst */
    font-size: 16px; /* Rozmiar czcionki - dostosuj do stylu strony */
    display: inline-block; /* Poprawne wyświetlanie */
    color: #000; /* Widoczny kolor - zmień, jeśli tło wymaga innego */
}

.footer-wrapper.container img {
    filter: saturate(50%);
}

.aboutmain img {
    filter: saturate(50%);
}

.welcome {
    background-color: #808080; /* Średnio szary kolor tła */
}

.welcome__img-box,
.welcome__content {
    background-color: transparent; /* Zapewnia, że tło podrzędnych elementów nie zasłoni szarego */
}








/* === CSS Pokazujące TYLKO Flagi (bez togglera i walut) na Mobile === */

/* Ustaw punkt przełamania dla widoku mobilnego (dostosuj 768px, jeśli używasz innego) */
@media (max-width: 768px) {

    /* 1. Upewnij się, że główny kontener .page-top__language jest częścią layoutu */
    /* i resetuj ewentualne style pozycjonowania absolutnego/fixed */
    nav.navbar .page-top__language {
        display: block !important; /* Pozwala zawartości (flagi) się wyświetlić */
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important; /* lub static */
        /* Usunięcie stylów, które mogły być specyficzne dla desktopowego dropdownu */
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 5px 0 auto !important; /* Ustawienie marginesu - dostosuj wartości */
        /* Możesz potrzebować 'align-self: center;' jeśli navbar jest flexboxem */
        align-self: center;
        order: 10; /* Jeśli używasz flexbox, dostosuj kolejność */
    }

    /* 2. Ukryj element przełącznika języka (np. "pl" ze strzałką) */
    nav.navbar .page-top__language .language__toggler {
        display: none !important;
    }

    /* 3. Pokaż główny kontener dla flag/walut, ale jako przezroczysty pojemnik */
    nav.navbar .page-top__language .language {
        display: block !important; /* Musi być widoczny, aby pokazać .flags */
        position: static !important; /* Zdejmij pozycjonowanie absolutne jeśli było */
        /* Reset stylów dropdownu */
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important; /* Reset szerokości jeśli była stała */
    }

    /* 4. Pokaż i ułóż kontener z flagami */
    nav.navbar .page-top__language .flags {
        display: flex !important;       /* Użyj flexbox do ułożenia flag */
        align-items: center;            /* Wyrównaj flagi w pionie */
        justify-content: flex-end;      /* Wyrównaj flagi do prawej (lub center/flex-start) */
        gap: 6px;                       /* Odstęp między flagami */
        padding: 5px 0;                 /* Dodaj trochę pionowego paddingu jeśli potrzeba */
    }

    /* 5. Stylizuj poszczególne linki/flagi */
    nav.navbar .page-top__language .flags a {
        display: inline-block !important;
        line-height: 0; /* Zapobiega dodatkowej przestrzeni pod obrazkami */
        padding: 0 !important;
        margin: 0 !important;
    }

    nav.navbar .page-top__language .flags img.flag {
        display: inline-block !important;
        width: 26px; /* Rozmiar flagi - dostosuj */
        height: auto;
        border: 1px solid #ddd; /* Delikatna ramka */
        vertical-align: middle; /* Lepsze wyrównanie */
    }

    /* 6. Ukryj selektor walut na widoku mobilnym */
    nav.navbar .page-top__language .currency {
        display: none !important;
    }
}



/* Style dla ikony Facebooka na wszystkich urządzeniach */
.icon.icon-facebook {
    color: #1877F2 !important; /* Oficjalny kolor Facebooka */
    font-size: 20px !important; /* Rozmiar ikony */
    opacity: 1 !important; /* Pełna widoczność */
}

/* Efekt hover dla ikony */
.page-top__social a:hover .icon.icon-facebook {
    color: #145dbf !important; /* Ciemniejszy odcień przy najechaniu */
}

/* Style dla urządzeń mobilnych (ekrany mniejsze niż 768px) */
@media (max-width: 767.98px) {
    .page-top__options {
        display: flex !important; /* Użycie flexboxa dla układu */
        align-items: center; /* Wyśrodkowanie w pionie */
        justify-content: space-between; /* Rozmieszczenie elementów */
        width: 100%; /* Pełna szerokość */
        padding: 10px 0; /* Wewnętrzny odstęp */
        flex-wrap: nowrap; /* Zapobieganie zawijaniu elementów */
    }

    /* Logo jako pierwsze */
    .navbar-brand {
        order: 1; /* Pierwsze w kolejności */
        margin: 0; /* Usunięcie marginesów */
        flex-shrink: 0; /* Zapobieganie zmniejszaniu */
    }

    /* Ikona Facebooka między logo a togglerem */
    .page-top__social {
        display: inline-flex !important; /* Widoczność ikony */
        order: 2; /* Drugie w kolejności, między logo a togglerem */
        margin: 0 10px; /* Odstępy po bokach dla równowagi */
        flex-shrink: 0; /* Zapobieganie zmniejszaniu */
    }

    .page-top__social ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .page-top__social li {
        display: inline-block; /* Ikona w linii */
    }

    .icon.icon-facebook {
        font-size: 24px !important; /* Powiększony rozmiar na mobile */
    }

    /* Toggler jako ostatnie */
    .navbar-toggler {
        order: 3; /* Trzecie w kolejności */
        margin: 0; /* Usunięcie marginesów */
        flex-shrink: 0; /* Zapobieganie zmniejszaniu */
    }

    /* Ukrycie niepotrzebnych elementów na mobile */
    .page-top__options .page-top__see-widget,
    .page-top__options .page-top__contact {
        display: none !important; /* Ukrycie przycisku rezerwacji i kontaktów */
    }
}