/* =============================================================================
   rtl.css — RTL support + the language/season components added with the
   multi-language work. Loaded on EVERY page (see includes/head.php), so it also
   carries the direction-agnostic base styles for those new components.

   Strategy: Bootstrap's RTL build (swapped in head.php) flips all Bootstrap
   utilities, and the site's flexbox layouts reverse automatically under
   <html dir="rtl">. This sheet (a) styles the new i18n components with logical
   properties so they work in both directions, and (b) flips the handful of
   custom rules that still use physical left/right/text-align.
   ============================================================================= */

/* ── Arabic typography ──────────────────────────────────────────────────────
   Montserrat (the site's Latin face) ships no Arabic glyphs, so under dir=rtl
   the browser was falling back to whatever system Arabic font is installed —
   inconsistent and dated. Cairo is a geometric Arabic webfont whose Latin and
   Arabic are co-designed, so it keeps Montserrat's modern feel while giving the
   whole RTL UI one cohesive, professional typeface; its 200–1000 variable
   weight range covers the heavy 900 scores/headings. Cairo is loaded in
   head.php for RTL locales only, and Montserrat stays as a fallback for any
   glyph Cairo lacks. :root[dir="rtl"] (specificity 0,2,0) plus rtl.css loading
   after variables.css lets this override both the dark and light theme tokens. */
:root[dir="rtl"] {
    --font-family: 'Cairo', 'Montserrat', sans-serif;
    --font-heading: 'Cairo', 'Montserrat', sans-serif;
    --font-body: 'Cairo', 'Montserrat', sans-serif;
}

/* ── Crawlable season dropdown (league page) ────────────────────────────── */
.league-season-dropdown { position: relative; }
.league-season-dropdown > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.league-season-dropdown > summary::-webkit-details-marker { display: none; }
.league-season-dropdown[open] > summary .bi-chevron-down { transform: rotate(180deg); }
.league-season-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    inset-inline-end: 0;               /* right in LTR, left in RTL */
    min-width: 150px;
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.league-season-link {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-primary);
    white-space: nowrap;
}
.league-season-link:hover { background: var(--bg-card-hover); }
.league-season-link.active { color: var(--accent-primary); font-weight: 800; }
.league-season-static { display: inline-flex; align-items: center; }

/* ── RTL flips for the site's physical directional rules ────────────────── */
/* news featured badge: pinned to the leading edge */
[dir="rtl"] .news-featured-badge { left: auto; right: 12px; }

/* standings table headers align to the reading edge */
/* [dir="rtl"] .standings-table th { text-align: end; } */
/* [dir="rtl"] .standings-table td.st-club { text-align: end; } */

/* avatar popup anchors to the leading edge of the avatar */
[dir="rtl"] .user-avatar-popup { right: auto; left: 0; }
/* [dir="rtl"] .user-popup-logout { text-align: end; } */

/* Non-default indicator dots on the date-nav buttons — both the filter button and
   the calendar button (.date-active, added with the date picker popover) share one
   rule in style.css, so they must flip together here or they end up on opposite
   corners in Arabic. */
[dir="rtl"] .date-nav-btn.filter-active::after,
[dir="rtl"] .date-nav-btn.date-active::after { right: auto; left: -2px; }

/* footer decorative glow */
[dir="rtl"] .site-footer::before { left: auto; right: -42px; }

/* ── Mirror directional chevron affordances (prev/next) ─────────────────── */
[dir="rtl"] .round-selector-btn#prevRound .bi-chevron-left,
[dir="rtl"] .round-selector-btn#nextRound .bi-chevron-right,
[dir="rtl"] .date-nav-arrow.prev .bi-chevron-left,
[dir="rtl"] .date-nav-arrow.next .bi-chevron-right {
    transform: scaleX(-1);
}

/* ── General RTL polish ─────────────────────────────────────────────────── */
/* Keep the season dropdown menu from overflowing the viewport edge in RTL. */
[dir="rtl"] .league-season-menu { inset-inline-end: 0; }
/* Bootstrap RTL already reverses input groups / btn margins; ensure the search
   modal input icon sits on the leading edge and the in-field close button on the
   trailing one, with room reserved for both so typed text never slides under them. */
[dir="rtl"] .search-modal-input-icon { left: auto; right: 16px; }
[dir="rtl"] .search-modal-input { padding-inline-end: 44px; padding-inline-start: 44px; }
[dir="rtl"] .search-modal-close { left: 14px; right: auto; }
[dir="rtl"] .search-modal-item-arrow {transform: scaleX(-1);}
[dir="rtl"] .standings-table .z-bar { right: 0px; left: auto; }
[dir="rtl"] .scorers-table .z-bar { right: 0px; left: auto; }
[dir="rtl"] .transfer-arrow {transform: scaleX(-1);}
[dir="rtl"] .player-transfer-arrow {transform: scaleX(-1);}
[dir="rtl"] .commentator-promo-glyph {transform: scaleX(-1);}
[dir="rtl"] .championships-card-arrow {transform: scaleX(-1);}


/* auth page */
[dir="rtl"] .auth-input-wrapper > i:first-child { right: 14px; left: auto; }
[dir="rtl"] .auth-password-toggle { right: auto; left: 12px; }
[dir="rtl"] .auth-input { padding: 12px 42px 12px 14px; }
[dir="rtl"] [type=email], [type=number], [type=tel], [type=url] {
    direction: rtl;
}

/* ── Date picker popover ────────────────────────────────────────────────────────
   The popover anchors with inset-inline-end, so its position already flips on its
   own. What is left is (a) the unfold origin, (b) the grid direction — so the
   Saturday-first days and the weekday row both read right-to-left — and (c) the
   chevron affordance: with the month row mirrored the "previous month" control
   now sits on the right, so its left-pointing glyph must point right. Same
   scaleX(-1) flip already used for .transfer-arrow above. */
[dir="rtl"] .date-picker-popover,
[dir="rtl"] .filter-modal { transform-origin: top left; }
[dir="rtl"] .date-picker-popover .flatpickr-calendar,
[dir="rtl"] .date-picker-popover .flatpickr-months,
[dir="rtl"] .date-picker-popover .flatpickr-weekdays,
[dir="rtl"] .date-picker-popover .flatpickr-weekdaycontainer,
[dir="rtl"] .date-picker-popover .flatpickr-days,
[dir="rtl"] .date-picker-popover .dayContainer { direction: rtl; }
[dir="rtl"] .date-picker-popover .flatpickr-prev-month .bi,
[dir="rtl"] .date-picker-popover .flatpickr-next-month .bi { transform: scaleX(-1); }
/* The Arabic date_nav.day_abbr entries are full day names (الأحد …), far wider
   than "Sun", so drop the uppercase/letter-spacing and shrink the type to keep
   all seven columns on one line. */
[dir="rtl"] .date-picker-popover span.flatpickr-weekday {
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
}