/*
 * RTL layer for Arabic and Persian.
 *
 * RTL is a layout problem, not a translation problem: translating the strings and
 * leaving the layout LTR produces a page that reads as broken to a native speaker even
 * though every word is correct.
 *
 * This is written as a scoped override sheet rather than a rewrite of the existing CSS.
 * The theme has ~240 templates and a large physical-property stylesheet; converting all
 * of it to logical properties in place would be a very large, high-risk diff. Everything
 * here is gated behind [dir="rtl"], so the sheet is completely inert for English and
 * Turkish and can ship without touching the LTR rendering at all.
 *
 * New CSS in this theme should prefer logical properties (margin-inline-start,
 * padding-inline-end, inset-inline-start) so it needs no entry here.
 */

[dir="rtl"] {
  /* Arabic and Persian need a font stack that actually has the glyphs. The theme's
     Latin stack falls back to a system default that renders Arabic script poorly and
     with the wrong vertical metrics. */
  --wooary-font-rtl: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI",
                     Tahoma, "Iranian Sans", "Vazirmatn", "Dubai", sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button {
  font-family: var(--wooary-font-rtl);
  /* Arabic script sits lower and needs more leading than Latin at the same px size. */
  line-height: 1.85;
}

/* ---------- direction + alignment ---------- */

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

/* Latin runs inside RTL text - titles, years, quality tags, durations - must stay LTR
   or punctuation and digits reorder visibly. */
[dir="rtl"] .ltr,
[dir="rtl"] time,
[dir="rtl"] .vod-year,
[dir="rtl"] .vod-duration,
[dir="rtl"] .vod-quality,
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] samp,
[dir="rtl"] pre { direction: ltr; unicode-bidi: isolate; text-align: left; }

/* Numeric fields stay LTR but keep their RTL alignment. */
[dir="rtl"] .num,
[dir="rtl"] .score,
[dir="rtl"] .count { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- flow reversal ---------- */

[dir="rtl"] .row,
[dir="rtl"] .flex,
[dir="rtl"] .d-flex,
[dir="rtl"] .nav,
[dir="rtl"] .navbar,
[dir="rtl"] .breadcrumb,
[dir="rtl"] .pagination { flex-direction: row-reverse; }

[dir="rtl"] .float-left  { float: right !important; }
[dir="rtl"] .float-right { float: left  !important; }
[dir="rtl"] .text-left   { text-align: right !important; }
[dir="rtl"] .text-right  { text-align: left  !important; }

/* ---------- spacing: physical -> mirrored ---------- */

[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }

[dir="rtl"] .pull-left  { float: right; }
[dir="rtl"] .pull-right { float: left; }

/* Lists and quotes hang off the opposite edge. */
[dir="rtl"] ul, [dir="rtl"] ol { padding-right: 2em; padding-left: 0; }
[dir="rtl"] blockquote { border-right: 3px solid currentColor; border-left: 0;
                         padding-right: 1em; padding-left: 0; }

/* ---------- components ---------- */

/* Dropdowns and menus anchor to the other side. */
[dir="rtl"] .dropdown-menu,
[dir="rtl"] .submenu,
[dir="rtl"] .head-search-drop { left: auto; right: 0; text-align: right; }

/* Carousels/rails: the visual scroll direction flips with the text direction. */
[dir="rtl"] .swiper-wrapper,
[dir="rtl"] .rail,
[dir="rtl"] .continue-watch-rail { direction: rtl; }

/* Directional glyphs must mirror; non-directional ones (play, star, search) must NOT,
   which is why this is an explicit allow-list rather than a blanket icon transform. */
[dir="rtl"] .icon-arrow-left,
[dir="rtl"] .icon-arrow-right,
[dir="rtl"] .icon-chevron-left,
[dir="rtl"] .icon-chevron-right,
[dir="rtl"] .icon-back,
[dir="rtl"] .icon-next,
[dir="rtl"] .icon-prev { transform: scaleX(-1); }

/* Progress bars fill from the right. */
[dir="rtl"] .progress,
[dir="rtl"] .progress-bar,
[dir="rtl"] .watch-progress { transform: scaleX(-1); }
[dir="rtl"] .progress > *,
[dir="rtl"] .watch-progress > * { transform: scaleX(-1); }

/* Form controls */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="search"],
[dir="rtl"] input[type="password"],
[dir="rtl"] textarea { text-align: right; }
/* Email, URL and tel are Latin-only by definition; forcing them RTL puts the cursor and
   the @ sign in visually wrong places. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"] { direction: ltr; text-align: left; }

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

/* ---------- player ---------- */

/* Subtitles: the cue box mirrors, but the cue text direction is decided per track by
   the player from the track's language, not forced here - an English subtitle track
   playing on an Arabic UI must still render LTR. */
[dir="rtl"] .art-subtitle,
[dir="rtl"] .vjs-text-track-display { text-align: center; }

[dir="rtl"] .art-controls,
[dir="rtl"] .vjs-control-bar { flex-direction: row-reverse; }

/* The seek bar is a physical timeline: left is earlier, right is later, in every
   locale. Explicitly held LTR so it is not flipped by a parent rule. */
[dir="rtl"] .art-progress,
[dir="rtl"] .vjs-progress-control { direction: ltr; }