/* ==========================================================================
   NEXORA — RTL (Right-to-Left) Stylesheet
   --------------------------------------------------------------------------
   This file ONLY contains overrides that are needed IN ADDITION to the base
   stylesheet (css/style.css) when <html dir="rtl"> is active (Arabic mode,
   toggled by the EN/AR switch in the navbar — see js/i18n.js).

   WHY THIS WORKS WITH ALMOST NO DUPLICATION
   Most of Nexora's layout already mirrors automatically once `dir="rtl"` is
   set on <html>, because:
     - Flexbox's `row` main axis follows the element's writing direction, so
       nav links, button icon+label pairs, cards, and form rows reverse
       visually for free (CSS spec behavior, no JS required).
     - CSS Grid auto-placement also follows direction, so feature/pricing/
       step grids reorder correctly on their own.
     - `.container` and a few helpers already use logical `margin-inline`.

   What's left — and what this file covers — are the handful of places that
   use **physical** properties (left/right, translateX, absolute/fixed
   positioning) which CSS direction cannot flip automatically, plus a few
   intentional UX decisions (see inline comments).

   Load order: style.css → rtl.css (this file) → any page-specific styles.
   This file must be loaded AFTER style.css so its rules win on equal
   specificity for [dir="rtl"] selectors.

   TABLE OF CONTENTS
     1. Typography (Arabic-friendly font stack)
     2. Header, Navigation & Mobile Menu
     3. Language Switch Control
     4. Hero Section & Decorative Glows
     5. Buttons & Directional Icons
     6. Pricing Toggle Switch
     7. Pricing Cards & Comparison Table
     8. Testimonial Slider (forced-LTR-track technique)
     9. FAQ / Accordion
    10. Forms & Contact Page
    11. Blog Cards & Article
    12. Documentation Layout
    13. Code Blocks & Folder Tree (kept LTR intentionally)
    14. Steps / Workflow Connectors
    15. Footer & Back-to-top
    16. Admin Dashboard & Settings
    17. AI Playground (chat, sidebar, range input)
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. Typography — Arabic-friendly font stack
   Tajawal/Cairo are loaded via Google Fonts in each page's <head> and
   provide full Arabic glyph coverage with a geometric look consistent
   with Inter/Space Grotesk used in the LTR version.
   ---------------------------------------------------------------------- */
