/**
 * SuperX Theme - RTL (Right-to-Left) CSS
 * Styles for Arabic, Hebrew, and other RTL languages
 */

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

/* ============================================
   RTL Base Styles
   ============================================ */
[dir="rtl"],
.lang_ar,
.lang_he,
.lang_fa {
  direction: rtl;
  text-align: right;
  font-family: 'Noto Sans Arabic', 'IBM Plex Sans', 'Noto Sans', sans-serif;
}

[dir="rtl"] body,
.lang_ar body,
.lang_he body,
.lang_fa body {
  font-family: 'Noto Sans Arabic', 'IBM Plex Sans', 'Noto Sans', sans-serif;
  direction: rtl;
}

/* ============================================
   RTL Text Alignment
   ============================================ */
[dir="rtl"] .text-left {
  text-align: right;
}

[dir="rtl"] .text-right {
  text-align: left;
}

/* ============================================
   RTL Flexbox Adjustments
   ============================================ */
[dir="rtl"] .flex-row {
  flex-direction: row-reverse;
}

[dir="rtl"] .justify-start {
  justify-content: flex-end;
}

[dir="rtl"] .justify-end {
  justify-content: flex-start;
}

/* ============================================
   RTL Header & Navigation
   ============================================ */
[dir="rtl"] .superx-header-inner {
  flex-direction: row-reverse;
  position: relative;
}
[dir="rtl"] .superx-logo {
  position: absolute;
  right: 35px;
}
[dir="rtl"] .superx-nav {
  margin-left: 0;
  margin-right: 160px;
}
@media (max-width: 991px) {
  [dir="rtl"] .superx-nav {
    margin-right: 0px;
  }
}


[dir="rtl"] .superx-nav-link .dropdown-arrow {
  margin-left: 0;
  margin-right: 4px;
}

/* RTL Dropdown */
[dir="rtl"] .superx-dropdown {
  left: auto;
  right: 0;
}

/* RTL Submenu Flyout */
[dir="rtl"] .superx-submenu {
  left: auto;
  right: 100%;
  transform: translateX(8px);
}

[dir="rtl"] .superx-dropdown-item:hover > .superx-submenu {
  transform: translateX(0);
}

[dir="rtl"] .superx-submenu.flyout-left {
  right: auto;
  left: 100%;
  transform: translateX(-8px);
}

[dir="rtl"] .superx-dropdown-item:hover > .superx-submenu.flyout-left {
  transform: translateX(0);
}

/* RTL Submenu Arrow */
[dir="rtl"] .superx-dropdown-link.has-submenu::after {
  border-left: none;
  border-right: 5px solid currentColor;
  margin-left: 0;
  margin-right: auto;
}

/* RTL Language & Site Dropdowns */
[dir="rtl"] .superx-language-dropdown,
[dir="rtl"] .superx-site-dropdown {
  right: auto;
  left: 0;
}

/* ============================================
   RTL Mobile Menu
   ============================================ */
/* 移动端不需要 RTL 特殊处理，保持和 LTR 一样的布局 */
/* Logo、菜单按钮、菜单滑出方向都保持默认，只需要文本右对齐 */

@media (max-width: 991px) {
  /* 移动端菜单内容右对齐 */
  [dir="rtl"] .superx-mobile-nav-link {
    text-align: right;
  }

  /* 子菜单缩进从右侧 */
  [dir="rtl"] .superx-mobile-submenu {
    padding-left: 0;
    padding-right: var(--superx-spacing-md);
  }

  [dir="rtl"] .superx-mobile-submenu-link {
    border-left: none;
    border-right: 3px solid transparent;
    padding-left: 0;
    padding-right: 12px;
    text-align: right;
  }

  [dir="rtl"] .superx-mobile-submenu-link:hover {
    border-left-color: transparent;
    border-right-color: var(--superx-primary);
  }
}


/* ============================================
   RTL Layout Grid
   ============================================ */
[dir="rtl"] .main-content-grid {
  direction: rtl;
}

[dir="rtl"] .region-sidebar-left {
  order: 3;
}

[dir="rtl"] .content-center {
  order: 2;
}

[dir="rtl"] .region-sidebar-right {
  order: 1;
}

@media (max-width: 991px) {
  [dir="rtl"] .region-sidebar-left {
    order: 2;
  }

  [dir="rtl"] .content-center {
    order: 1;
  }

  [dir="rtl"] .region-sidebar-right {
    order: 3;
  }
}

/* ============================================
   RTL Sidebar
   ============================================ */
[dir="rtl"] .region-sidebar-left .block-title,
[dir="rtl"] .region-sidebar-right .block-title {
  border-bottom: none;
  border-right: 2px solid var(--superx-primary);
  padding-right: var(--superx-spacing-sm);
}

