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

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

   This single `direction: ltr` 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: ltr;
}

body {
    direction: ltr;
    font-family: var(--font-en);
    text-align: start;
}