/* ============================================================
   WellCore Solutions — RTL layer
   Loaded ONLY on /ar/ pages, after style.css.
   Purpose: mirror layout for Arabic. No redesign, no colour changes,
   no spacing changes beyond what direction requires.
   ============================================================ */

html[dir="rtl"] { direction: rtl; }

html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Arabic needs slightly more line-height than Latin at the same size */
html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] li { line-height: 1.95; }

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 { line-height: 1.5; }

/* Arabic glyphs read small next to Latin at identical px — nudge up */
html[dir="rtl"] { font-size: 103%; }

/* ---------- Text alignment ---------- */
html[dir="rtl"] .text-center,
html[dir="rtl"] .section-header,
html[dir="rtl"] .hero-content.centered,
html[dir="rtl"] .pricing-note,
html[dir="rtl"] .footer-bottom { text-align: center; }

/* Keep Latin-script runs (brand, prices, URLs) rendering LTR inline */
html[dir="rtl"] .ltr,
html[dir="rtl"] .price,
html[dir="rtl"] .pricing-price,
html[dir="rtl"] code,
html[dir="rtl"] .brand-latin {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ---------- Navigation ---------- */
html[dir="rtl"] .mobile-menu { text-align: right; }

/* ---------- Hero ---------- */
html[dir="rtl"] .hero-content { direction: rtl; }
html[dir="rtl"] .hero-badge,
html[dir="rtl"] .hero-buttons,
html[dir="rtl"] .hero-stores,
html[dir="rtl"] .hero-stats,
html[dir="rtl"] .hero-text { text-align: right; }

/* ---------- Cards & grids ---------- */
html[dir="rtl"] .feature-card,
html[dir="rtl"] .service-card,
html[dir="rtl"] .blog-card,
html[dir="rtl"] .about-feature,
html[dir="rtl"] .pricing-card,
html[dir="rtl"] .testimonial-card { text-align: right; }

html[dir="rtl"] .about-grid { direction: rtl; }

/* Lists: bullets move to the right edge */
html[dir="rtl"] ul,
html[dir="rtl"] ol { padding-right: 24px; padding-left: 0; }
html[dir="rtl"] .article-content ul,
html[dir="rtl"] .article-content ol { padding-right: 24px; padding-left: 0; }
html[dir="rtl"] .service-card ul,
html[dir="rtl"] .pricing-features { padding-right: 0; }

/* ---------- Left-border accents flip to the right ---------- */
html[dir="rtl"] .highlight-box {
  border-left: none;
  border-right: 4px solid var(--accent);
  border-radius: 12px 0 0 12px;
}
html[dir="rtl"] .answer-box { text-align: right; }

/* ---------- FAQ ---------- */
html[dir="rtl"] .faq-question {
  text-align: right;
}
html[dir="rtl"] .faq-answer { text-align: right; }
html[dir="rtl"] .faq-arrow { transform: scaleX(-1); }

/* ---------- Tables ---------- */
html[dir="rtl"] .data-table th,
html[dir="rtl"] .data-table td { text-align: center; }
html[dir="rtl"] .data-table thead th:first-child,
html[dir="rtl"] .data-table td:first-child { text-align: right; }
html[dir="rtl"] .compare-table th:first-child,
html[dir="rtl"] .compare-table td:first-child { text-align: right; }

/* ---------- Forms ---------- */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"] {
  text-align: left;
  direction: ltr;
}
html[dir="rtl"] label { text-align: right; display: block; }
html[dir="rtl"] ::placeholder { text-align: right; }

/* ---------- Footer ---------- */
html[dir="rtl"] .footer-grid { direction: rtl; }
html[dir="rtl"] .footer-col,
html[dir="rtl"] .footer-brand { text-align: right; }
html[dir="rtl"] .footer-col ul { padding-right: 0; }

/* ---------- Floating elements: mirror to the opposite side ---------- */
html[dir="rtl"] #whatsapp-float { left: auto !important; right: 32px !important; }
html[dir="rtl"] #langSwitch { left: auto !important; right: 32px !important; }
html[dir="rtl"] #back-top { right: auto !important; left: 32px !important; }

/* ---------- Directional arrows in copy ---------- */
/* Arabic uses ← for "forward". Any .arrow-fwd span flips automatically. */
html[dir="rtl"] .arrow-fwd { display: inline-block; transform: scaleX(-1); }

/* ---------- Breadcrumb / back links ---------- */

/* ---------- Long-word overflow guard ---------- */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] td {
  overflow-wrap: break-word;
  word-break: normal;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  html[dir="rtl"] .hero-text,
  html[dir="rtl"] .hero-content { text-align: center; }
  html[dir="rtl"] #whatsapp-float { right: 18px !important; }
  html[dir="rtl"] #langSwitch { right: 18px !important; }
  html[dir="rtl"] #back-top { left: 18px !important; }
}

/* Nav labels must not wrap in Arabic */
html[dir="rtl"] .nav-links a,
html[dir="rtl"] .nav-cta .btn { white-space: nowrap; }
html[dir="rtl"] .nav-links { gap: 22px; }

/* Keep floating buttons clear of hero store badges on small screens */
@media (max-width: 768px) {
  html[dir="rtl"] #langSwitch { bottom: 150px !important; }
}

/* Language switcher: nav switcher covers desktop, floating pill is mobile-only */
@media (min-width: 993px) {
  #langSwitch { display: none !important; }
}
#langNavEn { text-decoration: none; display: inline-flex; align-items: center; }