/* Rtl support css start here */

/* header css start here */
.custom--dropdown {
    margin-left: unset !important;
    margin-right: 20px;

}

.dropdown-list>.dropdown-list__item .text,
.custom--dropdown>.custom--dropdown__selected .text {
    padding-left: unset !important;
    padding-right: 4px;
}

.custom--dropdown>.dropdown-list {
    right: unset !important;
    left: 0;
}

.navbar-brand.logo {
    margin-right: unset !important;
    margin-left: 50px !important;
}

.dropdown-list>.dropdown-list__item .thumb img,
.custom--dropdown>.custom--dropdown__selected .thumb img {
    margin-right: 0px !important;
    margin-left: 5px;
}

@media (min-width: 992px) {
    .nav-menu .nav-item {
        padding-right: unset !important;
        padding-left: 30px;

    }
}

/* header css end here */


/* slider code start start */
.slick-slider .slick-track {
    display: flex !important;
}

.slick-slider .slick-slide {
    height: auto !important;
    float: none !important;
    /* RTL safe */
}

.blog-slider .slick-dots {
    left: unset !important;
    right: 55px;
}



.blog-slider .slick-prev {
    left: unset !important;
    right: 0px;

}

.blog-slider .slick-next {
    right: 166px !important;
    left: unset !important;
}

@media screen and (max-width: 575px) {
    .blog-slider .slick-next {
        left: unset;
        right: 75px;
    }

    .blog-slider .slick-prev {
        left: unset;
        right: 15px;
    }
}

.blog-slider .slick-dots {
    right: 55px;
    left: unset;
}

/* faq rtl css here */

.custom--accordion .accordion-button[aria-expanded="true"]::after,
.custom--accordion .accordion-button[aria-expanded="false"]::after {

    right: unset !important;
    left: 24px;
}

/* Cta css here */
.section-heading.style-left {
    text-align: right !important;
}

/* how to work css start here  */

.how-work-item__shape {
    left: -145px;
    right: unset !important;
}

@media screen and (max-width: 1399px) {
    .how-work-item__shape {
        left: -120px;
        right: unset !important;
    }
}

@media screen and (max-width: 1199px) {
    .how-work-item__shape {
        left: -90px;
        right: unset !important;
    }
}

@media screen and (max-width: 991px) {
    .how-work-item__shape {
        left: -140px;
        right: unset !important;
    }
}

@media screen and (max-width: 767px) {
    .how-work-item__shape {
        left: -110px;
        right: unset !important;

    }
}




/* login css start here   */

.form--check .form-check-label {
    padding-right: 12px;
    padding-left: unset;
}

.password-show-hide {
    right: unset !important;
    left: 20px;
}

/* footer css here */

.footer-contact-menu__item-content {
    padding-left: unset !important;
    padding-right: 15px;
}

.btn .btn-icon {
    margin-right: unset !important;
    margin-left: 5px !important;

}

/* user dashboard css start here   */


.dashboard__right {
    padding-left: unset !important;
    padding-right: 320px;
}

@media screen and (max-width: 991px) {
    .dashboard__right {
        width: 100%;
        padding-left: unset !important;
        padding-right: 0 !important;
    }
}

.dashboard .sidebar-menu.show-sidebar {
    transform: translateX(0) !important;
}


.dashboard .sidebar-menu {
    left: unset !important;
    right: 0;

}

.dashboard .sidebar-menu__close {
    right: unset !important;
    left: 16px !important;
}

@media screen and (max-width: 991px) {
    .dashboard .sidebar-menu {
        transform: translateX(100%) !important;
    }
}

.dashboard .sidebar-menu-list__item.has-dropdown>a:after {
    right: unset !important;
    left: 16px;

}

.dashboard .sidebar-menu-list__item.has-dropdown>a:after {
    transform: rotate(180deg);
}

.dashboard .sidebar-submenu-list__link {
    padding-left: unset !important;
    padding-right: 35px !important;
}

.dashboard .sidebar-submenu-list__link::before {
    left: unset !important;
    right: 10px;
}

.dashboard .sidebar-menu-list__link .icon {
    margin-right: unset !important;
    margin-left: 8px !important;
}

