/*
 * RTL overrides — loaded only when the Arabic locale is active (see layouts/app.blade.php).
 * These are additive, targeted fixes for physical-direction rules (left/right/float) found in
 * the existing LTR CSS/inline styles that don't automatically flip with dir="rtl". Nothing here
 * touches the base LTR files, so the English site can never regress from this file.
 *
 * The [dir="rtl"] prefix on every rule is deliberate: it raises specificity so these overrides
 * win even against inline <style> blocks (e.g. the mobile sidebar's styles are defined inline in
 * partials/header.blade.php, which renders in <body> — after this stylesheet's <link> tag in
 * <head> — so an equal-specificity override placed here would lose the normal cascade order).
 *
 * This is a starting slice covering the header/footer pilot only. Expect to extend this file as
 * each further page is translated (see the Phase 1 rollout roadmap) and gets visually checked
 * in a real browser under Arabic — simulated HTTP requests can't verify actual RTL layout.
 */

/* Mobile nav drawer: slide in from the right in RTL instead of the left */
html[dir="rtl"] #mobileSidebar {
    left: auto;
    right: -320px;
}

html[dir="rtl"] #mobileSidebar.open {
    left: auto;
    right: 0;
}

/* Long-form footer/body copy: justified text reads more naturally right-to-left in Arabic
   with the default browser alignment rather than a forced LTR justify. */
html[dir="rtl"] .footer-text {
    text-align: right;
}

/* Header search bar: the rounded corners + search-icon button are hardcoded to the
   physical right/left (matching LTR's input-then-button layout) and don't flip with
   Bootstrap's RTL build since they're custom overrides, not Bootstrap's own classes. */
html[dir="rtl"] .input-group-text {
    border-radius: 0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

html[dir="rtl"] .input-group-text img {
    border-left: none;
    border-right: none;
}

html[dir="rtl"] .search-bar input {
    text-align: right;
}
