/* ============================================
   RTL (Right-to-Left) Support for Persian
   ============================================ */

/* Apply RTL direction when body has rtl class */
body.rtl {
  direction: rtl;
  text-align: right;
}

/* ============================================
   Typography RTL Adjustments
   ============================================ */
body.rtl {
  /* Override CSS Variables for robust global font change */
  --font-family-primary: 'IRANSansX', 'IRANSans', 'Tahoma', sans-serif !important;
  --font-family-heading: 'IRANSansX', 'IRANSans', 'Tahoma', sans-serif !important;
  
  /* Also apply directly to body */
  font-family: 'IRANSansX', 'IRANSans', 'Tahoma', sans-serif !important;
  font-weight: 400;
}

body.rtl h1, 
body.rtl h2, 
body.rtl h3, 
body.rtl h4, 
body.rtl h5, 
body.rtl h6 {
  font-family: 'IRANSansX', 'IRANSans', 'Tahoma', sans-serif !important;
  font-weight: 700;
}

/* Ensure numbers in charts/tables are readable */
body.rtl .chart-container, 
body.rtl .table,
body.rtl .price {
  font-family: 'IRANSansX', 'IRANSans', 'Tahoma', sans-serif !important;
}

/* ============================================
   RTL List Styles - Fix Bullet Points
   ============================================ */

/* Fix bullet points and list alignment in RTL */
body.rtl ul,
html[dir="rtl"] ul {
  padding-right: 20px;
  padding-left: 0;
  margin-right: 20px;
  margin-left: 0;
  text-align: right;
}

body.rtl ol,
html[dir="rtl"] ol {
  padding-right: 20px;
  padding-left: 0;
  margin-right: 20px;
  margin-left: 0;
  text-align: right;
}

body.rtl li,
html[dir="rtl"] li {
  text-align: right;
  direction: rtl;
}

/* Fix nested lists */
body.rtl ul ul,
body.rtl ul ol,
body.rtl ol ul,
body.rtl ol ol,
html[dir="rtl"] ul ul,
html[dir="rtl"] ul ol,
html[dir="rtl"] ol ul,
html[dir="rtl"] ol ol {
  padding-right: 20px;
  padding-left: 0;
}

/* ============================================
   Navigation & Header - Clean Structure
   ============================================ */

.main-header nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

/* Dashboard Header Layout */
.main-header .header-middle {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  flex: 0.5; /* 20% larger than default flex: 1 */
  justify-content: center;
}

.header-logos {
  display: flex;
  gap: 16px;
  align-items: center;
  flex: 1;
}

.header-middle {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  flex: 1;
  justify-content: center;
}

.header-text {
  font-size: 2rem;
  font-weight: 800;
  /* flex: 0.1; */
  text-align: right;
}

/* Persian: Logos LEFT, Text RIGHT */
body.rtl .header-logos {
  order: 1 !important; /* LEFT */
  flex-direction: row-reverse; /* Ensure Avir is Left, Maroon Right */
}

body.rtl .header-middle {
  order: 2 !important; /* MIDDLE */
}

body.rtl .header-text {
  order: 3 !important; /* RIGHT */
  text-align: right;
}

body.rtl .main-header nav {
  flex-direction: row-reverse !important; /* Force Left (Start) to Right (End) in RTL */
}

/* English: Default Layout (Logos Right, Text Left) */
body.ltr .header-text {
  text-align: left;
  order: 1 !important; /* LEFT */
}

body.ltr .header-middle {
  order: 2 !important; /* MIDDLE */
}

body.ltr .header-logos {
  order: 3 !important; /* RIGHT */
  flex-direction: row; /* Normal order for logos */
  justify-content: flex-end; /* Push to far right */
}

body.ltr .main-header nav {
  flex-direction: row !important; /* Normal left to right flow */
}

/* ============================================
   Form Elements RTL
   ============================================ */
body.rtl .input-group label {
  text-align: right;
}

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

body.rtl .modern-select {
  background-position: left 12px center;
  padding-left: 40px;
  padding-right: 16px;
}

body.rtl input[type="checkbox"],
body.rtl input[type="radio"] {
  margin-right: 0;
  margin-left: var(--spacing-xs);
}

