/* ==========================================================================
   PRINTON — rtl.css
   Most layout already uses logical properties (inset-inline, margin-inline,
   padding-inline) and a --dir multiplier for every horizontal motion, so a
   slide that enters from the left in LTR enters from the right in RTL.
   This file handles what logical properties cannot: transform origins,
   directional icons, gradients and a few physical positions.
   ========================================================================== */

[dir="rtl"] {
  --dir: -1;
  --origin-start: right;
  --origin-end: left;
}
[dir="rtl"] body { text-align: right; }

/* Directional icons (arrows, chevrons) point the other way */
[dir="rtl"] .flip-rtl,
[dir="rtl"] .ic-move,
[dir="rtl"] .crumbs svg,
[dir="rtl"] .cat-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .ic-move { transform: scaleX(-1) translateX(4px); }

/* Nav underline anchors */
[dir="rtl"] .nav-link::after { transform-origin: left; }
[dir="rtl"] .nav-link:hover::after, [dir="rtl"] .nav-link.is-active::after { transform-origin: right; }
[dir="rtl"] .link-u { background-position: 100% 100%; }
[dir="rtl"] .p-name a { background-position: 100% 100%; }

/* Select chevron */
[dir="rtl"] .select { background-position: left 14px center; }

/* Table row accent sits on the reading-start edge */
[dir="rtl"] .d-table tbody tr:hover td:first-child { box-shadow: inset -3px 0 0 var(--magenta); }

/* Gradients that imply direction of progress */
[dir="rtl"] .steps-line i { background: linear-gradient(270deg, var(--cyan), var(--magenta), var(--yellow)); }
[dir="rtl"] .ftl-track i { background: linear-gradient(270deg, var(--cyan), var(--magenta)); }
[dir="rtl"] .free-ship .bar i, [dir="rtl"] .upload-bar i { background: linear-gradient(270deg, var(--cyan), var(--magenta)); }

/* Toast progress bar drains toward reading-start */
[dir="rtl"] .toast .toast-bar { transform-origin: right; }

/* Flow connectors & timelines */
[dir="rtl"] .flow-node::after { background: repeating-linear-gradient(270deg, var(--ink-soft) 0 6px, transparent 6px 12px); }

/* Marquee travels with the reading direction */
[dir="rtl"] .marquee { transform: rotate(1.5deg); }
[dir="rtl"] .marquee.alt { transform: rotate(-1.2deg); }

/* Hero tilt and floating items mirror */
[dir="rtl"] .hero-stage { transform: scaleX(1); }
[dir="rtl"] .hero-blob { border-radius: 58% 42% 45% 55% / 48% 42% 58% 52%; }

/* Cards that rotate on hover lean the other way */
[dir="rtl"] .step-h:hover .step-num { transform: rotate(8deg) scale(1.05); }
[dir="rtl"] .benefit:hover .benefit-ic { transform: rotate(10deg) scale(1.08); }
[dir="rtl"] .cat-card:hover img { transform: scale(1.08) rotate(1.5deg); }

/* Checkbox tick stays visually correct */
[dir="rtl"] .check input::after { margin-top: -3px; }

/* Gallery clip reveal enters from the reading-end */
[dir="rtl"] .gallery-main img.swap-in { animation-name: galleryInRtl; }
@keyframes galleryInRtl { from { clip-path: inset(0 100% 0 0); transform: scale(1.08); } to { clip-path: inset(0); transform: scale(1); } }

/* Charts: numbers stay LTR, layout order reversed in JS */
[dir="rtl"] .chart-svg text { direction: ltr; unicode-bidi: plaintext; }
[dir="rtl"] .num, [dir="rtl"] .stat-val, [dir="rtl"] .p-price { direction: ltr; unicode-bidi: isolate; }

/* Phone numbers, emails and codes remain LTR inside RTL text */
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] .ltr { direction: ltr; text-align: right; }

/* Mobile filter drawer enters from the reading-start edge (logical inset handles position) */
[dir="rtl"] .filter-panel { text-align: right; }

/* Card preview gradient */
[dir="rtl"] .card-preview { background: linear-gradient(225deg, #1B1C33, #3A2A6B 60%, var(--magenta)); }

/* Promo halftone mask */
[dir="rtl"] .promo .halftone { mask-image: linear-gradient(240deg, transparent 30%, #000); -webkit-mask-image: linear-gradient(240deg, transparent 30%, #000); }