/* RTL Layout Adjustments for Arabic Pages */

[dir="rtl"] {
  font-family: var(--font-family-arabic-sans);
  text-align: start;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-family: var(--font-family-arabic-kufi);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: start;
}

[dir="rtl"] p {
  text-align: start;
}

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="url"] {
  direction: ltr;
  text-align: start;
}

[dir="rtl"] .skip-link {
  inset-inline-start: 50%;
  inset-inline-end: auto;
  transform: translateX(50%);
}

[dir="rtl"] .roadmap-timeline {
  padding-inline-start: 0;
  padding-inline-end: var(--space-6);
}

[dir="rtl"] .roadmap-timeline::before {
  inset-inline-start: auto;
  inset-inline-end: 7px;
}

[dir="rtl"] .roadmap-node::before {
  inset-inline-start: auto;
  inset-inline-end: -21px;
}

[dir="rtl"] .course-card__link::after {
  content: "←";
}

[dir="rtl"] .course-card:hover .course-card__link::after {
  transform: translateX(-4px);
}

[dir="rtl"] .blog-card__link::after {
  content: "←";
}

[dir="rtl"] .accordion-button::after {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

[dir="rtl"] .mega-menu-column__link:hover {
  padding-inline-start: 0;
  padding-inline-end: var(--space-1);
}

[dir="rtl"] .announcement-bar__text {
  text-align: start;
}

[dir="rtl"] .invalid-feedback {
  text-align: start;
}

[dir="rtl"] .finder-progress-bar {
  inset-inline-start: 0;
  inset-inline-end: auto;
}

[dir="rtl"] .form-check {
  padding-inline-start: 1.5em;
  padding-inline-end: 0;
}

[dir="rtl"] .form-check .form-check-input {
  float: inline-start;
  margin-inline-start: -1.5em;
  margin-inline-end: 0;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  float: inline-start;
  padding-inline-end: var(--bs-breadcrumb-item-padding-x);
  padding-inline-start: 0;
}

[dir="rtl"] .video-play-btn svg {
  transform: none;
}

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

[dir="rtl"] .border-inline-start {
  border-inline-start: 3px solid var(--color-gold) !important;
}

[dir="rtl"] .mobile-nav-drawer.offcanvas-end {
  right: 0 !important;
  left: auto !important;
}