/* =====================================================================
   arabic.css  –  RTL / Arabic landing-page overrides for WiseBot
   ---------------------------------------------------------------------
   • 1️⃣  Import the original LTR theme (styles.css)
   • 2️⃣  Apply global RTL direction + Tajawal font
   • 3️⃣  Override paddings / alignments / mirroring where required
   ==================================================================== */

/* 1️⃣  Bring in the existing English styles first */
@import url('styles.css');

/* 2️⃣  Page-wide RTL + Arabic typography -------------------------------- */
html[lang="ar"],
html[dir="rtl"],
body[lang="ar"],
body[dir="rtl"]{
  direction: rtl;
  font-family: "Tajawal", system-ui, sans-serif;
}

/* Generic text-alignment fall-backs (only if authors forgot to flip) */
html[dir="rtl"] .text-left   { text-align: right !important; }
html[dir="rtl"] .text-right  { text-align: right !important; }
html[dir="rtl"] .text-center { text-align: center !important; }

/* 3️⃣  Component-level tweaks ------------------------------------------ */

/* ── Navbar links & buttons (padding mirror) ─────────────────────────── */
html[dir="rtl"] .nav-link       { padding-right: 0; padding-left : .5rem; }
html[dir="rtl"] .nav-btn,
html[dir="rtl"] .btn-ghost,
html[dir="rtl"] .cta-btn        { padding-left : 1.25rem; padding-right:1.25rem; }

/* Language-switch flag (UK emoji 🇬🇧) */
html[dir="rtl"] .lang-flag      { font-size: 1.45rem; line-height: 1; }

/* ── Pills & badges (swap horizontal padding) ────────────────────────── */
html[dir="rtl"] .pill,
html[dir="rtl"] .badge          { padding-left:.85rem; padding-right:.85rem; }

/* ── Cards & glass tiles: right-align text ───────────────────────────── */
html[dir="rtl"] .card-glass,
html[dir="rtl"] .card           { text-align: right; }

/* ── KPI number tiles & stats ────────────────────────────────────────── */
html[dir="rtl"] .stat-tile      { text-align: right; }

/* ── Header layout (match English LTR structure on mobile) ───────────── */
html[dir="rtl"] #nav{
  direction: ltr;               /* keep order brand → language pill → burger */
  flex-direction: row;
  justify-content: space-between;
  gap: 1.5rem;
}
html[dir="rtl"] #nav nav{
  direction: rtl;               /* preserve RTL reading inside desktop nav */
  text-align: right;
  margin-inline-start: auto;
}
html[dir="rtl"] #nav .lang-switch{
  direction: ltr;               /* flag then label */
}
html[dir="rtl"] #mobile-menu{
  direction: rtl;
  text-align: right;
}
html[dir="rtl"] #mobile-menu a{
  justify-content: flex-end;
}

/* ── Ordered steps in “How it Works” (centre stays fine) ─────────────── */
html[dir="rtl"] .step-circle    { /* already centered – no change needed */ }

/* ── Integration tech pills (ensure nowrap RTL) ──────────────────────── */
html[dir="rtl"] .integration-pill{ white-space: nowrap; }

/* ── Chat widget input cursor RTL (widget keeps its own CSS) ─────────── */
html[dir="rtl"] .widget-shell .chat-input{ text-align: right; }

/* Utility helpers to hide/show language-specific elements -------------- */
html:not([dir="rtl"]) .rtl-only { display:none !important; }
html[dir="rtl"]        .ltr-only { display:none !important; }