/* ===================================================================== BidBuddy — RTL layer (Phase 1) Loaded ONLY when the resolved market renders right-to-left (Arabic). India / all LTR markets never load this file, so LTR is byte-for-byte unchanged. dir="rtl" on already flips the inline axis for flex/grid/text, so most of the chrome mirrors for free. This file fixes the pieces that use *physical* left/right (absolute positioning + asymmetric padding) so the header, search, category bar, product grid/cards, buybox and footer read correctly in Arabic. Full per-page polish is Phase 2. ===================================================================== */ /* Sensible Arabic-friendly fallback fonts + slightly taller line-height. */ [dir="rtl"] body { font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif; line-height: 1.7; } /* Search box: mirror the asymmetric padding (was 0 4px 0 12px). */ [dir="rtl"] .search { padding: 0 12px 0 4px; } /* Product card badges use physical left/right — flip them to the mirrored corner. */ [dir="rtl"] .pcard .discount { left: auto; right: 8px; } [dir="rtl"] .wish-heart { right: auto; left: 8px; } [dir="rtl"] .stock-badge { left: auto; right: 8px; } /* Header cart/wishlist count badges are inline-positioned top/right in markup; nudge them to the top-left in RTL. (Higher specificity beats the inline style only for properties we set here — position stays absolute from the inline style.) */ [dir="rtl"] #cartBadge, [dir="rtl"] #wishBadge { right: auto; left: -2px; } /* Strike-through prices + savings read fine under dir=rtl; keep numerals LTR so prices like "AED 1,234" render in logical order even inside RTL text. */ [dir="rtl"] .pcard .price .now, [dir="rtl"] .pcard .strike, [dir="rtl"] .buybox .price-now, [dir="rtl"] .buybox .price-was, [dir="rtl"] .price-row { direction: ltr; unicode-bidi: isolate; } /* ...but the price row as a whole should still sit at the start (right) edge. */ [dir="rtl"] .pcard .price { justify-content: flex-start; } /* Breadcrumb separators: the chevron/slash glyphs read better mirrored. */ [dir="rtl"] .breadcrumbs { direction: rtl; } /* Category bar scrolls from the right in RTL (browser handles the scroll origin); just ensure items start at the inline-start edge. */ [dir="rtl"] .category-bar-inner { justify-content: flex-start; } /* Region switcher menu already uses logical inset-inline-* properties, so it anchors correctly in both directions — nothing to override here. */ /* Footer columns: grid auto-flows along the (now reversed) inline axis, so the brand column lands on the right and links right-align via text direction. Keep the copyright + city/brand rows readable. */ [dir="rtl"] .footer-inner, [dir="rtl"] .footer-cities, [dir="rtl"] .footer-copy { text-align: right; } /* ===================================================================== PHASE 2 — per-page RTL polish (Arabic storefront). Still loaded ONLY in RTL, so India / all LTR markets are untouched. Many storefront elements carry *inline* physical styles (text-align:left/right, justify-content, margin-left) that dir=rtl alone can't flip, so a few rules here use !important to win over the inline style — scoped to [dir=rtl] only. Prices, order numbers, emails, GSTIN and other Latin/numeric tokens are bidi- isolated so they never reorder inside Arabic text. ===================================================================== */ /* ---- Global bidi hygiene: keep Latin + numeric runs in logical order ---- */ [dir="rtl"] .price, [dir="rtl"] .price-row, [dir="rtl"] .price-now, [dir="rtl"] .price-was, [dir="rtl"] .summary-line span:last-child, [dir="rtl"] .summary-total span:last-child, [dir="rtl"] #sumSub, [dir="rtl"] #sumTotal, [dir="rtl"] #grandTotal, [dir="rtl"] #discountVal, [dir="rtl"] .hc-price, [dir="rtl"] .pcard .price, [dir="rtl"] .save, [dir="rtl"] .pdp-rating .star, [dir="rtl"] .pdp-rating .rcount, [dir="rtl"] .rating { unicode-bidi: isolate; } /* Breadcrumb chevrons ( › ) point the wrong way when the trail runs right-to-left. */ [dir="rtl"] .bb-crumbs .sep, [dir="rtl"] .breadcrumbs .sep, [dir="rtl"] .pdp-brand span { display: inline-block; transform: scaleX(-1); } [dir="rtl"] .bb-crumbs, [dir="rtl"] .breadcrumbs { text-align: right; } /* Generic: back-arrow glyphs and "view all →" arrows mirror. */ [dir="rtl"] .link svg, [dir="rtl"] .deal-row-head .link svg, [dir="rtl"] .section-head .link svg { transform: scaleX(-1); } /* ---------- Product listing (PLP): filter sidebar + facets + chips ---------- */ [dir="rtl"] .filters-head, [dir="rtl"] .filter-block > summary, [dir="rtl"] .listing-bar, [dir="rtl"] .active-filters { text-align: right; } [dir="rtl"] .filter-block a.opt, [dir="rtl"] .filter-block a.check { text-align: right; } /* Facet checkbox: box sits at the inline-start (right) edge; flex mirrors automatically. */ [dir="rtl"] .filter-block a.check { flex-direction: row; } /* "Clear all" was pushed with margin-left:auto — use logical margin so it lands at the end. */ [dir="rtl"] .af-clear { margin-left: 0 !important; margin-inline-start: auto; } [dir="rtl"] .chip { margin-left: 0; margin-inline-start: 8px; } [dir="rtl"] .af-chip .x { margin-inline-start: 2px; } /* Pager arrows are text inside links; keep the row centered (already) and isolate page numbers. */ [dir="rtl"] .pager-info { margin-left: 0; margin-inline-start: 8px; } /* ---------------- Product detail (PDP) ---------------- */ [dir="rtl"] .buybox, [dir="rtl"] .pdp-section, [dir="rtl"] .assurances, [dir="rtl"] .highlights li, [dir="rtl"] .value-line { text-align: right; } [dir="rtl"] .buy-actions { flex-direction: row; } /* buttons mirror as a group */ [dir="rtl"] .highlights li svg, [dir="rtl"] .value-line svg, [dir="rtl"] .assurances .a svg, [dir="rtl"] .save-pill svg { margin-left: 0; margin-inline-end: 6px; } /* Spec table: label column + values right-align; force over inline text-align:right on cells. */ [dir="rtl"] .pdp-section table td { text-align: right !important; } [dir="rtl"] .pdp-section table td:last-child { /* value col */ } /* Star strings stay LTR so ★★★☆☆ fills from the correct side. */ [dir="rtl"] .pdp-rating, [dir="rtl"] .rating { direction: ltr; justify-content: flex-end; display: inline-flex; } /* ---------------- Cart / Checkout ---------------- */ /* Summary rows: label at start (right), amount at end (left) — space-between handles it; just keep the amount isolated (done above). Numeric / code inputs stay LTR. */ [dir="rtl"] #emailInput, [dir="rtl"] #otpInput, [dir="rtl"] #couponInput, [dir="rtl"] input[inputmode="numeric"], [dir="rtl"] input[inputmode="email"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"] { direction: ltr; text-align: right; } /* Field labels + validation right-align. */ [dir="rtl"] .field label, [dir="rtl"] .field, [dir="rtl"] .text-danger, [dir="rtl"] [asp-validation-summary], [dir="rtl"] .form-row .field { text-align: right; } /* The 3-column City/State/Pincode grid keeps its columns; grid auto-mirrors in RTL. */ [dir="rtl"] .form-row.cols-3 { direction: rtl; } /* qty stepper ( − n + ) mirrors as a group — that reads correctly; keep the qty isolated. */ [dir="rtl"] .cart-row .qty { unicode-bidi: isolate; } /* ---------------- Payment / Order confirmation ---------------- */ [dir="rtl"] .summary-card, [dir="rtl"] .summary-item, [dir="rtl"] .summary-line, [dir="rtl"] .summary-total { text-align: right; } /* Status stepper (Pending → Delivered) should progress right-to-left. */ [dir="rtl"] .status-steps, [dir="rtl"] .order-steps, [dir="rtl"] .tracker, [dir="rtl"] .progress-tracker { flex-direction: row-reverse; } /* Panels that hard-code text-align:left flip to right in RTL. */ [dir="rtl"] .panel [style*="text-align:left"] { text-align: right !important; } /* ---------------- Account (orders / profile / wishlist) ---------------- */ [dir="rtl"] .order-card, [dir="rtl"] .order-head, [dir="rtl"] .order-meta, [dir="rtl"] .addr-card, [dir="rtl"] .addr-actions { text-align: right; } [dir="rtl"] .order-steps, [dir="rtl"] .order-tracker { flex-direction: row-reverse; } /* Latin order numbers / emails / codes stay LTR inside Arabic labels. */ [dir="rtl"] .order-id, [dir="rtl"] .order-no, [dir="rtl"] .mono, [dir="rtl"] .coupon-code { unicode-bidi: isolate; direction: ltr; display: inline-block; } /* Wishlist card badges use physical corners — mirror them (same as pcard). */ [dir="rtl"] .wishlist .stock-badge, [dir="rtl"] .wish-card .stock-badge { left: auto; right: 8px; } /* ---------------- Invoice (India GST view — see report: needs a UAE/VAT variant) ---------------- */ /* If ever shown in RTL, mirror the amount column + keep GSTIN/numbers LTR. */ [dir="rtl"] .invoice table td[style*="text-align:right"] { text-align: left !important; } [dir="rtl"] .invoice .gstin, [dir="rtl"] .invoice .amount { unicode-bidi: isolate; direction: ltr; } /* ---------------- Region / language / currency header pickers ---------------- */ /* These already use logical inset-inline-* + the shared .hs-menu anchoring, so they open correctly in RTL. Keep currency code/symbol LTR (handled via dir="ltr" in markup). */ [dir="rtl"] .hdr-switch .hs-cur { unicode-bidi: isolate; }