/* ==========================================================================
   CAHAYA INTAN WISATA — NATIVE ARABIC RTL (RIGHT-TO-LEFT) DESIGN SYSTEM
   ========================================================================== */

html[dir="rtl"],
body.rtl-mode {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
}

body.rtl-mode h1,
body.rtl-mode h2,
body.rtl-mode h3,
body.rtl-mode h4,
body.rtl-mode h5,
body.rtl-mode h6 {
  font-family: var(--font-arabic);
  letter-spacing: normal;
}

/* 1. Header & Navigation Mirroring */
body.rtl-mode .nav-dropdown-menu {
  left: auto;
  right: 0;
}

body.rtl-mode .nav-link::after {
  left: auto;
  right: 0;
}

/* 2. Mobile Drawer RTL */
body.rtl-mode .mobile-drawer {
  right: auto;
  left: -100%;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
}

body.rtl-mode .mobile-drawer.active {
  left: 0;
}

/* 3. Floating CS Widget & Pop-up RTL */
body.rtl-mode .cs-widget-container {
  right: auto;
  left: 26px;
  align-items: flex-start;
}

body.rtl-mode .cs-chat-window {
  right: auto;
  left: 0;
}

body.rtl-mode .message-bubble.bot {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: 4px;
}

body.rtl-mode .message-bubble.user {
  border-top-right-radius: var(--radius-md);
  border-top-left-radius: 4px;
}

/* 4. Timeline Modal RTL Mirroring */
body.rtl-mode .timeline-list {
  padding-left: 0;
  padding-right: 2rem;
}

body.rtl-mode .timeline-list::before {
  left: auto;
  right: 7px;
}

body.rtl-mode .timeline-dot {
  left: auto;
  right: -2rem;
}

/* 5. Card Badges & Modals RTL */
body.rtl-mode .modal-close-btn {
  right: auto;
  left: 16px;
}

body.rtl-mode .footer-links a:hover {
  transform: translateX(-4px);
}

/* 6. Form Fields & Icons in RTL */
body.rtl-mode .form-field-group {
  text-align: right;
}

body.rtl-mode .section-header {
  text-align: center;
}

/* RTL Arrow Flipping */
body.rtl-mode .flip-rtl {
  transform: scaleX(-1);
}