/* ─── RTL Support for Arabic ───────────────────────── */

/* Base */
[dir="rtl"] { text-align: right; }
[dir="rtl"] body { font-family: 'Noto Kufi Arabic', 'Outfit', -apple-system, sans-serif; }

/* ─── Icons: flip arrows, chevrons ─────────────────── */
[dir="rtl"] [data-lucide="arrow-right"],
[dir="rtl"] [data-lucide="chevron-right"],
[dir="rtl"] [data-lucide="chevron-down"],
[dir="rtl"] [data-lucide="arrow-left-right"] { transform: scaleX(-1); }

/* Arrow icons inside buttons */
[dir="rtl"] .btn-primary i,
[dir="rtl"] .btn-secondary i,
[dir="rtl"] .nav-cta i,
[dir="rtl"] .pricing-cta i { transform: scaleX(-1); }

/* ─── Navigation ───────────────────────────────────── */
[dir="rtl"] .nav-logo { flex-direction: row-reverse; }
[dir="rtl"] .nav-dropdown-menu { left: 0; right: auto; transform: none; }
[dir="rtl"] .nav-dropdown-menu-inner { text-align: right; }
[dir="rtl"] .nav-dropdown-item { justify-content: flex-start; }
[dir="rtl"] .nav-link::after { left: auto; right: 0; }
[dir="rtl"] .mobile-menu-btn { order: -1; }
[dir="rtl"] .chevron { margin-left: 0; margin-right: 4px; }

/* ─── Hero ─────────────────────────────────────────── */
/* Homepage hero (.hero-text) is right-aligned in RTL */
[dir="rtl"] .hero-text { text-align: right; }
[dir="rtl"] .hero-text .hero-title { text-align: right; }
[dir="rtl"] .hero-text .hero-subtitle { text-align: right; }
/* Subpage heroes (.hero-content) stay centered in RTL */
[dir="rtl"] .hero-content { direction: rtl; text-align: center; }
[dir="rtl"] .hero-content .hero-title { text-align: center; line-height: 1.4; padding-top: 0.15em; }
[dir="rtl"] .hero-content .hero-subtitle { text-align: center; }
[dir="rtl"] .hero-content .hero-badge { justify-content: center; }
[dir="rtl"] .hero-content .hero-actions { justify-content: center; }
/* Contact hero stays centered */
[dir="rtl"] .contact-hero { text-align: center; }
[dir="rtl"] .contact-hero-title { text-align: center; }
[dir="rtl"] .contact-hero-subtitle { text-align: center; }
/* Blog hero stays centered */
[dir="rtl"] .blog-hero-title { text-align: center; }
/* General */
[dir="rtl"] .hero-actions { flex-direction: row-reverse; }
[dir="rtl"] .hero-stats { flex-direction: row-reverse; }
[dir="rtl"] .hero-badge { flex-direction: row-reverse; }
[dir="rtl"] .hero-title { line-height: 1.4; padding-top: 0.15em; }
[dir="rtl"] .section-title { line-height: 1.4; padding-top: 0.15em; }

/* ─── Buttons ──────────────────────────────────────── */
[dir="rtl"] .btn-primary,
[dir="rtl"] .btn-secondary,
[dir="rtl"] .nav-cta { flex-direction: row-reverse; }
[dir="rtl"] .pricing-cta { text-align: center; }
[dir="rtl"] a[class*="btn-"] { direction: rtl; }

/* ─── Section Headers ──────────────────────────────── */
[dir="rtl"] .section-overline { flex-direction: row-reverse; }
[dir="rtl"] .section-overline::before { order: 1; }
[dir="rtl"] .diff-overline { text-align: right; }
[dir="rtl"] .section-header { text-align: right; }
[dir="rtl"] .section-subtitle { margin-left: auto; margin-right: 0; }