[dir="rtl"] body {
  font-family: "Tajawal", "Inter", -apple-system, sans-serif;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .eyebrow, [dir="rtl"] .btn, [dir="rtl"] .logo-cloud-grid .brand-mark {
  font-family: "Cairo", "Space Grotesk", "Tajawal", sans-serif;
  letter-spacing: 0; /* Latin letter-spacing values look cramped/broken on Arabic glyphs */
}

/* ----------------------------------------------------------------------
   2. Header, Navigation & Mobile Menu
   ---------------------------------------------------------------------- */
[dir="rtl"] .skip-link {
  left: auto;
  right: 1rem;
}

/* The off-canvas mobile menu should slide in from the leading edge (the
   right side in RTL) instead of the LTR default (right-to-left sliding
   from the right translates to left-to-right sliding from the left). */
[dir="rtl"] .mobile-menu {
  transform: translateX(-100%);
}
[dir="rtl"] .mobile-menu.is-open {
  transform: translateX(0);
}

/* nav-dropdown is centered under its parent (left:50% + translateX(-50%))
   so no horizontal override is required — it stays perfectly centered
   regardless of direction. Only the hamburger icon stroke animation is
   symmetric and needs no change either. */

/* ----------------------------------------------------------------------
   3. Language Switch Control
   (Base visual styles live in css/style.css; this just confirms the
   pill group reverses automatically via flexbox row-reversal — included
   here only for documentation completeness, no override required.)
   ---------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
   4. Hero Section & Decorative Glows
   Ambient blurred glows use inline styles for per-page placement, which
   beats external CSS specificity — `!important` is intentionally used
   here ONLY for these purely decorative, non-semantic background blobs.
   ---------------------------------------------------------------------- */
[dir="rtl"] .hero .bg-glow.cyan {
  left: auto !important;
  right: -120px !important;
}
[dir="rtl"] .hero .bg-glow.purple {
  right: auto !important;
  left: -160px !important;
}
[dir="rtl"] .page-header .bg-glow.cyan {
  left: auto !important;
  right: -100px !important;
}
[dir="rtl"] .page-header .bg-glow.purple {
  right: auto !important;
  left: -120px !important;
}
[dir="rtl"] .cta-section .bg-glow.cyan {
  left: auto !important;
  right: 10% !important;
}
[dir="rtl"] .cta-section .bg-glow.purple {
  right: auto !important;
  left: 10% !important;
}

/* Floating UI chips attached to the hero chat mockup */
[dir="rtl"] .hero-float-card.card-1 {
  right: auto;
  left: -8%;
}
[dir="rtl"] .hero-float-card.card-2 {
  left: auto;
  right: -8%;
}

/* ----------------------------------------------------------------------
   5. Buttons & Directional Icons
   Mirror "forward/back" glyphs so they still point toward the reading
   direction's start/end. Icons without inherent direction (chevron-down,
   plus/minus, play, check, star, etc.) are intentionally left untouched.
   ---------------------------------------------------------------------- */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-paper-plane {
  display: inline-block;
  transform: scaleX(-1);
}

/* Exception: the testimonial slider's prev/next arrows must keep their
   original orientation because the slider track is intentionally forced
   back to LTR internally (see section 8) so its transform math still
   works — mirroring these specific icons would point them the wrong way. */
[dir="rtl"] .slider-arrow .fa-chevron-left,
[dir="rtl"] .slider-arrow .fa-chevron-right {
  transform: none;
}

/* ----------------------------------------------------------------------
   6. Pricing Toggle Switch
   ---------------------------------------------------------------------- */
[dir="rtl"] .switch .switch-knob {
  left: auto;
  right: 3px;
}
[dir="rtl"] .switch[aria-checked="true"] .switch-knob {
  transform: translateX(-26px);
}

/* ----------------------------------------------------------------------
   7. Pricing Cards & Comparison Table
   ---------------------------------------------------------------------- */
[dir="rtl"] .comparison-table th:first-child,
[dir="rtl"] .comparison-table td:first-child {
  text-align: right;
}
[dir="rtl"] .comparison-table .row-group-title td {
  text-align: right;
}
[dir="rtl"] .popular-badge {
  /* Centered via left:50%/translateX(-50%) — stays centered, no change. */
}

/* ----------------------------------------------------------------------
   8. Testimonial Slider — forced-LTR-track technique
   The carousel's JavaScript moves the track with `translateX(-n * 100%)`.
   Rather than rewriting the slider math per-direction, we keep the TRACK
   itself locked to LTR (so the existing transform keeps working exactly
   as authored) while letting each SLIDE's inner content render in RTL —
   this is a standard, low-risk pattern for localizing JS carousels.
   ---------------------------------------------------------------------- */
[dir="rtl"] .testimonial-track {
  direction: ltr;
}
[dir="rtl"] .testimonial-slide {
  direction: rtl;
}

/* ----------------------------------------------------------------------
   9. FAQ / Accordion
   The plus/minus icon is drawn with centered pseudo-elements (left:0 and
   left:50%, both measured from the icon's own box) so it is already
   symmetric and requires no RTL override.
   ---------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
   10. Forms & Contact Page
   ---------------------------------------------------------------------- */
[dir="rtl"] .form-group .success-check {
  right: auto;
  left: 1rem;
}
[dir="rtl"] .checkbox-row {
  /* Flex row already reverses automatically: checkbox moves to the
     trailing (right) edge with the label text flowing from it, which
     matches standard RTL form conventions. No override needed. */
}

/* ----------------------------------------------------------------------
   11. Blog Cards & Article
   ---------------------------------------------------------------------- */
[dir="rtl"] .blog-card-category {
  left: auto;
  right: 1rem;
}
[dir="rtl"] .article-content blockquote {
  border-left: none;
  border-right: 3px solid var(--accent-cyan);
  padding: 0.5rem 1.4rem 0.5rem 0;
}

/* ----------------------------------------------------------------------
   12. Documentation Layout
   ---------------------------------------------------------------------- */
[dir="rtl"] .docs-sidebar-inner {
  padding-right: 0;
  padding-left: 0.5rem;
}

/* ----------------------------------------------------------------------
   13. Code Blocks & Folder Tree — intentionally kept LTR
   Source code, file paths, and CLI commands are conventionally displayed
   left-to-right even on RTL sites (mirrors GitHub, MDN, Arabic dev blogs)
   because code syntax itself is LTR regardless of surrounding UI language.
   ---------------------------------------------------------------------- */
[dir="rtl"] pre,
[dir="rtl"] code,
[dir="rtl"] .folder-tree,
[dir="rtl"] .mock-console {
  direction: ltr;
  text-align: left;
}
[dir="rtl"] .docs-content pre,
[dir="rtl"] .article-content pre {
  direction: ltr;
}

/* ----------------------------------------------------------------------
   14. Steps / Workflow Connectors
   CSS Grid auto-placement already reverses item order under dir="rtl",
   so the connector line must move from the card's trailing (now left)
   edge to keep pointing toward the next card in reading order.
   ---------------------------------------------------------------------- */
@media (min-width: 1100px) {
  [dir="rtl"] .step-card:not(:last-child)::after {
    right: auto;
    left: -1.15rem;
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
  }
}

/* ----------------------------------------------------------------------
   15. Footer & Back-to-top
   ---------------------------------------------------------------------- */
[dir="rtl"] .back-to-top {
  right: auto;
  left: 2rem;
}
[dir="rtl"] .code-copy-btn {
  right: auto;
  left: 0.7rem;
}

/* ----------------------------------------------------------------------
   16. Admin Dashboard & Settings
   The admin sidebar is fixed to the leading edge of the screen — the
   left in LTR, the right in RTL — with the main content area's margin
   flipped to match. See css/admin.css for the base (LTR) declarations.
   ---------------------------------------------------------------------- */
[dir="rtl"] .admin-sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--border-subtle);
}
[dir="rtl"] .admin-main {
  margin-left: 0;
  margin-right: 272px;
}
[dir="rtl"] .admin-nav-link {
  border-left: none;
}
[dir="rtl"] .admin-nav-link.is-active {
  border-right: 3px solid var(--accent-cyan);
  border-left: none;
}
[dir="rtl"] .api-key-field .toggle-visibility-btn {
  right: auto;
  left: 0.6rem;
}
[dir="rtl"] .admin-stat-card .stat-trend i {
  transform: scaleX(-1);
}

