/**
 * أنماط CSS الشاملة لدعم اللغتين العربية والإنجليزية
 * Comprehensive Bilingual CSS - Arabic (RTL) & English (LTR)
 * الإصدار 2.0 - إصلاح شامل للاتجاهات وانعكاس العناصر
 */

/* ============================================
   الخطوط / Fonts
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Tajawal:wght@300;400;500;700&display=swap');

/* ============================================
   الإعدادات الأساسية - العربية (الافتراضي)
   Arabic Default Settings (RTL)
   ============================================ */
html[lang="ar"],
html[dir="rtl"] {
    direction: rtl;
}

html[lang="ar"] body,
body.lang-ar {
    font-family: 'Tajawal', 'Arial', sans-serif;
    direction: rtl;
    text-align: right;
}

/* ============================================
   الإعدادات الأساسية - الإنجليزية
   English Settings (LTR)
   ============================================ */
html[lang="en"],
html[dir="ltr"] {
    direction: ltr;
}

html[lang="en"] body,
body.lang-en {
    font-family: 'Poppins', 'Segoe UI', 'Arial', sans-serif;
    direction: ltr;
    text-align: left;
}

/* ============================================
   الرأس والتنقل - إنجليزي (أولوية قصوى)
   Header & Navigation - English (Critical Fix)
   ============================================ */

/* انعكاس الرأس بالكامل */
body.lang-en header,
html[lang="en"] header {
    direction: ltr !important;
}

body.lang-en header .container,
html[lang="en"] header .container {
    direction: ltr !important;
    flex-direction: row-reverse !important;
}

