/* Al-SQR Express — Language toggle & RTL overrides */

/* ─── Arabic font ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

/* ─── Language toggle button ─────────────────────────────────────────── */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--navy-800);
  border: 1.5px solid var(--navy-800);
  padding: 8px 13px;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  transition: all .18s ease;
  letter-spacing: .06em;
  white-space: nowrap;
}
.lang-toggle:hover {
  background: var(--navy-800);
  color: #fff;
}
.lang-toggle .lt-sep {
  opacity: .35;
  font-weight: 300;
  margin: 0 2px;
}
.lang-toggle [data-lang-opt] {
  transition: color .18s;
}
.lang-toggle [data-lang-opt].active {
  color: var(--amber-500);
}
.lang-toggle:hover [data-lang-opt].active {
  color: var(--amber-400);
}

/* ─── RTL global overrides ───────────────────────────────────────────── */
/*
  IMPORTANT: html[dir="rtl"] cascades direction:rtl to every child element.
  Flex containers with flex-direction:row already flow right-to-left by
  default once direction:rtl is inherited — no flex-direction:row-reverse
  needed (that would double-reverse back to LTR). Only absolute positions,
  explicit text-align values, indentation, and font need explicit overrides.
*/

html[dir="rtl"] {
  --display: 'Cairo', sans-serif;
  --body: 'Cairo', sans-serif;
}

html[dir="rtl"] body {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
  font-family: 'Cairo', sans-serif;
  font-stretch: normal;
  letter-spacing: 0;
  line-height: 1.3;
}

html[dir="rtl"] .eyebrow {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
  /* direction:rtl naturally places ::before on the right — no row-reverse needed */
}

/* mono font override for Arabic context */
html[dir="rtl"] .nav-track,
html[dir="rtl"] .lang-toggle,
html[dir="rtl"] .waybill-top .wb-label,
html[dir="rtl"] .waybill-top .wb-id,
html[dir="rtl"] .track-form input,
html[dir="rtl"] .eyebrow {
  font-family: 'Cairo', sans-serif;
}

/* nav underline: anchor to right side in RTL */
html[dir="rtl"] .nav-links a::after {
  left: auto;
  right: 0;
}

/* section-head */
html[dir="rtl"] .section-head {
  text-align: right;
}

/* about float badge position in RTL */
html[dir="rtl"] .ind-visual .float {
  left: auto;
  right: -14px;
}

/* contact info cards */
html[dir="rtl"] .cinfo {
  text-align: right;
}

/* foot-brand */
html[dir="rtl"] .foot-brand {
  text-align: right;
}

/* foot-main */
html[dir="rtl"] .foot-main {
  text-align: right;
}

/* foot-col ul — reset default left padding */
html[dir="rtl"] .foot-col ul {
  padding-right: 0;
}

/* foot contact text alignment */
html[dir="rtl"] .foot-contact li {
  text-align: right;
}

/* thelp */
html[dir="rtl"] .thelp {
  text-align: right;
}
html[dir="rtl"] .thelp .hi {
  margin: 0 auto 14px;
}

/* tracking timeline — swap left/right indentation */
html[dir="rtl"] .tl {
  padding-left: 0;
  padding-right: 10px;
}
html[dir="rtl"] .tl li {
  padding-left: 0;
  padding-right: 34px;
}
html[dir="rtl"] .tl li::before {
  left: auto;
  right: 6px;
}
html[dir="rtl"] .tl .dot {
  left: auto;
  right: 0;
}

/* form labels */
html[dir="rtl"] .field-l {
  text-align: right;
}

/* blog card meta */
html[dir="rtl"] .feat-body {
  text-align: right;
}
html[dir="rtl"] .blog-body {
  text-align: right;
}

/* why-band inner */
html[dir="rtl"] .why-inner {
  text-align: right;
}

/* customs stamp: flip absolute position to left side */
html[dir="rtl"] .customs-stamp {
  right: auto;
  left: -30px;
}

/* vm-grid */
html[dir="rtl"] .vm-card {
  text-align: right;
}

/* value-grid */
html[dir="rtl"] .value {
  text-align: right;
}

/* detail / article layouts — set explicit direction */
html[dir="rtl"] .detail-layout,
html[dir="rtl"] .article-layout {
  direction: rtl;
}

/* author card */
html[dir="rtl"] .author-card {
  text-align: right;
}
html[dir="rtl"] .author-card .av {
  margin: 0 auto 12px;
}

/* toc */
html[dir="rtl"] .toc {
  text-align: right;
}

/* Partners marquee — force LTR so translateX(-50%) loop is always left-anchored */
html[dir="rtl"] .marquee {
  direction: ltr;
}

/* Mobile nav RTL */
@media (max-width: 880px) {
  html[dir="rtl"] .nav-links {
    /* keep column, just align text right */
    flex-direction: column;
    text-align: right;
  }
  html[dir="rtl"] .nav-links li {
    text-align: right;
    padding-right: 24px;
    padding-left: 24px;
  }
  html[dir="rtl"] .nav-links a {
    text-align: right;
  }
  html[dir="rtl"] .nav-links a::after {
    right: 0;
    left: auto;
  }
}

/* Reduce font-size slightly for Arabic mono contexts */
html[dir="rtl"] .nav-track {
  font-size: 14px;
  letter-spacing: 0;
}