/* ═══════════════════════════════════════════════════════════ RTL / LTR Logical Property Overrides Applied when [dir="rtl"] is set on ═══════════════════════════════════════════════════════════ */ :root { --f-body: 'Vazirmatn', 'Inter', sans-serif; } [dir="ltr"] { --f-body: 'Inter', 'Vazirmatn', sans-serif; } /* ─── Base ──────────────────────────────────────────────── */ [dir="rtl"] body { font-family: 'Vazirmatn', sans-serif; letter-spacing: 0; } [dir="ltr"] body { font-family: 'Inter', sans-serif; } /* ─── Header / Nav ──────────────────────────────────────── */ [dir="rtl"] .header-inner { flex-direction: row-reverse; } [dir="rtl"] .nav-list { flex-direction: row-reverse; } [dir="rtl"] .header-logo { margin-inline-end: auto; margin-inline-start: 0; } /* ─── Hero ──────────────────────────────────────────────── */ [dir="rtl"] .hero-content { text-align: right; } [dir="rtl"] .hero-cta-group { justify-content: flex-end; } [dir="rtl"] .hero-stats { flex-direction: row-reverse; } /* ─── Section headers ───────────────────────────────────── */ [dir="rtl"] .section-header { text-align: right; } [dir="rtl"] .section-eyebrow::before { margin-inline-end: 0.5rem; margin-inline-start: 0; order: 1; } /* ─── Trust strip ───────────────────────────────────────── */ [dir="rtl"] .trust-strip { flex-direction: row-reverse; } /* ─── Card grids ─────────────────────────────────────────── */ [dir="rtl"] .why-grid, [dir="rtl"] .sys-grid, [dir="rtl"] .tech-grid { direction: rtl; } [dir="rtl"] .why-card, [dir="rtl"] .sys-card, [dir="rtl"] .tech-card { text-align: right; } /* ─── Treatment track ───────────────────────────────────── */ [dir="rtl"] .track-steps { flex-direction: row-reverse; } [dir="rtl"] .track-rail::before { transform-origin: right center; } /* ─── Bone journey ──────────────────────────────────────── */ [dir="rtl"] .bcs-features { text-align: right; padding-inline-start: 0; padding-inline-end: 1.5rem; } [dir="rtl"] .bcs-feature::before { margin-inline-end: 0; margin-inline-start: 0.75rem; order: 1; } [dir="rtl"] .bcs-dots { right: auto; left: 2rem; } /* ─── Treatment journey (accordion) ─────────────────────── */ [dir="rtl"] .tj-step-header { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .tj-step-icon { margin-inline-end: 0; margin-inline-start: 1rem; } [dir="rtl"] .tj-step-chevron { margin-inline-start: 0; margin-inline-end: auto; transform: rotate(180deg); } [dir="rtl"] .tj-step-header[aria-expanded="true"] .tj-step-chevron { transform: rotate(-90deg); } [dir="rtl"] .tj-benefits { padding-inline-start: 0; padding-inline-end: 1rem; } [dir="rtl"] .tj-benefit::before { margin-inline-end: 0; margin-inline-start: 0.5rem; order: 1; } /* ─── System explainer ──────────────────────────────────── */ [dir="rtl"] .sys-highlights { direction: rtl; } [dir="rtl"] .sys-highlight { text-align: right; flex-direction: row-reverse; } [dir="rtl"] .sys-connector { transform-origin: right center; } /* ─── B/A slider ─────────────────────────────────────────── */ [dir="rtl"] .ba-before-label { inset-inline-start: auto; inset-inline-end: 1rem; } [dir="rtl"] .ba-after-label { inset-inline-start: 1rem; inset-inline-end: auto; } /* ─── FAQ ────────────────────────────────────────────────── */ [dir="rtl"] .faq-item summary { text-align: right; } [dir="rtl"] .faq-chevron { margin-inline-start: 0; margin-inline-end: auto; } [dir="rtl"] .faq-answer { text-align: right; } /* ─── Consultation form ─────────────────────────────────── */ [dir="rtl"] .consultation-form { text-align: right; } [dir="rtl"] .form-group label { text-align: right; } [dir="rtl"] .form-group input, [dir="rtl"] .form-group textarea, [dir="rtl"] .form-group select { text-align: right; direction: rtl; } [dir="rtl"] .form-benefits { text-align: right; padding-inline-start: 0; padding-inline-end: 1rem; } [dir="rtl"] .form-benefit::before { margin-inline-end: 0; margin-inline-start: 0.5rem; order: 1; } [dir="rtl"] .contact-method-options { flex-direction: row-reverse; justify-content: flex-end; } /* ─── Doctor section ─────────────────────────────────────── */ [dir="rtl"] .doctor-content { flex-direction: row-reverse; } [dir="rtl"] .doctor-credentials { text-align: right; } [dir="rtl"] .doc-credential::before { margin-inline-end: 0; margin-inline-start: 0.5rem; order: 1; } /* ─── Clinic tech ────────────────────────────────────────── */ [dir="rtl"] .tech-card { text-align: right; } [dir="rtl"] .tech-icon { margin-inline-end: 0; margin-inline-start: 1rem; } /* ─── Footer ─────────────────────────────────────────────── */ [dir="rtl"] .footer-grid { direction: rtl; } [dir="rtl"] .footer-nav ul { padding-inline-start: 0; text-align: right; } [dir="rtl"] .footer-bottom { flex-direction: row-reverse; } /* ─── WhatsApp button ───────────────────────────────────── */ [dir="rtl"] .wa-button { inset-inline-end: 1.5rem; inset-inline-start: auto; } /* ─── Language switcher ─────────────────────────────────── */ .lang-switcher { display: flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; margin-inline-start: 1rem; } .lang-switcher a { color: var(--c-text-muted); text-decoration: none; padding: 0.2rem 0.45rem; border-radius: 4px; transition: color 0.2s, background 0.2s; } .lang-switcher a:hover { color: var(--c-text); background: rgba(255,255,255,0.07); } .lang-switcher .lang-active { color: var(--c-cyan); background: rgba(93,225,255,0.08); border-radius: 4px; padding: 0.2rem 0.45rem; } .lang-switcher .lang-divider { color: var(--c-text-muted); opacity: 0.4; } /* ─── Reduced motion ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [dir="rtl"] .track-rail::before { transform: none !important; transition: none !important; } }