/* Arabic Typography and RTL Support */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');

/* Arabic Font Stack */
[dir="rtl"] {
    font-family: 'Cairo', 'Tajawal', 'Segoe UI', 'Tahoma', Arial, sans-serif !important;
    text-align: right;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    font-family: 'Cairo', 'Tajawal', sans-serif !important;
    font-weight: 600;
}

/* RTL Layout Corrections */
[dir="rtl"] .grid {
    direction: rtl;
}

[dir="rtl"] .flex {
    direction: rtl;
}

[dir="rtl"] .items-start {
    align-items: flex-start;
}

/* Spacing corrections for RTL */
[dir="rtl"] .gap-4 > * + * {
    margin-right: 1rem;
    margin-left: 0;
}

[dir="rtl"] .gap-6 > * + * {
    margin-right: 1.5rem;
    margin-left: 0;
}

[dir="rtl"] .gap-8 > * + * {
    margin-right: 2rem;
    margin-left: 0;
}

[dir="rtl"] .space-x-6 > * + * {
    margin-right: 1.5rem;
    margin-left: 0;
}

/* Text alignment for RTL */
[dir="rtl"] .text-left {
    text-align: right !important;
}

[dir="rtl"] .text-right {
    text-align: left !important;
}

[dir="rtl"] .text-center {
    text-align: center !important;
}

/* Flexbox alignment for RTL */
[dir="rtl"] .justify-start {
    justify-content: flex-end !important;
}

[dir="rtl"] .justify-end {
    justify-content: flex-start !important;
}

[dir="rtl"] .justify-between {
    justify-content: space-between !important;
}

/* Margin and Padding corrections */
[dir="rtl"] .mr-4 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

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

[dir="rtl"] .pr-8 {
    padding-right: 0 !important;
    padding-left: 2rem !important;
}

[dir="rtl"] .pl-8 {
    padding-left: 0 !important;
    padding-right: 2rem !important;
}

/* Language toggle positioning */
[dir="rtl"] .language-toggle {
    right: auto !important;
    left: 20px !important;
}

/* Mobile responsive fixes for language toggle */
@media (max-width: 768px) {
    .language-toggle {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 15px !important;
        z-index: 9999 !important;
    }
    
    [dir="rtl"] .language-toggle {
        right: auto !important;
        left: 15px !important;
    }
}

