/* Sahel Sahra Translator — Frontend Switcher */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500;700&display=swap'); .sst-sw { font-family:'Cairo',sans-serif; position:relative; display:inline-block; z-index:9999; direction:ltr; } .sst-sw--floating { position:fixed; } .sst-sw--bottom_right { bottom:24px; right:24px; } .sst-sw--bottom_left { bottom:24px; left:24px; } .sst-sw--top_right { top:80px; right:24px; } .sst-sw--top_left { top:80px; left:24px; } /* Button */ .sst-sw__btn { display:flex; align-items:center; gap:7px; padding:9px 16px; background:linear-gradient(135deg,#0d3b6e,#1a6b9a); color:#fff; border:none; border-radius:50px; cursor:pointer; font-family:'Cairo',sans-serif; font-size:14px; font-weight:700; box-shadow:0 4px 18px rgba(13,59,110,.35); transition:all .2s ease; white-space:nowrap; } .sst-sw__btn:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(13,59,110,.45); filter:brightness(1.08); } .sst-sw__name { font-size:14px; } .sst-sw__caret { flex-shrink:0; transition:transform .2s; } .sst-sw.open .sst-sw__caret { transform:rotate(180deg); } .sst-flag-emoji { line-height:1; } /* Dropdown */ .sst-sw__menu { position:absolute; bottom:calc(100% + 8px); right:0; min-width:160px; background:#fff; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.07); list-style:none; margin:0; padding:6px; opacity:0; visibility:hidden; transform:translateY(6px); transition:all .2s cubic-bezier(.4,0,.2,1); border:1px solid rgba(0,0,0,.06); } .sst-sw--top_right .sst-sw__menu, .sst-sw--top_left .sst-sw__menu { bottom:auto; top:calc(100% + 8px); } .sst-sw--bottom_left .sst-sw__menu, .sst-sw--top_left .sst-sw__menu { right:auto; left:0; } .sst-sw.open .sst-sw__menu { opacity:1; visibility:visible; transform:translateY(0); } .sst-sw__item { display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:8px; color:#374151; text-decoration:none; font-size:14px; font-weight:500; transition:background .15s; white-space:nowrap; } .sst-sw__item:hover { background:#f0f9ff; color:#0d3b6e; } .sst-sw__item--active { background:linear-gradient(135deg,#eff6ff,#f0fdf4); color:#0d3b6e; font-weight:700; } .sst-sw__check { margin-right:auto; color:#1a6b9a; font-weight:700; } /* ── Direction overrides for LTR languages ── */ /* Applied to and via PHP filter */ html[dir="ltr"], html[dir="ltr"] body { direction: ltr; text-align: left; } /* Force ALL content elements to LTR when language is fr or en */ body.sst-lang-fr, body.sst-lang-en { direction: ltr !important; text-align: left !important; } body.sst-lang-fr *, body.sst-lang-en * { direction: ltr !important; } /* Re-allow explicitly RTL elements (Arabic text embedded in page) */ body.sst-lang-fr [dir="rtl"], body.sst-lang-en [dir="rtl"] { direction: rtl !important; } /* Post/page content */ body.sst-lang-fr .entry-content, body.sst-lang-fr .post-content, body.sst-lang-fr article, body.sst-lang-fr p, body.sst-lang-fr h1, body.sst-lang-fr h2, body.sst-lang-fr h3, body.sst-lang-fr h4, body.sst-lang-fr .site-content, body.sst-lang-en .entry-content, body.sst-lang-en .post-content, body.sst-lang-en article, body.sst-lang-en p, body.sst-lang-en h1, body.sst-lang-en h2, body.sst-lang-en h3, body.sst-lang-en h4, body.sst-lang-en .site-content { direction: ltr !important; text-align: left !important; } /* Arabic stays RTL */ body.sst-lang-ar { direction: rtl !important; text-align: right !important; } /* Loading overlay */ .sst-loading-bar { position:fixed; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#1a6b9a,#0d7a5f); z-index:99999; animation:sst-loading 1s ease infinite; } @keyframes sst-loading { 0%{transform:scaleX(0);transform-origin:left} 50%{transform:scaleX(1);transform-origin:left} 51%{transform:scaleX(1);transform-origin:right} 100%{transform:scaleX(0);transform-origin:right} } /* Translation loading indicator */ .sst-translating { position: fixed; bottom: 80px; right: 24px; background: linear-gradient(135deg, #0d3b6e, #1a6b9a); color: #fff; padding: 8px 16px; border-radius: 50px; font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 600; z-index: 9998; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 16px rgba(13,59,110,.3); animation: sst-fadein .3s ease; } @keyframes sst-fadein { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } .sst-translating__dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: sst-pulse .8s ease infinite; } @keyframes sst-pulse { 0%,100%{opacity:.3} 50%{opacity:1} }