/*========================================
  RTL (Right-to-Left) Styles for Arabic
==========================================*/

/* Apply RTL direction to HTML when Arabic is selected */
html[dir="rtl"] {
    direction: rtl;
}

/* Exclude specific sections from RTL */
html[dir="rtl"] #services,
html[dir="rtl"] #partners,
html[dir="rtl"] #contact,
html[dir="rtl"] .testimonials-slider-wrapper,
html[dir="rtl"] .newsletter-form,
html[dir="rtl"] .newsletter-section,
html[dir="rtl"] .tv-process-section,
html[dir="rtl"] .tv-marquee-section,
html[dir="rtl"] .tv-feature-section,
html[dir="rtl"] .tv-counter-section {
    direction: ltr;
}

/* Keep these sections' children in LTR as well */
html[dir="rtl"] #services *,
html[dir="rtl"] #partners *,
html[dir="rtl"] #contact *,
html[dir="rtl"] .testimonials-slider-wrapper *,
html[dir="rtl"] .newsletter-form *,
html[dir="rtl"] .newsletter-section *,
html[dir="rtl"] .tv-process-section *,
html[dir="rtl"] .tv-marquee-section *,
html[dir="rtl"] .tv-feature-section *,
html[dir="rtl"] .tv-counter-section * {
    direction: ltr;
}

/* Header RTL Styles */
html[dir="rtl"] .tv-header .header-top {
    direction: rtl;
}

html[dir="rtl"] .tv-header .header-top .header-links {
    flex-direction: row-reverse;
}

html[dir="rtl"] .tv-header .header-top .header-links li {
    margin-left: 30px;
    margin-right: 0;
}

html[dir="rtl"] .tv-header .header-top .header-links li i {
    margin-right: 0;
    margin-left: 8px;
}

html[dir="rtl"] .tv-header .header-top .social-links {
    flex-direction: row-reverse;
}

html[dir="rtl"] .tv-header .header-top .social-links a {
    margin-left: 15px;
    margin-right: 0;
}

/* Navigation RTL */
html[dir="rtl"] .main-menu > ul {
    flex-direction: row-reverse;
}

html[dir="rtl"] .main-menu > ul > li {
    margin-left: 40px;
    margin-right: 0;
}

html[dir="rtl"] .main-menu ul li a {
    text-align: right;
}

/* Logo RTL */
html[dir="rtl"] .header-logo {
    margin-right: 0;
    margin-left: auto;
}

/* Language Switcher RTL */
html[dir="rtl"] .language-switcher {
    margin-left: 0;
    margin-right: 20px;
}

/* Sidebar RTL */
html[dir="rtl"] .mobile-menu {
    right: auto;
    left: -300px;
}

html[dir="rtl"] .mobile-menu.active {
    left: 0;
}

html[dir="rtl"] .mobile-menu ul li a {
    text-align: right;
    padding-right: 20px;
    padding-left: 40px;
}

html[dir="rtl"] .mobile-menu .close-btn {
    right: auto;
    left: 20px;
}

/* Hero Section RTL */
html[dir="rtl"] .hero-content {
    text-align: right;
}

html[dir="rtl"] .hero-content .sub-title img {
    margin-right: 0;
    margin-left: 10px;
}

html[dir="rtl"] .slide-number {
    left: auto;
    right: 50px;
}

/* Hero Decorative Layers - Flip to opposite side in RTL */
html[dir="rtl"] .hero-area .p-bottom-left {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .hero-area .p-bottom-right {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .hero-area .p-top-left {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .hero-area .p-top-right {
    right: auto !important;
    left: 0 !important;
}

/* Hero Gradient Overlay - Flip gradient direction in RTL */
html[dir="rtl"] .hero-area::before,
html[dir="rtl"] .hero-area::after,
html[dir="rtl"] .hero-inner::before,
html[dir="rtl"] .hero-inner::after,
html[dir="rtl"] .bg.image::before,
html[dir="rtl"] .bg.image::after {
    transform: scaleX(-1) !important;
}

/* Flip any background gradients in hero section */
html[dir="rtl"] .hero-area,
html[dir="rtl"] .hero-inner {
    direction: ltr; /* Keep content LTR but flip visual elements */
}

html[dir="rtl"] .hero-content {
    direction: rtl; /* Content should be RTL */
}

/* Vision & Mission RTL */
html[dir="rtl"] .tv-about-section .row {
    flex-direction: row-reverse;
}

/* Features RTL */
html[dir="rtl"] .tv-feature-section .row {
    flex-direction: row-reverse;
}

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

html[dir="rtl"] .feature-item .icon {
    margin-right: 0;
    margin-left: 20px;
}

/* Footer RTL */
html[dir="rtl"] .footer-section .row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .footer-section ul {
    text-align: right;
}

html[dir="rtl"] .footer-section ul li {
    text-align: right;
}

html[dir="rtl"] .footer-section .contact-item i {
    margin-right: 0;
    margin-left: 10px;
}

/* General Text Alignment RTL */
html[dir="rtl"] p,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    text-align: right;
}

/* Buttons RTL */
html[dir="rtl"] .theme-btn {
    flex-direction: row-reverse;
}

html[dir="rtl"] .theme-btn .arrow-all {
    margin-left: 0;
    margin-right: 10px;
}

/* Icons RTL */
html[dir="rtl"] .icon {
    margin-right: 0;
    margin-left: 15px;
}

/* Lists RTL */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-right: 20px;
    padding-left: 0;
}

/* About Section RTL */
html[dir="rtl"] .tv-about-section .about-content {
    text-align: right;
}

/* Location Section RTL */
html[dir="rtl"] .tv-location-section .row {
    flex-direction: row-reverse;
}

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

html[dir="rtl"] .location-item .icon {
    margin-right: 0;
    margin-left: 15px;
}

/* Decorative Shapes - Flip to opposite side in RTL (except excluded sections) */
html[dir="rtl"] .p-bottom-left:not(#services .p-bottom-left):not(#contact .p-bottom-left) {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .p-bottom-right:not(#services .p-bottom-right):not(#contact .p-bottom-right) {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .p-top-left:not(#services .p-top-left) {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .p-top-right:not(#services .p-top-right) {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .p-top-center {
    /* Keep centered */
}

/* Shape mockups with data attributes */
html[dir="rtl"] .shape-mockup[data-left] {
    left: auto !important;
    right: var(--shape-right, 15%) !important;
}

html[dir="rtl"] .shape-mockup[data-right] {
    right: auto !important;
    left: var(--shape-left, 15%) !important;
}