/* =============================================
   Balad — rtl.css
   Loaded only when is_rtl() (Polylang AR). Overrides
   physical left/right rules from base.css + components.css
   with logical-property equivalents, and swaps the
   heading font to an Arabic-capable serif.
   ============================================= */

html[dir="rtl"] body {
  /* keep .clip, not .hidden — clip preserves position:sticky per project convention */
  overflow-x: clip !important;
}
html[dir="rtl"] body, html[dir="rtl"] nav, html[dir="rtl"] button,
html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea {
  font-family: "Cairo", "Noto Sans Arabic", Tahoma, sans-serif;
  letter-spacing: 0;
}
html[dir="rtl"] .nav-links a, html[dir="rtl"] .nav-mobile a,
html[dir="rtl"] .btn, html[dir="rtl"] .bld-btn { letter-spacing: 0; font-family: "Cairo", "Noto Sans Arabic", Tahoma, sans-serif; }

/* Heading font — Playfair Display has no Arabic glyphs */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .pricing-price .amount,
html[dir="rtl"] .rs-score .rs-num,
html[dir="rtl"] .drawer-head h3,
html[dir="rtl"] .modal h3 {
  font-family: "Amiri", "Playfair Display", serif;
}

/* ─── Nav ─────────────────────────────────────── */
/* Theme 1.4.67 (RV-27a): a flex row already runs right-to-left under dir="rtl", so the old row-reverse rules on .nav-inner,
   .nav-links and .nav-search flipped it back to left-to-right (logo far left, الرئيسية..الدعم running LTR) and made the Tab
   order the reverse of the Arabic reading order. With none of them the DOM order (logo, menu, search, language, buttons) is
   laid out from the right edge, so visual order = Tab order = reading order. */
html[dir="rtl"] .nav-cta {
  margin-inline-end: 0;
  margin-inline-start: 8px;
}
html[dir="rtl"] .nav-mobile-close {
  right: auto;
  inset-inline-end: 24px;
}
/* Specificity note: .nav-inner .nav-search .search-inp/.search-ico in
   base.css are deliberately 3-class-specific (0,3,0) so they win over the
   generic html[dir="rtl"] .search-inp/.search-ico rules below (0,2,1)
   regardless of load order — same reasoning as BLD-052's .cart-fab fix. This
   just mirrors the icon/padding sides for that same scoped selector so the
   compact header search stays correctly mirrored in RTL instead of silently
   falling back to the (too-wide-for-170px) store-directory padding. */
html[dir="rtl"] .nav-inner .nav-search .search-ico {
  left: auto;
  inset-inline-start: 13px;
}
html[dir="rtl"] .nav-inner .nav-search .nav-search-inp {
  padding-block: 9px;
  padding-inline-start: 36px;
  padding-inline-end: 14px;
}

/* ─── Hero (already centered — kept for audit trail) ── */
html[dir="rtl"] .hero-arabic-mark {
  direction: rtl;
}

/* ─── Pricing card feature list icon spacing ─────────── */
html[dir="rtl"] .pricing-feat {
  flex-direction: row-reverse;
}
html[dir="rtl"] .pricing-feat::before {
  margin-right: 0;
  margin-left: 10px;
}

/* ─── Store / product / directory cards ──────── */
html[dir="rtl"] .store-meta,
html[dir="rtl"] .loc,
html[dir="rtl"] .sf-meta,
html[dir="rtl"] .dir-meta {
  flex-direction: row-reverse;
}
html[dir="rtl"] .store-footer,
html[dir="rtl"] .dir-footer {
  flex-direction: row-reverse;
}
html[dir="rtl"] .visit-link {
  flex-direction: row-reverse;
}
html[dir="rtl"] .dir-footer .visit-link,
html[dir="rtl"] .store-footer .visit-link {
  flex-direction: row;
}
html[dir="rtl"] .dir-footer .visit-link span,
html[dir="rtl"] .store-footer .visit-link span {
  transform: scaleX(-1);
}
html[dir="rtl"] .prod-stock {
  right: auto;
  inset-inline-start: 10px;
}
html[dir="rtl"] .dir-mini-logo {
  left: auto;
  inset-inline-end: 12px;
}

/* ─── Storefront header ──────────────────────── */
html[dir="rtl"] .sf-header-inner {
  flex-direction: row-reverse;
}
html[dir="rtl"] .sf-bar-inner {
  flex-direction: row-reverse;
}
html[dir="rtl"] .sf-breadcrumb {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  html[dir="rtl"] .sf-header-inner {
    flex-direction: column;
    align-items: flex-end;
  }
}

/* ─── Search / filter bar (archive-bld_store.php) ── */
html[dir="rtl"] .search-ico {
  left: auto;
  inset-inline-start: 18px;
}
html[dir="rtl"] .search-inp,
html[dir="rtl"] .nav-search-inp {
  padding-block: 14px;
  padding-inline-start: 50px;
  padding-inline-end: 18px;
}
html[dir="rtl"] .search-row,
html[dir="rtl"] .chips-row,
html[dir="rtl"] .dir-results-bar {
  flex-direction: row-reverse;
}
html[dir="rtl"] .filter-sel,
html[dir="rtl"] .sort-sel {
  /* background-position has no cross-browser logical equivalent yet
     (CSS Backgrounds L4 `inline-end` keyword isn't universally supported) —
     hand-mirrored to the opposite physical side, same as base.css's LTR rule. */
  background-position: left 14px center;
  padding-inline-end: 42px;
  padding-inline-start: 18px;
}

