/* Improved RTL Support for Promptly AI */
/* Arabic Language Layout Styles - Fixed Alignment Issues */

/* Base RTL Direction */
[dir="rtl"] {
  text-align: right;
  direction: rtl;
}

/* Fix navbar alignment */
[dir="rtl"] .navbar {
  text-align: right;
}

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

[dir="rtl"] .navbar-nav {
  padding-right: 0;
}

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

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

/* Fix spacing utilities */
[dir="rtl"] .ms-2 {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .ms-3 {
  margin-right: 1rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .me-1 {
  margin-left: 0.25rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .me-2 {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .me-3 {
  margin-left: 1rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .ps-3 {
  padding-right: 1rem !important;
  padding-left: 0 !important;
}

[dir="rtl"] .pe-3 {
  padding-left: 1rem !important;
  padding-right: 0 !important;
}

[dir="rtl"] .ps-4 {
  padding-right: 1.5rem !important;
  padding-left: 0 !important;
}

[dir="rtl"] .pe-4 {
  padding-left: 1.5rem !important;
  padding-right: 0 !important;
}

/* Fix border directions */
[dir="rtl"] .border-start {
  border-right: 1px solid var(--bs-border-color) !important;
  border-left: none !important;
}

[dir="rtl"] .border-end {
  border-left: 1px solid var(--bs-border-color) !important;
  border-right: none !important;
}

[dir="rtl"] .border-start.border-4 {
  border-right: 4px solid var(--bs-info) !important;
  border-left: none !important;
}

/* Fix flexbox directions for specific components */
[dir="rtl"] .d-flex {
  flex-direction: row;
}

[dir="rtl"] .d-flex.gap-2,
[dir="rtl"] .d-flex.gap-3,
[dir="rtl"] .d-flex.gap-4 {
  flex-direction: row;
}

[dir="rtl"] .d-flex.align-items-center.gap-3 {
  flex-direction: row;
}

/* Fix hero section badges */
[dir="rtl"] .badge-ai {
  display: inline-flex;
  align-items: center;
}

[dir="rtl"] .badge-ai .me-1 {
  margin-left: 0.25rem !important;
  margin-right: 0 !important;
}

/* Fix feature grid cards */
[dir="rtl"] .feature-grid-card {
  text-align: right;
}

[dir="rtl"] .feature-grid-card .d-flex.align-items-start {
  flex-direction: row;
}

[dir="rtl"] .feature-grid-card .gap-3 {
  gap: 1rem;
}

[dir="rtl"] .feature-grid-card .provider-logo {
  margin-left: 1rem;
  margin-right: 0;
}

/* Fix text alignment for centering */
[dir="rtl"] .text-center {
  text-align: center;
}

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

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

/* Fix how it works section */
[dir="rtl"] .step-circle {
  margin-left: 1rem;
  margin-right: 0;
}

[dir="rtl"] .d-flex.align-items-start.gap-3 {
  flex-direction: row;
}

/* Fix code block - keep LTR for code */
[dir="rtl"] .code-block {
  text-align: right;
  direction: ltr;
}

[dir="rtl"] .code-block span {
  display: inline-block;
}

/* Fix demo section */
[dir="rtl"] .response-wrapper {
  border-right: 4px solid var(--bs-info) !important;
  border-left: none !important;
  padding-right: 1rem !important;
  padding-left: 0 !important;
}

[dir="rtl"] .suggestion-chip {
  margin-left: 0.5rem;
  margin-right: 0;
}

[dir="rtl"] .d-flex.flex-wrap.gap-2 {
  flex-direction: row;
}

[dir="rtl"] .text-muted.me-2 {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

/* Fix LLM providers section */
[dir="rtl"] .nav-tabs {
  padding-right: 0;
  justify-content: center;
}

[dir="rtl"] .nav-tabs .nav-link {
  text-align: center;
}

[dir="rtl"] .nav-link .me-2 {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .badge.ms-2 {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}

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

[dir="rtl"] .glass-card.text-center {
  text-align: center;
}

/* Fix justify content between */
[dir="rtl"] .justify-content-between {
  justify-content: space-between;
}

[dir="rtl"] .align-items-center {
  align-items: center;
}

/* Fix workspace badges */
[dir="rtl"] .row.gap-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

[dir="rtl"] .badge .me-1 {
  margin-left: 0.25rem !important;
  margin-right: 0 !important;
}

/* Fix stats section */
[dir="rtl"] .border-end {
  border-left: 1px solid var(--bs-secondary) !important;
  border-right: none !important;
}

/* Fix live chat section */
[dir="rtl"] .rounded-circle.me-3 {
  margin-left: 1rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

[dir="rtl"] .gap-3 {
  gap: 1rem;
}

/* Fix footer */
[dir="rtl"] footer .d-flex {
  flex-direction: row;
}

[dir="rtl"] footer .justify-content-between {
  justify-content: space-between;
}

/* Fix form elements */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}

[dir="rtl"] .form-control {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

/* Fix button icons */
[dir="rtl"] .btn .me-2 {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .btn i {
  display: inline-block;
}

/* Fix streaming cursor */
[dir="rtl"] .streaming-cursor {
  margin-right: 2px;
  margin-left: 0;
}

/* Fix icon rotations for directional icons */
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-angle-right {
  transform: rotate(180deg);
  display: inline-block;
}

[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-angle-left {
  transform: rotate(180deg);
  display: inline-block;
}

/* But don't rotate non-directional icons */
[dir="rtl"] .fa-chevron-down,
[dir="rtl"] .fa-chevron-up,
[dir="rtl"] .fa-sync-alt,
[dir="rtl"] .fa-spinner {
  transform: none;
}

/* Fix toggle buttons */
[dir="rtl"] .btn-outline-info .me-2 {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

/* Fix collapse button */
[dir="rtl"] .collapse .row {
  margin-right: 0;
  margin-left: 0;
}

/* Fix tooltip and preview cards */
[dir="rtl"] .citation-preview {
  text-align: right;
}

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

[dir="rtl"] .doc-title .fas,
[dir="rtl"] .doc-title .far {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Fix hover effects */
[dir="rtl"] .hover-lift {
  transition: transform 0.3s ease;
}


/* Fix modal if any */
[dir="rtl"] .modal-header .btn-close {
  margin: -0.5rem auto -0.5rem -0.5rem;
}

[dir="rtl"] .modal-footer > :not(:first-child) {
  margin-right: 0.25rem;
  margin-left: 0;
}

/* Fix dropdown menus */
[dir="rtl"] .dropdown-menu {
  text-align: right;
}

/* Fix offcanvas */
[dir="rtl"] .offcanvas-start {
  right: 0;
  left: auto;
  transform: translateX(100%);
}

[dir="rtl"] .offcanvas-start.show {
  transform: translateX(0);
}

[dir="rtl"] .offcanvas-end {
  left: 0;
  right: auto;
  transform: translateX(-100%);
}

/* Fix list groups */
[dir="rtl"] .list-group {
  padding-right: 0;
}

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

/* Fix progress bars */
[dir="rtl"] .progress-bar {
  animation: progressBarRTL 0.5s ease-in-out;
}

@keyframes progressBarRTL {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Responsive adjustments for RTL */
@media (max-width: 768px) {
  [dir="rtl"] .navbar-nav {
    text-align: center;
  }
  
  [dir="rtl"] .d-flex.flex-wrap {
    justify-content: flex-start;
  }
  
  [dir="rtl"] .text-md-start {
    text-align: right !important;
  }
  
  [dir="rtl"] .text-md-end {
    text-align: left !important;
  }
  
  [dir="rtl"] .me-md-2 {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
  }
  
  [dir="rtl"] .ms-md-2 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
  }
  
  [dir="rtl"] .offcanvas-start {
    transform: translateX(100%);
  }
  
  [dir="rtl"] .offcanvas-start.show {
    transform: translateX(0);
  }
  
  [dir="rtl"] .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  
  [dir="rtl"] .feature-grid-card .d-flex {
    flex-direction: column;
    text-align: center;
  }
}

/* Large screens */
@media (min-width: 992px) {
  [dir="rtl"] .text-lg-start {
    text-align: right !important;
  }
  
  [dir="rtl"] .text-lg-end {
    text-align: left !important;
  }
  
  [dir="rtl"] .me-lg-2 {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
  }
  
  [dir="rtl"] .ms-lg-2 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
  }
}

/* Print styles */
@media print {
  [dir="rtl"] {
    text-align: right;
  }
  
  [dir="rtl"] .container {
    padding-right: 0;
    padding-left: 0;
  }
}

/* Smooth transitions for language switching */
html,
body,
[dir="rtl"],
[dir="ltr"] {
  transition: all 0.3s ease-in-out;
}

/* Custom scrollbar for RTL */
[dir="rtl"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

[dir="rtl"] ::-webkit-scrollbar-track {
  background: #1a1a2e;
}

[dir="rtl"] ::-webkit-scrollbar-thumb {
  background: #2dd4bf;
  border-radius: 5px;
}

[dir="rtl"] ::-webkit-scrollbar-thumb:hover {
  background: #60a5fa;
}

/* Fix grid row margins in RTL */
[dir="rtl"] .row {
  margin-right: 0;
  margin-left: 0;
}

[dir="rtl"] .row.g-4 {
  margin-right: 0;
  margin-left: 0;
}


/* Fix justify content center */
[dir="rtl"] .justify-content-center {
  justify-content: center;
}


/* Fix badge positioning in RTL */
[dir="rtl"] .badge {
  display: inline-block;
}

/* Fix navbar toggler in RTL */
[dir="rtl"] .navbar-toggler {
  margin-left: 0;
  margin-right: auto;
}



[dir="rtl"] .code-block {
  direction: rtl;
  text-align: right;
  width: 100%;
}

/* Interactive Chat RTL Overrides */
[dir="rtl"] .user-message-bubble {
    border-left: none !important;
    border-right: 3px solid var(--primary-color) !important;
}

[dir="rtl"] .chat-action-buttons {
    flex-direction: row !important;
}