/* ============================================
   RTL Support for Arabic
   ============================================ */

/* Apply Tajawal font for all Arabic text */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

[lang="ar"],
[lang="ar"] * {
    font-family: 'Tajawal', sans-serif !important;
}

/* Set RTL direction */
[lang="ar"] body {
    direction: rtl;
}

/* ============================================
   Prevent ALL icons from flipping in RTL
   ============================================ */
[lang="ar"] svg,
[lang="ar"] img,
[lang="ar"] .icon,
[dir="rtl"] svg,
[dir="rtl"] img,
[dir="rtl"] .icon {
    transform: scaleX(1) !important;
    direction: ltr !important;
}

/* ============================================
   Text Alignment for Arabic
   ============================================ */
[lang="ar"] p,
[lang="ar"] li,
[lang="ar"] span,
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] h5,
[lang="ar"] h6 {
    text-align: right !important;
}

[lang="ar"] .text-center {
    text-align: center !important;
}

/* Center alignment for hero, projects, and CTA sections in Arabic */
[lang="ar"] .hero-content,
[lang="ar"] .hero-content h1,
[lang="ar"] .hero-content h1 span,
[lang="ar"] .hero-content p,
[lang="ar"] .hero-content div,
[lang="ar"] .hero-content a {
    text-align: center !important;
}

