/* ============================================================
   WebStackRank RTL Overrides
   Loaded alongside app.css for Arabic pages
   ============================================================ */

/* Base RTL body */
[dir="rtl"] body {
  font-family: 'Cairo', 'Tajawal', -apple-system, sans-serif;
  direction: rtl;
  text-align: right;
}

/* ============================================================
   Navigation RTL
   ============================================================ */
[dir="rtl"] .wsr-nav-link {
  padding-right: 0.875rem;
  padding-left: 0.875rem;
}

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

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

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

[dir="rtl"] .wsr-breadcrumb li + li::before {
  content: '\\';
}

/* ============================================================
   WhatsApp Float RTL
   ============================================================ */
[dir="rtl"] .wsr-whatsapp-float {
  right: auto;
  left: 28px;
}

@media (max-width: 768px) {
  [dir="rtl"] .wsr-whatsapp-float {
    right: auto;
    left: 20px;
  }
}

/* ============================================================
   Bootstrap Margin/Padding Flips
   ============================================================ */

/* ms- (margin-start) in RTL = margin-right */
[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
[dir="rtl"] .ms-1    { margin-right: 0.25rem !important; margin-left: 0 !important; }
[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"] .ms-4    { margin-right: 1.5rem !important;  margin-left: 0 !important; }
[dir="rtl"] .ms-5    { margin-right: 3rem !important;    margin-left: 0 !important; }

/* me- (margin-end) in RTL = margin-left */
[dir="rtl"] .me-auto { margin-left: auto !important;  margin-right: 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"] .me-4    { margin-left: 1.5rem !important;  margin-right: 0 !important; }
[dir="rtl"] .me-5    { margin-left: 3rem !important;    margin-right: 0 !important; }

/* ps- (padding-start) in RTL = padding-right */
[dir="rtl"] .ps-1    { padding-right: 0.25rem !important; padding-left: 0 !important; }
[dir="rtl"] .ps-2    { padding-right: 0.5rem !important;  padding-left: 0 !important; }
[dir="rtl"] .ps-3    { padding-right: 1rem !important;    padding-left: 0 !important; }
[dir="rtl"] .ps-4    { padding-right: 1.5rem !important;  padding-left: 0 !important; }
[dir="rtl"] .ps-5    { padding-right: 3rem !important;    padding-left: 0 !important; }

/* pe- (padding-end) in RTL = padding-left */
[dir="rtl"] .pe-1    { padding-left: 0.25rem !important; padding-right: 0 !important; }
[dir="rtl"] .pe-2    { padding-left: 0.5rem !important;  padding-right: 0 !important; }
[dir="rtl"] .pe-3    { padding-left: 1rem !important;    padding-right: 0 !important; }
[dir="rtl"] .pe-4    { padding-left: 1.5rem !important;  padding-right: 0 !important; }
[dir="rtl"] .pe-5    { padding-left: 3rem !important;    padding-right: 0 !important; }

/* Text alignment flips */
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end   { text-align: left !important; }

/* Float flips */
[dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-end   { float: left !important; }

/* Border flips */
[dir="rtl"] .border-start { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; border-left: 0 !important; }
[dir="rtl"] .border-end   { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; border-right: 0 !important; }

/* Rounded corners flips */
[dir="rtl"] .rounded-start { border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0 !important; }
[dir="rtl"] .rounded-end   { border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius) !important; }

/* ============================================================
   Admin Sidebar RTL
   ============================================================ */
[dir="rtl"] .admin-sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--wsr-border);
}

[dir="rtl"] .admin-main {
  margin-left: 0;
  margin-right: var(--admin-sidebar-width, 260px);
}

[dir="rtl"] .admin-nav-link.active {
  border-left: none;
  border-right: 3px solid var(--wsr-yellow);
  padding-left: 0.875rem;
  padding-right: calc(0.875rem - 3px);
}

[dir="rtl"] .admin-sidebar-collapsed ~ .admin-main,
[dir="rtl"] .admin-layout.sidebar-collapsed .admin-main {
  margin-right: 72px;
  margin-left: 0;
}

/* ============================================================
   Customer Sidebar RTL
   ============================================================ */
[dir="rtl"] .customer-sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--wsr-border);
}

[dir="rtl"] .customer-main {
  margin-left: 0;
  margin-right: 240px;
}

/* ============================================================
   Icon Spacing RTL
   ============================================================ */
[dir="rtl"] .bi + span,
[dir="rtl"] .bi + * {
  margin-right: 0.5rem;
  margin-left: 0;
}

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

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

