/* 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;
}

/* Google Translate umotava SVAKI prevedeni tekst u <font> omotače. Teme koje boje
   potomke preko wildcard pravila (npr. The7: `.stripe-style-5 * {color:#333}`) tada
   oboje baš te omotače — tekst više ne nasleđuje boju svog pravog roditelja, pa beo
   naslov na tamnoj pozadini (slajder, hero sekcija) u prevodu postane tamnosiv.
   Isti obrazac važi za svaku temu sa `*` ili `:not()` pravilima za boju.
   Potvrđeno na alkom.rs (The7 + slajder), 19.09.2026.

   Pravilo radi samo dok je prevod aktivan (klasa koju Google stavi na <html>), pa
   ne dira sajt na izvornom jeziku. `:not([color])` čuva eventualni legacy
   `<font color="...">` iz starog sadržaja sajta. Specifičnost (0,2,2) + !important
   nadjačava temina `*` pravila, a namerno je uzana — ne dira ništa osim omotača. */
html.translated-ltr font:not([color]),
html.translated-rtl font:not([color]) {
    color: inherit !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;
    /* 14 jezika na telefonu: lista sme da zauzme ekran do ispod headera,
       ostatak se skroluje unutar liste (70vh je sekao poslednje jezike). */
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    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;
}

/* Otvoren dropdown mora da bude IZNAD susednih blokova headera. U Elementor
   headeru prekidač često sedi u gornjoj traci, a red menija ispod nje je zaseban
   kontejner koji dolazi kasnije u DOM-u — sa istim z-index-om prekriva listu, pa
   klik na prve stavke (npr. „Srpski") pogađa link menija ispod.
   Potvrđeno na focusfactor.rs (WPML slot u gornjoj traci), 30.09.2026.
   Podižemo SAMO pretke otvorenog prekidača i samo dok je otvoren. */
.elementor-element:has(.alkom-langsw-open) {
    /* Bez `position` — Elementor kontejneri su već pozicionirani, a nametnut
       `relative` bi pregazio sticky/apsolutne sekcije drugih sajtova. */
    z-index: 9999 !important;
}

/* =========================================================
   Prevedena strana — duže reči i drugi pismi
   ========================================================= */

/* Nemački/mađarski/grčki prevodi imaju mnogo duže reči od izvora. Naslove ne lomimo
   usred reči — njih posle prevoda smanjuje fitHeadings() u frontend.js. Dugmad i
   stavke menija se dele crticom (po <html lang>, koji prekidač postavlja), a krajnja
   zaštita je prelom reči, da tekst nikad ne izađe iz dugmeta. Samo dok prevod traje. */
html.translated-ltr h1,
html.translated-ltr h2,
html.translated-ltr h3,
html.translated-ltr h4 {
    hyphens: manual;
    -webkit-hyphens: manual;
    overflow-wrap: normal;
}
html.translated-ltr .elementor-button-text,
html.translated-ltr .elementor-item {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

/* Kineski se u uskim dugmićima/stavkama lomi znak po znak — kratke CJK
   oznake drži u jednom redu. */
html[lang^="zh"].translated-ltr .elementor-button-text,
html[lang^="zh"].translated-ltr .elementor-item,
html[lang^="zh"].translated-ltr button,
html[lang^="zh"].translated-ltr input[type="submit"] {
    word-break: keep-all;
    white-space: nowrap;
}