/* =============================================================
Korak — i18n.css
Shared bilingual (Serbian / English) show-hide mechanism +
floating language toggle. Link on every public page AFTER
brand.css (and legal.css where used):
...
How it works
------------
Translatable content is authored twice, marked with
`data-lang="sr"` / `data-lang="en"`. A class on
(`lang-sr` / `lang-en`) decides which one is visible; the
hidden language is removed from flow with display:none, so the
visible element keeps its own natural display (inline span,
block div, table row, etc.).
Default is Serbian. The chosen language is remembered in
localStorage ('korak_lang') and applied by an inline
snippet BEFORE first paint to avoid a flash of both languages.
============================================================= */
/* Serbian shown by default (matches the `lang-sr` class the head
snippet sets when nothing is stored). */
html.lang-en [data-lang="sr"] { display: none !important; }
html.lang-sr [data-lang="en"] { display: none !important; }
/* Belt-and-suspenders: if the head snippet somehow didn't run and
no lang class is present, hide EN so Serbian (default) shows. */
html:not(.lang-en):not(.lang-sr) [data-lang="en"] { display: none !important; }
/* ---- Floating toggle -------------------------------------------- */
.lang-toggle {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 50;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
border-radius: 999px;
background: rgba(19, 28, 26, 0.72);
border: 1px solid var(--border, rgba(225, 227, 221, 0.10));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-family: var(--font-head, sans-serif);
}
.lang-toggle button {
appearance: none;
border: none;
background: transparent;
color: var(--text-muted, #899389);
font-family: inherit;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 1.5px;
padding: 0.35rem 0.7rem;
border-radius: 999px;
cursor: pointer;
transition: color 0.18s, background 0.18s;
}
.lang-toggle button:hover { color: var(--text, #E1E3DD); }
.lang-toggle button.active {
color: var(--bg, #131C1A);
background: var(--borovina, #9DC8C0);
}
@media (max-width: 480px) {
.lang-toggle { top: 0.6rem; right: 0.6rem; }
.lang-toggle button { padding: 0.3rem 0.6rem; font-size: 0.68rem; }
}
/* Informational-translation banner shown atop EN legal documents. */
.lang-note {
margin-bottom: 1.25rem;
padding: 0.7rem 1rem;
border-radius: 12px;
background: rgba(232, 184, 131, 0.08);
border: 1px solid rgba(232, 184, 131, 0.25);
color: var(--text-dim, #BFC9C2);
font-size: 0.85rem;
line-height: 1.5;
}