/* tobi-rtl.css — Arabic (ar) RTL layout adaptations for www.tobi.cn
 * Loaded only on the Arabic site (/ar/). Keeps LTR design tokens intact while
 * mirroring flow direction, text alignment, spacing and absolute-positioned UI.
 */

[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* Arabic-friendly font stack (fall back gracefully) */
[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
  font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Kufi Arabic", Arial, sans-serif;
}

/* Generic flow mirroring */
[dir="rtl"] .text-left,
[dir="rtl"] [class*="text-left"] { text-align: right !important; }
[dir="rtl"] .text-right,
[dir="rtl"] [class*="text-right"] { text-align: left !important; }

[dir="rtl"] .float-left,
[dir="rtl"] [style*="float:left"],
[dir="rtl"] [style*="float: left"] { float: right !important; }
[dir="rtl"] .float-right,
[dir="rtl"] [style*="float:right"],
[dir="rtl"] [style*="float: right"] { float: left !important; }

/* Flex rows keep order but arrows / chevrons should mirror */
[dir="rtl"] svg[class*="arrow"],
[dir="rtl"] svg[class*="chevron"],
[dir="rtl"] .rtl-mirror {
  transform: scaleX(-1);
}

/* Flex/Grid layouts follow `direction` automatically; physical Tailwind
 * spacing utilities (ml-*, mr-*, pl-*, pr-*) are left untouched on purpose —
 * zeroing them would collapse layouts, and most components use flex/grid gaps. */

/* Header / nav / drawer */
[dir="rtl"] .tobi-global-header__inner { direction: rtl; }
[dir="rtl"] .tobi-global-drawer {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}
[dir="rtl"] .tobi-global-drawer.is-open { transform: translateX(0); }
[dir="rtl"] .tobi-global-drawer__head { flex-direction: row-reverse; }
[dir="rtl"] .tobi-global-nav { direction: rtl; }

/* Language switcher floats to the left in RTL */
[dir="rtl"] #langhui-language-switcher { right: auto !important; left: 16px !important; }
[dir="rtl"] #langhui-language-switcher ul { right: auto !important; left: 0 !important; }
[dir="rtl"] .tobi-language-float { right: auto !important; left: 16px !important; }

/* Forms */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select { text-align: right; }
[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder { text-align: right; }

/* Lists */
[dir="rtl"] ul,
[dir="rtl"] ol { padding-right: 1.25rem; padding-left: 0; }

/* Breadcrumbs and inline separators */
[dir="rtl"] [class*="breadcrumb"] { direction: rtl; }

/* Cards / grids align right */
[dir="rtl"] [class*="card"],
[dir="rtl"] article,
[dir="rtl"] section { text-align: start; }

/* Keep phone numbers, emails and Latin brand names LTR inside RTL flow */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .ltr,
[dir="rtl"] code,
[dir="rtl"] pre {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}
[dir="rtl"] pre,
[dir="rtl"] code.block,
[dir="rtl"] pre code { display: block; }

/* Modal close buttons stay visually in the correct corner */
[dir="rtl"] [class*="modal"] button[class*="close"],
[dir="rtl"] .tobi-global-close { left: auto; }

/* Tables */
[dir="rtl"] table { direction: rtl; }
[dir="rtl"] th,
[dir="rtl"] td { text-align: right; }

/* Scrollbars and overflow behave natively; nothing to override */