/* ==========================================================================
   RTL corrections
   Everything in tokens/base/components/navigation/homepage is written with
   CSS logical properties and therefore already works in both directions.

   This file only handles what logical properties cannot express: physical
   transforms, glyph mirroring, and the handful of legacy selectors inherited
   from Oscar's Bootstrap styles that are hard-coded to a physical side.
   ========================================================================== */

[dir="rtl"] {
  text-align: right;
}

/* --- Glyph mirroring ----------------------------------------------------- */
/* Icon fonts bake direction into the glyph, so arrows must be flipped. */

[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-long-arrow-alt-right {
  transform: scaleX(-1);
  display: inline-block;
}

[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-long-arrow-alt-left {
  transform: scaleX(-1);
  display: inline-block;
}

/* Circular arrows (spin/refresh) look wrong mirrored. */
[dir="rtl"] .fa-redo,
[dir="rtl"] .fa-sync,
[dir="rtl"] .fa-repeat {
  transform: scaleX(-1);
  display: inline-block;
}

/* Undo the mirror on anything explicitly marked unidirectional. */
[dir="rtl"] .fa-redo.fa-flip-horizontal,
[dir="rtl"] .fa-sync.fa-flip-horizontal {
  transform: none;
}

/* --- Price / number alignment -------------------------------------------- */
/* Prices read left-to-right even in Persian text. */

[dir="rtl"] .price,
[dir="rtl"] .form-control,
[dir="rtl"] .basket-mini .total {
  direction: ltr;
  unicode-bidi: embed;
  text-align: start;
}

/* --- Oscar/Bootstrap legacy physical sides ------------------------------- */
/* These selectors come from the precompiled stylesheet rtlcss already flipped,
   but Oscar's own templates use a few hard-coded utilities that still need
   flipping by hand. */

[dir="rtl"] .dropdown-menu-right {
  right: auto;
  left: 0;
}

[dir="rtl"] .dropdown-menu-left {
  right: 0;
  left: auto;
}

[dir="rtl"] .float-right {
  float: left !important;
}

[dir="rtl"] .float-left {
  float: right !important;
}

[dir="rtl"] .text-right {
  text-align: left !important;
}

[dir="rtl"] .text-left {
  text-align: right !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;
}

/* Border radii on the physically-named utilities. */
[dir="rtl"] .rounded-left {
  border-top-right-radius: var(--radius) !important;
  border-bottom-right-radius: var(--radius) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

[dir="rtl"] .rounded-right {
  border-top-left-radius: var(--radius) !important;
  border-bottom-left-radius: var(--radius) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* --- Checkout step chevrons --------------------------------------------- */
/* The checkout nav flips chevrons per slide in the template; this keeps the
   inactive/visited states aligned too. */

[dir="rtl"] .nav-checkout .nav-item .fas.fa-chevron-left,
[dir="rtl"] .nav-checkout .nav-item .fas.fa-chevron-right {
  transform: none;
}

/* --- Dashboard (back office) --------------------------------------------- */
/* The dashboard uses a fixed sidebar; pin it to the correct edge. */

[dir="rtl"] .dashboard .navbar .navbar-toggler {
  margin-right: 1rem;
  margin-left: 0;
}

[dir="rtl"] .dashboard .breadcrumb {
  text-align: right;
}

/* Sort/filter controls that Oscar right-aligns with float utilities. */
[dir="rtl"] .dashboard .float-right,
[dir="rtl"] .dashboard .float-left {
  float: none;
}

[dir="rtl"] .dashboard .ml-2,
[dir="rtl"] .dashboard .mr-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .header.container,
  #top_page,
  .navbar.nav-primary,
  .hero,
  .site-footer,
  .hero-controls,
  .skip-link {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}