/* =========================================================
   Fara7i — Arabic / RTL styles
   Loaded on every page; most rules are gated behind [lang=ar]
   or html.lang-ar so the English layout is untouched.
   ========================================================= */

/* ---------- Language pill (end of category pills row) ---------- */
/* Flag SVG is the background; the label sits on top with a soft shadow
   for contrast against the flag's mid-tones. */
.pill-lang {
  margin-inline-start: 8px;
  padding-inline-start: 16px;
  padding-inline-end: 16px;
  color: #fff;
  border: 1px solid var(--brass, #C29B63);
  font-weight: 700;
  letter-spacing: 0.5px;
  background-size: cover;
  background-position: center;
  background-color: #2A2520; /* fallback if SVG fails */
  transition: all 0.2s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
/* Egypt flag = Arabic pill */
.pill-lang.pill-lang--ar {
  background-image: url("/flags/egypt.svg");
}
.pill-lang.pill-lang--ar .pill-lang__label {
  font-family: "Noto Naskh Arabic", "Cairo", "Segoe UI", sans-serif;
  font-size: 1.1rem;
  line-height: 1;
}
/* UK flag = English pill */
.pill-lang.pill-lang--en {
  background-image: url("/flags/uk.svg");
}
.pill-lang.pill-lang--en .pill-lang__label {
  font-size: 0.9rem;
  letter-spacing: 1px;
}
.pill-lang:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(38, 33, 30, 0.22);
  border-color: var(--brass-light, #EADBC8);
}

/* ---------- Language toggle (all pages) ---------- */
.lang-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;            /* LTR: bottom-left  →  RTL: bottom-right (auto) */
  z-index: 200;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--brass-light, #EADBC8);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  color: var(--brass-dark, #A8814B);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(38, 33, 30, 0.14);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.lang-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--brass, #C29B63);
  box-shadow: 0 10px 24px rgba(38, 33, 30, 0.2);
}

/* ---------- Arabic typography ---------- */
html.lang-ar {
  /* Elegant, high-legibility Arabic stack.
     Noto Naskh Arabic is the premium editorial choice; Cairo is a
     clean fallback. Web-safe (Segoe UI/Tahoma) last. */
  font-family: "Noto Naskh Arabic", "Cairo", "Noto Sans Arabic",
               "Segoe UI", "Tahoma", serif;
}

/* Arabic text reads best slightly larger and with more line-height. */
html.lang-ar body {
  font-size: 1.02rem;
}

/* Reset Latin-optimised letter-spacing / text-transform that look
   wrong (and can break connected letters) in Arabic. */
html.lang-ar .badge,
html.lang-ar .pill,
html.lang-ar .btn,
html.lang-ar .btn-gold,
html.lang-ar .lang-toggle {
  letter-spacing: 0;
  text-transform: none;
}

/* Headings: a touch more breathing room for Arabic curves. */
html.lang-ar h1,
html.lang-ar h2,
html.lang-ar h3 {
  letter-spacing: 0;
}

/* Naskh Arabic wants generous line-height so descenders/ascenders
   never collide across lines. */
html.lang-ar .card-desc,
html.lang-ar .tagline,
html.lang-ar .modal-sub,
html.lang-ar p {
  line-height: 1.9;
}

/* Numerals: keep Latin digits but render them in an Arabic-friendly
   proportional face so they sit naturally next to Arabic words. */
html.lang-ar .card-meta,
html.lang-ar .badge,
html.lang-ar .leads-table,
html.lang-ar .vendor-table {
  font-variant-numeric: proportional-nums;
}

/* ---------- Layout niceties for RTL ---------- */
/* The search input / cards keep their centered look; just ensure any
   icon-adjacent labels mirror correctly. */
html.lang-ar .search-wrap input {
  text-align: right;
}

/* Back-link arrow already flipped via the i18n string (← vs →);
   keep the link itself inheriting direction. */
html.lang-ar a.back-link,
html.lang-ar .back-link {
  unicode-bidi: plaintext;
}

/* Tables: keep numbers/phone columns LTR even in an RTL table so
   phone numbers and dates never reverse. */
html.lang-ar td a.link,
html.lang-ar .phone-cell,
html.lang-ar td:nth-child(2) {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Date/phone inputs render LTR in Arabic context. */
html.lang-ar input[type="date"],
html.lang-ar input[type="tel"],
html.lang-ar input[type="email"] {
  direction: ltr;
  text-align: right;
}

/* Modal close button: stays top-outside-corner in both directions. */
html.lang-ar .modal-close {
  right: auto;
  left: 18px;
}

/* Ensure the toggle never overlaps content on small screens. */
@media (max-width: 480px) {
  .lang-toggle {
    bottom: 14px;
    left: 14px;
    width: 42px;
    height: 42px;
  }
}