/* RTL (Right-to-Left) Support for Arabic Language */

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

[dir="rtl"] body {
    direction: rtl;
}

/* Typography */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] span,
[dir="rtl"] label, [dir="rtl"] a {
    text-align: right;
}

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

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

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

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

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

/* Margin utilities - flip left/right */
[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
[dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; }

[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
[dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem !important; }
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }

/* Padding utilities - flip left/right */
[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; }
[dir="rtl"] .pe-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
[dir="rtl"] .pe-5 { padding-right: 0 !important; padding-left: 3rem !important; }

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

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

/* Flexbox utilities */
[dir="rtl"] .flex-row { flex-direction: row-reverse !important; }
[dir="rtl"] .justify-content-start { justify-content: flex-end !important; }
[dir="rtl"] .justify-content-end { justify-content: flex-start !important; }

/* Lists */
[dir="rtl"] ul, [dir="rtl"] ol {
    padding-right: 2rem;
    padding-left: 0;
}

[dir="rtl"] .list-unstyled {
    padding-right: 0;
}

/* Forms */
[dir="rtl"] .form-control,
[dir="rtl"] .form-select {
    text-align: right;
}

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

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

[dir="rtl"] .input-group > :not(:first-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
}

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

/* Buttons with icons */
[dir="rtl"] .btn i.fa,
[dir="rtl"] .btn i.fas,
[dir="rtl"] .btn i.far,
[dir="rtl"] .btn i.fab {
    margin-left: 0.5rem;
    margin-right: 0;
}

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

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

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-left: 0.5rem;
    padding-right: 0;
    content: "\f104"; /* Left chevron for RTL */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Alerts */
[dir="rtl"] .alert {
    text-align: right;
}

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

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

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

/* Tables */
[dir="rtl"] .table th,
[dir="rtl"] .table td {
    text-align: right;
}

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

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

[dir="rtl"] .footer .social-links {
    text-align: right;
}

[dir="rtl"] .footer .social-links a {
    margin-left: 1rem;
    margin-right: 0;
}

/* Custom Brand */
[dir="rtl"] .brand-icon {
    margin-left: 0.5rem;
    margin-right: 0;
}

[dir="rtl"] .brand-text {
    margin-right: 0.5rem;
}

/* User Avatar */
[dir="rtl"] .user-avatar {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Chat Widget */
[dir="rtl"] .chat-widget {
    left: 1rem;
    right: auto;
}

[dir="rtl"] .chat-widget-button {
    left: 1rem;
    right: auto;
}

[dir="rtl"] .chat-window {
    left: 1rem;
    right: auto;
}

[dir="rtl"] .chat-message {
    text-align: right;
}

[dir="rtl"] .chat-message.user {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .chat-message.assistant {
    margin-right: 0;
    margin-left: auto;
}

/* Video Cards */
[dir="rtl"] .video-card .position-absolute {
    left: 0.5rem;
    right: auto;
}

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

/* Progress bars */
[dir="rtl"] .progress-bar {
    float: right;
}

/* Position utilities */
[dir="rtl"] .start-0 { right: 0 !important; left: auto !important; }
[dir="rtl"] .end-0 { left: 0 !important; right: auto !important; }
[dir="rtl"] .start-50 { right: 50% !important; left: auto !important; }
[dir="rtl"] .end-50 { left: 50% !important; right: auto !important; }

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

/* Border utilities */
[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; }
[dir="rtl"] .border-start-0 { border-right: 0 !important; }
[dir="rtl"] .border-end-0 { border-left: 0 !important; }

/* Rounded utilities */
[dir="rtl"] .rounded-start { border-top-right-radius: var(--bs-border-radius) !important; border-bottom-right-radius: var(--bs-border-radius) !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
[dir="rtl"] .rounded-end { border-top-left-radius: var(--bs-border-radius) !important; border-bottom-left-radius: var(--bs-border-radius) !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* Icons - keep LTR for directional icons */
[dir="rtl"] .fa-arrow-right::before { content: "\f060"; } /* arrow-left */
[dir="rtl"] .fa-arrow-left::before { content: "\f061"; } /* arrow-right */
[dir="rtl"] .fa-chevron-right::before { content: "\f053"; } /* chevron-left */
[dir="rtl"] .fa-chevron-left::before { content: "\f054"; } /* chevron-right */
[dir="rtl"] .fa-angle-right::before { content: "\f104"; } /* angle-left */
[dir="rtl"] .fa-angle-left::before { content: "\f105"; } /* angle-right */

/* Feature cards and grid items */
[dir="rtl"] .feature-card,
[dir="rtl"] .tool-card,
[dir="rtl"] .country-card {
    text-align: right;
}

/* Tabs and Pills */
[dir="rtl"] .nav-tabs,
[dir="rtl"] .nav-pills {
    flex-direction: row-reverse;
}

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

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

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

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

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

/* Tooltip and Popover */
[dir="rtl"] .tooltip,
[dir="rtl"] .popover {
    text-align: right;
}

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

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

[dir="rtl"] ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

/* Keep numbers LTR */
[dir="rtl"] .ltr-number,
[dir="rtl"] .phone-number,
[dir="rtl"] time,
[dir="rtl"] .date {
    direction: ltr;
    display: inline-block;
}

/* Code blocks stay LTR */
[dir="rtl"] pre,
[dir="rtl"] code,
[dir="rtl"] .code-block {
    direction: ltr;
    text-align: left;
}

/* Hero section */
[dir="rtl"] .hero-section {
    text-align: right;
}

/* Stats and counters */
[dir="rtl"] .stat-number {
    direction: ltr;
}

/* Search forms */
[dir="rtl"] .search-form .input-group {
    flex-direction: row-reverse;
}

/* Filter dropdowns */
[dir="rtl"] .filter-bar {
    flex-direction: row-reverse;
}

/* Timeline */
[dir="rtl"] .timeline {
    padding-left: 0;
    padding-right: 1.5rem;
}

[dir="rtl"] .timeline::before {
    left: auto;
    right: 0;
}

[dir="rtl"] .timeline-item {
    padding-left: 0;
    padding-right: 1.5rem;
}

/* Animations - flip horizontal animations */
[dir="rtl"] [data-aos="fade-left"] {
    transform: translateX(-100px);
}

[dir="rtl"] [data-aos="fade-right"] {
    transform: translateX(100px);
}

/* Share Buttons */
[dir="rtl"] .share-buttons {
    flex-direction: row-reverse;
}

[dir="rtl"] .share-btn {
    flex-direction: row-reverse;
}

/* ============================================
   Finger Guide - RTL Overrides
   ============================================ */

/* Popover text alignment */
[dir="rtl"] .driver-popover {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .driver-popover-title {
    text-align: right;
}

[dir="rtl"] .driver-popover-description {
    text-align: right;
}

/* Footer buttons - swap sides */
[dir="rtl"] .driver-popover-footer {
    flex-direction: row-reverse;
}

[dir="rtl"] .driver-popover-navigation-btns {
    flex-direction: row-reverse;
}

/* Progress text */
[dir="rtl"] .driver-popover-progress-text {
    direction: rtl;
}

/* Close button position */
[dir="rtl"] .driver-popover-close-btn {
    left: 8px;
    right: auto;
}

/* Help button - move to bottom-left in RTL (offset from support widget) */
[dir="rtl"] .finger-guide-help-btn {
    right: auto;
    left: 24px;
}

@media (max-width: 768px) {
    [dir="rtl"] .finger-guide-help-btn {
        left: 18px;
        right: auto;
    }
}

@media (max-width: 480px) {
    [dir="rtl"] .finger-guide-help-btn {
        left: 14px;
        right: auto;
    }
}