/* ============================================================
   Hello Yiwu — RTL Framework
   Applies when <body class="rtl"> (set by i18n.js for Arabic)

   Include this AFTER your page's main <style> block, or link it
   as a stylesheet after the main CSS so these rules win.

   Strategy: most layout uses logical properties already work
   automatically (margin-inline-start, etc. flip on their own
   IF you use them). For pages built with physical left/right,
   this file provides .rtl overrides for the common patterns
   used across Hello Yiwu's pages: navs, sidebars, ad rails,
   icon-direction arrows, tables, and form fields.
   ============================================================ */

/* ── Global text direction ── */
body.rtl{ direction: rtl; text-align: right; font-family: 'Inter', 'Tahoma', sans-serif; }
body.ltr{ direction: ltr; }

/* ── Flip horizontal margins/paddings on common utility patterns ── */
body.rtl .flip-margin{ margin-left: 0 !important; }

/* ── Nav / header ── */
body.rtl nav{ flex-direction: row-reverse; }
body.rtl .nav-links{ flex-direction: row-reverse; }
body.rtl .nav-right{ flex-direction: row-reverse; }
body.rtl .nav-logo{ flex-direction: row-reverse; }

/* ── Sidebar layouts (dashboards): flip side ── */
body.rtl .sidebar{
  left: auto; right: 0;
  border-right: none; border-left: 1px solid var(--border);
}
body.rtl .main{ margin-left: 0; margin-right: var(--sw, var(--sidebar, 228px)); }
body.rtl .sidebar-footer, body.rtl .s-footer{ }

/* ── 3-column ad layout: mirror left/right rails ── */
body.rtl .body-layout{ direction: rtl; }
body.rtl .body-layout .side-ad:first-child{ order: 3; }
body.rtl .body-layout .side-ad:last-child{ order: 1; }
body.rtl .body-layout .main-content{ order: 2; }

/* ── Cards, lists, tables ── */
body.rtl .data-table th, body.rtl .data-table td,
body.rtl .dt th, body.rtl .dt td{ text-align: right; }
body.rtl .data-table th:last-child, body.rtl .data-table td:last-child,
body.rtl .dt th:last-child, body.rtl .dt td:last-child{ text-align: left; }

/* ── Icons / arrows that imply direction ── */
body.rtl .arrow-icon, body.rtl .chevron{ transform: scaleX(-1); }
/* Text-based arrows inside translated strings (→ / ←) are handled
   by providing RTL-specific strings in i18n.js (e.g. "← " prefixes),
   so no CSS mirroring needed for those. */

/* ── Search bars / inputs with icon-left ── */
body.rtl .search-icon{ left: auto; right: 18px; }
body.rtl .hero-search input{ padding-right: 50px; padding-left: 130px; }
body.rtl .search-btn{ right: auto; left: 6px; }

/* ── Dropdowns / language switcher ── */
body.rtl .lang-menu{ right: auto; left: 0; }

/* ── Forms ── */
body.rtl .field label{ text-align: right; }
body.rtl .field select{
  background-position: left 12px center;
  padding-right: 14px; padding-left: 34px;
}

/* ── Badges / pills with icon + text ── */
body.rtl .badge, body.rtl .pill, body.rtl .status-pill,
body.rtl .nav-badge, body.rtl .live-tag, body.rtl .trend-badge{
  flex-direction: row-reverse;
}

/* ── Steps / numbered lists (how it works, timelines) ── */
body.rtl .how-grid, body.rtl .steps-grid{ direction: rtl; }

/* ── Tickers (marquee scroll) ── */
body.rtl .ticker-track{ animation-direction: reverse; }

/* ── Cat strip / horizontal scrollers ── */
body.rtl .cat-strip-inner, body.rtl .search-pills{ flex-direction: row-reverse; }

/* ── Misc spacing helpers used across pages ── */
body.rtl .ml-auto{ margin-left: 0 !important; margin-right: auto !important; }
body.rtl .mr-auto{ margin-right: 0 !important; margin-left: auto !important; }

/* ── Numbers / prices stay LTR even in RTL context (currency formatting) ── */
body.rtl .price, body.rtl .product-price, body.rtl .stat-num,
body.rtl .kpi-val, body.rtl [data-numeric]{
  direction: ltr; display: inline-block; unicode-bidi: isolate;
}
