/* ============================================================
   Cha Cha Chai — right-to-left layer for the Arabic pages (/ar/)
   Loaded after ccc.css on the Arabic pages only. Contains only what right-to-left
   needs: Cairo type, no tracking / capitals / italics, and the mirrored paddings,
   bullets, arrows, art, select arrow and mobile menu of the components those pages use.
   ============================================================ */

:root {
  --font-body: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-display: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-script: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-arabic: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* ---------- Type ---------- */
html[dir="rtl"] body { font-size: 17px; line-height: 1.85; }
html[dir="rtl"] *, html[dir="rtl"] *::before, html[dir="rtl"] *::after { letter-spacing: 0 !important; text-transform: none !important; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { line-height: 1.4; }
html[dir="rtl"] .title { font-weight: 700; font-size: clamp(1.8rem, 4.4vw, 2.8rem); line-height: 1.4; text-wrap: balance; }
html[dir="rtl"] .title .alt, html[dir="rtl"] h1 .alt { font-style: normal; font-weight: 700; }
html[dir="rtl"] .page-hero h1 { font-weight: 700; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.35; }
html[dir="rtl"] .page-hero .script { font-size: 1.05rem; font-weight: 600; line-height: 1.5; }
html[dir="rtl"] .page-hero .lead { font-size: 1.08rem; line-height: 1.95; }
html[dir="rtl"] .btn { font-size: 1rem; font-weight: 700; line-height: 1.5; }
html[dir="rtl"] .prose h2, html[dir="rtl"] .enquiry-card h2, html[dir="rtl"] .cb-title { font-weight: 700; line-height: 1.4; }
html[dir="rtl"] .faq-item h3, html[dir="rtl"] .qa dt, html[dir="rtl"] .pc .name { font-weight: 700; line-height: 1.5; }
html[dir="rtl"] .pc .desc { font-size: .92rem; line-height: 1.8; }
html[dir="rtl"] .qa dd, html[dir="rtl"] .faq-item p { font-size: 1rem; line-height: 1.9; }
html[dir="rtl"] .qa-h { font-size: 1.05rem; font-weight: 700; }
html[dir="rtl"] .foot-h { font-size: 1.05rem; font-weight: 700; }
html[dir="rtl"] .foot-script { font-weight: 700; line-height: 1.4; }
html[dir="rtl"] .trust-strip { font-size: .86rem; }
html[dir="rtl"] .enquiry-form label { font-size: .95rem; }
html[dir="rtl"] .enquiry-form .ef-note, html[dir="rtl"] .enquiry-form .ef-helper, html[dir="rtl"] .cb-lead { font-size: .88rem; line-height: 1.8; }
html[dir="rtl"] .cb-pill a, html[dir="rtl"] .ef-more > summary { font-size: .95rem; }

/* Latin names, prices and numbers sit in <bdi dir="ltr"> isolates; short ones never break across lines */
html[dir="rtl"] bdi.nb { white-space: nowrap; }

/* ---------- Arrows ---------- */
html[dir="rtl"] .ic.arr { margin-left: 0; margin-right: .3em; transform: scaleX(-1); }
html[dir="rtl"] .ic.arr.up { transform: rotate(-45deg); }

/* ---------- Nav ---------- */
html[dir="rtl"] .nav-links a { font-size: .95rem; font-weight: 600; }
html[dir="rtl"] .nav-links a.nav-cta { font-weight: 700; }
html[dir="rtl"] .nav-links a[lang="ar"], html[dir="rtl"] .nav-links a[lang="en"] { font-family: var(--font-body); }
@media (min-width: 961px) {
  html[dir="rtl"] .nav-links a { white-space: nowrap; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  html[dir="rtl"] .nav-links { gap: 12px; }
  html[dir="rtl"] .nav-links a { font-size: .84rem; }
  html[dir="rtl"] .nav-links a.nav-cta { padding: 8px 14px; }
  html[dir="rtl"] .nav-logo img { height: 48px; }
}
@media (max-width: 960px) {
  html[dir="rtl"] .nav-links { transform: translateX(-100%); }
  html[dir="rtl"] .nav-links.open { transform: none; }
  html[dir="rtl"] .nav-links a { font-size: 1.45rem; font-weight: 700; }
  html[dir="rtl"] .nav-links a.nav-cta { font-size: 1.05rem; }
}

/* ---------- Hero art (mirrored) ---------- */
html[dir="rtl"] .hero-art .art-a { right: auto; left: 56px; }
html[dir="rtl"] .hero-art .art-b { left: auto; right: 0; }
@media (max-width: 960px) {
  html[dir="rtl"] .hero-art .art-a { right: auto; left: 40px; }
}
@media (max-width: 600px) {
  html[dir="rtl"] .hero-art .art-a { right: auto; left: 24px; }
}

/* ---------- Steps, FAQ, bullets, trust strip (mirrored paddings and markers) ---------- */
html[dir="rtl"] .steps.strip .si { right: auto; left: 22px; }
html[dir="rtl"] .faq-item { padding: 24px 78px 24px 26px; }
html[dir="rtl"] .faq-item::before { left: auto; right: 22px; }
html[dir="rtl"] .prose ul li { padding-left: 0; padding-right: 28px; }
html[dir="rtl"] .prose ul li::before { left: auto; right: 3px; }
html[dir="rtl"] .trust-strip li { padding-left: 0; padding-right: 14px; }
html[dir="rtl"] .trust-strip li::before { left: auto; right: 0; }
@media (max-width: 600px) {
  html[dir="rtl"] .faq-item { padding: 20px 66px 20px 18px; }
  html[dir="rtl"] .faq-item::before { left: auto; right: 16px; }
}

/* ---------- Forms ---------- */
html[dir="rtl"] .ef-honey { left: auto; right: -9999px; }
html[dir="rtl"] .enquiry-form select {
  padding-right: 14px; padding-left: 36px; background-position: left 13px center;
}
/* numbers and addresses are typed left-to-right but sit on the right edge of the field */
html[dir="rtl"] .enquiry-form input[type="tel"], html[dir="rtl"] .enquiry-form input[type="email"] { direction: ltr; text-align: right; }
html[dir="rtl"] .enquiry-form input[type="tel"]::placeholder, html[dir="rtl"] .enquiry-form input[type="email"]::placeholder { direction: ltr; }

/* ---------- Sticky bar ---------- */
@media (max-width: 960px) {
  html[dir="rtl"] .sticky-cta a { font-size: .95rem; font-weight: 700; padding: 14px 6px; }
}