/* ==========================================================================
   RTL (Right-to-Left) Support for Arabic
   Dot Design — Arabic Version
   ========================================================================== */

/* ============================================
   NAVIGATION - RTL FIXES
   ============================================ */

/* Navigation Links */
.top-app-bar-link {
  white-space: nowrap;
}

/* Dropdown Menus - RTL Positioning */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-dropdown-trigger svg {
  transition: transform 0.3s ease;
}

.nav-dropdown:hover .nav-dropdown-trigger svg {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  /* RTL: من اليمين */
  left: auto;
  margin-top: 0.5rem;
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 0.5rem 0;
  min-width: 200px;
  box-shadow: var(--md-sys-elevation-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  text-align: right;
  /* RTL: محاذاة لليمين */
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.75rem 1.5rem;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  transition: background-color 0.2s ease;
  white-space: nowrap;
  text-align: right;
  /* RTL */
}

.nav-dropdown-menu a:hover {
  background-color: var(--md-sys-color-surface-container-highest);
}

/* ============================================
   EXISTING RTL STYLES
   ============================================ */

/* --------------------------------------------------------------------------
   1. BASE RTL DIRECTION
   -------------------------------------------------------------------------- */
[dir="rtl"],
html[lang="ar"] {
  direction: rtl;
  text-align: right;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY ADJUSTMENTS
   -------------------------------------------------------------------------- */
[dir="rtl"] {
  /* Remove letter-spacing that looks wrong in Arabic */
  --md-sys-typescale-label-large-tracking: 0;
  --md-sys-typescale-label-medium-tracking: 0;
  --md-sys-typescale-label-small-tracking: 0;

  /* Arabic-optimized line heights */
  --md-sys-typescale-body-large-line-height: 1.9;
  --md-sys-typescale-body-medium-line-height: 1.8;
}

[dir="rtl"] .label-large,
[dir="rtl"] .label-medium,
[dir="rtl"] .label-small {
  letter-spacing: 0.02em;
  text-transform: none;
  /* Arabic doesn't have uppercase/lowercase */
}

/* --------------------------------------------------------------------------
   3. LAYOUT MIRRORING
   -------------------------------------------------------------------------- */

/* Container padding */
[dir="rtl"] .container {
  padding-right: var(--md-sys-layout-container-padding);
  padding-left: var(--md-sys-layout-container-padding);
}

/* Top App Bar - RTL Layout (logo right, menu left) */
[dir="rtl"] .top-app-bar {
  direction: rtl;
}

[dir="rtl"] .top-app-bar-inner {
  flex-direction: row;
}

[dir="rtl"] .top-app-bar-nav {
  flex-direction: row;
  /* الرئيسية من اليمين - RTL default order */
  gap: var(--md-sys-spacing-1);
}

[dir="rtl"] .top-app-bar-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] .top-app-bar-link {
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
  font-size: 0.875rem;
}

[dir="rtl"] .top-app-bar-link::after {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* Dropdown Menu */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-1);
  cursor: pointer;
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.nav-dropdown-trigger:hover {
  color: var(--md-sys-color-on-surface);
}

.nav-dropdown-trigger svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
}

.nav-dropdown:hover .nav-dropdown-trigger svg {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  min-width: 180px;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s var(--md-sys-motion-easing-emphasized);
  z-index: 1000;
  padding: var(--md-sys-spacing-2) 0;
}

[dir="rtl"] .nav-dropdown-menu {
  right: 0;
  left: auto;
}

[dir="ltr"] .nav-dropdown-menu,
html:not([dir="rtl"]) .nav-dropdown-menu {
  left: 0;
  right: auto;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover {
  background: var(--md-sys-color-surface-container-high);
}

/* Language Switcher */
.lang-switch {
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-small);
  font-weight: 600;
  font-size: 0.8rem;
  text-decoration: none;
  margin-inline-start: var(--md-sys-spacing-2);
}

/* Hero Section */
[dir="rtl"] .hero-orb {
  right: auto;
  left: -20%;
}

