/*
 * Vochti — right to left.
 *
 * Loaded only when the site is running in Arabic (or any RTL locale). It
 * mirrors direction and flips the few things that carry meaning by side: the
 * marker that leaves an object to find its label, the walk rail, the wizard,
 * and the slider that compares a room with its proposal.
 *
 * The trace itself is not mirrored. It is a drawn line, not a sentence.
 */

.vo{ direction: rtl; }

/* Type. Arabic sets tighter than Latin at the same size, so the display sizes
   come up and the tracking that suits Fraunces comes off. */
.vo .dsp,
.vo .serif,
.vo h1, .vo h2, .vo h3, .vo h4,
.vo .word,
.vo .obj-panel h3,
.vo .sec-head h2,
.vo .rail-head h3,
.vo .opt b,
.vo .style-card b,
.vo .drop h3,
.vo .bstep b,
.vo .card h4,
.vo .cat h4,
.vo .jcard h4,
.vo .modal-box h3,
.vo .lead h3,
.vo .field input,
.vo .num,
.vo .pdp-price,
.vo .opt-price,
.vo .rail-item .pr,
.vo .rail-total b,
.vo .obj-spec dd,
.vo .pull{
  font-family: 'Amiri', 'Fraunces', Georgia, serif;
  letter-spacing: 0;
}

.vo,
.vo .lbl,
.vo .mono,
.vo .nav,
.vo .chip,
.vo .btn,
.vo .link,
.vo .step p,
.vo .entry,
.vo .foot,
.vo .wiz-rail button{
  font-family: 'IBM Plex Sans Arabic', 'Archivo', system-ui, sans-serif;
}

/* Uppercase and wide tracking do nothing to Arabic — it has no case, and
   letters must stay joined. */
.vo .lbl,
.vo .mono,
.vo .nav ul li a,
.vo .util button,
.vo .chip,
.vo .btn,
.vo .link,
.vo .card .m,
.vo .card-no,
.vo .obj-meta,
.vo .obj-spec dt,
.vo .pdp-block h4,
.vo .pdp-stock,
.vo .tracelist b,
.vo .rail-item small,
.vo .opt span,
.vo .check,
.vo .fitbar,
.vo .stage-toggle button,
.vo .wiz-rail button,
.vo .field label,
.vo .foot h5,
.vo .finale .sub,
.vo .finale .tag,
.vo .lead-pack span,
.vo .swap .lbl,
.vo .drop p{
  text-transform: none;
  letter-spacing: 0.02em;
}

.vo .brand-w{ letter-spacing: 0.06em; }
.vo .finale .word{ letter-spacing: 0.08em; padding-left: 0; padding-right: 0.08em; }

/* The walk rail, and the markers that leave an object. */
.vo .walk-rail{ inset-inline-start: 22px; left: auto; right: 22px; }
.vo .walk-rail-right{ right: auto; left: 22px; }

.vo .spot-card{ right: auto; left: calc(100% + 54px); text-align: left; }
.vo .spot-wire{ right: auto; left: calc(100% + 14px); transform-origin: left center; }
.vo .spot.spot-right .spot-card{ left: auto; right: calc(100% + 54px); text-align: right; }
.vo .spot.spot-right .spot-wire{ left: auto; right: calc(100% + 14px); transform-origin: right center; }

/* Rooms: the scrim is a gradient with a direction, so it turns with the type. */
.vo .room::after{
  background: linear-gradient(264deg, rgba(20,17,13,.86) 0%, rgba(20,17,13,.62) 34%, rgba(20,17,13,.12) 68%, rgba(20,17,13,.35) 100%);
}
.vo .trace::after{
  background: linear-gradient(266deg, rgba(16,13,10,.9) 0%, rgba(16,13,10,.58) 38%, rgba(16,13,10,.2) 72%, rgba(16,13,10,.5) 100%);
}

/* Arrows point the way the reader is going. */
.vo .link i{ transform: scaleX(-1); }
.vo .btn span[aria-hidden]{ display: inline-block; transform: scaleX(-1); }
.vo .wiz-back{ direction: rtl; }

/* The wizard and the result. */
.vo .wiz-rail button{ margin-right: 0; margin-left: 34px; }
.vo .obj{ direction: rtl; }
.vo .obj-photo{ order: 2; }
.vo .obj-panel{ order: 1; }
.vo .stage-toggle{ left: auto; right: 16px; }
.vo .rail-item{ text-align: right; }
.vo .drawer{ right: auto; left: 0; border-left: 0; border-right: 1px solid var(--rule); transform: translateX(-100%); }
.vo .drawer.open{ transform: none; }
.vo .sheet .x{ right: auto; left: 32px; }
.vo .menu-close{ right: auto; left: 32px; }

/* Before and after: "your space" is on the right in Arabic, because that is
   where the reader starts. The JS reads this and mirrors the clip. */
.vo .beforeafter{ direction: ltr; }
.vo .ba-tag{ direction: rtl; }

/* The floor plan is a drawing, not a text, so it keeps its orientation. */
.vo .plan, .vo .dimsvg{ direction: ltr; }

/* Numbers and measurements stay in Latin order inside Arabic sentences. */
.vo .field input,
.vo .obj-spec dd,
.vo .rail-item .pr,
.vo .rail-total b,
.vo .pdp-price,
.vo .card .p{
  direction: ltr;
  text-align: right;
  unicode-bidi: embed;
}

.vo .foot-end{ direction: rtl; }
.vo .news button{ border-left: 0; }

@media (max-width:760px){
  .vo .drawer{ width: 100%; }
}

/* the switch keeps its order; the codes are Latin either way */
.vo .vo-lang{ direction:ltr; }