/* Loaded only when the visitor is in Arabic mode (dir="rtl" on <html> — see
   Views/Shared/_Layout.cshtml and Views/Shared/Error.cshtml). Most of the
   mirroring (nav order, footer columns, flex rows generally) happens for
   free once dir="rtl" is set, since flexbox/grid main-axis placement is
   direction-aware. This file only overrides the handful of rules in site.css
   that hardcode a physical left/right and would otherwise look wrong
   mirrored — the mobile nav drawer, the custom <select> arrow, and a few
   small text-align/margin tweaks. Keep this in sync with site.css: if a
   physical left/right/text-align:left is added there, check whether it
   needs a matching override here. */

/* nav underline: site.css animates it in from the physical left (::after
   starts at left:0, width:0 -> 100%) — flip so it grows from the reading
   start (right) in RTL instead of visually growing "backwards". */
nav.main-nav a::after{
  left:auto;right:0;
}

/* mobile nav drawer: site.css slides it in from the right (position:fixed;
   right:0; border-left; transform:translateX(100%)). In RTL the drawer
   should live on the left (screen space closer to where the hamburger site
   nav has swapped to, since dir=rtl also mirrors nav-inner's flex order). */
@media (max-width:1180px){
  nav.main-nav{
    right:auto;left:0;
    border-left:none;border-right:1px solid var(--line);
    transform:translateX(-100%);
  }
  nav.main-nav.open{transform:translateX(0);}
}

/* price "/ ticket" suffix: site.css adds margin-left to separate it from the
   price number — flip to margin-right so the gap stays on the correct side
   next to the number, not collapsed against it. */
.pricing-card .price small{
  margin-left:0;margin-right:6px;
}

/* custom <select> dropdown arrow (data-uri background image): site.css
   positions it "right 14px center" with padding-right to keep text clear of
   it — move both to the left in RTL. */
.form-field select{
  background-position:left 14px center;
  padding-right:16px;padding-left:40px;
}

/* validation summary bullet list: site.css indents with padding-left. */
.validation-summary-errors ul{
  padding-left:0;padding-right:18px;
}

/* FAQ question row: site.css hardcodes text-align:left (the question text
   sits before the +/- toggle) — flip so it hugs the reading start (right). */
.faq-question{
  text-align:right;
}

/* CTA band's decorative glow blob: site.css anchors it top-right — mirror to
   top-left so it doesn't clash with the now-mirrored heading/button layout. */
.cta-band::before{
  right:auto;left:-200px;
}

/* login metal-card border-image: site.css slices metal-panel-frame.png at
   its real (slightly asymmetric) pixel thickness — 32px left / 37px right.
   That's a physical left/right, not a reading-direction one, so mirror the
   left/right slice+width values in RTL or the thicker/darker side of the
   riveted frame would end up on the wrong edge of the card. */
.auth-card.metal-card{
  border-width:25px 32px 22px 37px;
  border-image-slice:25 32 22 37 fill;
  border-image-width:25px 32px 22px 37px;
}

/* About page: text printed on the seat cushions — taller line spacing for Arabic */
[dir="rtl"] .seat-visual .seat-caption p{line-height:2;}
[dir="rtl"] .seat-visual .seat-caption{left:35%;}