/* ==========================================================================
   ClearBreath — RTL support
   Activated by dir="rtl" on <html>. Layout uses logical properties
   (inline-start / inline-end), so this file mirrors what logical properties
   cannot: transform directions, transform origins, icons and animations.
   ========================================================================== */

/* Keep phone numbers and Latin IDs readable inside RTL text */
[dir="rtl"] a[href^="tel:"], [dir="rtl"] .job-id, [dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Directional icons and arrow hover movement */
[dir="rtl"] .arrow { transform: scaleX(-1); }
[dir="rtl"] a:hover > .arrow, [dir="rtl"] button:hover > .arrow, [dir="rtl"] .link-arrow:hover .arrow, [dir="rtl"] .quick-card:hover .arrow { transform: translateX(-4px) scaleX(-1); }
[dir="rtl"] .round-btn .ico, [dir="rtl"] .cal-head .ico, [dir="rtl"] .side-list .ico { transform: scaleX(-1); }
[dir="rtl"] .flip, [dir="rtl"] .round-btn .ico.flip { transform: none; }
[dir="rtl"] .link-arrow { background-position: 100% 100%; }

/* Fills and underlines grow from the right */
[dir="rtl"] .btn::before, [dir="rtl"] .nav-link::after, [dir="rtl"] .bar > span, [dir="rtl"] .hs-progress span,
[dir="rtl"] .stepper li::after, [dir="rtl"] .strength-bar i { transform-origin: right; }
@media (min-width: 1024px) { [dir="rtl"] .tl-fill { transform-origin: right; background: linear-gradient(270deg, rgb(var(--brand)), rgb(var(--brand-2))); } }
[dir="rtl"] .bar > span { background: linear-gradient(270deg, rgb(var(--brand)), rgb(var(--brand-2))); }

/* Header and mobile menu */
[dir="rtl"] .mobile-menu li { transform: translateX(16px); }
[dir="rtl"] .mobile-menu.is-open li { transform: none; }

/* Hero collage and floating elements */
[dir="rtl"] .sm-a { animation-name: slide-from-start-rtl; }
[dir="rtl"] .sm-b { animation-name: slide-from-end-rtl; }
[dir="rtl"] .plx { transform: translate3d(calc(var(--px, 0) * var(--d, 0) * -1px), calc(var(--py, 0) * var(--d, 0) * 1px), 0); }
[dir="rtl"] .portal-mock { transform: perspective(1200px) rotateY(-4deg); }
[dir="rtl"] .portal-mock:hover { transform: none; }

/* Scroll reveal: left/right swap sides */
[dir="rtl"].js [data-reveal="left"] { transform: translateX(46px); }
[dir="rtl"].js [data-reveal="right"] { transform: translateX(-46px); }
[dir="rtl"].js [data-reveal="img"] { clip-path: inset(0 0 0 100% round 28px); }
[dir="rtl"].js [data-reveal].is-in { transform: none; }
[dir="rtl"].js [data-reveal="img"].is-in { clip-path: inset(0 0 0 0 round 28px); }

/* Hover nudges */
[dir="rtl"] .sign:hover { transform: translateX(-8px); }
[dir="rtl"] .spec > div:hover { transform: translateX(-6px); }
[dir="rtl"] .footer-links a:hover { transform: translateX(-6px); }

/* Forms */
[dir="rtl"] select.input { background-position: left 12px center; }
[dir="rtl"] .switch input:checked + .switch-ui::after { transform: translateX(-20px); }
[dir="rtl"] .input[type="email"], [dir="rtl"] .input[type="tel"], [dir="rtl"] .newsletter input { text-align: right; }

/* Dashboard */
[dir="rtl"] .sidebar { transform: translateX(100%); }
[dir="rtl"] .sidebar.is-open { transform: none; }
@media (min-width: 1024px) { [dir="rtl"] .sidebar { transform: none; } }
[dir="rtl"] .dropdown { transform-origin: top left; }
[dir="rtl"] .visit.is-removing { transform: translateX(-30px); }
[dir="rtl"] .step-panel.is-active { animation-name: step-in-rtl; }
[dir="rtl"] .step-panel.is-back { animation-name: step-in-back-rtl; }
[dir="rtl"] .td-actions { justify-content: flex-start; }

/* Toasts slide in from the left edge */
[dir="rtl"] .toast { animation-name: toast-in-rtl; }
[dir="rtl"] .toast.is-out { animation-name: toast-out-rtl; }

/* The before/after slider and charts keep a fixed left-to-right reading
   order (time and comparison axes), which is the convention in RTL UIs too. */
[dir="rtl"] .ba, [dir="rtl"] .chart svg { direction: ltr; }
[dir="rtl"] .legend { direction: rtl; }

@keyframes slide-from-start-rtl { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes slide-from-end-rtl { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes step-in-rtl { from { opacity: 0; transform: translateX(-30px); } }
@keyframes step-in-back-rtl { from { opacity: 0; transform: translateX(30px); } }
@keyframes toast-in-rtl { from { opacity: 0; transform: translateX(-40px); } }
@keyframes toast-out-rtl { to { opacity: 0; transform: translateX(-40px); } }