/* ==========================================================================
   SilverNest - RTL support
   Activated by dir="rtl" on <html>. Layout already uses CSS logical
   properties (inset-inline, margin-inline, padding-inline, text-align: start),
   so this file only handles what logical properties cannot:
   direction-aware motion, transform origins, mirrored icons and backgrounds.
   ========================================================================== */

html[dir="rtl"] {
  --dir: -1; /* every translateX() in style.css is multiplied by this */
}

/* Icons that point in a direction are mirrored (uses the individual "scale"
   property so hover transforms keep working) */
html[dir="rtl"] .icon.arrow,
html[dir="rtl"] .icon.flip,
html[dir="rtl"] .breadcrumb .sep .icon { scale: -1 1; }

/* Sweeps, underlines and progress fills grow from the right */
html[dir="rtl"] .nav-link::after,
html[dir="rtl"] .btn-primary::before,
html[dir="rtl"] .feature::after,
html[dir="rtl"] .pbar .fill,
html[dir="rtl"] .hs-dot span::after,
html[dir="rtl"] .car-bar i,
html[dir="rtl"] .hbar .fill { transform-origin: right; }
html[dir="rtl"] .pbar .fill { background: linear-gradient(270deg, var(--accent), var(--gold)); }
@media (min-width: 1100px) {
  html[dir="rtl"] .timeline .rail i { transform-origin: right; background: linear-gradient(270deg, var(--accent), var(--gold)); }
}

/* Image reveal wipes in from the right */
html[dir="rtl"].js [data-reveal="image"] img { clip-path: inset(0 0 0 100%); }
html[dir="rtl"].js [data-reveal="image"].is-visible img { clip-path: inset(0 0 0 0); }

/* Header */
html[dir="rtl"] .logo:hover .logo-mark { transform: rotate(6deg) scale(1.05); }
html[dir="rtl"] .dropdown { transform-origin: top left; }

/* Hero: decorative curve and highlight underline are mirrored */
html[dir="rtl"] .hl svg,
html[dir="rtl"] svg.deco { scale: -1 1; }
html[dir="rtl"] .spin-badge svg.txt { animation-direction: reverse; }
html[dir="rtl"] .info-item:hover .ico { transform: rotate(8deg) scale(1.06); }

/* Backgrounds with a reading-direction gradient */
html[dir="rtl"] .cta::before { background: linear-gradient(270deg, rgba(58,42,78,.97) 0%, rgba(58,42,78,.9) 45%, rgba(58,42,78,.25) 100%); }
html[dir="rtl"].dark .cta::before { background: linear-gradient(270deg, rgba(31,23,40,.98) 0%, rgba(31,23,40,.92) 45%, rgba(31,23,40,.35) 100%); }
html[dir="rtl"] .cta .cta-img { scale: -1 1; }

/* Forms */
html[dir="rtl"] .select { background-position: left 14px center; }
html[dir="rtl"] .check input::after { margin-inline-start: 0; }
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="password"] { direction: ltr; text-align: right; }

/* Cards */
html[dir="rtl"] .feature .f-ico { border-radius: 18px 18px 4px 18px; }
html[dir="rtl"] .feature:hover .f-ico { transform: translateY(-4px) rotate(6deg); border-radius: 50%; }

/* Dashboard */
html[dir="rtl"] .side-link[aria-current="page"]::before { border-radius: 5px 0 0 5px; }
html[dir="rtl"] .pring svg { transform: rotate(-90deg) scaleY(-1); } /* ring fills anticlockwise */

/* Tables keep numeric columns readable */
html[dir="rtl"] .table td, html[dir="rtl"] .table th { text-align: right; }

/* Carousel track scrolls from the right; snap alignment follows "start" */
html[dir="rtl"] .car-track { direction: rtl; }

/* Countdown and clock-like values always read left to right */
html[dir="rtl"] .countdown, html[dir="rtl"] .big-404 { direction: ltr; }

/* Revision 2 */
html[dir="rtl"] .nav-menu a { text-align: right; }