/* =====================================================
   ECO3D - RTL (Right-to-Left) Styles for Arabic
   ===================================================== */

/* ============ Base RTL Overrides ============ */
html[dir="rtl"] {
    /* Arabic Fonts */
    --font-primary: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Tajawal', sans-serif;
}

html[dir="rtl"] body {
    font-family: var(--font-primary);
    text-align: right;
}

/* ============ Typography ============ */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: var(--font-display);
}

/* ============ Navigation ============ */
html[dir="rtl"] .nav-list {
    flex-direction: row;
}

html[dir="rtl"] .nav-link i {
    margin-right: 0;
    margin-left: 6px;
}

html[dir="rtl"] .dropdown-menu {
    left: auto;
    right: 0;
}

html[dir="rtl"] .dropdown-menu li a {
    flex-direction: row-reverse;
}

html[dir="rtl"] .dropdown-menu li a i {
    margin-left: 0;
    margin-right: 12px;
}

html[dir="rtl"] .nav-actions {
    flex-direction: row;
}

/* ============ Buttons ============ */
html[dir="rtl"] .btn {
    flex-direction: row;
}

html[dir="rtl"] .btn i:not(.fa-arrow-left):not(.fa-arrow-right) {
    transform: scaleX(-1);
}

html[dir="rtl"] .btn:hover i:not(.fa-arrow-left):not(.fa-arrow-right) {
    transform: scaleX(-1) translateX(-4px);
}

html[dir="rtl"] .btn:hover i.fa-arrow-left {
    transform: translateX(-4px);
}

/* ============ Hero Section ============ */
html[dir="rtl"] .hero-content {
    direction: rtl;
}

html[dir="rtl"] .hero-badge {
    flex-direction: row-reverse;
}

html[dir="rtl"] .hero-cta {
    flex-direction: row;
    justify-content: center;
}

html[dir="rtl"] .hero-stats-mini {
    flex-direction: row;
    justify-content: flex-start;
}

/* Ensure stat-mini items are right-aligned */
html[dir="rtl"] .stat-mini {
    text-align: center;
}

/* ============ Dashboard Mockup RTL ============ */
html[dir="rtl"] .mockup-content {
    flex-direction: row-reverse;
}

html[dir="rtl"] .mockup-sidebar {
    order: 2;
}

html[dir="rtl"] .mockup-main {
    order: 1;
}

