/* ==========================================================================
   ar.css  —  ARABIC design  (direction: RIGHT-TO-LEFT)
   --------------------------------------------------------------------------
   Include this file (in addition to css/styles.css) when the user's language
   is Arabic. In your backend:

       if (lang == "ar")  ->  <link rel="stylesheet" href="css/ar.css">
       else               ->  <link rel="stylesheet" href="css/en.css">

   This single `direction: rtl` declaration flips the ENTIRE layout, because
   styles.css is built with logical properties (inline-start / inline-end).
   No JavaScript is involved, so the direction can never get out of sync with
   the language on Back / refresh — it is decided purely by which file you
   include on the server.
   ========================================================================== */
html {
    direction: rtl;
}

body {
    direction: rtl;
    font-family: var(--font-ar);
    text-align: start;
}