/* ═══════════════════════════════════════════════════════════════
   DR. OMAR RIZVI — RTL (ARABIC) STYLESHEET
   Loaded only when language = Arabic
   ═══════════════════════════════════════════════════════════════ */

html[dir="rtl"] body {
  font-family: 'Tajawal', 'DM Sans', sans-serif;
  direction: rtl;
}

/* Use Arabic-friendly fonts for headings too — Cairo has elegant weight range */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .hero-name,
html[dir="rtl"] .section-title,
html[dir="rtl"] .page-hero-title,
html[dir="rtl"] .cta-headline,
html[dir="rtl"] .featured-cert-title,
html[dir="rtl"] .tb-title,
html[dir="rtl"] .wa-card-title,
html[dir="rtl"] .logo-name {
  font-family: 'Cairo', 'Tajawal', sans-serif;
}

html[dir="rtl"] .motto-quote,
html[dir="rtl"] .about-lead,
html[dir="rtl"] .about-pullquote,
html[dir="rtl"] .footer-motto {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  font-style: normal;
}

/* ─── Header / Nav ─────────────────────────────────────────── */
html[dir="rtl"] .header-inner { flex-direction: row-reverse; }
html[dir="rtl"] .nav-menu { flex-direction: row-reverse; }
html[dir="rtl"] .site-logo { text-align: right; }
html[dir="rtl"] .header-cta-btn { flex-direction: row-reverse; }
html[dir="rtl"] .mobile-toggle { margin-left: 0; margin-right: auto; }

/* ─── Hero Section ──────────────────────────────────────────── */
html[dir="rtl"] .hero-section { grid-template-columns: 52% 48%; }
html[dir="rtl"] .hero-left { order: 2; }
html[dir="rtl"] .hero-right { order: 1; }
html[dir="rtl"] .hero-eyebrow,
html[dir="rtl"] .hero-credentials,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .hero-mini-stats { flex-direction: row-reverse; }
html[dir="rtl"] .eyebrow-line { margin-left: 0; }
html[dir="rtl"] .hero-floating-badge { left: auto; right: -24px; flex-direction: row-reverse; }
html[dir="rtl"] .hero-img-frame { right: auto; left: 28px; }
html[dir="rtl"] .hero-scroll { left: 76%; }
html[dir="rtl"] .credential-sep { order: 0; }

@media (max-width: 768px) {
  html[dir="rtl"] .hero-section { grid-template-columns: 1fr; }
  html[dir="rtl"] .hero-floating-badge { right: 12px; left: auto; }
}

/* ─── General text alignment ────────────────────────────────── */
html[dir="rtl"] .text-center { text-align: center; } /* stays centered */
html[dir="rtl"] .section-rule { margin-left: 0; }
html[dir="rtl"] .td-rule,
html[dir="rtl"] .tb-rule { margin-right: 0; }

/* ─── Buttons ────────────────────────────────────────────────── */
html[dir="rtl"] .btn { flex-direction: row-reverse; }
html[dir="rtl"] .btn svg { transform: scaleX(-1); }
html[dir="rtl"] .btn:hover svg { transform: scaleX(-1) translateX(4px); }

