/* Arabic is opt-in: loaded only for the ar locale after application.css. */
html[dir="rtl"] body {
  direction: rtl;
  text-align: start;
  font-family: "Rubik Arabic", "SN Pro", Tahoma, Arial, sans-serif;
}

/* Components that explicitly choose SN Pro must opt into the Arabic face. */
html[dir="rtl"] .title {
  font-family: "Rubik Arabic", "SN Pro", Tahoma, Arial, sans-serif;
}

/* The language panel may extend below the header; do not crop it. */
html[dir="rtl"] .web-chrome.header-x {
  overflow: visible !important;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: start;
}

html[dir="rtl"] .matches-filterbar__content {
  padding-left: 0;
}

/* Site chrome: the logo leads on the right; utility controls stay together on left. */

html[dir="rtl"] .site-header__inner img[alt="GoalXA"] {
  margin-left: 0 !important;
  margin-right: 6px;
}

html[dir="rtl"] .site-header__actions {
  gap: 10px;
  padding-left: 12px;
  direction: ltr;
}

html[dir="rtl"] .site-header__actions [data-controller="search"] {
  margin: 0 !important;
}

html[dir="rtl"] .site-header__language {
  direction: rtl;
  position: relative;
}

html[dir="rtl"] .dropdownjs-content {
  left: auto;
  right: 0;
  text-align: right;
}

@media (max-width: 767px) {
  /* Keep the compact search trigger entirely inside the green header. */
  html[dir="rtl"] .site-header__actions [data-controller="search"] {
    flex: 0 0 40px;
    transition: flex-basis .5s ease;
  }

  html[dir="rtl"] .site-header__actions .searchc input[type="search"] {
    box-sizing: border-box !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px;
    margin: 0;
    padding: 0 !important;
    background-position: center !important;
  }

  html[dir="rtl"] .site-header__actions [data-controller="search"]:focus-within {
    flex-basis: 100px;
  }

  html[dir="rtl"] .site-header__actions .searchc input[type="search"]:focus {
    width: 130px !important;
    min-width: 100px !important;
    padding-left: 32px !important;
    color: #000 !important;
    cursor: auto !important;
    background-position: 9px center !important;
    direction: rtl;
  }
}

/* Keep the two primary navigation tiles joined at their inner edge. */
html[dir="rtl"] .top-menu:first-child {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 7px !important;
}

html[dir="rtl"] .top-menu:nth-child(2) {
  border-bottom-left-radius: 7px !important;
  border-bottom-right-radius: 0 !important;
}

/* Sports data keeps a stable home-left / away-right order in every locale. */
html[dir="rtl"] .result-card__scoreline,
html[dir="rtl"] .result-card__scorers,
html[dir="rtl"] .result-card__context,
html[dir="rtl"] .result-card__statValues,
html[dir="rtl"] .result-card__statBars {
  direction: ltr;
}

html[dir="rtl"] .result-card__score,
html[dir="rtl"] .result-card__status,
html[dir="rtl"] .result-card__scorer time {
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] .result-card__play i {
  margin-left: 0;
  margin-right: 2px;
  border-left: 0;
  border-right: 6px solid var(--result-green);
}

html[dir="rtl"] .result-card__highlights:hover .result-card__play i {
  transform: translateX(-1px);
}

/* Tabs and the compact overview keep team values on their matching side. */
html[dir="rtl"] .match-tabs__bar,
html[dir="rtl"] .match-keyStats__values,
html[dir="rtl"] .lineup-teaser,
html[dir="rtl"] .lineup-teaser__head,
html[dir="rtl"] .lineup-teaser__players,
html[dir="rtl"] .lineup-teaser__row {
  direction: rtl;
}

html[dir="rtl"] .match-keyStats__value--home {
  text-align: right;
  direction: ltr;
}

html[dir="rtl"] .match-keyStats__value--away {
  text-align: left;
  direction: ltr;
}

html[dir="rtl"] .match-keyStats__fill--home {
  left: auto;
  right: 0;
}

html[dir="rtl"] .match-keyStats__fill--away {
  left: 0;
  right: auto;
}

html[dir="rtl"] .lineup-teaser__team--away,
html[dir="rtl"] .lineup-teaser__col--away .lineup-teaser__player {
  text-align: start;
}

html[dir="rtl"] .lineup-teaser__cell--away,
html[dir="rtl"] .lineup-teaser__meta--away {
  justify-content: flex-start;
}

/* Timeline mirrors team sides on wide screens but keeps the central clock stable. */
html[dir="rtl"] .match-timeline__row--home .match-timeline__card {
  grid-column: 3;
  justify-self: start;
  text-align: start;
}

html[dir="rtl"] .match-timeline__row--away .match-timeline__card {
  grid-column: 1;
  justify-self: end;
  text-align: start;
}

html[dir="rtl"] .match-timeline__row--home .match-timeline__cardHeader,
html[dir="rtl"] .match-timeline__row--home .match-timeline__person {
  justify-content: flex-start;
}

html[dir="rtl"] .match-timeline__timePill {
  direction: ltr;
  unicode-bidi: isolate;
}

@media (max-width: 680px) {
  html[dir="rtl"] .match-timeline::before {
    left: auto;
    right: 16px;
  }

  html[dir="rtl"] .match-timeline__row {
    grid-template-columns: 1fr auto;
  }

  html[dir="rtl"] .match-timeline__time {
    grid-column: 2;
    justify-self: end;
  }

  html[dir="rtl"] .match-timeline__card,
  html[dir="rtl"] .match-timeline__row--home .match-timeline__card,
  html[dir="rtl"] .match-timeline__row--away .match-timeline__card {
    grid-column: 1;
    justify-self: stretch;
    text-align: start;
  }

  html[dir="rtl"] .match-timeline__marker {
    padding-left: 0;
    padding-right: 28px;
    text-align: right;
  }

  html[dir="rtl"] .match-timeline__marker::before {
    left: auto;
    right: 16px;
  }
}