/* Import Vazirmatn font for Persian and Arabic */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Alternative font import as backup */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Additional Persian font imports for better compatibility */
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;500;600;700&display=swap');

/* Font loading optimization */
@font-face {
  font-family: 'Vazirmatn';
  font-display: swap;
  src: url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');
}

/* Language-specific styles and RTL support */

/* Language Switcher Styles */
.language-switcher {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.language-switcher select {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 30px 8px 12px; /* More right padding for dropdown arrow */
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none; /* Remove default arrow */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
}

.language-switcher select:hover {
  background: rgba(255, 255, 255, 1);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  border-color: #20c2c9;
}

.language-switcher select:focus {
  outline: none;
  border-color: #20c2c9;
  box-shadow: 0 0 0 2px rgba(32, 194, 201, 0.2);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
}

/* RTL Support - Enabled for Persian and Arabic text alignment */
.rtl {
  direction: rtl;
  text-align: right;
}

.rtl .language-switcher {
  right: 20px;
  left: auto;
}

.rtl .logo-container {
  flex-direction: row; /* Keep same as English layout */
}

.rtl .screenshot-slider {
  direction: ltr; /* Keep slider direction LTR for consistency */
}

/* Persian and Arabic font support */
.rtl body {
  font-family: 'Vazirmatn', 'Noto Sans Arabic', 'Noto Nastaliq Urdu', 'Scheherazade New', 'Tahoma', 'Arial', 'Segoe UI', sans-serif;
  font-display: swap;
}

/* RTL-specific adjustments - Enabled for Persian and Arabic text alignment */
.rtl h1, .rtl h2, .rtl h3 {
  text-align: right;
}

.rtl p {
  text-align: right;
  line-height: 1.8;
}

.rtl ul {
  text-align: right;
  padding-right: 20px;
  padding-left: 0;
}

.rtl li {
  text-align: right;
  margin-bottom: 8px;
}

/* Language-specific typography improvements */
[lang="fa"], .rtl [lang="fa"] {
  font-family: 'Vazirmatn', 'Noto Sans Arabic', 'Noto Nastaliq Urdu', 'Scheherazade New', 'Tahoma', 'Arial', 'Segoe UI', sans-serif !important;
  line-height: 1.8;
  font-display: swap;
}

[lang="ar"], .rtl [lang="ar"] {
  font-family: 'Vazirmatn', 'Noto Sans Arabic', 'Noto Nastaliq Urdu', 'Scheherazade New', 'Tahoma', 'Arial', 'Segoe UI', sans-serif !important;
  line-height: 1.8;
  font-display: swap;
}

/* Ensure all RTL text uses Persian font */
.rtl, .rtl * {
  font-family: 'Vazirmatn', 'Noto Sans Arabic', 'Noto Nastaliq Urdu', 'Scheherazade New', 'Tahoma', 'Arial', 'Segoe UI', sans-serif !important;
  font-display: swap;
}

/* Force font loading for Persian text */
html[lang="fa"] * {
  font-family: 'Vazirmatn', 'Noto Sans Arabic', 'Noto Nastaliq Urdu', 'Scheherazade New', 'Tahoma', 'Arial', 'Segoe UI', sans-serif !important;
  font-display: swap;
}

/* Font loading indicator */
.font-loading {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.font-loaded {
  opacity: 1;
}

/* Smooth language transition */
body {
  transition: opacity 0.2s ease;
  opacity: 0; /* Start hidden to prevent flash */
  visibility: hidden;
}

.language-transitioning {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.1s ease, visibility 0.1s ease;
  pointer-events: none;
}

.language-ready {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: auto;
}

/* Specific elements that need Persian font */
.rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6,
.rtl p, .rtl span, .rtl div, .rtl a, .rtl li, .rtl ul, .rtl ol,
.rtl button, .rtl input, .rtl textarea, .rtl select {
  font-family: 'Vazirmatn', 'Noto Sans Arabic', 'Noto Nastaliq Urdu', 'Scheherazade New', 'Tahoma', 'Arial', 'Segoe UI', sans-serif !important;
}

/* RTL layout adjustments - Enabled for Persian and Arabic text alignment */
.rtl main {
  text-align: right;
}

.rtl section {
  text-align: right;
}

.rtl footer {
  text-align: center;
}

/* Ensure proper alignment for mixed content */
.rtl .screenshot-slider {
  margin: 20px auto;
}

/* Language switcher positioning for mobile */
@media (max-width: 768px) {
  .language-switcher {
    top: 10px;
    right: 10px;
  }
  
  .rtl .language-switcher {
    right: 10px;
    left: auto;
  }
  
  .language-switcher select {
    padding: 6px 25px 6px 10px; /* Maintain proper spacing on mobile */
    font-size: 12px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px;
  }
}

/* Smooth transitions for language switching */
body {
  transition: all 0.3s ease;
}

/* Ensure proper text direction for all elements */
[data-translate] {
  transition: all 0.3s ease;
}

/* RTL-specific button and link styles - Enabled for Persian and Arabic text alignment */
.rtl a {
  text-align: right;
}

/* Header adjustments for RTL - Enabled for Persian and Arabic text alignment */
.rtl header h1 {
  text-align: center;
}

.rtl header p {
  text-align: center;
}

/* Ensure proper spacing for RTL text */
.rtl p {
  margin-bottom: 1rem;
}

/* RTL list styling - Enabled for Persian and Arabic text alignment */
.rtl ul {
  list-style-position: inside;
}

/* RTL feature list checkmarks - Enabled for Persian and Arabic text alignment */
.rtl .feature-list li {
  padding-right: 20px;
  padding-left: 0;
  text-align: right;
}

.rtl .feature-list li:before {
  right: 0;
  left: auto;
}

/* Ensure images and media maintain proper alignment - Keep slideshow in LTR for all languages */
.rtl .screenshot-slider img {
  direction: ltr;
}

/* Keep slideshow container and navigation in LTR for all languages */
.rtl .slider-container {
  direction: ltr;
  text-align: left;
}

.rtl .screenshot-slider {
  direction: ltr;
}

.rtl .slider-nav {
  direction: ltr;
}

.rtl .slider-indicators {
  direction: ltr;
  text-align: center;
}

.rtl .indicator {
  direction: ltr;
}

/* Language indicator */
.language-indicator {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
  z-index: 1000;
}

.rtl .language-indicator {
  left: 20px;
  right: auto;
}