/* Sharif Group Multilingual & RTL Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

/* Anti-FOUC (Zero English Flicker) state for non-English page transitions */
html.i18n-pending [data-i18n],
html.i18n-pending [data-i18n-html] {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Font Family mappings for Arabic (preserving Font Awesome icons) */
html[lang="ar"],
html[lang="ar"] body,
body.lang-ar,
body.lang-ar *:not(i):not([class*="fa-"]):not([class*="fa"]) {
    font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Font Family mappings for Persian (preserving Font Awesome icons) */
html[lang="fa"],
html[lang="fa"] body,
body.lang-fa,
body.lang-fa *:not(i):not([class*="fa-"]):not([class*="fa"]) {
    font-family: 'Vazirmatn', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Font Family mappings for Chinese (preserving Font Awesome icons) */
html[lang="zh"],
html[lang="zh-Hans"],
html[lang="zh"] body,
body.lang-zh,
body.lang-zh *:not(i):not([class*="fa-"]):not([class*="fa"]) {
    font-family: 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* RTL Layout Adjustments */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .text-left {
    text-align: right !important;
}

/* Swap timeline and process steps alignment in RTL without breaking explicit text-right */
[dir="rtl"] .timeline-step .text-right,
[dir="rtl"] .process-step .text-right,
[dir="rtl"] div[class*="timeline"] .text-right {
    text-align: left !important;
}

/* Flip directional icons in RTL */
[dir="rtl"] .rtl-flip,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-chevron-right {
    transform: scaleX(-1);
}

[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-left {
    transform: scaleX(-1);
}

/* Numeric & Counter Display in RTL */
[dir="rtl"] .counter-container,
[dir="rtl"] .counter-val,
[dir="rtl"] .counter-value,
[dir="rtl"] .counter-element,
[dir="rtl"] .stat-counter-wrap,
[dir="rtl"] h3>span[dir="ltr"] {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[dir="rtl"] .counter-suffix,
[dir="rtl"] .counter-plus {
    display: inline-block;
    unicode-bidi: isolate;
}

[dir="rtl"] a[href^="tel:"],
[dir="rtl"] [data-no-localize] {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-block !important;
}

/* Footer Contact Details Spacing in RTL */
[dir="rtl"] footer .space-y-3 p i,
[dir="rtl"] .footer .space-y-3 p i {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

/* ==========================================================================
   RTL SPACING & HORIZONTAL REVERSAL (Fixes SVG & Text Overlaps Across Entire Site)
   ========================================================================== */

/* 1. Reset and invert Tailwind space-x-* in RTL mode so elements never overlap */
html[dir="rtl"] [class*="space-x-"]> :not([hidden])~ :not([hidden]),
body[dir="rtl"] [class*="space-x-"]> :not([hidden])~ :not([hidden]),
[dir="rtl"] [class*="space-x-"]> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 1 !important;
}

[dir="rtl"] .space-x-1> :not([hidden])~ :not([hidden]) {
    margin-right: 0.25rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-1\.5> :not([hidden])~ :not([hidden]) {
    margin-right: 0.375rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-2> :not([hidden])~ :not([hidden]) {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-2\.5> :not([hidden])~ :not([hidden]) {
    margin-right: 0.625rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-3> :not([hidden])~ :not([hidden]) {
    margin-right: 0.75rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-3\.5> :not([hidden])~ :not([hidden]) {
    margin-right: 0.875rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-4> :not([hidden])~ :not([hidden]) {
    margin-right: 1rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-5> :not([hidden])~ :not([hidden]) {
    margin-right: 1.25rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-6> :not([hidden])~ :not([hidden]) {
    margin-right: 1.5rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .space-x-8> :not([hidden])~ :not([hidden]) {
    margin-right: 2rem !important;
    margin-left: 0 !important;
}

/* 2. Site-wide Footer Brand Mark & Column Alignment in RTL */
html[dir="rtl"] footer .lg\:col-span-1,
html[dir="rtl"] .footer .lg\:col-span-1,
[dir="rtl"] footer .lg\:col-span-1,
[dir="rtl"] .footer .lg\:col-span-1,
html[dir="rtl"] footer div:has(> a:has(img[src*="Group-427321463"])),
[dir="rtl"] footer div:has(> a:has(img[src*="Group-427321463"])),
html[dir="rtl"] footer div:has(> a:has(img[alt*="Sharif Group Logo"])),
[dir="rtl"] footer div:has(> a:has(img[alt*="Sharif Group Logo"])) {
    align-items: flex-start !important;
    text-align: right !important;
}

html[dir="rtl"] footer a.group,
html[dir="rtl"] .footer a.group,
html[dir="rtl"] footer a[href*="hero"],
html[dir="rtl"] footer a:has(img[src*="Group-427321463"]),
html[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"]),
[dir="rtl"] footer a.group,
[dir="rtl"] .footer a.group,
[dir="rtl"] footer a[href*="hero"],
[dir="rtl"] footer a:has(img[src*="Group-427321463"]),
[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"]) {
    display: inline-flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: flex-start !important;
}

html[dir="rtl"] footer a.group>*,
html[dir="rtl"] .footer a.group>*,
html[dir="rtl"] footer a[href*="hero"]>*,
html[dir="rtl"] footer a:has(img[src*="Group-427321463"])>*,
html[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"])>*,
[dir="rtl"] footer a.group>*,
[dir="rtl"] .footer a.group>*,
[dir="rtl"] footer a[href*="hero"]>*,
[dir="rtl"] footer a:has(img[src*="Group-427321463"])>*,
[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"])>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html[dir="rtl"] footer a.group .translate-y-1\.5,
html[dir="rtl"] .footer a.group .translate-y-1\.5,
html[dir="rtl"] footer a[href*="hero"] .translate-y-1\.5,
html[dir="rtl"] footer a:has(img[src*="Group-427321463"]) .translate-y-1\.5,
html[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"]) .translate-y-1\.5,
[dir="rtl"] footer a.group .translate-y-1\.5,
[dir="rtl"] .footer a.group .translate-y-1\.5,
[dir="rtl"] footer a[href*="hero"] .translate-y-1\.5,
[dir="rtl"] footer a:has(img[src*="Group-427321463"]) .translate-y-1\.5,
[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"]) .translate-y-1\.5 {
    display: inline-flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html[dir="rtl"] footer a.group .translate-y-1\.5>*,
html[dir="rtl"] .footer a.group .translate-y-1\.5>*,
html[dir="rtl"] footer a[href*="hero"] .translate-y-1\.5>*,
html[dir="rtl"] footer a:has(img[src*="Group-427321463"]) .translate-y-1\.5>*,
html[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"]) .translate-y-1\.5>*,
[dir="rtl"] footer a.group .translate-y-1\.5>*,
[dir="rtl"] .footer a.group .translate-y-1\.5>*,
[dir="rtl"] footer a[href*="hero"] .translate-y-1\.5>*,
[dir="rtl"] footer a:has(img[src*="Group-427321463"]) .translate-y-1\.5>*,
[dir="rtl"] footer a:has(img[alt*="Sharif Group Logo"]) .translate-y-1\.5>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html[dir="rtl"] footer a.group span,
html[dir="rtl"] .footer a.group span,
[dir="rtl"] footer a.group span,
[dir="rtl"] .footer a.group span {
    direction: ltr !important;
    text-align: right !important;
    display: block !important;
}

html[dir="rtl"] footer img[alt*="Investment Migration Council"],
html[dir="rtl"] .footer img[alt*="Investment Migration Council"],
[dir="rtl"] footer img[alt*="Investment Migration Council"],
[dir="rtl"] .footer img[alt*="Investment Migration Council"] {
    margin-left: auto !important;
    margin-right: 0 !important;
    display: block !important;
}

/* 3. Site-wide Header Logo & Menu Spacing in RTL */
[dir="rtl"] header .min-w-0,
[dir="rtl"] header .flex.items-center:has(#nav-logo) {
    gap: 1.25rem !important;
}

[dir="rtl"] header .min-w-0>*,
[dir="rtl"] header .flex.items-center:has(#nav-logo)>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

[dir="rtl"] header nav.hidden.xl\:flex {
    gap: 1rem !important;
}

[dir="rtl"] header nav.hidden.xl\:flex>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 4. Flip mr-* and ml-* margins in RTL mode across the site */
[dir="rtl"] .mr-1 {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

[dir="rtl"] .mr-1\.5 {
    margin-right: 0 !important;
    margin-left: 0.375rem !important;
}

[dir="rtl"] .mr-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

[dir="rtl"] .mr-2\.5 {
    margin-right: 0 !important;
    margin-left: 0.625rem !important;
}

[dir="rtl"] .mr-3 {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

[dir="rtl"] .mr-3\.5 {
    margin-right: 0 !important;
    margin-left: 0.875rem !important;
}

[dir="rtl"] .mr-4 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

[dir="rtl"] .mr-5 {
    margin-right: 0 !important;
    margin-left: 1.25rem !important;
}

[dir="rtl"] .mr-6 {
    margin-right: 0 !important;
    margin-left: 1.5rem !important;
}

[dir="rtl"] .mr-8 {
    margin-right: 0 !important;
    margin-left: 2rem !important;
}

[dir="rtl"] .ml-1 {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

[dir="rtl"] .ml-1\.5 {
    margin-left: 0 !important;
    margin-right: 0.375rem !important;
}

[dir="rtl"] .ml-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

[dir="rtl"] .ml-2\.5 {
    margin-left: 0 !important;
    margin-right: 0.625rem !important;
}

[dir="rtl"] .ml-3 {
    margin-left: 0 !important;
    margin-right: 0.75rem !important;
}

[dir="rtl"] .ml-3\.5 {
    margin-left: 0 !important;
    margin-right: 0.875rem !important;
}

[dir="rtl"] .ml-4 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

[dir="rtl"] .ml-5 {
    margin-left: 0 !important;
    margin-right: 1.25rem !important;
}

[dir="rtl"] .ml-6 {
    margin-left: 0 !important;
    margin-right: 1.5rem !important;
}

[dir="rtl"] .ml-8 {
    margin-left: 0 !important;
    margin-right: 2rem !important;
}

/* 5. Feature Boxes (Icon Pill + Text) across all pages */
[dir="rtl"] .about-feature-box,
[dir="rtl"] .feature-box,
[dir="rtl"] .feature-card {
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
}

[dir="rtl"] .about-feature-box>*,
[dir="rtl"] .feature-box>*,
[dir="rtl"] .feature-card>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Switcher button & dropdown luxury styling */
.lang-switcher-wrapper {
    position: relative;
    display: inline-block;
}

#lang-dropdown-menu {
    min-width: 170px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#lang-dropdown-menu.hidden {
    display: none;
}

/* Ensure desktop language dropdown opens inward in RTL mode without overflowing off-screen */
[dir="rtl"] #lang-dropdown-menu {
    right: auto !important;
    left: 0 !important;
}

[dir="rtl"] #lang-switcher-btn {
    gap: 6px;
}

[dir="rtl"] #lang-switcher-btn>* {
    margin: 0 !important;
}

.lang-option {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #262626;
    transition: all 0.2s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    box-sizing: border-box;
}

.lang-option:hover {
    background-color: rgba(197, 168, 128, 0.12);
    color: #C5A880;
}

.lang-option.active-lang {
    background-color: rgba(197, 168, 128, 0.18);
    color: #A3845B;
    font-weight: 700;
}

/* Mobile Language Switcher styles */
.mobile-lang-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 4px;
    background: #f5f5f5;
    border-radius: 9999px;
    border: 1px solid #e5e5e5;
}

.mobile-lang-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9999px;
    transition: all 0.2s ease;
    text-align: center;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #555;
}

.mobile-lang-option.active-lang {
    background: #C5A880 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(197, 168, 128, 0.4);
}

/* ==========================================================================
   ARABIC & PERSIAN TYPOGRAPHY & HERO / ABOUT FOUNDER ENHANCEMENTS
   ========================================================================== */

/* 1. Prevent Letter-Spacing (Tracking) from breaking Arabic/Persian cursive script */
html[lang="ar"] [class*="tracking-"],
html[lang="fa"] [class*="tracking-"],
body.lang-ar [class*="tracking-"],
body.lang-fa [class*="tracking-"],
[dir="rtl"] [class*="tracking-"],
[dir="rtl"] .tracking-widest,
[dir="rtl"] .tracking-wider,
[dir="rtl"] .tracking-wide,
[dir="rtl"] .tracking-tight,
[dir="rtl"] .tracking-tighter {
    letter-spacing: normal !important;
}

/* 2. Prevent artificial oblique slanting (italic) in Arabic and Persian */
html[lang="ar"] .italic,
html[lang="fa"] .italic,
body.lang-ar .italic,
body.lang-fa .italic,
[dir="rtl"] .italic,
[dir="rtl"] em,
[dir="rtl"] i:not([class*="fa-"]):not([class*="fa"]) {
    font-style: normal !important;
}

/* 3. Hero Glow Heading: Native Arabic & Persian font override & descender protection (All Pages & Programs) */
html[lang="ar"] .contact-hero-glow,
html[lang="ar"] .dominica-hero-glow,
html[lang="ar"] .stlucia-hero-glow,
html[lang="ar"] [class*="-hero-glow"],
body.lang-ar .contact-hero-glow,
body.lang-ar .dominica-hero-glow,
body.lang-ar .stlucia-hero-glow,
body.lang-ar [class*="-hero-glow"],
html[dir="rtl"] .contact-hero-glow,
html[dir="rtl"] .dominica-hero-glow,
html[dir="rtl"] .stlucia-hero-glow,
html[dir="rtl"] [class*="-hero-glow"],
[dir="rtl"] .contact-hero-glow,
[dir="rtl"] .dominica-hero-glow,
[dir="rtl"] .stlucia-hero-glow,
[dir="rtl"] [class*="-hero-glow"] {
    font-family: 'Cairo', system-ui, -apple-system, sans-serif !important;
    letter-spacing: normal !important;
    line-height: 1.45 !important;
    padding-bottom: 0.85rem !important;
    display: inline-block !important;
}

html[lang="fa"] .contact-hero-glow,
html[lang="fa"] .dominica-hero-glow,
html[lang="fa"] .stlucia-hero-glow,
html[lang="fa"] [class*="-hero-glow"],
body.lang-fa .contact-hero-glow,
body.lang-fa .dominica-hero-glow,
body.lang-fa .stlucia-hero-glow,
body.lang-fa [class*="-hero-glow"],
html[lang="fa"] [dir="rtl"] [class*="-hero-glow"],
body.lang-fa [dir="rtl"] [class*="-hero-glow"] {
    font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif !important;
    letter-spacing: normal !important;
    line-height: 1.45 !important;
    padding-bottom: 0.85rem !important;
    display: inline-block !important;
}

html[lang="zh"] .contact-hero-glow,
html[lang="zh"] .dominica-hero-glow,
html[lang="zh"] .stlucia-hero-glow,
html[lang="zh"] [class*="-hero-glow"],
body.lang-zh .contact-hero-glow,
body.lang-zh .dominica-hero-glow,
body.lang-zh .stlucia-hero-glow,
body.lang-zh [class*="-hero-glow"] {
    font-family: 'Noto Sans SC', system-ui, sans-serif !important;
    letter-spacing: normal !important;
}

/* Hero Stack & Subtitle Separation: Prevent low Arabic dots (e.g. yaa in 'وبرينسيبي') from overlapping text */
[dir="rtl"] h1.flex.flex-col,
html[dir="rtl"] h1.flex.flex-col,
body.lang-ar h1.flex.flex-col,
body.lang-fa h1.flex.flex-col {
    gap: 1.75rem !important;
}

[dir="rtl"] h1>span:nth-child(2),
[dir="rtl"] h1>span[data-i18n*="heroSubtitle"],
[dir="rtl"] h1>span[data-i18n*="Subtitle"],
html[lang="ar"] h1>span:nth-child(2),
body.lang-ar h1>span:nth-child(2) {
    font-family: 'Cairo', system-ui, sans-serif !important;
    letter-spacing: normal !important;
    margin-top: 0.75rem !important;
    line-height: 1.6 !important;
    display: block !important;
}

html[lang="fa"] h1>span:nth-child(2),
body.lang-fa h1>span:nth-child(2) {
    font-family: 'Vazirmatn', system-ui, sans-serif !important;
    letter-spacing: normal !important;
    margin-top: 0.75rem !important;
    line-height: 1.6 !important;
    display: block !important;
}

/* 4. Headings Line-height in RTL to prevent diacritic dots (e.g. yaa in 'علي') from overlapping text below */
html[lang="ar"] h1,
html[lang="fa"] h1,
body.lang-ar h1,
body.lang-fa h1,
[dir="rtl"] h1 {
    line-height: 1.35 !important;
    margin-bottom: 1rem !important;
}

html[lang="ar"] h2,
html[lang="fa"] h2,
body.lang-ar h2,
body.lang-fa h2,
[dir="rtl"] h2 {
    line-height: 1.35 !important;
}

html[lang="ar"] h3,
html[lang="fa"] h3,
body.lang-ar h3,
body.lang-fa h3,
[dir="rtl"] h3 {
    line-height: 1.4 !important;
}

/* 5. Founder & About Page Hero Subtitle & Description in RTL */
html[lang="ar"] .founder-hero-subtitle,
html[lang="fa"] .founder-hero-subtitle,
body.lang-ar .founder-hero-subtitle,
body.lang-fa .founder-hero-subtitle,
[dir="rtl"] .founder-hero-subtitle,
html[lang="ar"] .about-hero-subtitle,
html[lang="fa"] .about-hero-subtitle,
body.lang-ar .about-hero-subtitle,
body.lang-fa .about-hero-subtitle,
[dir="rtl"] .about-hero-subtitle {
    font-family: 'Cairo', system-ui, sans-serif !important;
    font-style: normal !important;
    line-height: 1.9 !important;
    margin-top: 0.85rem !important;
    letter-spacing: normal !important;
}

html[lang="fa"] .founder-hero-subtitle,
body.lang-fa .founder-hero-subtitle,
html[lang="fa"] .about-hero-subtitle,
body.lang-fa .about-hero-subtitle {
    font-family: 'Vazirmatn', system-ui, sans-serif !important;
}

html[lang="ar"] .founder-hero-desc,
html[lang="fa"] .founder-hero-desc,
body.lang-ar .founder-hero-desc,
body.lang-fa .founder-hero-desc,
[dir="rtl"] .founder-hero-desc {
    font-weight: 400 !important;
    line-height: 2 !important;
    margin-top: 0.75rem !important;
    max-width: 48rem !important;
    letter-spacing: normal !important;
}

/* 6. Executive Overview & Feature Boxes in RTL */
[dir="rtl"] #sec-founder-overview .text-left,
[dir="rtl"] #sec-about-overview .text-left,
[dir="rtl"] #sec-leadership-story .text-left,
[dir="rtl"] #sec-operational-scope .text-left,
[dir="rtl"] #sec-rera-broker .text-left,
[dir="rtl"] #sec-global-benchmarks .text-left,
[dir="rtl"] #sec-imc-certification .text-left {
    text-align: right !important;
}

[dir="rtl"] .about-feature-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.25rem !important;
    text-align: right !important;
}

[dir="rtl"] .about-feature-box .space-y-1,
[dir="rtl"] .about-feature-box p,
[dir="rtl"] .about-feature-box span {
    text-align: right !important;
    line-height: 1.6 !important;
}

[dir="rtl"] .about-feature-box .feature-icon-pill {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

/* 7. Story Cards & Accordion Boxes in RTL */
[dir="rtl"] #sec-leadership-story .flex.items-center.justify-between {
    flex-direction: row !important;
}

[dir="rtl"] .founder-service-item .service-details .text-left {
    text-align: right !important;
}

/* 8. Badge alignment and icon gap in RTL */
[dir="rtl"] .inline-flex.items-center.gap-2,
[dir="rtl"] .inline-flex.items-center.gap-3 {
    direction: rtl !important;
}

/* 9. Marquee Track RTL Continuous Loop Engine:
   Force physical LTR coordinates so infinite scroll marquees never empty out or stop in RTL */
[dir="rtl"] .marquee-container,
[dir="rtl"] .marquee-track,
[dir="rtl"] .marquee-group,
html[dir="rtl"] .marquee-container,
html[dir="rtl"] .marquee-track,
html[dir="rtl"] .marquee-group,
body.lang-ar .marquee-container,
body.lang-fa .marquee-container,
body.lang-ar .marquee-track,
body.lang-fa .marquee-track {
    direction: ltr !important;
}

/* 10. Program Shortcut Bar & Scrollbar Reset across all pages */
.scrollbar-none::-webkit-scrollbar,
nav.scrollbar-none::-webkit-scrollbar,
[class*="scrollbar-none"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.scrollbar-none,
nav.scrollbar-none,
[class*="scrollbar-none"] {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* RTL Program Shortcut Tabs Alignment & Overflow Fix (Nauru, Sao Tome & All Program Pages) */
[dir="rtl"] nav.scrollbar-none,
html[dir="rtl"] nav.scrollbar-none,
[dir="rtl"] nav[class*="scrollbar-none"],
html[dir="rtl"] nav[class*="scrollbar-none"],
body.lang-ar nav.scrollbar-none,
body.lang-fa nav.scrollbar-none {
    justify-content: flex-start !important;
    gap: 0.85rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    -webkit-overflow-scrolling: touch;
}

[dir="rtl"] nav.scrollbar-none>*,
html[dir="rtl"] nav.scrollbar-none>*,
[dir="rtl"] nav[class*="scrollbar-none"]>*,
html[dir="rtl"] nav[class*="scrollbar-none"]>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

[dir="rtl"] nav.scrollbar-none button span,
html[dir="rtl"] nav.scrollbar-none button span,
[dir="rtl"] nav[class*="scrollbar-none"] button span,
html[dir="rtl"] nav[class*="scrollbar-none"] button span {
    font-size: 8.5px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

@media (min-width: 1400px) {

    [dir="rtl"] nav.scrollbar-none,
    html[dir="rtl"] nav.scrollbar-none,
    [dir="rtl"] nav[class*="scrollbar-none"],
    html[dir="rtl"] nav[class*="scrollbar-none"] {
        justify-content: center !important;
    }
}

/* ==========================================================================
   11. Force Standard LTR Phone Number & Country Code Field across all RTL pages (Arabic & Farsi)
   ========================================================================== */
[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="tel"],
body.lang-ar input[type="tel"],
body.lang-fa input[type="tel"] {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: isolate !important;
}

[dir="rtl"] .custom-select-wrapper,
html[dir="rtl"] .custom-select-wrapper,
body.lang-ar .custom-select-wrapper,
body.lang-fa .custom-select-wrapper,
[dir="rtl"] .custom-select-wrapper button,
[dir="rtl"] .selected-country-span {
    direction: ltr !important;
    text-align: left !important;
}

[dir="rtl"] .selected-country-span,
html[dir="rtl"] .selected-country-span,
body.lang-ar .selected-country-span,
body.lang-fa .selected-country-span {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-flex !important;
    align-items: center !important;
    text-align: left !important;
}

[dir="rtl"] div.flex:has(> input[type="tel"]),
html[dir="rtl"] div.flex:has(> input[type="tel"]),
[dir="rtl"] div.flex:has(.custom-select-wrapper),
html[dir="rtl"] div.flex:has(.custom-select-wrapper),
[dir="rtl"] div.flex[dir="ltr"],
html[dir="rtl"] div.flex[dir="ltr"] {
    direction: ltr !important;
}

[dir="rtl"] .custom-select-wrapper button {
    border-top-left-radius: 0.75rem !important;
    border-bottom-left-radius: 0.75rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right-width: 1px !important;
}

[dir="rtl"] input[type="tel"] {
    border-top-right-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left-width: 0 !important;
}

/* ==========================================================================
   MEGA MENU RTL ADJUSTMENTS
   ========================================================================== */
html[dir="rtl"] .mega-dropdown h4,
body[dir="rtl"] .mega-dropdown h4,
[dir="rtl"] .mega-dropdown h4 {
    text-align: right !important;
}

html[dir="rtl"] .mega-dropdown .col-span-3.border-r,
body[dir="rtl"] .mega-dropdown .col-span-3.border-r,
[dir="rtl"] .mega-dropdown .col-span-3.border-r,
html[dir="rtl"] .mega-dropdown div[class*="border-r"],
body[dir="rtl"] .mega-dropdown div[class*="border-r"],
[dir="rtl"] .mega-dropdown div[class*="border-r"] {
    border-right: none !important;
    border-left: 1px solid #e5e5e5 !important;
    padding-right: 0 !important;
    padding-left: 1.5rem !important;
}

/* General responsive text alignment overrides for RTL */
html[dir="rtl"] .lg\:text-left,
html[dir="rtl"] .md\:text-left,
html[dir="rtl"] .sm\:text-left,
html[dir="rtl"] .xl\:text-left,
[dir="rtl"] .lg\:text-left,
[dir="rtl"] .md\:text-left,
[dir="rtl"] .sm\:text-left,
[dir="rtl"] .xl\:text-left {
    text-align: right !important;
}

/* ==========================================================================
   BLOG RTL STYLES (Persian & Arabic)
   ========================================================================== */
html[dir="rtl"] #blog-detail-view-container,
html[lang="fa"] #blog-detail-view-container,
html[lang="ar"] #blog-detail-view-container,
body.lang-fa #blog-detail-view-container,
body.lang-ar #blog-detail-view-container,
[dir="rtl"] #blog-detail-view-container {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #detail-title,
html[lang="fa"] #detail-title,
html[lang="ar"] #detail-title,
body.lang-fa #detail-title,
body.lang-ar #detail-title,
[dir="rtl"] #detail-title {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #blog-detail-view-container .space-y-4,
body.lang-fa #blog-detail-view-container .space-y-4,
body.lang-ar #blog-detail-view-container .space-y-4 {
    text-align: right !important;
}

html[dir="rtl"] #detail-category-badge,
body.lang-fa #detail-category-badge,
body.lang-ar #detail-category-badge {
    text-align: right !important;
}

html[dir="rtl"] #detail-breadcrumb-title,
body.lang-fa #detail-breadcrumb-title,
body.lang-ar #detail-breadcrumb-title {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] [data-i18n="blog.backToArticles"] i,
body.lang-fa [data-i18n="blog.backToArticles"] i,
body.lang-ar [data-i18n="blog.backToArticles"] i,
[dir="rtl"] [data-i18n="blog.backToArticles"] i {
    transform: scaleX(-1) !important;
}

/* Article Body Content & all inner elements in RTL */
html[dir="rtl"] #detail-content-body,
html[lang="fa"] #detail-content-body,
html[lang="ar"] #detail-content-body,
body.lang-fa #detail-content-body,
body.lang-ar #detail-content-body,
[dir="rtl"] #detail-content-body {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #detail-content-body *,
html[lang="fa"] #detail-content-body *,
html[lang="ar"] #detail-content-body *,
body.lang-fa #detail-content-body *,
body.lang-ar #detail-content-body *,
[dir="rtl"] #detail-content-body * {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #detail-content-body p,
body.lang-fa #detail-content-body p,
body.lang-ar #detail-content-body p,
[dir="rtl"] #detail-content-body p {
    direction: rtl !important;
    text-align: right !important;
    line-height: 1.9 !important;
}

html[dir="rtl"] #detail-content-body h1,
html[dir="rtl"] #detail-content-body h2,
html[dir="rtl"] #detail-content-body h3,
html[dir="rtl"] #detail-content-body h4,
body.lang-fa #detail-content-body h1,
body.lang-fa #detail-content-body h2,
body.lang-fa #detail-content-body h3,
body.lang-fa #detail-content-body h4,
body.lang-ar #detail-content-body h1,
body.lang-ar #detail-content-body h2,
body.lang-ar #detail-content-body h3,
body.lang-ar #detail-content-body h4,
[dir="rtl"] #detail-content-body h1,
[dir="rtl"] #detail-content-body h2,
[dir="rtl"] #detail-content-body h3,
[dir="rtl"] #detail-content-body h4 {
    direction: rtl !important;
    text-align: right !important;
    font-weight: 700 !important;
}

html[dir="rtl"] #detail-content-body ul,
html[dir="rtl"] #detail-content-body ol,
body.lang-fa #detail-content-body ul,
body.lang-fa #detail-content-body ol,
body.lang-ar #detail-content-body ul,
body.lang-ar #detail-content-body ol,
[dir="rtl"] #detail-content-body ul,
[dir="rtl"] #detail-content-body ol {
    direction: rtl !important;
    text-align: right !important;
    padding-right: 1.5rem !important;
    padding-left: 0 !important;
}

/* Detail FAQs Accordion */
html[dir="rtl"] #detail-faq-wrapper,
body.lang-fa #detail-faq-wrapper,
body.lang-ar #detail-faq-wrapper,
[dir="rtl"] #detail-faq-wrapper {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #detail-faq-wrapper .grid,
body.lang-fa #detail-faq-wrapper .grid,
body.lang-ar #detail-faq-wrapper .grid,
[dir="rtl"] #detail-faq-wrapper .grid {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #detail-faq-wrapper button,
body.lang-fa #detail-faq-wrapper button,
body.lang-ar #detail-faq-wrapper button,
[dir="rtl"] #detail-faq-wrapper button {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #detail-faq-wrapper p,
body.lang-fa #detail-faq-wrapper p,
body.lang-ar #detail-faq-wrapper p,
[dir="rtl"] #detail-faq-wrapper p {
    direction: rtl !important;
    text-align: right !important;
}

/* Blog Listing Page */
html[dir="rtl"] #blog-listing-main,
body.lang-fa #blog-listing-main,
body.lang-ar #blog-listing-main,
[dir="rtl"] #blog-listing-main {
    direction: rtl !important;
}

html[dir="rtl"] .blog-item,
body.lang-fa .blog-item,
body.lang-ar .blog-item,
[dir="rtl"] .blog-item {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .blog-item h4,
html[dir="rtl"] .blog-item p,
body.lang-fa .blog-item h4,
body.lang-fa .blog-item p,
body.lang-ar .blog-item h4,
body.lang-ar .blog-item p,
[dir="rtl"] .blog-item h4,
[dir="rtl"] .blog-item p {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .blog-item a[data-i18n="blog.readMore"],
body.lang-fa .blog-item a[data-i18n="blog.readMore"],
body.lang-ar .blog-item a[data-i18n="blog.readMore"],
[dir="rtl"] .blog-item a[data-i18n="blog.readMore"] {
    align-self: flex-start !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Detail Consultation Form in RTL */
html[dir="rtl"] #detail-consultation-section,
body.lang-fa #detail-consultation-section,
body.lang-ar #detail-consultation-section,
[dir="rtl"] #detail-consultation-section {
    direction: rtl !important;
}

html[dir="rtl"] #standalone-contact-form,
body.lang-fa #standalone-contact-form,
body.lang-ar #standalone-contact-form,
[dir="rtl"] #standalone-contact-form {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #standalone-contact-form label,
body.lang-fa #standalone-contact-form label,
body.lang-ar #standalone-contact-form label,
[dir="rtl"] #standalone-contact-form label {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] #standalone-contact-form input:not([type="tel"]),
html[dir="rtl"] #standalone-contact-form select,
html[dir="rtl"] #standalone-contact-form textarea,
body.lang-fa #standalone-contact-form input:not([type="tel"]),
body.lang-fa #standalone-contact-form select,
body.lang-fa #standalone-contact-form textarea,
body.lang-ar #standalone-contact-form input:not([type="tel"]),
body.lang-ar #standalone-contact-form select,
body.lang-ar #standalone-contact-form textarea,
[dir="rtl"] #standalone-contact-form input:not([type="tel"]),
[dir="rtl"] #standalone-contact-form select,
[dir="rtl"] #standalone-contact-form textarea {
    direction: rtl !important;
    text-align: right !important;
}

/* WhatsApp Widget - Fixed on right side regardless of active language or RTL direction */
.sg-wa-widget-container,
html[dir="rtl"] .sg-wa-widget-container,
html[lang="fa"] .sg-wa-widget-container,
html[lang="ar"] .sg-wa-widget-container,
body.lang-fa .sg-wa-widget-container,
body.lang-ar .sg-wa-widget-container,
[dir="rtl"] .sg-wa-widget-container {
    right: 24px !important;
    left: auto !important;
    right: max(24px, env(safe-area-inset-right, 24px)) !important;
    align-items: flex-end !important;
}

@media (max-width: 480px) {
    .sg-wa-widget-container,
    html[dir="rtl"] .sg-wa-widget-container,
    html[lang="fa"] .sg-wa-widget-container,
    html[lang="ar"] .sg-wa-widget-container,
    body.lang-fa .sg-wa-widget-container,
    body.lang-ar .sg-wa-widget-container,
    [dir="rtl"] .sg-wa-widget-container {
        right: 16px !important;
        left: auto !important;
        right: max(16px, env(safe-area-inset-right, 16px)) !important;
        align-items: flex-end !important;
    }
}

.sg-wa-modal,
html[dir="rtl"] .sg-wa-modal,
html[lang="fa"] .sg-wa-modal,
html[lang="ar"] .sg-wa-modal,
body.lang-fa .sg-wa-modal,
body.lang-ar .sg-wa-modal,
[dir="rtl"] .sg-wa-modal {
    right: 0 !important;
    left: auto !important;
}

.sg-wa-status-dot,
html[dir="rtl"] .sg-wa-status-dot,
html[lang="fa"] .sg-wa-status-dot,
html[lang="ar"] .sg-wa-status-dot,
body.lang-fa .sg-wa-status-dot,
body.lang-ar .sg-wa-status-dot,
[dir="rtl"] .sg-wa-status-dot {
    right: 2px !important;
    left: auto !important;
}