/* Featured Portfolio Section - Center alignment in Arabic */
[lang="ar"] #featured-portfolio,
[lang="ar"] #featured-portfolio ~ *,
[lang="ar"] #featured-portfolio ~ div,
[lang="ar"] section .text-center[data-animate] h2[data-i18n="portfolio_preview.title"],
[lang="ar"] section .text-center[data-animate] p[data-i18n="portfolio_preview.description"],
[lang="ar"] section:has(#featured-portfolio) h2,
[lang="ar"] section:has(#featured-portfolio) p,
[lang="ar"] section:has(#featured-portfolio) .text-center,
[lang="ar"] section:has(#featured-portfolio) .text-center h2,
[lang="ar"] section:has(#featured-portfolio) .text-center p {
    text-align: center !important;
}

/* CTA Section - Center alignment in Arabic */
[lang="ar"] h2[data-i18n="cta.title"],
[lang="ar"] p[data-i18n="cta.description"],
[lang="ar"] a[data-i18n="cta.button"],
[lang="ar"] section:has([data-i18n="cta.title"]),
[lang="ar"] section:has([data-i18n="cta.title"]) h2,
[lang="ar"] section:has([data-i18n="cta.title"]) p,
[lang="ar"] section:has([data-i18n="cta.title"]) a,
[lang="ar"] section:has([data-i18n="cta.title"]) div,
[lang="ar"] section:has([data-i18n="cta.title"]) .text-center {
    text-align: center !important;
}

/* Services Page - Hero Section - Center alignment in Arabic */
[lang="ar"] h1[data-i18n="services.page_title"],
[lang="ar"] span[data-i18n="services.page_title"],
[lang="ar"] p[data-i18n="services.page_subtitle"],
[lang="ar"] section:has([data-i18n="services.page_title"]) h1,
[lang="ar"] section:has([data-i18n="services.page_title"]) p,
[lang="ar"] section:has([data-i18n="services.page_title"]) span,
[lang="ar"] section:has([data-i18n="services.page_title"]) div {
    text-align: center !important;
}

/* Services Page - CTA Section - Center alignment in Arabic */
[lang="ar"] h2[data-i18n="services.cta_title"],
[lang="ar"] p[data-i18n="services.cta_subtitle"],
[lang="ar"] a[data-i18n="services.cta_button"],
[lang="ar"] section:has([data-i18n="services.cta_title"]),
[lang="ar"] section:has([data-i18n="services.cta_title"]) h2,
[lang="ar"] section:has([data-i18n="services.cta_title"]) p,
[lang="ar"] section:has([data-i18n="services.cta_title"]) a,
[lang="ar"] section:has([data-i18n="services.cta_title"]) div {
    text-align: center !important;
}

/* Portfolio Page - Hero Section - Center alignment in Arabic */
[lang="ar"] h1[data-i18n="portfolio.page_title"],
[lang="ar"] span[data-i18n="portfolio.page_title"],
[lang="ar"] p[data-i18n="portfolio.page_subtitle"],
[lang="ar"] section:has([data-i18n="portfolio.page_title"]),
[lang="ar"] section:has([data-i18n="portfolio.page_title"]) h1,
[lang="ar"] section:has([data-i18n="portfolio.page_title"]) p,
[lang="ar"] section:has([data-i18n="portfolio.page_title"]) span,
[lang="ar"] section:has([data-i18n="portfolio.page_title"]) div {
    text-align: center !important;
}

/* Portfolio Page - Hero Section - Center alignment for all languages */
section:has([data-i18n="portfolio.page_title"]) h1,
section:has([data-i18n="portfolio.page_title"]) p,
section:has([data-i18n="portfolio.page_title"]) span,
section:has([data-i18n="portfolio.page_title"]) div {
    text-align: center !important;
}

/* Portfolio Page - CTA Section - Center alignment in Arabic */
[lang="ar"] h2[data-i18n="portfolio.cta_title"],
[lang="ar"] p[data-i18n="portfolio.cta_subtitle"],
[lang="ar"] a[data-i18n="portfolio.cta_button"],
[lang="ar"] section:has([data-i18n="portfolio.cta_title"]),
[lang="ar"] section:has([data-i18n="portfolio.cta_title"]) h2,
[lang="ar"] section:has([data-i18n="portfolio.cta_title"]) p,
[lang="ar"] section:has([data-i18n="portfolio.cta_title"]) a,
[lang="ar"] section:has([data-i18n="portfolio.cta_title"]) div {
    text-align: center !important;
}

/* ============================================
   Icon Positioning - Icons on RIGHT in Arabic
   ============================================ */
/* Exclude Social Proof section and service card features from row-reverse */
[lang="ar"] .flex.items-start:not(.hero-content > div .flex):not(.glass-card li.flex),
[lang="ar"] .flex.items-center:not(.hero-content > div .flex):not(.hero-content > div .flex .flex):not(.glass-card li.flex) {
    flex-direction: row-reverse;
}

/* Service card feature list items - keep normal direction */
[lang="ar"] .glass-card li.flex.items-start,
[lang="ar"] .glass-card ul li.flex {
    flex-direction: row !important;
}

/* Testimonials slider - ensure proper direction and transform in RTL */
[lang="ar"] .testimonials-slider,
[lang="ar"] .testimonials-container,
[lang="ar"] .testimonials-track {
    direction: ltr !important;
}

/* Don't override transform - let JavaScript handle it */
[lang="ar"] .testimonials-track {
    /* Remove transform override to allow JavaScript to control it */
}

/* Testimonials navigation arrows - maintain LTR positioning and ensure clickability */
[lang="ar"] .testimonials-prev,
[lang="ar"] .testimonials-next {
    direction: ltr !important;
    position: absolute !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

[lang="ar"] .testimonials-prev {
    left: 1rem !important;
    right: auto !important;
}

[lang="ar"] .testimonials-next {
    right: 1rem !important;
    left: auto !important;
}

/* Ensure slider container doesn't block buttons */
[lang="ar"] .testimonials-slider {
    position: relative !important;
    z-index: 1 !important;
}

[lang="ar"] .testimonials-container {
    position: relative !important;
    z-index: 0 !important;
}

/* Adjust margins for icons in lists */
[lang="ar"] li svg {
    margin-left: 0.5rem;
    margin-right: 0 !important;
}

[lang="ar"] .mr-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem;
}

[lang="ar"] .ml-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem;
}

[lang="ar"] .mr-4 {
    margin-right: 0 !important;
    margin-left: 1rem;
}

[lang="ar"] .ml-4 {
    margin-left: 0 !important;
    margin-right: 1rem;
}

[lang="ar"] .mr-6 {
    margin-right: 0 !important;
    margin-left: 1.5rem;
}

/* ============================================
   Spacing Utilities
   ============================================ */
[lang="ar"] .space-x-2>*+* {
    margin-left: 0 !important;
    margin-right: 0.5rem;
}

[lang="ar"] .space-x-4>*+* {
    margin-left: 0 !important;
    margin-right: 1rem;
}

[lang="ar"] .space-x-8>*+* {
    margin-left: 0 !important;
    margin-right: 2rem;
}

/* ============================================
   Glass Cards & Sections
   ============================================ */
[lang="ar"] .glass-card {
    text-align: right;
}

[lang="ar"] .glass-card .flex {
    flex-direction: row-reverse;
}

/* Features Card - disable row-reverse for flex items-start */
[lang="ar"] .glass-card:has(h3[data-i18n="why_us.title"]) .flex.items-start,
[lang="ar"] .glass-card:has([data-i18n="why_us.title"]) .flex.items-start {
    flex-direction: row !important;
}

/* ============================================
   Forms
   ============================================ */
[lang="ar"] input,
[lang="ar"] textarea,
[lang="ar"] select {
    text-align: right;
    direction: rtl;
}

[lang="ar"] input::placeholder,
[lang="ar"] textarea::placeholder {
    text-align: right;
}

/* ============================================
   Navigation
   ============================================ */
[lang="ar"] [data-mobile-menu] {
    right: auto;
    left: 0;
}

/* ============================================
   Tables
   ============================================ */
[lang="ar"] table {
    direction: rtl;
}

[lang="ar"] th,
[lang="ar"] td {
    text-align: right;
}

/* ============================================
   Footer
   ============================================ */
[lang="ar"] footer {
    direction: rtl;
}

[lang="ar"] footer .grid {
    direction: rtl;
}

[lang="ar"] footer .flex {
    flex-direction: row-reverse;
}

/* Footer social icons - ensure proper spacing in RTL */
[lang="ar"] footer .flex.gap-6,
[lang="ar"] footer > div > div > div:first-child .flex {
    gap: 1.5rem !important;
    flex-direction: row !important;
}

/* ============================================
   Remove shadow from project cards (applies to all languages)
   ============================================ */
#featured-portfolio .glass-card,
#portfolio-grid .glass-card,
#featured-portfolio .glass-card.overflow-hidden,
#portfolio-grid .glass-card.overflow-hidden,
#featured-portfolio > .glass-card,
#portfolio-grid > .glass-card {
    box-shadow: none !important;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    filter: drop-shadow(none) !important;
}

/* ============================================
   Animations
   ============================================ */
[lang="ar"] .slide-up.animate {
    transform: translateX(0);
}

/* ============================================
   Hero Section - Mobile Button Text Size (Phone Only)
   ============================================ */
@media (max-width: 639px) {
    .hero-content a[href="portfolio.php"],
    .hero-content a[href="contact.php"],
    .hero-content a.neon-button,
    section:has(.hero-content) a[data-i18n="hero.cta_portfolio"],
    section:has(.hero-content) a[data-i18n="hero.cta_consultation"],
    .section-wrapper:has(.hero-content) a[data-i18n="hero.cta_portfolio"],
    .section-wrapper:has(.hero-content) a[data-i18n="hero.cta_consultation"] {
        font-size: 0.7rem !important;
    }
}

/* ============================================
   Testimonials Dots Navigation - Hide on Mobile
   ============================================ */
@media (max-width: 639px) {
    .testimonials-dot,
    .flex.justify-center.gap-2.mt-8:has(.testimonials-dot) {
        display: none !important;
    }
}