/* Centered sections stay centered */
[dir="rtl"] .modules-section .section-header,
[dir="rtl"] .integrations-section .section-header,
[dir="rtl"] .pricing-section .section-header,
[dir="rtl"] .metrics-section,
[dir="rtl"] .cta-content,
[dir="rtl"] .cta-title,
[dir="rtl"] .cta-subtitle,
[dir="rtl"] .cta-note,
[dir="rtl"] .cta-actions,
[dir="rtl"] .testimonial-card,
[dir="rtl"] .testimonial-text { text-align: center; }

[dir="rtl"] .cta-actions { justify-content: center; }

/* ─── Feature Lists & Bullet Points (ALL patterns) ── */
/* All list containers: align items to right edge */
[dir="rtl"] .feature-list,
[dir="rtl"] .module-features,
[dir="rtl"] .pricing-features,
[dir="rtl"] .report-features,
[dir="rtl"] .split-text ul {
  align-items: flex-start;
  direction: rtl;
}

/* All list items: right-align text, let direction:rtl handle icon order naturally */
[dir="rtl"] .feature-list li,
[dir="rtl"] .module-features li,
[dir="rtl"] .pricing-features li,
[dir="rtl"] .report-features li,
[dir="rtl"] .split-text ul li {
  text-align: right;
}

/* All icons inside list items: don't shrink */
[dir="rtl"] .feature-list li i,
[dir="rtl"] .feature-list li svg,
[dir="rtl"] .feature-list li .check-icon,
[dir="rtl"] .module-features li i,
[dir="rtl"] .module-features li svg,
[dir="rtl"] .pricing-features li i,
[dir="rtl"] .pricing-features li svg,
[dir="rtl"] .report-features li i,
[dir="rtl"] .report-features li svg,
[dir="rtl"] .split-text ul li .check-icon,
[dir="rtl"] .split-text ul li i,
[dir="rtl"] .split-text ul li svg { flex-shrink: 0; }

/* Split text sections (mobile app page) */
[dir="rtl"] .split-text { text-align: right; direction: rtl; }
[dir="rtl"] .split-text h2 { text-align: right; }
[dir="rtl"] .split-text p { text-align: right; }
[dir="rtl"] .split-text .label { text-align: right; }

/* ─── Grid Layouts ─────────────────────────────────── */
[dir="rtl"] .diff-block { direction: rtl; }
[dir="rtl"] .feature-inner { direction: rtl; }
[dir="rtl"] .feature-block { direction: rtl; }
[dir="rtl"] .report-block { direction: rtl; }
[dir="rtl"] .feature-grid { direction: rtl; }
[dir="rtl"] .app-section-inner { direction: rtl; }

/* ─── Module Blocks (01-06) RTL ────────────────────── */
/* CSS grid auto-flips with direction:rtl, but we need to cancel
   the LTR order overrides and re-apply them correctly */
[dir="rtl"] .module-block { direction: rtl; }
@media (min-width: 768px) {
  /* Normal blocks: in LTR text=col1(left) visual=col2(right)
     In RTL with direction:rtl, grid auto-flips: text=col1(right) visual=col2(left) ✓ */
  /* .reverse blocks: in LTR visual has order:-1 to go left
     In RTL we need visual on RIGHT, so reset order and let grid handle it */
  /* Keep alternating layout — order:-1 on .reverse still works in RTL */
}
[dir="rtl"] .module-overline { text-align: right; }
[dir="rtl"] .module-title { text-align: right; }
[dir="rtl"] .module-desc { text-align: right; }
[dir="rtl"] .module-features { text-align: right; }
[dir="rtl"] .module-features li { text-align: right; }
[dir="rtl"] .module-features li i { margin-top: 2px; }

