/* RTL Styles for Arabic Language - Text Direction Only */

/* Header menu RTL (keep existing header functionality) */


.rtl-header .nav-menu {
    flex-direction: row-reverse;
}



.rtl-header .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}

/* Ensure dropdown functionality works in RTL */
.rtl-header .dropdown:not(.active) .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
}

.rtl-header .dropdown-btn {
    flex-direction: row-reverse;
}

.rtl-header .dropdown-icon {
    margin-right: 8px;
    margin-left: 0;
}

.rtl-header .flag-icon {
    margin-left: 8px;
    margin-right: 0;
}

/* Arabic text content - RTL direction only for Arabic content */
body[data-lang="ar"] .section-title,
body[data-lang="ar"] .section-subtitle,
body[data-lang="ar"] .card-title,
body[data-lang="ar"] .card-description,
body[data-lang="ar"] .faq-question,
body[data-lang="ar"] .faq-answer,
body[data-lang="ar"] .hero-title,
body[data-lang="ar"] .hero-subtitle,
body[data-lang="ar"] .hero-description,

body[data-lang="ar"] .upload-section,

body[data-lang="ar"] header,
body[data-lang="ar"] .step-indicator,

body[data-lang="ar"] .upload-complete,

body[data-lang="ar"] .progress-section,

body[data-lang="ar"] .success-section,

body[data-lang="ar"] .completion-section,

body[data-lang="ar"] .file-hint,

body[data-lang="ar"] .promo-content,

body[data-lang="ar"] .upload-text {
    direction: rtl;
}


body[data-lang="ar"] .step:not(:last-child)::after {
  left: -60px;
  right: 60px;
}



/* Keep English elements LTR even when Arabic is selected */
body[data-lang="ar"] .nav-link,
body[data-lang="ar"] .btn,
body[data-lang="ar"] .footer-links-horizontal,
body[data-lang="ar"] .footer-links-horizontal a,
body[data-lang="ar"] .keyword-tag,
body[data-lang="ar"] .step-label,
body[data-lang="ar"] .progress-bar,
body[data-lang="ar"] .upload-btn,
body[data-lang="ar"] input,
body[data-lang="ar"] button {
    direction: ltr !important;
    text-align: left;
}



/* Mobile menu RTL adjustments */
@media screen and (max-width: 768px) {
    .rtl-header .nav-toggle {
        right: 20px;
        left: auto;
    }
    
    /* Keep the left positioning for mobile menu functionality, just change text alignment */
    .rtl-header .nav-menu {
        text-align: center;
        flex-direction: column !important;
    }
    
    /* Ensure mobile menu still works with left positioning */
    .rtl-header .nav-menu.active {
        left: 0;
    }
    

}