/* SWPL — the Arabic layer, loaded only by /ar/index.html.

   Three things had to be researched rather than guessed, and they are the three
   that break Arabic pages built by people who only speak a Latin script:

   1. Arabic is cursive. Letters join. `letter-spacing` pulls those joins apart
      and the word stops being a word — it is not a stylistic choice there, it
      is damage. Every tracked line on this page has to go back to normal.
   2. Arabic has no capitals, so `text-transform: uppercase` does nothing to the
      Arabic and quietly shouts at any Latin left inside it. Off everywhere.
   3. Arabic glyphs sit smaller on the same point size and need more leading —
      the guidance is 1.6-1.8 against 1.4-1.5 for Latin. Sizes go up a notch and
      line-heights open up.

   Direction itself is `dir="rtl"` on <html>, once, so flex and grid flip on
   their own. This file only fixes what direction alone cannot: the physical
   left/right values inherited from v1's stylesheet, which predates any of this.

   What deliberately does NOT flip, per the RTL guidance:
     the league crest and club crests   brand marks never mirror
     the reel play badge                media controls run LTR everywhere
     the clock icon in Ticket info      circular time stays clockwise
     dates, times, prices               western digits, by decision
   What does flip: the chip scroller arrows, and the scroller's own direction.
*/

/* The skip link is parked at left:-9999px. Under rtl that is off the *trailing*
   edge, so it stretched scrollWidth to 11,439px on a 1440 window — the whole
   document scrolled sideways. Physical `left` is exactly the class of bug
   logical properties exist to prevent. */
html[dir="rtl"] .skip{left:auto;right:-9999px}
html[dir="rtl"] .skip:focus{right:auto;left:auto;inset-inline-start:12px}

/* --------------------------------------------------------------- typography */
html[dir="rtl"] body{
  /* Bukra carries the arab script with init/medi/fina/isol and rlig, so the
     joins are the font's job — ours is to stop fighting them. */
  font-feature-settings:"rlig" 1,"calt" 1;
  -webkit-font-kerning:normal;font-kerning:normal}

/* the sweeping reset: no tracking, no forced caps, more leading */
html[dir="rtl"] .h,
html[dir="rtl"] .sub,
html[dir="rtl"] .kicker,
html[dir="rtl"] .lede,
html[dir="rtl"] .btn,
html[dir="rtl"] .chip,
html[dir="rtl"] .more,
html[dir="rtl"] .fclear,
html[dir="rtl"] .tstat,
html[dir="rtl"] .mprice,
html[dir="rtl"] .mdate b,
html[dir="rtl"] .mteams b,
html[dir="rtl"] .bt b,
html[dir="rtl"] .mph,
html[dir="rtl"] .mpkick,
html[dir="rtl"] .faq summary,
html[dir="rtl"] .who b,
html[dir="rtl"] .fgrid b,
html[dir="rtl"] .fgrid h5,
html[dir="rtl"] .passbar b,
html[dir="rtl"] .passbar span,
html[dir="rtl"] .pprice,
html[dir="rtl"] .mbtxt b,
html[dir="rtl"] .final h2,
html[dir="rtl"] .fmeta b,
html[dir="rtl"] .fmeta span,
html[dir="rtl"] .whynum em,
html[dir="rtl"] .counts,
html[dir="rtl"] .score p,
html[dir="rtl"] .opening h2,
html[dir="rtl"] .opening li{
  letter-spacing:normal;
  text-transform:none}

/* Arabic runs smaller at the same size and needs the extra leading */
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] dd,
html[dir="rtl"] .mpul li,
html[dir="rtl"] .bt p,
html[dir="rtl"] .rev p,
html[dir="rtl"] .faq .ans p{line-height:1.75;font-size:1.04em}

/* That bump is for running text, and it was reaching things that are not text:
   `li` also matches a fixture row, an opening-round row and a footer link, none
   of which are prose. At 1.75 it added ~30px to every fixture row and pushed
   the ticket section back over one screen on nine of the fourteen screens I
   measure, and the footer over on a small Android. Prose keeps the leading;
   rows go back to a row's leading. */
html[dir="rtl"] .mrow,
html[dir="rtl"] .opening li,
html[dir="rtl"] .fgrid ul li,
html[dir="rtl"] .clist li{line-height:1.5;font-size:1em}
html[dir="rtl"] .mrow .mven{line-height:1.35}
/* "10 سبتمبر" wants 157px where "10 SEP" wants 96, and the shared date track is
   144 at 1440 — so the Arabic month was being clipped on every desktop width.
   The track widens for Arabic; the club-name column absorbs it. */
html[dir="rtl"] .mlist,
html[dir="rtl"] .passbar{--t-date:clamp(136px,12.4vw,196px)}
html[dir="rtl"] .fgrid ul{gap:6px}

