/* ═══════════════════════════════════════════════════════════════════════════
   RADIANT OPTIMIZER — INTERNATIONALIZATION LAYOUT LAYER
   Pairs with js/ro-i18n.js. Load this LAST so it can correct page CSS.

   Three jobs:
     1. Style the language switcher that lives top-left in the nav.
     2. Give every script (Arabic, Devanagari, CJK, Thai…) a font that
        actually CONTAINS its glyphs — Orbitron / Radiant / Exo 2 do not,
        so without this those languages render as tofu boxes (□□□).
     3. Stop translated text — which can be 2-3x longer than English — from
        overflowing buttons, cards, tabs, or pushing the page sideways.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════════════
   0. PER-SCRIPT FONT STACKS
   System fonts first (zero download, already on the user's OS), Noto as the
   named fallback. We never load a webfont just for this — no perf cost.
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  --ro-f-latin:     "Orbitron", "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ro-f-arabic:    "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", "Arial Unicode MS", sans-serif;
  --ro-f-hebrew:    "Segoe UI", "Noto Sans Hebrew", Arial, "Arial Hebrew", sans-serif;
  --ro-f-deva:      "Nirmala UI", "Noto Sans Devanagari", "Mangal", "Kohinoor Devanagari", sans-serif;
  --ro-f-bengali:   "Nirmala UI", "Noto Sans Bengali", "Vrinda", "Kohinoor Bangla", sans-serif;
  --ro-f-gurmukhi:  "Nirmala UI", "Noto Sans Gurmukhi", "Raavi", sans-serif;
  --ro-f-gujarati:  "Nirmala UI", "Noto Sans Gujarati", "Shruti", sans-serif;
  --ro-f-tamil:     "Nirmala UI", "Noto Sans Tamil", "Latha", "Tamil MN", sans-serif;
  --ro-f-telugu:    "Nirmala UI", "Noto Sans Telugu", "Gautami", sans-serif;
  --ro-f-kannada:   "Nirmala UI", "Noto Sans Kannada", "Tunga", sans-serif;
  --ro-f-malayalam: "Nirmala UI", "Noto Sans Malayalam", "Kartika", sans-serif;
  --ro-f-sinhala:   "Nirmala UI", "Noto Sans Sinhala", "Iskoola Pota", sans-serif;
  --ro-f-thai:      "Leelawadee UI", "Noto Sans Thai", "Tahoma", "Thonburi", sans-serif;
  --ro-f-khmer:     "Leelawadee UI", "Noto Sans Khmer", "Khmer UI", sans-serif;
  --ro-f-lao:       "Leelawadee UI", "Noto Sans Lao", "Lao UI", sans-serif;
  --ro-f-myanmar:   "Myanmar Text", "Noto Sans Myanmar", "Padauk", sans-serif;
  --ro-f-sc:        "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "SimHei", sans-serif;
  --ro-f-tc:        "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "PMingLiU", sans-serif;
  --ro-f-jp:        "Yu Gothic UI", "Yu Gothic", "Meiryo", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --ro-f-kr:        "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", "Nanum Gothic", sans-serif;
  --ro-f-ethiopic:  "Ebrima", "Noto Sans Ethiopic", "Nyala", sans-serif;
  --ro-f-armenian:  "Segoe UI", "Noto Sans Armenian", "Sylfaen", sans-serif;
  --ro-f-georgian:  "Segoe UI", "Noto Sans Georgian", "Sylfaen", sans-serif;
}

/* When a non-Latin script is active, override the display fonts everywhere.
   `html[class]` doubles specificity so this beats page-level font rules. */
