/*
 * RTL overrides shared by the authenticated social app (frontend/index.blade.php)
 * and the guest-facing auth layout (auth/layout/header.blade.php) — both load
 * their CSS from this same assets/frontend/css/ tree.
 *
 * Loaded only when the active language's direction is "rtl". style.css and
 * own.css are untouched; the Bootstrap RTL build (bootstrap.rtl.min.css,
 * swapped in alongside this file) already handles grid order, dropdown
 * alignment, and Bootstrap's own utility classes. This file only covers
 * this app's own custom, non-Bootstrap directional CSS.
 */

[dir="rtl"] {
    direction: rtl;
}

/* ---- Directional icons only: back/forward affordances.
   Non-directional icons (user, settings, camera, payment, social,
   logos, brand) are intentionally not touched anywhere in this file. ---- */
[dir="rtl"] .bi-arrow-right,
[dir="rtl"] .bi-arrow-left {
    display: inline-block;
    transform: scaleX(-1);
}

/* ---- Website left navigation (Timeline/Memories/Badge/Profile/...):
   style.css gives the icon `margin-right: 8px` to create the gap before
   the label text. That's correct in LTR, where the icon is the first
   inline child and renders on the left with the label continuing to its
   right. In RTL the same DOM-first icon renders at the *right* edge of
   the link instead (RTL inline flow lays out the first logical child at
   the line's start, i.e. the right), with the label continuing to its
   left — so the gap needs to be on the icon's left side, not right, or
   the label butts directly against it. Swaps the margin to the correct
   side only; icon size, sidebar width/position, item height, and font
   are untouched. See resources/views/frontend/left_navigation.blade.php. ---- */
[dir="rtl"] .menu-wrap ul li img {
    margin-right: 0;
    margin-left: 8px;
}

/* ---- Contacts nav item uses a Font Awesome <i> icon instead of the
   <img> icons every other item in this menu uses (no matching SVG asset
   exists for "contacts"). Same 8px gap and ~19px box as the <img> icons
   (see timeline-2.svg etc.) so it sits flush with its siblings. ---- */
.menu-wrap ul li i.menu-icon-fa {
    display: inline-block;
    width: 19px;
    margin-right: 8px;
    font-size: 17px;
    text-align: center;
    vertical-align: -2px;
}

[dir="rtl"] .menu-wrap ul li i.menu-icon-fa {
    margin-right: 0;
    margin-left: 8px;
}

/* ---- Auth navbar: Login/Sign up gap. style.css gives the row's last
   child (".login-btns a:last-child") margin-left:10px to create the gap
   between the two buttons — correct in LTR, where "Sign up" (the last
   DOM child) renders on the right of "Login", so the margin sits between
   them. In RTL the flex row direction flips: "Sign up" is still the last
   DOM child, but now renders on the *left* end of the row, so that same
   margin-left pushes space away from the outer edge instead of toward
   "Login" — leaving the two buttons flush against each other. Swap the
   margin side only; button size/colors are untouched. See the
   ".login-btns" markup in resources/views/auth/layout/header.blade.php. ---- */
[dir="rtl"] .login-btns a:last-child {
    margin-left: 0;
    margin-right: 10px;
}

/* ---- Chat message reaction bubble: own.css pins this to the
   message's right edge (right: 22px) because the bubble is anchored
   inside .text-quote. Mirror it so the reaction control sits at the
   trailing edge of the message bubble in RTL too, matching the
   layout in resources/views/frontend/chat/single-message.blade.php. ---- */
[dir="rtl"] .chat-box .modal-inner .text-quote .quote-react,
[dir="rtl"] .message-box .modal-inner .text-quote .quote-react .post-react {
    right: auto;
    left: 22px;
}