/* Module mock cards RTL */
[dir="rtl"] .module-mock { direction: rtl; }
[dir="rtl"] .module-mock-header { flex-direction: row-reverse; }
[dir="rtl"] .module-mock-body { direction: rtl; text-align: right; }
[dir="rtl"] .module-mock-stat { text-align: right; }
[dir="rtl"] .module-mock-stat-label { text-align: right; }
[dir="rtl"] .module-mock-list-item { flex-direction: row-reverse; }
[dir="rtl"] .module-mock-list-item .name { text-align: right; }

/* Inline flex containers in modules — alert cards, stat rows */
[dir="rtl"] .module-block [style*="display:flex"][style*="align-items:flex-start"] { flex-direction: row-reverse; }
[dir="rtl"] .module-block [style*="display:flex"][style*="gap:12px"]:not([style*="flex-direction:column"]) { flex-direction: row-reverse; }

/* Learn more links */
[dir="rtl"] a[style*="display:inline-flex"] { flex-direction: row-reverse; }

/* ─── Feature Cards ────────────────────────────────── */
[dir="rtl"] .feature-card { text-align: right; }
[dir="rtl"] .feature-card::before { transform-origin: right; }
[dir="rtl"] .feature-card:hover::before { transform-origin: right; }

/* ─── Module Section ───────────────────────────────── */
[dir="rtl"] .module-overline { text-align: right; }
[dir="rtl"] .module-title { text-align: right; }
[dir="rtl"] .module-desc { text-align: right; }

/* ─── Differentiator Sections ──────────────────────── */
[dir="rtl"] .diff-title { text-align: right; }
[dir="rtl"] .diff-desc { text-align: right; }
[dir="rtl"] .diff-quote { flex-direction: row-reverse; text-align: right; }

/* ─── Steps / How It Works ─────────────────────────── */
[dir="rtl"] .step-card { text-align: right; }
[dir="rtl"] .steps-grid { direction: rtl; }

/* ─── Metrics ──────────────────────────────────────── */
[dir="rtl"] .metric-card { text-align: center; }
[dir="rtl"] .metrics-grid { direction: rtl; }

/* ─── Alert Notification Cards ─────────────────────── */
[dir="rtl"] .diff-visual [style*="gap:12px"] { flex-direction: row-reverse; text-align: right; }
/* Alert cards: keep border on left side only, no flip */
[dir="rtl"] .diff-visual [style*="border-left:4px"] { border-right: none !important; }

