/* =============================================================
   rtl.css — Right-to-Left Language Support
   Loaded ONLY for: Arabic (ar), Urdu (ur)
   Loaded AFTER app.css so all rules here win.
   Uses !important to beat Tailwind utilities & inline styles.
   ============================================================= */

/* =============================================================
   FONTS — per language
   ============================================================= */
/* ── URDU FONTS ──────────────────────────────────────────── */

/* Urdu body text: Noto Nastaliq Urdu — authentic Nastaliq */
[lang="ur"] p,
[lang="ur"] li,
[lang="ur"] blockquote,
[lang="ur"] label,
[lang="ur"] summary,
[lang="ur"] td, [lang="ur"] th {
  font-family: 'Noto Nastaliq Urdu', serif !important;
  line-height: 2.0 !important;
  letter-spacing: 0 !important;
}

/* Urdu inline text (span, a) — Nastaliq but compact line-height */
[lang="ur"] span:not(.fa-solid):not(.fa-brands):not(.fa-regular):not([class*="absolute"]),
[lang="ur"] a {
  font-family: 'Noto Nastaliq Urdu', serif !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}

/* Urdu headings: Gulzar — elegant calligraphic display */
[lang="ur"] h1,
[lang="ur"] h2,
[lang="ur"] h3,
[lang="ur"] h4,
[lang="ur"] h5,
[lang="ur"] h6 {
  font-family: 'Gulzar', serif !important;
  line-height: 1.8 !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}

/* ── ARABIC FONTS ────────────────────────────────────────── */

/* Arabic body text: Cairo — clean, modern, highly readable */
[lang="ar"] p,
[lang="ar"] li,
[lang="ar"] blockquote,
[lang="ar"] label,
[lang="ar"] summary,
[lang="ar"] td, [lang="ar"] th {
  font-family: 'Cairo', sans-serif !important;
  line-height: 1.9 !important;
  letter-spacing: 0 !important;
}

/* Arabic inline text */
[lang="ar"] span:not(.fa-solid):not(.fa-brands):not(.fa-regular):not([class*="absolute"]),
[lang="ar"] a {
  font-family: 'Cairo', sans-serif !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

/* Arabic headings: Amiri — classical, authoritative serif */
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] h5,
[lang="ar"] h6 {
  font-family: 'Amiri', serif !important;
  line-height: 1.8 !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}

/* ── SHARED EXCLUSIONS ───────────────────────────────────── */

/* Logo link — keep Inter/default, no Nastaliq on logo text */
[lang="ur"] header a.group,
[lang="ur"] header a.group span,
[lang="ar"] header a.group,
[lang="ar"] header a.group span {
  font-family: inherit !important;
  line-height: 1 !important;
}

/* Navbar links — compact line-height */
[lang="ur"] nav a,
[lang="ar"] nav a {
  line-height: 1.3 !important;
}

/* Platform pill name labels — compact, not full Nastaliq spacing */
[lang="ur"] .nd-platform-nav a span,
[lang="ar"] .nd-platform-nav a span {
  line-height: 1.3 !important;
}

/* Buttons — compact */
[lang="ur"] button,
[lang="ar"] button {
  font-family: 'Noto Nastaliq Urdu', serif !important;
  line-height: 1.5 !important;
}
[lang="ar"] button {
  font-family: 'Cairo', sans-serif !important;
}

/* FontAwesome icons — must stay on FA font family */
[lang="ur"] .fa-solid, [lang="ur"] .fa-brands, [lang="ur"] .fa-regular,
[lang="ar"] .fa-solid, [lang="ar"] .fa-brands, [lang="ar"] .fa-regular {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands' !important;
  line-height: 1 !important;
}

/* URL inputs — always Inter for Latin text */
[lang="ur"] input[type="text"], [lang="ur"] input[type="url"],
[lang="ar"] input[type="text"], [lang="ar"] input[type="url"] {
  font-family: 'Inter', sans-serif !important;
  line-height: 1.5 !important;
}


/* ── 1. Root direction ────────────────────────────────────── */
[dir="rtl"] body {
  direction: rtl;
  /* text-align NOT set on body — English text stays natural */
}

/* ── 2. Prose text → right-aligned (excludes centered elements) ─ */
[dir="rtl"] p,
[dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] li,
[dir="rtl"] blockquote,
[dir="rtl"] label,
[dir="rtl"] td, [dir="rtl"] th {
  text-align: right !important;
  direction: rtl !important;
}

