/* ============================================
   RTL.CSS — Right-to-Left Language Support
   Speech Therapy Practice Website
   ============================================ */

[dir="rtl"] {
  /* ── Typography & Text ── */
  text-align: right;
  direction: rtl;

  /* ── Navigation ── */
  .nav-container {
    flex-direction: row-reverse;
  }

  .nav-menu {
    flex-direction: row-reverse;
  }

  .nav-logo {
    flex-direction: row-reverse;
  }

  .nav-right {
    flex-direction: row-reverse;
  }

  .dropdown-menu {
    left: auto;
    right: 0;
  }

  .hamburger {
    margin-left: 0;
    margin-right: auto;
  }

  /* ── Hero Section ── */
  .hero-content {
    text-align: right;
  }

  .hero-badge {
    flex-direction: row-reverse;
  }

  .hero-stats {
    flex-direction: row-reverse;
  }

  .hero-cta {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  /* ── Cards ── */
  .service-card {
    text-align: right;
  }

  .feature-item {
    flex-direction: row-reverse;
    text-align: right;
  }

  .feature-item .feature-icon {
    margin-left: 0;
    margin-right: 0;
  }

  .stat-card {
    text-align: right;
  }

  /* ── Testimonials ── */
  .testimonial-author {
    flex-direction: row-reverse;
    text-align: right;
  }

  .testimonial-card {
    text-align: right;
  }

  /* ── Forms ── */
  .form-group label {
    text-align: right;
  }

  .form-row {
    flex-direction: row-reverse;
  }

  .input-icon {
    left: auto;
    right: 16px;
  }

  .form-control {
    padding-left: 16px;
    padding-right: 48px;
  }

  /* ── Lists & Icons ── */
  .check-list li {
    flex-direction: row-reverse;
    text-align: right;
  }

  .check-list li::before {
    margin-left: 12px;
    margin-right: 0;
  }

  .breadcrumb {
    flex-direction: row-reverse;
  }

  /* ── Section Headers ── */
  .section-header {
    text-align: right;
  }

  .section-label {
    flex-direction: row-reverse;
  }

  .section-label::before {
    margin-left: 8px;
    margin-right: 0;
  }

  /* ── Timeline ── */
  .timeline-item {
    flex-direction: row-reverse;
    text-align: right;
  }

  .timeline-connector {
    left: auto;
    right: 20px;
  }

  /* ── Tabs ── */
  .tabs-nav {
    flex-direction: row-reverse;
  }

  /* ── Resource Cards ── */
  .resource-card {
    text-align: right;
  }

  .resource-card .card-meta {
    flex-direction: row-reverse;
  }

  /* ── Dashboard ── */
  .sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--color-border);
  }

  .dashboard-main {
    margin-left: 0;
    /* margin-right: 260px; */
  }

  .sidebar-nav li a {
    flex-direction: row-reverse;
    text-align: right;
  }

  .sidebar-nav li a .nav-icon {
    margin-right: 0;
    margin-left: 12px;
  }

  .stats-grid .stat-card {
    text-align: right;
  }

  /* ── Table ── */
  .table th,
  .table td {
    text-align: right;
  }

  /* ── Footer ── */
  .footer-grid {
    direction: rtl;
  }

  .footer-col {
    text-align: right;
  }

  .footer-bottom {
    flex-direction: row-reverse;
  }

  .social-links {
    flex-direction: row-reverse;
  }

  .footer-bottom-links {
    flex-direction: row-reverse;
  }

  /* ── Alert & Notification ── */
  .alert {
    flex-direction: row-reverse;
    text-align: right;
  }

  .alert-icon {
    margin-left: 12px;
    margin-right: 0;
  }

  /* ── About Page ── */
  .about-intro {
    flex-direction: row-reverse;
  }

  .team-card {
    text-align: right;
  }

  .values-list li {
    flex-direction: row-reverse;
    text-align: right;
  }

  /* ── Contact Page ── */
  .contact-info-item {
    flex-direction: row-reverse;
    text-align: right;
  }

  .contact-info-item .info-icon {
    margin-left: 16px;
    margin-right: 0;
  }

  /* ── Progress Bars ── */
  .progress-bar-fill {
    float: right;
  }

  /* ── Booking ── */
  .step-indicator {
    flex-direction: row-reverse;
  }

  .step-item {
    flex-direction: row-reverse;
  }

  /* ── 1024px Admin Dashboard Drawer RTL support ── */
  @media (max-width: 1024px) {

    .admin-dashboard-page .sidebar,
    .user-dashboard-page .sidebar {
      transform: none !important;
      /* Cancel legacy 767px rightward transform */
      right: auto;
    }

    .admin-dashboard-page .sidebar-menu-drawer,
    .user-dashboard-page .sidebar-menu-drawer {
      left: auto !important;
      right: -320px;
      /* Hide offscreen right */
      border-right: none !important;
      border-left: 1px solid var(--color-border);
    }

    .admin-dashboard-page .sidebar.open .sidebar-menu-drawer,
    .user-dashboard-page .sidebar.open .sidebar-menu-drawer {
      transform: translateX(-320px);
      /* Slide in leftwards from the right edge */
    }

    .dashboard-hamburger {
      margin-right: 0 !important;
      margin-left: 16px !important;
    }

    .drawer-header.mobile-only .dashboard-hamburger {
      margin-right: 0 !important;
      margin-left: 16px !important;
    }
  }

  /* ── Mobile Sidebar ── */
  @media (max-width: 767px) {
    .sidebar:not(.admin-dashboard-page .sidebar):not(.user-dashboard-page .sidebar) {
      right: 0;
      left: auto;
      transform: translateX(100%);
    }

    .sidebar:not(.admin-dashboard-page .sidebar):not(.user-dashboard-page .sidebar).open {
      transform: translateX(0);
    }

    .mobile-menu {
      text-align: right;
    }

    .mobile-menu .nav-item {
      text-align: right;
    }
  }

  /* ── Animations (flip horizontal) ── */
  .slide-in-left {
    animation-name: slide-in-right-rtl;
  }

  .slide-in-right {
    animation-name: slide-in-left-rtl;
  }
}

/* ── RTL-specific Keyframes ── */
@keyframes slide-in-right-rtl {
  from {
    opacity: 0;
    transform: translateX(60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-left-rtl {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── RTL Toggle Button ── */
.rtl-toggle {
  background: none;
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-full);
  padding: 4px 12px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.05em;
}

.rtl-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}