/* Even with that, Arabic still sets about 4% taller than the English at the
   same sizes — the script needs the leading, and the leading is the point of
   the rules above. So the Arabic page gets its own version of the trims the
   English one takes on a short window: the same blocks, a little tighter,
   which is what puts the last four sections back inside one screen.
   Measured on the same fourteen screens as the English. */
html[dir="rtl"] .passbar{padding-top:13px;padding-bottom:13px}
html[dir="rtl"] .mrow{padding-top:13px;padding-bottom:13px}
html[dir="rtl"] .sub{padding-top:9px;padding-bottom:9px}
html[dir="rtl"] .bt p{font-size:1em}
html[dir="rtl"] .why .card p{line-height:1.62}
html[dir="rtl"] .fgrid{gap:26px}
html[dir="rtl"] .more{padding-top:12px;padding-bottom:12px}
/* the same three windows the English page needed a hand on, one notch tighter */
@media (max-width:700px){
  html[dir="rtl"] .mrow{padding-top:11px;padding-bottom:11px}
  html[dir="rtl"] .passbar{padding-top:11px;padding-bottom:11px}
  html[dir="rtl"] .mrow .mven{font-size:12.5px;line-height:1.25}
  html[dir="rtl"] .mrow .tstat{font-size:11px;padding:5px 9px}
  html[dir="rtl"] .macts .btn{padding-top:9px;padding-bottom:9px}
  html[dir="rtl"] .sub{padding-top:8px;padding-bottom:8px}
  html[dir="rtl"] .more{padding-top:10px;padding-bottom:10px}
  html[dir="rtl"] .ftoggle{padding-top:9px;padding-bottom:9px}
  html[dir="rtl"] .mrow .mteams{gap:6px}
  html[dir="rtl"] .whynum em{margin-top:6px}
  html[dir="rtl"] .passbar{margin-top:10px;margin-bottom:8px}
  html[dir="rtl"] .mlist{gap:7px}
  html[dir="rtl"] .mrow .mdate b{font-size:21px}
  html[dir="rtl"] .why .card{padding-top:16px;padding-bottom:16px}
}
@media (min-width:700px) and (max-height:780px){
  html[dir="rtl"] .mrow{padding-top:12px;padding-bottom:12px}
  html[dir="rtl"] .passbar{padding-top:12px;padding-bottom:12px}
  html[dir="rtl"] .why .card p{line-height:1.5}
  html[dir="rtl"] .bt{padding-top:14px;padding-bottom:16px}
  html[dir="rtl"] .bt p{line-height:1.5}
  html[dir="rtl"] .sub{padding-top:7px;padding-bottom:7px}
  html[dir="rtl"] .more{padding-top:11px;padding-bottom:11px}
  html[dir="rtl"] .fbar{margin-top:12px;margin-bottom:10px}
  html[dir="rtl"] .why .whygrid{gap:14px}
  html[dir="rtl"] .whynum em{margin-top:8px}
  html[dir="rtl"] .passbar{margin-top:10px;margin-bottom:8px}
  html[dir="rtl"] .mlist{gap:8px}
  /* the card, not the picture: a max-height on a 16/9 box is a width cap, and
     narrowing the gallery is what left a strip of ground beside it last time */
  html[dir="rtl"] .why .card{padding-top:18px;padding-bottom:18px}
}
/* iPad sideways, the one window where a tablet's width meets a laptop's height */
@media (min-width:700px) and (max-width:1199px) and (max-height:760px){
  html[dir="rtl"] #tickets .mrow{padding-top:11px;padding-bottom:11px}
  html[dir="rtl"] #tickets .passbar{padding-top:11px;padding-bottom:11px;
    margin-top:9px;margin-bottom:7px}
  html[dir="rtl"] #tickets .fbar{margin-top:11px;margin-bottom:7px}
  html[dir="rtl"] #tickets .more{margin-top:9px}
  html[dir="rtl"] #tickets .mrow .mven{line-height:1.3}
  html[dir="rtl"] #tickets .sub{padding-top:6px;padding-bottom:6px}
  html[dir="rtl"] #tickets .mrow .mprice{margin-top:2px}
  html[dir="rtl"] #tickets .mrow .macts{margin-top:2px}
  html[dir="rtl"] #tickets .more{padding-top:10px;padding-bottom:10px}
}

