/* ============================================================
   RTL Styling Overrides for Trader Wallet Dashboard
   ============================================================ */
html, body {
  direction: rtl !important;
}
.text-start,
.text-sm-start,
.text-md-start,
.text-lg-start,
.text-xl-start {
  text-align: right !important;
}

.text-end,
.text-sm-end,
.text-md-end,
.text-lg-end,
.text-xl-end {
  text-align: left !important;
}

.tw-pill-filters {
  margin-right: auto !important;
  margin-left: 0 !important;
}

@media (min-width: 768px) {
  header.row {
    flex-wrap: nowrap !important;
  }
  header.row .col,
  header.row .col-md {
    flex-grow: 1 !important;
    width: auto !important;
  }
  header.row .col-md-auto,
  header.row .col-12.col-md-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
  }
}

.ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
.ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
.ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
.ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
.ms-5 { margin-left: 0 !important; margin-right: 3rem !important; }
.ms-auto { margin-left: 0 !important; margin-right: auto !important; }

.me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
.me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
.me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
.me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
.me-5 { margin-right: 0 !important; margin-left: 3rem !important; }
.me-auto { margin-right: 0 !important; margin-left: auto !important; }

.ps-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
.ps-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
.ps-3 { padding-left: 0 !important; padding-right: 1rem !important; }
.ps-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
.ps-5 { padding-left: 0 !important; padding-right: 3rem !important; }

.pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
.pe-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
.pe-3 { padding-right: 0 !important; padding-left: 1rem !important; }
.pe-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
.pe-5 { padding-right: 0 !important; padding-left: 3rem !important; }

.tw-sidebar {
  inset: 0 0 0 auto !important; 
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18) !important; 
}

.tw-sidebar-close-btn {
  left: 16px !important;
  right: auto !important;
}

.tw-topbar,
.tw-dashboard-page {
  margin-right: var(--sidebar-width) !important;
  margin-left: 0 !important;
}

.tw-sidebar-toggle {
  margin-left: 16px !important;
  margin-right: 0 !important;
}

.tw-step::before {
  right: 50% !important;
  left: auto !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 991.98px) {
  .tw-sidebar {
    transform: translateX(100%) !important; 
  }
  .tw-sidebar.show,
  .tw-sidebar.showing {
    transform: translateX(0) !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25) !important;
  }
  .tw-topbar,
  .tw-dashboard-page {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* ------------------------------------------------------------
   Sign In Page Overrides
   ------------------------------------------------------------ */
.auth-sidebar-gradient {
  background-position: right center !important;
}

.divider-text::before {
  margin-right: 0 !important;
  margin-left: 1rem !important;
}

.divider-text::after {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}

.social-login-btn .social-icon {
  margin-left: 1rem !important;
  margin-right: 0 !important;
}

/* ------------------------------------------------------------
   Homepage & Transaction History Overrides
   ------------------------------------------------------------ */
@media (min-width: 992px) {
  .tw-sidebar {
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    visibility: visible !important;
    display: flex !important;
  }
  .tw-main-wrapper {
    margin-right: 280px !important;
    margin-left: 0 !important;
  }
}

.tw-step::before,
.tw-step.is-complete::before {
  right: 9% !important;
  left: auto !important;
  transform: translateX(-50%) !important;
}

.tw-vertical-timeline {
  padding-right: 32px !important;
  padding-left: 0 !important;
}

.tw-vertical-timeline::before {
  right: 9px !important;
  left: auto !important;
}

.tw-timeline-marker {
  right: -32px !important;
  left: auto !important;
}

.tw-camera-badge {
  left: 4px !important;
  right: auto !important;
}

.inbound .tw-msg-bubble {
  border-top-right-radius: 4px !important;
  border-top-left-radius: 16px !important;
}

.outbound .tw-msg-bubble {
  border-top-left-radius: 4px !important;
  border-top-right-radius: 16px !important;
}

/* ------------------------------------------------------------
   Services Page Overrides 
   ------------------------------------------------------------ */
.tw-services-page {
  margin-right: var(--sidebar-width) !important;
  margin-left: 0 !important;
}

.tw-services-list-pane {
  border-left: 1px solid rgba(12, 27, 67, 0.08) !important;
  border-right: none !important;
}

.tw-services-search-wrapper .tw-search-icon {
  right: 16px !important;
  left: auto !important;
}

.tw-services-search-wrapper input {
  padding: 0 44px 0 16px !important;
}

.tw-provider-rating .rating-value {
  margin-right: 4px !important;
  margin-left: 0 !important;
}

.tw-service-item-card {
  border-left: 1.5px solid rgba(12, 27, 67, 0.08) !important;
  border-right: 4px solid var(--color-brand-blue) !important;
}

@media (max-width: 991.98px) {
  .tw-services-page {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  
  .tw-services-list-pane {
    border-left: none !important;
    border-bottom: 1px solid rgba(12, 27, 67, 0.08) !important;
  }
}

.offcanvas.show:not(.hiding),
.offcanvas.showing {
  transform: none;
}

.offcanvas.showing,
.offcanvas.show,
.offcanvas.hiding {
  visibility: visible;
}

.offcanvas-end {
  left: 0 !important;
  right: auto !important;
  border-left: none !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  transform: translateX(-100%) !important;
}

.offcanvas-end.showing,
.offcanvas-end.show {
  transform: none !important;
}

.tw-tracking-offcanvas {
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.05) !important;
}

.tw-service-drawer {
  box-shadow: 8px 0 40px rgba(12, 27, 67, 0.14) !important;
}