/* V241 — Arabic RTL/LTR mixed-direction correction. Principle: Arabic copy is RTL; page/UI structure and technical tokens stay LTR. */ /* Keep semantic , but do not mirror the entire application shell. */ html[lang="ar"] body.lang-ar{ direction:ltr!important; font-family:var(--font-ar,"Noto Sans Arabic",Arial,sans-serif)!important; } /* Arabic prose remains RTL. `plaintext` lets embedded isolated LTR tokens coexist safely. */ html[lang="ar"] body.lang-ar :where( h1,h2,h3,h4,h5,h6,p,li,dt,dd,legend,label,textarea, .eyebrow,.native-workflow-label,.clinic-note,.clinic-creator-note, .clinic-creator-title,.clinic-catalog-copy,.clinic-support-context-copy, .footer-saas-heading,.legal-copy,.rtl-copy,.rtl-ui-label ){ direction:rtl; unicode-bidi:plaintext; } /* Isolate product names, acronyms, version strings, numbers and other LTR technical tokens. */ html[lang="ar"] .tech-ltr, html[lang="ar"] bdi.tech-ltr, html[lang="ar"] [dir="ltr"].tech-ltr-block{ direction:ltr!important; unicode-bidi:isolate!important; display:inline-block; text-align:left; font-family:Inter,Arial,"Helvetica Neue",sans-serif; letter-spacing:normal; } /* Header: same physical layout as the other languages. */ html[lang="ar"] header.nav > .wrap.navin, html[lang="ar"] header.nav .wrap.navin, html[lang="ar"] .subpage-nav > .wrap.navin, html[lang="ar"] .subpage-nav .wrap.navin, html[lang="ar"] .clinic-navin{ direction:ltr!important; } html[lang="ar"] header.nav .brand, html[lang="ar"] .subpage-nav .brand, html[lang="ar"] .clinic-brand{ direction:ltr!important; unicode-bidi:isolate!important; } html[lang="ar"] header.nav .right, html[lang="ar"] .subpage-nav .nav-actions, html[lang="ar"] .clinic-header-right{ direction:ltr!important; } html[lang="ar"] header.nav .langbtn, html[lang="ar"] .subpage-nav .lang-switch summary, html[lang="ar"] .clinic-page .langbtn{ direction:ltr!important; unicode-bidi:isolate!important; text-align:left!important; } html[lang="ar"] .lang-current{ direction:rtl!important; unicode-bidi:isolate!important; text-align:right!important; } html[lang="ar"] header.nav .langmenu, html[lang="ar"] .subpage-nav .lang-switch .lang-menu, html[lang="ar"] .clinic-page .langbox .langmenu{ direction:ltr!important; right:0!important; left:auto!important; inset-inline-start:auto!important; inset-inline-end:0!important; } html[lang="ar"] :is(.langmenu,.lang-menu) a{ direction:ltr!important; unicode-bidi:isolate!important; text-align:left!important; } html[lang="ar"] :is(.langmenu,.lang-menu) a[lang="ar"]{ direction:rtl!important; text-align:right!important; } html[lang="ar"] .back-link{ direction:ltr!important; unicode-bidi:isolate!important; } html[lang="ar"] .back-link > span{ direction:rtl!important; unicode-bidi:isolate!important; } /* Hero: Arabic sentence direction, fixed authored line order, isolated OBS/product names. */ html[lang="ar"] .hero-experience .hero-copy-center, html[lang="ar"] .hero-experience .hero-copy-center h1, html[lang="ar"] .hero-experience .hero-title-line, html[lang="ar"] .product-head, html[lang="ar"] .jp-conversion-head, html[lang="ar"] .core-tech-section-head, html[lang="ar"] .core-tech-ending, html[lang="ar"] .pricing .head, html[lang="ar"] #faq .head, html[lang="ar"] .page-hero{ direction:rtl!important; } /* Workflow is a process diagram, not Arabic prose: keep camera → app → OBS order LTR. */ html[lang="ar"] .hero-experience .native-workflow, html[lang="ar"] .hero-experience .native-workflow-row, html[lang="ar"] .hero-experience .native-workflow-chain{ direction:ltr!important; } html[lang="ar"] .hero-experience .native-workflow-label, html[lang="ar"] .hero-experience .native-workflow-chain > span{ direction:rtl!important; unicode-bidi:plaintext!important; text-align:center!important; } html[lang="ar"] .hero-experience .native-workflow-chain > b{ direction:ltr!important; unicode-bidi:isolate!important; transform:none!important; } /* CTA arrows remain UI-directional and are never bidi-mirrored. */ html[lang="ar"] .jp-doctor-cta a{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:.42em!important; direction:ltr!important; unicode-bidi:isolate!important; } html[lang="ar"] .jp-doctor-cta .rtl-ui-label{ direction:rtl!important; unicode-bidi:isolate!important; } html[lang="ar"] .jp-doctor-cta [aria-hidden="true"]{ direction:ltr!important; unicode-bidi:isolate!important; transform:none!important; } /* SkiinOBS demo: keep application chrome, sliders and value columns LTR; Arabic labels remain RTL. */ html[lang="ar"] .hero-experience .skiin-preview, html[lang="ar"] .hero-experience .skiin-preview :where( .skdemo-preview-body,.skdemo-workspace-tools,.skdemo-camera-control,.skdemo-preset-control, .skdemo-preset-actions,.skdemo-tabs,.skdemo-tab-content,.skdemo-slider-row, .skdemo-slider-track-wrap,.skdemo-slider-track,.skdemo-slider-fill,.skdemo-slider-thumb, .skdemo-slider-value,.skdemo-toggle-row,.skdemo-switch,.skdemo-switch-track,.skdemo-more-grid ){ direction:ltr!important; } html[lang="ar"] .hero-experience .skiin-preview :where( .skdemo-tool-label,.skdemo-preset-chip,.skdemo-tab-hint,.skdemo-tab, .skdemo-slider-label,.skdemo-switch-state,.skdemo-more-item > span:last-child ){ direction:rtl!important; unicode-bidi:plaintext!important; } html[lang="ar"] .hero-experience .skiin-preview .skdemo-slider-label{ text-align:right!important; } html[lang="ar"] .hero-experience .skiin-preview .skdemo-tab-hint{ text-align:right!important; } html[lang="ar"] .hero-experience .skiin-preview .skdemo-slider-value{ direction:ltr!important; unicode-bidi:isolate!important; text-align:center!important; font-family:Inter,Arial,sans-serif!important; } html[lang="ar"] .hero-experience .skiin-preview select{ direction:rtl!important; text-align:right!important; } /* Pricing: monetary notation stays LTR; Arabic billing period and copy stay RTL. */ html[lang="ar"] .hero-experience .compact-pricecard, html[lang="ar"] .hero-experience .pricing-v211-includes, html[lang="ar"] .hero-experience .pricing-v211-includes > li{ direction:ltr!important; } html[lang="ar"] .hero-experience .compact-pricecard .price{ direction:ltr!important; unicode-bidi:isolate!important; text-align:center!important; } html[lang="ar"] .hero-experience .compact-pricecard .price small{ direction:rtl!important; unicode-bidi:isolate!important; display:inline-block!important; } html[lang="ar"] .hero-experience .pricing-v211-includes > li > strong{ direction:rtl!important; unicode-bidi:plaintext!important; text-align:right!important; } html[lang="ar"] .hero-experience .trial-payment-note{ direction:rtl!important; unicode-bidi:plaintext!important; text-align:center!important; } /* FAQ: keep the +/− control on the same physical side as the rest of the site; Arabic question text RTL. */ html[lang="ar"] .hero-experience #faq .faq summary{ direction:ltr!important; unicode-bidi:isolate!important; } html[lang="ar"] .hero-experience #faq .faq summary > .rtl-ui-label{ flex:1 1 auto!important; min-width:0!important; direction:rtl!important; unicode-bidi:plaintext!important; text-align:right!important; } html[lang="ar"] .hero-experience #faq .faq summary:after{ direction:ltr!important; unicode-bidi:isolate!important; margin-left:auto!important; margin-right:0!important; } /* Core technology cards: retain physical card order while Arabic copy reads RTL. */ html[lang="ar"] .core-tech-pillars, html[lang="ar"] .core-tech-tags{ direction:ltr!important; } html[lang="ar"] .core-tech-pillar, html[lang="ar"] .core-tech-pillar :where(h3,p,strong), html[lang="ar"] .core-tech-tags > span{ direction:rtl!important; unicode-bidi:plaintext!important; } /* Footer: do not mirror the site-wide shell. Brand remains left, columns keep common order. */ html[lang="ar"] .footer.footer-saas, html[lang="ar"] .footer-saas-top, html[lang="ar"] .footer-saas-bottom{ direction:ltr!important; } html[lang="ar"] .footer-saas-brand, html[lang="ar"] .footer.footer-saas .footbrand{ direction:ltr!important; unicode-bidi:isolate!important; text-align:left!important; } html[lang="ar"] .footer-saas-column{ direction:rtl!important; text-align:right!important; align-items:flex-start!important; } html[lang="ar"] .footer-saas-column :where(.footer-saas-heading,a){ direction:rtl!important; unicode-bidi:plaintext!important; text-align:right!important; width:100%; } html[lang="ar"] .footer.footer-saas .legal-copy{ direction:rtl!important; unicode-bidi:plaintext!important; text-align:left!important; } /* Generic legal/contact/guide pages: LTR shell/grid, RTL content. */ html[lang="ar"] :where(.policy-layout,.contact-section .narrow,.contact-card,.review-card,.guide-shell){ direction:ltr!important; } html[lang="ar"] :where(.policy-card,.policy-intro,.policy-section,.contact-card,.review-card) :where(h1,h2,h3,p,li,dt,dd,label,legend){ direction:rtl!important; unicode-bidi:plaintext!important; text-align:right; } html[lang="ar"] .contact-card :where(input[type="text"],textarea,select){ direction:rtl!important; text-align:right!important; } html[lang="ar"] .contact-card :where(input[type="email"],input[type="tel"]){ direction:ltr!important; unicode-bidi:isolate!important; text-align:left!important; } html[lang="ar"] .contact-card .form-grid, html[lang="ar"] .contact-card .phone-grid, html[lang="ar"] .contact-card .choice-grid, html[lang="ar"] .review-actions{ direction:ltr!important; } html[lang="ar"] .contact-card .choice, html[lang="ar"] .contact-card .privacy-check{ direction:ltr!important; } html[lang="ar"] .contact-card .choice > span, html[lang="ar"] .contact-card .privacy-check > span{ direction:rtl!important; unicode-bidi:plaintext!important; text-align:right!important; } /* OBS Doctor: keep card/grid and controls physically consistent, but Arabic copy RTL. */ html[lang="ar"] body.clinic-page, html[lang="ar"] .clinic-page :where(.clinic-wrap,.clinic-map,.clinic-support-compact,.clinic-support-actions,.clinic-tags){ direction:ltr!important; } html[lang="ar"] .clinic-page :where( .clinic-head,.clinic-support-context,.clinic-category,.clinic-category-top, .clinic-title-group,.clinic-support-trust,.clinic-creator-note ){ direction:rtl!important; } html[lang="ar"] .clinic-page .clinic-head.left{ text-align:right!important; margin-right:0!important; margin-left:auto!important; } html[lang="ar"] .clinic-page .clinic-category :where(h2,h3,p), html[lang="ar"] .clinic-page .clinic-support-context :where(h1,h2,h3,p), html[lang="ar"] .clinic-page .clinic-head :where(h1,h2,h3,p){ direction:rtl!important; unicode-bidi:plaintext!important; text-align:right; } html[lang="ar"] .clinic-page .clinic-tags > span{ unicode-bidi:isolate!important; } html[lang="ar"] .clinic-page .clinic-tags > span.tech-ltr-block{ direction:ltr!important; text-align:left!important; font-family:Inter,Arial,sans-serif; } html[lang="ar"] .clinic-page .clinic-category-count.tech-ltr-block, html[lang="ar"] .clinic-page .clinic-btn.tech-ltr-block{ direction:ltr!important; unicode-bidi:isolate!important; } /* Modal chrome is LTR; Arabic message text stays RTL. */ html[lang="ar"] .site-modal .modal-dialog{ direction:ltr!important; } html[lang="ar"] .site-modal .modal-dialog :where(h2,p,.btn){ direction:rtl!important; unicode-bidi:plaintext!important; } html[lang="ar"] .site-modal .modal-close-x, html[lang="ar"] .site-modal .modal-icon{ direction:ltr!important; } @media(max-width:640px){ html[lang="ar"] .footer-saas-column{ align-items:stretch!important; } html[lang="ar"] .footer-saas-column :where(.footer-saas-heading,a){ text-align:right!important; } } /* Hidden choice controls must not create off-canvas boxes in the LTR shell. */ html[lang="ar"] .contact-card .choice input[type="radio"]{ inset:0!important; width:100%!important; height:100%!important; margin:0!important; }