/* ==========================================================================
   Velocity Talent — Global RTL overrides
   Loaded only when session('localeDir') === 'rtl'

   KEY INSIGHT: When direction:rtl is set, flex-direction:row ALREADY flows
   right-to-left. Do NOT use row-reverse — that flips it back to LTR!
   Only use row-reverse on elements that were row-reverse in LTR CSS.
   ========================================================================== */

/* ---------- Global direction — this alone flips all flex row layouts ---------- */
[dir="rtl"] .vt-home,
[dir="rtl"] .vt-companies,
[dir="rtl"] .vt-company,
[dir="rtl"] .vt-search,
[dir="rtl"] .vt-job,
[dir="rtl"] .vt-blog,
[dir="rtl"] .vt-talent,
[dir="rtl"] .vt-contact,
[dir="rtl"] .vt-cms {
  direction: rtl !important;
  text-align: right !important;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
[dir="rtl"] .vt-nav__inner   { direction: rtl !important; }
[dir="rtl"] .vt-nav__left    { direction: rtl !important; }
[dir="rtl"] .vt-nav__right   { direction: rtl !important; }
[dir="rtl"] .vt-nav__links   { direction: rtl !important; }
[dir="rtl"] .vt-nav__actions { direction: rtl !important; }
[dir="rtl"] .vt-avatar-dd    { left: 0 !important; right: auto !important; }
[dir="rtl"] .vt-avatar-dd a,
[dir="rtl"] .vt-avatar-dd form button { text-align: right !important; direction: rtl !important; }
[dir="rtl"] .vt-avatar-dd .material-symbols-outlined { margin-left: 8px !important; margin-right: 0 !important; }

/* ==========================================================================
   Section heads — title RIGHT, link LEFT (natural with direction:rtl)
   ========================================================================== */
[dir="rtl"] .vt-section-head {
  direction: rtl !important;
  text-align: right !important;
}
[dir="rtl"] .vt-section-head > div { text-align: right !important; }
[dir="rtl"] .vt-section-head--center {
  flex-direction: column !important;
  text-align: center !important;
}
[dir="rtl"] .vt-section-head--center > div { text-align: center !important; }

/* vt-link with arrow — flip arrow direction */
[dir="rtl"] .vt-link { direction: rtl !important; }
[dir="rtl"] .vt-link .material-symbols-outlined { transform: scaleX(-1) !important; }

/* ==========================================================================
   Hero
   ========================================================================== */
[dir="rtl"] .vt-hero__content { text-align: center !important; }
[dir="rtl"] .vt-hero__stats   { direction: rtl !important; }

/* ==========================================================================
   Search form
   ========================================================================== */
[dir="rtl"] .vt-search-form              { direction: rtl !important; }
[dir="rtl"] .vt-search-form__row         { direction: rtl !important; }
[dir="rtl"] .vt-search-form__field       { direction: rtl !important; text-align: right !important; }
[dir="rtl"] .vt-search-form__field input { text-align: right !important; }

/* ==========================================================================
   Filter drawer
   ========================================================================== */
[dir="rtl"] .vt-filter-drawer        { left: 0 !important; right: auto !important; }
[dir="rtl"] .vt-filter-drawer__head  { direction: rtl !important; }
[dir="rtl"] .vt-filter-drawer__group { text-align: right !important; }
[dir="rtl"] .vt-filter-drawer__label { text-align: right !important; }

/* ==========================================================================
   VT Dropdown (.vt-dd)
   ========================================================================== */
[dir="rtl"] .vt-dd               { text-align: right !important; direction: rtl !important; }
[dir="rtl"] .vt-dd__selected     { direction: rtl !important; }
[dir="rtl"] .vt-dd__search input { text-align: right !important; }
[dir="rtl"] .vt-dd__option       { text-align: right !important; }
[dir="rtl"] .vt-dd__panel        { text-align: right !important; }

/* ==========================================================================
   Industry grid + tiles — icon on RIGHT, text on LEFT
   ========================================================================== */
[dir="rtl"] .vt-industry-grid {
  direction: rtl !important;
}
[dir="rtl"] .vt-industry-tile {
  direction: rtl !important;
  text-align: right !important;
}

/* ==========================================================================
   Featured / Latest job rows — logo RIGHT, text LEFT, badge+btn LEFT
   ========================================================================== */
[dir="rtl"] .vt-job-list { direction: rtl !important; }
[dir="rtl"] .vt-job-row  { direction: rtl !important; text-align: right !important; }
[dir="rtl"] .vt-job-row__main  { direction: rtl !important; text-align: right !important; }
[dir="rtl"] .vt-job-row__body  { text-align: right !important; }
[dir="rtl"] .vt-job-row__title { text-align: right !important; }
[dir="rtl"] .vt-job-row__meta  { direction: rtl !important; }
[dir="rtl"] .vt-job-row__meta span { direction: rtl !important; }
[dir="rtl"] .vt-job-row__salary    { direction: rtl !important; }
[dir="rtl"] .vt-job-row__tags      { direction: rtl !important; }
[dir="rtl"] .vt-job-row__aside     { direction: rtl !important; }

/* ==========================================================================
   How it works / Steps
   ========================================================================== */
[dir="rtl"] .vt-steps { direction: rtl !important; }
[dir="rtl"] .vt-step  { text-align: center !important; }

/* ==========================================================================
   Category cards
   ========================================================================== */
[dir="rtl"] .vt-category-grid       { direction: rtl !important; }
[dir="rtl"] .vt-category-card       { text-align: right !important; direction: rtl !important; }
[dir="rtl"] .vt-category-card__head { direction: rtl !important; }

/* ==========================================================================
   Company cards / grid
   ========================================================================== */
[dir="rtl"] .vt-company-grid       { direction: rtl !important; }
[dir="rtl"] .vt-company-card       { text-align: center !important; direction: rtl !important; }
[dir="rtl"] .vt-company-card__meta { direction: rtl !important; }

/* ==========================================================================
   Companies listing
   ========================================================================== */
[dir="rtl"] .vt-companies .vt-company-card__head  { direction: rtl !important; }
[dir="rtl"] .vt-companies .vt-company-card__stats  { direction: rtl !important; }
[dir="rtl"] .vt-companies .vt-search__head          { direction: rtl !important; }
[dir="rtl"] .vt-companies .vt-search__sort           { direction: rtl !important; }

/* ==========================================================================
   Company detail
   ========================================================================== */
[dir="rtl"] .vt-company .vt-company-hero__inner   { direction: rtl !important; }
[dir="rtl"] .vt-company .vt-company-hero__info    { text-align: right !important; }
[dir="rtl"] .vt-company .vt-company-hero__meta    { direction: rtl !important; }
[dir="rtl"] .vt-company .vt-company-hero__actions { direction: rtl !important; }
[dir="rtl"] .vt-company .vt-company-about         { text-align: right !important; }
[dir="rtl"] .vt-company .vt-company-about ul      { padding-left: 0 !important; padding-right: 1.2em !important; }
[dir="rtl"] .vt-company .vt-company-stats         { direction: rtl !important; }
@media (min-width: 992px) {
  [dir="rtl"] .vt-company .vt-company__layout     { direction: rtl !important; }
}

/* ==========================================================================
   Search results
   ========================================================================== */
[dir="rtl"] .vt-search .vt-search__head    { direction: rtl !important; }
[dir="rtl"] .vt-search .vt-search__sort    { direction: rtl !important; }
[dir="rtl"] .vt-search .vt-search__count   { text-align: right !important; }
[dir="rtl"] .vt-search .vt-search__sidebar { text-align: right !important; }
@media (min-width: 992px) {
  [dir="rtl"] .vt-search .vt-search__layout { direction: rtl !important; }
}

/* ==========================================================================
   Job detail
   ========================================================================== */
[dir="rtl"] .vt-job .vt-job__head      { direction: rtl !important; }
[dir="rtl"] .vt-job .vt-job__head-info { text-align: right !important; }
[dir="rtl"] .vt-job .vt-job__meta      { direction: rtl !important; }
[dir="rtl"] .vt-job .vt-job__meta-item { direction: rtl !important; }
[dir="rtl"] .vt-job .vt-job__actions   { direction: rtl !important; }
[dir="rtl"] .vt-job .vt-job__sidebar   { text-align: right !important; }
[dir="rtl"] .vt-job .vt-job__share-row { direction: rtl !important; }
[dir="rtl"] .vt-job .vt-job__desc      { text-align: right !important; }
[dir="rtl"] .vt-job .vt-job__desc ul   { padding-left: 0 !important; padding-right: 1.2em !important; }
[dir="rtl"] .vt-job .vt-job__desc ol   { padding-left: 0 !important; padding-right: 1.2em !important; }
@media (min-width: 992px) {
  [dir="rtl"] .vt-job .vt-job__layout  { direction: rtl !important; }
}

/* ==========================================================================
   Blog
   ========================================================================== */
[dir="rtl"] .vt-blog .vt-blog-card       { text-align: right !important; direction: rtl !important; }
[dir="rtl"] .vt-blog .vt-blog-card__meta { direction: rtl !important; }
[dir="rtl"] .vt-blog .vt-blog-detail     { text-align: right !important; }
[dir="rtl"] .vt-blog .vt-blog-sidebar    { text-align: right !important; }
@media (min-width: 992px) {
  [dir="rtl"] .vt-blog .vt-blog__layout  { direction: rtl !important; }
}

/* ==========================================================================
   Talent search
   ========================================================================== */
[dir="rtl"] .vt-talent                    { direction: rtl !important; text-align: right !important; }
[dir="rtl"] .vt-talent__hero-search       { direction: rtl !important; }
[dir="rtl"] .vt-talent-card               { text-align: right !important; direction: rtl !important; }
[dir="rtl"] .vt-talent-card__head         { direction: rtl !important; }
[dir="rtl"] .vt-talent-card__meta         { direction: rtl !important; }
[dir="rtl"] .vt-talent-card__skills       { direction: rtl !important; }

/* ==========================================================================
   Contact / CMS
   ========================================================================== */
[dir="rtl"] .vt-contact__form label    { text-align: right !important; }
[dir="rtl"] .vt-contact__form input,
[dir="rtl"] .vt-contact__form textarea { text-align: right !important; }
[dir="rtl"] .vt-contact__info-row      { direction: rtl !important; }
[dir="rtl"] .vt-cms ul { padding-left: 0 !important; padding-right: 1.2em !important; }
[dir="rtl"] .vt-cms ol { padding-left: 0 !important; padding-right: 1.2em !important; }

/* ==========================================================================
   CTA sections
   ========================================================================== */
[dir="rtl"] .vt-cta       { direction: rtl !important; }
[dir="rtl"] .vt-cta__body { text-align: right !important; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
[dir="rtl"] .vt-testimonial         { text-align: right !important; direction: rtl !important; }
[dir="rtl"] .vt-testimonial__author { direction: rtl !important; }

/* ==========================================================================
   Grids
   ========================================================================== */
[dir="rtl"] .vt-latest-grid { direction: rtl !important; }
[dir="rtl"] .vt-cities       { direction: rtl !important; }
[dir="rtl"] .vt-stories      { direction: rtl !important; }

/* ==========================================================================
   Cart drawer — slides from LEFT in RTL
   ========================================================================== */
[dir="rtl"] .vt-cart-drawer {
  right: auto !important;
  left: 0 !important;
  transform: translateX(-100%) !important;
}
[dir="rtl"] .vt-cart-drawer.is-open {
  transform: translateX(0) !important;
}
[dir="rtl"] .vt-cart-drawer__head      { direction: rtl !important; }
[dir="rtl"] .vt-cart-drawer__item      { direction: rtl !important; text-align: right !important; }
[dir="rtl"] .vt-cart-drawer__item-info { text-align: right !important; }
[dir="rtl"] .vt-cart-drawer__footer    { text-align: right !important; }
[dir="rtl"] .vt-cart-drawer__total     { direction: rtl !important; }

/* ==========================================================================
   Auth modal
   ========================================================================== */
[dir="rtl"] .vt-auth-modal       { direction: rtl !important; text-align: right !important; }
[dir="rtl"] .vt-auth-modal__tabs { direction: rtl !important; }
[dir="rtl"] .vt-auth-modal input { text-align: right !important; }
[dir="rtl"] .vt-auth-modal .vt-auth__input-icon  { left: auto !important; right: 14px !important; }
[dir="rtl"] .vt-auth-modal .vt-auth__input-toggle { right: auto !important; left: 12px !important; }
[dir="rtl"] .vt-auth-modal .vt-auth__input        { padding-left: 16px !important; padding-right: 44px !important; }

/* ==========================================================================
   Pagination
   ========================================================================== */
[dir="rtl"] .pagination { direction: rtl !important; }

/* ==========================================================================
   Buttons — direction:rtl makes icon+text flow naturally
   ========================================================================== */
[dir="rtl"] .vt-btn { direction: rtl !important; }

/* ==========================================================================
   Pills / chips / tags
   ========================================================================== */
[dir="rtl"] .vt-pill { direction: rtl !important; }
[dir="rtl"] .vt-chip { direction: rtl !important; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
[dir="rtl"] .vt-breadcrumb      { direction: rtl !important; }
[dir="rtl"] .vt-breadcrumb__sep { transform: scaleX(-1) !important; }

/* ==========================================================================
   Share row
   ========================================================================== */
[dir="rtl"] .vt-share { direction: rtl !important; }

/* ==========================================================================
   Footer
   ========================================================================== */
[dir="rtl"] .vt-footer         { direction: rtl !important; text-align: right !important; }
[dir="rtl"] .vt-footer__grid   { direction: rtl !important; }
[dir="rtl"] .vt-footer__col    { text-align: right !important; }
[dir="rtl"] .vt-footer__col ul { padding: 0 !important; text-align: right !important; }
[dir="rtl"] .vt-footer__bottom { direction: rtl !important; }
[dir="rtl"] .vt-footer__social { direction: rtl !important; }

/* ==========================================================================
   Mobile bottom nav
   ========================================================================== */
[dir="rtl"] .vt-bottom-nav { direction: rtl !important; }

/* ==========================================================================
   Tables
   ========================================================================== */
[dir="rtl"] th { text-align: right !important; }
[dir="rtl"] td { text-align: right !important; }

/* ==========================================================================
   Form fields
   ========================================================================== */
[dir="rtl"] .vt-home input[type="text"],
[dir="rtl"] .vt-home input[type="email"],
[dir="rtl"] .vt-home input[type="search"],
[dir="rtl"] .vt-home textarea,
[dir="rtl"] .vt-search input[type="text"],
[dir="rtl"] .vt-contact input[type="text"],
[dir="rtl"] .vt-contact textarea {
  text-align: right !important;
}

/* ==========================================================================
   Bootstrap utility overrides
   ========================================================================== */
[dir="rtl"] .text-left   { text-align: right !important; }
[dir="rtl"] .text-right  { text-align: left !important; }
[dir="rtl"] .float-left  { float: right !important; }
[dir="rtl"] .float-right { float: left !important; }
[dir="rtl"] .ml-auto     { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .mr-auto     { margin-right: 0 !important; margin-left: auto !important; }

/* ==========================================================================
   Arrow icons — mirror for RTL

   The instinct of an Arabic speaker reading right-to-left is that a "next"
   arrow points LEFT (the reading direction of progression), and a "back"
   arrow points RIGHT. So every directional icon needs to be mirrored.

   Two-layered approach:

   1. FontAwesome — we can target the class name directly, so all the common
      arrow / chevron / angle / caret / hand-point / play / forward / backward
      variants get flipped automatically.

   2. Material Symbols — the glyph is rendered from the element's TEXT
      content (e.g. `<span class="material-symbols-outlined">arrow_forward</span>`),
      and CSS cannot select by text. We provide:
        a) An opt-in helper class `.vt-rtl-flip` for the markup.
        b) A `data-icon` attribute hook so we can target the common ones
           when the markup uses `data-icon="arrow_forward"` etc.
        c) Targeted selectors for legacy `.material-symbols-outlined[style*="…"]`
           used by inline-style icon overrides.

   Opt-out: any ancestor with `data-no-rtl-flip` keeps its original orientation,
   useful for logos, brand marks, or icons whose direction is locale-agnostic
   (e.g. ASC/DESC sort indicators that should always point the same way).
   ========================================================================== */

/* --- FontAwesome arrows / chevrons / angles / carets / play / fwd-bwd --- */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-long-arrow-right,
[dir="rtl"] .fa-long-arrow-left,
[dir="rtl"] .fa-long-arrow-alt-right,
[dir="rtl"] .fa-long-arrow-alt-left,
[dir="rtl"] .fa-arrow-circle-right,
[dir="rtl"] .fa-arrow-circle-left,
[dir="rtl"] .fa-arrow-alt-circle-right,
[dir="rtl"] .fa-arrow-alt-circle-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-chevron-circle-right,
[dir="rtl"] .fa-chevron-circle-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-angle-double-right,
[dir="rtl"] .fa-angle-double-left,
[dir="rtl"] .fa-caret-right,
[dir="rtl"] .fa-caret-left,
[dir="rtl"] .fa-caret-square-right,
[dir="rtl"] .fa-caret-square-left,
[dir="rtl"] .fa-hand-point-right,
[dir="rtl"] .fa-hand-point-left,
[dir="rtl"] .fa-step-forward,
[dir="rtl"] .fa-step-backward,
[dir="rtl"] .fa-play {
  display: inline-block;
  transform: scaleX(-1);
}

/* --- Material Symbols — explicit opt-in via `.vt-rtl-flip` --- */
[dir="rtl"] .vt-rtl-flip,
[dir="rtl"] .vt-rtl-flip > .material-symbols-outlined,
[dir="rtl"] .material-symbols-outlined.vt-rtl-flip,
[dir="rtl"] [data-icon="arrow_forward"],
[dir="rtl"] [data-icon="arrow_back"],
[dir="rtl"] [data-icon="arrow_forward_ios"],
[dir="rtl"] [data-icon="arrow_back_ios"],
[dir="rtl"] [data-icon="chevron_right"],
[dir="rtl"] [data-icon="chevron_left"],
[dir="rtl"] [data-icon="keyboard_arrow_right"],
[dir="rtl"] [data-icon="keyboard_arrow_left"],
[dir="rtl"] [data-icon="navigate_next"],
[dir="rtl"] [data-icon="navigate_before"],
[dir="rtl"] [data-icon="east"],
[dir="rtl"] [data-icon="west"] {
  display: inline-block;
  transform: scaleX(-1);
}

/* --- Inline-style icon overrides (legacy markup that sets the glyph in
       a `style` attribute via CSS content / mask). Keep the original
       `arrow_forward` targeting and add `arrow_back` for symmetry. --- */
[dir="rtl"] .material-symbols-outlined[style*="arrow_forward"],
[dir="rtl"] .material-symbols-outlined[style*="arrow_back"],
[dir="rtl"] .material-symbols-outlined[style*="chevron_right"],
[dir="rtl"] .material-symbols-outlined[style*="chevron_left"],
[dir="rtl"] .vt-link .material-symbols-outlined {
  transform: scaleX(-1) !important;
}

/* --- Opt-out: any descendant of `[data-no-rtl-flip]` keeps its original
       orientation even in RTL (logos, brand marks, sort arrows, etc.). --- */
[dir="rtl"] [data-no-rtl-flip] .fa-arrow-right,
[dir="rtl"] [data-no-rtl-flip] .fa-arrow-left,
[dir="rtl"] [data-no-rtl-flip] .fa-chevron-right,
[dir="rtl"] [data-no-rtl-flip] .fa-chevron-left,
[dir="rtl"] [data-no-rtl-flip] .fa-angle-right,
[dir="rtl"] [data-no-rtl-flip] .fa-angle-left,
[dir="rtl"] [data-no-rtl-flip] .fa-caret-right,
[dir="rtl"] [data-no-rtl-flip] .fa-caret-left,
[dir="rtl"] [data-no-rtl-flip] .fa-play,
[dir="rtl"] [data-no-rtl-flip] .vt-rtl-flip,
[dir="rtl"] [data-no-rtl-flip] .material-symbols-outlined {
  transform: none !important;
}