/* RTL (Right-to-Left) Overrides for Arabic */
/* All rules scoped to html[dir="rtl"] to avoid affecting LTR pages */

/* Font fallback for Arabic */
html[dir="rtl"] body {
    font-family: 'Inter', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

/* Text alignment */
html[dir="rtl"] .career-list {
    text-align: right;
}

/* Padding/margin flips */
html[dir="rtl"] .career-list li {
    padding-left: 0;
    padding-right: 1.5rem;
}

html[dir="rtl"] .product-features li {
    padding-left: 0;
    padding-right: 25px;
}

html[dir="rtl"] .services-content {
    padding-right: 0;
    padding-left: 2rem;
}

html[dir="rtl"] .btn-icon {
    margin-left: 0;
    margin-right: 8px;
}

/* Position flips for pseudo-elements */
html[dir="rtl"] .career-list li:before {
    left: auto;
    right: 0;
    content: "\2190"; /* left arrow */
}

html[dir="rtl"] .product-features li:before {
    left: auto;
    right: 0;
}

html[dir="rtl"] .product-badge {
    left: auto;
    right: 20px;
}

/* Arrow content flip for innovation links */
html[dir="rtl"] .innovation-link:after {
    content: "\2190"; /* left arrow */
}

/* Transform flips */
html[dir="rtl"] .btn:hover .btn-icon {
    transform: translateX(-4px);
}

html[dir="rtl"] .innovation-link:hover:after {
    transform: translateX(-3px);
}

/* Nav link hover on mobile */
@media (max-width: 768px) {
    html[dir="rtl"] .nav-link:hover {
        transform: translateX(-10px);
    }

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

/* Article content - flip list padding */
html[dir="rtl"] .article-content ul,
html[dir="rtl"] .article-content ol {
    padding-left: 0;
    padding-right: 32px;
}

/* Article blockquote border flip */
html[dir="rtl"] .article-content blockquote {
    border-left: none;
    border-right: 4px solid #06438c;
    padding-left: 0;
    padding-right: 32px;
}

/* Privacy/Terms highlight border flip */
html[dir="rtl"] .privacy-highlight {
    border-left: none;
    border-right: 4px solid #06438c;
}

/* Privacy/Terms section list padding */
html[dir="rtl"] .privacy-section ul {
    padding-left: 0;
    padding-right: 24px;
}

/* Section content list padding */
html[dir="rtl"] .section-content ul {
    padding-left: 0;
    padding-right: 20px;
}

/* Search bar icon */
html[dir="rtl"] .search-bar i {
    margin-right: 0;
    margin-left: 10px;
}

/* Job card left border accent */
html[dir="rtl"] .job-card::before {
    left: auto;
    right: 0;
    transform: translateX(4px);
}

html[dir="rtl"] .job-card:hover::before {
    transform: translateX(0);
}

/* Job badge margin */
html[dir="rtl"] .job-badge {
    margin-left: 0;
    margin-right: 8px;
}

/* Modal close button */
html[dir="rtl"] .modal-close {
    right: auto;
    left: 24px;
}

/* Contact form required asterisk */
html[dir="rtl"] .form-group label .required {
    margin-left: 0;
    margin-right: 2px;
}

/* Select dropdown arrow */
html[dir="rtl"] .form-group select {
    background-position: left 12px center;
    padding-right: 16px;
    padding-left: 40px;
}

/* Back link in 404 */
html[dir="rtl"] .back-link a {
    flex-direction: row-reverse;
}

/* Article back link */
html[dir="rtl"] .article-back-link {
    flex-direction: row-reverse;
}

html[dir="rtl"] .article-back-link:hover {
    gap: 12px;
}

/* Nav lang panel position */
html[dir="rtl"] .nav-lang-panel {
    right: auto;
    left: 0;
}

/* Contact badge border */
html[dir="rtl"] .contact-badge {
    border-bottom: 2px solid var(--primary-color);
}

/* Timeline adjustments */
@media (max-width: 968px) {
    html[dir="rtl"] .timeline::before {
        left: auto;
        right: 30px;
    }

    html[dir="rtl"] .timeline-content {
        margin-left: 0 !important;
        margin-right: 80px !important;
    }

    html[dir="rtl"] .timeline-dot {
        left: auto;
        right: 30px;
    }
}

@media (max-width: 576px) {
    html[dir="rtl"] .timeline::before {
        left: auto;
        right: 20px;
    }

    html[dir="rtl"] .timeline-content {
        margin-left: 0 !important;
        margin-right: 50px !important;
        width: calc(100% - 50px);
    }

    html[dir="rtl"] .timeline-dot {
        left: auto;
        right: 20px;
    }
}