/* ============================================
   Buttons RTL
   ============================================ */
body.rtl .btn {
  text-align: center;
}

/* ============================================
   Cards & Features RTL
   ============================================ */
body.rtl .feature-cards,
body.rtl .pricing-cards {
  flex-direction: row-reverse;
}

body.rtl .card,
body.rtl .pricing-card {
  text-align: center; /* Keep centered for cards */
}

/* ============================================
   Chart Controls RTL
   ============================================ */
body.rtl .chart-controls {
  flex-direction: row-reverse;
}

body.rtl .control-group {
  margin-left: 0;
  margin-right: var(--spacing-md);
}

body.rtl .control-label {
  margin-right: 0;
  margin-left: var(--spacing-xs);
}

body.rtl .date-range-group {
  flex-direction: row-reverse;
}

body.rtl .date-label {
  margin-right: 0;
  margin-left: var(--spacing-xs);
}

/* ============================================
   Footer RTL
   ============================================ */
body.rtl .site-footer {
  direction: rtl;
}

body.rtl .footer-inner {
  flex-direction: row-reverse;
}

/* ============================================
   Language Switcher Styles
   ============================================ */
.language-switcher {
  display: flex;
  gap: 4px;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-full);
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.language-switcher button {
  padding: 7px 16px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 45px;
  text-align: center;
}

.language-switcher button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: scale(1.05);
}

.language-switcher button.active {
  background: rgba(255, 255, 255, 0.95);
  color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-weight: 800;
}

/* Adjust nav positioning for header */
.main-header nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  gap: var(--spacing-md);
}

/* Logo should be a flex container to position text and images */
.main-header .logo {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1; /* Allow it to take space */
}

/* Form card language switcher */
.form-card .language-switcher {
  margin-bottom: var(--spacing-md);
  justify-content: center;
  background: rgba(30, 64, 175, 0.08);
  border: 1px solid rgba(30, 64, 175, 0.15);
}

.form-card .language-switcher button {
  color: var(--text-primary);
  font-size: 0.9rem;
}

.form-card .language-switcher button:hover {
  background: rgba(30, 64, 175, 0.1);
  color: var(--primary-color);
}

.form-card .language-switcher button.active {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-md);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .language-switcher button {
    padding: 6px 12px;
    font-size: 0.8rem;
    min-width: 40px;
  }
  
  .main-header .language-switcher {
    order: 1;
    margin-left: 0;
    margin-right: 0;
  }
  
  body.rtl .main-header .language-switcher {
    order: 1;
  }
}

/* ============================================
   Animations RTL Adjustments
   ============================================ */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

body.rtl .animate-slide-in-right {
  animation: slideInLeft 0.5s ease-out both;
}

/* ============================================
   Numbers - Keep LTR for Numbers Even in RTL
   ============================================ */
body.rtl .price,
body.rtl .number,
body.rtl [data-number] {
  direction: ltr;
  display: inline-block;
}

/* ============================================
   Responsive RTL Adjustments
   ============================================ */
@media (max-width: 768px) {
  body.rtl .nav-links {
    flex-direction: column;
    align-items: flex-end;
  }
  
  body.rtl .nav-links li {
    margin-right: 0;
  }
}

/* ============================================
   Shadows RTL (Mirror for Depth)
   ============================================ */
body.rtl .card:hover,
body.rtl .pricing-card:hover {
  /* Shadows should mirror for proper depth perception in RTL */
  box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Text Alignment Utilities
   ============================================ */
body.rtl .text-left {
  text-align: right;
}

body.rtl .text-right {
  text-align: left;
}

body.rtl .text-center {
  text-align: center;
}

/* ============================================
   Flex Direction Utilities
   ============================================ */
body.rtl .flex-row {
  flex-direction: row-reverse;
}

body.rtl .flex-row-reverse {
  flex-direction: row;
}

/* ============================================
   Persian Number Conversion (Optional)
   ============================================ */
/* If you want to display Persian/Arabic numerals, 
   add class .persian-numbers to elements */
body.rtl .persian-numbers {
  font-feature-settings: 'ss01';
}