/* ============================================
   RTL Footer
   ============================================ */
[dir="rtl"] .superx-footer-top {
  flex-direction: row-reverse;
}

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

[dir="rtl"] .superx-footer-bottom {
  direction: rtl;
}

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

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

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

/* ============================================
   RTL Components
   ============================================ */
/* Breadcrumb */
[dir="rtl"] .superx-breadcrumb {
  flex-direction: row-reverse;
}

[dir="rtl"] .superx-breadcrumb-separator {
  transform: scaleX(-1);
}

/* Cards */
[dir="rtl"] .superx-news-card-body,
[dir="rtl"] .superx-grid-card-body {
  text-align: right;
}

/* Product */
[dir="rtl"] .superx-product-info {
  text-align: right;
}

[dir="rtl"] .superx-product-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] .superx-product-thumbnails {
  flex-direction: row-reverse;
}

/* Tables */
[dir="rtl"] .superx-table th,
[dir="rtl"] .superx-table td,
[dir="rtl"] .superx-specs-table th,
[dir="rtl"] .superx-specs-table td {
  text-align: right;
}

/* Alerts */
[dir="rtl"] .superx-alert {
  flex-direction: row-reverse;
}

/* Pagination */
[dir="rtl"] .superx-pagination {
  flex-direction: row-reverse;
}

/* Modal */
[dir="rtl"] .superx-modal-header {
  flex-direction: row-reverse;
}

/* ============================================
   RTL Form Elements
   ============================================ */
[dir="rtl"] .superx-form-control {
  text-align: right;
}

[dir="rtl"] .superx-form-label {
  text-align: right;
}

[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="password"],
[dir="rtl"] textarea,
[dir="rtl"] select {
  direction: rtl;
  text-align: right;
}

/* ============================================
   RTL Buttons
   ============================================ */
[dir="rtl"] .btn-superx-primary,
[dir="rtl"] .btn-superx-secondary,
[dir="rtl"] .btn-superx-outline {
  flex-direction: row-reverse;
}

[dir="rtl"] .superx-download-btn {
  flex-direction: row-reverse;
}

/* ============================================
   RTL Icons (Flip directional icons)
   ============================================ */
[dir="rtl"] .bi-arrow-right,
[dir="rtl"] .bi-chevron-right,
[dir="rtl"] .bi-arrow-left,
[dir="rtl"] .bi-chevron-left {
  transform: scaleX(-1);
}

/* ============================================
   RTL Slider
   ============================================ */
[dir="rtl"] .superx-slider-prev {
  left: auto;
  right: 16px;
}

[dir="rtl"] .superx-slider-next {
  right: auto;
  left: 16px;
}

/* ============================================
   RTL Hero Section
   ============================================ */
[dir="rtl"] .hero-content {
  text-align: right;
}

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

[dir="rtl"] .hero-image {
  right: auto;
  left: 0;
}

@media (max-width: 991px) {
  [dir="rtl"] .hero-buttons {
    flex-direction: column;
  }
}

/* ============================================
   RTL Margin/Padding Utilities
   ============================================ */
[dir="rtl"] .mr-1, [dir="rtl"] .mr-2, [dir="rtl"] .mr-3, [dir="rtl"] .mr-4, [dir="rtl"] .mr-5 {
  margin-right: 0;
}

[dir="rtl"] .ml-1, [dir="rtl"] .ml-2, [dir="rtl"] .ml-3, [dir="rtl"] .ml-4, [dir="rtl"] .ml-5 {
  margin-left: 0;
}

[dir="rtl"] .mr-1 { margin-left: 0.25rem; }
[dir="rtl"] .mr-2 { margin-left: 0.5rem; }
[dir="rtl"] .mr-3 { margin-left: 1rem; }
[dir="rtl"] .mr-4 { margin-left: 1.5rem; }
[dir="rtl"] .mr-5 { margin-left: 3rem; }

[dir="rtl"] .ml-1 { margin-right: 0.25rem; }
[dir="rtl"] .ml-2 { margin-right: 0.5rem; }
[dir="rtl"] .ml-3 { margin-right: 1rem; }
[dir="rtl"] .ml-4 { margin-right: 1.5rem; }
[dir="rtl"] .ml-5 { margin-right: 3rem; }

/* ============================================
   RTL Specific Language Classes
   ============================================ */
/* Arabic */
.lang_ar {
  font-family: 'Noto Sans Arabic', sans-serif;
}

/* Hebrew */
.lang_he {
  font-family: 'Noto Sans Hebrew', 'Noto Sans Arabic', sans-serif;
}

/* Persian/Farsi */
.lang_fa {
  font-family: 'Noto Sans Arabic', sans-serif;
}