/* ============================================
   OPTINEX RTL (Right-to-Left) Stylesheet
   For Arabic Language Support
   ============================================
   
   USAGE: Include this stylesheet AFTER styles.css
   only when html[lang="ar"] is set.
   
   <link rel="stylesheet" href="css/styles-rtl.css">
   ============================================ */

/* Base RTL Direction */
html[lang="ar"],
html[dir="rtl"] {
    direction: rtl;
}

html[lang="ar"] body {
    text-align: right;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
html[lang="ar"] body,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] span,
html[lang="ar"] a,
html[lang="ar"] li,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] button,
html[lang="ar"] select {
    font-family: 'Noto Sans Arabic', 'Tajawal', 'IBM Plex Sans Arabic', 'Inter', sans-serif;
    letter-spacing: 0 !important;
    /* Letter spacing breaks Arabic ligatures */
}

/* Playfair Equivalent */
/* Amiri Font for Headings (Serif) */
html[lang="ar"] .section-title,
html[lang="ar"] .hero h1,
html[lang="ar"] .footer-logo,
html[lang="ar"] .legal-title,
html[lang="ar"] .stat-number,
html[lang="ar"] .service-num,
html[lang="ar"] .logo,
html[lang="ar"] .about-title,
html[lang="ar"] .services-title,
html[lang="ar"] .process-title,
html[lang="ar"] .contact-left h2,
html[lang="ar"] .case-studies-title,
html[lang="ar"] .faq-title,
html[lang="ar"] .why-us-title,
html[lang="ar"] .team-title,
html[lang="ar"] .awards-title,
html[lang="ar"] .industries-title {
    font-family: 'Amiri', 'Traditional Arabic', serif;
    /* Switch to Amiri */
    font-weight: 700;
}

/* Fix "Dancing" on Industry Cards in RTL */
html[lang="ar"] .industry-card:hover {
    transform: translateY(-10px);
    /* Just lift, do not shift padding */
}

/* Fix "Dancing" on Team Cards in RTL */
html[lang="ar"] .team-card:hover {
    transform: translateY(-10px);
    /* Ensure no margin/padding shift propagates */
}

/* Prevent Padding Dancing Globally for Cards */
html[lang="ar"] .process-card:hover,
html[lang="ar"] .why-us-card:hover {
    transform: translateY(-5px);
    /* Pure transform */
}


html[lang="ar"] .hero-bg-text {
    font-family: 'Noto Sans Arabic', sans-serif;
    font-weight: 900;
    letter-spacing: 0 !important;
    /* Protect ligatures */
    opacity: 0.15;
    /* Subtle blend */
}

/* ============================================
   NAVIGATION
   ============================================ */
/* Reverse Nav Bar ordering */
html[lang="ar"] .nav {
    flex-direction: row;
    /* Flex row follows direction: rtl automatically */
}

html[lang="ar"] .nav-contact {
    margin-left: 0;
    /* margin-right is handled by flex gap usually, but let's be safe */
}

html[lang="ar"] .nav-center a::after {
    left: auto;
    right: 0;
}

/* Mega Menu */
html[lang="ar"] .mega-menu-list li a {
    text-align: right;
    justify-content: flex-start;
    /* Ensure items align to start (right) */
}

html[lang="ar"] .mega-icon {
    margin-left: 10px;
}

html[lang="ar"] .mega-menu-list li a:hover {
    padding-left: 10px;
    /* Reset LTR padding */
    padding-right: 10px;
    /* Add RTL padding */
    transform: translateX(-4px);
    /* Move Left (indent) instead of Right */
    background: rgba(191, 161, 129, 0.12);
    /* Ensure bg matches */
}

/* Dropdown Arrow */
html[lang="ar"] .dropdown-arrow {
    margin-left: 0;
    margin-right: 5px;
}