/* Icons in RTL context */
[dir="rtl"] .fas, [dir="rtl"] .fa {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Button positioning for RTL */
[dir="rtl"] .cta-primary, [dir="rtl"] .cta-secondary {
    margin-left: 0;
    margin-right: 1rem;
}

[dir="rtl"] .cta-primary:last-child, [dir="rtl"] .cta-secondary:last-child {
    margin-right: 0;
}

/* Grid items alignment for RTL */
[dir="rtl"] .md\:grid-cols-2, 
[dir="rtl"] .md\:grid-cols-3, 
[dir="rtl"] .md\:grid-cols-4 {
    text-align: right;
}

/* Card content alignment */
[dir="rtl"] .card-hover {
    text-align: right;
}

[dir="rtl"] .card-hover .flex {
    flex-direction: row-reverse;
}

/* Step numbers for RTL */
[dir="rtl"] .step-number {
    margin-left: 0;
    margin-right: 1.5rem;
}

/* Responsive text for Arabic */
@media (max-width: 768px) {
    [dir="rtl"] h1 {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    
    [dir="rtl"] h2 {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    
    [dir="rtl"] .text-lg {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

/* Smooth transitions for language switching */
.fade-transition {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.fade-transition.show {
    opacity: 1;
}

/* Loading state for language switching */
.language-switching {
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

/* Arabic number formatting */
[dir="rtl"] .step-number {
    font-family: 'Cairo', sans-serif;
}

/* Better line height for Arabic text */
[dir="rtl"] p, [dir="rtl"] li {
    line-height: 1.8;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
    line-height: 1.4;
}

/* Card alignment fixes for Arabic */
[dir="rtl"] .border-l-4 {
    border-left: none !important;
    border-right: 4px solid #ef4444 !important;
}

/* Fix flex direction for RTL cards */
[dir="rtl"] .flex {
    flex-direction: row-reverse;
}

[dir="rtl"] .flex.items-start {
    flex-direction: row-reverse;
}

/* Icon centering fixes */
[dir="rtl"] .rounded-full {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[dir="rtl"] .bg-cyan-100 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[dir="rtl"] .bg-cyan-100 i {
    margin: 0 !important;
    display: block;
    text-align: center;
}

/* Text alignment for cards */
[dir="rtl"] .text-center {
    text-align: center !important;
}

[dir="rtl"] .text-xl,
[dir="rtl"] .text-lg,
[dir="rtl"] p {
    text-align: right;
}

[dir="rtl"] .text-center .text-xl,
[dir="rtl"] .text-center .text-lg,
[dir="rtl"] .text-center p {
    text-align: center !important;
}

/* Header and logo alignment for Arabic */
[dir="rtl"] .logo,
[dir="rtl"] .brand-text,
[dir="rtl"] h1:not(#problemsTitle):not(#featuresDetailedTitle):not(#featuresIntroTitle):not(#gettingStartedTitle) {
    text-align: right;
    justify-content: flex-end;
}

[dir="rtl"] .header-container,
[dir="rtl"] .nav-container {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .hero-section h1,
[dir="rtl"] .hero-title {
    text-align: right;
}

/* Fix logo and site name alignment in hero section */
[dir="rtl"] .flex.items-center.gap-4 {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

[dir="rtl"] #heroTitle {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .w-16.h-16 {
    order: 2;
}

[dir="rtl"] .hero-background .grid.md\\:grid-cols-2 {
    direction: rtl;
}

[dir="rtl"] .hero-background .max-w-6xl {
    direction: rtl;
}

/* Fix footer logo and company name alignment */
[dir="rtl"] footer .flex.items-center.gap-3 {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

[dir="rtl"] #footerCompany {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] footer .w-10.h-10 {
    order: 2;
}

[dir="rtl"] #footerTagline {
    text-align: right;
}

[dir="rtl"] footer .grid.md\\:grid-cols-3 {
    direction: rtl;
}

[dir="rtl"] footer .max-w-6xl {
    direction: rtl;
}

[dir="rtl"] #footerLinks {
    justify-content: flex-start;
    flex-direction: row-reverse;
}

[dir="rtl"] #footerLinks .space-x-6 > * + * {
    margin-left: 0;
    margin-right: 1.5rem;
}

/* Equal card heights */
[dir="rtl"] .grid {
    align-items: stretch;
}

[dir="rtl"] .card-hover {
    height: 100%;
    display: flex;
    flex-direction: column;
}

[dir="rtl"] .bg-gray-50 {
    min-height: 200px;
    display: flex;
    align-items: stretch;
}

[dir="rtl"] .bg-gray-50 > div {
    width: 100%;
}

/* Center alignment for feature cards */
[dir="rtl"] .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Global grid fixes for equal card heights */
.grid {
    display: grid;
    align-items: stretch;
}

.grid > * {
    height: 100%;
}

/* Ensure all cards have consistent heights */
.card-hover {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bg-gray-50.p-8,
.bg-white.p-8 {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 180px;
}

/* Flex growth for card content */
.card-hover > *:last-child {
    flex-grow: 1;
}

/* Features Detailed Grid - Fixed dimensions and alignment */
#featuresDetailedGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
}

#featuresDetailedGrid > * {
    width: 500px;
    height: 200px;
    min-width: 500px;
    min-height: 200px;
    max-width: 500px;
    max-height: 200px;
    margin: 0;
}

#featuresDetailedGrid .card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* RTL support for featuresDetailedGrid */
[dir="rtl"] #featuresDetailedGrid {
    direction: ltr; /* Keep flex direction consistent */
}

[dir="rtl"] #featuresDetailedGrid > * {
    direction: rtl; /* Content direction */
    text-align: right;
}

/* Problems Grid - Fixed dimensions and alignment */
#problemsGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
}

#problemsGrid > * {
    width: 500px;
    height: 200px;
    min-width: 500px;
    min-height: 200px;
    max-width: 500px;
    max-height: 200px;
    margin: 0;
}

#problemsGrid .card-hover {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* RTL support for problemsGrid */
[dir="rtl"] #problemsGrid {
    direction: ltr; /* Keep flex direction consistent */
}

[dir="rtl"] #problemsGrid > * {
    direction: rtl; /* Content direction */
    text-align: right;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    /* Fix header alignment for Arabic on mobile */
    [dir="rtl"] header,
    [dir="rtl"] nav,
    [dir="rtl"] .header-container {
        text-align: right;
        direction: rtl;
    }
    
    /* Logo and brand alignment for Arabic */
    [dir="rtl"] .logo,
    [dir="rtl"] .brand,
    [dir="rtl"] h1,
    [dir="rtl"] .hero-title {
        text-align: right !important;
        margin-right: 0;
        margin-left: auto;
    }
    
    /* Header navigation for mobile Arabic */
    [dir="rtl"] .mobile-nav,
    [dir="rtl"] .nav-items {
        flex-direction: row-reverse;
        justify-content: flex-start;
    }
    
    /* Fix for section titles on mobile */
    #problemsTitle,
    #featuresDetailedTitle,
    #featuresIntroTitle,
    #gettingStartedTitle {
        width: auto !important;
        min-width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        text-align: center;
        padding: 0 1rem;
    }
    
    /* Card grids mobile responsive */
    #problemsGrid,
    #featuresDetailedGrid {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    #problemsGrid > *,
    #featuresDetailedGrid > * {
        width: 90%;
        max-width: 400px;
        height: auto;
        min-height: 150px;
        min-width: auto;
        max-height: none;
    }
    
    [dir="rtl"] .bg-gray-50.p-8 {
        min-height: auto;
        text-align: center;
    }
    
    [dir="rtl"] .flex {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    [dir="rtl"] .text-4xl {
        margin-bottom: 1rem;
    }
    
    /* Ensure language button is visible and properly positioned */
    .language-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 15px !important;
        z-index: 9999 !important;
    }
    
    [dir="rtl"] .language-toggle {
        right: auto !important;
        left: 15px !important;
    }
}