/* ------------------------------------------------------------------
   arabic.css - bilingual (EN/AR) display layer.

   Arabic blocks are present in the DOM at all times and shown or hidden
   by a single class on <html>, so the toggle costs no re-render and the
   choice applies identically on screen, in print and in the PDF.
   NOTE: no width media queries here on purpose - a bare max-width query
   also matches PRINT media and would hijack the printout.
   ------------------------------------------------------------------ */

.ar, .ar-inline { display: none; }

html.ar-on .ar {
	display: block;
	font-family: 'Noto Naskh Arabic', 'Geeza Pro', 'Arabic Typesetting', 'Segoe UI', Tahoma, sans-serif;
	direction: rtl;
	/* Sit under the English, not on the far edge. NOTE: `inherit` does not
	   work here - the inherited value is `start`, which with direction:rtl
	   resolves to RIGHT. The alignment must be stated explicitly. */
	text-align: left;
	font-size: 12px;
	line-height: 18px;
	color: #555;
}
html.ar-on .ar-inline {
	display: inline;
	font-family: 'Noto Naskh Arabic', 'Geeza Pro', 'Arabic Typesetting', 'Segoe UI', Tahoma, sans-serif;
	direction: rtl;
	unicode-bidi: embed;
}
html.ar-on th .ar        { color: #222; font-weight: bold; text-align: left; }

/* mirror the cell's own alignment */
html.ar-on .text-right .ar,
html.ar-on td.text-right .ar,
html.ar-on th.text-right .ar   { text-align: right; }
html.ar-on .text-center .ar,
html.ar-on td.text-center .ar,
html.ar-on th.text-center .ar  { text-align: center; }
html.ar-on .text-center .ar,
html.ar-on .ar.text-center { text-align: center; }
html.ar-on .inv-print-title .ar { font-size: 18px; text-align: center; color: #333; }

/* the toggle button itself must never appear on paper */
@media print { .ar-toggle { display: none !important; } }