/* Legal pages — Arabic/English toggle + RTL support. Supplementary to the shared design system (css/style.css). Used only by the six bilingual legal pages (company + Alden + Quantmind privacy/terms), where Arabic is authored as the source-of-truth language () and English is a hand-written rendering shown via a manual toggle. Does not redefine anything already provided by style.css. */ .hidden { display: none !important; } /* ---------- Language toggle ---------- */ .lang-toggle { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; } .lang-btn { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--surface-border); background: var(--surface); color: var(--text-dim); font-family: inherit; font-size: 0.86rem; cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); } .lang-btn:hover { color: var(--text); } .lang-btn.is-active { color: var(--text); border-color: var(--cyan); background: var(--cyan-soft); } .lang-toggle-sep { color: var(--text-faint); } /* ---------- Always-visible placeholder-draft disclaimer ---------- */ /* Shown regardless of which language block is active. */ .draft-notice { max-width: 620px; margin: 0 auto 30px; padding: 14px 20px; border-radius: var(--radius-sm); border: 1px solid var(--surface-border); border-inline-start: 3px solid var(--violet); background: var(--surface); font-size: 0.85rem; line-height: 1.5; } .draft-notice span { display: block; color: var(--text-dim); } .draft-notice span + span { margin-top: 4px; color: var(--text-faint); } /* ---------- RTL-aware content fixes ---------- */ /* text-align on paragraphs/headings already follows the block's own dir attribute via the CSS "start" default — only physical (non-logical) properties baked into style.css / product CSS need an explicit mirror for the Arabic block. */ [data-lang-block="ar"] ul { padding-left: 0; padding-right: 20px; } /* Quantmind's .risk-note hardcodes text-align:left + border-left */ [data-lang-block="ar"] .risk-note { text-align: right; border-left: none; border-right: 3px solid var(--violet); } @media (max-width: 860px) { .lang-toggle { flex-wrap: wrap; } }