/* Right-to-left layout for the Arabic storefront (/ar/…). Loaded only when <html dir="rtl">.
   Flex and grid layouts mirror on their own; this file flips the physical left/right rules in site.css. */
html[dir="rtl"] body{font-family:"IBM Plex Sans Arabic",var(--sans,system-ui),"Segoe UI",Tahoma,sans-serif;line-height:1.7}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] .btn,html[dir="rtl"] .hbtn{letter-spacing:0}
/* Latin-only values keep left-to-right order */
html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="password"],html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[name="txid"],html[dir="rtl"] code,html[dir="rtl"] .autopay__value,html[dir="rtl"] .olist__code,
html[dir="rtl"] .deliv__text,html[dir="rtl"] .receipt__row code{direction:ltr;unicode-bidi:plaintext}
html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="password"],html[dir="rtl"] input[type="number"]{text-align:right}

/* Off-screen helpers: a negative left offset would become scrollable in RTL, so park them off the right edge */
html[dir="rtl"] .skip{left:auto;right:-999px}
html[dir="rtl"] .skip:focus{left:auto;right:12px}
html[dir="rtl"] .hp{left:auto;right:-9999px}

/* Search box */
html[dir="rtl"] .hero__search{padding:6px 16px 6px 6px}
/* Select arrow */
html[dir="rtl"] select{padding-right:12px;padding-left:34px;background-position:18px 50%,13px 50%}
/* Product cards */
html[dir="rtl"] .pc__stock{right:auto;left:8px}
html[dir="rtl"] .pd__was,html[dir="rtl"] .pc__was{margin-right:0;margin-left:6px}
html[dir="rtl"] .badge-auto,html[dir="rtl"] .badge-soon{margin-left:0;margin-right:6px}
html[dir="rtl"] .muted{margin-left:0;margin-right:10px}
/* FAQ chevron */
html[dir="rtl"] .faq__q{padding-right:0;padding-left:36px}
html[dir="rtl"] .faq__q::after{right:auto;left:6px}
/* Check-mark lists */
html[dir="rtl"] .checks li{padding-left:0;padding-right:26px}
html[dir="rtl"] .checks li::before{left:auto;right:2px}
html[dir="rtl"] .alert ul{padding-left:0;padding-right:18px}
/* Totals align to the end */
html[dir="rtl"] .olist__total,html[dir="rtl"] .cl__sum,html[dir="rtl"] .chat__msg time{text-align:left}

/* App shell: sidebar on the right */
html[dir="rtl"] .shell{background:linear-gradient(270deg,var(--paper) calc(var(--side) - 1px),var(--line) calc(var(--side) - 1px) var(--side),var(--bg) var(--side))}
html[dir="rtl"] .side{border-right:0;border-left:1px solid var(--line)}
html[dir="rtl"] .side__badge{margin-left:0;margin-right:auto}
@media (max-width:991px){
  html[dir="rtl"] .shell{background:var(--bg)}
  html[dir="rtl"] .side{left:auto;right:0;transform:translateX(100%)}
  html[dir="rtl"] .side-open .side{transform:none}
}

/* Header menus and badges */
html[dir="rtl"] .langsw__menu{right:auto;left:0}
html[dir="rtl"] .cart-btn__n{right:auto;left:-6px}
html[dir="rtl"] .lang-hint{padding:8px 16px 8px 44px}
html[dir="rtl"] .lang-hint__x{right:auto;left:10px}

/* Floating chat, Telegram button and cart toast move to the left edge */
html[dir="rtl"] .chat{right:auto;left:20px}
html[dir="rtl"] .chat__panel{right:auto;left:0}
html[dir="rtl"] .chat__fab{padding:13px 15px 13px 18px}
html[dir="rtl"] .chat__dot{right:auto;left:-3px}
html[dir="rtl"] .chat__online{left:auto;right:-2px}
html[dir="rtl"] .chat__online--inline{right:0;margin-right:0;margin-left:7px}
html[dir="rtl"] .chat__head{padding-right:18px;padding-left:14px}
html[dir="rtl"] .chat__msg--us{border-bottom-left-radius:14px;border-bottom-right-radius:4px}
html[dir="rtl"] .chat__msg--me{border-bottom-right-radius:14px;border-bottom-left-radius:4px}
html[dir="rtl"] .tg-fab{right:auto;left:20px;padding:0 16px 0 20px}
html[dir="rtl"] .cart-toast{left:auto;right:20px;padding:12px 14px 12px 44px;border-left:1px solid var(--line);border-right:4px solid var(--brand-amber)}
html[dir="rtl"] .cart-toast__x{right:auto;left:8px}
@media (max-width:620px){
  html[dir="rtl"] .tg-fab{left:12px;right:auto;padding:0 14px}
  html[dir="rtl"] .cart-toast{left:12px;right:12px}
}
@media (max-width:560px){
  html[dir="rtl"] .chat{left:10px;right:auto}
  html[dir="rtl"] .chat__fab{padding:14px}
  html[dir="rtl"] .chat__panel{left:8px;right:auto}
  html[dir="rtl"] .hero__search{padding-left:6px;padding-right:10px}
}