/* ============================================================
   RTL Override Stylesheet — Smartouch Arabic Site
   Loaded AFTER all other stylesheets on ar/ pages.
   Uses direction: rtl / text-align: right overrides only.
   ============================================================ */

/* ── Arabic font ──────────────────────────────────────────── */

/* ── Base direction ───────────────────────────────────────── */
html[lang="ar"],
html[dir="rtl"] {
  direction: rtl;
}

body {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', 'Noto Kufi Arabic', 'DM Sans', sans-serif;
}

/* ── Language switcher pill (RTL overrides) ───────────────── */
.lang-sw {
  margin-right: 0;
  margin-left: 8px;
  font-family: 'DM Sans', sans-serif;
}
.lang-sw-sep {
  opacity: .35;
}

/* ── Nav: flip layout ─────────────────────────────────────── */
.nav {
  flex-direction: row-reverse;
}

/* Nav middle group: flip internal order */
.nm {
  flex-direction: row-reverse;
}

/* Dropdown menu: align to the right */
.ndrop {
  right: 0;
  left: auto;
}

/* Logo link: stays on the visual right for RTL */
.nl {
  order: 3;
}

.nb {
  order: 0;
}

.ham {
  order: 0;
}

/* ── Mobile nav: right-align text ────────────────────────── */
.mob-lk,
.mob-sub-lk,
.mob-ct {
  text-align: right;
}

/* Flip the indent arrow for mobile sub-items */
.mob-sub-indent::before {
  content: '↙ ';
}

/* ── Hero section ─────────────────────────────────────────── */
.hero-in {
  flex-direction: row-reverse;
}

/* Float cards: mirror positions */
.fc.fc-r {
  right: auto;
  left: -48px;
}
.fc.fc-l {
  left: auto;
  right: -48px;
}

/* ── Stat / hero stats ────────────────────────────────────── */
.h-stats,
.stats-in {
  flex-direction: row-reverse;
}

/* ── Bento grid: keep grid layout, flip text ─────────────── */
.bento .bc-row {
  flex-direction: row-reverse;
}

/* ── Product cards ────────────────────────────────────────── */
.prod-card {
  flex-direction: row-reverse;
}
@media (max-width: 860px) {
  .prod-card {
    flex-direction: column;
  }
}

.pc-eye {
  flex-direction: row-reverse;
}

.pc-pills,
.pc-btns,
.mod-strip,
.mc {
  flex-direction: row-reverse;
}

.mc {
  text-align: right;
}

/* ── Footer grid ──────────────────────────────────────────── */
.fg {
  direction: rtl;
  flex-direction: row-reverse;
}

.fl-pdfs {
  flex-direction: row-reverse;
}

.fbot {
  flex-direction: row-reverse;
}

