/* Fikraa Tech - Arabic RTL Stylesheet */

/* Import base styles */
@import url('../../css/styles.css');

/* RTL Overrides */
body {
    direction: rtl;
    text-align: right;
}

/* Arabic Font Enhancement */
body, h1, h2, h3, h4, h5, h6, p, a, button, input, textarea, select {
    font-family: 'Cairo', 'Tajawal', 'Montserrat', sans-serif;
}

/* Navigation RTL */
nav .flex {
    flex-direction: row-reverse;
}

/* Desktop Menu Spacing */
.hidden.md\:flex.items-center.space-x-8 {
    gap: 2rem;
}

.space-x-8 > * + * {
    margin-right: 2rem;
    margin-left: 0;
}

.space-x-8 > *:first-child {
    margin-right: 0;
}

.space-x-6 > * + * {
    margin-right: 1.5rem;
    margin-left: 0;
}

.space-x-4 > * + * {
    margin-right: 1rem;
    margin-left: 0;
}

.space-x-3 > * + * {
    margin-right: 0.75rem;
    margin-left: 0;
}

.space-x-2 > * + * {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* Icons RTL Flip */
.fa-arrow-right:before {
    content: "\f060"; /* arrow-left */
}

.fa-chevron-right:before {
    content: "\f053"; /* chevron-left */
}

/* Margin and Padding RTL */
.mr-2 { margin-left: 0.5rem; margin-right: 0; }
.mr-3 { margin-left: 0.75rem; margin-right: 0; }
.mr-4 { margin-left: 1rem; margin-right: 0; }
.ml-1 { margin-right: 0.25rem; margin-left: 0; }
.ml-2 { margin-right: 0.5rem; margin-left: 0; }
.ml-3 { margin-right: 0.75rem; margin-left: 0; }
.ml-4 { margin-right: 1rem; margin-left: 0; }

.pr-2 { padding-left: 0.5rem; padding-right: 0; }
.pr-4 { padding-left: 1rem; padding-right: 0; }
.pr-6 { padding-left: 1.5rem; padding-right: 0; }
.pr-12 { padding-left: 3rem; padding-right: 0; }
.pr-14 { padding-left: 3.5rem; padding-right: 0; }
.pl-2 { padding-right: 0.5rem; padding-left: 0; }
.pl-4 { padding-right: 1rem; padding-left: 0; }
.pl-6 { padding-right: 1.5rem; padding-left: 0; }
.pl-12 { padding-right: 3rem; padding-left: 0; }

/* Border RTL */
.border-l-3 { border-right: 3px solid; border-left: none; }
.border-l-4 { border-right: 4px solid; border-left: none; }
.border-r-3 { border-left: 3px solid; border-right: none; }
.border-r-4 { border-left: 4px solid; border-right: none; }

/* Text Alignment */
.text-left { text-align: right; }
.text-right { text-align: left; }

/* Flexbox RTL */
.justify-start { justify-content: flex-end; }
.justify-end { justify-content: flex-start; }
.items-start { align-items: flex-end; }
.items-end { align-items: flex-start; }

/* Grid RTL for timeline */
@media (min-width: 768px) {
    .md\:text-right { text-align: left; }
    .md\:justify-end { justify-content: flex-start; }
}

/* Float Buttons RTL */
.whatsapp-float {
    left: 20px;
    right: auto;
}

.contact-float {
    left: 20px;
    right: auto;
}

/* Timeline RTL */
.timeline-line {
    right: 50%;
    left: auto;
}

.timeline-dot {
    right: 50%;
    left: auto;
}

/* Gradients and Animations - Keep LTR */
.hero-bg,
.contact-banner-bg {
    background-attachment: fixed;
}

/* Language Switcher RTL Adjustments */
.language-switcher {
    margin-left: 0 !important;
    flex-shrink: 0;
}

/* Arabic Typography Improvements */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.6;
}

p {
    line-height: 1.8;
}

/* Form Elements RTL */
input[type="email"],
input[type="text"],
input[type="tel"],
textarea,
select {
    text-align: right;
    padding-right: 1rem;
    padding-left: 1rem;
}

/* Search Box RTL */
.search-box {
    padding-right: 3.5rem;
    padding-left: 1.5rem;
}

/* Responsive RTL */
@media (max-width: 768px) {
    .timeline-line {
        right: 20px;
        left: auto;
    }
    
    .timeline-dot {
        right: 20px;
        left: auto;
    }
    
    .whatsapp-float {
        left: 15px;
        right: auto;
    }
    
    .contact-float {
        left: 15px;
        right: auto;
    }
}

/* Mobile Menu RTL */
@media (max-width: 768px) {
    #mobile-menu {
        text-align: right;
    }
}

/* Feature Icons Alignment */
.feature-icon {
    margin-left: 1rem;
    margin-right: 0;
}

/* Breadcrumb RTL */
.breadcrumb {
    display: flex;
    flex-direction: row-reverse;
}

/* Stats and Numbers - Keep LTR */
.price-tag,
.text-5xl,
.text-4xl,
.text-3xl {
    direction: ltr;
    display: inline-block;
}