.dashboard .table thead tr th:first-child {
    text-align: right;
    border-radius: 0px 6px 0px 0;
}

.dashboard .table thead tr th:last-child {
    border-radius: 6px 0px 0 0 !important;
    text-align: right !important;
    border-left: 1px solid #c1c9d066 !important;
}

.dashboard .table thead tr th:not(:first-child) {
    border-right: 0px !important;
}

.dashboard .table thead tr th {
    border-right: 1px solid #c1c9d066 !important;
    border-left: 0px !important;

}

.dashboard .table thead tr th {
    border-left: none !important;
}

.select2+.select2-container .select2-selection__arrow {
    right: unset !important;
    left: 15px !important;
}

.dashboard .user-info .user-info-dropdown__link {
    margin-right: 0 !important;
    text-align: right !important;
}

.dashboard .user-info .user-info-dropdown__link .icon {
    margin-right: unset !important;
    margin-left: 8px;

}

.dashboard .user-info .user-info-dropdown {
    right: unset !important;
    left: 0px !important;

}

.dashboard-container .select-input .select2+.select2-container .select2-selection__rendered {
    border-radius: 1px 8px 8px 0px !important;
}


.dashboard .widget-blue {
    background: linear-gradient(to left, #e0f0ffb8, #fff) !important;
}


.dashboard .widget-purple {
    background: linear-gradient(to left, #f5f0ff, #fff) !important;
}


.dashboard .widget-red {
    background: linear-gradient(to left, #ffe0e082, #fff) !important;
}


.dashboard .widget-green {
    background: linear-gradient(to left, #e0ffe9b8, #fff) !important;
}


.dashboard .widget-yellow {
    background: linear-gradient(to left, #fffde7, #fff) !important;
}

.dashboard .widget-yellow .dashboard-widget__icon {
    background-color: #ca8a04;
}

.dashboard .widget-orange {
    background: linear-gradient(to left, #fff3e0, #fff) !important;
}


.dashboard .widget-pink {
    background: linear-gradient(to left, #ffe4e6, #fff) !important;
}


.dashboard .widget-teal {
    background: linear-gradient(to left, #e0fafa, #fff) !important;
}


.dashboard .widget-lime {
    background: linear-gradient(to left, #ecfccb, #fff) !important;
}


.dashboard .widget-cyan {
    background: linear-gradient(to left, #cffafe, #fff) !important;
}


.dashboard .widget-indigo {
    background: linear-gradient(to left, #e0e7ff, #fff) !important;
}

.dashboard .widget-brown {
    background: linear-gradient(to left, #efebe9, #fff) !important;
}


.dashboard .widget-gray {
    background: linear-gradient(to left, #f3f4f6, #fff) !important;
}

.dashboard .widget-sky {
    background: linear-gradient(to left, #e0f7fa, #fff) !important;
}


.dashboard .widget-rose {
    background: linear-gradient(to left, #ffe4e6, #fff) !important;
}


.dashboard .widget-neon {
    background: linear-gradient(to left, #e0ffe8, #fff) !important;
}

/* Fix coupon input-group RTL layout - SCOPED to coupon groups only
   Bootstrap RTL already handles normal input-groups correctly.
   Only coupon/promo code input groups need the button-on-left layout. */
[dir="rtl"] .input-group--coupon,
[dir="rtl"] .coupon-input-group {
    flex-direction: row-reverse;
    direction: ltr;
}

[dir="rtl"] .input-group--coupon > .form-control,
[dir="rtl"] .input-group--coupon > .form--control,
[dir="rtl"] .coupon-input-group > .form-control,
[dir="rtl"] .coupon-input-group > .form--control {
    border-radius: 0 8px 8px 0;
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .input-group--coupon > .input-group-text,
[dir="rtl"] .coupon-input-group > .input-group-text {
    border-radius: 8px 0 0 8px;
}

/* General input-group text alignment fix for RTL */
[dir="rtl"] .input-group > .form-control,
[dir="rtl"] .input-group > .form--control {
    text-align: right;
}

/* ============================================================
   Chat Messages Fix - WhatsApp Style
   
   In BOTH LTR and RTL:
   - message--right (sent by user) → appears on RIGHT side
   - message--left (received) → appears on LEFT side
   
   Using margin-inline-start/end for proper RTL handling
   ============================================================ */

/* Received messages (from other party) - always LEFT side */
.single-message.message--left {
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.single-message.message--left .message-content {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px 12px 12px 4px !important;
    color: #1f2937 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Sent messages (by user) - always RIGHT side */
.single-message.message--right {
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.single-message.message--right .message-content {
    background-color: #dcf8c6 !important;
    border: 1px solid #c5e8b0 !important;
    border-radius: 12px 12px 4px 12px !important;
    color: #1f2937 !important;
}

/* RTL: Override Bootstrap's auto-flip behavior */
[dir="rtl"] .single-message.message--left {
    margin-left: 0 !important;
    margin-right: auto !important;
}

[dir="rtl"] .single-message.message--right {
    margin-left: auto !important;
    margin-right: 0 !important;
}

[dir="rtl"] .single-message.message--left .message-content {
    border-radius: 12px 12px 4px 12px !important;
}

[dir="rtl"] .single-message.message--right .message-content {
    border-radius: 12px 12px 12px 4px !important;
}

/* Message text styling */
.single-message .message-content .message-text {
    color: #1f2937 !important;
    margin: 0 !important;
    word-break: break-word !important;
}

/* Message time */
.single-message .message-time {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    margin-top: 4px !important;
}

/* ============================================================
   Chat Messages - Dark Mode
   ============================================================ */
[data-theme="dark"] .single-message.message--left .message-content {
    background-color: hsl(222 47% 12%) !important;
    border-color: hsl(217 33% 20%) !important;
    color: hsl(210 40% 98%) !important;
}

[data-theme="dark"] .single-message.message--right .message-content {
    background-color: hsl(142 40% 15%) !important;
    border-color: hsl(142 30% 25%) !important;
    color: hsl(210 40% 98%) !important;
}

[data-theme="dark"] .single-message .message-content .message-text {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .single-message .message-time {
    color: hsl(215 20% 55%) !important;
}

/* Chat area background */
[data-theme="dark"] .msg-body,
[data-theme="dark"] .chatbox-area__body {
    background-color: hsl(224 71% 4%) !important;
}

/* Chat header */
[data-theme="dark"] .chat-box__header {
    background-color: hsl(222 47% 8%) !important;
    border-bottom-color: hsl(217 33% 17%) !important;
}

/* Chat input area */
[data-theme="dark"] .chat-box__footer,
[data-theme="dark"] .message-input-area {
    background-color: hsl(222 47% 8%) !important;
    border-top-color: hsl(217 33% 17%) !important;
}

[data-theme="dark"] .chat-box__footer textarea,
[data-theme="dark"] .message-input-area textarea {
    background-color: hsl(222 47% 11%) !important;
    color: hsl(210 40% 98%) !important;
    border-color: hsl(217 33% 20%) !important;
}

/* Conversation list */
[data-theme="dark"] .chat-list__item {
    background-color: hsl(222 47% 8%) !important;
    border-bottom-color: hsl(217 33% 17%) !important;
}

[data-theme="dark"] .chat-list__item:hover,
[data-theme="dark"] .chat-list__item.active {
    background-color: hsl(222 47% 12%) !important;
}

[data-theme="dark"] .chat-list__item .name {
    color: hsl(210 40% 98%) !important;
}

[data-theme="dark"] .chat-list__item .last-message-text {
    color: hsl(215 20% 60%) !important;
}

/* Contact panel */
[data-theme="dark"] .contact-info-panel {
    background-color: hsl(222 47% 8%) !important;
    border-left-color: hsl(217 33% 17%) !important;
}

[dir="rtl"][data-theme="dark"] .contact-info-panel {
    border-left-color: transparent !important;
    border-right-color: hsl(217 33% 17%) !important;
}

/* Conversation sidebar */
[data-theme="dark"] .chatbox-area__sidebar,
[data-theme="dark"] .conversation-sidebar {
    background-color: hsl(222 47% 6%) !important;
    border-right-color: hsl(217 33% 17%) !important;
}

[dir="rtl"][data-theme="dark"] .chatbox-area__sidebar,
[dir="rtl"][data-theme="dark"] .conversation-sidebar {
    border-right-color: transparent !important;
    border-left-color: hsl(217 33% 17%) !important;
}

/* ============================================================
   RTL Chat Header Fix
   Move the back arrow button from left to right in RTL
   ============================================================ */
[dir="rtl"] .message-inbox-btn {
    left: unset !important;
    right: 14px !important;
}

[dir="rtl"] .chat-box__header .d-flex.align-items-center.gap-3 {
    margin-right: 50px !important;
    margin-left: 0 !important;
}

/* ============================================================
   Phase 5.2: Comprehensive RTL Fixes
   Date: 2026-02-01
   ============================================================ */

/* ========================================
   5.2.1 Select2 RTL Comprehensive Fix
   Problem: Arrow overlaps text in RTL
======================================== */
[dir="rtl"] .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 12px !important;
    padding-left: 32px !important;
    text-align: right !important;
}

[dir="rtl"] .select2-container .select2-selection--single .select2-selection__arrow {
    right: auto !important;
    left: 8px !important;
}

[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

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

[dir="rtl"] .select2-container .select2-results__option {
    padding-right: 12px !important;
    padding-left: 8px !important;
    text-align: right !important;
}

[dir="rtl"] .select2-container--default .select2-results__option--highlighted {
    text-align: right !important;
}

[dir="rtl"] .select2-search--dropdown .select2-search__field {
    text-align: right !important;
    padding-right: 12px !important;
}

/* Select2 Multiple */
[dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    float: right !important;
    margin-left: 5px !important;
    margin-right: 0 !important;
}

[dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-left: 4px !important;
    margin-right: 0 !important;
}

/* ========================================
   5.2.2 Dropdown & Accordion Arrows RTL
======================================== */
[dir="rtl"] .dropdown-toggle::after {
    margin-left: 0 !important;
    margin-right: 0.5em !important;
}

[dir="rtl"] .accordion-button::after {
    margin-left: 0 !important;
    margin-right: auto !important;
}

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

/* Dropdown menu positioning */
[dir="rtl"] .dropdown-menu {
    text-align: right !important;
}

[dir="rtl"] .dropdown-menu-end {
    --bs-position: start !important;
    right: auto !important;
    left: 0 !important;
}

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

[dir="rtl"] .dropdown-item i,
[dir="rtl"] .dropdown-item svg {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* ========================================
   5.2.3 Sidebar V2 RTL Enhancements
======================================== */
[dir="rtl"] .sidebar-v2-section__arrow {
    margin-left: 0 !important;
    margin-right: auto !important;
    transform: rotate(180deg);
}

[dir="rtl"] .sidebar-v2-section.is-expanded .sidebar-v2-section__arrow {
    transform: rotate(0deg);
}

[dir="rtl"] .sidebar-v2-list__item a {
    padding: 10px 48px 10px 16px !important;
}

[dir="rtl"] .sidebar-v2-list__item a i:first-child {
    position: absolute;
    right: 16px !important;
    left: auto !important;
}

[dir="rtl"] .sidebar-v2-section__icon {
    margin-left: 10px !important;
    margin-right: 0 !important;
}

[dir="rtl"] .sidebar-v2-item--single {
    text-align: right !important;
}

[dir="rtl"] .sidebar-v2-item--single .sidebar-v2-item__icon {
    margin-left: 10px !important;
    margin-right: 0 !important;
}

[dir="rtl"] .sidebar-v2-close {
    right: auto !important;
    left: 12px !important;
}

/* ========================================
   5.2.4 Icons & Buttons RTL
======================================== */
[dir="rtl"] .btn i + span,
[dir="rtl"] .btn span + i {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

[dir="rtl"] .btn i:first-child {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

[dir="rtl"] .btn i:last-child {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

/* Chevron flip for RTL */
[dir="rtl"] .fa-chevron-right:not(.no-flip)::before {
    content: "\f053" !important;
}

[dir="rtl"] .fa-chevron-left:not(.no-flip)::before {
    content: "\f054" !important;
}

[dir="rtl"] .fa-arrow-right:not(.no-flip)::before {
    content: "\f060" !important;
}

[dir="rtl"] .fa-arrow-left:not(.no-flip)::before {
    content: "\f061" !important;
}

/* ========================================
   5.2.5 Form Elements RTL
======================================== */
[dir="rtl"] .form-label {
    text-align: right !important;
}

[dir="rtl"] .form-check {
    padding-left: 0 !important;
    padding-right: 1.5em !important;
}

[dir="rtl"] .form-check .form-check-input {
    float: right !important;
    margin-left: 0.5em !important;
    margin-right: -1.5em !important;
}

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

[dir="rtl"] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: 0 !important;
    margin-right: -1px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
}

[dir="rtl"] .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

/* Input icons */
[dir="rtl"] .input-icon-right {
    right: auto !important;
    left: 12px !important;
}

[dir="rtl"] .input-icon-left {
    left: auto !important;
    right: 12px !important;
}

/* ========================================
   5.2.6 Tables RTL
======================================== */
[dir="rtl"] .table {
    text-align: right !important;
}

[dir="rtl"] .table th,
[dir="rtl"] .table td {
    text-align: right !important;
}

[dir="rtl"] .table th:last-child,
[dir="rtl"] .table td:last-child {
    text-align: center !important;
}

/* ========================================
   5.2.7 Alerts & Notifications RTL
======================================== */
[dir="rtl"] .alert {
    text-align: right !important;
}

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

[dir="rtl"] .alert-dismissible .btn-close {
    right: auto !important;
    left: 0 !important;
}

[dir="rtl"] .alert i:first-child,
[dir="rtl"] .alert svg:first-child {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

/* Toast notifications */
[dir="rtl"] .toast {
    text-align: right !important;
}

[dir="rtl"] .toast-header {
    flex-direction: row-reverse !important;
}

/* ========================================
   5.2.8 Modal RTL
======================================== */
[dir="rtl"] .modal-header {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .modal-header .btn-close {
    margin: -0.5rem auto -0.5rem -0.5rem !important;
}

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

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

[dir="rtl"] .modal-footer {
    flex-direction: row-reverse !important;
}

/* ========================================
   5.2.9 Pagination RTL
======================================== */
[dir="rtl"] .pagination {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .page-item:first-child .page-link {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--bs-pagination-border-radius) !important;
    border-bottom-right-radius: var(--bs-pagination-border-radius) !important;
}

[dir="rtl"] .page-item:last-child .page-link {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: var(--bs-pagination-border-radius) !important;
    border-bottom-left-radius: var(--bs-pagination-border-radius) !important;
}

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

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    float: right !important;
    padding-left: var(--bs-breadcrumb-item-padding-x) !important;
    padding-right: 0 !important;
    content: "\\" !important;
}

/* ========================================
   5.2.11 List Groups RTL
======================================== */
[dir="rtl"] .list-group-item {
    text-align: right !important;
}

[dir="rtl"] .list-group-item i:first-child,
[dir="rtl"] .list-group-item svg:first-child {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

/* ========================================
   5.2.12 Cards RTL
======================================== */
[dir="rtl"] .card-header,
[dir="rtl"] .card-body,
[dir="rtl"] .card-footer {
    text-align: right !important;
}

/* Card header flex containers: Bootstrap RTL handles this natively.
   Only override specific layouts that need reversal (e.g., title + action buttons).
   REMOVED: blanket flex-direction:row-reverse on ALL .card-header .d-flex */

/* ========================================
   5.2.13 DataTables RTL
======================================== */
[dir="rtl"] .dataTables_wrapper .dataTables_filter {
    float: left !important;
    text-align: left !important;
}

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

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

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

/* ========================================
   5.2.14 Nav Tabs RTL
   NOTE: Tabs maintain their logical order in RTL.
   Bootstrap RTL already handles text alignment natively.
   REMOVED: flex-direction:row-reverse which was reversing tab order.
======================================== */

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

/* ========================================
   5.2.15 Badges RTL
======================================== */
[dir="rtl"] .badge {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

/* ========================================
   5.2.16 Progress Bars RTL
======================================== */
[dir="rtl"] .progress-bar {
    float: right !important;
}

/* ========================================
   5.2.17 iziToast Notifications RTL
   Position notifications on bottom-left for RTL
======================================== */
[dir="rtl"] .iziToast-wrapper-bottomRight {
    left: 0 !important;
    right: auto !important;
}

[dir="rtl"] .iziToast-wrapper-topRight {
    left: 0 !important;
    right: auto !important;
}

[dir="rtl"] .iziToast {
    direction: rtl !important;
}

[dir="rtl"] .iziToast .iziToast-body {
    text-align: right !important;
    padding-right: 10px !important;
    padding-left: 33px !important;
}

[dir="rtl"] .iziToast .iziToast-icon {
    left: auto !important;
    right: 0 !important;
}

[dir="rtl"] .iziToast .iziToast-close {
    right: auto !important;
    left: 0 !important;
}

[dir="rtl"] .iziToast .iziToast-progressbar {
    direction: ltr !important;
}

/* ========================================
   5.2.17 Tooltips RTL
======================================== */
[dir="rtl"] .tooltip {
    text-align: right !important;
}

/* ========================================
   5.2.18 Flow Builder Text Color Fix
   Problem: .dashboard__right span rule forces #606576 on all spans
   Solution: Override for React Flow nodes
======================================== */
.react-flow span,
.react-flow label,
.react-flow select,
.react-flow option,
.react-flow input,
.react-flow textarea,
.react-flow button,
.react-flow div {
    color: inherit !important;
}

.react-flow select option {
    color: #1f2937 !important;
    background: #fff !important;
}

/* Ensure node text is white */
.react-flow__node span,
.react-flow__node label,
.react-flow__node div {
    color: #f1f5f9 !important;
}

/* Flow sidebar and panels */
.flow-sidebar span,
.flow-sidebar label,
.flow-builder-container span,
.flow-builder-container label {
    color: inherit !important;
}

/* ========================================
   5.2.19 Flow Builder Header & Buttons Fix
======================================== */

/* Flow builder header title - white text */
.flow-builder-header__title h1,
.flow-builder-header__title span,
.flow-builder-page h1,
.flow-builder-page h5 {
    color: #f1f5f9 !important;
}

/* Publish button - ensure white text */
.flow-builder-btn--success,
.flow-builder-btn--success span,
.flow-builder-btn--success .btn-text,
.flow-builder-btn--success i,
.flow-builder-btn--primary,
.flow-builder-btn--primary span,
.flow-builder-btn--primary .btn-text,
.flow-builder-btn--primary i,
#btnPublish,
#btnPublish span,
#btnPublish .btn-text,
#btnPublish i {
    color: #fff !important;
}

/* ========================================
   5.2.20 Dashboard Header Title - White Text
   ONLY for dashboard-header (dark background navbar)
======================================== */

/* Dashboard header title (dark background) */
.dashboard-header .title,
.dashboard-header h3 {
    color: #f1f5f9 !important;
}

/* ========================================
   NOTE: Dashboard widgets have WHITE background
   so their text should remain DARK (default)
   Do NOT add white text rules for .dashboard-body content
======================================== */

/* ========================================
   5.2.20b Mobile Nav — RTL text alignment
   main.css hardcodes text-align: left on .nav-item (line 3744)
   dir="rtl" does NOT flip physical text-align
======================================== */
@media (max-width: 991px) {
    .nav-menu .nav-item {
        text-align: right !important;
    }
}

/* ========================================
   5.2.21 Dashboard Table Body — RTL border flip
   main.css hardcodes border-left on td:first-child
   Text alignment already handled by [dir="rtl"] rules at line ~800
======================================== */
.dashboard .table tbody tr td:first-child {
    border-right: 1px solid #c1c9d066 !important;
    border-left: 0 !important;
}

.dashboard .table tbody tr td:last-child {
    border-left: 1px solid #c1c9d066 !important;
    border-right: 0 !important;
}

/* ========================================
   5.2.22 Profile Tab — RTL text alignment
   main.css hardcodes text-align: left on mobile profile list (line 11116)
======================================== */
@media screen and (max-width: 767px) {
    .profile-page-wrapper .profile-list {
        text-align: right !important;
    }
}

/* Rtl support css end here */