/* ═══════════════════════════════════════════════════════════════════════════
   TRUESOFT BILINGUAL SYSTEM - RTL/LTR Styles
   Automatically adjusts layout for Arabic and English
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   Base RTL/LTR Variables
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Default LTR (English) */
  --ts-margin-start: 0;
  --ts-margin-end: auto;
  --ts-padding-start: var(--ts-space-4);
  --ts-padding-end: var(--ts-space-4);
  --ts-float-start: left;
  --ts-float-end: right;
  --ts-text-align-start: left;
  --ts-text-align-end: right;
  --ts-border-start: none;
  --ts-border-end: 1px solid var(--ts-border-color);
  --ts-border-radius-start: var(--ts-radius-md) 0 0 var(--ts-radius-md);
  --ts-border-radius-end: 0 var(--ts-radius-md) var(--ts-radius-md) 0;
}

/* Arabic RTL Overrides */
[dir="rtl"],
.lang-ar {
  --ts-margin-start: auto;
  --ts-margin-end: 0;
  --ts-padding-start: var(--ts-space-4);
  --ts-padding-end: var(--ts-space-4);
  --ts-float-start: right;
  --ts-float-end: left;
  --ts-text-align-start: right;
  --ts-text-align-end: left;
  --ts-border-start: 1px solid var(--ts-border-color);
  --ts-border-end: none;
  --ts-border-radius-start: 0 var(--ts-radius-md) var(--ts-radius-md) 0;
  --ts-border-radius-end: var(--ts-radius-md) 0 0 var(--ts-radius-md);
}

/* ─────────────────────────────────────────────────────────────────────────
   Language Switcher Component
   ───────────────────────────────────────────────────────────────────────── */

.language-switcher {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: var(--ts-z-fixed);
  background: white;
  border: 2px solid var(--ts-primary-600);
  border-radius: var(--ts-radius-full);
  padding: var(--ts-space-2);
  display: flex;
  gap: var(--ts-space-2);
  box-shadow: var(--ts-shadow-lg);
}

/* RTL Adjustment */
[dir="rtl"] .language-switcher,
.lang-ar .language-switcher {
  right: auto;
  left: 20px;
}

.lang-btn {
  padding: var(--ts-space-2) var(--ts-space-4);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--ts-size-sm);
  font-weight: var(--ts-weight-semibold);
  color: var(--ts-text-secondary);
  border-radius: var(--ts-radius-md);
  transition: var(--ts-transition-fast);
}

.lang-btn.active {
  background: var(--ts-gradient-primary);
  color: white;
}

.lang-btn:hover {
  background: var(--ts-primary-100);
  color: var(--ts-primary-700);
}