html.ro-script-arabic    body, html.ro-script-arabic    body * { font-family: var(--ro-f-arabic)    !important; }
html.ro-script-hebrew    body, html.ro-script-hebrew    body * { font-family: var(--ro-f-hebrew)    !important; }
html.ro-script-deva      body, html.ro-script-deva      body * { font-family: var(--ro-f-deva)      !important; }
html.ro-script-bengali   body, html.ro-script-bengali   body * { font-family: var(--ro-f-bengali)   !important; }
html.ro-script-gurmukhi  body, html.ro-script-gurmukhi  body * { font-family: var(--ro-f-gurmukhi)  !important; }
html.ro-script-gujarati  body, html.ro-script-gujarati  body * { font-family: var(--ro-f-gujarati)  !important; }
html.ro-script-tamil     body, html.ro-script-tamil     body * { font-family: var(--ro-f-tamil)     !important; }
html.ro-script-telugu    body, html.ro-script-telugu    body * { font-family: var(--ro-f-telugu)    !important; }
html.ro-script-kannada   body, html.ro-script-kannada   body * { font-family: var(--ro-f-kannada)   !important; }
html.ro-script-malayalam body, html.ro-script-malayalam body * { font-family: var(--ro-f-malayalam) !important; }
html.ro-script-sinhala   body, html.ro-script-sinhala   body * { font-family: var(--ro-f-sinhala)   !important; }
html.ro-script-thai      body, html.ro-script-thai      body * { font-family: var(--ro-f-thai)      !important; }
html.ro-script-khmer     body, html.ro-script-khmer     body * { font-family: var(--ro-f-khmer)     !important; }
html.ro-script-lao       body, html.ro-script-lao       body * { font-family: var(--ro-f-lao)       !important; }
html.ro-script-myanmar   body, html.ro-script-myanmar   body * { font-family: var(--ro-f-myanmar)   !important; }
html.ro-script-sc        body, html.ro-script-sc        body * { font-family: var(--ro-f-sc)        !important; }
html.ro-script-tc        body, html.ro-script-tc        body * { font-family: var(--ro-f-tc)        !important; }
html.ro-script-jp        body, html.ro-script-jp        body * { font-family: var(--ro-f-jp)        !important; }
html.ro-script-kr        body, html.ro-script-kr        body * { font-family: var(--ro-f-kr)        !important; }
html.ro-script-ethiopic  body, html.ro-script-ethiopic  body * { font-family: var(--ro-f-ethiopic)  !important; }
html.ro-script-armenian  body, html.ro-script-armenian  body * { font-family: var(--ro-f-armenian)  !important; }
html.ro-script-georgian  body, html.ro-script-georgian  body * { font-family: var(--ro-f-georgian)  !important; }

/* Icon fonts must keep their own family or every icon turns into a letter. */
html[class*="ro-script-"] body i[class*="fa-"],
html[class*="ro-script-"] body .material-icons,
html[class*="ro-script-"] body [class*="icon-"]::before,
html[class*="ro-script-"] body svg { font-family: inherit !important; }
html[class*="ro-script-"] body i[class*="fa-"] { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", inherit !important; }

/* These scripts have tall ascenders/descenders — cramped line-height clips
   them. Loosen it and drop the wide letter-spacing meant for Latin display. */
html.ro-script-deva      body, html.ro-script-bengali body, html.ro-script-gurmukhi body,
html.ro-script-gujarati  body, html.ro-script-tamil   body, html.ro-script-telugu   body,
html.ro-script-kannada   body, html.ro-script-malayalam body, html.ro-script-sinhala body,
html.ro-script-thai      body, html.ro-script-khmer   body, html.ro-script-lao      body,
html.ro-script-myanmar   body, html.ro-script-ethiopic body {
  line-height: 1.75;
}
html[class*="ro-script-"] body :is(h1,h2,h3,h4,h5,h6,.nav-tab,.btn,button,a) {
  letter-spacing: normal !important;
  text-transform: none !important;   /* uppercase is meaningless / harmful here */
}

/* Thai, Khmer, Lao, Burmese have no spaces between words — the browser needs
   explicit permission to break lines or text runs straight off the edge. */
html.ro-script-thai body, html.ro-script-khmer body,
html.ro-script-lao  body, html.ro-script-myanmar body {
  word-break: break-word;
  line-break: normal;
  overflow-wrap: anywhere;
}

/* CJK breaks anywhere and needs no hyphenation. */
html.ro-script-sc body, html.ro-script-tc body,
html.ro-script-jp body, html.ro-script-kr body {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  hyphens: none;
}

/* Per-option font inside the switcher menu, so all ~70 native names render
   correctly even while the site itself is still in English. */
.ro-s-arabic    { font-family: var(--ro-f-arabic)    !important; }
.ro-s-hebrew    { font-family: var(--ro-f-hebrew)    !important; }
.ro-s-deva      { font-family: var(--ro-f-deva)      !important; }
.ro-s-bengali   { font-family: var(--ro-f-bengali)   !important; }
.ro-s-gurmukhi  { font-family: var(--ro-f-gurmukhi)  !important; }
.ro-s-gujarati  { font-family: var(--ro-f-gujarati)  !important; }
.ro-s-tamil     { font-family: var(--ro-f-tamil)     !important; }
.ro-s-telugu    { font-family: var(--ro-f-telugu)    !important; }
.ro-s-kannada   { font-family: var(--ro-f-kannada)   !important; }
.ro-s-malayalam { font-family: var(--ro-f-malayalam) !important; }
.ro-s-sinhala   { font-family: var(--ro-f-sinhala)   !important; }
.ro-s-thai      { font-family: var(--ro-f-thai)      !important; }
.ro-s-khmer     { font-family: var(--ro-f-khmer)     !important; }
.ro-s-lao       { font-family: var(--ro-f-lao)       !important; }
.ro-s-myanmar   { font-family: var(--ro-f-myanmar)   !important; }
.ro-s-sc        { font-family: var(--ro-f-sc)        !important; }
.ro-s-tc        { font-family: var(--ro-f-tc)        !important; }
.ro-s-jp        { font-family: var(--ro-f-jp)        !important; }
.ro-s-kr        { font-family: var(--ro-f-kr)        !important; }
.ro-s-ethiopic  { font-family: var(--ro-f-ethiopic)  !important; }
.ro-s-armenian  { font-family: var(--ro-f-armenian)  !important; }
.ro-s-georgian  { font-family: var(--ro-f-georgian)  !important; }

/* ═════════════════════════════════════════════════════════════════════════
   1. THE LANGUAGE SWITCHER (top-left of the nav)
   Scoped ONLY to .ro-lang* — never touch brand/nav layout.
   ═════════════════════════════════════════════════════════════════════════ */
.ro-lang {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 1200;
  direction: ltr !important;
  font-family: var(--ro-f-latin);
}

.ro-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  max-width: 160px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ro-lang-btn:hover {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(96, 165, 250, 0.45);
  color: #fff;
}
.ro-lang-btn:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}
.ro-lang-globe { flex: 0 0 auto; color: #60a5fa; }
.ro-lang-native {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ro-lang-chev {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.45);
  transition: transform .2s ease;
}
.ro-lang.is-open .ro-lang-chev { transform: rotate(180deg); }

.ro-lang-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: none;
  flex-direction: column;
  width: 268px;
  max-width: calc(100vw - 24px);
  max-height: min(60vh, 420px);
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  background: #0b0f1c;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
  z-index: 10050;
  direction: ltr !important;
  box-sizing: border-box;
}
.ro-lang.is-open { z-index: 10050; }
.ro-lang.is-open .ro-lang-panel { display: flex; animation: roLangIn .16s ease; }
.ro-lang-panel.ro-flip-up { top: auto; bottom: calc(100% + 8px); }
.ro-lang-panel.ro-flip-right { left: auto; right: 0; }

