/* ========================================================================= */
/* --- A. KLASA BLOKUJĄCA SCROLL NA BODY (NOWA) --- */
/* ========================================================================= */

.no-scroll {
    overflow: hidden !important; /* Blokuje przewijanie tła na osi Y i X */
    position: fixed; /* Zapobiega skakaniu widoku/utracie pozycji na iOS/Android */
    width: 100%;
    height: 100%;
}

/* ========================================================================= */
/* --- 1. GŁÓWNA STRUKTURA MODALA (ZMODYFIKOWANA) --- */
/* ========================================================================= */

/* Styl dla pełnoekranowej nakładki modala */
.language-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ciemne tło, pasujące do motywu */
    background: rgba(0, 0, 0, 0.95); 
    display: flex;
    justify-content: center;
    align-items: center; /* Utrzymujemy centrowanie */
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    /* Dodajemy overflow na overlay jako fallback dla ekstremalnie małych ekranów */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; 
}

.language-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* Styl dla zawartości modala (ZMODYFIKOWANA) */
.language-modal-content {
    /* Używamy ciemnego tła dla spójności z motywem */
    background: #1a1a1a; 
    color: #ffffff;
    padding: 30px 40px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    max-width: 700px;
    width: 90%;
    
    /* 💥 KLUCZOWE: Ustawienie maksymalnej wysokości i przewijania wewnątrz kontenera */
    max-height: 90vh; /* Ogranicz wysokość do 90% wysokości okna przeglądarki */
    overflow-y: auto; /* Włącz przewijanie, gdy zawartość przekracza max-height */
    
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.language-modal-overlay.active .language-modal-content {
    transform: scale(1);
}

.language-modal-content h2 {
    margin-top: 0;
    font-size: 28px;
}

.language-modal-content p {
    font-size: 16px;
    color: #cccccc;
    margin-bottom: 30px;
}

/* Przycisk zamykania */
.language-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 30px;
    color: #48c756;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
}

.language-modal-close:hover {
    color: #ffffff;
}

/* Kontener na opcje językowe (układ dwukolumnowy) */
.language-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 30px;
    margin-top: 20px;
}

.polylang-selector, 
.glt-selector {
    flex: 1;
    min-width: 250px;
}

.polylang-selector h3, 
.glt-selector h3 {
    margin-bottom: 15px;
    font-size: 18px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

/* ========================================================================= */
/* --- 2. STYLIZACJA POLYLANG (LEWA KOLUMNA) --- */
/* ========================================================================= */

.polylang-selector ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.polylang-selector ul li {
    margin-bottom: 10px;
    /* Usuwamy wszelkie domyślne style Polylang, które mogły przeszkadzać */
    display: block; 
}

/* Styl linku (cały wiersz) */
.polylang-selector ul li a {
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 15px; /* Odstęp między flagą a nazwą */
    padding: 8px;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Efekt hover dla Polylang */
.polylang-selector ul li a:hover {
    background-color: #333333; 
    color: #48c756;
    text-decoration: none;
}

/* Styl dla niestandardowej flagi Polylang (klasa pll-hexagon-flag dodana w PHP) */
.polylang-selector ul li img.pll-flag {
    /* Ustaw sztywny rozmiar heksagonalnych ikon */
    width: 32px !important; 
    height: 32px !important;
    
    /* Usunięcie domyślnych obramowań i cieni */
    box-shadow: none !important; 
    border: none !important;
    
    /* Animacja hover */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efekt hover - animacja */
.polylang-selector ul li a:hover img.pll-flag {
    transform: scale(1.1);
    box-shadow: 0 0 5px rgba(72, 199, 86, 0.8);
}

/* ========================================================================= */
/* --- 3. STYLIZACJA GOOGLE TRANSLATOR (PRAWA KOLUMNA) --- */
/* ========================================================================= */

.glt-selector {
    text-align: center;
}

/* Kontener dla flag: siatka/flex, aby flagi były w rzędach (jak na zrzucie) */
.glt-custom-flags-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 15px 10px; 
}

/* Pojedynczy element (flaga + nazwa) */
.glt-custom-flags-list .glt-item {
    display: flex;
    flex-direction: column; 
    align-items: center;
    width: 80px; 
    margin-bottom: 10px;
}

/* Styl linku */
.glt-custom-flags-list .glt-lang-trigger {
    text-decoration: none;
    color: #ffffff;
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 5px; 
    padding: 5px;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Efekt hover dla GLT */
.glt-custom-flags-list .glt-lang-trigger:hover {
    background-color: #333333; 
    color: #48c756;
}

/* Nazwa języka pod flagą */
.glt-custom-flags-list .glt-lang-trigger span {
    font-size: 12px;
    font-weight: normal;
    text-align: center;
}

/* Styl dla heksagonalnej flagi PNG GLT - SPÓJNE Z POLYLANG */
.glt-custom-flags-list img.custom-glt-flag {
    width: 32px !important; 
    height: 32px !important;
    
    border: none !important;
    box-shadow: none !important;
    
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efekt hover - animacja */
.glt-custom-flags-list .glt-lang-trigger:hover img.custom-glt-flag {
    transform: scale(1.1);
    box-shadow: 0 0 5px rgba(72, 199, 86, 0.8);
}

/* UKRYCIE: WTYCZKA GOOGLE TRANSLATOR */
.glt-selector #google_language_translator,
.glt-selector #flags {
    display: none !important;
}


/* ========================================================================= */
/* --- 4. MEDIA QUERY (ZMODYFIKOWANY) --- */
/* ========================================================================= */

@media (max-width: 600px) {
    .language-modal-content {
        padding: 20px 20px;
        /* Dodanie marginesów, by modal nie "przyklejał się" do krawędzi na mobile */
        margin-top: 5vh; 
        margin-bottom: 5vh;
    }
    /* Zmiana układu na kolumnowy przy małych ekranach */
    .language-options {
        flex-direction: column;
        gap: 20px;
    }
    .polylang-selector, 
    .glt-selector {
        min-width: 100%;
    }
    /* Centrowanie listy Polylang, gdy jest w kolumnie */
    .polylang-selector ul {
        text-align: center;
    }
    /* Centrowanie elementów w Polylang przy małych ekranach */
    .polylang-selector ul li a {
        justify-content: center;
    }
}


.lang-item img {
    height: 32px !important;
}