.lang-btn.active:hover {
  background: var(--ts-gradient-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
   Navigation RTL/LTR Adjustments
   ───────────────────────────────────────────────────────────────────────── */

.navbar {
  padding-right: var(--ts-space-4);
  padding-left: var(--ts-space-4);
}

[dir="rtl"] .navbar,
.lang-ar .navbar {
  direction: rtl;
  text-align: right;
}

.nav-links {
  margin-right: auto;
  margin-left: 0;
}

[dir="rtl"] .nav-links,
.lang-ar .nav-links {
  margin-right: 0;
  margin-left: auto;
  direction: rtl;
}

.nav-link::after {
  left: 0;
}

[dir="rtl"] .nav-link::after,
.lang-ar .nav-link::after {
  left: auto;
  right: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Hero Section RTL/LTR
   ───────────────────────────────────────────────────────────────────────── */

.hero {
  text-align: left;
}

[dir="rtl"] .hero,
.lang-ar .hero {
  text-align: right;
  direction: rtl;
}

.hero-content {
  max-width: 800px;
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .hero-content,
.lang-ar .hero-content {
  margin-left: auto;
  margin-right: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Grid & Flexbox Adjustments
   ───────────────────────────────────────────────────────────────────────── */

.flex-between {
  flex-direction: row;
}

[dir="rtl"] .flex-between,
.lang-ar .flex-between {
  flex-direction: row-reverse;
}

.container {
  margin: 0 auto;
  padding: 0 var(--ts-space-4);
}

/* ─────────────────────────────────────────────────────────────────────────
   Typography RTL/LTR
   ───────────────────────────────────────────────────────────────────────── */

body {
  font-family: var(--ts-font-primary);
}

[dir="rtl"] body,
.lang-ar body {
  font-family: var(--ts-font-secondary); /* Cairo for Arabic */
  direction: rtl;
  text-align: right;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  text-align: left;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4, .lang-ar h5, .lang-ar h6,
[dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3, [dir="rtl"] .h4, [dir="rtl"] .h5, [dir="rtl"] .h6,
.lang-ar .h1, .lang-ar .h2, .lang-ar .h3, .lang-ar .h4, .lang-ar .h5, .lang-ar .h6 {
  text-align: right;
}

p {
  text-align: left;
}

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

/* ─────────────────────────────────────────────────────────────────────────
   Button & Form Elements
   ───────────────────────────────────────────────────────────────────────── */

.btn {
  gap: var(--ts-space-2);
}

[dir="rtl"] .btn,
.lang-ar .btn {
  flex-direction: row-reverse;
}

input, textarea, select {
  text-align: left;
  direction: ltr;
}

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

/* Support numbers and email in RTL */
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="phone"], [dir="rtl"] input[type="number"],
.lang-ar input[type="email"], .lang-ar input[type="phone"], .lang-ar input[type="number"] {
  direction: ltr;
  text-align: left;
}

/* ─────────────────────────────────────────────────────────────────────────
   List Items & Cards
   ───────────────────────────────────────────────────────────────────────── */

li {
  text-align: left;
  margin-right: var(--ts-space-4);
  margin-left: 0;
}

[dir="rtl"] li,
.lang-ar li {
  text-align: right;
  margin-right: 0;
  margin-left: var(--ts-space-4);
}

.card {
  text-align: left;
}

[dir="rtl"] .card,
.lang-ar .card {
  text-align: right;
  direction: rtl;
}

/* ─────────────────────────────────────────────────────────────────────────
   Icon & Image Alignment
   ───────────────────────────────────────────────────────────────────────── */

.card-flex,
.feature-item {
  flex-direction: row;
}

[dir="rtl"] .card-flex, [dir="rtl"] .feature-item,
.lang-ar .card-flex, .lang-ar .feature-item {
  flex-direction: row-reverse;
}

.icon-with-text {
  flex-direction: row;
  gap: var(--ts-space-3);
}

[dir="rtl"] .icon-with-text,
.lang-ar .icon-with-text {
  flex-direction: row-reverse;
}

/* ─────────────────────────────────────────────────────────────────────────
   Badges & Labels
   ───────────────────────────────────────────────────────────────────────── */

.badge {
  text-align: center;
}

[dir="rtl"] .badge,
.lang-ar .badge {
  direction: rtl;
}

/* ─────────────────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────────────────── */

footer {
  text-align: left;
}

[dir="rtl"] footer,
.lang-ar footer {
  text-align: right;
  direction: rtl;
}

.footer-col {
  text-align: left;
}

[dir="rtl"] .footer-col,
.lang-ar .footer-col {
  text-align: right;
}

.footer-col a {
  flex-direction: row;
  gap: var(--ts-space-2);
}

[dir="rtl"] .footer-col a,
.lang-ar .footer-col a {
  flex-direction: row-reverse;
}

/* ─────────────────────────────────────────────────────────────────────────
   Responsive Adjustments for RTL
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .language-switcher {
    top: 80px;
    right: 10px;
  }

  [dir="rtl"] .language-switcher,
  .lang-ar .language-switcher {
    right: auto;
    left: 10px;
  }

  .nav-links {
    flex-direction: column;
  }

  [dir="rtl"] .nav-links,
  .lang-ar .nav-links {
    flex-direction: column;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Animation Adjustments for RTL
   ───────────────────────────────────────────────────────────────────────── */

.fade-in-left {
  animation: fade-in-left var(--ts-duration-500) ease-out;
}

[dir="rtl"] .fade-in-left,
.lang-ar .fade-in-left {
  animation: fade-in-right var(--ts-duration-500) ease-out;
}

.fade-in-right {
  animation: fade-in-right var(--ts-duration-500) ease-out;
}

[dir="rtl"] .fade-in-right,
.lang-ar .fade-in-right {
  animation: fade-in-left var(--ts-duration-500) ease-out;
}

/* ─────────────────────────────────────────────────────────────────────────
   Utility Classes for RTL/LTR Control
   ───────────────────────────────────────────────────────────────────────── */

.text-start {
  text-align: left;
}

[dir="rtl"] .text-start,
.lang-ar .text-start {
  text-align: right;
}

.text-end {
  text-align: right;
}

[dir="rtl"] .text-end,
.lang-ar .text-end {
  text-align: left;
}

.ms-auto {
  margin-left: auto;
  margin-right: 0;
}

[dir="rtl"] .ms-auto,
.lang-ar .ms-auto {
  margin-left: 0;
  margin-right: auto;
}

.me-auto {
  margin-right: auto;
  margin-left: 0;
}

[dir="rtl"] .me-auto,
.lang-ar .me-auto {
  margin-right: 0;
  margin-left: auto;
}

.float-start {
  float: left;
}

[dir="rtl"] .float-start,
.lang-ar .float-start {
  float: right;
}

.float-end {
  float: right;
}

[dir="rtl"] .float-end,
.lang-ar .float-end {
  float: left;
}

/* ─────────────────────────────────────────────────────────────────────────
   Print Styles for RTL/LTR
   ───────────────────────────────────────────────────────────────────────── */

@media print {
  [dir="rtl"],
  .lang-ar {
    direction: rtl;
  }
}