.apartment__gallery {
    position: relative; /* Niezbędne do pozycjonowania strzałek i kropek wewnątrz */
}

/* --- Główny slider (duże zdjęcie) --- */
.apartment__gallery .gallery-main {
    width: 100%;
    height: auto; /* Wysokość dopasuje się do proporcji */
    aspect-ratio: 4 / 3; /* Ustawia proporcje obrazu, np. 4:3. Możesz zmienić na 16/9, jeśli wolisz. */
    margin-bottom: 15px; /* Odstęp między dużym zdjęciem a miniaturkami */
    border-radius: 8px; /* Zaokrąglone rogi dla estetyki */
    overflow: hidden; /* Ukrywa elementy (np. rogi zdjęcia) wystające poza zaokrąglenie */
}

.apartment__gallery .gallery-main .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Obraz wypełnia całą przestrzeń bez zniekształceń */
}


.apartment__gallery .swiper-button-next,
.apartment__gallery .swiper-button-prev {
    /* Użyj swoich zmiennych CSS lub wpisz kolory bezpośrednio */
    --swiper-navigation-color: var(--color-1); /* np. var(--color-1) */
    
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    width: 4.8rem;
    height: 4.8rem;
    border-radius: var(--radius-1); /* np. var(--radius-1) - kwadrat z zaokrąglonymi rogami */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    /* Pozycjonowanie w pionie na środku */
    top: 50%;
    transform: translateY(-50%);
}

/* Dostosowanie ikon wewnątrz strzałek */
.apartment__gallery .swiper-button-next::after,
.apartment__gallery .swiper-button-prev::after {
    font-size: 16px;
    font-weight: 900;
}

/* Efekt po najechaniu myszką */
.apartment__gallery .swiper-button-next:hover,
.apartment__gallery .swiper-button-prev:hover {
    background-color: #fff;
}

/* Pozycjonowanie strzałek w poziomie */
.apartment__gallery .swiper-button-prev {
    left: 20px;
}

.apartment__gallery .swiper-button-next {
    right: 20px;
}

/* Ukrywanie strzałek na urządzeniach mobilnych */
@media (max-width: 767px) {
    .apartment__gallery .swiper-button-next,
    .apartment__gallery .swiper-button-prev {
        display: none;
    }
}


/* --- Stylizacja paginacji (kropek) --- */
.apartment__gallery .gallery-main .swiper-pagination {
    /* Użyj swoich zmiennych lub wpisz kolory bezpośrednio */
    --swiper-pagination-color: #fff; /* Kolor aktywnej kropki */
    --swiper-pagination-bullet-inactive-color: #fff; /* Kolor nieaktywnej kropki */
    --swiper-pagination-bullet-inactive-opacity: 0.5;
    --swiper-pagination-bullet-size: 8px;
    --swiper-pagination-bullet-horizontal-gap: 5px;

    /* Pozycjonowanie na dole, na środku obrazka */
    bottom: 15px !important; /* !important, by mieć pewność nadpisania domyślnych styli */
}

/* Styl aktywnej kropki (podłużny kształt) */
.apartment__gallery .gallery-main .swiper-pagination-bullet-active {
    width: 25px;
    border-radius: 5px;
    transition: width 0.3s ease;
}


/* --- Slider z miniaturkami --- */
/*
 * ROZWIĄZANIE PROBLEMU WYRÓWNANIA:
 * Swiper domyślnie zajmuje 100% szerokości swojego kontenera.
 * Zarówno .gallery-main jak i .gallery-thumbs są w tej samej kolumnie,
 * więc naturalnie będą miały tę samą szerokość. Problem mógłby
 * powstać przez dodatkowe paddingi lub marginesy. Ten kod ich unika.
*/
.apartment__gallery .gallery-thumbs {
    height: 100px; /* Dopasuj wysokość miniaturek do swoich potrzeb */
    padding: 0; /* Bez dodatkowego paddingu, by zachować wyrównanie */
}

.apartment__gallery .gallery-thumbs .swiper-slide {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease, border-color 0.3s ease;
    border-radius: 6px;
    overflow: hidden;
    /* Ważne: Przezroczysta ramka zapobiega "skakaniu" layoutu po dodaniu kolorowej ramki */
    border: 3px solid transparent; 
}

.apartment__gallery .gallery-thumbs .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.apartment__gallery .gallery-thumbs .swiper-slide:hover {
    opacity: 1;
}

/* Styl dla aktywnej, wybranej miniaturki */
.apartment__gallery .gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border-color: var(--color-1); /* Kolor ramki aktywnej miniaturki (zmień na swój główny kolor) */
}

