/* --- RTL Support --- */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .sidebar {
  left: auto;
  right: -320px;
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -20px 0 60px rgba(46, 51, 53, 0.08);
}

[dir="rtl"] .sidebar.sidebar-open {
  transform: translateX(-320px);
  right: -320px;
}

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

[dir="rtl"] .nav-links a {
  text-align: right;
  padding: 0.8rem 1rem 0.8rem 0;
}

[dir="rtl"] .nav-level-select {
  padding: 0.6rem 1rem 0.6rem 2rem;
  background-position: left 0.5rem center;
}

[dir="rtl"] .nav-user {
  align-items: flex-end;
}

@media (min-width: 1024px) {
  [dir="rtl"] .sidebar.sidebar-open~.main-content {
    margin-left: 0;
    margin-right: 250px;
  }
}

[dir="rtl"] .badge {
  right: auto;
  left: 1.5rem;
}

[dir="rtl"] .flash-close-btn {
  right: auto;
  left: 1.5rem;
}

[dir="rtl"] .social-share-bar {
  right: auto;
  left: 0;
  border-radius: 0 12px 12px 0;
  border-left: none;
  border-right: 1px solid var(--border);
}

@media (max-width: 768px) {
  [dir="rtl"] .social-share-bar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

[dir="rtl"] .card-back,
[dir="rtl"] .auth-form,
[dir="rtl"] .vocabulary-table th {
  text-align: right;
}

[dir="rtl"] .game-difficulty {
  margin-left: 0;
  margin-right: 8px;
}

[dir="rtl"] .sentence-part.dropped {
  padding-left: 0;
  padding-right: 1rem;
  border-left: none;
  border-right: 4px solid var(--primary);
}

[dir="rtl"] #error_explanation {
  border-left: none;
  border-right: 4px solid var(--accent);
}

[dir="rtl"] #error_explanation ul {
  padding-left: 0;
  padding-right: 1.5rem;
}

[dir="rtl"] .flashcard-container .controls {
  flex-direction: row-reverse;
}

[dir="rtl"] .flashcard-container .controls .btn {
  direction: ltr;
}

/* SEO Layout RTL Fixes */
[dir="rtl"] .german-text {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: embed;
}

[dir="rtl"] .english-text {
  direction: ltr !important;
  text-align: left !important;
}

[dir="rtl"] .arabic-text {
  direction: rtl !important;
  text-align: right !important;
}

/* Fix for table borders in RTL */
[dir="rtl"] .vocabulary-table td div {
  border-left: none !important;
  border-right: 2px solid var(--seo-border) !important;
  padding-left: 0 !important;
  padding-right: 0.5rem !important;
}