/* ═══════════════════════════════════════════════════ RTL overrides — loaded only when lang = Arabic ═══════════════════════════════════════════════════ */ /* Base direction already set via , these rules handle flex/grid reversals and nudges that direction alone doesn't fix. */ body { font-family: 'Tajawal', sans-serif; } /* ── Header ───────────────────────────────── */ .header-inner { direction: rtl; } .header-right { flex-direction: row-reverse; } /* ── Announce bar ─────────────────────────── */ .announce-bar { direction: rtl; } /* ── Drawer ───────────────────────────────── */ .nav-drawer { left: auto; right: -300px; transform: none; } .nav-drawer.open { right: 0; left: auto; transform: none; } .drawer-header { flex-direction: row-reverse; } .drawer-social { flex-direction: row-reverse; } /* ── Search overlay ───────────────────────── */ .search-overlay-form { flex-direction: row-reverse; } .search-overlay-form input { text-align: right; } /* ── Trust bar ────────────────────────────── */ .trust-bar-inner { flex-direction: row-reverse; } /* ── Sort toolbar ─────────────────────────── */ .offers-toolbar { flex-direction: row-reverse; } .sort-wrap { flex-direction: row-reverse; } #sortSelect { background-position: left 14px center; padding-right: 12px; padding-left: 36px; } /* ── Products grid ────────────────────────── */ .product-info { text-align: right; } .product-rating { flex-direction: row-reverse; justify-content: flex-end; } .product-price { flex-direction: row-reverse; justify-content: flex-end; } /* ── Pagination ───────────────────────────── */ .pagination { flex-direction: row-reverse; } /* ── Product detail ───────────────────────── */ .pd-breadcrumb .container { direction: rtl; } .pd-rating { flex-direction: row-reverse; } .pd-price-row { flex-direction: row-reverse; justify-content: flex-end; } .pd-shipping-badge { text-align: right; } .pd-stock { text-align: right; } .pd-sold { text-align: right; } .pd-timer { direction: rtl; } .pd-field label { text-align: right; } .pd-field input, .pd-field select, .pd-field textarea { text-align: right; direction: rtl; } .pd-field select { background-position: left 14px center; padding-right: 12px; padding-left: 36px; } .pd-qty-row { flex-direction: row-reverse; } .pd-lead-form-title { flex-direction: row-reverse; } .pd-meta-row { flex-direction: row-reverse; text-align: right; } .pd-trust { flex-direction: row-reverse; } .pd-trust div { flex-direction: column; } .pd-tab-nav { flex-direction: row-reverse; } .pd-tab-panel { text-align: right; direction: rtl; } .pd-related-title { text-align: right; } /* ── Review section ───────────────────────── */ .review-summary { flex-direction: row-reverse; } .review-header { flex-direction: row-reverse; } .review-item { text-align: right; direction: rtl; } .rating-bars { text-align: right; } .rating-bar-row { flex-direction: row-reverse; } .review-form { text-align: right; direction: rtl; } .review-form .form-row { direction: rtl; } .form-group label { text-align: right; } .form-group input, .form-group textarea { text-align: right; direction: rtl; } /* ── Footer ───────────────────────────────── */ .footer-grid { direction: rtl; } .footer-brand { text-align: right; } .footer-brand p { text-align: right; } .footer-logo { flex-direction: row-reverse; } .footer-social { flex-direction: row-reverse; } .footer-col h5 { text-align: right; } .footer-col ul { text-align: right; padding-right: 0; } .footer-contact-list li { flex-direction: row-reverse; text-align: right; } .footer-contact-list li i { margin-left: 8px; margin-right: 0; } .footer-bottom-inner { flex-direction: row-reverse; } /* ── Flash / Toast ────────────────────────── */ .flash-container { left: auto; right: 20px; } .toast { left: auto; right: 20px; flex-direction: row-reverse; } /* ── Cart page ────────────────────────────── */ .cart-table th, .cart-table td { text-align: right; } .cart-summary { text-align: right; } .summary-row { flex-direction: row-reverse; } .coupon-form { flex-direction: row-reverse; } /* ── Auth forms ───────────────────────────── */ .form-group label { text-align: right; display: block; }