/* RTL overrides for the Arabic build of MabrookUGC.
   Loaded AFTER mabrook.css + inline styles so these win. Applied only when
   html[dir="rtl"] is set (which the build script does on every /ar/ page).

   Most layout is handled by browser bidi — flex/grid auto-mirror, text
   aligns to start (right in RTL), native logical-property support is wide
   enough for 2024. This file tightens the pieces browsers can't infer. */

/* Arabic reads better at slightly looser line-height */
html[dir="rtl"] body,
html[dir="rtl"] p {
  line-height: 1.75;
}

/* Heading tuning for Arabic — font-family comes from mabrook.css's
   --font-h variable (Rubik). Keep letter-spacing/weight tweaks here. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .hero h1,
html[dir="rtl"] [class*="headline"] {
  letter-spacing: 0;            /* Latin tracking looks weird on Arabic */
  font-weight: 800;
}

/* Numbers, prices, brand terms inside Arabic text — keep Latin digits
   LTR so they render as 4.8× not ×4.8 */
html[dir="rtl"] .ltr,
html[dir="rtl"] [data-ltr],
html[dir="rtl"] .price,
html[dir="rtl"] .stars {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* Nav pill chevrons — flip arrow direction */
html[dir="rtl"] .nav-login .chev,
html[dir="rtl"] .nav-primary .chev {
  transform: rotate(0deg);       /* default closed */
}
html[dir="rtl"] .nav-login[aria-expanded="true"] .chev,
html[dir="rtl"] .nav-primary[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

/* Mirror directional arrows that were set as "→" or "←" inside buttons/links.
   Arabic text already flips them visually, but hard-coded SVG arrows in
   dropdowns need explicit mirroring. */
html[dir="rtl"] .ll-arrow,
html[dir="rtl"] .nav-primary svg[stroke],
html[dir="rtl"] .btn-primary svg:last-child,
html[dir="rtl"] .btn svg:last-child,
html[dir="rtl"] [class*="-arrow"] svg {
  transform: scaleX(-1);
}

/* The login/signup dropdown menus anchor right:0 in LTR — flip for RTL */
html[dir="rtl"] .nav-login-menu,
html[dir="rtl"] .nav-signup-menu {
  right: auto;
  left: 0;
  transform-origin: top left;
}
html[dir="rtl"] .nav-login-menu.open,
html[dir="rtl"] .nav-signup-menu.open {
  transform: translateY(0) scale(1);
}

/* Floating cards around the hero phone were absolutely positioned left/right;
   swap them for visual parity in RTL. */
html[dir="rtl"] .float-card-1 { left: auto; right: -8%; }
html[dir="rtl"] .float-card-2 { left: -6%; right: auto; }
html[dir="rtl"] .float-card-3 { left: -10%; right: auto; }
@media (max-width: 1024px) {
  html[dir="rtl"] .float-card-1 { left: auto; right: 0; }
  html[dir="rtl"] .float-card-2 { left: 0; right: auto; }
  html[dir="rtl"] .float-card-3 { left: 2%; right: auto; top: 55%; }
}
@media (max-width: 640px) {
  html[dir="rtl"] .float-card-1 { left: auto; right: -3%; }
  html[dir="rtl"] .float-card-3 { display: none; }
}

/* Marquees in RTL — both strips need to render and animate IDENTICALLY
   to the English version. Two things had to be fixed:

   1) Force the marquee containers + their tracks back to LTR. With the
      page in RTL, a flex track with width:max-content gets aligned to
      the right edge of its parent — so the visible portion of a track
      that's 5×wider than the viewport ends up empty/off-screen on the
      LEFT (which is the visible window). Forcing direction:ltr puts
      the track back at the left edge so the first card is visible.

   2) Reverse animation-direction so the visual motion goes
      left → right (items enter from the LEFT, exit on the RIGHT) per
      the user's request. The underlying keyframe is translateX(-50%)
      which browsers don't auto-mirror for RTL. */
html[dir="rtl"] .marquee,
html[dir="rtl"] .work-marquee,
html[dir="rtl"] .marquee-track,
html[dir="rtl"] .work-track {
  direction: ltr;
}
html[dir="rtl"] .marquee-track,
html[dir="rtl"] .work-track {
  animation-direction: reverse;
}

/* Avatar stack marches leftward in LTR via negative margin-left on
   subsequent avatars; mirror to negative margin-right in RTL. */
html[dir="rtl"] .avatar-stack .av {
  margin-left: 0;
  margin-right: -10px;
}
html[dir="rtl"] .avatar-stack .av:first-child {
  margin-right: 0;
}

/* Burger menu sits on the right in LTR; keep it on the leading edge (left)
   in RTL. Native flex handles this via flex-direction row, but our button
   is nested. */
html[dir="rtl"] .nav-cta {
  flex-direction: row;           /* already default; explicit for safety */
}

/* The language-switcher pill itself. Rendered inline next to the login
   button. Visual tuning only — link behaviour is in the script. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.9rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  transition: background 0.15s ease;
  cursor: pointer;
  font-family: inherit;
}
.lang-switch:hover { background: rgba(255, 255, 255, 0.85); }
.lang-switch svg { width: 14px; height: 14px; color: var(--green); flex-shrink: 0; }
@media (max-width: 768px) { .lang-switch { padding: .42rem .7rem; font-size: .74rem; gap: .25rem; } .lang-switch svg { width: 12px; height: 12px; } }

/* Inside the mobile menu, the language switcher is a stacked button */
.mob-lang-switch {
  display: block;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dark);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: 0.5rem;
}

/* Text alignment for narrow containers that were left-aligned via inline
   style in the source (e.g. columns in legal pages). Without !important
   these would still win over RTL flow. */
html[dir="rtl"] [style*="text-align: left"] {
  text-align: start !important;
}
html[dir="rtl"] [style*="text-align:left"] {
  text-align: start !important;
}

/* Preserve intended right alignment for specific components */
html[dir="rtl"] [style*="text-align: right"],
html[dir="rtl"] [style*="text-align:right"] {
  text-align: end !important;
}

/* Loading Tajawal from Google Fonts so it's available everywhere */
@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Cairo:wght@400;600;700;800&display=swap");