[dir="rtl"] .dropdown-menu-start {
  left: auto;
  right: 0;
}

/* ============================================================
   Footer RTL
   ============================================================ */
[dir="rtl"] .wsr-footer {
  text-align: right;
}

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

[dir="rtl"] .wsr-form-control::placeholder {
  text-align: right;
}

/* ============================================================
   Alert RTL
   ============================================================ */
[dir="rtl"] .wsr-alert {
  flex-direction: row-reverse;
  text-align: right;
}

/* ============================================================
   Gap utilities (flex row-reverse fix)
   ============================================================ */
[dir="rtl"] .d-flex:not(.flex-column) {
  /* Let Bootstrap RTL handle flex direction where needed */
}

/* ============ C4 RTL OVERRIDES ============ */

/* Marquee direction for RTL */
[dir="rtl"] .wsr-marquee-track { animation-direction: reverse; }

/* Feature rows */
[dir="rtl"] .wsr-feature-row { flex-direction: row-reverse; }
[dir="rtl"] .wsr-feature-body { text-align: right; }

/* Location cards (block layout — no flex flip needed; just align inner text) */
[dir="rtl"] .wsr-location-card { text-align: right; }
[dir="rtl"] .wsr-location-card .d-flex { flex-direction: row-reverse; }

/* Blog/Portfolio cards: arrows + tags align right */
[dir="rtl"] .wsr-blog-read-more,
[dir="rtl"] .wsr-portfolio-tags { flex-direction: row-reverse; }
[dir="rtl"] .wsr-blog-body,
[dir="rtl"] .wsr-portfolio-body { text-align: right; }

/* Service cards / industry cards / process cards */
[dir="rtl"] .wsr-service-card,
[dir="rtl"] .wsr-industry-card,
[dir="rtl"] .wsr-process-card { text-align: right; }

/* Pill rows + tab rows: don't reverse since flex-wrap rows look fine in either dir */

/* Tech grid: keep wrap natural */
[dir="rtl"] .wsr-tech-grid { justify-content: center; }

/* Announcement close button: flip to right edge */
[dir="rtl"] .wsr-announcement-close { left: 1rem; right: auto; }

/* Pricing features: checkmark icons sit on right */
[dir="rtl"] .wsr-pricing-features li { flex-direction: row-reverse; text-align: right; }

/* Forms */
[dir="rtl"] .wsr-form-control,
[dir="rtl"] .wsr-form-control::placeholder,
[dir="rtl"] select.wsr-form-control { text-align: right; }
[dir="rtl"] .wsr-newsletter-form { flex-direction: row-reverse; }

/* Inline arrow icons inside CTAs — flip orientation for RTL */
[dir="rtl"] .btn-wsr-primary .bi-arrow-right,
[dir="rtl"] .btn-wsr-outline .bi-arrow-right,
[dir="rtl"] a .bi-arrow-right { transform: scaleX(-1); }

/* Hero floating cards: physical right/left don't auto-flip — explicitly mirror */
[dir="rtl"] .wsr-hero-glow--left { right: -10%; left: auto; }

/* ============ END C4 RTL OVERRIDES ============ */

/* ============ C5 SAAS THEME RTL PARITY ============ */

/* Gradient text direction reads naturally either way, but linear-gradient
   angles are visual — flip 135deg to 225deg for symmetry in RTL */
[dir="rtl"] .gradient-text,
[dir="rtl"] .text-gradient {
  background: linear-gradient(225deg, #6B85FF 0%, #C895D6 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Footer glow line + footer link hover offset mirrors */
[dir="rtl"] .wsr-footer-link:hover { transform: translateX(-2px); }

/* Scanning shimmer on cards: reverse direction for RTL */
[dir="rtl"] .wsr-service-card::before,
[dir="rtl"] .wsr-pricing-card::before,
[dir="rtl"] .wsr-portfolio-card::before {
  left: auto;
  right: -120%;
  background: linear-gradient(250deg, transparent 0%, rgba(10, 38, 230, 0.10) 50%, transparent 100%);
  transition: right 700ms ease;
}
[dir="rtl"] .wsr-service-card:hover::before,
[dir="rtl"] .wsr-pricing-card:hover::before,
[dir="rtl"] .wsr-portfolio-card:hover::before {
  left: auto;
  right: 130%;
}

/* Announcement gradient also flips angle to read left-to-right of attention */
[dir="rtl"] .wsr-announcement {
  background: linear-gradient(270deg, rgba(10, 38, 230, 0.18) 0%, rgba(141, 90, 116, 0.12) 100%);
}

/* ============ END C5 RTL PARITY ============ */