/*
 * Arabic RTL - خط عربي احترافي
 * Part 2: تطبيق خط Noto Kufi Arabic
 * Part 3: قواعد RTL الأساسية
 * Part 4: معالجة تكسّر الكلمات العربية
 * Part 5: عكس اتجاه Flexbox والهوامش
 * Part 6: تعديل الهيدر والتنقل
 * Part 7: Hero Section
 */

/* ===== Part 3: القواعد الأساسية لـ RTL ===== */
html[dir="rtl"],
html[lang="ar"] {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] body,
html[lang="ar"] body {
    direction: rtl;
    text-align: right;
}

/* محاذاة النصوص لعناصر المحتوى */
html[dir="rtl"] .hero-content,
html[dir="rtl"] .section-title,
html[dir="rtl"] .about-content,
html[dir="rtl"] .shop-banner-content,
html[dir="rtl"] .service-content,
html[dir="rtl"] .offcanvas__content,
html[dir="rtl"] .contact-list,
html[dir="rtl"] .feature-items .content,
html[dir="rtl"] .printing-items .content,
html[dir="rtl"] .icon-items .content,
html[dir="rtl"] footer {
    text-align: right;
}

/* ===== Part 5: عكس اتجاه Flexbox والهوامش (RTL) ===== */
/* استخدام الخصائص المنطقية للهوامش */
html[dir="rtl"] .header-top-wrapper,
html[dir="rtl"] .header-main,
html[dir="rtl"] .mega-menu-wrapper {
    margin-inline-start: 0;
    margin-inline-end: 0;
}

/* تصحيح هوامش الأيقونات في قائمة الاتصال */
html[dir="rtl"] .header-top-wrapper .contact-list li i,
html[dir="rtl"] .contact-list li i {
    margin-right: 0;
    margin-left: 10px;
}

/* تصحيح mr-15 في RTL - المسافة بين الأيقونة والنص */
html[dir="rtl"] .offcanvas__contact-icon.mr-15,
html[dir="rtl"] .mr-15 {
    margin-right: 0 !important;
    margin-inline-start: 15px !important;
}

/* تبديل اللغة - الهوامش في RTL */
html[dir="rtl"] .lang-switch {
    margin-left: 0 !important;
    margin-inline-start: 6px !important;
}

html[dir="rtl"] .lang-switch:first-child {
    margin-inline-start: 0 !important;
}

html[dir="rtl"] .header-right .lang-switcher {
    margin-right: 0 !important;
    margin-inline-end: 15px !important;
}

/* القوائم المرنة - التأكد من التوافق مع RTL */
html[dir="rtl"] .d-flex.justify-content-between {
    flex-direction: row;
}

html[dir="rtl"] .header-right.d-flex {
    justify-content: flex-start;
}

/* social-icon - المسافات بين الأيقونات */
html[dir="rtl"] .social-icon a:not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
}

/* ===== Part 6: تعديل الهيدر والتنقل ===== */
/* Offcanvas - انزلاق من اليسار في RTL */
html[dir="rtl"] .offcanvas__info {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 2px solid var(--theme);
    transform: translateX(calc(-100% - 80px));
}

html[dir="rtl"] .offcanvas__info.info-open {
    transform: translateX(0);
}

/* Offcanvas - محاذاة الأيقونات */
html[dir="rtl"] .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li .offcanvas__contact-icon {
    margin-right: 0;
    margin-left: 20px;
}

/* عكس اتجاه أسهم الروابط والأزرار في RTL */
html[dir="rtl"] .theme-btn .fa-arrow-right,
html[dir="rtl"] .theme-btn .fa-long-arrow-right,
html[dir="rtl"] .arrow-icon .fa-long-arrow-right,
html[dir="rtl"] .service-content .icon .fa-long-arrow-right,
html[dir="rtl"] .project-box-items-3 .icon .fa-long-arrow-right,
html[dir="rtl"] .fa-long-arrow-right {
    transform: scaleX(-1);
    display: inline-block;
}

/* MeanMenu (القائمة الجوالية) - RTL */
html[dir="rtl"] .mean-container a.meanmenu-reveal {
    right: auto;
    left: 0;
}

html[dir="rtl"] .mean-container .mean-nav ul li a {
    text-align: right;
}

html[dir="rtl"] .mean-container .mean-nav ul li a.mean-expand {
    right: auto;
    left: 0;
}

