/* ===========================================================
   RoZa Dental — RTL layer (Arabic)
   Loaded in addition to style.css on Arabic pages. Handles the
   handful of physical left/right values that don't auto-flip
   under dir="rtl" (flexbox and logical properties already do
   the rest for free). First-pass mirroring, refine on review.
   =========================================================== */

html[dir="rtl"] body{
  font-family:'Tajawal', 'DM Sans', -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* ===========================================================
   Arabic typography
   Arabic is a joined script: letter-spacing pulls the joins
   apart and is simply wrong, whether positive or negative. The
   Latin scale also runs too tight for Arabic, which needs more
   leading and a touch more size to read at the same weight.
   =========================================================== */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] .hero, html[dir="rtl"] .inner, html[dir="rtl"] .section-title,
html[dir="rtl"] .card-title, html[dir="rtl"] .cat-name, html[dir="rtl"] .cat-desc,
html[dir="rtl"] .cat-count, html[dir="rtl"] .mod-name, html[dir="rtl"] .mod-desc,
html[dir="rtl"] .eyebrow, html[dir="rtl"] .lead, html[dir="rtl"] .body-text,
html[dir="rtl"] .plan-name, html[dir="rtl"] .plan-desc, html[dir="rtl"] .plan-list li,
html[dir="rtl"] .micro, html[dir="rtl"] .ftagline, html[dir="rtl"] .fcol-title,
html[dir="rtl"] .arch-label, html[dir="rtl"] .badge, html[dir="rtl"] .pill-tag,
html[dir="rtl"] .btn, html[dir="rtl"] .nav-links a, html[dir="rtl"] .mobile-menu a,
html[dir="rtl"] .legend-item, html[dir="rtl"] .ro-status, html[dir="rtl"] .ro-type,
html[dir="rtl"] .ro-note, html[dir="rtl"] .chart-hint, html[dir="rtl"] .mock-name,
html[dir="rtl"] .mock-sub, html[dir="rtl"] .mock-status, html[dir="rtl"] .field label,
html[dir="rtl"] .breadcrumb, html[dir="rtl"] .copy, html[dir="rtl"] .flinks a,
html[dir="rtl"] .fcol a, html[dir="rtl"] .frow, html[dir="rtl"] .form-status,
html[dir="rtl"] .ai-lockup .n, html[dir="rtl"] .stat .l{
  letter-spacing:normal;
}

/* Arabic needs air between lines, and the display sizes need to breathe */
html[dir="rtl"] .hero{line-height:1.3;}
html[dir="rtl"] h1.inner{line-height:1.35;}
html[dir="rtl"] .section-title{line-height:1.42;}
html[dir="rtl"] .lead{line-height:1.9; font-size:17.5px;}
html[dir="rtl"] .body-text, html[dir="rtl"] .plan-desc,
html[dir="rtl"] .cat-desc, html[dir="rtl"] .plan-list li{line-height:1.85;}
html[dir="rtl"] .mod-desc{line-height:1.8; font-size:14.5px;}
html[dir="rtl"] .mod-name, html[dir="rtl"] .card-title{line-height:1.65;}
html[dir="rtl"] .micro{line-height:1.8;}
html[dir="rtl"] .eyebrow{font-size:14px;}

/* uppercase does nothing in Arabic; drop it so labels keep their real shape */
html[dir="rtl"] .arch-label, html[dir="rtl"] .fcol-title,
html[dir="rtl"] .ftagline{text-transform:none;}
html[dir="rtl"] .ftagline{font-size:13px;}
/* keep the RoZa wordmark and FDI/module codes in Latin script, left-to-right,
   even inside an RTL sentence */
html[dir="rtl"] .brand-lockup, html[dir="rtl"] .fbrand, html[dir="rtl"] .ltr{
  direction:ltr; unicode-bidi:isolate;
}
html[dir="rtl"] .skip-link{left:auto; right:16px;}

/* chevron chip: mirror the arrowhead to point the reading-forward direction (left) */
html[dir="rtl"] .chip svg{transform:scaleX(-1);}
html[dir="rtl"] .chip svg.a{transform:scaleX(-1) translateX(0);}
html[dir="rtl"] .chip svg.b{transform:scaleX(-1) translateX(-22px);}
html[dir="rtl"] a:hover .chip svg.a, html[dir="rtl"] .card:hover .chip svg.a,
html[dir="rtl"] button:hover .chip svg.a, html[dir="rtl"] .hoverable:hover .chip svg.a{transform:scaleX(-1) translateX(-22px);}
html[dir="rtl"] a:hover .chip svg.b, html[dir="rtl"] .card:hover .chip svg.b,
html[dir="rtl"] button:hover .chip svg.b, html[dir="rtl"] .hoverable:hover .chip svg.b{transform:scaleX(-1) translateX(0);}

/* the CTA ghost mark sits in the trailing corner, which is the LEFT in RTL
   (the plan badge uses inset-inline-end, so it flips on its own) */
html[dir="rtl"] .cta-panel .mark-ghost{right:auto; left:-60px;}
@media (max-width:640px){ html[dir="rtl"] .cta-panel .mark-ghost{left:-80px;} }

/* breadcrumb separator direction */
html[dir="rtl"] .breadcrumb{flex-direction:row;}

/* stat numbers and FDI/code labels inside mock UI stay LTR */
html[dir="rtl"] .mock-time, html[dir="rtl"] .stat .n{direction:ltr; unicode-bidi:isolate;}

/* the odontogram mirrors in Arabic, exactly as it does in the application:
   the patient's right side stays on the reader's leading side */
html[dir="rtl"] .teeth-row{flex-direction:row-reverse;}