/* the last two windows, six and thirteen pixels each: the section's own padding */
@media (min-width:700px) and (max-height:660px){
  html[dir="rtl"] #why{padding-top:clamp(26px,5vh,70px);
    padding-bottom:clamp(26px,5vh,70px)}
}
@media (max-width:420px){
  html[dir="rtl"] #tickets{padding-bottom:clamp(18px,3.2vh,48px)}
  html[dir="rtl"] .ftoggle{margin-top:10px}
  html[dir="rtl"] .more{margin-top:8px;padding-top:9px;padding-bottom:9px}
  html[dir="rtl"] .why .card p{line-height:1.45;font-size:13px}
  html[dir="rtl"] .why .gal{max-height:23vh}
  html[dir="rtl"] .fgrid{gap:18px}
  html[dir="rtl"] .foot{padding-top:clamp(28px,4vw,60px)}
}
html[dir="rtl"] .h{line-height:1.18}
html[dir="rtl"] .hero h1{line-height:1.12}
html[dir="rtl"] .final h2{line-height:1.2}
html[dir="rtl"] .faq summary{line-height:1.5}
/* the display sizes were tuned to Latin caps; Arabic at the same size reads
   smaller, so the two biggest headings come down a little to stop wrapping */
html[dir="rtl"] .hero h1{font-size:clamp(34px,6.4vw,86px)}
html[dir="rtl"] .final h2{font-size:clamp(28px,4.6vw,64px)}

/* ------------------------------------------------- physical values from v1 */
/* v1 predates logical properties, so its left/right rules stay put under rtl
   and have to be restated per side. Everything below is that, and nothing
   more — no new design decisions live in this file. */

/* the green rule down the left of the pass bar and the why card */
html[dir="rtl"] .passbar::before,
html[dir="rtl"] .card.whynum::before{left:auto;right:0;
  border-radius:0 6px 6px 0}
html[dir="rtl"] .passbar{padding-left:26px;padding-right:32px}
html[dir="rtl"] .card.whynum{padding-left:clamp(20px,2vw,34px);
  padding-right:calc(clamp(20px,2vw,34px) + 12px)}

/* --------------------------------------------------------------- the hero
   The opening-round card was pinned with `right:var(--pad)` and the headline
   was cleared with `padding-right`, so under rtl neither moved: the card stayed
   on the right and the Arabic — which sets from the right — was pushed into the
   middle of the frame and right-aligned against nothing. The two swap sides. */
html[dir="rtl"] .opening{right:auto;left:var(--pad)}
html[dir="rtl"] .heroin{padding-right:0;padding-left:min(40vw,600px)}
/* v2.css now keeps the card alongside the copy down to 1001px so an iPad
   turned sideways does not stack them, so the mirror has to follow it to the
   same line — at 1100 the Arabic hero was clearing space for a card that was
   still beside it. */
@media (min-width:1001px) and (max-width:1100px){
  html[dir="rtl"] .opening{right:auto;left:var(--pad)}
  html[dir="rtl"] .heroin{padding-right:0;padding-left:min(37vw,400px)}
}
@media (max-width:1000px){
  html[dir="rtl"] .heroin{padding-left:0}
}

/* Both dark scrims run 90deg — darkest at the left, where the Latin copy sits.
   Mirroring the copy without mirroring the scrim would put the headline on the
   thinnest part of it, over whatever the footage happens to be doing there. The
   gradient is a lighting decision that belongs to the text, so it turns with it. */
html[dir="rtl"] .hero::after{
  background:linear-gradient(270deg,rgba(26,13,44,.94) 0%,rgba(26,13,44,.72) 46%,rgba(26,13,44,.4) 100%)}
html[dir="rtl"] .final::after{
  background:linear-gradient(270deg,rgba(26,13,44,.93),rgba(26,13,44,.55) 60%,rgba(26,13,44,.3))}

/* the subtitle plate */
html[dir="rtl"] .sub{padding-left:20px;padding-right:16px}

/* the next-match marker on the first row */
html[dir="rtl"] .mrow.nx::before{left:auto;right:0}

/* the status pill's dot sits before the label in reading order either way,
   which flex already handles — only the gap needed no change */

/* the row's action cluster */
html[dir="rtl"] .macts{justify-self:end}

/* The two swipe rows fade at their trailing edge so a half-visible card reads
   as "more to swipe". `linear-gradient(90deg …)` is a physical direction, so
   under rtl it fades the wrong end — the one you are already looking at. */
@media (max-width:699px){
  html[dir="rtl"] #info .bgrid{
    -webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 44px),transparent);
            mask-image:linear-gradient(270deg,#000 calc(100% - 44px),transparent)}
}
@media (max-width:640px){
  html[dir="rtl"] #says .rgrid{
    -webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 44px),transparent);
            mask-image:linear-gradient(270deg,#000 calc(100% - 44px),transparent)}
}
/* the filter control's +/− sign belongs on the trailing edge */
html[dir="rtl"] .ftoggle{text-align:right}
html[dir="rtl"] .ftoggle::after{float:left}

