/* ========================================================================== Arabic RTL hardening for aklimiko.dz Astra + Elementor Pro + WooCommerce -------------------------------------------------------------------------- TranslatePress already sets dir="rtl" on for Arabic, and Astra ships its own *-rtl.css. This file ONLY patches the few spots where Elementor's inline/absolute layouts don't auto-mirror. It is scoped to [dir="rtl"] so it can NEVER affect the French or English (LTR) versions of the site. How to load it: TranslatePress adds the body/html dir automatically. Add this file via Appearance > Customize > Additional CSS, OR enqueue from a child theme. Do NOT edit Astra's own CSS. ========================================================================== */ /* Base direction (TranslatePress sets html[dir=rtl]; we reinforce for safety) */ html[dir="rtl"] body { direction: rtl; text-align: right; } /* Keep Latin-script brand names / prices / SKUs readable inside RTL text */ html[dir="rtl"] .woocommerce-Price-amount, html[dir="rtl"] .price, html[dir="rtl"] bdi, html[dir="rtl"] .sku, html[dir="rtl"] .elementor-widget-woocommerce-product-price { direction: ltr; unicode-bidi: embed; } /* Elementor: mirror common flex rows that use justify-content:flex-start */ html[dir="rtl"] .elementor-element .elementor-widget-container { text-align: right; } /* Header / nav: flip menu item flow and icon spacing */ html[dir="rtl"] .main-header-menu li, html[dir="rtl"] .ast-header-menu li { text-align: right; } html[dir="rtl"] .menu-item .sub-menu { left: auto; right: 0; } /* WooCommerce: cart / checkout / account tables align right */ html[dir="rtl"] .woocommerce table.shop_table th, html[dir="rtl"] .woocommerce table.shop_table td { text-align: right; } html[dir="rtl"] .woocommerce .quantity .qty { text-align: center; } /* keep numeric centred */ /* Buttons & form fields: text alignment + padding mirror */ html[dir="rtl"] input[type="text"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="search"], html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } /* Language switcher: keep the FR/EN/AR list horizontal in all langs */ .trp-language-switcher, .trp_language_switcher_shortcode { display: inline-block; } html[dir="rtl"] .trp-language-switcher { text-align: right; } /* Float utilities used by Elementor columns */ html[dir="rtl"] .elementor-column.elementor-col-50 { /* let Elementor's own flex handle it; no float override */ } /* Fix left/right margins that Elementor sets inline only when clearly broken. Add page-specific rules here after visual review (see TESTING in the README). */ /* ========================================================================== Language switcher — flag dropdown (FR / EN / AR) ========================================================================== */ .aklimiko-lang-switcher-item { list-style:none; display:flex; align-items:center; } .aklimiko-lang-switcher{ position:relative; display:inline-block; direction:ltr; /* keep FR/EN/AR order */ font-size:14px; line-height:1; user-select:none; } /* current language button */ .aklimiko-lang-switcher .akls-current, .aklimiko-lang-switcher .akls-option{ display:flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid rgba(0,0,0,.12); border-radius:999px; background:#fff; color:inherit; cursor:pointer; text-decoration:none; font-weight:600; white-space:nowrap; transition:box-shadow .15s, background .15s; } .aklimiko-lang-switcher .akls-current{ box-shadow:0 1px 3px rgba(0,0,0,.08); } .aklimiko-lang-switcher .akls-current:hover{ box-shadow:0 2px 8px rgba(0,0,0,.14); } .akls-flag{ display:inline-flex; } .akls-svg{ display:block; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08); } .akls-code{ letter-spacing:.04em; } .akls-caret{ font-size:11px; opacity:.55; margin-left:1px; transition:transform .15s; } /* dropdown panel */ .aklimiko-lang-switcher .akls-menu{ position:absolute; top:calc(100% + 6px); left:0; min-width:100%; display:flex; flex-direction:column; gap:4px; padding:6px; background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.14); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility .15s; z-index:9999; } .aklimiko-lang-switcher .akls-option{ border-color:transparent; box-shadow:none; padding:7px 12px; } .aklimiko-lang-switcher .akls-option:hover{ background:#f3f4f6; } /* open on hover (desktop) and on .is-open (click/touch) */ .aklimiko-lang-switcher:hover .akls-menu, .aklimiko-lang-switcher.is-open .akls-menu{ opacity:1; visibility:visible; transform:translateY(0); } .aklimiko-lang-switcher:hover .akls-caret, .aklimiko-lang-switcher.is-open .akls-caret{ transform:rotate(180deg); } /* RTL: drop the menu from the right edge, keep switcher itself LTR for flag order */ html[dir="rtl"] .aklimiko-lang-switcher .akls-menu{ left:auto; right:0; }