/* Resetowanie domyślnych stylów */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ogólne style dla sekcji */
.bottom-4-section {
    width: 100%;
    background-color: #E7EDF8;
    padding: 40px 20px;  /*Odstęp od góry i dołu */
    /* padding: 20px; */
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 416px;
}

/* Stylizacja sekcji z mapką */
.location-map {
    flex: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Stylizacja obrazka mapki */
.location-map-image {
    width: 440px;
    height: 416px;
    object-fit: cover;
}

/* Stylizacja sekcji z napisami i akordeonem */
.accordion-section {
    flex: 7;
    display: flex;
    flex-direction: column;
}

/* Stylizacja sekcji z nagłówkiem */
.location-header {
    margin-bottom: 20px;
    text-align: left;
}

/* Stylizacja tytułu */
.location-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Stylizacja podtytułu */
.location-subtitle {
    font-size: 18px;
    font-weight: normal;
    color: #666;
    margin-bottom: 15px;
}

/* Stylizacja accordion */
.accordion-item {
    margin-bottom: 10px;
    border: none;
    border-bottom: 1px solid #d3d9e5;
}

.accordion-header {
    background-color: transparent;
    padding: 15px;
    width: 100%;
    text-align: left;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    position: relative;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: #d3d9e5;
}

.accordion-header::after {
    content: '\25BC';
    position: absolute;
    right: 15px;
    font-size: 14px;
}

.accordion-header[aria-expanded="true"]::after {
    content: '\25B2';
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease-in-out;
    background-color: #E7EDF8;
    padding: 0 15px;
}

.accordion-content.active {
    max-height: 1000px;
    padding: 15px;
}

/* Stylizacja zakładek (tabs) */
.tabs-section {
    margin-top: 10px;
}

.tabs-nav {
    display: flex;
    justify-content: flex-start;
    list-style: none;
    margin-bottom: 15px;
}

.tabs-nav li {
    margin: 0 5px;
}

.tab-link {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    background-color: #f6fafb;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.tab-link:hover {
    background-color: #e0e4e8;
}

.tabs-nav li.active .tab-link {
    background-color: #d3d9e5;
    color: #000;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Stylizacja listy miast */
.city-list ul {
    list-style: none;
    padding: 0;
}

.city-list ul li {
    margin-bottom: 10px;
}

.city-list ul li a {
    text-decoration: none;
    color: #000;
    transition: color 0.3s ease;
}

.city-list ul li a:hover {
    color: #0857D4;
}

/* Responsywność dla mniejszych ekranów (poniżej 768px) */
@media (max-width: 768px) {
    .bottom-4-section {
        flex-direction: column; /* Układ pionowy */
        align-items: stretch; /* Rozciągnięcie elementów na całą szerokość */
        min-height: auto; /* Usunięcie minimalnej wysokości */
    }

    .location-map {
        flex: none; /* Usunięcie proporcji flex */
        height: auto; /* Dopasowanie wysokości */
        margin-bottom: 20px; /* Odstęp między mapką a napisami */
    }

    .location-map-image {
        width: 100%; /* Mapka na pełną szerokość */
        height: auto; /* Proporcjonalna wysokość */
        max-width: 440px; /* Maksymalna szerokość mapki */
    }

    .accordion-section {
        flex: none; /* Usunięcie proporcji flex */
    }

    .location-header {
        text-align: center; /* Wyśrodkowanie napisów na mniejszych ekranach */
    }

    .location-title {
        font-size: 20px; /* Mniejszy rozmiar czcionki na telefonach */
    }

    .location-subtitle {
        font-size: 16px; /* Mniejszy rozmiar czcionki na telefonach */
    }

    .accordion-header {
        font-size: 16px; /* Mniejszy rozmiar nagłówka akordeonu */
    }

    .tab-link {
        padding: 8px 15px; /* Mniejsze paddingi dla zakładek */
        font-size: 14px; /* Mniejszy rozmiar czcionki */
    }

    .city-list ul li a {
        font-size: 14px; /* Mniejszy rozmiar czcionki dla linków */
    }
}