/* Mobile Menu */
html[lang="ar"] .mobile-menu {
    right: auto;
    left: -100%;
    text-align: right;
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

html[lang="ar"] .mobile-menu.active {
    right: auto;
    left: 0;
}

html[lang="ar"] .mobile-menu a {
    text-align: right;
    padding: 15px 0;
    /* Clear padding-left from base styles */
}

html[lang="ar"] .mobile-menu a:hover {
    padding-left: 0;
    padding-right: 10px;
}

/* ============================================
   HERO SECTION
   ============================================ */
html[lang="ar"] .hero-content {
    text-align: right;
}

html[lang="ar"] .hero-label {
    flex-direction: row;
    /* Flex follows RTL */
}

html[lang="ar"] .hero-description-group {
    align-items: flex-start;
    /* Align text to right (start in RTL? No, start is right) */
    /* wait, align-items: flex-end in Styles.css meant RIGHT in LTR. 
       In RTL, flex-end is LEFT. We want it on the RIGHT (start). */
    align-items: flex-start;
}

html[lang="ar"] .hero-description {
    text-align: right;
}

html[lang="ar"] .hero-cta {
    flex-direction: row;
}

html[lang="ar"] .hero-cta .hero-cta-arrow {
    transform: rotate(180deg);
}

/* Location Strip - Move to Left (Maximum Left) */
html[lang="ar"] .hero-location-strip {
    right: auto;
    left: 20px;
    /* Reduced from 50px to push it to "maximum left" edge */
}

/* Hero Bottom - Order Flip */
html[lang="ar"] .hero-bottom {
    flex-direction: row;
    /* Implicitly flips with RTL */
}

/* Fix Scroll Indicator Text Orientation */
/* LTR uses writing-mode: vertical-rl (top-to-bottom).
   For Arabic, vertical-rl breaks ligatures.
   Solution: Reset to horizontal-tb and rotate -90deg (Reading Bottom-to-Top). */
html[lang="ar"] .hero-scroll-left span,
html[lang="ar"] .hero-location-text {
    writing-mode: horizontal-tb !important;
    transform: rotate(-90deg);
    letter-spacing: 0 !important;
    white-space: nowrap;
    display: inline-block;
}

/* ============================================
   MARQUEE
   ============================================ */
/* Marquee needs to scroll RIGHT instead of LEFT? 
   Or just let it scroll LTR but content is RTL?
   Usually Marquee flows LTR <- [ ] <- 
   If we want it to flow RTL -> [ ] -> 
   we need to invert animation */

@keyframes marquee-rtl {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(50%);
    }

    /* Positive value moves right */
}

html[lang="ar"] .marquee {
    animation-name: marquee-rtl;
    flex-direction: row-reverse;
    /* Flip content order so it starts from right */
}

html[lang="ar"] .marquee-content {
    flex-direction: row-reverse;
    padding-right: 0;
    padding-left: 80px;
}

html[lang="ar"] .marquee-item {
    flex-direction: row-reverse;
    /* Icon after text */
}

/* ============================================
   STATS SECTION
   ============================================ */
html[lang="ar"] .stat-card::before {
    transform: translateX(100%);
    /* Start from right */
    background: linear-gradient(270deg, transparent, var(--gold), transparent);
    /* Flip gradient direction */
}

html[lang="ar"] .stat-card:hover::before {
    transform: translateX(-100%);
    /* Move to left */
}

/* ============================================
   ABOUT SECTION
   ============================================ */
html[lang="ar"] .about-left {
    text-align: right;
}

/* ============================================
   SERVICES SECTION
   ============================================ */
html[lang="ar"] .service-item {
    /* Grid columns flip order automatically in RTL? No, grid columns are 1 2 3 4. 
       In RTL, column 1 is on the right. 
       Col 1 (Num) -> Right
       Col 2 (Name) -> Right-Center
       ...
       This is Desired. */
    text-align: right;
}

html[lang="ar"] .service-arrow {
    transform: rotate(0deg);
    /* Arrow character is already ← in HTML, so 0deg points Left */
    /* Ensure it centers in its column */
    margin: 0 auto;
}

html[lang="ar"] .service-item:hover .service-arrow {
    /* transform matches base state (color changes via transition) */
}


/* Service Item Hover: Inherits padding shift from styles.css for 1:1 animation fidelity */


/* ============================================
   PROCESS SECTION
   ============================================ */
