/* ========================================================================== Wahat Al Wadi — Language toggle button + Arabic/RTL overrides. Loaded on every page alongside base.css/shop.css/pages.css. The theme's layout is flex-only, so setting dir="rtl" on already reverses every flex row automatically — the rules below only handle what CSS direction can't flip on its own: absolute/fixed-positioned elements (physical left/right), explicit text-align, icons that visually point a direction, and the Arabic font. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap'); /* ---- language toggle button ---- */ .lang-toggle{ display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px; border-radius:999px;border:1.5px solid var(--border,#ECE4D8);background:#FFFFFF; cursor:pointer;font-family:'Work Sans',sans-serif;font-size:13px;font-weight:600; color:#3A362F;transition:border-color .15s ease,color .15s ease,background .15s ease,transform .15s ease; flex-shrink:0;-webkit-tap-highlight-color:transparent; } .lang-toggle:hover{border-color:var(--accent,#F2790A);color:var(--accent,#F2790A);background:var(--cream,#FBF7F1);} .lang-toggle:active{transform:translateY(1px);} .lang-toggle-globe{font-size:15px;line-height:1;} .lang-toggle-label{white-space:nowrap;} .lang-toggle-mobile{ margin:14px 0 4px;width:100%;justify-content:center;height:46px;font-size:14px; } @media (max-width:640px){ .header-actions > .lang-toggle{display:none;} } /* ========================================================================== RTL — active whenever (Arabic mode) ========================================================================== */ [dir="rtl"] body, [dir="rtl"] .btn, [dir="rtl"] .navlink, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea, [dir="rtl"] .filter-item, [dir="rtl"] .page-btn, [dir="rtl"] .lang-toggle, [dir="rtl"] .account-tab-btn, [dir="rtl"] .prod-kicker, [dir="rtl"] .prod-name, [dir="rtl"] .prod-price{ font-family:'Cairo','Work Sans',Arial,sans-serif; } [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4, [dir="rtl"] .brand-text .name, [dir="rtl"] .pd-price{ font-family:'Cairo','Manrope',Arial,sans-serif; } /* Arabic name already appears as the product's main name once the whole page is RTL — the small English-page-only "also written as" line under the title on the product page would otherwise duplicate it. */ body.lang-ar .pd-arabic{display:none !important;} /* text-align:left is a physical property — flip the handful of spots that set it explicitly (flex rows/columns already reverse on their own). */ [dir="rtl"] .related-section .section-head, [dir="rtl"] .filter-item, [dir="rtl"] .account-tab-btn{ text-align:right !important; } /* search inputs: icon + padding sit on the trailing (left, in RTL) edge */ [dir="rtl"] .shop-search input{padding:15px 18px 15px 48px;} [dir="rtl"] .shop-search svg{right:auto;left:16px;} [dir="rtl"] .error-search input{padding:13px 16px 13px 44px;} [dir="rtl"] .error-search svg{right:auto;left:14px;} /* select chevrons */ [dir="rtl"] .select-wrap select{padding:10px 14px 10px 36px;} [dir="rtl"] .select-wrap svg{right:auto;left:12px;} /* nav dropdown menu: keep it under "Shop" instead of overflowing off-screen */ [dir="rtl"] .nav-dropdown-menu{left:auto;right:-14px;} /* frozen badge on product images */ [dir="rtl"] .prod-badge{left:auto;right:10px;} /* cart-count badge on the header cart icon */ [dir="rtl"] .cart-badge{right:auto;left:-4px;} /* hero trust badge card overlaps the photo from the leading edge */ [dir="rtl"] .hero-badge{margin-left:0;margin-right:24px;} /* floating WhatsApp button + hero background flourish */ [dir="rtl"] .wa-float{right:auto;left:26px;} [dir="rtl"] .hero-palms{right:auto;left:-60px;} /* wholesale media caption pill */ [dir="rtl"] .wholesale-media-tag{left:auto;right:24px;} /* mobile filter drawer slides in from the trailing edge (right, in RTL) */ [dir="rtl"] .filter-drawer{left:auto;right:0;transform:translateX(100%);} [dir="rtl"] .filter-drawer.is-open{transform:translateX(0);} /* account tabs sidebar: the divider belongs on the side touching the panels */ [dir="rtl"] .account-tabs{border-right:none;border-left:1px solid var(--border);} /* simple directional arrow icons/glyphs — mirror so they still point toward "next"/"forward" in a right-to-left reading flow */ [dir="rtl"] .cat-arrow, [dir="rtl"] .nav-dropdown-toggle svg{ transform:scaleX(-1); } [dir="rtl"] .nav-dropdown:hover .nav-dropdown-toggle svg, [dir="rtl"] .nav-dropdown.is-open .nav-dropdown-toggle svg{ transform:scaleX(-1) rotate(180deg); } [dir="rtl"] .cat-card:hover .cat-arrow{transform:scaleX(-1) translateX(4px);} [dir="rtl"] .pagination .page-btn:first-child, [dir="rtl"] .pagination .page-btn:last-child{ transform:scaleX(-1); } [dir="rtl"] #shop-empty-reset, [dir="rtl"] .related-section h2{ text-align:right; } /* mobile-drawer category list indentation */ [dir="rtl"] .mobile-nav .mnav-cats{padding:2px 14px 8px 0;} /* ========================================================================== Phone / WhatsApp / email / price / SKU display direction (Arabic mode). The Unicode bidi algorithm reorders space-separated digit groups with no strong-LTR anchor (e.g. "+971 4 566 4690" -> visually "4690 566 4 971+") when they sit directly inside an RTL paragraph. Every such value in the markup/JS output is wrapped in , which browsers already isolate by default — this rule just makes that explicit. The Arabic page itself stays RTL; only these Latin/numeric runs are isolated. ---- */ bdi{unicode-bidi:isolate;direction:ltr;} /* Phone/WhatsApp/email input fields: what a user types into these is always Latin/numeric (UAE phone numbers, email addresses), so keep them LTR even on the Arabic form instead of letting the RTL page direction reorder digits as they're typed. */ [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"]{ direction:ltr; }