/* القائمة الرئيسية - محاذاة أيقونة القائمة */
html[dir="rtl"] .main-menu ul li a i {
    margin-left: 0;
    margin-right: 0;
    margin-inline-end: 5px;
}

/* ===== Part 7: Hero Section ===== */
/* ترتيب الأعمدة: المحتوى يمين، الصورة يسار (يتم تلقائياً مع RTL) */
html[dir="rtl"] .hero-section .row {
    flex-direction: row;
}

/* النقاط (swiper-dot) - نقل لليسار في RTL */
html[dir="rtl"] .hero-1 .swiper-dot-2 {
    right: auto;
    left: 5%;
}

/* عكس مواضع الأشكال الزخرفية */
html[dir="rtl"] .hero-1 .hero-image .mockup-shape {
    left: auto;
    right: -32%;
}

@media (max-width: 1199px) {
    html[dir="rtl"] .hero-1 .hero-image .mockup-shape {
        right: 0;
    }
}

html[dir="rtl"] .hero-1 .hero-image .hero-img .circle-shape {
    left: auto;
    right: 34%;
}

@media (max-width: 991px) {
    html[dir="rtl"] .hero-1 .hero-image .hero-img .circle-shape {
        right: 50%;
    }
}

html[dir="rtl"] .hero-1 .hero-image .cup-shape {
    left: auto;
    right: -100px;
}

@media (max-width: 1199px) {
    html[dir="rtl"] .hero-1 .hero-image .cup-shape {
        right: 0;
    }
}

html[dir="rtl"] .hero-1 .hero-image .t-shirt-shape {
    right: auto;
    left: 50px;
}

html[dir="rtl"] .hero-1 .hero-image .cap-shape {
    right: auto;
    left: 0;
}

/* ===== Part 4: معالجة تكسّر الكلمات العربية ===== */
/* إلغاء letter-spacing للعناوين - يكسر الربط الخطي في العربية */
html[lang="ar"] .section-title h2,
html[lang="ar"] .about-content h2,
html[lang="ar"] .split-text,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 {
    letter-spacing: normal !important;
}

html[lang="ar"],
html[dir="rtl"],
html[lang="ar"] p,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] span,
html[lang="ar"] a,
html[lang="ar"] li,
html[lang="ar"] .hero-content *,
html[lang="ar"] .section-title *,
html[lang="ar"] .about-content *,
html[lang="ar"] .shop-banner-content *,
html[lang="ar"] .service-content *,
html[lang="ar"] .feature-items *,
html[lang="ar"] .printing-items .content *,
html[lang="ar"] .icon-items .content *,
html[lang="ar"] .marquee-section {
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: none;
}

/* ===== Part 2: تطبيق الخط العربي على النصوص ===== */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] .hero-content h1,
html[lang="ar"] .hero-content p,
html[lang="ar"] .section-title h2,
html[lang="ar"] .section-title .sub-title span,
html[lang="ar"] .section-title p,
html[lang="ar"] .about-content p,
html[lang="ar"] .about-content h2,
html[lang="ar"] .about-content h4,
html[lang="ar"] .about-content h6,
html[lang="ar"] .shop-banner-content h3,
html[lang="ar"] .shop-banner-content span,
html[lang="ar"] .service-content h3,
html[lang="ar"] .project-box-items-3 h3,
html[lang="ar"] .project-box-items-3 p,
html[lang="ar"] .feature-product-items h4,
html[lang="ar"] .printing-items h3,
html[lang="ar"] .printing-items p,
html[lang="ar"] .feature-items h6,
html[lang="ar"] .feature-items p,
html[lang="ar"] .contact-list,
html[lang="ar"] .offcanvas__content p,
html[lang="ar"] .offcanvas__contact h4,
html[lang="ar"] nav,
html[lang="ar"] .theme-btn,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] .icon-items .content h4,
html[lang="ar"] .icon-items .content p,
html[lang="ar"] .pro-head .title,
html[lang="ar"] .about-author .content span,
html[lang="ar"] .about-author .content h4,
html[lang="ar"] .marquee-section,
html[lang="ar"] footer {
    font-family: 'Noto Kufi Arabic', 'Traditional Arabic', 'Arial', sans-serif !important;
}

/* استثناء أيقونات Font Awesome - يجب أن تبقى بعد قواعد الخط */
html[lang="ar"] .fa,
html[lang="ar"] .fas,
html[lang="ar"] .far,
html[lang="ar"] .fab,
html[lang="ar"] .fal,
html[lang="ar"] i[class*="fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}