[dir="rtl"] .hero-scroll {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

/* --------------------------------------------------------------------------
   4. CARDS & COMPONENTS RTL
   -------------------------------------------------------------------------- */

/* Cards */
[dir="rtl"] .card {
  text-align: right;
}

[dir="rtl"] .card-icon {
  margin-left: auto;
  margin-right: 0;
}

/* Stats */
[dir="rtl"] .stat-item {
  border-right: none;
  border-left: 1px solid var(--md-sys-color-outline-variant);
}

[dir="rtl"] .stat-item:last-child {
  border-left: none;
}

[dir="rtl"] .stat-item:first-child {
  border-left: 1px solid var(--md-sys-color-outline-variant);
}

@media (max-width: 768px) {
  [dir="rtl"] .stat-item:nth-child(2) {
    border-left: none;
  }
}

/* --------------------------------------------------------------------------
   5. BUTTONS RTL
   -------------------------------------------------------------------------- */
[dir="rtl"] .btn {
  flex-direction: row-reverse;
}

[dir="rtl"] .btn-text::after {
  content: '←';
  margin-right: var(--md-sys-spacing-2);
  margin-left: 0;
}

/* --------------------------------------------------------------------------
   6. FOOTER RTL
   -------------------------------------------------------------------------- */
[dir="rtl"] .footer-grid {
  direction: rtl;
}

[dir="rtl"] .footer-nav-list {
  text-align: right;
}

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

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

/* --------------------------------------------------------------------------
   7. MOBILE MENU RTL
   -------------------------------------------------------------------------- */
[dir="rtl"] .mobile-menu-close {
  right: auto;
  left: var(--md-sys-spacing-6);
}

[dir="rtl"] .menu-toggle {
  order: -1;
}

/* --------------------------------------------------------------------------
   8. MARQUEE RTL
   -------------------------------------------------------------------------- */
[dir="rtl"] .marquee {
  animation-direction: reverse;
}

[dir="rtl"] .marquee-reverse {
  animation-direction: normal;
}

[dir="rtl"] .marquee-item::after {
  content: '◆';
  margin-right: var(--md-sys-spacing-10);
  margin-left: 0;
}

[dir="rtl"] .marquee-item::before {
  content: none;
}

/* --------------------------------------------------------------------------
   9. ANIMATIONS RTL
   -------------------------------------------------------------------------- */

/* Fade animations - mirror transform direction */
[dir="rtl"] .fade-up {
  transform: translateY(24px);
}

/* Hero word reveal */
[dir="rtl"] .hero-title .word {
  transform: translateY(40px);
}

/* Card actions slide */
[dir="rtl"] .card-actions {
  transform: translateY(10px);
}

/* --------------------------------------------------------------------------
   10. BLOCKQUOTE & TEXT ELEMENTS RTL
   -------------------------------------------------------------------------- */
[dir="rtl"] blockquote {
  padding-left: 0;
  padding-right: var(--md-sys-spacing-6);
  border-left: none;
  border-right: 3px solid var(--md-sys-color-primary);
}

/* --------------------------------------------------------------------------
   11. SCROLL INDICATOR RTL
   -------------------------------------------------------------------------- */
[dir="rtl"] .hero-scroll-line::before {
  animation: scrollIndicatorRTL 1.5s ease-in-out infinite;
}

@keyframes scrollIndicatorRTL {
  0% {
    top: -16px;
  }

  100% {
    top: 100%;
  }
}

/* --------------------------------------------------------------------------
   12. SECTION HEADERS RTL
   -------------------------------------------------------------------------- */
[dir="rtl"] .section-header {
  text-align: right;
}

[dir="rtl"] .section-overline::before {
  content: '// ';
}

/* --------------------------------------------------------------------------
   13. CTA SECTION RTL
   -------------------------------------------------------------------------- */
[dir="rtl"] .cta-content {
  text-align: center;
}

[dir="rtl"] .cta-actions {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   14. GRID ADJUSTMENTS
   -------------------------------------------------------------------------- */
[dir="rtl"] .grid {
  direction: rtl;
}

/* --------------------------------------------------------------------------
   15. FORM ELEMENTS RTL
   -------------------------------------------------------------------------- */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder {
  text-align: right;
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE RTL ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 968px) {
  [dir="rtl"] .top-app-bar-inner {
    flex-direction: row;
  }

  [dir="rtl"] .menu-toggle {
    order: 0;
  }
}

@media (max-width: 640px) {
  [dir="rtl"] .footer-bottom {
    flex-direction: column;
  }
}