/* ═══════════════════════════════════════════════════ RTL overrides — loaded only when lang = Arabic ═══════════════════════════════════════════════════ */ /* already sets direction: rtl on every element via inheritance, which makes flex-direction: row go RIGHT→LEFT naturally. We must NOT add flex-direction: row-reverse here — that would double- reverse back to LTR. Only use this file for text-align, positional nudges, and cases direction alone cannot handle. */ /* body { font-family: 'Tajawal', sans-serif; overflow-x: hidden; max-width: 100%; } */ body { font-family: 'Estedad', sans-serif; overflow-x: hidden; max-width: 100%; } /* ── Header ───────────────────────────────── */ /* direction: rtl on the grid reverses column auto-placement: hamburger → rightmost col, icons → leftmost col */ .header-inner { direction: rtl; } /* ── Announce bar ─────────────────────────── */ .announce-bar { direction: rtl; } /* ── Drawer ───────────────────────────────── */ .nav-drawer { left: auto; right: 0; transform: translateX(100%); } .nav-drawer.open { right: 0; left: auto; transform: translateX(0); } /* ── Search overlay ───────────────────────── */ .search-overlay-form input { text-align: right; } /* ── Sort toolbar ─────────────────────────── */ #sortSelect { background-position: left 14px center; padding-right: 12px; padding-left: 36px; } /* ── Products grid ────────────────────────── */ .product-info { text-align: right; } /* flex-start = visual RIGHT in RTL context */ .product-rating { justify-content: flex-start; } .product-price { justify-content: flex-start; } /* ── Product detail ───────────────────────── */ .pd-breadcrumb .container { direction: rtl; } .pd-price-row { justify-content: flex-start; } .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-meta-row { text-align: right; } .pd-trust div { flex-direction: column; } .pd-tab-panel { text-align: right; direction: rtl; } .pd-related-title { text-align: right; } /* ── Review section ───────────────────────── */ .review-item { text-align: right; direction: rtl; } .rating-bars { text-align: right; } .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-col h5 { text-align: right; } .footer-col ul { text-align: right; padding-right: 0; } .footer-contact-list li { text-align: right; } .footer-contact-list li i { margin-left: 8px; margin-right: 0; } /* ── Flash / Toast ────────────────────────── */ .flash-container { left: auto; right: 20px; } .toast { left: auto; right: 20px; } /* ── Cart page ────────────────────────────── */ .cart-table th, .cart-table td { text-align: right; } .cart-summary { text-align: right; } /* ── Auth forms ───────────────────────────── */ .form-group label { text-align: right; display: block; } /* ── Drawer Categories RTL ───────────────── */ .drawer-cat-list li a { padding-left: 20px; padding-right: 40px; } .drawer-cat-list li a i { margin-right: 0; margin-left: 6px; } /* ── Mini Cart Panel RTL ─────────────────── */ /* Panel still opens from the right (same as nav drawer) */ .mini-cart-item-qty { direction: ltr; } /* ── Admin Panel RTL ─────────────────────── */ /* Table headers use text-align:left in style.css; override for RTL. */ .admin-table th { text-align: right; } /* Flash message text */ .flash-message { text-align: right; } /* Admin table card header */ .admin-table-header h3 { text-align: right; } /* cs-badge and other inline tags stay LTR (ISO codes, currency codes) */ .cs-badge, .sp-badge { direction: ltr; } /* ── Variant Quick Modal RTL ─────────────── */ .vqm-close { right: auto; left: 14px; }