/* ─── About preview / story (image+text swap) ───────────────── */
html[dir="rtl"] .about-preview-grid,
html[dir="rtl"] .about-story-grid,
html[dir="rtl"] .contact-form-grid { direction: rtl; }
html[dir="rtl"] .about-image-accent { right: auto; left: -20px; }
html[dir="rtl"] .floating-badge { left: auto; right: -20px; }
html[dir="rtl"] .highlight-item { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .about-pullquote { border-left: none; border-right: 3px solid var(--gold); padding-left: 0; padding-right: 24px; }

/* ─── Treatments preview cards ──────────────────────────────── */
html[dir="rtl"] .treatment-card { text-align: right; }
html[dir="rtl"] .treatment-link { direction: rtl; }

/* ─── Why section / cert cards / testimonials ───────────────── */
html[dir="rtl"] .why-card,
html[dir="rtl"] .testimonial-card,
html[dir="rtl"] .cert-preview-card,
html[dir="rtl"] .cert-card,
html[dir="rtl"] .expertise-item,
html[dir="rtl"] .publication-item { text-align: right; }
html[dir="rtl"] .expertise-item { flex-direction: row-reverse; }
html[dir="rtl"] .expertise-check { margin-right: 0; }
html[dir="rtl"] .publication-item { border-left: none; border-right: 4px solid var(--gold); }
html[dir="rtl"] .publication-item:hover { transform: translateX(-4px); }

/* ─── Treatment detail blocks (Treatments page) ─────────────── */
html[dir="rtl"] .treatment-block { direction: rtl; }
html[dir="rtl"] .tb-number { right: auto; left: 16px; }
html[dir="rtl"] .tb-best { border-left: none; border-right: 3px solid var(--gold); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
html[dir="rtl"] .tb-benefits li,
html[dir="rtl"] .td-list li,
html[dir="rtl"] .highlight-item,
html[dir="rtl"] .reassurance-item,
html[dir="rtl"] .cde-item { flex-direction: row-reverse; text-align: right; }

/* ─── Timeline (About page) ─────────────────────────────────── */
html[dir="rtl"] .timeline::before { left: auto; right: 100px; }
html[dir="rtl"] .timeline-item { grid-template-columns: 1fr 100px; }
html[dir="rtl"] .timeline-item::before { left: auto; right: 100px; transform: translateX(50%); }
html[dir="rtl"] .timeline-year { text-align: left; }
html[dir="rtl"] .timeline-marker { order: 2; }
html[dir="rtl"] .timeline-content { order: 1; text-align: right; }

@media (max-width: 768px) {
  html[dir="rtl"] .timeline::before { right: 0; left: auto; }
  html[dir="rtl"] .timeline-item { grid-template-columns: 1fr; padding-left: 0; padding-right: 20px; }
  html[dir="rtl"] .timeline-item::before { right: 0; left: auto; }
  html[dir="rtl"] .timeline-year { text-align: right; }
}

/* ─── Certifications page ───────────────────────────────────── */
html[dir="rtl"] .featured-cert-card { direction: rtl; }
html[dir="rtl"] .featured-cert-left { border-right: none; border-left: 1px solid rgba(196,150,90,0.15); padding-right: 0; padding-left: 60px; }
html[dir="rtl"] .cert-category-title { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .conference-item { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .cde-item svg,
html[dir="rtl"] .reassurance-item svg,
html[dir="rtl"] .highlight-item svg,
html[dir="rtl"] .tb-benefits li svg,
html[dir="rtl"] .td-list li svg { margin-left: 0; }

@media (max-width: 1100px) {
  html[dir="rtl"] .featured-cert-left { border-left: none; padding-left: 0; border-bottom: 1px solid rgba(196,150,90,0.15); }
}

/* ─── Contact page ───────────────────────────────────────────── */
html[dir="rtl"] .whatsapp-cta-card { direction: rtl; }
html[dir="rtl"] .wa-card-left { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .contact-info-card { text-align: center; } /* keep centered, neutral */
html[dir="rtl"] .form-group { text-align: right; }
html[dir="rtl"] .form-group input,
html[dir="rtl"] .form-group select,
html[dir="rtl"] .form-group textarea { text-align: right; direction: rtl; }

/* ─── Footer ─────────────────────────────────────────────────── */
html[dir="rtl"] .footer-grid { direction: rtl; }
html[dir="rtl"] .footer-motto { border-left: none; border-right: 2px solid var(--gold-border); padding-left: 0; padding-right: 16px; }
html[dir="rtl"] .footer-bottom-inner { flex-direction: row-reverse; }
html[dir="rtl"] .btn-footer-whatsapp { flex-direction: row-reverse; }

/* ─── Floating WhatsApp + Chatbot (mirror to left side) ──────── */
html[dir="rtl"] .whatsapp-float { right: auto; left: 28px; }
html[dir="rtl"] .wa-tooltip { right: auto; left: 70px; }
html[dir="rtl"] .ai-chatbot-widget { right: auto; left: 28px; }
html[dir="rtl"] .chatbot-window { right: auto; left: 0; }
html[dir="rtl"] .chatbot-header-info { flex-direction: row-reverse; }
html[dir="rtl"] .chat-msg.user { align-self: flex-start; }
html[dir="rtl"] .chat-msg.bot { align-self: flex-end; }
html[dir="rtl"] .chatbot-input-area { flex-direction: row-reverse; }

/* ─── Language Switcher Button ───────────────────────────────── */
html[dir="rtl"] .lang-switch-btn { direction: ltr; }

/* ─── Mobile nav menu RTL ────────────────────────────────────── */
html[dir="rtl"] #mobileNavOverlay ul { direction: rtl; }