/* the match panel's close button, and the lightbox's */
html[dir="rtl"] .mpx{right:auto;left:12px}
html[dir="rtl"] .lbx{right:auto;left:clamp(10px,2vw,26px)}
/* the bullet in Before you arrive */
html[dir="rtl"] .mpul li{padding-left:0;padding-right:20px}
html[dir="rtl"] .mpul li::before{left:auto;right:2px}

/* the mobile Buy bar */
html[dir="rtl"] .mbin{flex-direction:row}

/* the review avatar and name */
html[dir="rtl"] .rev footer{flex-direction:row}

/* ---------------------------------------------- the two sets of arrow buttons
   Both the chip scroller and the photo gallery draw their arrows with &lsaquo;
   and &rsaquo;. Those two characters are Bidi_Mirrored: the browser turns the
   glyph round on its own inside an rtl run. So each arrow needs its *side*
   swapped and nothing else — the button that was `‹` on the left becomes `›` on
   the right by itself, which is what previous should look like in Arabic.

   Adding a scaleX(-1) on top, which is the reflex, cancels the mirroring the
   browser already did and leaves both arrows pointing inwards at each other.
   That is what the chip arrows were doing, and it is why there is no transform
   here. */
html[dir="rtl"] .fprev{left:auto;right:-8px}
html[dir="rtl"] .fnext{right:auto;left:-8px}
/* the gallery arrows were left out entirely: physical `left`/`right` kept them
   where they were while their glyphs mirrored underneath them, so previous sat
   on the left of the picture showing a right-pointing arrow */
html[dir="rtl"] .gprev{left:auto;right:14px}
html[dir="rtl"] .gnext{right:auto;left:14px}
html[dir="rtl"] .fscroll.can-l .frow{
  -webkit-mask-image:linear-gradient(270deg,transparent 0,#000 58px);
          mask-image:linear-gradient(270deg,transparent 0,#000 58px)}
html[dir="rtl"] .fscroll.can-r .frow{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 58px);
          mask-image:linear-gradient(90deg,transparent 0,#000 58px)}
html[dir="rtl"] .fscroll.can-l.can-r .frow{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 58px,#000 calc(100% - 58px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 58px,#000 calc(100% - 58px),transparent 100%)}

/* the FAQ chevron */
html[dir="rtl"] .faq summary{padding-left:60px;padding-right:clamp(20px,2.2vw,32px)}
html[dir="rtl"] .faq summary::after{right:auto;left:20px}
html[dir="rtl"] .faq .ans p{padding-left:clamp(20px,2.2vw,32px);
  padding-right:clamp(20px,2.2vw,32px)}

/* ---------------------------------------------------- what must not mirror */
/* Brand marks, media controls and the clock keep their orientation. Nothing
   here uses scaleX, but stating it stops a later blanket flip from reaching
   them. */
html[dir="rtl"] .logo img,
html[dir="rtl"] .flogo,
html[dir="rtl"] .flogo2,
html[dir="rtl"] .cr img,
html[dir="rtl"] .igt .vb,
html[dir="rtl"] .bt .ic svg{transform:none}

/* Dates, times, prices and the countdown are western digits by decision, so
   they are isolated from the surrounding Arabic to stop the bidi algorithm
   reordering a run like "18:25" or "SAR 60". */
html[dir="rtl"] .mdate,
html[dir="rtl"] .mprice,
html[dir="rtl"] .pprice,
html[dir="rtl"] .mpwhen,
html[dir="rtl"] .mpprice,
html[dir="rtl"] .cd,
html[dir="rtl"] .whynum b,
html[dir="rtl"] .score b,
html[dir="rtl"] .opening b,
html[dir="rtl"] .opening span{unicode-bidi:isolate}
/* a Latin word inside Arabic — a club that has no Arabic name, a URL — needs
   the same protection */
html[dir="rtl"] .ltr{unicode-bidi:isolate;direction:ltr;display:inline-block}

/* the language switch: the active language is the one you are on */
html[dir="rtl"] .lang{direction:ltr}

/* On a phone the scroller bleeds to both screen edges and carries the gutter
   inside, so an arrow hanging 8px outside it hangs off the screen. The English
   sheet already pins them inward at this width; under rtl the sides are
   swapped, so it has to be said again. */
@media (max-width:1000px){
  html[dir="rtl"] .fprev{right:6px;left:auto}
  html[dir="rtl"] .fnext{left:6px;right:auto}
}

/* At 360 the Arabic season line broke after "5" and left "مدن" alone on a second
   row — 37px of height for one orphaned word, and it read as a mistake rather
   than a wrap. Measured, the whole line needs 326px against 324 available, so a
   few pixels of the pill's own padding buy the single line. */
@media (max-width:400px){
  html[dir="rtl"] #tickets .sub{white-space:nowrap;padding-left:12px;padding-right:12px}
}