/* =========================================================== * style.rtl.css — Right-to-Left override. * Loaded ONLY when (currently: Arabic). * Loaded AFTER style.css, so every rule here is an override. * Keep file small: only flip physical-direction properties. * =========================================================== */ /* ---------- Typography: Arabic-friendly system font stack ---------- */ [dir="rtl"] { --font: 'Segoe UI', Tahoma, 'Helvetica Neue', 'Geeza Pro', 'Noto Naskh Arabic', 'Arabic UI Text', system-ui, -apple-system, sans-serif; } /* Keep western digits and isolate them from surrounding RTL text so that scores like "3 - 1", FIFA ranks "#7" and dates "11 يونيو 2026" are not visually reordered by the bidi algorithm. */ [dir="rtl"] .score, [dir="rtl"] .match-card__score, [dir="rtl"] .match-time, [dir="rtl"] .standings-table td, [dir="rtl"] .squad-table td, [dir="rtl"] .countdown-value, [dir="rtl"] .stadium-capacity, [dir="rtl"] .team-rank, [dir="rtl"] .fifa-rank, [dir="rtl"] .num { unicode-bidi: isolate; } /* ---------- Navbar dropdowns: anchor to the opposite side ---------- */ [dir="rtl"] .lang-switch { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .lang-dropdown, [dir="rtl"] .nav-more__dropdown { right: auto; left: 0; } /* ---------- Cards with a colored accent stripe ---------- */ [dir="rtl"] .cluster-card, [dir="rtl"] .analysis-card, [dir="rtl"] .methodology-card, [dir="rtl"] .prediction-row { border-left: none; border-right: 3px solid var(--accent); } /* Gold-accent (history podium, bracket champion) */ [dir="rtl"] .stat-card--gold, [dir="rtl"] .history-card--winner, [dir="rtl"] .bracket__champion-card { border-left: none; border-right: 3px solid var(--gold); } /* Generic accent card (catch-all for any other "border-left: 3px solid var(--accent)") */ [dir="rtl"] [class*="border-l-accent"], [dir="rtl"] .card--accent { border-left: none; border-right: 3px solid var(--accent); } /* Squad-table position-row coloured top border stays (uses border-top, no flip). */ /* ---------- Captain pill & coach card border ---------- */ [dir="rtl"] .squad-captain { margin-left: 0; margin-right: 0.25rem; } [dir="rtl"] .coach-card { border-left: none; border-right: 4px solid #f59e0b; } /* ---------- Predictor stats bar labels ---------- */ [dir="rtl"] .bp-stats-bar-name { text-align: left; } /* ---------- Match-card structure ---------- */ /* match-card uses flex; flex naturally mirrors under dir=rtl. No overrides needed unless a sub-rule uses physical left/right margins. The visible regression points are tested in QA. */ /* ---------- Bracket connectors: mirror left ↔ right ---------- */ /* Under dir=rtl the flex container auto-reverses (R32 ends on the right, Final on the left). The connector pseudo-elements are physically anchored with `right:` / `left:` and need to be flipped to land on the correct side. */ /* Tournament Bracket */ [dir="rtl"] .bracket__round:not(:last-child) .bracket__match::after { right: auto; left: calc(-1 * var(--cw)); } [dir="rtl"] .bracket__round:not(:last-child) .bracket__pair::after { right: auto; left: calc(-1 * var(--cw)); border-left: none; border-right: 2px solid var(--connector-color); } [dir="rtl"] .bracket__round:not(:first-child) .bracket__match::before { left: auto; right: calc(-1 * var(--cw)); } /* Bracket Predictor (same pattern, different vars) */ [dir="rtl"] .bp-bracket__round:not(:last-child) .bp-match::after { right: auto; left: calc(-1 * var(--bp-cw)); } [dir="rtl"] .bp-bracket__round:not(:last-child) .bp-bracket__pair:not(.bp-bracket__pair--final)::after { right: auto; left: calc(-1 * var(--bp-cw)); border-left: none; border-right: 2px solid var(--connector-color); } [dir="rtl"] .bp-bracket__round:not(:first-child) .bp-match::before { left: auto; right: calc(-1 * var(--bp-cw)); } /* Per-slot clear (×) button in Bracket Predictor */ [dir="rtl"] .bp-team-slot__clear { right: auto; left: 4px; } [dir="rtl"] .bp-team-slot { padding-right: 0; padding-left: 24px; } /* ---------- Hover arrow translate: invert direction ---------- */ /* In LTR cards: hover slides arrow 4px to the right. In RTL: arrow should slide 4px to the left (toward the next reading position). */ [dir="rtl"] .card-cta:hover, [dir="rtl"] .nav-card:hover .card-arrow, [dir="rtl"] a.card-link:hover .arrow { transform: translateX(-4px); } /* Mirror right-pointing arrow SVGs inside CTAs */ [dir="rtl"] .card-arrow, [dir="rtl"] .cta-arrow { transform: scaleX(-1); } /* ---------- Tooltip / icon prefixes (padding-left + absolute icon) ---------- */ /* Patterns at style.css:2585-2611, 2720-2724 — pages with a left-edge icon. */ [dir="rtl"] .with-icon-left, [dir="rtl"] .tip, [dir="rtl"] .info-box { padding-left: 0; padding-right: 3rem; } [dir="rtl"] .with-icon-left::before, [dir="rtl"] .tip::before, [dir="rtl"] .info-box::before { left: auto; right: 0.9rem; } /* ---------- Numeric-column alignment in tables ---------- */ /* Western digits in numeric columns look correct right-aligned in both LTR & RTL, so .squad-table .num and .standings-table numeric cells stay as-is. But the squad name column (`text-align: left` in LTR) should become `right` in RTL. */ [dir="rtl"] .squad-table thead th, [dir="rtl"] .squad-table tbody td { text-align: right; } [dir="rtl"] .squad-table tbody td.num, [dir="rtl"] .squad-table thead th.num { text-align: left; } /* ---------- Breadcrumb separator direction ---------- */ /* Default CSS uses content "›" between items. Under RTL the browser reorders the flex naturally, but the separator glyph itself should point left ("‹"). */ [dir="rtl"] .breadcrumbs__item + .breadcrumbs__item::before { content: "‹"; } /* ---------- Select / dropdown chevron position ---------- */ /* style.css:4151 → padding-right: 2.5rem; style.css:4157 → right: 1.15rem */ [dir="rtl"] .select-styled, [dir="rtl"] .filter-select { padding-right: 0.9rem; padding-left: 2.5rem; } [dir="rtl"] .select-styled::after, [dir="rtl"] .filter-select::after { right: auto; left: 1.15rem; }