/* الشعار ينتقل لأقصى اليمين في الإنجليزية */
body.lang-en .logo,
html[lang="en"] .logo {
    order: 2 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* القائمة تنتقل لأقصى اليسار في الإنجليزية */
body.lang-en nav,
html[lang="en"] nav {
    order: 1 !important;
    direction: ltr !important;
}

body.lang-en .main-menu,
html[lang="en"] .main-menu {
    direction: ltr !important;
    flex-direction: row !important;
}

body.lang-en .main-menu li,
html[lang="en"] .main-menu li {
    margin-right: 0 !important;
    margin-left: 5px !important;
}

body.lang-en .main-menu li a,
html[lang="en"] .main-menu li a {
    font-family: 'Poppins', 'Segoe UI', sans-serif !important;
}

/* مبدل اللغة في الإنجليزية */
body.lang-en .language-dropdown-wrapper,
html[lang="en"] .language-dropdown-wrapper {
    order: 0 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

/* ============================================
   الرأس والتنقل - العربي (تأكيد RTL)
   Header & Navigation - Arabic (RTL Confirm)
   ============================================ */
body.lang-ar header .container,
html[lang="ar"] header .container {
    direction: rtl !important;
    flex-direction: row !important;
}

body.lang-ar .logo,
html[lang="ar"] .logo {
    order: 0 !important;
}

body.lang-ar nav,
html[lang="ar"] nav {
    order: 1 !important;
    direction: rtl !important;
}

body.lang-ar .main-menu,
html[lang="ar"] .main-menu {
    direction: rtl !important;
}

body.lang-ar .main-menu li,
html[lang="ar"] .main-menu li {
    margin-right: 5px !important;
    margin-left: 0 !important;
}

body.lang-ar .language-dropdown-wrapper,
html[lang="ar"] .language-dropdown-wrapper {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* ============================================
   القسم الرئيسي (Hero) - إنجليزي
   Hero Section - English
   ============================================ */
body.lang-en .hero-content,
html[lang="en"] .hero-content {
    text-align: center !important;
    direction: ltr !important;
}

body.lang-en .hero-content h1,
body.lang-en .hero-content h2,
body.lang-en .hero-content p,
html[lang="en"] .hero-content h1,
html[lang="en"] .hero-content h2,
html[lang="en"] .hero-content p {
    text-align: center !important;
}

body.lang-en .hero-content .btn,
html[lang="en"] .hero-content .btn {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   عناوين الأقسام - إنجليزي
   Section Titles - English
   ============================================ */
body.lang-en .section-title,
html[lang="en"] .section-title {
    text-align: center !important;
}

body.lang-en .section-title h2,
html[lang="en"] .section-title h2 {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

body.lang-en .section-title h2::after,
html[lang="en"] .section-title h2::after {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

/* ============================================
   بطاقات الخدمات والبرامج - إنجليزي
   Service & Program Cards - English
   ============================================ */
body.lang-en .service-card,
body.lang-en .program-card,
body.lang-en .consulting-card,
body.lang-en .course-card,
html[lang="en"] .service-card,
html[lang="en"] .program-card,
html[lang="en"] .consulting-card,
html[lang="en"] .course-card {
    text-align: left !important;
    direction: ltr !important;
}

body.lang-en .service-card h3,
body.lang-en .program-card h3,
body.lang-en .consulting-card h3,
body.lang-en .course-card h3,
html[lang="en"] .service-card h3,
html[lang="en"] .program-card h3,
html[lang="en"] .consulting-card h3,
html[lang="en"] .course-card h3 {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    text-align: left;
}

body.lang-en .service-card p,
body.lang-en .program-card p,
body.lang-en .consulting-card p,
body.lang-en .course-card p,
html[lang="en"] .service-card p,
html[lang="en"] .program-card p,
html[lang="en"] .consulting-card p,
html[lang="en"] .course-card p {
    text-align: left !important;
    direction: ltr !important;
}

/* ============================================
   أزرار الروابط - إنجليزي
   Link Buttons - English
   ============================================ */
body.lang-en .btn-link,
html[lang="en"] .btn-link {
    direction: ltr !important;
}

body.lang-en .btn-link i,
html[lang="en"] .btn-link i {
    margin-left: 5px !important;
    margin-right: 0 !important;
}

/* ============================================
   النبذة المختصرة - إنجليزي
   About Brief Section - English
   ============================================ */
body.lang-en .about-content,
body.lang-en .about-text,
body.lang-en .about-brief,
html[lang="en"] .about-content,
html[lang="en"] .about-text,
html[lang="en"] .about-brief {
    text-align: left !important;
    direction: ltr !important;
}

body.lang-en .about-content p,
body.lang-en .about-text p,
html[lang="en"] .about-content p,
html[lang="en"] .about-text p {
    text-align: left !important;
    line-height: 1.8;
}

/* ============================================
   مجالات الخدمات - إنجليزي
   Service Areas - English
   ============================================ */
body.lang-en .services-section,
body.lang-en .service-area,
html[lang="en"] .services-section,
html[lang="en"] .service-area {
    direction: ltr !important;
    text-align: left !important;
}

body.lang-en .services-section h3,
body.lang-en .service-area h3,
html[lang="en"] .services-section h3,
html[lang="en"] .service-area h3 {
    text-align: left !important;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

body.lang-en .services-section p,
body.lang-en .service-area p,
html[lang="en"] .services-section p,
html[lang="en"] .service-area p {
    text-align: left !important;
}

/* ============================================
   التبويبات - إنجليزي
   Tabs - English
   ============================================ */
body.lang-en .tabs,
body.lang-en .tab-buttons,
body.lang-en .tabs-nav,
html[lang="en"] .tabs,
html[lang="en"] .tab-buttons,
html[lang="en"] .tabs-nav {
    direction: ltr !important;
}

body.lang-en .tab-btn,
body.lang-en .tabs-nav button,
html[lang="en"] .tab-btn,
html[lang="en"] .tabs-nav button {
    font-family: 'Poppins', 'Segoe UI', sans-serif !important;
}

body.lang-en .tab-content,
body.lang-en .tab-pane,
html[lang="en"] .tab-content,
html[lang="en"] .tab-pane {
    direction: ltr !important;
    text-align: left !important;
}

/* ============================================
   نموذج التواصل - إنجليزي
   Contact Form - English
   ============================================ */
body.lang-en .contact-form,
body.lang-en .contact-section,
body.lang-en form,
html[lang="en"] .contact-form,
html[lang="en"] .contact-section,
html[lang="en"] form {
    direction: ltr !important;
    text-align: left !important;
}

body.lang-en .contact-form label,
body.lang-en .form-group label,
html[lang="en"] .contact-form label,
html[lang="en"] .form-group label {
    text-align: left !important;
    display: block;
}

body.lang-en .contact-form input,
body.lang-en .contact-form textarea,
body.lang-en .contact-form select,
body.lang-en .form-group input,
body.lang-en .form-group textarea,
body.lang-en .form-group select,
html[lang="en"] .contact-form input,
html[lang="en"] .contact-form textarea,
html[lang="en"] .contact-form select,
html[lang="en"] .form-group input,
html[lang="en"] .form-group textarea,
html[lang="en"] .form-group select {
    direction: ltr !important;
    text-align: left !important;
    font-family: 'Poppins', 'Segoe UI', sans-serif !important;
}

body.lang-en .contact-form input::placeholder,
body.lang-en .form-group input::placeholder,
body.lang-en .contact-form textarea::placeholder,
body.lang-en .form-group textarea::placeholder,
html[lang="en"] .contact-form input::placeholder,
html[lang="en"] .form-group input::placeholder,
html[lang="en"] .contact-form textarea::placeholder,
html[lang="en"] .form-group textarea::placeholder {
    text-align: left !important;
    direction: ltr !important;
}

/* ============================================
   المودال - إنجليزي
   Modal - English
   ============================================ */
body.lang-en .modal-content,
html[lang="en"] .modal-content {
    direction: ltr !important;
    text-align: left !important;
}

body.lang-en .modal-content h2,
body.lang-en .modal-content h3,
body.lang-en .modal-content label,
html[lang="en"] .modal-content h2,
html[lang="en"] .modal-content h3,
html[lang="en"] .modal-content label {
    text-align: left !important;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

body.lang-en .modal-content input,
body.lang-en .modal-content select,
body.lang-en .modal-content textarea,
html[lang="en"] .modal-content input,
html[lang="en"] .modal-content select,
html[lang="en"] .modal-content textarea {
    direction: ltr !important;
    text-align: left !important;
}

/* ============================================
   التذييل - إنجليزي (انعكاس كامل)
   Footer - English (Full Mirror)
   ============================================ */
body.lang-en footer,
html[lang="en"] footer {
    direction: ltr !important;
    text-align: left !important;
}

body.lang-en .footer-content,
html[lang="en"] .footer-content {
    direction: ltr !important;
}

body.lang-en .footer-links,
body.lang-en .footer-contact,
html[lang="en"] .footer-links,
html[lang="en"] .footer-contact {
    text-align: left !important;
}

body.lang-en .footer-links h3,
body.lang-en .footer-contact h3,
html[lang="en"] .footer-links h3,
html[lang="en"] .footer-contact h3 {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    text-align: left !important;
}

body.lang-en .footer-links ul,
html[lang="en"] .footer-links ul {
    text-align: left !important;
}

body.lang-en .footer-links li a,
html[lang="en"] .footer-links li a {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

body.lang-en .footer-logo,
html[lang="en"] .footer-logo {
    text-align: center !important;
}

body.lang-en .footer-logo h2,
body.lang-en .footer-logo p,
html[lang="en"] .footer-logo h2,
html[lang="en"] .footer-logo p {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

body.lang-en .footer-bottom,
html[lang="en"] .footer-bottom {
    text-align: center !important;
}

/* ============================================
   صفحة من نحن - إنجليزي
   About Page - English
   ============================================ */
body.lang-en .about-section,
body.lang-en .qualifications-section,
body.lang-en .values-section,
body.lang-en .specialties-section,
html[lang="en"] .about-section,
html[lang="en"] .qualifications-section,
html[lang="en"] .values-section,
html[lang="en"] .specialties-section {
    text-align: left !important;
    direction: ltr !important;
}

body.lang-en .about-section h2,
body.lang-en .qualifications-section h2,
body.lang-en .values-section h2,
body.lang-en .specialties-section h2,
html[lang="en"] .about-section h2,
html[lang="en"] .qualifications-section h2,
html[lang="en"] .values-section h2,
html[lang="en"] .specialties-section h2 {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

body.lang-en .qualifications-section li,
body.lang-en .values-section li,
body.lang-en .specialties-section li,
html[lang="en"] .qualifications-section li,
html[lang="en"] .values-section li,
html[lang="en"] .specialties-section li {
    text-align: left !important;
    direction: ltr !important;
}

body.lang-en .qualifications-section li::before,
body.lang-en .specialties-section li::before,
html[lang="en"] .qualifications-section li::before,
html[lang="en"] .specialties-section li::before {
    margin-right: 10px !important;
    margin-left: 0 !important;
}

/* ============================================
   صفحة المقالات - إنجليزي
   Blog Page - English
   ============================================ */
body.lang-en .blog-card,
body.lang-en .article-card,
html[lang="en"] .blog-card,
html[lang="en"] .article-card {
    text-align: left !important;
    direction: ltr !important;
}

body.lang-en .blog-card h3,
body.lang-en .blog-card p,
body.lang-en .article-card h3,
body.lang-en .article-card p,
html[lang="en"] .blog-card h3,
html[lang="en"] .blog-card p,
html[lang="en"] .article-card h3,
html[lang="en"] .article-card p {
    text-align: left !important;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

body.lang-en .blog-meta,
body.lang-en .article-meta,
html[lang="en"] .blog-meta,
html[lang="en"] .article-meta {
    direction: ltr !important;
    text-align: left !important;
}

/* ============================================
   صفحة تفاصيل المقال - إنجليزي
   Article Detail - English
   ============================================ */
body.lang-en .article-content,
body.lang-en .article-body,
html[lang="en"] .article-content,
html[lang="en"] .article-body {
    text-align: left !important;
    direction: ltr !important;
}

body.lang-en .article-content h1,
body.lang-en .article-content h2,
body.lang-en .article-content h3,
body.lang-en .article-content p,
html[lang="en"] .article-content h1,
html[lang="en"] .article-content h2,
html[lang="en"] .article-content h3,
html[lang="en"] .article-content p {
    text-align: left !important;
}

/* ============================================
   صفحة تفاصيل الدورة - إنجليزي
   Course Detail Page - English
   ============================================ */
body.lang-en .course-hero,
body.lang-en .course-header,
body.lang-en .course-content,
body.lang-en .course-details,
body.lang-en .course-section,
html[lang="en"] .course-hero,
html[lang="en"] .course-header,
html[lang="en"] .course-content,
html[lang="en"] .course-details,
html[lang="en"] .course-section {
    text-align: left !important;
    direction: ltr !important;
}

body.lang-en .course-header h1,
html[lang="en"] .course-header h1 {
    text-align: left !important;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

body.lang-en .course-content h2,
body.lang-en .course-content h3,
body.lang-en .course-content p,
body.lang-en .course-content li,
body.lang-en .course-section h2,
body.lang-en .course-section h3,
body.lang-en .course-section p,
body.lang-en .course-section li,
html[lang="en"] .course-content h2,
html[lang="en"] .course-content h3,
html[lang="en"] .course-content p,
html[lang="en"] .course-content li,
html[lang="en"] .course-section h2,
html[lang="en"] .course-section h3,
html[lang="en"] .course-section p,
html[lang="en"] .course-section li {
    text-align: left !important;
}

body.lang-en .course-content ul,
body.lang-en .course-content ol,
body.lang-en .axes-list,
html[lang="en"] .course-content ul,
html[lang="en"] .course-content ol,
html[lang="en"] .axes-list {
    padding-left: 20px !important;
    padding-right: 0 !important;
}

body.lang-en .course-meta,
html[lang="en"] .course-meta {
    direction: ltr !important;
    text-align: left !important;
}

body.lang-en .btn-request,
body.lang-en .btn-register,
html[lang="en"] .btn-request,
html[lang="en"] .btn-register {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

/* ============================================
   قسم الدعوة للتواصل - إنجليزي
   CTA Section - English
   ============================================ */
body.lang-en .cta,
body.lang-en .cta-section,
html[lang="en"] .cta,
html[lang="en"] .cta-section {
    text-align: center !important;
}

body.lang-en .cta h2,
body.lang-en .cta p,
html[lang="en"] .cta h2,
html[lang="en"] .cta p {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

/* ============================================
   صفحة الأرشيف - إنجليزي
   Archive Page - English
   ============================================ */
body.lang-en .gallery-section,
html[lang="en"] .gallery-section {
    direction: ltr !important;
}

/* ============================================
   بنر الإعلانات - إنجليزي
   Banner Section - English
   ============================================ */
body.lang-en .banner-content,
body.lang-en .banner-slide,
html[lang="en"] .banner-content,
html[lang="en"] .banner-slide {
    direction: ltr !important;
    text-align: left !important;
}

body.lang-en .banner-content h3,
body.lang-en .banner-content p,
html[lang="en"] .banner-content h3,
html[lang="en"] .banner-content p {
    text-align: left !important;
}

/* ============================================
   صفحة الرأس الفرعية - إنجليزي
   Page Header - English
   ============================================ */
body.lang-en .page-header,
html[lang="en"] .page-header {
    direction: ltr !important;
    text-align: center !important;
}

body.lang-en .page-header h1,
body.lang-en .page-header p,
html[lang="en"] .page-header h1,
html[lang="en"] .page-header p {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

/* ============================================
   الخدمات الاستشارية - إنجليزي
   Consulting Services - English
   ============================================ */
body.lang-en .consulting-content,
body.lang-en .consulting-section,
html[lang="en"] .consulting-content,
html[lang="en"] .consulting-section {
    direction: ltr !important;
    text-align: left !important;
}

body.lang-en .consulting-content h3,
body.lang-en .consulting-content p,
html[lang="en"] .consulting-content h3,
html[lang="en"] .consulting-content p {
    text-align: left !important;
}

/* ============================================
   جميع العناوين والنصوص - خط إنجليزي
   All Headings & Text - English Font
   ============================================ */
body.lang-en h1,
body.lang-en h2,
body.lang-en h3,
body.lang-en h4,
body.lang-en h5,
body.lang-en h6,
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

body.lang-en p,
body.lang-en span,
body.lang-en a,
body.lang-en li,
body.lang-en label,
body.lang-en button,
body.lang-en input,
body.lang-en textarea,
body.lang-en select,
html[lang="en"] p,
html[lang="en"] span,
html[lang="en"] a,
html[lang="en"] li,
html[lang="en"] label,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] textarea,
html[lang="en"] select {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

/* ============================================
   إصلاح العربية (تأكيد RTL)
   Arabic Fix (RTL Confirmation)
   ============================================ */
body.lang-ar .hero-content,
html[lang="ar"] .hero-content {
    text-align: center !important;
    direction: rtl !important;
}

body.lang-ar .service-card,
body.lang-ar .program-card,
body.lang-ar .consulting-card,
body.lang-ar .course-card,
html[lang="ar"] .service-card,
html[lang="ar"] .program-card,
html[lang="ar"] .consulting-card,
html[lang="ar"] .course-card {
    text-align: right !important;
    direction: rtl !important;
}

body.lang-ar .about-content,
body.lang-ar .about-text,
html[lang="ar"] .about-content,
html[lang="ar"] .about-text {
    text-align: right !important;
    direction: rtl !important;
}

body.lang-ar .contact-form,
body.lang-ar form,
html[lang="ar"] .contact-form,
html[lang="ar"] form {
    direction: rtl !important;
    text-align: right !important;
}

body.lang-ar footer,
html[lang="ar"] footer {
    direction: rtl !important;
    text-align: right !important;
}

body.lang-ar .footer-links,
body.lang-ar .footer-contact,
html[lang="ar"] .footer-links,
html[lang="ar"] .footer-contact {
    text-align: right !important;
}

body.lang-ar .course-content,
body.lang-ar .course-section,
body.lang-ar .course-header,
html[lang="ar"] .course-content,
html[lang="ar"] .course-section,
html[lang="ar"] .course-header {
    text-align: right !important;
    direction: rtl !important;
}

body.lang-ar .blog-card,
body.lang-ar .article-card,
html[lang="ar"] .blog-card,
html[lang="ar"] .article-card {
    text-align: right !important;
    direction: rtl !important;
}

body.lang-ar .tab-content,
body.lang-ar .tab-pane,
html[lang="ar"] .tab-content,
html[lang="ar"] .tab-pane {
    direction: rtl !important;
    text-align: right !important;
}

/* ============================================
   الأجهزة المتوسطة / Tablet Responsive
   ============================================ */
@media (max-width: 768px) {
    body.lang-en .hero-content,
    html[lang="en"] .hero-content {
        text-align: center !important;
    }
    
    body.lang-en .hero-content h1,
    body.lang-en .hero-content h2,
    body.lang-en .hero-content p,
    html[lang="en"] .hero-content h1,
    html[lang="en"] .hero-content h2,
    html[lang="en"] .hero-content p {
        text-align: center !important;
    }
    
    body.lang-en .service-card,
    body.lang-en .program-card,
    html[lang="en"] .service-card,
    html[lang="en"] .program-card {
        text-align: center !important;
    }
    
    body.lang-en .footer-links,
    body.lang-en .footer-contact,
    html[lang="en"] .footer-links,
    html[lang="en"] .footer-contact {
        text-align: center !important;
    }

    body.lang-en header .container,
    html[lang="en"] header .container {
        flex-direction: row-reverse !important;
    }
}

/* ============================================
   إصلاحات قائمة الهاتف - إنجليزي
   Mobile Menu Fix - English
   ============================================ */
@media (max-width: 992px) {
    body.lang-en .main-menu,
    html[lang="en"] .main-menu {
        text-align: left !important;
    }
    
    body.lang-en .main-menu li a,
    html[lang="en"] .main-menu li a {
        text-align: left !important;
    }

    body.lang-ar .main-menu,
    html[lang="ar"] .main-menu {
        text-align: right !important;
    }
    
    body.lang-ar .main-menu li a,
    html[lang="ar"] .main-menu li a {
        text-align: right !important;
    }
}

/* ============================================
   انتقالات سلسة / Smooth Transitions
   تم إزالة transitions على direction و text-align
   لأنها تسبب عدم استقرار الصفحة عند التحميل
   ============================================ */