/* Language Toggle Button */
.language-toggle-wrapper {
    display: inline-block;
    margin: 0 0 0 15px;
    padding: 0;
    vertical-align: middle;
}

.language-toggle {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    outline: none;
}

.language-toggle:hover {
    transform: scale(1.1);
}

.flag-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.flag-emoji {
    font-size: 24px;
    line-height: 1;
    display: inline-block;
    transition: all 0.3s ease;
    opacity: 0.5;
    filter: grayscale(0.7);
    transform: scale(0.9);
}

.flag-emoji.active {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.language-toggle:hover .flag-emoji {
    opacity: 0.8;
    filter: grayscale(0.3);
}

.language-toggle:hover .flag-emoji.active {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.2);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

/* Adjust for mobile */
@media (max-width: 768px) {
    .flag-emoji {
        font-size: 20px;
    }
}

/* Tap na Kontakt: ::before dekoracija ne hvata klik. <li> zastavica ne hvata klik
   osim na samom dugmetu (proziran deo ispod propada na Kontakt) – bez z-index/position
   na li.btn, da izgled ostane kao u on3step. */
nav a::before,
nav a:hover::before {
    pointer-events: none;
}

.white nav a::before,
.white nav a:hover::before {
    pointer-events: none;
}

#menu-center ul li.language-toggle-wrapper,
nav ul li.language-toggle-wrapper {
    pointer-events: none;
}

#menu-center ul li.language-toggle-wrapper .language-toggle,
nav ul li.language-toggle-wrapper .language-toggle {
    pointer-events: auto;
}