/* AR Override — RTL layout + Noto Naskh Arabic / Noto Sans Arabic */
/* Font loading is handled in HTML <head> directly with display=swap */

:root {
    --heading: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    --body: 'Noto Naskh Arabic', 'Traditional Arabic', 'Segoe UI', serif;
    --serif: 'Noto Naskh Arabic', 'Traditional Arabic', serif;
    --sans: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

/* === RTL baseline === */
html[dir="rtl"] body,
body[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] body,
body[lang="ar"] {
    direction: rtl;
}

/* === BODY — Noto Naskh Arabic === */
body, p, .why-text, .doctor-bio, .review-slide-text, .faq-a p, .trust-label,
.video-card-sub, .review-name, .review-proc, .nav-drawer-info-row,
.footer-addr, .footer-links, .nav-drawer-info-addr, .hero-desc {
    font-family: var(--body) !important;
    letter-spacing: 0;
    line-break: strict;
    overflow-wrap: anywhere;
    direction: rtl;
    text-align: right;
}

/* === HEADINGS — Noto Sans Arabic (modern, clean) === */
h1, h2, h3, .sec-title, .doctor-name, .hero-text h1, .cat-hero-text h1,
.why-title, .video-card-title, .review-cta-score, .footer-col-title,
.faq-q, .splash-name {
    font-family: var(--heading) !important;
    font-weight: 600;
    letter-spacing: 0;
    direction: rtl;
    text-align: right;
}

/* === SUBHEADINGS === */
.hero-sub, .doctor-title, .sec-desc, .splash-tagline, .doctor-num {
    font-family: var(--heading) !important;
    font-weight: 400;
    letter-spacing: 0;
    direction: rtl;
    text-align: right;
}

/* === LABELS / NAV === */
.sec-label, .nav-links, .nav-drawer-links, .hero-label,
.demo-label, .proc-section-label, .nav-drawer-info-title,
.btn-primary, .cta-actions a, .doctor-link, .review-cta-btn {
    font-family: var(--sans) !important;
    letter-spacing: 0;
}

/* === HERO h1 === */
.hero-text h1 {
    font-weight: 600 !important;
}

/* === NUMBERS — Outfit (keeping EN numeric font) === */
.trust-num, .review-cta-score, .google-badge-score {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    direction: ltr;
    unicode-bidi: embed;
}
.trust-num {
    font-size: min(2.6rem, 9vw);
    white-space: nowrap;
    line-height: 1;
}

/* doctor-num RTL */
.doctor-num {
    font-family: var(--sans) !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--accent) !important;
    margin-bottom: 20px !important;
    direction: rtl;
    text-align: right;
}
.doctor-num .num-id {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 6px;
    margin-left: 0;
    direction: ltr;
    unicode-bidi: embed;
}

.doctor-title {
    font-family: var(--sans) !important;
    font-size: 0.92rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: var(--text-muted) !important;
    margin-bottom: 22px !important;
}

/* === Splash === */
.splash-name {
    font-family: var(--heading) !important;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
    direction: rtl;
}
.splash-tagline {
    font-family: var(--body) !important;
    letter-spacing: 0;
    direction: rtl;
}

/* === RTL layout mirroring === */

/* Nav: logo left→right, links right→left */
.nav-inner, .nav-container {
    direction: rtl;
}

/* Doctor num id spacing fix */
.doctor-num .num-id { margin-right: 6px; margin-left: 0; }

/* FAB & Lang-FAB: force LTR layout (English-style) per user request.
   RTL was breaking label/icon alignment — labels overlapping icons,
   text wrapping above icons, and clipping at viewport edge.
   Containers stay at their original sides (chat FAB right, lang FAB left)
   but internal flow is LTR so label/icon positioning matches EN exactly. */
.fab-container,
.fab-container *,
.lang-fab-container,
.lang-fab-container * {
    direction: ltr !important;
    text-align: left;
}

/* Labels containing Arabic text still render correctly via Unicode bidi
   algorithm; the unicode-bidi:plaintext hint helps short fragments. */
.fab-label,
.lang-fab-name {
    unicode-bidi: plaintext;
}

/* Nav drawer: open from right (default) or left? Keep right in RTL for natural feel */
/* Nav drawer already opens from right via transform; RTL keeps that */

/* Splash reveal direction */
.splash-name, .splash-tagline { text-align: center; }

/* Footer columns RTL */
.footer-inner, .footer-grid, .footer-row { direction: rtl; }
.footer-addr, .footer-col { text-align: right; }

/* Trust bar numbers LTR in RTL context */
.trust-item { direction: rtl; text-align: center; }

/* CTA actions: reverse button order for RTL reading */
.cta-actions { direction: rtl; }

/* Lists: bullet points on right */
ul, ol { padding-right: 20px; padding-left: 0; }
li { text-align: right; }

/* Breadcrumb RTL */
.breadcrumb, .breadcrumb-list { direction: rtl; }
.breadcrumb-list li::before { content: '‹ '; }
.breadcrumb-list li:first-child::before { content: ''; }

/* FAQ details — icon on left in RTL */
.faq-item summary {
    direction: rtl;
    text-align: right;
}
.faq-icon {
    margin-right: auto;
    margin-left: 0;
}

/* Related procedures grid */
.related-grid, .related-procedures { direction: rtl; }

/* Gallery B&A labels */
.gallery-body-title, .gallery-body-sub { direction: rtl; text-align: right; }

/* Video card RTL */
.video-card-title, .video-card-sub { direction: rtl; text-align: right; }

/* Review slides RTL */
.review-slide-inner, .review-slide-text, .review-slide-author { direction: rtl; text-align: right; }
.review-slide-stars { direction: ltr; }

/* Nav links AR: Arabic 9 items + wider text — tighten spacing */
.nav-links { gap: 18px; }
.nav-links a { padding: 0 6px; font-size: 0.92rem; letter-spacing: 0; }

/* Force hamburger below 1280px — 9 Arabic items overflow on laptop widths */
@media (max-width: 1280px) {
    .nav-links { display: none; }
    .nav-hamburger { display: block; }
}

/* Hero text block RTL */
.hero-text, .cat-hero-text { direction: rtl; text-align: right; }
.hero-label, .cat-hero-label { text-align: right; }

/* Reveal animations: keep as is, direction agnostic */

/* Form inputs RTL */
input, textarea, select { direction: rtl; text-align: right; }
input[type="tel"], input[type="email"], input[type="url"] { direction: ltr; text-align: left; }

/* Logo */
.nav-logo img { max-height: 42px; }
@media (max-width: 768px) {
    .nav-logo img { max-height: 32px; }
}

/* Nav mobile drawer toggle position — in RTL, hamburger should stay on right (easy thumb reach) */
.nav-drawer-btn {
    margin-left: auto;
    margin-right: 0;
}

/* Scroll progress bar — left-to-right fill even in RTL */
.scroll-progress { left: 0; right: auto; transform-origin: left; }

/* Strong emphasis: keep Arabic natural spacing */
strong, b { font-weight: 700; }

/* Answer capsule RTL */
.answer-capsule { direction: rtl; text-align: right; }

/* Detail grid RTL */
.detail-item, .detail-item h3, .detail-item p { direction: rtl; text-align: right; }

/* CTA box RTL */
.cta-box { direction: rtl; text-align: right; }

/* Tel/email links LTR within RTL paragraphs */
a[href^="tel:"]:not(.fab-item), a[href^="mailto:"]:not(.fab-item) {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}