/*
 * Pitchy — right-to-left (Arabic, Urdu, Persian, Hebrew…). Loaded only on RTL pages (header.twig);
 * <html dir="rtl"> already mirrors text, flex rows and grids. This file moves what the theme pins to the
 * left: the dashboard sidebar (desktop) and the space the content keeps free for it.
 */
@media (min-width: 992px) {
  [dir="rtl"] ul.nav.navbar-nav.nav-bar-leftside {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid rgba(230, 230, 230, .4);
  }
  /* collapsed sidebar slides out to the right */
  [dir="rtl"] .nav-bar-leftside.active {
    left: auto !important;
    right: -225px !important;
  }
  [dir="rtl"] .container-fluid.container-fluid-spacious,
  [dir="rtl"] .container.container-fluid-spacious {
    padding-left: 40px;
    padding-right: 150px;
  }
  [dir="rtl"] #index .container-fluid.container-fluid-spacious.active,
  [dir="rtl"] #index .container.container-fluid-spacious.active {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Input groups (search boxes on Orders, Subscriptions…): the theme rounds the field on the left and the
   button on the right; right-to-left the button sits on the left, so the corners swap too. */
[dir="rtl"] .input-group .form-control:first-child {
  border-radius: 0 10px 10px 0;
}
[dir="rtl"] .input-group .form-control:last-child {
  border-radius: 10px 0 0 10px;
}
[dir="rtl"] .input-group-btn:last-child > .btn {
  border-radius: 4px 0 0 4px;
  margin-left: 0;
  margin-right: -1px;
}
[dir="rtl"] .input-group-btn:first-child > .btn {
  border-radius: 0 4px 4px 0;
  margin-right: 0;
  margin-left: -1px;
}

/* Columns side by side (New Order: the order form and the Description / Announcements panel; any
   .row): Bootstrap 3 places them with float:left, which <html dir="rtl"> doesn't flip — the first
   column goes on the right. Each size floats only from its own breakpoint, like Bootstrap (floating a
   column below it shrinks it to its content and pushes the page wider than the screen). */
[dir="rtl"] [class*="col-xs-"] { float: right; }
@media (min-width: 768px)  { [dir="rtl"] [class*="col-sm-"] { float: right; } }
@media (min-width: 992px)  { [dir="rtl"] [class*="col-md-"] { float: right; } }
@media (min-width: 1200px) { [dir="rtl"] [class*="col-lg-"] { float: right; } }

/* Lists: browsers give lists 40px on their starting side; Bootstrap removes it on the left only, so in
   right-to-left it came back on the right (the big gaps between the header buttons). */
[dir="rtl"] .nav,
[dir="rtl"] .navbar-nav,
[dir="rtl"] .list-unstyled,
[dir="rtl"] .list-inline,
[dir="rtl"] .pagination,
[dir="rtl"] .dropdown-menu {
  padding-right: 0;
}
@media (min-width: 768px) {
  /* header: the account group sits against the left edge, the logo against the right one */
  [dir="rtl"] .navbar-right,
  [dir="rtl"] .nav-bar-account {
    margin-right: 0;
    margin-left: -15px;
  }
}
/* the logo link has an inline margin-left:10px (its space from the screen edge): on the right in RTL */
@media (min-width: 993px) {
  [dir="rtl"] .navbar-header > a[href="/"] {
    margin-left: 0 !important;
    margin-right: 10px !important;
  }
}
/* Phones and tablets (premium.css "phone bar"): the logo against the right edge, the balance chip and the
   menu button pushed to the left; in the opened menu the account / logout icons go to the far left. */
@media (max-width: 992px) {
  [dir="rtl"] .navbar.navbar-default .navbar-header > a {
    margin-right: 0 !important;
    margin-left: auto !important;
  }
  [dir="rtl"] .navbar-header .pt-mbar-balance {
    margin-right: 0;
    margin-left: 8px;
  }
  [dir="rtl"] .pt-mbar .pt-mbar-icon:first-of-type {
    margin-left: 0;
    margin-right: auto;
  }
}

/* New Order: the space between the order form and the Description / News panel is on the panel's side
   that faces the form — on its right in right-to-left. */
[dir="rtl"] .pt-news-col {
  padding-left: 0;
  padding-right: 25px;
}

/* Table headings (Orders, Subscriptions, Refill…): the theme aligns them left; right-to-left they start
   on the right, above their column's text. */
[dir="rtl"] .pt-table thead th,
[dir="rtl"] th {
  text-align: right;
}