/* ================================================
   Arabic Font (Tajawal) - Reusable CSS File
   Usage: Include this file in any page that needs Arabic support
   ================================================ */

/* Import Google Font - Tajawal */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

/* Apply Tajawal font to Arabic pages */
html[lang="ar"] body,
html[dir="rtl"] body {
    font-family: 'Tajawal', sans-serif !important;
}

/* Apply to common containers */
html[lang="ar"] .container,
html[lang="ar"] .invoice-container-modal,
html[lang="ar"] .modal,
html[lang="ar"] .card,
html[dir="rtl"] .container,
html[dir="rtl"] .invoice-container-modal,
html[dir="rtl"] .modal,
html[dir="rtl"] .card {
    font-family: 'Tajawal', sans-serif;
}

/* Ensure headings use Tajawal in Arabic */
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[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: 'Tajawal', sans-serif;
    font-weight: 700;
}

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

/* Labels and spans */
html[lang="ar"] label,
html[lang="ar"] span,
html[lang="ar"] p,
html[lang="ar"] a,
html[dir="rtl"] label,
html[dir="rtl"] span,
html[dir="rtl"] p,
html[dir="rtl"] a {
    font-family: 'Tajawal', sans-serif;
}