/* h1 only right-aligned when NOT inside a text-center container */
[dir="rtl"] h1 {
  direction: rtl !important;
}

/* ── 3. Section headings + paragraphs ─────────────────────── */
[dir="rtl"] section h2,
[dir="rtl"] section h3,
[dir="rtl"] section p {
  text-align: right !important;
  direction: rtl !important;
}

/* ── 4. Spans carrying translated text ───────────────────── */
[dir="rtl"] span:not(.fa-solid):not(.fa-brands):not(.fa-regular):not(.fa-light) {
  direction: rtl;
  unicode-bidi: embed;
}

/* =============================================================
   NAVBAR / HEADER
   Rule: Outer layout (logo left ↔ hamburger right) stays LTR.
         Nav link rows flip icon+text order via row-reverse.
   ============================================================= */

/* Header outer shell — keep LTR column layout */
[dir="rtl"] header > div,
[dir="rtl"] header .flex.items-center.justify-between {
  direction: ltr !important;
}

/* Desktop nav link rows — icon right, text left in RTL reading order */
/* IMPORTANT: only target inline-flex links (header nav).
   DO NOT use 'nav a.flex' — it also matches platform pills (flex flex-col)! */
[dir="rtl"] nav a.inline-flex,
[dir="rtl"] header nav a.inline-flex {
  flex-direction: row-reverse !important;
  direction: rtl !important;
  text-align: right !important;
}

/* Platform pills — ALWAYS flex-col (icon top, name bottom) in all languages */
[dir="rtl"] nav a.flex-col,
[dir="rtl"] nav a[class*="flex-col"] {
  flex-direction: column !important;
  align-items: center !important;
}
/* Platform pill name span — always centered below icon */
[dir="rtl"] nav a.flex-col span,
[dir="rtl"] nav a[class*="flex-col"] span {
  text-align: center !important;
  direction: ltr !important; /* platform names are always Latin */
}

/* Mobile menu nav link rows: same flip */
[dir="rtl"] #mobile-menu nav a.flex {
  flex-direction: row-reverse !important;
  direction: rtl !important;
  text-align: right !important;
}

/* Language switcher button — keep LTR (flag → code → chevron) */
[dir="rtl"] #lang-switcher-btn {
  flex-direction: row !important; /* keep flag-left layout */
}

/* Language dropdown rows — keep flag-left, text-right */
[dir="rtl"] #lang-dropdown a.flex {
  flex-direction: row !important;
  direction: rtl !important;
}
[dir="rtl"] #lang-dropdown a.flex span.flex-1 {
  text-align: right !important;
}

/* Nav / header icon spacing for RTL */
[dir="rtl"] nav a .fa-solid,
[dir="rtl"] nav a .fa-brands,
[dir="rtl"] #mobile-menu a .fa-solid,
[dir="rtl"] #mobile-menu a .fa-brands {
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}

/* =============================================================
   FOOTER — RTL layout
   rtl.css loads ONLY for RTL pages, no [dir="rtl"] prefix needed.
   ============================================================= */

/* All footer list links: icon on RIGHT, text on LEFT */
footer ul a {
  flex-direction: row-reverse !important;
}

/* Footer text content: right-aligned */
footer ul li,
footer ul a,
footer .ndfoot-grid > div > p {
  text-align: right !important;
  direction: rtl !important;
}

/* Logo link — KEEP LTR: logo-icon LEFT, "Video City" text right of it */
footer .ndfoot-brand a {
  flex-direction: row !important;
  direction: ltr !important;
}
footer .ndfoot-brand a span {
  direction: ltr !important;
  text-align: left !important;
}
/* Tagline below logo */
footer .ndfoot-brand > p {
  text-align: right !important;
  direction: rtl !important;
}


/* =============================================================
   STATS CARDS (6+ Platforms, Free, Languages, 4K)
   Always centered — these are numeric badges, not prose.
   ============================================================= */
[dir="rtl"] .theme-form-root [style*="text-align:center"] p,
[dir="rtl"] [style*="text-align:center"] {
  text-align: center !important;
}


/* =============================================================
   FAQ ACCORDION — override inline styles
   ============================================================= */
[dir="rtl"] #faq h2 {
  flex-direction: row-reverse !important;
  text-align: right !important;
  direction: rtl !important;
}

[dir="rtl"] #faq details summary {
  flex-direction: row-reverse !important;
  text-align: right !important;
  direction: rtl !important;
}

[dir="rtl"] #faq details summary span {
  text-align: right !important;
  direction: rtl !important;
  flex: 1 !important;
}

