/* =========================================================
   SoftCare — RTL overrides (loaded only on dir="rtl" pages)
   ----------------------------------------------------------
   This file is ADDITIVE on top of css/styles.css. It only
   touches properties that don't auto-mirror under dir=rtl:
   absolute positioning (left/right), explicit text-align,
   asymmetric paddings/margins, and a few decorative tweaks.

   Load order required:
     <link rel="stylesheet" href="../css/styles.css">
     <link rel="stylesheet" href="../css/rtl.css">
   ========================================================= */

/* ----- Typography & base ------------------------------- */
html[dir="rtl"] body {
  font-family: "Tajawal", "Cairo", "Noto Sans Arabic", "Segoe UI", Roboto, system-ui, sans-serif;
}

/* Numerals stay LTR even inside Arabic copy */
html[dir="rtl"] .pricing-price-amount,
html[dir="rtl"] .pricing-price-period,
html[dir="rtl"] .hero-stat-value,
html[dir="rtl"] .stat-value,
html[dir="rtl"] .phone-caregiver-meta,
html[dir="rtl"] .phone-booking-val {
  direction: ltr;
  unicode-bidi: embed;
}

/* ----- Hero floating decorations ----------------------- */
html[dir="rtl"] .float-shape.s-heart   { left: auto; right:  6%; }
html[dir="rtl"] .float-shape.s-pill    { right: auto; left:  10%; }
html[dir="rtl"] .float-shape.s-plus    { left: auto; right: 12%; }
html[dir="rtl"] .float-shape.s-stetho  { right: auto; left:   4%; }
/* .s-ring is centered (left:50%) — no flip needed */

/* ----- Text alignment fixes ---------------------------- */
html[dir="rtl"] .testimonial-text,
html[dir="rtl"] .testimonial-name,
html[dir="rtl"] .testimonial-role,
html[dir="rtl"] .faq-btn,
html[dir="rtl"] .faq-body-inner,
html[dir="rtl"] .step-content,
html[dir="rtl"] .feature-card p,
html[dir="rtl"] .feature-card h3,
html[dir="rtl"] .pricing-desc,
html[dir="rtl"] .pricing-perk,
html[dir="rtl"] .chat-cta-text,
html[dir="rtl"] .footer-brand p {
  text-align: right;
}

/* ----- Chevrons & directional icons -------------------- */
/* Flip the FAQ chevron horizontally so it still points "down" visually
   (it already points down, so no flip needed — but if any arrow icons
   appear, mirror them). Arrow-right glyphs in CTAs: */
html[dir="rtl"] .btn svg[data-arrow],
html[dir="rtl"] .pricing-card a.btn::after {
  transform: scaleX(-1);
}

/* "Learn more →" / "Join as a caregiver →" arrow chars stay LTR inside
   Arabic text. Replace the literal → with ← in the markup itself. */

/* ----- Phone mockup card content ----------------------- */
html[dir="rtl"] .phone-caregiver-card {
  text-align: right;
}
html[dir="rtl"] .phone-header,
html[dir="rtl"] .phone-booking {
  text-align: right;
}

/* ----- Hero badge icon spacing ------------------------- */
/* Badge has icon followed by text; flex auto-mirrors. Nothing needed. */

/* ----- Nav & mobile menu ------------------------------- */
/* The flex nav-inner auto-mirrors under dir=rtl. Burger button alignment
   already uses margin-left:auto in source; remap to margin-right:auto. */
html[dir="rtl"] .nav-help-mobile {
  margin-left: 6px;
  margin-right: auto;
}

/* Mobile menu list items */
html[dir="rtl"] .mobile-menu ul li a {
  text-align: right;
}

/* ----- Footer ------------------------------------------ */
html[dir="rtl"] .footer-col,
html[dir="rtl"] .footer-links li,
html[dir="rtl"] .footer-brand {
  text-align: right;
}
html[dir="rtl"] .footer-app-banner-text {
  text-align: right;
}

/* ----- Misc text-align: left overrides in source ------- */
html[dir="rtl"] .comp-table th,
html[dir="rtl"] .comp-table td,
html[dir="rtl"] .cookie-table th {
  text-align: right;
}

/* ----- Blog article body (RTL) ------------------------- */
/* Blockquotes use a left accent border in styles.css — flip to the right. */
html[dir="rtl"] .blog-post-body blockquote {
  border-left: none;
  border-right: 4px solid var(--primary);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
/* Any left-bordered callouts / key-takeaways / TOC boxes flip side. */
html[dir="rtl"] .blog-post-body,
html[dir="rtl"] .blog-post-body li,
html[dir="rtl"] .blog-post-body p,
html[dir="rtl"] .blog-post-body h2,
html[dir="rtl"] .blog-post-body h3 {
  text-align: right;
}
html[dir="rtl"] .blog-post-body ul,
html[dir="rtl"] .blog-post-body ol {
  padding-right: 1.4em;
  padding-left: 0;
}

/* ----- Language dropdown (RTL) ------------------------- */
/* The menu opens from the opposite edge in RTL. */
html[dir="rtl"] .lang-dd-menu {
  right: auto;
  left: 0;
}
html[dir="rtl"] .lang-dd-menu a,
html[dir="rtl"] .mobile-lang a {
  text-align: right;
}