/* cfstream.com — language switcher + right-to-left support.
   Shared by the static pages (/<locale>/…) and the catalog (Next.js). */

.lang-switch{position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;
  border-radius:50px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  color:#f1f2f7;font:600 13px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.04em;cursor:pointer;
  transition:border-color .2s,background .2s;flex-shrink:0}
.lang-switch:hover,.lang-switch:focus-within{border-color:rgba(143,176,255,.6);background:rgba(91,143,255,.12)}
.lang-switch-ico{opacity:.85;flex-shrink:0}
.lang-switch-code{min-width:1.6em;text-align:center}
.lang-switch-chev{opacity:.6;flex-shrink:0}
/* The native select covers the pill: the OS list shows full language names. */
.lang-switch select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  font-size:16px;border:0;appearance:none;-webkit-appearance:none}
.lang-switch select option{color:#0b1020;background:#fff}
.lang-switch-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header: sits right before the CTA (auto margin keeps the header's space-between layout). */
.lang-switch--header{margin-inline-start:auto;margin-inline-end:14px}
/* Mobile menu: full-width row above the CTA; the header pill is hidden on mobile. */
.lang-switch--mobile{display:flex;justify-content:center;height:48px;margin:6px 0 14px;font-size:15px}
@media (max-width:900px){.lang-switch--header{display:none!important}}

/* Header layout. The nav used to be absolutely centred, so between ~900 and
   ~1170px it already ran into the logo and CTA; with the switcher (and longer
   EN/PT/AR labels) it needs a real flex layout:
   - wide screens: logo | nav (centred in the free space) | switcher | CTA
   - 901–1360px:  logo | switcher | CTA | burger (nav moves to the menu) */
@media (min-width:1361px){
  #site-header .nav{position:static!important;left:auto!important;transform:none!important;
    flex:1 1 auto;justify-content:center;margin:0 24px}
  #site-header .lang-switch--header{margin-inline-start:0}
}
@media (min-width:901px) and (max-width:1360px){
  #site-header .nav{display:none!important}
  #site-header .burger{display:flex!important;margin-inline-start:14px}
}

/* ── Arabic / RTL ───────────────────────────────────────────── */
html[lang="ar"] body,html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,
html[lang="ar"] p,html[lang="ar"] a,html[lang="ar"] li,html[lang="ar"] button,html[lang="ar"] input,
html[lang="ar"] select,html[lang="ar"] textarea,html[lang="ar"] label,html[lang="ar"] span,html[lang="ar"] td,html[lang="ar"] th{
  font-family:"IBM Plex Sans Arabic","Plus Jakarta Sans",sans-serif!important;letter-spacing:0!important}
html[dir="rtl"] body{text-align:right}
/* Directional arrows/chevrons point the reading way. */
html[dir="rtl"] .cat-section-link svg,html[dir="rtl"] .cat-card-cta svg,html[dir="rtl"] .cat-tile-arrow svg,
html[dir="rtl"] .cat-subtile-cta svg,html[dir="rtl"] .footer-email-cta svg,html[dir="rtl"] .cat-quick-filters-next svg,
html[dir="rtl"] [data-dir-icon]{transform:scaleX(-1)}
html[dir="rtl"] .cat-breadcrumb-sep{display:inline-block;transform:scaleX(-1)}
/* Catalog (app/catalog.css) — mirror every physical left/right rule for RTL. */
html[dir="rtl"] .cat-search-kbd{margin-right:0;margin-left:4px}
html[dir="rtl"] .cat-search-ai{margin-right:0;margin-left:8px}
html[dir="rtl"] .cat-search{padding-left:0;padding-right:18px}
html[dir="rtl"] .cat-quick-filters-wrap.has-overflow::after{right:auto;left:0;
  background:linear-gradient(to left,transparent 0%,rgba(5,5,7,.92) 70%,rgba(5,5,7,.96) 100%)}
html[dir="rtl"] .cat-quick-filters-next{right:auto;left:6px}
html[dir="rtl"] .cat-quick-filters-next:hover{transform:translateY(-50%) translateX(-2px)}
html[dir="rtl"] .cat-quick-filters-next svg{transform:scaleX(-1)}
html[dir="rtl"] .cat-tile-arrow{right:auto;left:18px}
html[dir="rtl"] .cat-card-badge{left:auto;right:10px}
html[dir="rtl"] .cat-category-hero-stats strong{margin-right:0;margin-left:6px}
html[dir="rtl"] .cat-subtile-ghost{right:auto;left:-8px}
html[dir="rtl"] .cat-subtile:hover .cat-subtile-cta svg{transform:scaleX(-1) translateX(4px)}
html[dir="rtl"] .pdp-stage-tag{left:auto;right:14px}
/* Gallery: "previous" sits on the right and points right in RTL. */
html[dir="rtl"] .pdp-arrow-prev{left:auto;right:14px}
html[dir="rtl"] .pdp-arrow-next{right:auto;left:14px}
html[dir="rtl"] .pdp-arrow svg{transform:scaleX(-1)}
html[dir="rtl"] .pdp-trust li{padding-left:0;padding-right:24px}
html[dir="rtl"] .pdp-trust li::before{left:auto;right:0}
html[dir="rtl"] .pdp-specs th{text-align:right}
/* Form fields: numbers, emails and phones stay left-to-right inside RTL text. */
html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="tel"],html[dir="rtl"] input[type="url"]{direction:ltr;text-align:right}

/* Links inside the legal pages (e-mail, cross-references) — brand light blue on the dark ground. */
.legal-body a{color:#8fb0ff;text-decoration:underline;text-underline-offset:2px}
.legal-body a:hover{color:#c3d3ff}