@media (max-width: 991.98px) {
  [dir="rtl"] .admin-sidebar {
    transform: translateX(100%);
  }
  [dir="rtl"] .admin-sidebar.is-open {
    transform: translateX(0);
  }
  [dir="rtl"] .admin-main {
    margin-right: 0;
  }
}

/* ----------------------------------------------------------------------
   17. AI Playground — chat bubbles, sidebar, range input
   .chat-msg.from-user already uses `flex-direction: row-reverse` to push
   the user's avatar to the trailing edge in LTR. Under RTL, flexbox's
   row axis itself reverses, so from-user AND from-ai both naturally end
   up correctly aligned with zero extra CSS — verified visually in both
   directions. Only the native <input type="range"> thumb direction and
   icon-only buttons need an explicit nudge in some browsers.
   ---------------------------------------------------------------------- */
[dir="rtl"] input[type="range"] {
  direction: ltr;
  /* Keep the slider track LTR so "0" stays visually on the start side and
     the thumb drag gesture feels natural — common convention even on RTL
     sites (matches native OS volume/brightness sliders). */
}
[dir="rtl"] .btn-send i,
[dir="rtl"] .playground-mode-tabs {
  /* Flexbox row-reversal handles icon + tab order automatically; no
     override needed. Documented here for completeness. */
}