/* =========================================================
   VitaLab Diagnostics - rtl.css
   Applied when <html dir="rtl">. Most layout uses logical
   properties in style.css, so only exceptions live here.
   ========================================================= */

html[dir="rtl"] body {
  font-family: "Tajawal", "Poppins", system-ui, sans-serif;
  text-align: right;
}

/* Hero is centered on small screens, keep it that way */
@media (max-width: 991px) {
  html[dir="rtl"] .hero-grid,
  html[dir="rtl"] .section-head { text-align: center; }
}

/* Arrows should point the other way */
html[dir="rtl"] .dir-icon { transform: scaleX(-1); }
html[dir="rtl"] .btn:hover .dir-icon { transform: scaleX(-1) translateX(3px); }

/* Mobile slide-in menu opens from the left side */
@media (max-width: 991px) {
  html[dir="rtl"] .main-nav {
    right: auto; left: 0;
    transform: translateX(-105%);
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.18);
  }
  html[dir="rtl"] .main-nav.open { transform: translateX(0); }
  html[dir="rtl"] .nav-list > li { transform: translateX(-24px); }
  html[dir="rtl"] .main-nav.open .nav-list > li { transform: none; }
  html[dir="rtl"] .dropdown { padding: 0 .6rem 0 0; }
}

/* Scroll-reveal slides come from the mirrored side */
html[dir="rtl"] .reveal.reveal-side-a { transform: translateX(50px); }
html[dir="rtl"] .reveal.reveal-side-b { transform: translateX(-50px); }
html[dir="rtl"] .reveal.visible { transform: none; }

/* Quote icon mirrors */
html[dir="rtl"] .quote-mark { transform: scaleX(-1); }

/* Phone numbers and emails always read left-to-right */
html[dir="rtl"] [dir="ltr"] { unicode-bidi: embed; }

/* Footer link hover nudge uses logical padding already; letter-spacing off for Arabic-style fonts */
html[dir="rtl"] .eyebrow { letter-spacing: 0; }
html[dir="rtl"] .stars { letter-spacing: 3px; direction: ltr; }


/* ---------- Tests & Packages page + 404 page ---------- */
html[dir="rtl"] .ctag,
html[dir="rtl"] .prep-badge { letter-spacing: 0; }
/* Prices and the 404 digits keep their left-to-right order */
html[dir="rtl"] .price,
html[dir="rtl"] .pkg-price { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .pkg-price { justify-content: flex-end; }
html[dir="rtl"] .error-code { direction: ltr; }
/* Text pages stay centred where the layout is centred */
html[dir="rtl"] .finder,
html[dir="rtl"] .error-hero { text-align: center; }
html[dir="rtl"] .search-box input { text-align: right; }

/* Keep the off-canvas mobile menu from widening the page in RTL */
@media (max-width: 991px) {
  html[dir="rtl"] { overflow-x: hidden; }
  html[dir="rtl"] .main-nav { visibility: hidden; }
  html[dir="rtl"] .main-nav.open { visibility: visible; }
}

/* ---------- Login / Register / Recovery page + Coming soon page ---------- */
html[dir="rtl"] .auth-card[data-view="register"] .auth-tabs::before { transform: translateX(-100%); }
html[dir="rtl"] .rep-rows b,
html[dir="rtl"] .cs-countdown { direction: ltr; }
html[dir="rtl"] .rep-rows b { text-align: end; }
html[dir="rtl"] .auth-card,
html[dir="rtl"] .notify { text-align: right; }
html[dir="rtl"] .rec-step.done b::before { display: inline-block; }
html[dir="rtl"] .cs-hero { text-align: center; }
html[dir="rtl"] .notify-box input { text-align: right; }
@media (max-width: 575px) {
  html[dir="rtl"] .notify-box input { text-align: center; }
}

/* ---------- Patient Dashboard page ---------- */
html[dir="rtl"] .sum-card strong,
html[dir="rtl"] .date-box b,
html[dir="rtl"] .track .tk-dot { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] #pEmail,
html[dir="rtl"] #pPhone { text-align: right; }
html[dir="rtl"] .rep-search input { padding: .75rem 3rem .75rem 1.2rem; }
html[dir="rtl"] .dash-nav { direction: rtl; }

/* ---------- Home 2 page ---------- */
html[dir="rtl"] .h2-svc::before { transform-origin: right; }
html[dir="rtl"] .h2-range i { transform: translate(50%, -50%); }
html[dir="rtl"] .h2-row-top .val,
html[dir="rtl"] .h2-track .t,
html[dir="rtl"] .h2-trust-item strong,
html[dir="rtl"] .h2-meter-top b { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .h2-trust-item,
html[dir="rtl"] .h2-hero .hero-content,
html[dir="rtl"] .h2-report-text,
html[dir="rtl"] .h2-quality-text { text-align: right; }
@media (max-width: 991px) {
  html[dir="rtl"] .h2-hero .hero-content { text-align: center; }
}
@media (max-width: 575px) {
  html[dir="rtl"] .h2-trust-item { text-align: center; }
}
html[dir="rtl"] .h2-ex-meta,
html[dir="rtl"] .h2-ex-body,
html[dir="rtl"] .h2-step { text-align: center; }
@media (max-width: 575px) {
  html[dir="rtl"] .h2-step { text-align: right; }
}