/* RTL overrides for Arabic pages */
/* Loaded after ../styles.css — only overrides what's needed */

/* ───── Arabic Font ───── */
[dir="rtl"] {
  font-family: 'Noto Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-family: 'Noto Sans Arabic', 'Inter', sans-serif;
}

/* ───── Text Alignment ───── */
[dir="rtl"] .hero-content,
[dir="rtl"] .section-header {
  text-align: center; /* keep centered sections centered */
}

[dir="rtl"] .lead,
[dir="rtl"] p {
  text-align: right;
}

[dir="rtl"] .section-header p {
  text-align: center;
}

[dir="rtl"] .testimonial blockquote,
[dir="rtl"] .testimonial cite {
  text-align: center;
}

/* ───── Navigation RTL ───── */
[dir="rtl"] .nav-links {
  flex-direction: row-reverse;
}

[dir="rtl"] .nav-inner {
  flex-direction: row-reverse;
}

[dir="rtl"] .nav-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] .nav-mobile a {
  text-align: right;
}

/* ───── Hero RTL ───── */
[dir="rtl"] .hero-buttons {
  flex-direction: row-reverse;
  justify-content: center;
}

[dir="rtl"] .hero-stats {
  flex-direction: row-reverse;
}

/* ───── Cards & Features ───── */
[dir="rtl"] .card,
[dir="rtl"] .feature-card,
[dir="rtl"] .pricing-card {
  text-align: right;
}

[dir="rtl"] .card h3,
[dir="rtl"] .card p {
  text-align: right;
}

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

[dir="rtl"] .agent-item > div {
  text-align: right;
}

[dir="rtl"] .agent-group {
  text-align: right;
}

/* ───── Steps / How It Works ───── */
[dir="rtl"] .steps {
  direction: rtl;
}

[dir="rtl"] .step {
  text-align: right;
}

/* ───── Split Layouts ───── */
/* The English CSS uses direction: rtl on .split.reverse to swap columns.
   Since the page is already RTL, we reset both to normal grid behavior. */
[dir="rtl"] .split {
  direction: rtl;
}

[dir="rtl"] .split.reverse {
  direction: ltr;
}

[dir="rtl"] .split.reverse > * {
  direction: rtl;
}

[dir="rtl"] .split-content {
  text-align: right;
}

[dir="rtl"] .split-content ul {
  padding-right: 20px;
  padding-left: 0;
}

/* ───── Lists ───── */
[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-right: 20px;
  padding-left: 0;
}

[dir="rtl"] .pricing-features {
  text-align: right;
}

[dir="rtl"] .pricing-features li {
  padding-right: 28px;
  padding-left: 0;
}

[dir="rtl"] .pricing-features li::before {
  right: 0;
  left: auto;
}

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

[dir="rtl"] .pricing-price {
  text-align: right;
}

/* ───── FAQ ───── */
[dir="rtl"] .faq-question {
  text-align: right;
  flex-direction: row-reverse;
}

[dir="rtl"] .faq-answer {
  text-align: right;
}

/* ───── Footer ───── */
[dir="rtl"] .footer-grid {
  direction: rtl;
}

[dir="rtl"] .footer-brand {
  text-align: right;
}

[dir="rtl"] .footer ul {
  text-align: right;
}

[dir="rtl"] .footer h4 {
  text-align: right;
}

[dir="rtl"] .footer-bottom {
  flex-direction: row-reverse;
}

/* ───── Form RTL ───── */
[dir="rtl"] label {
  text-align: right;
  display: block;
}

[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .form-group {
  text-align: right;
}

/* ───── Badges ───── */
[dir="rtl"] .badge {
  direction: ltr; /* keep badge content readable */
}

/* ───── Trust Bar ───── */
[dir="rtl"] .trust-bar p {
  text-align: center;
}

/* ───── Page Hero ───── */
[dir="rtl"] .page-hero {
  text-align: center;
}

[dir="rtl"] .page-hero p {
  text-align: center;
}

/* ───── CTA Banner ───── */
[dir="rtl"] .cta-banner h2,
[dir="rtl"] .cta-banner p {
  text-align: center;
}

/* ───── Stats ───── */
[dir="rtl"] .stats-grid {
  direction: rtl;
}

/* ───── Portal Cards ───── */
[dir="rtl"] .portal-card-body {
  text-align: right;
}

/* ───── Language Switcher ───── */
.lang-switch {
  display: flex;
  gap: 4px;
  align-items: center;
}

.lang-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--text-secondary);
  transition: all 0.2s;
  font-family: 'Inter', sans-serif; /* keep switcher in Latin font */
}

.lang-btn.active,
.lang-btn:hover {
  background: var(--blue);
  color: #fff;
}

/* ───── Responsive RTL adjustments ───── */
@media (max-width: 640px) {
  [dir="rtl"] .split,
  [dir="rtl"] .split.reverse {
    flex-direction: column;
  }
}