/* ─── Agent Cards ──────────────────────────────────── */
[dir="rtl"] .agent-card { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .agent-status { flex-direction: row-reverse; }

/* ─── Pricing ──────────────────────────────────────── */
[dir="rtl"] .pricing-card { text-align: right; }
[dir="rtl"] .pricing-features { text-align: right; }
[dir="rtl"] .pricing-popular { text-align: center; }

/* ─── Integration Cards ────────────────────────────── */
[dir="rtl"] .integration-card { text-align: center; }
[dir="rtl"] .integrations-grid { direction: rtl; }

/* ─── Testimonial ──────────────────────────────────── */
[dir="rtl"] .testimonial-author { flex-direction: row-reverse; }

/* ─── Phone Mockups ────────────────────────────────── */
/* Phone mockups: keep same visual positions in RTL */
[dir="rtl"] .phone-showcase { direction: rtl; }

/* Fan phones */
[dir="rtl"] .fan-phone:nth-child(1) { transform: rotate(10deg) translateY(12px); }
[dir="rtl"] .fan-phone:nth-child(4) { transform: rotate(-10deg) translateY(12px); }

/* ─── Client Slider ────────────────────────────────── */
[dir="rtl"] .client-slider { animation-direction: reverse; }

/* ─── Chat Widget ──────────────────────────────────── */
[dir="rtl"] .sb-chat-widget { left: 24px; right: auto; }
[dir="rtl"] .sb-chat-window { left: 24px; right: auto; }
[dir="rtl"] .sb-chat-header { flex-direction: row-reverse; }
[dir="rtl"] .sb-chat-input-row { flex-direction: row-reverse; }

/* ─── Module Mock Cards ────────────────────────────── */
[dir="rtl"] .module-mock-list-item { flex-direction: row-reverse; }
[dir="rtl"] .module-mock-header { flex-direction: row-reverse; }

/* ─── Browser Frame Mockups ────────────────────────── */
[dir="rtl"] .browser-frame { direction: ltr; } /* Keep frame LTR — it's a "screenshot" */
[dir="rtl"] .browser-chrome { flex-direction: row; } /* Dots stay LEFT */
[dir="rtl"] .browser-body { direction: ltr; text-align: left; } /* Content stays LTR like a real app */
[dir="rtl"] .mock-header { flex-direction: row; }
[dir="rtl"] .mock-table th,
[dir="rtl"] .mock-table td { text-align: left; }
[dir="rtl"] .mock-filter-bar { flex-direction: row; }
[dir="rtl"] .mock-tabs { flex-direction: row; }

/* ─── Report Page Specific ─────────────────────────── */
[dir="rtl"] .report-block { direction: rtl; }
[dir="rtl"] .report-overline { text-align: right; }
[dir="rtl"] .report-title { text-align: right; }
[dir="rtl"] .report-desc { text-align: right; }
[dir="rtl"] .report-features li { text-align: right; }

/* ─── Sub-page Feature Sections (ALL variants) ────── */
/* Text alignment */
[dir="rtl"] .feature-overline { text-align: right; }
[dir="rtl"] .feature-title { text-align: right; }
[dir="rtl"] .feature-desc { text-align: right; }
[dir="rtl"] .feature-text { text-align: right; direction: rtl; }
[dir="rtl"] .feature-label { text-align: right; }
[dir="rtl"] .feature-visual { direction: rtl; }

/* Feature grid (used in inventory.html) */
[dir="rtl"] .feature-grid { direction: rtl; }
@media (min-width: 768px) {
  /* Cancel the LTR .reverse order override — direction:rtl handles the flip */
  /* Keep alternating layout */
}

/* Feature inner (used in procurement.html, production.html) */
[dir="rtl"] .feature-inner { direction: rtl; }
@media (min-width: 768px) {
  /* Keep alternating layout */
}

/* Feature block (used in sales-forecast.html) */
[dir="rtl"] .feature-block { direction: rtl; }
@media (min-width: 768px) {
  /* Keep alternating layout */
}

/* ─── Report Sections (reports.html) ───────────────── */
[dir="rtl"] .report-block { direction: rtl; }
[dir="rtl"] .report-text { text-align: right; direction: rtl; }
[dir="rtl"] .report-overline { text-align: right; }
[dir="rtl"] .report-title { text-align: right; }
[dir="rtl"] .report-desc { text-align: right; }
[dir="rtl"] .report-features li { text-align: right; }
[dir="rtl"] .report-visual { direction: rtl; }
@media (min-width: 768px) {
  /* Keep alternating layout */
}
/* Report highlight callouts */
[dir="rtl"] .report-highlight { text-align: right; direction: rtl; }

/* Feature section centered headers */
[dir="rtl"] .feature-section .section-header { text-align: center; }
[dir="rtl"] .feature-section .section-overline { justify-content: center; }

/* ─── Inline Flex Items in Sub-pages ───────────────── */
/* Check-circle bullet items (all sub-pages use these) */
[dir="rtl"] li[style*="display:flex"] { text-align: right; }
[dir="rtl"] [style*="display:flex"][style*="align-items:center"][style*="gap"] > i:first-child { order: 1; }

/* KPI stat cards — keep centered */
[dir="rtl"] [style*="text-align:center"] { text-align: center !important; }

/* Module mockup card inline labels — only reverse items INSIDE module text areas, not browser frames */
[dir="rtl"] .module-block [style*="display:flex"][style*="justify-content:space-between"]:not(.browser-frame *) { flex-direction: row-reverse; }

/* Browser frame — entire frame stays LTR (it's showing a product screenshot) */

/* Fix inline border-left accents via CSS */
/* Colored accent borders: keep on left side in RTL too — don't flip */

/* ─── Accounting Specific ──────────────────────────── */
[dir="rtl"] .section-title { text-align: right; }
[dir="rtl"] .section-desc { text-align: right; }
[dir="rtl"] .insight-card { text-align: right; }

/* ─── Blog Page ────────────────────────────────────── */
[dir="rtl"] .blog-hero-title,
[dir="rtl"] .blog-hero-subtitle { text-align: center; }
[dir="rtl"] .blog-card { text-align: right; }
[dir="rtl"] .featured-card { direction: rtl; }
[dir="rtl"] .featured-text { text-align: right; }
[dir="rtl"] .blog-card-title { text-align: right; }
[dir="rtl"] .blog-card-excerpt { text-align: right; }
[dir="rtl"] .read-link { flex-direction: row-reverse; }
[dir="rtl"] .newsletter-section { text-align: center; }

/* ─── Contact Page ─────────────────────────────────── */
[dir="rtl"] .contact-grid { direction: rtl; }
[dir="rtl"] .contact-form label { text-align: right; }
[dir="rtl"] .contact-form input,
[dir="rtl"] .contact-form select,
[dir="rtl"] .contact-form textarea { text-align: right; direction: rtl; }
[dir="rtl"] .contact-info { text-align: right; }
[dir="rtl"] .contact-info-item { flex-direction: row; }

/* ─── Mobile App Page ──────────────────────────────── */
[dir="rtl"] .app-download-badges { flex-direction: row-reverse; }
[dir="rtl"] .app-badge { flex-direction: row-reverse; }
[dir="rtl"] .app-badge-text { text-align: right; }
[dir="rtl"] .app-mock-notif { flex-direction: row-reverse; text-align: right; }

/* ─── AI Agents Page ───────────────────────────────── */
[dir="rtl"] .pentagon-section { direction: rtl; }
[dir="rtl"] .agent-tooltip { text-align: right; }
[dir="rtl"] .chat-demo-container { direction: rtl; }
[dir="rtl"] .chat-bubble-user { margin-left: 0; margin-right: auto; }
[dir="rtl"] .chat-bubble-ai { text-align: right; }

/* ─── Sales Forecast Page ──────────────────────────── */
[dir="rtl"] .bar-chart { direction: ltr; } /* Keep charts LTR */
[dir="rtl"] .chart-legend { flex-direction: row-reverse; }
[dir="rtl"] .calendar-grid { direction: rtl; }

/* ─── Production Page ──────────────────────────────── */
[dir="rtl"] .mock-ws-card { text-align: center; }

/* ─── Inline Style Overrides (for elements with inline RTL needs) ─── */
[dir="rtl"] [style*="display:flex"][style*="gap:12px"],
[dir="rtl"] [style*="display:flex"][style*="gap:14px"],
[dir="rtl"] [style*="display:flex"][style*="gap:10px"] {
  /* Don't force row-reverse on grid stat rows — only on horizontal list items */
}

/* Border accents: keep on left side in RTL — visual accent, not directional */

/* ─── Footer ───────────────────────────────────────── */
[dir="rtl"] .footer-grid { direction: rtl; }
[dir="rtl"] .footer-links { text-align: right; }
[dir="rtl"] .footer-links a { text-align: right; }
[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }
[dir="rtl"] .footer-socials { flex-direction: row-reverse; }
[dir="rtl"] .footer-logo { flex-direction: row; }
[dir="rtl"] .footer-brand-desc { text-align: right; }
[dir="rtl"] .footer-heading { text-align: right; }

/* ─── Tables ───────────────────────────────────────── */
[dir="rtl"] table { direction: rtl; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
[dir="rtl"] .wf-mini-table th,
[dir="rtl"] .wf-mini-table td { text-align: right; }

/* ─── Language Toggle ──────────────────────────────── */
.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 14px; border-radius: 8px;
  font-size: 0.78rem; font-weight: 700;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  color: white; cursor: pointer; text-decoration: none;
  transition: all 0.2s ease;
  font-family: 'Outfit', 'Noto Kufi Arabic', sans-serif;
  letter-spacing: 0.02em;
}
.lang-toggle:hover { background: rgba(255,255,255,0.18); }
.nav.scrolled .lang-toggle {
  background: var(--subtle); border-color: var(--slate-200); color: var(--slate-700);
}
.nav.scrolled .lang-toggle:hover {
  background: rgba(96,91,254,0.06); color: var(--electric);
}

/* ─── Inline Styled Elements RTL Fixes ─────────────── */
/* Stat/KPI cards with inline flex */
[dir="rtl"] [style*="display:grid"] { direction: rtl; }
[dir="rtl"] [style*="text-align:center"] { text-align: center !important; }
[dir="rtl"] [style*="text-align:left"] { text-align: right !important; }

/* Module section browser frames and mockup cards */
[dir="rtl"] .modules-section .browser-frame,
[dir="rtl"] .modules-section .module-mock { direction: rtl; }

/* Donut chart and visual elements stay centered */
[dir="rtl"] [style*="conic-gradient"] { direction: ltr; }

/* Progress bars stay LTR */
[dir="rtl"] .module-mock-progress-bar { direction: ltr; }
[dir="rtl"] .module-mock-progress-fill { direction: ltr; }

/* Workstation cards */
[dir="rtl"] .mock-ws-card { text-align: center; direction: rtl; }

/* Recipe card cost breakdown bar stays LTR */
[dir="rtl"] [style*="conic-gradient"],
[dir="rtl"] .bar-chart { direction: ltr; }

/* Input/output flow cards (butchering) */
[dir="rtl"] [style*="flex-direction:column"] { text-align: center; }

/* Notification mockup items in mobile app section */
[dir="rtl"] .app-mock-notif { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .app-mock-notif-text { text-align: right; }

/* Chat demo bubbles */
[dir="rtl"] .chat-bubble-user { text-align: right; }
[dir="rtl"] .chat-bubble-ai { text-align: right; }

/* Pentagon agent web (ai-agents) */
[dir="rtl"] .pentagon-container { direction: ltr; } /* Keep SVG layout LTR */
[dir="rtl"] .agent-pill { direction: rtl; }
[dir="rtl"] .agent-tooltip { direction: rtl; text-align: right; }

/* Form inputs in contact page */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] select,
[dir="rtl"] textarea { text-align: right; direction: rtl; }

/* Blog newsletter section */
[dir="rtl"] .newsletter-input-group { flex-direction: row-reverse; }

/* WhatsApp chat button */
[dir="rtl"] .sb-chat-toggle { left: 24px; right: auto; }

/* Accordion in accounting mapping section */
[dir="rtl"] .mock-accordion { border-left: none; border-right: 3px solid var(--electric); }
[dir="rtl"] .mock-mapping-row { flex-direction: row-reverse; }
[dir="rtl"] .mock-mapping-arrow { transform: scaleX(-1); }

/* Tree items in accounting */
[dir="rtl"] .mock-tree-item.child { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .mock-tree-item.grandchild { padding-left: 0; padding-right: 40px; }

/* Calendar grid stays LTR */
[dir="rtl"] .calendar-grid { direction: ltr; }

/* Download badges in mobile app */
[dir="rtl"] .app-download-badges { flex-direction: row-reverse; }
[dir="rtl"] .app-badge { flex-direction: row-reverse; }

/* ─── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
  /* nav-inner handled by dir=rtl automatically */
  [dir="rtl"] .hero-actions { justify-content: center; }
  [dir="rtl"] .cta-actions { flex-direction: column; align-items: center; }
}