/* ==============================================================================
   Learn.AfolksDigital — Professional RTL & Urdu Typography Stylesheet (rtl.css)
   Engineered for seamless bilingual support without disturbing English styles.
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Gulzar&family=Noto+Sans+Arabic:wght@400;500;600;700;800;900&display=swap');

/* 1. Global Urdu Document Variables & Typography */
html[lang="ur"],
[dir="rtl"] {
    direction: rtl;
    text-align: right;
    font-family: 'Noto Sans Arabic', system-ui, -apple-system, sans-serif !important;
    overflow-x: hidden;
    max-width: 100%;
}

html[lang="ur"] body,
[dir="rtl"] body {
    overflow-x: hidden;
    max-width: 100%;
}

[dir="rtl"] *:not(i):not([class*="fa"]):not([class*="icon"]) {
    font-family: inherit;
}

/* Headings with balanced line height for Arabic/Urdu scripts */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    line-height: 1.45 !important;
    letter-spacing: normal !important;
}

[dir="rtl"] .hero h1,
[dir="rtl"] .refund-hero h1 {
    font-family: 'Noto Sans Arabic', system-ui, -apple-system, sans-serif !important;
    font-weight: 800 !important;
    line-height: 1.6 !important;
    margin-top: 18px !important;
}

/* 2. Mandatory LTR Isolation for Numbers, Phones, Emails, Codes & Tech Brand Names */
[dir="rtl"] .ltr-protect,
[dir="rtl"] .phone-number,
[dir="rtl"] .ticket-code,
[dir="rtl"] [data-ltr="true"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] .price-val,
[dir="rtl"] .stat-num,
[dir="rtl"] .hero-stat-num,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href*="wa.me"],
[dir="rtl"] .mono,
[dir="rtl"] code,
[dir="rtl"] .logo,
[dir="rtl"] .navbar .logo,
[dir="rtl"] .nav-brand,
[dir="rtl"] .nav-logo,
[dir="rtl"] .nav-logo-text {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-flex;
    align-items: center;
}

[dir="rtl"] .academy-top-bar > span {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 3. Language Switcher UI Component */
.lang-switcher-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 999px;
    padding: 3px 5px;
    gap: 3px;
    font-size: 0.78rem;
    font-weight: 700;
    transition: all 0.2s ease;
    user-select: none;
}

.lang-switcher-pill a,
.lang-switcher-pill button {
    padding: 3px 9px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #475569;
    text-decoration: none;
    cursor: pointer;
    font-size: inherit;
    font-weight: 700;
    line-height: 1.2;
    transition: all 0.2s ease;
}

.lang-switcher-pill a.active,
.lang-switcher-pill button.active {
    background: #7C3AED;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.lang-switcher-pill a:hover:not(.active),
.lang-switcher-pill button:hover:not(.active) {
    color: #7C3AED;
    background: rgba(124, 58, 237, 0.12);
}

/* Dark Navbar Switcher Variant (e.g., Refund and Top Bar) */
.lang-switcher-dark {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}
.lang-switcher-dark a,
.lang-switcher-dark button {
    color: #CBD5E1;
}
.lang-switcher-dark a.active,
.lang-switcher-dark button.active {
    background: #7C3AED;
    color: #FFFFFF !important;
}
.lang-switcher-dark a:hover:not(.active),
.lang-switcher-dark button:hover:not(.active) {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.18);
}

/* 4. Directional Flips & Spacing for RTL Layouts */
[dir="rtl"] .nav-links,
[dir="rtl"] .academy-pills,
[dir="rtl"] .hero-trust-chips,
[dir="rtl"] .hero-trust-row {
    flex-direction: row;
}

[dir="rtl"] .navbar .logo,
[dir="rtl"] .navbar .nav-brand {
    margin-left: 32px !important;
}

/* Margins and Paddings that flip */
[dir="rtl"] .hero-stat-item {
    border-left: none !important;
    border-right: 3px solid #34D399 !important;
    padding-left: 0 !important;
    padding-right: 12px !important;
}

[dir="rtl"] .hero-badge .dot,
[dir="rtl"] .pill-live-dot {
    margin-left: 0 !important;
    margin-right: 2px !important;
}

/* Form Controls in RTL */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="number"],
[dir="rtl"] select,
[dir="rtl"] textarea {
    text-align: right;
    direction: rtl;
}

