/* ========================================================= Language selector — on-brand dropdown that drives the hidden Google Website Translate engine. Self-contained: if the Google script ever fails to load, the button simply shows nothing to switch to and the site is completely unaffected. ========================================================= */ /* --- our custom trigger button in the header --- */ .lang-switch{position:relative;display:inline-flex} .lang-btn{display:inline-flex;align-items:center;justify-content:center;gap:0;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;width:42px;height:42px;padding:0;border-radius:11px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:.3s;backdrop-filter:blur(8px);white-space:nowrap;line-height:1} .lang-btn:hover{transform:translateY(-2px)} .lang-btn svg{flex-shrink:0} .lang-btn .lang-label,.lang-btn .lang-caret{display:none} header.solid .lang-btn{background:#fff;border-color:var(--line);color:var(--sapphire-deep);box-shadow:0 8px 22px -12px rgba(14,99,196,.5)} /* --- dropdown panel --- */ .lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:210px;max-height:340px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px -24px rgba(10,27,51,.55);padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s;z-index:400} .lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)} .lang-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;font-family:inherit;font-size:14px;font-weight:500;color:var(--slate);padding:10px 12px;border-radius:9px;cursor:pointer;transition:background .2s,color .2s} .lang-menu button:hover{background:var(--mist);color:var(--sapphire-deep)} .lang-menu button.active{background:linear-gradient(135deg,var(--sapphire),var(--azure));color:#fff} .lang-menu button .flag{font-size:16px;line-height:1;width:20px;text-align:center} .lang-menu .lang-reset{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;color:var(--muted);font-size:13px} /* --- scrollbar polish for the menu --- */ .lang-menu::-webkit-scrollbar{width:8px} .lang-menu::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px} /* ========================================================= Hide Google Translate's injected chrome so only OUR UI shows and — critically — stop it from pushing the page down under the fixed header when a language is selected. ========================================================= */ /* the widget mount point stays in the DOM but invisible */ #google_translate_element{position:absolute!important;left:-9999px!important;top:-9999px!important;height:0!important;width:0!important;overflow:hidden!important} /* the banner iframe Google injects at the very top of */ .goog-te-banner-frame, iframe.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate{display:none!important;visibility:hidden!important;height:0!important;width:0!important;position:absolute!important;top:-9999px!important} /* the wrapper Google puts around its gadget/banner at top of body */ body > .skiptranslate{display:block!important;height:0!important;overflow:hidden!important;position:absolute!important;top:-9999px!important;left:-9999px!important} /* THE KEY FIX: Google sets — force it back. html/body must never be offset, so the fixed header and content stay exactly where they belong. */ body{top:0!important;position:static!important} html{top:0!important;margin-top:0!important} html.translated-ltr body, html.translated-rtl body{top:0!important;position:static!important} /* the little translated-tooltip / highlight Google adds */ .goog-tooltip,.goog-tooltip:hover{display:none!important} .goog-text-highlight{background:none!important;box-shadow:none!important;border:none!important} /* keep the hidden gadget from ever taking up space or showing text */ .goog-te-gadget{height:0!important;overflow:hidden!important;font-size:0!important} .goog-logo-link,.goog-te-gadget span{display:none!important} /* the dropdown menu iframe Google shows when translating — style softly */ iframe.goog-te-menu-frame{box-shadow:0 24px 60px -24px rgba(10,27,51,.55)!important;border-radius:12px!important} /* ========================================================= Mobile — keep the language button visible (useful for international visitors) even though the CTA collapses ========================================================= */ @media(max-width:900px){ .lang-switch{margin-right:4px} .lang-menu{right:0} } @media(max-width:420px){ .lang-menu{min-width:180px} } /* ========================================================= RTL SUPPORT (Arabic, and any right-to-left translation) Google Translate sets dir="rtl" on the page for these languages. These rules keep the layout intact — no horizontal overflow, no misplaced off-canvas panels. ========================================================= */ /* hard guard: nothing creates sideways scroll regardless of direction */ html[dir="rtl"],html[dir="rtl"] body{overflow-x:hidden;max-width:100vw} /* the off-canvas mobile menu hides to the LEFT in RTL, not the right */ html[dir="rtl"] .mobile-menu{inset:0 auto 0 0;left:0;right:auto;transform:translateX(-100%)} html[dir="rtl"] .mobile-menu.open{transform:translateX(0)} /* floating action buttons move to the LEFT edge in RTL */ html[dir="rtl"] .wa-float, html[dir="rtl"] .call-float, html[dir="rtl"] .to-top{right:auto;left:22px} @media(max-width:680px){ html[dir="rtl"] .wa-float, html[dir="rtl"] .call-float, html[dir="rtl"] .to-top{right:auto;left:16px} } /* keep the language dropdown aligned inside the viewport in RTL */ html[dir="rtl"] .lang-menu{right:auto;left:0} /* Arabic/RTL text should read right-aligned within translated blocks, but keep our English-only UI (nav structure, forms) left-to-right */ html[dir="rtl"] .notranslate{direction:ltr}