/* style_ar.css */

/* Load Cairo */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

/* 1) Tell Bootstrap to use Cairo on Arabic pages */
:root:lang(ar) {
    --bs-body-font-family: 'Cairo', Tahoma, 'Segoe UI', Arial, sans-serif;
}

/* 2) Apply Cairo to common text elements (your original intent),
      but read from the Bootstrap variable so everything is consistent */
html[lang="ar"] body,
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"] p,
html[lang="ar"] a,
html[lang="ar"] li,
html[lang="ar"] table,
html[lang="ar"] th,
html[lang="ar"] td {
    font-family: var(--bs-body-font-family);
}

/* 3) Ensure Cairo is used for all form UI bits */
html[lang="ar"] label,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button,
html[lang="ar"] .form-control,
html[lang="ar"] .form-select,
html[lang="ar"] .input-group-text,
html[lang="ar"] .btn,
html[lang="ar"] .alert {
    font-family: var(--bs-body-font-family);
}

/* 4) Direction & alignment safety for Arabic */
html[lang="ar"] body {
    direction: rtl;
    text-align: right;
}

/* 5) Your existing RTL table helpers */
table.rtl-table {
    direction: rtl;
    text-align: right;
}

.rtl-table th,
.rtl-table td {
    text-align: right;
}