html[dir="rtl"] .mockup-card {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .card-info {
    text-align: right;
}

/* Floating Cards RTL */
html[dir="rtl"] .floating-card {
    flex-direction: row-reverse;
}

html[dir="rtl"] .float-1 {
    right: auto;
    left: -20px;
}

html[dir="rtl"] .float-2 {
    left: auto;
    right: -40px;
}

html[dir="rtl"] .float-3 {
    right: auto;
    left: 10%;
}

/* ============ Service Links ============ */
html[dir="rtl"] .service-link {
    flex-direction: row;
}

html[dir="rtl"] .service-link:hover i {
    transform: translateX(-4px);
}

/* ============ Problem Cards ============ */
html[dir="rtl"] .problem-solution {
    flex-direction: row-reverse;
}

html[dir="rtl"] .problem-solution i {
    transform: scaleX(-1);
}

/* ============ Solution Cards ============ */
html[dir="rtl"] .solution-card {
    text-align: right;
}

html[dir="rtl"] .solution-badge {
    right: auto;
    left: 24px;
}

html[dir="rtl"] .solution-features li {
    flex-direction: row;
    justify-content: flex-start;
}

html[dir="rtl"] .solution-features li i {
    margin-left: 0;
    margin-right: 12px;
}

html[dir="rtl"] .solution-metrics {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

html[dir="rtl"] .solution-metrics .metric {
    text-align: right;
}

html[dir="rtl"] .marketplace-roles {
    direction: rtl;
}

/* ============ Statistics ============ */
html[dir="rtl"] .stats-grid {
    direction: rtl;
}

html[dir="rtl"] .stat-content {
    flex-direction: row-reverse;
}

/* ============ How It Works ============ */
html[dir="rtl"] .steps-timeline {
    direction: rtl;
}

html[dir="rtl"] .timeline-line {
    left: 10%;
    right: 10%;
}

html[dir="rtl"] .timeline-line::after {
    right: 0;
    left: auto;
}

/* ============ Clients Slider ============ */
html[dir="rtl"] .clients-track {
    animation: slideRTL 20s linear infinite;
}

@keyframes slideRTL {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

/* ============ Testimonial ============ */
html[dir="rtl"] .testimonial-quote i {
    transform: scaleX(-1);
}

html[dir="rtl"] .testimonial-author {
    flex-direction: row-reverse;
}

html[dir="rtl"] .author-info {
    text-align: right;
}

html[dir="rtl"] .testimonial-decoration {
    right: auto;
    left: 60px;
}

/* ============ Why Us Grid ============ */
html[dir="rtl"] .why-us-grid {
    direction: rtl;
}

/* ============ CTA Section ============ */
html[dir="rtl"] .cta-buttons {
    flex-direction: row-reverse;
}

html[dir="rtl"] .contact-options {
    flex-direction: row-reverse;
}

html[dir="rtl"] .contact-options a {
    flex-direction: row-reverse;
}

/* ============ Footer ============ */
html[dir="rtl"] .footer-grid {
    direction: rtl;
}

html[dir="rtl"] .footer-links,
html[dir="rtl"] .footer-contact {
    text-align: right;
}

html[dir="rtl"] .footer-social {
    justify-content: flex-start;
}

html[dir="rtl"] .footer-contact li {
    flex-direction: row;
    justify-content: flex-start;
}

html[dir="rtl"] .footer-contact li i {
    margin-left: 0;
    margin-right: 0;
}

html[dir="rtl"] .footer-bottom-content {
    flex-direction: row-reverse;
}

html[dir="rtl"] .footer-legal {
    flex-direction: row-reverse;
}

/* ============ WhatsApp Float ============ */
html[dir="rtl"] .whatsapp-float {
    right: auto;
    left: 30px;
}

html[dir="rtl"] .whatsapp-tooltip {
    right: auto;
    left: 70px;
    transform: translateX(-10px);
}

html[dir="rtl"] .whatsapp-float:hover .whatsapp-tooltip {
    transform: translateX(0);
}

/* ============ Back to Top ============ */
html[dir="rtl"] .back-to-top {
    right: auto;
    left: 100px;
}

/* ============ Lang Toggle ============ */
html[dir="rtl"] .lang-toggle,
html[dir="rtl"] .lang-toggle-footer {
    flex-direction: row-reverse;
}

/* ============ Responsive RTL ============ */
@media (max-width: 1024px) {
    html[dir="rtl"] .hero-content {
        text-align: center;
    }
    
    html[dir="rtl"] .hero-cta {
        justify-content: center;
    }
    
    html[dir="rtl"] .hero-stats-mini {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    html[dir="rtl"] .nav-menu {
        right: auto;
        left: -100%;
    }
    
    html[dir="rtl"] .nav-menu.active {
        left: 0;
    }
    
    html[dir="rtl"] .nav-link {
        justify-content: flex-start;
        flex-direction: row-reverse;
    }
    
    html[dir="rtl"] .step {
        flex-direction: row-reverse;
        text-align: right;
    }
    
    html[dir="rtl"] .stat-card {
        flex-direction: row-reverse;
        text-align: right;
    }
    
    html[dir="rtl"] .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    html[dir="rtl"] .whatsapp-float {
        left: 20px;
        right: auto;
    }
    
    html[dir="rtl"] .back-to-top {
        left: 20px;
        right: auto;
    }
    
    /* RTL Mobile services grid */
    html[dir="rtl"] .mobile-services-grid {
        direction: rtl;
    }
    
    html[dir="rtl"] .mobile-service-item {
        text-align: center;
    }
    
    /* RTL Scroll progress (from right to left) */
    html[dir="rtl"] .scroll-progress {
        transform-origin: right;
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] .hero-stats-mini {
        flex-direction: column;
    }
    
    html[dir="rtl"] .contact-options {
        flex-direction: column;
    }
    
    html[dir="rtl"] .footer-brand,
    html[dir="rtl"] .footer-links,
    html[dir="rtl"] .footer-contact {
        text-align: center;
    }
    
    html[dir="rtl"] .footer-contact li {
        justify-content: center;
    }
    
    html[dir="rtl"] .footer-social {
        justify-content: center;
    }
}

/* ============ Animation Adjustments for RTL ============ */
html[dir="rtl"] [data-aos="fade-right"] {
    transform: translate3d(50px, 0, 0);
}

html[dir="rtl"] [data-aos="fade-left"] {
    transform: translate3d(-50px, 0, 0);
}

/* ============ Arabic Number Display ============ */
.ar-number {
    font-feature-settings: "tnum";
    direction: ltr;
    display: inline-block;
}

/* ============ RTL Mobile Layout Fix ============ */
@media (max-width: 768px) {
    html[dir="rtl"] .hero-content,
    html[dir="rtl"] .hero-text,
    html[dir="rtl"] .hero-title,
    html[dir="rtl"] .hero-subtitle,
    html[dir="rtl"] .hero-description {
        text-align: center !important;
    }
    
    html[dir="rtl"] .hero-cta {
        align-items: center !important;
    }
    
    html[dir="rtl"] .mobile-services-grid {
        direction: rtl;
    }
    
    html[dir="rtl"] .hero-stats-bar {
        direction: rtl;
    }
    
    html[dir="rtl"] .hero-stats-bar .stat-item {
        text-align: center !important;
    }
}