/* ── Section tag "before" line: mirror to left side ──────── */
.sec-tag::before {
  margin-right: 0;
  margin-left: 8px;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.bc-inner {
  flex-direction: row-reverse;
}

/* ── Contact grid ─────────────────────────────────────────── */
.contact-grid {
  flex-direction: row-reverse;
}

.ic-row {
  flex-direction: row-reverse;
  text-align: right;
}

.ql-grid {
  direction: rtl;
}

.ql-item {
  flex-direction: row-reverse;
}

.soc-row {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

/* ── Form fields: align right ─────────────────────────────── */
.field-input,
.field-select,
.field-textarea {
  text-align: right;
  direction: rtl;
}

/* ── Portfolio filters ────────────────────────────────────── */
.filters {
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
}

/* ── Portfolio cards ──────────────────────────────────────── */
.pc-client {
  flex-direction: row-reverse;
}

.pc-foot {
  flex-direction: row-reverse;
}

.pc-tags {
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

/* ── About: VM grid ───────────────────────────────────────── */
.vm-grid {
  flex-direction: row-reverse;
}

/* ── About: goals ─────────────────────────────────────────── */
.goals-grid {
  direction: rtl;
}

/* ── Timeline ─────────────────────────────────────────────── */
.timeline {
  direction: rtl;
}

.tl-item {
  padding-right: 32px;
  padding-left: 0;
  border-right: 2px solid rgba(255,255,255,.08);
  border-left: none;
}

.tl-dot {
  right: -8px;
  left: auto;
}

/* ── Partners grid ────────────────────────────────────────── */
.pgrid {
  direction: rtl;
}

/* ── Client scroll: unchanged (auto-scroll works either way) */

/* ── CTA section ──────────────────────────────────────────── */
.cta-btns {
  flex-direction: row-reverse;
}

/* ── Hero buttons ─────────────────────────────────────────── */
.h-btns,
.hero-btns,
.demo-cta-row,
.pc-btns {
  flex-direction: row-reverse;
}

/* ── Stats pills on hero ──────────────────────────────────── */
.p-stats {
  flex-direction: row-reverse;
}

/* ── Product hero ─────────────────────────────────────────── */
.prod-hero-in {
  flex-direction: row-reverse;
}

/* ── Feature grid ─────────────────────────────────────────── */
.feat-grid {
  direction: rtl;
}

.feat-card {
  text-align: right;
}

/* ── Service hero ─────────────────────────────────────────── */
.svc-hero-in {
  flex-direction: row-reverse;
}

.hero-tags {
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

/* ── Service list items ───────────────────────────────────── */
.svc-item {
  flex-direction: row-reverse;
}

.svc-item > div {
  text-align: right;
}

.si-tags {
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

/* ── Demo credentials ─────────────────────────────────────── */
.demo-cred-row {
  flex-direction: row-reverse;
  text-align: right;
}

/* ── Shots tabs ───────────────────────────────────────────── */
.shots-tabs {
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

/* ── Legal page ───────────────────────────────────────────── */
.legal-in {
  flex-direction: row-reverse;
}

.legal-toc {
  text-align: right;
}

.toc-link {
  text-align: right;
}

.legal-body ul.legal-list {
  padding-right: 20px;
  padding-left: 0;
}

/* ── Module strip (Cenatra) ───────────────────────────────── */
.mod-strip {
  direction: rtl;
}

.mc {
  direction: rtl;
}

/* ── ID card (About) ──────────────────────────────────────── */
.id-row {
  flex-direction: row-reverse;
}

.id-label {
  text-align: right;
}

.id-val {
  text-align: right;
}

/* ── Stats grid (About) ───────────────────────────────────── */
.stats-grid {
  direction: rtl;
}

/* ── Part grid (About partners) ───────────────────────────── */
.part-grid {
  direction: rtl;
}

/* ── Quick links (Contact) ────────────────────────────────── */
.quick-links {
  text-align: right;
}

/* ── Map section ──────────────────────────────────────────── */
.map-inner {
  text-align: right;
}

/* ── Footer link hover colour override ───────────────────── */
.fl {
  text-align: right;
}

/* ── Force RTL on all flex containers that have inline
      flex-direction in the source HTML ───────────────────── */
.h-pill {
  direction: rtl;
}

/* ── Pill dot stays on the left visually (which is "end" in RTL) */
.pdot {
  order: 1;
}

/* ── BC row in bento small cards ─────────────────────────── */
.bc .bc-row {
  flex-direction: row-reverse;
}

/* ── Cenatra module cards in home product section ─────────── */
.mod-strip .mc {
  flex-direction: row-reverse;
}

/* ── Number tags in bento cards stay in place ─────────────── */
.bc-num {
  left: auto;
  right: auto;
}

/* ── Responsive: keep single-column stacks sane on mobile ── */
@media (max-width: 768px) {
  .hero-in,
  .prod-hero-in,
  .svc-hero-in,
  .contact-grid,
  .legal-in {
    flex-direction: column;
  }
  .nav {
    flex-direction: row-reverse;
  }
}