/**
 * Language and Direction Support CSS
 * Handles RTL/LTR switching and language-specific styling
 */

/* IMPORTANT: Ensure language support takes precedence */
html[lang="ar"] {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="en"] {
  direction: ltr !important;
  text-align: left !important;
}

/* Language Toggle Button Styling */
#language-toggle {
  background: transparent;
  border: 2px solid #f75959;
  color: #f75959;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 10px;
}

#language-toggle:hover {
  background: #f75959;
  color: #fff;
}

body.lang-en #language-toggle {
  margin-left: 0;
  margin-right: 10px;
}

/* Base direction styles */
:root {
  --text-align-start: right;
  --text-align-end: left;
  --margin-start: margin-right;
  --margin-end: margin-left;
  --padding-start: padding-right;
  --padding-end: padding-left;
  --float-start: float: right;
  --float-end: float: left;
}

/* English language support - LTR */
body.lang-en {
  direction: ltr !important;
  text-align: left !important;
}

body.lang-en {
  --text-align-start: left;
  --text-align-end: right;
}

body.lang-en .navbar-container {
  flex-direction: row;
}

body.lang-en .navbar-logo {
  margin-right: 0;
  margin-left: auto;
}

body.lang-en .logo-img {
  margin-left: 0;
  margin-right: 15px;
}

body.lang-en .navbar-menu {
  order: -1;
}

/* Arabic language support - RTL */
body.lang-ar,
html[lang="ar"],
html[dir="rtl"] {
  direction: rtl !important;
  text-align: right;
}

body.lang-ar {
  --text-align-start: right;
  --text-align-end: left;
}

/* Navigation adjustments for language */
body.lang-en .nav-link,
body.lang-en .nav-cta {
  text-align: left;
}

body.lang-ar .nav-link,
body.lang-ar .nav-cta {
  text-align: right;
}

/* Header text direction */
body.lang-en .header-text h6,
body.lang-en .header-text h2,
body.lang-en .header-text p {
  text-align: left;
}

body.lang-ar .header-text h6,
body.lang-ar .header-text h2,
body.lang-ar .header-text p {
  text-align: right;
}

/* Section headings */
body.lang-en .section-heading {
  text-align: left;
}

body.lang-ar .section-heading {
  text-align: right;
}

/* Cards and items */
body.lang-en .down-content {
  text-align: left;
}

body.lang-ar .down-content {
  text-align: right;
}

/* Form elements */
body.lang-en input,
body.lang-en textarea,
body.lang-en select {
  text-align: left;
  direction: ltr;
}

body.lang-ar input,
body.lang-ar textarea,
body.lang-ar select {
  text-align: right;
  direction: rtl;
}

/* Accordion */
body.lang-en .accordion-head {
  flex-direction: row-reverse;
}

body.lang-ar .accordion-head {
  flex-direction: row;
}

/* Font family adjustments */
body.lang-en,
body.lang-en * {
  font-family: 'Inter', 'Cairo', sans-serif !important;
}

body.lang-ar,
body.lang-ar * {
  font-family: 'Tajawal', 'Cairo', sans-serif !important;
}

/* Footer adjustments */
body.lang-en .footer-links {
  text-align: left;
}

body.lang-ar .footer-links {
  text-align: right;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body.lang-en .navbar-container {
    flex-direction: column;
  }
  
  body.lang-ar .navbar-container {
    flex-direction: column-reverse;
  }
}

/* Utility direction classes */
.text-start {
  text-align: start;
}

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

.float-start {
  float: inline-start;
}

.float-end {
  float: inline-end;
}

.margin-start {
  margin-inline-start: 1rem;
}

.margin-end {
  margin-inline-end: 1rem;
}

.padding-start {
  padding-inline-start: 1rem;
}

.padding-end {
  padding-inline-end: 1rem;
}

/* Language indicator classes */
[lang="ar"] {
  direction: rtl;
}

[lang="en"] {
  direction: ltr;
}

/* Smooth transitions for language switching - REMOVED to prevent infinite loop */
/* * { */
/*   transition: direction 0.3s ease, text-align 0.3s ease; */
/* } */

/* Prevent transition on page load */
body.transitioning * {
  transition: none;
}

/* Special handling for flex containers - REMOVED to prevent layout issues */
/* body.lang-en .row { */
/*   flex-direction: row; */
/* } */

/* body.lang-ar .row { */
/*   flex-direction: row-reverse; */
/* } */

body.lang-en [dir="rtl"] {
  direction: rtl;
  text-align: right;
}

body.lang-ar [dir="ltr"] {
  direction: ltr;
  text-align: left;
}