html[lang="ar"] .process-step {
    right: auto;
    left: 30px;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
html[lang="ar"] .testimonial-stars {
    flex-direction: row-reverse;
    /* Ensure stars fill from right if needed, or just center matches */
}

/* ============================================
   FAQ SECTION
   ============================================ */
html[lang="ar"] .faq-main-header {
    text-align: right;
}

html[lang="ar"] .faq-question {
    text-align: right;
    font-family: 'Noto Sans Arabic', sans-serif;
    /* Explicit override */
}

html[lang="ar"] .faq-icon {
    margin-left: 0;
    margin-right: 20px;
}

html[lang="ar"] .agent-avatar {
    margin-left: 0;
    margin-right: -24px;
}

html[lang="ar"] .support-team {
    padding-left: 0;
    padding-right: 24px;
}

/* Fix Form Select Arrow in RTL */
html[lang="ar"] .form-group select {
    background-position: left 20px center;
    padding-left: 20px;
    /* Ensure text doesn't overlap arrow */
    padding-right: 20px;
    /* Restore standard padding */
}

/* ============================================
   FOOTER
   ============================================ */
html[lang="ar"] .footer-links h3 {
    text-align: right;
}

html[lang="ar"] .footer-newsletter input {
    border-radius: 0 4px 4px 0;
    text-align: right;
}

html[lang="ar"] .footer-newsletter button {
    border-radius: 4px 0 0 4px;
}

html[lang="ar"] .footer-legal {
    flex-direction: row-reverse;
    /* Copyright on left, links on right? Or standard? Matches visual flow */
}

/* ============================================
   GLOBAL UTILS
   ============================================ */
/* GLOBAL UTILS */
/* Flip all arrow directions in content */
html[lang="ar"] .case-studies-link,
html[lang="ar"] .testimonial-nav button,
html[lang="ar"] .cta-button span:last-child {
    transform: scaleX(-1);
    /* Flips the arrow character itself */
    display: inline-block;
}

/* EXCEPTIONS & MANUAL FIXES */
/* Service arrow: Manually set to ← in HTML. 
   English is → rotated -45deg (NE). 
   Arabic should be ← rotated 45deg (NW). */
html[lang="ar"] .service-arrow {
    transform: rotate(45deg) !important;
}

html[lang="ar"] .service-item:hover .service-arrow {
    transform: rotate(45deg) !important;
    /* Maintain rotation on hover */
    /* English does not translate, just colors */
}

/* Hero CTA Arrow: Manually set to ← in HTML */
html[lang="ar"] .hero-cta-arrow {
    transform: none;
    /* Do not scaleX(-1) */
}

/* Fix mobile menu toggle */
html[lang="ar"] .nav-toggle {
    margin-right: auto;
    margin-left: 0;
    /* In RTL header: Logo (Right) - Nav (Left). Toggle should be left. */
}

/* ============================================
   LAYOUT ADJUSTMENTS (Awards & Marquee)
   ============================================ */

/* Awards Cards: Taller standard height for description */
html[lang="ar"] .award-card {
    min-height: 250px;
    /* Force standardized taller height */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Align content to top */
    padding-bottom: 30px;
    /* Space for potential description */
}

/* Marquee Spacing Management - REVERTED/ADJUSTED based on feedback */
html[lang="ar"] .marquee-section {
    margin-bottom: 60px;
    /* Reduced from 120px back to reasonable gap */
    position: relative;
    z-index: 2;
}

/* Fix "Huge Space" under Featured/Awards Section in RTL */
html[lang="ar"] .awards {
    padding-bottom: 50px;
    /* Force reduce bottom padding from default */
}

/* ============================================
   MOBILE RESPONSIVENESS (RTL OVERRIDES)
   ============================================ */
@media (max-width: 768px) {

    /* Reset Typography for Mobile Screens */
    html[lang="ar"] body {
        font-size: 16px;
    }

    html[lang="ar"] h1,
    html[lang="ar"] .hero h1 {
        font-size: 1.1em;
    }

    /* Force Right Alignment on Hero */
    html[lang="ar"] .hero-description {
        text-align: right !important;
        margin-right: 0;
        margin-left: auto;
    }

    html[lang="ar"] .hero-label {
        justify-content: flex-start;
    }

    html[lang="ar"] .hero-bottom {
        align-items: flex-start !important;
    }

    /* Services Accordion Arrow Logic (Mobile) */
    html[lang="ar"] .service-item.active .service-arrow {
        transform: rotate(-90deg) !important;
    }

    /* Fix Mobile Menu Toggle Position */
    html[lang="ar"] .nav-toggle {
        margin-left: 0;
        margin-right: auto;
    }

    /* Trust Logos / Marquee Mobile */
    html[lang="ar"] .marquee-section {
        margin-bottom: 40px;
    }

    /* Awards Mobile */
    html[lang="ar"] .award-card {
        min-height: auto;
    }

    html[lang="ar"] .awards {
        padding-bottom: 30px;
    }

    /* Hero Location Strip - Prevent Overlap */
    /* Hero Location Strip - Prevent Overlap */
    html[lang="ar"] .hero-location-strip {
        left: 12px;
        /* Gentle Gap from Left Edge */
        width: 0 !important;
    }

    html[lang="ar"] .hero-location-text {
        font-size: 10px;
    }

    html[lang="ar"] .hero-content {
        padding-left: 50px !important;
        /* Safe Zone for Strip */
        padding-right: 20px !important;
    }
}