/* ============================================================ * SAWTAK 7ELOW — Arabic (RTL) layer + language toggle. * Applied only when (set by i18n.js). * ============================================================ */ /* Language toggle (always visible) */ .sh-lang{ position:fixed; top:14px; right:14px; z-index:99999; display:flex; gap:2px; padding:3px; background:rgba(0,0,0,.55); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); border-radius:999px; font-family:'Sora',system-ui,sans-serif; } .sh-lang button{ border:0; background:transparent; color:#fff; cursor:pointer; font-weight:700; font-size:.74rem; letter-spacing:.04em; padding:.38rem .8rem; border-radius:999px; line-height:1; transition:background .2s, color .2s; } .sh-lang button.active{ background:#E50914; color:#fff; } .sh-lang button:not(.active):hover{ color:#fff; background:rgba(255,255,255,.1); } :root[dir="rtl"] .sh-lang{ right:auto; left:14px; } /* ---- Arabic typography (same pairing as NEXT ROLE) ---- Body / text → Tajawal · Display headings → Changa (heavy, geometric). */ :root[dir="rtl"] body, :root[dir="rtl"] .sh-sec, :root[dir="rtl"] .sh-lead, :root[dir="rtl"] .sh-feat p, :root[dir="rtl"] .sh-step p, :root[dir="rtl"] .sh-cand-form, :root[dir="rtl"] .sh-cand-form input, :root[dir="rtl"] .sh-cand-form select, :root[dir="rtl"] .sh-cand-form textarea, :root[dir="rtl"] .elementor-widget-text-editor{ font-family:'Tajawal','Sora',system-ui,sans-serif; } /* Anton has no Arabic glyphs → use Changa (heavy) for display headings in AR */ :root[dir="rtl"] .sh-h2, :root[dir="rtl"] .sh-kicker, :root[dir="rtl"] .sh-feat h3, :root[dir="rtl"] .sh-vcard h3, :root[dir="rtl"] .sh-step h3, :root[dir="rtl"] .sh-figure, :root[dir="rtl"] .sh-num, :root[dir="rtl"] .sh-price strong{ font-family:'Changa','Tajawal',sans-serif; font-weight:800; letter-spacing:0; } /* Native Elementor headings force a Latin font → override it (!important beats Elementor's per-element specificity) so every Arabic title is Changa. */ :root[dir="rtl"] .elementor-heading-title, :root[dir="rtl"] .elementor-widget-heading .elementor-heading-title{ font-family:'Changa','Tajawal',sans-serif !important; font-weight:700 !important; letter-spacing:0; } /* Native body copy → Tajawal (avoid thin Latin fallback). */ :root[dir="rtl"] .elementor-widget-text-editor, :root[dir="rtl"] .elementor-widget-text-editor *, :root[dir="rtl"] .elementor-icon-list-text{ font-family:'Tajawal','Sora',sans-serif !important; } /* Keep the Latin brand wordmark (SAWTAK #7ELOW) in Anton. */ :root[dir="rtl"] .sh-hero h1, :root[dir="rtl"] .sh-hero .elementor-heading-title{ font-family:'Anton','Changa',sans-serif !important; } /* ---- Direction / alignment flips (my sections) ---- */ :root[dir="rtl"] .sh-wrap{ text-align:right; } :root[dir="rtl"] .sh-quote .sh-wrap, :root[dir="rtl"] .sh-cand .sh-wrap, :root[dir="rtl"] .sh-tickets .sh-wrap{ text-align:center; } :root[dir="rtl"] .sh-cand-form{ text-align:right; } :root[dir="rtl"] .sh-cand-form input, :root[dir="rtl"] .sh-cand-form select, :root[dir="rtl"] .sh-cand-form textarea{ direction:rtl; text-align:right; } :root[dir="rtl"] .sh-cand-form select{ background-position:left 1rem center; } :root[dir="rtl"] .sh-pull{ border-left:0; border-right:3px solid var(--red,#E50914); padding-left:0; padding-right:1.6rem; } :root[dir="rtl"] .sh-checks li{ padding-left:0; padding-right:2rem; } :root[dir="rtl"] .sh-checks li::before{ left:auto; right:0; } :root[dir="rtl"] .sh-plan li{ padding-left:0; padding-right:1.5rem; } :root[dir="rtl"] .sh-plan li::before{ left:auto; right:0; } :root[dir="rtl"] .sh-tag{ left:auto; right:1.8rem; } :root[dir="rtl"] .sh-steps{ text-align:right; } /* ---- Native Elementor: flip text alignment when RTL ---- */ :root[dir="rtl"] .elementor-widget-heading .elementor-heading-title, :root[dir="rtl"] .elementor-widget-text-editor{ text-align:right; } :root[dir="rtl"] .elementor-widget-heading.elementor-widget__width-auto, :root[dir="rtl"] .hero-logo, :root[dir="rtl"] [style*="text-align:center"]{ text-align:center; } /* Keep the hero centered look in AR too */ :root[dir="rtl"] .sh-hero .elementor-container{ text-align:center; }