/* ============================================
   Language System CSS
   ============================================ */

/* Language Switcher */
.language-switcher {
    position: fixed;
    top: 100px;
    left: 20px;
    background: white;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 5px;
    display: flex;
    gap: 5px;
    z-index: 1000;
    transition: all 0.3s ease;
}

.language-switcher:hover {
    box-shadow: 0 6px 18px rgba(44, 116, 124, 0.3);
}

.lang-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--dark-color);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.lang-btn:hover {
    background: var(--light-color);
}

.lang-btn.active {
    background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
    color: white;
}

/* RTL/LTR Specific Styles */
body.rtl {
    direction: rtl;
    text-align: right;
}

body.ltr {
    direction: ltr;
    text-align: left;
}

/* Navigation adjustments for LTR */
body.ltr .nav-menu {
    flex-direction: row;
}

body.ltr .nav-menu a::after {
    right: auto;
    left: 0;
}

body.ltr .logo {
    flex-direction: row;
}

body.ltr .logo-text {
    text-align: left;
}

/* Fix English menu wrapping issue */
body.ltr .nav-menu {
    gap: 1.5rem; /* Reduced gap for English */
}

body.ltr .nav-menu a {
    font-size: 0.95rem; /* Slightly smaller for English */
    white-space: nowrap; /* Prevent wrapping */
}

/* Language switcher position for RTL/LTR */
body.rtl .language-switcher {
    left: 20px;
    right: auto;
}

body.ltr .language-switcher {
    left: auto;
    right: 20px;
}

/* Project cards arrow direction */
body.ltr .project-link i {
    transform: scaleX(-1);
}

/* Floating contact icons for LTR */
body.ltr .floating-contact {
    left: 20px;
    right: auto;
}

body.rtl .floating-contact {
    right: 20px;
    left: auto;
}

/* Scroll to top button for LTR */
body.ltr .scroll-top-btn {
    left: 20px;
    right: auto;
}

body.rtl .scroll-top-btn {
    right: 20px;
    left: auto;
}

/* Icons direction for LTR */
body.ltr .fa-arrow-left::before {
    content: "\f061"; /* arrow-right */
}

body.ltr .fa-arrow-right::before {
    content: "\f060"; /* arrow-left */
}

/* Form labels for LTR */
body.ltr form label {
    text-align: left;
}

/* Lists for LTR */
body.ltr ul,
body.ltr ol {
    padding-left: 2rem;
    padding-right: 0;
}

body.rtl ul,
body.rtl ol {
    padding-right: 2rem;
    padding-left: 0;
}

/* Typography adjustments for English */
body.ltr h1,
body.ltr h2,
body.ltr h3,
body.ltr h4,
body.ltr h5,
body.ltr h6 {
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

body.ltr p,
body.ltr span,
body.ltr a {
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
}

/* Responsive language switcher */
@media (max-width: 768px) {
    .language-switcher {
        top: auto;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    body.ltr .language-switcher,
    body.rtl .language-switcher {
        left: 50%;
        right: auto;
    }
    
    .lang-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    /* Mobile menu adjustments for English */
    body.ltr .nav-menu {
        align-items: flex-start;
    }
    
    body.ltr .nav-menu a {
        font-size: 1rem;
    }
}

/* Smooth transitions for language change */
* {
    transition: direction 0s, text-align 0s;
}

body * {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Prevent layout shift during language change */
html[lang="ar"],
html[lang="en"] {
    scroll-behavior: smooth;
}

/* Logo text direction */
.logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

body.ltr .logo-text {
    align-items: flex-start;
}

body.rtl .logo-text {
    align-items: flex-end;
}

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

body.ltr .nav-container {
    flex-direction: row;
}

body.rtl .nav-container {
    flex-direction: row-reverse;
}

/* Project details layout for LTR */
body.ltr .project-info-table {
    text-align: left;
}

body.rtl .project-info-table {
    text-align: right;
}

/* Breadcrumb for LTR */
body.ltr .breadcrumb {
    flex-direction: row;
}

body.rtl .breadcrumb {
    flex-direction: row-reverse;
}

/* Contact info alignment */
body.ltr .contact-info,
body.ltr .footer-section {
    text-align: left;
}

body.rtl .contact-info,
body.rtl .footer-section {
    text-align: right;
}

/* Service cards icon position */
body.ltr .service-card .icon {
    margin-left: 0;
    margin-right: auto;
}

body.rtl .service-card .icon {
    margin-right: 0;
    margin-left: auto;
}

/* Lightbox buttons for RTL/LTR */
body.ltr .lightbox-nav.prev {
    left: 2rem;
    right: auto;
}

body.ltr .lightbox-nav.next {
    right: 2rem;
    left: auto;
}

body.rtl .lightbox-nav.prev {
    right: 2rem;
    left: auto;
}

body.rtl .lightbox-nav.next {
    left: 2rem;
    right: auto;
}

/* Animation classes for language transition */
.lang-transitioning {
    opacity: 0.5;
    pointer-events: none;
}

.lang-transition-complete {
    opacity: 1;
    pointer-events: auto;
}