/* Icons within buttons */
[dir="rtl"] .btn-cta i,
[dir="rtl"] .btn-primary i,
[dir="rtl"] .btn-wa-support i {
    margin-right: 0;
    margin-left: 5px;
}

/* Reversal of directional arrows */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-chevron-right {
    transform: scaleX(-1);
}

/* Mobile Drawer Positioning */
[dir="rtl"] .mobile-nav-drawer {
    right: auto !important;
    left: 0 !important;
    transform: translateX(-100%) !important;
    text-align: right;
}

[dir="rtl"] .mobile-nav-drawer.active {
    transform: translateX(0) !important;
}

[dir="rtl"] .mobile-nav-drawer a {
    text-align: right;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Floating Badges in Hero */
[dir="rtl"] .hero-float-pill.top-left {
    left: auto;
    right: 20px;
}
[dir="rtl"] .hero-float-pill.top-right {
    right: auto;
    left: 20px;
}
[dir="rtl"] .hero-float-pill.bottom-left {
    left: auto;
    right: 20px;
}
[dir="rtl"] .hero-float-pill.bottom-right {
    right: auto;
    left: 20px;
}

/* Mobile RTL Navbar Optimization */
@media (max-width: 768px) {
    [dir="rtl"] .navbar .nav-cta-btn,
    [dir="rtl"] .navbar .btn-cta,
    [dir="rtl"] .navbar .btn-primary {
        display: none !important;
    }
    [dir="rtl"] .navbar .logo,
    [dir="rtl"] .navbar a.logo {
        flex: 0 0 auto !important;
        max-width: 200px !important;
        font-size: 1.15rem !important;
    }
}

/* 5. Floating Widgets & RTL Spatial Layout */
[dir="rtl"] .fixed-widgets-container {
    left: 24px !important;
    right: auto !important;
    align-items: flex-start !important;
    z-index: 99990 !important;
}

[dir="rtl"] .mascot-widget {
    align-items: flex-start !important;
}

[dir="rtl"] .mascot-bubble {
    left: 0 !important;
    right: auto !important;
    transform-origin: bottom left !important;
    text-align: right !important;
    direction: rtl !important;
}

[dir="rtl"] .mascot-bubble::after {
    left: 24px !important;
    right: auto !important;
}

/* Chat & Voice Launchers positioning in RTL */
[dir="rtl"] .afolks-chat-launcher {
    right: 24px !important;
    left: auto !important;
    z-index: 99995 !important;
}

[dir="rtl"] .afolks-voice-launcher {
    right: 98px !important;
    left: auto !important;
    z-index: 99994 !important;
}

[dir="rtl"] .afolks-voice-bubble {
    right: 98px !important;
    left: auto !important;
    text-align: right !important;
    direction: rtl !important;
}

[dir="rtl"] .afolks-voice-bubble::after {
    right: 28px !important;
    left: auto !important;
}

/* Chat Modal & Window in RTL */
[dir="rtl"] .afolks-chat-window,
[dir="rtl"] .afolks-chat-modal {
    right: 24px !important;
    left: auto !important;
    direction: rtl !important;
    text-align: right !important;
}

[dir="rtl"] .afolks-chat-header-info {
    flex-direction: row !important;
}

[dir="rtl"] .afolks-chat-input-bar input {
    text-align: right !important;
    direction: rtl !important;
}

/* Mobile Clearance for CTA Buttons */
@media (max-width: 768px) {
    [dir="rtl"] .fixed-widgets-container {
        left: 12px !important;
        bottom: 16px !important;
    }
    [dir="rtl"] .afolks-chat-launcher {
        right: 12px !important;
        bottom: 16px !important;
        width: 52px !important;
        height: 52px !important;
        font-size: 1.45rem !important;
    }
    [dir="rtl"] .afolks-voice-launcher {
        right: 72px !important;
        bottom: 16px !important;
        height: 44px !important;
        padding: 0 12px 0 8px !important;
        font-size: 0.8rem !important;
    }
    [dir="rtl"] .pricing-card {
        padding-bottom: 24px !important;
    }
}

/* Project Showcase Carousel RTL Track Alignment */
[dir="rtl"] .students-carousel-wrap {
    direction: ltr !important;
}
[dir="rtl"] .student-project-card {
    direction: rtl !important;
    text-align: right !important;
}