@keyframes roLangIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ro-lang-search {
  flex: 0 0 auto;
  width: 100%;
  height: 34px;
  margin-bottom: 6px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.ro-lang-search::placeholder { color: rgba(255, 255, 255, 0.4); }
.ro-lang-search:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.6);
  background: rgba(96, 165, 250, 0.08);
}

.ro-lang-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ro-lang-list::-webkit-scrollbar { width: 6px; }
.ro-lang-list::-webkit-scrollbar-track { background: transparent; }
.ro-lang-list::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.35);
  border-radius: 6px;
}

.ro-lang-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s ease, color .12s ease;
}
.ro-lang-opt:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.ro-lang-opt.is-active { background: rgba(59, 130, 246, 0.18); color: #fff; }
.ro-lang-opt:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; }

.ro-lang-names {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.ro-lang-opt-native {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ro-lang-opt-label {
  font-size: 10.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ro-lang-check {
  flex: 0 0 auto;
  display: none;
  color: #60a5fa;
  line-height: 0;
}
.ro-lang-opt.is-active .ro-lang-check { display: block; }

@media (max-width: 640px) {
  .ro-lang-btn { max-width: none; padding: 0 10px; height: 36px; }
  .ro-lang-btn .ro-lang-native,
  .ro-lang-btn .ro-lang-chev { display: none; }
  .ro-lang-panel { width: 250px; }
}

html.ro-rtl .ro-lang-panel { left: 0; right: auto; }
html.ro-rtl .ro-lang-panel.ro-flip-right { left: 0; right: auto; }

/* ═════════════════════════════════════════════════════════════════════════
   2. GLOBAL OVERFLOW GUARD
   Nothing translated may ever create a horizontal scrollbar.
   ═════════════════════════════════════════════════════════════════════════ */
html, body { max-width: 100%; overflow-x: hidden; }

html.ro-translated body {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Headings are the #1 overflow offender: big font + a language like German
   that welds words together. Allow breaking and hyphenation. */
html.ro-translated :is(h1, h2, h3, h4, h5, h6) {
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Flex/grid children default to min-width:auto, which REFUSES to shrink below
   their content — this is the single most common cause of "text pushed the
   layout off the page". Opt every common container out of it. */
html.ro-translated :is(
  .nav, .nav-container, .left-side, .centered, .right-side,
  .nav-tab-container, .hero, .container, .wrapper, .row, .col,
  [class*="grid"], [class*="flex"], [class*="card"], [class*="panel"],
  [class*="section"], [class*="inner"], [class*="content"]
) { min-width: 0; }

/* ═════════════════════════════════════════════════════════════════════════
   3. BUTTONS, TABS & CTAs
   Let them GROW with the text rather than clipping it. Fixed heights become
   minimums; nowrap becomes normal wrapping.
   ═════════════════════════════════════════════════════════════════════════ */
html.ro-translated :is(
  .btn, .button, button, .nav-tab, .nav-cta, .cta,
  .nav-signup-btn, .nav-login-btn, .nav-auth-btn, .nav-dashboard-btn,
  [class*="btn-"], [class*="-btn"]
) {
  white-space: normal;
  overflow-wrap: anywhere;
  height: auto;
  min-height: 38px;
  line-height: 1.25;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
}

/* Nav tabs: shrink the type slightly rather than blow out the bar. Long
   languages (German, Greek, Finnish, Vietnamese) fit at ~12px. */
html.ro-translated .nav-tab {
  white-space: nowrap;          /* tabs read better on one line… */
  font-size: clamp(11px, 0.78vw, 14px);  /* …so scale instead of wrap */
  padding-left: clamp(8px, 0.9vw, 18px);
  padding-right: clamp(8px, 0.9vw, 18px);
  min-width: 0;
}
html.ro-translated .nav-tab-container { flex-wrap: nowrap; min-width: 0; overflow: visible; }

/* Below the desktop breakpoint the tabs live in the drawer, so let them
   breathe there. */
@media (max-width: 1024px) {
  html.ro-translated .rnav-drawer-links .nav-tab {
    white-space: normal;
    font-size: 15px;
    text-align: center;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   4. CARDS, PRICING, FEATURE TILES
   Fixed heights + translated text = clipped copy. Convert to min-height.
   ═════════════════════════════════════════════════════════════════════════ */
html.ro-translated :is(
  [class*="card"], [class*="tile"], [class*="feature"],
  [class*="pricing"], [class*="plan"], [class*="step"], [class*="stat"]
) {
  height: auto;
  min-height: 0;
  overflow-wrap: anywhere;
}

/* Anything the page clamped to N lines: give translated text one more line,
   since most languages need 20-40% more room than English. */
html.ro-translated [style*="-webkit-line-clamp"],
html.ro-translated [class*="clamp"],
html.ro-translated [class*="truncate"] {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

/* Keep genuinely single-line UI chrome (the switcher, badges) truncating. */
html.ro-translated .ro-lang-native,
html.ro-translated .ro-lang-opt-native,
html.ro-translated .ro-lang-opt-label {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ═════════════════════════════════════════════════════════════════════════
   5. RIGHT-TO-LEFT (Arabic, Hebrew, Persian, Urdu)
   ═════════════════════════════════════════════════════════════════════════ */
html.ro-rtl body { direction: rtl; text-align: right; }

/* The nav bar keeps its LTR geometry — logo left, tabs centre, auth right —
   because mirroring it makes the brand mark land in an unexpected place. */
html.ro-rtl :is(.nav-container, .nav, .left-side, .centered, .right-side,
                .nav-tab-container, .ro-lang) {
  direction: ltr;
}
/* …but the tab LABELS themselves still render RTL internally. */
html.ro-rtl .nav-tab { direction: rtl; }

html.ro-rtl :is(section, article, main, footer, .container, [class*="card"],
                [class*="panel"], [class*="section"]) {
  text-align: right;
}

/* Data that is inherently LTR must not be reordered by the bidi algorithm. */
html.ro-rtl :is(code, pre, kbd, samp, .price, [class*="price"], [class*="mono"],
                [class*="version"], input[type="email"], input[type="password"],
                input[type="url"], input[type="tel"], .stat-number, [class*="stat-num"]) {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* Mirror directional padding/margin utilities that assumed LTR. */
html.ro-rtl .rnav-drawer { direction: rtl; text-align: right; }
html.ro-rtl ul, html.ro-rtl ol { padding-right: 1.4em; padding-left: 0; }

/* Arrows and chevrons that mean "forward" should point the other way. */
html.ro-rtl :is([class*="arrow-right"], [class*="chevron-right"]) { transform: scaleX(-1); }

/* ═════════════════════════════════════════════════════════════════════════
   6. FORMS
   Translated labels/placeholders are longer; stop them overflowing inputs.
   ═════════════════════════════════════════════════════════════════════════ */
html.ro-translated :is(input, select, textarea, label) {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
html.ro-translated label { display: inline-block; line-height: 1.4; }
html.ro-rtl :is(input, textarea, select) { text-align: right; }
html.ro-rtl :is(input[type="email"], input[type="password"], input[type="url"]) { text-align: left; }

/* ═════════════════════════════════════════════════════════════════════════
   7. LEGACY CLEANUP
   The old Google Translate widget is gone; these rules make sure no stale
   cookie or cached script can resurrect its banner and shove the page down.
   ═════════════════════════════════════════════════════════════════════════ */
.goog-te-banner-frame,
.goog-te-gadget,
.goog-te-gadget-icon,
.goog-te-menu-frame,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-text-highlight,
#goog-gt-tt,
#google_translate_element,
iframe.skiptranslate {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  pointer-events: none !important;
}
body { top: 0 !important; }