/* ========================================================================== ALIFA multilingual UI — loaded on every page (LTR and RTL). Language switcher styling, active-language highlight, and the base position for a site-wide floating chat bubble (injected by ALIFA, not the theme). RTL-specific mirroring lives in rtl.css (loaded only on Arabic pages). ========================================================================== */ /* ---- Crawlable language switcher — native
dropdown (no JS) ------ */ .lang-switcher { position: relative; display: inline-block; font-size: 1rem; /* 16px */ line-height: 1; margin-inline-end: 0.75rem; } /* Hide the whole switcher on a post with no translation set (no language links). */ .lang-switcher:not(:has(.lang-switcher-link)) { display: none; } /* The always-visible trigger (shows the current language). Inherits the header text colour so it reads correctly in both light and dark themes. */ .lang-switcher-summary { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; border: 1px solid rgba(150, 150, 150, 0.4); border-radius: 8px; cursor: pointer; white-space: nowrap; user-select: none; list-style: none; /* hide default disclosure triangle (Firefox) */ color: inherit; transition: border-color 0.15s ease, background 0.15s ease; } .lang-switcher-summary:hover { border-color: rgba(150, 150, 150, 0.75); } .lang-switcher-summary::-webkit-details-marker { display: none; } /* Safari/Chrome */ .lang-switcher-summary::marker { content: ""; } .lang-switcher-label { display: inline-flex; align-items: center; opacity: 0.8; } .lang-switcher-label svg { width: 1.15em; height: 1.15em; } .lang-switcher-current { font-weight: 600; } /* Caret that flips when the dropdown is open (sized in em so it tracks the label). */ .lang-switcher-caret { width: 0; height: 0; border-inline-start: 0.28em solid transparent; border-inline-end: 0.28em solid transparent; border-top: 0.32em solid currentColor; opacity: 0.6; transition: transform 0.15s ease; } .lang-switcher[open] .lang-switcher-caret { transform: rotate(180deg); } /* The dropdown panel — a light popover with its OWN colours, so its text never inherits the page's (possibly light) text colour and stays readable on any theme. inset-inline-end keeps it aligned to the trigger in RTL too. */ .lang-switcher-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 1000; min-width: 9rem; margin: 0; padding: 0.3rem; list-style: none; background: #ffffff; color: #404040; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .lang-switcher-item { list-style: none; margin: 5px 0px; } .lang-switcher-link { display: block; padding: 0.5rem 0.8rem; border-radius: 5px; color: #404040; /* explicit — never inherit the page's text colour */ text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .lang-switcher-link:hover { background: #212A4E; color: #fff; } /* Active language (matches ) — subtle highlight, not clickable. */ html[lang="en"] .lang-switcher-link[lang="en"], html[lang="ar"] .lang-switcher-link[lang="ar"], html[lang="ru"] .lang-switcher-link[lang="ru"] { font-weight: 700; background: #212A4E; /* selected dropdown item = navy */ color: #fff; pointer-events: none; cursor: default; } /* Trigger label (global switcher) — show only the language matching , so the current language updates as you move between /, /ar/ and /ru/. */ .lang-switcher-current [data-lang] { display: none; } html[lang="en"] .lang-switcher-current [data-lang="en"], html[lang="ar"] .lang-switcher-current [data-lang="ar"], html[lang="ru"] .lang-switcher-current [data-lang="ru"] { display: inline; } /* ---- Floating chat bubble (coexistence only — ALIFA injects the real one) -- The theme reserves the bottom corner and defines the flip so the injected bubble never collides with theme elements and lands on the correct side. Default (LTR) side = bottom-right; rtl.css flips it to bottom-left. */ .alifa-chat-bubble { position: fixed; bottom: 24px; inset-inline-end: 24px; /* right in LTR, left in RTL via logical property */ z-index: 999; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ghost-accent-color, #23B8BC); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); font-size: 26px; text-decoration: none; border: none; cursor: pointer; }