/* =========================================================================
   i18n / RTL stylesheet
   -------------------------------------------------------------------------
   1. Language-switcher styling (applies in both directions).
   2. Right-to-left overrides, all scoped to [dir="rtl"].
   The base layout relies on flexbox + logical `start`/`end` alignment, so
   most of it mirrors automatically once dir="rtl" is set. Only the rules
   below use hard-coded left/right values that need flipping.
   ========================================================================= */

/* ------------------------------------------------------------------ */
/* 1. Language switcher                                                */
/* ------------------------------------------------------------------ */
/* Keep the CTA and the language pill together on the right of the header,
   instead of letting `justify-content: space-between` spread them apart. */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
}

.site-header__actions:empty {
  display: none;
}

.site-header__lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 9px 16px;
  min-width: 3.25rem;
  border: 1px solid var(--main-electric-purple);
  border-radius: 999px;
  background: transparent;
  color: var(--main-electric-purple);
  font-family: var(--font-family-bold);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.site-header__lang:hover,
.site-header__lang:focus-visible {
  background: var(--main-electric-purple);
  color: var(--secondary-clear-white);
}

.site-header.is-scrolled .site-header__lang {
  border-radius: 0.5rem;
}

.site-mobile-menu__lang {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 0.85rem;
  background: transparent;
  color: var(--main-electric-purple);
  font-family: var(--font-family-bold);
  font-size: 1rem;
  text-align: start;
  cursor: pointer;
}

.site-mobile-menu__lang:hover,
.site-mobile-menu__lang:focus-visible {
  background: rgba(107, 71, 245, 0.08);
}

@media (max-width: 767px) {
  /* Desktop CTA + pill hide with the rest of the desktop nav; use the menu. */
  .site-header__actions {
    display: none;
  }
}

@media (min-width: 768px) {
  .site-mobile-menu__lang {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* 2. RTL overrides                                                    */
/* ------------------------------------------------------------------ */
[dir="rtl"] body {
  text-align: right;
}

/* Almarai already ships Arabic glyphs; keep Arabic words from being
   chopped by the LTR-oriented break-all rules in the base sheet. */
[dir="rtl"] .break-words,
[dir="rtl"] #our-four-pillars .pillars-card,
[dir="rtl"] #our-four-pillars .pillars-card h3 {
  word-break: normal;
}

/* Floating "to top" button: base sheet pins it to the right. */
[dir="rtl"] #to-top {
  right: auto;
  left: 2rem;
}

/* Header bar has asymmetric padding on mobile in the base sheet. */
@media (max-width: 767px) {
  [dir="rtl"] .site-header__bar {
    padding: 0 1.1rem 0 0.75rem;
  }
}

/* Hard-coded `text-align: left` blocks in the base sheet (mostly inside
   mobile media queries for cards). */
[dir="rtl"] #our-four-pillars .pillars-card,
[dir="rtl"] #business-ecosystem .business-ecosystem__client-card,
[dir="rtl"] #business-ecosystem .business-ecosystem__mini-card,
[dir="rtl"] #why-us .why-us__card {
  text-align: right;
}

/* Lined section divider: swap the asymmetric side margins. */
[dir="rtl"] #business-ecosystem .business-ecosystem__section-title--lined::before {
  margin-right: 0;
  margin-left: 0.25rem;
}
[dir="rtl"] #business-ecosystem .business-ecosystem__section-title--lined::after {
  margin-left: 0;
  margin-right: 0.25rem;
}

/* Numbers stay in Latin digits (matches the design); force them LTR so
   mixed strings like "15 خدمة" don't reorder oddly. */
[dir="rtl"] #core-business-lines .core-business-lines__summary span,
[dir="rtl"] .contact-info__details-item-description,
[dir="rtl"] #footer .footer-text {
  unicode-bidi: plaintext;
}