/* ========================================
   Arabic Fonts - Using Google Fonts CDN
   ======================================== */

/* Import Arabic Fonts from Google Fonts CDN */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Tajawal:wght@300;400;500;700;800;900&display=swap');

/* Apply Arabic Font when lang="ar" or dir="rtl" */
html[lang="ar"],
html[lang="ar-SA"],
html[dir="rtl"],
body[lang="ar"],
body[lang="ar-SA"],
body[dir="rtl"] {
    font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

html[lang="ar"] *,
html[lang="ar-SA"] *,
html[dir="rtl"] *,
body[lang="ar"] *,
body[lang="ar-SA"] *,
body[dir="rtl"] * {
    font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Exclude Font Awesome icons from Arabic font */
html[lang="ar"] .fa,
html[lang="ar"] .fas,
html[lang="ar"] .far,
html[lang="ar"] .fal,
html[lang="ar"] .fab,
html[lang="ar"] .fad,
html[lang="ar"] i[class*="fa-"],
html[lang="ar-SA"] .fa,
html[lang="ar-SA"] .fas,
html[lang="ar-SA"] .far,
html[lang="ar-SA"] .fal,
html[lang="ar-SA"] .fab,
html[lang="ar-SA"] .fad,
html[lang="ar-SA"] i[class*="fa-"],
html[dir="rtl"] .fa,
html[dir="rtl"] .fas,
html[dir="rtl"] .far,
html[dir="rtl"] .fal,
html[dir="rtl"] .fab,
html[dir="rtl"] .fad,
html[dir="rtl"] i[class*="fa-"],
body[lang="ar"] .fa,
body[lang="ar"] .fas,
body[lang="ar"] .far,
body[lang="ar"] .fal,
body[lang="ar"] .fab,
body[lang="ar"] .fad,
body[lang="ar"] i[class*="fa-"],
body[lang="ar-SA"] .fa,
body[lang="ar-SA"] .fas,
body[lang="ar-SA"] .far,
body[lang="ar-SA"] .fal,
body[lang="ar-SA"] .fab,
body[lang="ar-SA"] .fad,
body[lang="ar-SA"] i[class*="fa-"],
body[dir="rtl"] .fa,
body[dir="rtl"] .fas,
body[dir="rtl"] .far,
body[dir="rtl"] .fal,
body[dir="rtl"] .fab,
body[dir="rtl"] .fad,
body[dir="rtl"] i[class*="fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
}

/* Override theme CSS variables for Arabic */
html[lang="ar"],
html[lang="ar-SA"],
html[dir="rtl"] {
    --tg-body-font-family: 'Cairo', 'Tajawal', sans-serif !important;
    --tg-heading-font-family: 'Cairo', 'Tajawal', sans-serif !important;
    --primary-font: 'Cairo', 'Tajawal', sans-serif !important;
    --heading-font: 'Cairo', 'Tajawal', sans-serif !important;
}

/* Specific Arabic text styling */
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-SA"] h1,
html[lang="ar-SA"] h2,
html[lang="ar-SA"] h3,
html[lang="ar-SA"] h4,
html[lang="ar-SA"] h5,
html[lang="ar-SA"] h6,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: 'Cairo', 'Tajawal', sans-serif !important;
    font-weight: 700;
}

html[lang="ar"] p,
html[lang="ar"] span,
html[lang="ar"] a,
html[lang="ar"] li,
html[lang="ar"] div,
html[lang="ar-SA"] p,
html[lang="ar-SA"] span,
html[lang="ar-SA"] a,
html[lang="ar-SA"] li,
html[lang="ar-SA"] div,
html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] a,
html[dir="rtl"] li,
html[dir="rtl"] div {
    font-family: 'Cairo', 'Tajawal', sans-serif !important;
}

/* Buttons and inputs */
html[lang="ar"] .btn,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar-SA"] .btn,
html[lang="ar-SA"] button,
html[lang="ar-SA"] input,
html[lang="ar-SA"] textarea,
html[lang="ar-SA"] select,
html[dir="rtl"] .btn,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    font-family: 'Cairo', 'Tajawal', sans-serif !important;
}

/* Navigation menu */
html[lang="ar"] .navbar-wrap,
html[lang="ar"] .menu-area,
html[lang="ar"] .navigation,
html[lang="ar"] .navbar-wrap ul li a,
html[lang="ar-SA"] .navbar-wrap,
html[lang="ar-SA"] .menu-area,
html[lang="ar-SA"] .navigation,
html[lang="ar-SA"] .navbar-wrap ul li a,
html[dir="rtl"] .navbar-wrap,
html[dir="rtl"] .menu-area,
html[dir="rtl"] .navigation,
html[dir="rtl"] .navbar-wrap ul li a {
    font-family: 'Cairo', 'Tajawal', sans-serif !important;
}

