/* =====================================================================
   rtl.css — right-to-left overrides (Hebrew)
   ---------------------------------------------------------------------
   Loaded after main.css, and only on pages whose locale is marked `rtl`
   in scripts/locales.js (build-locales.js inserts the <link>). main.css
   stays the one design system: this file only mirrors its physical
   left/right rules. When main.css gains a new left/right rule, mirror it
   here. Flexbox and grid already follow dir="rtl" on their own.
===================================================================== */

/* ---- text alignment: "left" in main.css means "start" ---- */
html[dir="rtl"] .sec-head.left,
html[dir="rtl"] .card.cat,
html[dir="rtl"] .val,
html[dir="rtl"] .catcard,
html[dir="rtl"] .cmp-table th,
html[dir="rtl"] .cmp-table td,
html[dir="rtl"] .cfg-opt,
html[dir="rtl"] .langsel-opt,
html[dir="rtl"] .mcard { text-align: right; }
html[dir="rtl"] .spec-row .v,
html[dir="rtl"] .sum-line .sl-v,
html[dir="rtl"] .cfg-card .cm-spec .v { text-align: left; }

/* ---- navigation ---- */
html[dir="rtl"] .nav-links { margin-left: 0; margin-right: 8px; }
html[dir="rtl"] .nav-right { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .has-drop > .caret { margin-left: 0; margin-right: -8px; padding-right: 0; padding-left: 10px; }
html[dir="rtl"] .nav-links > li > a.drop-toggle { padding-right: 12px; padding-left: 8px; }
html[dir="rtl"] .drop-menu { left: auto; right: 0; }
@media (min-width: 601px) {
  html[dir="rtl"] .langsel-menu { right: auto; left: 0; }
}
html[dir="rtl"] footer .langsel-menu { right: auto; left: 0; }
@media (min-width: 1200px) {
  html[dir="rtl"] .nav-links { margin-left: 0; margin-right: 4px; }
}
@media (max-width: 1023px) {
  html[dir="rtl"] .nav-links { margin-right: 0; }
}

/* ---- arrows: main.css flips .arw in RTL; keep the flip on hover ---- */
html[dir="rtl"] .btn-text:hover .arw,
html[dir="rtl"] .catcard:hover .ct-go .arw,
html[dir="rtl"] .dcard:hover .dc-cta .arw,
html[dir="rtl"] .mcard:hover .mc-go .arw { transform: scaleX(-1) translateX(4px); }

/* ---- column swaps: main.css swaps columns by setting direction on the
   container and forcing the children back to ltr. In Hebrew the children
   must stay rtl, so the swap is redone with the directions inverted. ---- */
html[dir="rtl"] .split.reverse,
html[dir="rtl"] .machine.is-flip { direction: ltr; }
html[dir="rtl"] .split.reverse > *,
html[dir="rtl"] .machine.is-flip > * { direction: rtl; }
@media (max-width: 900px) {
  html[dir="rtl"] .machine.is-flip { direction: rtl; }
}
@media (max-width: 860px) {
  html[dir="rtl"] .split.reverse { direction: rtl; }
  html[dir="rtl"] .banner.flip .banner-body { text-align: right; }
}

/* ---- banners: product art sits on the start side's opposite ---- */
html[dir="rtl"] .banner .banner-art { inset: 0 auto 0 0; }
html[dir="rtl"] .banner.flip .banner-art { inset: 0 0 0 auto; }
html[dir="rtl"] .banner.split.flip { direction: ltr; }
html[dir="rtl"] .banner.split.flip > * { direction: rtl; }

/* ---- configurator ---- */
html[dir="rtl"] .cfg-opt.on .tick::after { left: auto; right: 5px; }
html[dir="rtl"] .cfg-close { right: auto; left: 14px; }

/* ---- ROI calculator: currency symbol on the start side ---- */
html[dir="rtl"] .roi-in.cur input { padding-left: 14px; padding-right: 30px; }
html[dir="rtl"] .roi-in .sym { left: auto; right: 13px; }

/* ---- product sub-nav ---- */
@media (max-width: 900px) {
  html[dir="rtl"] .pnav-cta { margin-left: 0; margin-right: auto; }
}

/* ---- form spam trap: parked at left:-9999px inline, which in a
   right-to-left page widens the scroll area by 10,000px. Hide it
   without moving it. ---- */
html[dir="rtl"] form [aria-hidden="true"][style*="-9999px"] {
  left: 0 !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- numbers, model names and specs stay left-to-right inside Hebrew ---- */
html[dir="rtl"] .spec-row .v,
html[dir="rtl"] .cmp-table td { unicode-bidi: plaintext; }