/* Hexacue website in Arabic (right to left). Loaded only on /ar pages, after the page's own stylesheet.
   It mirrors the rules that use left/right; everything built with flex, grid and gap mirrors by itself. */
html[dir="rtl"] body{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;letter-spacing:0}
html[dir="rtl"] .hx-name,html[dir="rtl"] .mono,html[dir="rtl"] code,html[dir="rtl"] .sku,html[dir="rtl"] input[type=tel],html[dir="rtl"] input[type=email]{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] input[type=tel],html[dir="rtl"] input[type=email]{text-align:right}
html[dir="rtl"] .price,html[dir="rtl"] .money{unicode-bidi:isolate}

/* header */
html[dir="rtl"] .hsearch,html[dir="rtl"] .top .wish-link,html[dir="rtl"] .cart-btn,html[dir="rtl"] .search{margin-left:0;margin-right:auto}
html[dir="rtl"] .top .wish-link + .cart-btn{margin-left:0;margin-right:4px}
html[dir="rtl"] nav.links{margin-left:0;margin-right:12px}
html[dir="rtl"] .cart-btn{padding:8px 12px 8px 14px}
html[dir="rtl"] .wish-link .count{right:auto;left:-4px}
html[dir="rtl"] .lang-switch{font-family:"IBM Plex Sans",system-ui,sans-serif}

/* lists and tables */
html[dir="rtl"] .feat,html[dir="rtl"] .uses,html[dir="rtl"] .policy ul,html[dir="rtl"] .kbsteps{padding-left:0;padding-right:20px}
html[dir="rtl"] .kbsteps li{padding-left:0;padding-right:4px}
html[dir="rtl"] .appsteps{text-align:right;padding:0 22px 0 0}
html[dir="rtl"] .specs th,html[dir="rtl"] .specs td{text-align:right}
html[dir="rtl"] .specs th{padding-right:0;padding-left:10px}
html[dir="rtl"] .seg label{border-right:0;border-left:1px solid var(--line)}
html[dir="rtl"] .seg label:last-child{border-left:0}
html[dir="rtl"] .dev,html[dir="rtl"] .kb,html[dir="rtl"] .uses button{text-align:right}
@media (max-width:760px){html[dir="rtl"] .card-body h3 button{text-align:right}}

/* small inline gaps */
html[dir="rtl"] .price s,html[dir="rtl"] .chip .n,html[dir="rtl"] .copy,html[dir="rtl"] .rm,html[dir="rtl"] .bom-short,html[dir="rtl"] .wish.inline{margin-left:0;margin-right:6px}
html[dir="rtl"] .chip .ic{margin-right:0;margin-left:6px}

/* badges on cards */
html[dir="rtl"] .tag,html[dir="rtl"] .play,html[dir="rtl"] .dur{right:auto;left:10px}
html[dir="rtl"] .ref{left:auto;right:12px}
html[dir="rtl"] .wish{left:auto;right:10px}
html[dir="rtl"] .card .wish{right:auto;left:10px}
html[dir="rtl"] .chk.has-ic input{right:auto;left:12px}
html[dir="rtl"] .pill::after{left:auto;right:3px}
html[dir="rtl"] .dev.on .pill::after{transform:translateX(-14px)}

/* floating WhatsApp button, drawer and banners */
html[dir="rtl"] .wa-float{right:auto;left:22px}
@media (max-width:560px){html[dir="rtl"] .wa-float{right:auto;left:16px}}
html[dir="rtl"] .wa-tip{right:auto;left:72px}
html[dir="rtl"] .drawer{right:auto;left:0;border-left:0;border-right:1px solid var(--line)}
html[dir="rtl"] .appbar-n{left:auto;right:calc(50% + 6px)}

/* wiring diagrams read left to right (input → relay → output), like the hardware */
html[dir="rtl"] .wire,html[dir="rtl"] .wiring,html[dir="rtl"] .diagram{direction:ltr}
html[dir="rtl"] .ticker{direction:ltr}