/* Alkom Language Switcher — frontend stil.
   Boje/breakpoint dolaze kao CSS varijable (wp_add_inline_style, vidi
   class-langsw-frontend.php). Generalizovana verzija Bamiron zakrpe
   (klase alkom-lang-* -> alkom-langsw-*, bez sajt-specifičnih selektora). */

.alkom-langsw {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-family: inherit;
    line-height: 1.2;
}

.alkom-langsw * {
    box-sizing: border-box;
}

.alkom-langsw img {
    display: block;
    width: auto;
    max-width: none;
    min-width: 0;
    border-radius: 3px;
    margin: 0;
}

/* Sakrij Google Translate banner/tooltip i spreči pomeranje layout-a. */
.goog-te-banner-frame.skiptranslate,
iframe.skiptranslate,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
body {
    top: 0 !important;
}
font font {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   dropdown_with_flags (primarni look — paritet sa bamiron.local)
   ========================================================= */

.alkom-langsw--look-dropdown_with_flags .alkom-langsw__current,
.alkom-langsw--look-float .alkom-langsw__current {
    display: flex !important;
    align-items: center;
    gap: 0;
    padding: 6px 10px;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    background: transparent;
}

.alkom-langsw--menu.alkom-langsw--look-dropdown_with_flags .alkom-langsw__current {
    font-size: 0;
}

@media (min-width: 1301px) {
    .alkom-langsw--menu.alkom-langsw--look-dropdown_with_flags .alkom-langsw__current {
        padding-left: 20px;
    }
}

.alkom-langsw__current img {
    height: 26px;
    width: auto;
}

.alkom-langsw--bar .alkom-langsw__current img {
    height: 28px;
}

.alkom-langsw__current-text {
    font-size: 13px;
    color: var(--alkom-langsw-text, #ffffff);
    margin-inline-start: 8px;
    white-space: nowrap;
}

.alkom-langsw__arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-inline-start: 14px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--alkom-langsw-arrow, #ffffff);
    transition: transform .2s ease;
    flex: 0 0 auto;
}

.alkom-langsw-open .alkom-langsw__arrow {
    transform: rotate(180deg);
}

.alkom-langsw__list {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    /* Logičko (ne fizičko) pozicioniranje — pod RTL (arapski), kad je prekidač
       premešten da sedi pored hamburgera (relocateMobileBarNextToHamburger),
       tema-ov flex red se mirroruje i prekidač završi na LEVOJ ivici ekrana;
       fizičko `right:0` bi tad gurnulo dropdown JOŠ VIŠE ulevo, van viewporta.
       `inset-inline-end/start` se automatski prilagođava `dir` atributu. */
    inset-inline-end: 0;
    inset-inline-start: auto;
    min-width: 190px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--alkom-langsw-dropdown-bg, #1E242C);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    padding: 6px 0;
    z-index: 99999;
}

.alkom-langsw-open .alkom-langsw__list {
    display: block;
}

.alkom-langsw__option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
    color: var(--alkom-langsw-dropdown-text, #ffffff);
    background: transparent;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.alkom-langsw__option img {
    width: 24px;
    height: 24px;
}

.alkom-langsw__option:hover,
.alkom-langsw__option.alkom-langsw-active {
    background: var(--alkom-langsw-dropdown-hover-bg, #3F444B);
    color: var(--alkom-langsw-dropdown-hover-text, #ffffff);
}

.alkom-langsw__list::-webkit-scrollbar {
    width: 8px;
}
.alkom-langsw__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .2);
    border-radius: 4px;
}

/* "Klasičan izgled" — oštre ivice, tanja senka (bez border-a), prati postojeći
   nav-dropdown stil na alkom.rs i sličnim sajtovima (nasuprot "Zaobljenom
   izgledu" iznad, koji je podrazumevan i ostaje netaknut za sve postojeće sajtove). */
.alkom-langsw--dropstyle-classic .alkom-langsw__list {
    border-radius: 0;
    border: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, .2);
}

/* Hover na alkom.rs nije solid boja nego providan beo sloj preko pozadine
   (rgba(255,255,255,.07)) — radi ispravno preko BILO koje dropdown_bg boje,
   zato je deo "Klasičan izgled" stila, ne obična dropdown_hover_bg varijabla. */
.alkom-langsw--dropstyle-classic .alkom-langsw__option:hover,
.alkom-langsw--dropstyle-classic .alkom-langsw__option.alkom-langsw-active {
    background: rgba(255, 255, 255, .07);
}

/* Uži desktop (laptopi ~1025-1300px): zbij razmak da meni + zastava stanu u red. */
@media (min-width: 1025px) and (max-width: 1300px) {
    .alkom-langsw--menu.alkom-langsw--look-dropdown_with_flags .alkom-langsw__current {
        padding-left: 6px;
        padding-right: 6px;
    }
    .alkom-langsw--menu .alkom-langsw__arrow {
        margin-inline-start: 9px;
    }
}

/* =========================================================
   Mobile bar (Elementor) — vidljivost preko dinamičkog breakpointa
   (inline stil iz PHP-a override-uje ovaj default 1024px fallback).
   ========================================================= */

.alkom-langsw--bar {
    display: none;
}

@media (max-width: 1024px) {
    .alkom-langsw--menu {
        display: none !important;
    }
    .alkom-langsw--bar {
        display: inline-flex;
    }
}

.alkom-langsw-bar-wrap {
    position: absolute;
    top: 50%;
    right: 44px;
    transform: translateY(-50%);
    z-index: 6;
}

.elementor-widget-nav-menu .elementor-widget-container {
    position: relative;
}

@media (max-width: 767px) {
    .alkom-langsw-bar-wrap {
        right: 60px;
    }
}

/* =========================================================
   Mobile bar fallback (BEZ Elementora) — fiksiran u uglu ekrana, vidljiv
   samo ispod breakpointa (vidi dinamički CSS iz enqueue_assets()). Koristi
   se SAMO kad Alkom_Langsw_Elementor nikad nije okinuo svoj hook (nema
   Elementor nav-menu widgeta na strani) — vidi render_footer_output().
   Cilj isti kao Elementor bar (prekidač vidljiv BEZ otvaranja hamburgera),
   samo bez zavisnosti od Elementor markup-a/pozicioniranja.
   ========================================================= */

.alkom-langsw-mobile-fixed-wrap {
    position: fixed;
    top: 14px;
    right: 60px;
    z-index: 999998;
}

.alkom-langsw--mobile-fixed {
    display: none; /* dinamički CSS ga otkriva ispod mobile_breakpoint */
}

.alkom-langsw--mobile-fixed .alkom-langsw__current img {
    height: 24px;
}

@media (max-width: 480px) {
    .alkom-langsw-mobile-fixed-wrap {
        right: 54px;
        top: 12px;
    }
}

/* Kad frontend.js prepozna temin hamburger i premesti nas da mu budemo DOM
   sused (vidi relocateMobileBarNextToHamburger) — sedimo prirodno u redu
   pored ostalih ikonica hedera umesto da nagađamo position:fixed offset. */
.alkom-langsw-mobile-fixed-wrap--inline {
    position: static;
    top: auto;
    right: auto;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    /* Bez margina po defaultu — razmak prema susednim ikonicama neka diktira
       temina SOPSTVENA logika za taj red (gap/padding koji već postoji između
       njenih kontejnera). Fino podešavanje razmaka za KONKRETNU temu ide u
       custom_css (Napredno tab) — vidi tasks/LANGUAGE-SWITCHER-STATUS.md. */
    margin: 0;
    z-index: auto;
}

/* Kad smo premešteni u temin header red (vidi gore) — što manji footprint, da ne
   zauzmemo prostor koji tema nije predvidela za nas (header trake su često tesno
   izračunate za tačno onoliko ikonica koliko su imale PRE ovog modula). Bez
   strelice, manja zastavica — dovoljno da se prepozna, dovoljno malo da stane. */
.alkom-langsw-mobile-fixed-wrap--inline .alkom-langsw__current {
    padding: 0;
}
.alkom-langsw-mobile-fixed-wrap--inline .alkom-langsw__current img {
    height: 20px;
}
.alkom-langsw-mobile-fixed-wrap--inline .alkom-langsw__arrow {
    display: none;
}

.alkom-langsw--bar .alkom-langsw__list {
    inset-inline-start: auto;
    inset-inline-end: 0;
    min-width: 200px;
    max-width: 90vw;
}

/* =========================================================
   Floating look (fiksiran ugao ekrana)
   ========================================================= */

.alkom-langsw--floating {
    position: fixed;
    z-index: 999999;
}
.alkom-langsw--pos-bottom_left  { bottom: 20px; left: 20px; }
.alkom-langsw--pos-bottom_right { bottom: 20px; right: 20px; }
.alkom-langsw--pos-top_left     { top: 20px; left: 20px; }
.alkom-langsw--pos-top_right    { top: 20px; right: 20px; }

/* Bazno .alkom-langsw__list pravilo pretpostavlja da je triger blizu DESNE
   ivice (dropdown se "izvlači" ulevo od njega — ispravno za bottom_right/
   top_right). Za _left uglove je triger blizu LEVE ivice — dropdown mora da
   se izvuče UDESNO od njega, inače ide van ekrana. FIZIČKO (ne logičko)
   pozicioniranje namerno — _left/_right uglovi su admin-ov EKSPLICITAN
   fizički izbor ("dole levo" znači levo i pod RTL, ne "logički početak"),
   za razliku od RTL fix-a gore koji ispravno prati dir jer se tiče
   automatskog mirror-ovanja teminog header reda, ne fiksnog ugla ekrana. */
.alkom-langsw--pos-bottom_left .alkom-langsw__list,
.alkom-langsw--pos-top_left .alkom-langsw__list {
    left: 0;
    right: auto;
}

/* Bazno pravilo (top: calc(100% + 8px)) uvek otvara dropdown NADOLE od trigera —
   ispravno za top_left/top_right (triger je pri vrhu, ima mesta ispod), ali za
   bottom_left/bottom_right je triger VEĆ pri dnu ekrana (bottom:20px) — dodatnih
   9 stavki liste otvorenih nadole gura većinu VAN VIDLJIVOG EKRANA na kraćim
   viewport-ima (npr. mobilni portret), i to je position:absolute UNUTAR
   position:fixed pretka — scroll stranice ih ne dovodi u prikaz, potpuno
   nedostupne. Isti obrazac bug-a kao RTL/floating-left fix, ovog puta vertikalno:
   otvori NAGORE umesto nadole za dna-usidrene uglove. */
.alkom-langsw--pos-bottom_left .alkom-langsw__list,
.alkom-langsw--pos-bottom_right .alkom-langsw__list {
    top: auto;
    bottom: calc(100% + 8px);
}

.alkom-langsw--floating .alkom-langsw__current {
    background: var(--alkom-langsw-dropdown-bg, #1E242C);
    border-radius: 6px;
    padding: 8px 12px;
}
.alkom-langsw--floating .alkom-langsw__current-text,
.alkom-langsw--floating .alkom-langsw__current {
    font-size: 13px !important;
}

/* =========================================================
   flags / flags_code / flags_name (flat row)
   ========================================================= */

.alkom-langsw__flat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.alkom-langsw__flat-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    /* NE koristi --alkom-langsw-text (to je boja za dropdown_with_flags zatvoreno
       stanje, podešena za tamne menije). Flat izgledi (flags_name/flags_code) treba
       da nasleđuju boju teksta iz teme sajta, kao original GTranslate flags_name. */
    color: inherit;
    opacity: .75;
    transition: opacity .15s ease;
}
.alkom-langsw__flat-item img {
    width: 24px;
    height: 24px;
}
.alkom-langsw__flat-item:hover,
.alkom-langsw__flat-item.alkom-langsw-active {
    opacity: 1;
}

/* =========================================================
   dropdown (native <select>)
   ========================================================= */

.alkom-langsw__select {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .2);
    background: #fff;
    color: #222;
    font-size: 13px;
}