/* ─── Cart FAB + drawer (marketplace.js-injected, stage-10b) ─── */
html[dir="rtl"] .cart-fab {
  right: auto;
  inset-inline-start: 22px;
}
html[dir="rtl"] .cart-fab .cart-count {
  right: auto;
  inset-inline-end: -4px;
}
html[dir="rtl"] .balad-order-actions {
  right: auto;
  inset-inline-end: 24px;
}
html[dir="rtl"] .balad-order-actions .oa-close {
  right: auto;
  inset-inline-end: 10px;
}
/* BLD-052: theme.css's U9 mobile FAB rule (body.woocommerce-cart .cart-fab { right:10px }
   etc., specificity 0,2,1) ties with the general RTL rule above (0,2,1) — which one wins
   was cascade-order-dependent. Pin it deterministically with a strictly higher-specificity,
   identically-scoped override instead of relying on rtl.css loading after theme.css. */
@media (max-width: 768px) {
  html[dir="rtl"] body.bld-tpl-list-your-store .cart-fab,
  html[dir="rtl"] body.bld-tpl-vendor-dashboard .cart-fab,
  html[dir="rtl"] body.bld-tpl-review .cart-fab,
  html[dir="rtl"] body.woocommerce-cart .cart-fab,
  html[dir="rtl"] body.woocommerce-checkout .cart-fab {
    right: auto;
    inset-inline-end: 10px;
  }
}
/* BLD-058 (found during product-search triage, 2026-08-05): this rule used
   inset-inline-start:0, which in RTL resolves to the physical RIGHT edge —
   the SAME physical side as the unscoped LTR default (right:0 in
   components.css). Anchor unchanged but the closed-state transform sign was
   flipped to translateX(-102%), so instead of sliding further off past the
   right edge, the drawer slid left INTO the viewport while "closed" —
   confirmed live: it sat over the header and ate clicks on the AR homepage
   (nav-search-submit unclickable, drawer subtree intercepting pointer
   events). Mirrors the cart-FAB's own inset-inline-end pattern (BLD-052)
   instead: anchor the drawer to the physical LEFT in RTL (to match the
   FAB), and keep translateX(-102%) as the closed offset from THAT anchor. */
html[dir="rtl"] .drawer {
  right: auto;
  inset-inline-end: 0;
  border-inline-end: none;
  border-inline-start: 1px solid rgba(212, 168, 75, .18);
  transform: translateX(-102%);
}
html[dir="rtl"] .drawer.open {
  transform: translateX(0);
}
html[dir="rtl"] .drawer-head,
html[dir="rtl"] .cart-item,
html[dir="rtl"] .cart-total-row {
  flex-direction: row-reverse;
}
html[dir="rtl"] .ci-remove {
  align-self: flex-end;
}

/* ─── Modals / forms ──────────────────────────── */
html[dir="rtl"] .modal-close {
  right: auto;
  inset-inline-end: 18px;
}
html[dir="rtl"] .form-row.two {
  direction: rtl;
}
html[dir="rtl"] .field,
html[dir="rtl"] textarea.field {
  text-align: start;
}
html[dir="rtl"] select.field {
  background-position: left 14px center;
  padding-block: 12px;
  padding-inline-start: 15px;
  padding-inline-end: 40px;
}
html[dir="rtl"] .star-pick {
  flex-direction: row-reverse;
}

/* ─── Delivery-demo / drawer-adjacent fixed buttons swap sides ─── */
html[dir="rtl"] .delivery-demo-btn {
  left: auto;
  inset-inline-start: auto;
  inset-inline-end: 22px;
}

/* Footer: base.css uses direction-aware flex/grid + logical properties, so
   it mirrors in RTL with no overrides (old row-reverse rules double-flipped). */

/* ─── Brand marquee direction — mirror the animation so it feels native ── */
html[dir="rtl"] .brand-track {
  animation-direction: reverse;
}

/* ─── Bidi-safe phone / price numerals ─────────────────────────────
   Template-level task (not CSS): any hard-coded phone number rendered
   as visible page text inside an AR template MUST be wrapped in
   <bdi dir="ltr">…</bdi> so Unicode BiDi does not reorder the digits.
   Audited at Stage 10c time: no template currently prints a raw phone
   number as visible text — the only WhatsApp number use is inside an
   href (wa.me/... links, body[data-wa] attribute), which is not subject
   to visual BiDi reordering. If a future template adds a visible phone
   or WhatsApp number, wrap it then. See project memory:
   gotcha re: <bdi dir="ltr"> for phone numbers.
   ────────────────────────────────────────────────────────────────── */

/* ─── Small-viewport RTL safety net (320px smoke test) ──────────── */
@media (max-width: 480px) {
  html[dir="rtl"] .hero-actions,
  html[dir="rtl"] .sf-actions {
    flex-direction: column;
  }
}