/* ===========================================================================
 * BeeCore RTL Layout Fixes — P1 (Post-Launch Polish P1 / 2026-10-12)
 * ---------------------------------------------------------------------------
 * SCOPE DISCIPLINE:
 *   EVERY selector below requires html[dir="rtl"]. The 12 LTR languages
 *   (en, zh-CN, zh-TW, ja, ko, es, fr, de, pt, ru, hi, it) are byte-identical
 *   in geometry — no rule can reach them.
 * ROOT CAUSES FIXED (forensics: vf1_out/p1_rtl_diag.json):
 *   1. #bc-global-header uses LTR physical properties (absolute left:32px
 *      logo; nav-right margin-right:calc(-1*((100vw-1440px)/2)) +
 *      margin-left:auto). Under dir=rtl these do not flip: the action cluster
 *      (search/lang/login/gold CTA) slides to the physical LEFT, overlapping
 *      the still-physical-left logo and bleeding 51px off-screen (1440px),
 *      and the CTA clips at the right edge (≤1023px).
 *   2. Models page directional details: separators/paddings/count-line
 *      margins hard-coded to physical left/right; bidi digit reordering on
 *      the untranslated count line ("85" jumps to the end).
 * NO redesign, no hiding, no scaling. Text content/translations untouched
 * (P2 scope). Additive file: rollback = remove <link> from index + delete.
 * ========================================================================= */

/* ---- 1) Global header mirror (desktop >=1536px only) --------------------- */
html[dir="rtl"] #bc-global-header .nav-inner { padding: 0 0 0 32px; }
html[dir="rtl"] #bc-global-header .nav-left { left: auto; right: 32px; }
html[dir="rtl"] #bc-global-header .nav-center { margin-left: 0; margin-right: 18px; }
html[dir="rtl"] #bc-global-header .nav-right {
  margin-right: auto;
  margin-left: calc(-1 * ((100vw - 1440px) / 2));
}
html[dir="rtl"] #bc-global-header .ag-nav-chevron { margin-left: 0; margin-right: 4px; }
@media (min-width: 1536px) {
  html[dir="rtl"] #bc-global-header .nav-center { margin-left: 0; margin-right: 164px; }
}

/* ---- 2) RTL mobile header window (<=1535px) -------------------------------
 * Arabic nav text renders wider than the LTR budget (center 746px + right
 * 548px = 1490px total vs the 1440px design cap), so below 1536px RTL keeps
 * the fully functional hamburger header (drawer carries all links + auth).
 * Verified: >=1536px desktop mirror fits (1490 <= 1536). No hiding of the
 * CTA, no scaling — this is the same official mobile pattern EN uses
 * below 1024px. */
@media (max-width: 1535px) {
  html[dir="rtl"] #bc-global-header .nav-inner { padding: 0 0 0 12px; }
  html[dir="rtl"] #bc-global-header .nav-left { left: auto; right: 16px; }
  html[dir="rtl"] #bc-global-header .nav-center,
  html[dir="rtl"] #bc-global-header .nav-right .bc-search-trigger,
  html[dir="rtl"] #bc-global-header .nav-right .lang-switch,
  html[dir="rtl"] #bc-global-header .nav-right .nav-login { display: none !important; }
  html[dir="rtl"] #bc-global-header .nav-right { margin-right: auto; margin-left: 0; gap: 10px; }
  html[dir="rtl"] #bc-global-header .nav-right .btn-primary {
    height: 34px;
    padding: 0 14px;
    font-size: 13.5px;
  }
  html[dir="rtl"] #bc-global-header .bc-mobile-toggle { display: inline-flex !important; }
  html[dir="rtl"] #bc-global-header .bc-mobile-drawer.is-open { display: block !important; }
}

/* ---- 3) Mobile drawer ----------------------------------------------------- */
html[dir="rtl"] #bc-global-header .bc-mob-sub { padding: 0 18px 0 4px; }
html[dir="rtl"] #bc-global-header .bc-mob-authrow .btn-primary { margin-left: 0; margin-right: auto; }

/* ---- 4) Models page directional details ---------------------------------- */
/* Sidebar: mirror separator + asymmetric padding */
html[dir="rtl"] #models-root .mc-sidebar {
  border-right: 0;
  border-left: 1px solid #e5e7eb;
  padding: 24px 26px 40px 18px !important;
}
html[dir="rtl"] #models-root .mc-content { padding: 32px 30px 0 0; }
@media (max-width: 900px) {
  html[dir="rtl"] #models-root .mc-content { padding: 20px 0 48px; }
  html[dir="rtl"] #models-root .mx-context { margin-left: 0; margin-right: auto; }
}
/* Count line: bidi-plaintext so EN text lays out LTR today and a future AR
   translation lays out RTL automatically; mirror the margin push */
html[dir="rtl"] #models-root .mc-count {
  unicode-bidi: plaintext;
  margin-left: 16px;
  margin-right: auto;
}
/* Meta separators + per-span bidi (model IDs / prices stay LTR-correct) */
html[dir="rtl"] #models-root .mx-meta span + span {
  border-left: 0;
  border-right: 1px solid #d1d5db;
  padding-left: 0;
  padding-right: 12px;
}
html[dir="rtl"] #models-root .mx-meta span { unicode-bidi: plaintext; }
@media (max-width: 900px) {
  html[dir="rtl"] #models-root .mx-meta span + span { padding-right: 7px; }
}
/* Model name buttons align to inline-start (adjacent to provider mark) */
html[dir="rtl"] #models-root .mx-name { text-align: right; }

/* ---- 5) Footer bottom bar containment (<=1024px, RTL only) ---------------
 * Root cause of the page-level 83px horizontal overflow at tablet width
 * (scrollW 851 @768; EN site-wide baseline is 857 — same source): the bottom
 * bar is a nowrap flex row whose RTL overflow runs LEFT, dragging the whole
 * document width (and the in-flow header anchor) beyond the viewport, which
 * clips the right-anchored logo/h1. Wrap the bar for RTL only. EN geometry
 * unchanged (rules require html[dir="rtl"]). */
@media (max-width: 1024px) {
  html[dir="rtl"] #bc-global-footer .bc-footer-bottom { flex-wrap: wrap; row-gap: 10px; }
  html[dir="rtl"] #bc-global-footer .bc-footer-platform-text { white-space: normal; margin-right: 0; }
  html[dir="rtl"] #bc-global-footer .bc-footer-bottom-links { margin-left: 0; flex-wrap: wrap; }
}