[dir="rtl"] #faq details > div {
  text-align: right !important;
  direction: rtl !important;
  padding-right: 18px !important;
  padding-left: 18px !important;
}

/* =============================================================
   GRID — containers stay LTR, cells go RTL
   ============================================================= */
[dir="rtl"] .grid { direction: ltr !important; }
[dir="rtl"] .grid > * { direction: rtl !important; }

/* =============================================================
   HERO / MAIN FORM SECTION
   ============================================================= */
[dir="rtl"] #hero h1,
[dir="rtl"] #hero p,
[dir="rtl"] #hero span:not(.fa-solid) {
  text-align: right !important;
  direction: rtl !important;
}

/* Platform bento description text */
[dir="rtl"] .platform-bento h3,
[dir="rtl"] .platform-bento p,
[dir="rtl"] .platform-bento span { text-align: right !important; }

/* =============================================================
   HOW IT WORKS / FEATURES / GUIDE SECTIONS
   ============================================================= */
[dir="rtl"] .nd-guide-section h2,
[dir="rtl"] .nd-guide-section h3,
[dir="rtl"] .nd-guide-section p { text-align: right !important; direction: rtl !important; }

[dir="rtl"] .nd-step-card p,
[dir="rtl"] .nd-step-card h3 { text-align: right !important; direction: rtl !important; }

/* Feature cards with flex icon+text rows */
[dir="rtl"] [class*="feature"] .flex.items-center,
[dir="rtl"] [class*="step"] .flex.items-center {
  flex-direction: row-reverse !important;
}
[dir="rtl"] [class*="feature"] h3,
[dir="rtl"] [class*="feature"] p { text-align: right !important; direction: rtl !important; }

/* =============================================================
   DOWNLOAD FORMAT CARDS
   ============================================================= */
[dir="rtl"] .nd-format-card { text-align: right !important; }
[dir="rtl"] .nd-format-card p,
[dir="rtl"] .nd-format-card span { text-align: right !important; direction: rtl !important; }

/* =============================================================
   LEGAL / GUIDE BODY TEXT
   ============================================================= */
[dir="rtl"] .legal-body h2,
[dir="rtl"] .legal-body h3,
[dir="rtl"] .legal-body p,
[dir="rtl"] .legal-body li { text-align: right !important; direction: rtl !important; }
[dir="rtl"] .legal-body ul,
[dir="rtl"] .legal-body ol { padding-right: 1.4rem !important; padding-left: 0 !important; }

/* =============================================================
   FORM INPUTS — always LTR for pasting URLs
   ============================================================= */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="email"],
[dir="rtl"] textarea {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: embed;
}

/* =============================================================
   FONTAWESOME ICON SPACING FIX
   In RTL: icon comes AFTER text visually, so reset margins
   and let flex-direction: row-reverse handle placement.
   ============================================================= */
[dir="rtl"] .fa-solid,
[dir="rtl"] .fa-brands,
[dir="rtl"] .fa-regular,
[dir="rtl"] .fa-light {
  margin-inline-start: 0.4em !important;
  margin-inline-end: 0 !important;
}

/* Icon inside flex-row-reverse containers needs the opposite */
[dir="rtl"] [style*="flex-direction:row-reverse"] .fa-solid,
[dir="rtl"] [style*="flex-direction: row-reverse"] .fa-solid,
[dir="rtl"] .flex.flex-row-reverse .fa-solid {
  margin-inline-start: 0 !important;
  margin-inline-end: 0.4em !important;
}

/* =============================================================
   UTILITY OVERRIDES
   ============================================================= */

/* text-center elements + ALL their children stay centered */
[dir="rtl"] .text-center,
[dir="rtl"] .text-center h1,
[dir="rtl"] .text-center h2,
[dir="rtl"] .text-center h3,
[dir="rtl"] .text-center p,
[dir="rtl"] .text-center span:not(.fa-solid):not(.fa-brands) {
  text-align: center !important;
}

/* Logo anchor — always LTR (logo left, text right of it) */
[dir="rtl"] header a.group {
  direction: ltr !important;
  flex-direction: row !important;
}
[dir="rtl"] header a.group span,
[dir="rtl"] header a.group div {
  direction: ltr !important;
  text-align: left !important;
}

/* Scroll margin for anchor links */
[dir="rtl"] [id] { scroll-margin-top: 6rem; }

/* List bullets on right side */
[dir="rtl"] ul, [dir="rtl"] ol {
  padding-right: 1.25rem;
  padding-left: 0;
}