/* =============================================
   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;
}

/* 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"] .prod-price,
html[dir="rtl"] .rs-score .rs-num,
html[dir="rtl"] .cart-total-row .ct-amount,
html[dir="rtl"] .drawer-head h3,
html[dir="rtl"] .modal h3 {
  font-family: "Amiri", "Playfair Display", serif;
}

/* ─── Nav ─────────────────────────────────────── */
html[dir="rtl"] .nav-inner {
  flex-direction: row-reverse;
}
html[dir="rtl"] .nav-links {
  flex-direction: row-reverse;
}
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;
}
html[dir="rtl"] .nav-search {
  flex-direction: row-reverse;
}
/* 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"] .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;
}

/* ─── 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 ──────────────────────────────────── */
html[dir="rtl"] .footer-grid {
  direction: rtl;
}
html[dir="rtl"] .footer-brand {
  padding-inline-start: 0;
  padding-inline-end: 20px;
}
html[dir="rtl"] .footer-bottom {
  flex-direction: row-reverse;
}
html[dir="rtl"] .footer-socials {
  flex-direction: row-reverse;
}

/* ─── 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;
  }
}