/* ==========================================================================
   SpineWell — right-to-left support
   Activated by dir="rtl" on <html> (toggled and saved by script.js).
   style.css is written with logical properties (margin-inline, inset-inline,
   text-align: start) and the pages use Tailwind's logical utilities
   (ms-*, me-*, start-*, end-*), so layout mirrors on its own. This file
   handles what logical properties cannot: animation direction, transform
   origins, directional icons and content that must stay left-to-right.
   ========================================================================== */

/* Direction helpers used by animations in style.css.
   --dir multiplies every horizontal translate, so slide-left/slide-right
   reveals, the slider, toasts and hover nudges are mirrored automatically. */
[dir="rtl"] {
  --dir: -1;
  --start: right;
  --end: left;
}

/* Directional icons and arrows --------------------------------------------- */
[dir="rtl"] .icon-arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .icon-arrow,
[dir="rtl"] .link-arrow:hover .icon-arrow { transform: scaleX(-1) translateX(5px); }
[dir="rtl"] .slider-btn.is-prev .icon { transform: none; }
[dir="rtl"] .dir-toggle .icon { transform: scaleX(-1); }

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

/* Header and navigation ---------------------------------------------------- */
[dir="rtl"] .logo:hover .logo-mark .v2 { transform: translateX(5px); }
[dir="rtl"] .logo:hover .logo-mark .v1,
[dir="rtl"] .logo:hover .logo-mark .v3 { transform: translateX(-3px); }
[dir="rtl"] .social a:hover { transform: translateY(-3px) rotate(6deg); }

/* Typography: negative tracking harms connected scripts such as Arabic ------ */
[dir="rtl"] .display, [dir="rtl"] .h2, [dir="rtl"] .h3,
[dir="rtl"] .cta-title, [dir="rtl"] .logo, [dir="rtl"] .stat-value { letter-spacing: 0; }

/* Content that stays left-to-right ------------------------------------------ */
/* Phone numbers, booking references and the 404 numerals */
[dir="rtl"] .ltr-text { direction: ltr; unicode-bidi: isolate; }
/* Email, phone and date inputs keep LTR typing but align to the RTL start edge */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"] { direction: ltr; text-align: right; }
[dir="rtl"] input[type="email"]::placeholder { text-align: right; }

/* Forms --------------------------------------------------------------------- */
[dir="rtl"] .spinner { animation-direction: reverse; }
[dir="rtl"] .check-box .icon { transform: scaleX(1); }

/* Treatment timeline: progress line grows from the right on desktop ---------- */
/* (handled by --start; the numbered badge and dots use inset-inline) */

/* Testimonial slider: dots and controls follow reading order ----------------- */
[dir="rtl"] .slide blockquote { text-align: right; }

/* Hover tilt directions mirrored --------------------------------------------- */
[dir="rtl"] .svc-card:hover .svc-icon { transform: translateY(-6px) rotate(8deg); }
[dir="rtl"] .info-card:hover .ic,
[dir="rtl"] .benefit:hover .b-icon { transform: rotate(8deg); }
[dir="rtl"] .info-item:hover .icon,
[dir="rtl"] .cert:hover .icon { transform: rotate(10deg) scale(1.1); }

/* Decorative pieces positioned with physical offsets -------------------------- */
[dir="rtl"] .hero-ring { animation-direction: reverse; }
[dir="rtl"] .cta-ring { animation-direction: reverse; }
/* The posture comparison and the map are images, so they are not mirrored. */
[dir="rtl"] .compare { direction: ltr; }
[dir="rtl"] .map-card { text-align: right; }

/* Figures such as "15+ years" or "4.9 out of 5" keep their internal order */
[dir="rtl"] .badge-float strong,
[dir="rtl"] .stat-value,
[dir="rtl"] .count-unit strong { direction: ltr; unicode-bidi: isolate; text-align: right; }

/* Dropdown, Home 2, login and register ---------------------------------------- */
[dir="rtl"] .icon-back { transform: none; }
[dir="rtl"] .link-arrow:hover .icon-back { transform: translateX(5px); }
[dir="rtl"] .svc-row:hover .icon-arrow { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .svc-row:hover .svc-row-icon { transform: rotate(8deg); }
[dir="rtl"] input[type="password"] { direction: ltr; text-align: right; }