/* =========================================================
   Arabic and right-to-left

   Two jobs: give Arabic the typography it needs, and mirror the
   handful of places where the layout was written with physical
   left/right rather than logical start/end.
   ========================================================= */

/* ---------- Arabic typography ---------- */

/* Sora carries no Arabic. IBM Plex Sans Arabic covers display and body,
   so the whole page stays in one type family when Arabic is active. */
:root[lang='ar'] {
  --display: 'IBM Plex Sans Arabic', 'Segoe UI', sans-serif;
}

/* Arabic script joins. Negative tracking breaks the joins and positive
   tracking on "uppercase" labels means nothing, so drop tracking entirely. */
:root[lang='ar'] *,
:root[lang='ar'] *::before,
:root[lang='ar'] *::after {
  letter-spacing: normal !important;
}

/* Arabic needs a little more leading than the Latin scale allows,
   and never renders in small caps or uppercase. */
:root[lang='ar'] .hero h1,
:root[lang='ar'] .screen-title,
:root[lang='ar'] .screens-heading h2,
:root[lang='ar'] .payment-head h2,
:root[lang='ar'] .brief-callout h2,
:root[lang='ar'] .handoff-banner h2,
:root[lang='ar'] .web-title-row h1,
:root[lang='ar'] .web-hero h1 {
  line-height: 1.28;
}
:root[lang='ar'] .pay-status h2,
:root[lang='ar'] .detail-title-row h2,
:root[lang='ar'] .empty-card strong,
:root[lang='ar'] .promo-copy h3,
:root[lang='ar'] .section-row h3 {
  line-height: 1.4;
}
:root[lang='ar'] .eyebrow,
:root[lang='ar'] .section-kicker,
:root[lang='ar'] .web-kicker,
:root[lang='ar'] .badge,
:root[lang='ar'] .pay-group-label,
:root[lang='ar'] .web-workspace-label,
:root[lang='ar'] .header-meta,
:root[lang='ar'] thead th,
:root[lang='ar'] .web-table th {
  text-transform: none;
}

/* ---------- Directional glyphs ---------- */
[dir='rtl'] .flip-rtl { transform: scaleX(-1); }

/* ---------- Things that must not mirror ----------
   Maps are geography, not layout. Card numbers, references, URLs and
   phone numbers are Latin/numeric runs that bidi would otherwise
   reorder around punctuation. */
[dir='rtl'] .map-canvas,
[dir='rtl'] .web-map,
[dir='rtl'] .map-route,
[dir='rtl'] .card-number,
[dir='rtl'] .card-foot,
[dir='rtl'] .ref-code strong,
[dir='rtl'] .browser-address,
[dir='rtl'] .otp-row,
[dir='rtl'] .web-spark-bars,
[dir='rtl'] .spark {
  direction: ltr;
}
[dir='rtl'] .card-scheme { direction: ltr; }

/* ---------- Site chrome ---------- */
.screen-context { text-align: end; }

[dir='rtl'] .delivery-chip { right: auto; left: -1%; }
[dir='rtl'] .price-chip { left: auto; right: -3%; }
/* The stamp exists to put Arabic on an otherwise English page. Once the
   whole page is Arabic it is redundant, and it collides with the photo. */
:root[lang='ar'] .arabic-stamp { display: none; }
.hero-rating { margin-left: 0; margin-inline-start: auto; }

/* The language switch sits with the rest of the header meta. */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.lang-switch button {
  padding: 6px 11px;
  border: 0;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  transition: color .18s ease, background .18s ease;
}
.lang-switch button:hover { color: var(--shell); }
.lang-switch button.active { color: var(--deep); background: var(--aqua); }
/* On the sign-in gate the switch sits above the footer line. */
.story-lang { position: relative; align-self: flex-start; margin-bottom: 18px; }

/* ---------- Mobile primitives ---------- */
.field-shell .prefix {
  padding-right: 0;
  padding-inline-end: 9px;
  border-right: 0;
  border-inline-end: 1px solid rgba(7, 43, 58, 0.12);
}
.search-pill { padding: 0; padding-inline: 14px 6px; }
.search-pill .filter-action { margin-left: 0; margin-inline-start: auto; }
.thumb-badge { left: auto; inset-inline-start: 8px; }
.thumb-fav { right: auto; inset-inline-end: 8px; }
.tabbar .cart-pip b { right: auto; inset-inline-end: -7px; }
.doc-amount { text-align: end; }
.detail-price { text-align: end; }

.msg.me {
  margin-left: 0;
  margin-inline-start: auto;
  border-bottom-right-radius: 16px;
  border-end-end-radius: 5px;
}
.msg.them {
  border-bottom-left-radius: 16px;
  border-end-start-radius: 5px;
}
.msg-send { margin-left: 0; margin-inline-start: auto; }

.notif-row.unread {
  padding-left: 0;
  margin-left: 0;
  border-left: 0;
  padding-inline-start: 11px;
  margin-inline-start: -11px;
  border-inline-start: 2px solid var(--aqua);
}

[dir='rtl'] .promo-banner img {
  right: auto;
  left: -10px;
  mask-image: linear-gradient(to left, transparent, #000 55%);
}

/* ---------- Web shell ---------- */
.web-sidebar { border-right: 0; border-inline-end: 1px solid rgba(7, 43, 58, 0.09); }
.web-sidebar nav button.active::before {
  left: auto;
  inset-inline-start: -17px;
  border-radius: 0;
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
}
.web-sidebar nav button i { margin-left: 0; margin-inline-start: auto; }
.web-logo .ui-brand { transform-origin: left top; }
[dir='rtl'] .web-logo .ui-brand { transform-origin: right top; }
.web-topbar .web-top-actions { margin-left: 0; margin-inline-start: auto; }
.web-legend b { margin-left: 0; margin-inline-start: auto; }

.web-table th, .web-table td { text-align: start; }
.web-table td.num { text-align: end; }
.web-time-axis span { padding-right: 0; padding-inline-end: 7px; text-align: end; }
.web-calendar-day { border-left: 0; border-inline-start: 1px solid rgba(7, 43, 58, 0.07); }
.web-calendar-shell > header h2 { margin: 0; margin-inline-end: auto; }
.web-agenda article b { text-align: start; }

/* The bar-chart fills read start-to-end, which is correct in both
   directions once the track is a logical box. */
.web-bar-track i, .progress-line i, .credit-bar i { margin-inline-end: auto; }

/* ---------- Discovery form link ---------- */
[dir='rtl'] .header-brief { letter-spacing: normal; }