.apartment__content .apartment-info-items {
	margin: 2rem -0.3rem;
	flex-wrap: wrap;
}

.apartment__content .item {
	display: flex;
	align-items: center;
	padding: 1rem;
	border-radius: var(--radius-2);
	background-color: var(--bg-2);
	margin: 0.3rem;
}

.apartment__content .item img {
	height: 18px;
	width: auto;
	object-fit: contain;
	margin-right: 0.5rem;
}

.apartment__content .btn {
	margin-top: 2rem;
}


.apartment-amenities__title {
    text-align: center;
    margin-bottom: 1rem; /* Zwiększony odstęp od list poniżej */
}

/* Możesz dodać style dla swojego akcentu, jeśli jeszcze ich nie masz */
.apartment-amenities__title .accent {
    /* Przykładowe style, dostosuj do swojego designu */
    color: var(--font-color-2);
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.apartment-amenities__title .accent span {
    color: var(--color-1); /* Użyj swojego głównego koloru */
    font-weight: 700;
}

/* --- Grupa udogodnień (pojedynczy boks) --- */
.apartment-amenities__group {
    background-color: var(--bg-1); /* Bardzo subtelne tło dla odróżnienia */ 
    border-radius: var(--radius-3);        /* Zaokrąglone rogi, np. var(--radius-2) */
    padding: 3rem;             /* Wewnętrzny odstęp dla "oddechu" */
    height: 100%;              /* Ważne: Wyrównuje wysokość boksów w jednym rzędzie */
    display: flex;             /* Użycie flexboxa dla lepszej kontroli */
    flex-direction: column;
}

/* --- Tytuł grupy, np. "W Twojej łazience:" --- */
.apartment-amenities__group .title-6 {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--bg-2); /* Wyraźniejszy separator */
    position: relative;
	color: var(--white-1);
}

/* Opcjonalny: dodanie małej ikony lub akcentu do tytułu grupy */
.apartment-amenities__group .title-5::before {
    content: '';
    position: absolute;
    bottom: -1px; /* Pozycjonuje się idealnie na ramce */
    left: 0;
    width: 50px; /* Długość akcentu */
    height: 2px; /* Grubość akcentu */
    background-color: var(--color-primary); /* Użyj swojego głównego koloru */
}


/* --- Lista udogodnień --- */
.amenities-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- Wielokolumnowa lista (dla "Pozostałe udogodnienia") --- */
.amenities-list--columns {
    column-count: 3;   /* 3 kolumny na dużych ekranach (XL) */
    column-gap: 2rem;  /* Odstęp między kolumnami */
}

.amenities-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.6;
	color: var(--white-2);
}

.amenities-list li:last-child {
    margin-bottom: 0;
}

.amenities-list li::before {
	content: '✓';
    position: absolute;
    left: 0;    
    top: 0.3rem;
	line-height: 1;  
    font-weight: 900;
    font-size: 1.2em;
    color: var(--color-1);
}

/* --- Responsywność dla listy wielokolumnowej --- */

/* Na tabletach i mniejszych laptopach (poniżej 1200px) */
@media (max-width: 1199.98px) {
    .amenities-list--columns {
        column-count: 2; /* Zmiana na 2 kolumny */
    }
}

/* Na urządzeniach mobilnych (poniżej 768px) */
@media (max-width: 767.98px) {
    .amenities-list--columns {
        column-count: 1; /* Zmiana na 1 kolumnę, aby tekst był czytelny */
    }
    .apartment-amenities__group {
        padding: 1.5rem; /* Mniejszy padding na mobile */
    }
}

.apartment-amenities__group.amenity--forbidden {
    background-color: #FFF0F1; /* var(--alert-danger-bg) */
    border-color: #F5C5CB;     /* var(--alert-danger-border) */
}

/* Wyłączenie efektu hover dla bloku z zakazem */
.apartment-amenities__group.amenity--forbidden:hover {
    transform: none;
    box-shadow: none;
}

/* Zmiana koloru linii pod tytułem w bloku z zakazem */
.apartment-amenities__group.amenity--forbidden .title-6 {
    border-color: #9A1E2E;
}

/* Zmiana koloru tekstu wewnątrz bloku z zakazem */
.apartment-amenities__group.amenity--forbidden .title-6,
.apartment-amenities__group.amenity--forbidden .amenities-list li {
    color: #721c24; /* var(--alert-danger) */
}

/* Zmiana ikony i jej koloru w bloku z zakazem */
.apartment-amenities__group.amenity--forbidden .amenities-list li::before {
    content: '×';
    color: #721c24; /* var(--alert-danger) */
    font-weight: bold;
}

.apartment-cta__title .text {
	margin: 2rem 0 3rem 0;
}