/* ============================================================
   RIVISTA — hand-written right-to-left additions.
   Loaded only when is_rtl(), after the generated *-rtl.css
   mirrors (see scripts/build-rtl.js). Keep this file small:
   anything rtlcss can mirror belongs in the LTR sources.
   ============================================================ */

/* Wordmark and preloader letters read the same in every language. */
.brand,
.brand-logo,
.preloader,
.pl-word {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Directional arrows point the way the text flows. */
.arr,
.arr-host .arr,
.view-all svg,
.rs-link svg,
.btn-solid svg,
.btn-outline svg,
.lp-btn svg,
.so-ic,
.pagination .prev svg,
.pagination .next svg,
.cf-sticky-btn svg {
  transform: scaleX(-1);
}

.arr-host:hover .arr,
.arr-host:focus-visible .arr {
  transform: translateX(-6px) scaleX(-1);
}

/* Numeric inputs, counters and codes stay left-to-right. */
.lp-stat .v,
input[type="number"],
input[type="tel"],
code,
pre,
kbd,
.sku,
.woocommerce-Price-amount {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Slider "01 / 04" counters keep current-before-total order. */
.cu-num,
.gl-index,
.rv-num,
.sh-count,
.tl-count,
.at-num,
.kn-num {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Slider prev/next chevrons point along the reading direction. The buttons
   themselves are already swapped by the mirrored layout. */
[id^="prev"] svg,
[id^="next"] svg,
[id$="Prev"] svg,
[id$="Next"] svg,
[data-dir="prev"] svg,
[data-dir="next"] svg {
  transform: scaleX(-1);
}

/* Mixed number + label groups in English demo copy read as one unit. */
.st-hint,
.cmp-bar > span {
  unicode-bidi: plaintext;
}

/* Reveal demo: the caption box is centred; its text hugs the empty (left)
   side of the photograph, so keep it left-aligned instead of over the model. */
.rv-inner,
.rv-inner * {
  text-align: left;
}

.rv-slide .veil {
  background: linear-gradient(90deg, rgba(20, 19, 15, .6), rgba(20, 19, 15, .15) 55%, transparent);
}

/* Diagonal demo: rtlcss does not mirror clip-path polygons, so the two panes
   are re-cut here (x → 100% - x) to match the mirrored labels. */
.dg-pane.one {
  clip-path: polygon(100% 0, 38% 0, 62% 100%, 100% 100%);
}

.dg-pane.two {
  clip-path: polygon(38% 0, 0 0, 0 100%, 62% 100%);
}

@media (max-width: 760px) {
  .dg-pane.one,
  .dg-pane.two {
    clip-path: none;
  }
}