/* Titles and headings */
html[lang="ar"] .title,
html[lang="ar"] .sub-title,
html[lang="ar"] .section-title,
html[lang="ar-SA"] .title,
html[lang="ar-SA"] .sub-title,
html[lang="ar-SA"] .section-title,
html[dir="rtl"] .title,
html[dir="rtl"] .sub-title,
html[dir="rtl"] .section-title {
    font-family: 'Cairo', 'Tajawal', sans-serif !important;
}

/* Content areas */
html[lang="ar"] .slider-content,
html[lang="ar"] .banner-content,
html[lang="ar"] .about-content,
html[lang="ar-SA"] .slider-content,
html[lang="ar-SA"] .banner-content,
html[lang="ar-SA"] .about-content,
html[dir="rtl"] .slider-content,
html[dir="rtl"] .banner-content,
html[dir="rtl"] .about-content {
    font-family: 'Cairo', 'Tajawal', sans-serif !important;
}

/* Fix logo images in RTL - prevent distortion */
html[lang="ar"] .logo img,
html[lang="ar"] .f-logo img,
html[lang="ar"] .fw-logo img,
html[lang="ar"] .nav-logo img,
html[lang="ar"] .logo-side img,
html[lang="ar-SA"] .logo img,
html[lang="ar-SA"] .f-logo img,
html[lang="ar-SA"] .fw-logo img,
html[lang="ar-SA"] .nav-logo img,
html[lang="ar-SA"] .logo-side img,
html[dir="rtl"] .logo img,
html[dir="rtl"] .f-logo img,
html[dir="rtl"] .fw-logo img,
html[dir="rtl"] .nav-logo img,
html[dir="rtl"] .logo-side img,
body[lang="ar"] .logo img,
body[lang="ar"] .f-logo img,
body[lang="ar"] .fw-logo img,
body[lang="ar"] .nav-logo img,
body[lang="ar"] .logo-side img,
body[lang="ar-SA"] .logo img,
body[lang="ar-SA"] .f-logo img,
body[lang="ar-SA"] .fw-logo img,
body[lang="ar-SA"] .nav-logo img,
body[lang="ar-SA"] .logo-side img,
body[dir="rtl"] .logo img,
body[dir="rtl"] .f-logo img,
body[dir="rtl"] .fw-logo img,
body[dir="rtl"] .nav-logo img,
body[dir="rtl"] .logo-side img {
    object-fit: contain !important;
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    transform: none !important;
    filter: none !important;
    image-rendering: auto !important;
}

/* Fix preloader text in RTL - prevent letter flipping */
html[lang="ar"] .preloader-logo,
html[lang="ar"] .preloader-logo .letter,
html[lang="ar-SA"] .preloader-logo,
html[lang="ar-SA"] .preloader-logo .letter,
html[dir="rtl"] .preloader-logo,
html[dir="rtl"] .preloader-logo .letter,
body[lang="ar"] .preloader-logo,
body[lang="ar"] .preloader-logo .letter,
body[lang="ar-SA"] .preloader-logo,
body[lang="ar-SA"] .preloader-logo .letter,
body[dir="rtl"] .preloader-logo,
body[dir="rtl"] .preloader-logo .letter {
    transform: none !important;
    direction: ltr !important;
    text-align: center !important;
}

/* Fix email input direction in RTL - prevent placeholder from appearing on the left */
html[lang="ar"] input[type="email"],
html[lang="ar"] input[name="email"],
html[lang="ar-SA"] input[type="email"],
html[lang="ar-SA"] input[name="email"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[name="email"],
body[lang="ar"] input[type="email"],
body[lang="ar"] input[name="email"],
body[lang="ar-SA"] input[type="email"],
body[lang="ar-SA"] input[name="email"],
body[dir="rtl"] input[type="email"],
body[dir="rtl"] input[name="email"] {
    direction: rtl !important;
    text-align: right !important;
}

/* Fix email placeholder alignment in RTL */
html[lang="ar"] input[type="email"]::placeholder,
html[lang="ar"] input[name="email"]::placeholder,
html[lang="ar-SA"] input[type="email"]::placeholder,
html[lang="ar-SA"] input[name="email"]::placeholder,
html[dir="rtl"] input[type="email"]::placeholder,
html[dir="rtl"] input[name="email"]::placeholder,
body[lang="ar"] input[type="email"]::placeholder,
body[lang="ar"] input[name="email"]::placeholder,
body[lang="ar-SA"] input[type="email"]::placeholder,
body[lang="ar-SA"] input[name="email"]::placeholder,
body[dir="rtl"] input[type="email"]::placeholder,
body[dir="rtl"] input[name="email"]::placeholder {
    text-align: right !important;
}