/**
 * SIGMIX RTL Styles - COMPLETE VERSION
 * /css/rtl.css
 * 
 * Arabic language support - Right-to-Left layout
 * Version: 2.0 - All sections included, duplicates removed
 */

/* ============================================
   1. GLOBAL RTL SETTINGS
   ============================================ */
html[dir="rtl"] {
    direction: rtl;
}

html[dir="rtl"] body {
    text-align: right;
    font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    max-width: 100vw;
    overflow-x: clip !important;
}

/* Icon flips */
html[dir="rtl"] .fa-arrow-right::before { content: "\f060"; }
html[dir="rtl"] .fa-chevron-right::before { content: "\f053"; }
html[dir="rtl"] .fa-chevron-left::before { content: "\f054"; }

/* ============================================
   2. HEADER SPACING - CRITICAL SECTION
   ============================================ */

/* Default: Hide header-spacer (breadcrumb/secondary-nav handle spacing) */
html[dir="rtl"] .header-spacer {
    display: none !important;
}

/* Show header-spacer ONLY on pages without breadcrumbs AND without secondary-nav */
html[dir="rtl"] body:not(:has(.breadcrumb-nav)):not(:has(.secondary-nav)) .header-spacer {
    display: block !important;
    height: 70px;
}

/* Pages with breadcrumbs: breadcrumb handles the 70px offset */
html[dir="rtl"] .breadcrumb-nav {
    margin-top: 70px !important;
    position: relative;
    z-index: 50;
}

/* Pages with secondary-nav: secondary-nav handles the 70px offset */
html[dir="rtl"] .secondary-nav {
    margin-top: 70px !important;
}

html[dir="rtl"] .secondary-nav + .market-hero,
html[dir="rtl"] .secondary-nav + section {
    padding-top: 3rem !important;
}

/* All main content: no extra padding */
html[dir="rtl"] main,
html[dir="rtl"] #main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* CRITICAL: Ensure dropdowns extend beyond header */
#ar-header,
html[dir="rtl"] #ar-header {
    overflow: visible !important;
}

#ar-header .header-container-ar,
html[dir="rtl"] #ar-header .header-container-ar {
    overflow: visible !important;
}

/* Ensure nav items can show dropdowns */
#ar-header .desktop-nav-ar,
html[dir="rtl"] #ar-header .desktop-nav-ar {
    overflow: visible !important;
}

/* Dropdown z-index boost */
#ar-header .nav-dropdown-ar,
html[dir="rtl"] #ar-header .nav-dropdown-ar {
    z-index: 10001 !important;
}

/* ============================================
   3. HEADER RTL
   ============================================ */
html[dir="rtl"] .header-container { flex-direction: row-reverse; }
html[dir="rtl"] .header-nav { flex-direction: row-reverse; }
html[dir="rtl"] .nav-link { flex-direction: row-reverse; }
html[dir="rtl"] .header-actions { flex-direction: row-reverse; }
html[dir="rtl"] .lang-switch,
html[dir="rtl"] .btn-login,
html[dir="rtl"] .btn-cta { flex-direction: row-reverse; }

/* Dropdown positioning */
html[dir="rtl"] .nav-dropdown { left: auto; right: 0; }
html[dir="rtl"] .dropdown-item { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .dropdown-item i { margin-left: 0; margin-right: auto; }

/* Mobile menu */
html[dir="rtl"] .mobile-menu { right: auto; left: -100%; box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1); }
html[dir="rtl"] .mobile-menu.active { left: 0; right: auto; }
html[dir="rtl"] .mobile-menu-header { flex-direction: row-reverse; }
html[dir="rtl"] .mobile-nav-link { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .mobile-nav-link i { margin-left: 0; margin-right: 0; }
html[dir="rtl"] .mobile-menu-footer .btn-login,
html[dir="rtl"] .mobile-menu-footer .btn-cta { flex-direction: row-reverse; }

@media (max-width: 900px) {
    #ar-header .mobile-toggle-ar { display: block !important; z-index: 1001; }
    #ar-header .desktop-nav-ar,
    #ar-header .header-actions-ar { display: none !important; }
    /* REMOVED: overflow-x: clip from header - it clips dropdowns! */
    #ar-header,
    html[dir="rtl"] #ar-header { 
        max-width: 100vw; 
        /* overflow-x: clip; ← DELETED THIS LINE */
    }
    #ar-header .header-container-ar { 
        max-width: 100%; 
        padding: 0 1.5rem; 
        gap: 1rem; 
    }
}

/* ============================================
   4. BREADCRUMB RTL
   ============================================ */
html[dir="rtl"] .breadcrumb-nav .container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

html[dir="rtl"] .breadcrumb-list {
    flex: 1;
    flex-direction: row;
    justify-content: flex-start;
    direction: rtl;
}

html[dir="rtl"] .breadcrumb-list li:not(:last-child)::after {
    content: '/';
    margin: 0 0.5rem;
}

/* ============================================
   5. HERO SECTION RTL
   ============================================ */
html[dir="rtl"] .hero-grid { direction: rtl; }
html[dir="rtl"] .hero-content { text-align: right; }
html[dir="rtl"] .hero-badge { flex-direction: row-reverse; }
html[dir="rtl"] .hero-cta { justify-content: flex-start; }
html[dir="rtl"] .hero-cta .btn-glow,
html[dir="rtl"] .hero-cta .btn-glass { flex-direction: row-reverse; }
html[dir="rtl"] .hero-trust { justify-content: flex-start; }
html[dir="rtl"] .hero-trust .trust-item { flex-direction: row-reverse; }
html[dir="rtl"] .hero-stocks-preview { justify-content: flex-start; }
html[dir="rtl"] .hero-stock-chip { flex-direction: row-reverse; }
html[dir="rtl"] .hero-rating { justify-content: flex-start; }

/* Hero floating cards */
html[dir="rtl"] .hero-floating-card { flex-direction: row-reverse; }
html[dir="rtl"] .hero-floating-card.card-1 { right: auto; left: -10px; }
html[dir="rtl"] .hero-floating-card.card-2 { right: auto; left: 5%; }
html[dir="rtl"] .hero-phone { left: auto; right: -40px; }

/* ============================================
   6. STATS BAR RTL
   ============================================ */
html[dir="rtl"] .stats-grid { direction: rtl; }
html[dir="rtl"] .stat-item { text-align: center; }

/* ============================================
   7. SECTION HEADERS RTL
   ============================================ */
html[dir="rtl"] .section-header { text-align: center; }
html[dir="rtl"] .section-badge { flex-direction: row-reverse; }

/* ============================================
   8. FEATURED STOCKS RTL
   ============================================ */
html[dir="rtl"] .featured-grid { direction: rtl; }
html[dir="rtl"] .featured-card { text-align: right; }
html[dir="rtl"] .featured-header { flex-direction: row-reverse; }
html[dir="rtl"] .featured-price-row { flex-direction: row-reverse; }
html[dir="rtl"] .market-pulse-bar { flex-direction: row-reverse; }
html[dir="rtl"] .pulse-item { flex-direction: row-reverse; }
html[dir="rtl"] .mini-mover-item { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .movers-mini-card h4 { flex-direction: row-reverse; }

/* ============================================
   9. PIPELINE SECTION RTL
   ============================================ */
html[dir="rtl"] .pipeline-track { flex-direction: row-reverse; }
html[dir="rtl"] .pipeline-arrow { transform: rotate(180deg); }
html[dir="rtl"] .data-sources-showcase { direction: rtl; }
html[dir="rtl"] .data-layer-header { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .layer-title { text-align: right; }
html[dir="rtl"] .data-source-item { flex-direction: row-reverse; }
html[dir="rtl"] .data-stat { flex-direction: row-reverse; }

/* ============================================
   10. AI CHAT / TASI-GPT SECTION RTL
   ============================================ */
html[dir="rtl"] .ai-chat-features-row { direction: rtl; }
html[dir="rtl"] .ai-chat-feature-card { text-align: center; }
html[dir="rtl"] .ai-chat-cta { flex-direction: row-reverse; }

/* TASI-GPT Comparison */
html[dir="rtl"] .tg-comparison-light { direction: rtl; }
html[dir="rtl"] .tg-compare-header-light { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .tg-stream-item-light { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .tg-sample-q-light,
html[dir="rtl"] .tg-sample-a-light { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .tg-comparison-cta-light { flex-direction: row-reverse; }

/* TASI-GPT Demo */
html[dir="rtl"] .tg-chat-header { flex-direction: row-reverse; }
html[dir="rtl"] .tg-chat-title { text-align: right; }
html[dir="rtl"] .tg-chat-status { flex-direction: row-reverse; }
html[dir="rtl"] .tg-chat-indicators { flex-direction: row-reverse; }
html[dir="rtl"] .tg-msg { flex-direction: row-reverse; }
html[dir="rtl"] .tg-msg.user { flex-direction: row-reverse; }
html[dir="rtl"] .tg-msg-bubble { text-align: right; }
html[dir="rtl"] .tg-input-wrapper { flex-direction: row-reverse; }
html[dir="rtl"] .tg-input-wrapper input { text-align: right; }
html[dir="rtl"] .tg-input-hint { text-align: right; }
html[dir="rtl"] .tg-feed-item { flex-direction: row-reverse; }
html[dir="rtl"] .tg-demo-live-tag { left: auto; right: -8px; }

/* ============================================
   11. SOCIAL INTELLIGENCE RTL
   ============================================ */
html[dir="rtl"] .social-showcase { direction: rtl; }
html[dir="rtl"] .social-features { text-align: right; }
html[dir="rtl"] .social-feature { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .social-feature:hover { transform: translateX(-5px); }

/* Social nodes - mirror positions */
html[dir="rtl"] .social-node.news { right: auto; left: 5%; }
html[dir="rtl"] .social-node.forum { right: auto; left: 5%; }
html[dir="rtl"] .social-node.arabic { left: auto; right: 5%; }
html[dir="rtl"] .social-node.influencer { left: auto; right: 5%; }

/* ============================================
   12. PLATFORMS SECTION RTL
   ============================================ */
html[dir="rtl"] .platforms-grid { direction: rtl; }
html[dir="rtl"] .platform-content { text-align: right; }
html[dir="rtl"] .platform-badge { flex-direction: row-reverse; }
html[dir="rtl"] .platform-features { direction: rtl; }
html[dir="rtl"] .platform-feature { flex-direction: row-reverse; }
html[dir="rtl"] .channel-tags { justify-content: flex-start; }
html[dir="rtl"] .channel-tag { flex-direction: row-reverse; }
html[dir="rtl"] .btn-appstore-white { flex-direction: row-reverse; }

/* ============================================
   13. MARKET HUB RTL
   ============================================ */
html[dir="rtl"] .market-grid { direction: rtl; }
html[dir="rtl"] .market-card { text-align: center; }

/* ============================================
   14. FAQ SECTION RTL
   ============================================ */
html[dir="rtl"] .faq-preview-grid,
html[dir="rtl"] .faq-grid { direction: rtl; }
html[dir="rtl"] .faq-preview-card,
html[dir="rtl"] .faq-item { text-align: right; }
html[dir="rtl"] .faq-question { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .faq-answer { text-align: right; }

/* ============================================
   15. CTA SECTION RTL
   ============================================ */
html[dir="rtl"] .cta-content { text-align: center; }
html[dir="rtl"] .cta-buttons { flex-direction: row-reverse; justify-content: center; }
html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn-secondary { flex-direction: row-reverse; }
html[dir="rtl"] .cta-inner { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .cta-text { text-align: right; }

/* ============================================
   16. FOOTER RTL
   ============================================ */
html[dir="rtl"] footer { text-align: right; }
html[dir="rtl"] .footer-grid { direction: rtl; }
html[dir="rtl"] .footer-brand { text-align: right; }
html[dir="rtl"] .footer-social { justify-content: flex-start; }
html[dir="rtl"] .footer-section { text-align: right; }
html[dir="rtl"] .footer-section a { padding-left: 0; padding-right: 0; }
html[dir="rtl"] .footer-section a:hover,
html[dir="rtl"] .footer-section a:focus { padding-left: 0; padding-right: 5px; }
html[dir="rtl"] .newsletter-input-group { flex-direction: row-reverse; }
html[dir="rtl"] .newsletter-input { text-align: right; }
html[dir="rtl"] .newsletter-privacy { text-align: right; }
html[dir="rtl"] .newsletter-message { flex-direction: row-reverse; }
html[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }
html[dir="rtl"] .footer-bottom-links { flex-direction: row-reverse; }
html[dir="rtl"] .footer-disclaimer { text-align: right; }

/* ============================================
   17. LEARN HUB RTL
   ============================================ */
html[dir="rtl"] .secondary-nav-container { flex-direction: row-reverse; }

/* Learn Hero */
html[dir="rtl"] .learn-hero .hero-inner { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .learn-hero .hero-text { text-align: right; }
html[dir="rtl"] .hero-stats-inline { flex-direction: row-reverse; justify-content: flex-start; }
html[dir="rtl"] .hero-stats-inline span { flex-direction: row-reverse; }
html[dir="rtl"] .hero-stats-inline i { margin-right: 0; margin-left: 0.3rem; }

/* Search */
html[dir="rtl"] .search-container .search-icon { left: auto; right: 1rem; }
html[dir="rtl"] .search-box { padding: 0.875rem 2.75rem 0.875rem 1rem; text-align: right; }
html[dir="rtl"] .search-result-item { flex-direction: row-reverse; text-align: right; }

/* Categories & Articles */
html[dir="rtl"] .categories-grid { direction: rtl; }
html[dir="rtl"] .category-card { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .articles-grid { direction: rtl; }
html[dir="rtl"] .article-card { text-align: right; }
html[dir="rtl"] .article-meta { flex-direction: row-reverse; justify-content: flex-start; }
html[dir="rtl"] .article-meta span { flex-direction: row-reverse; }
html[dir="rtl"] .article-meta i { margin-right: 0; margin-left: 0.25rem; }

/* Quick Start */
html[dir="rtl"] .quickstart-grid { direction: rtl; }
html[dir="rtl"] .quickstart-step { text-align: right; }
html[dir="rtl"] .step-link { flex-direction: row-reverse; }

/* View All Links */
html[dir="rtl"] .view-all-link { flex-direction: row-reverse; }
html[dir="rtl"] .view-all-btn { flex-direction: row-reverse; }

/* ============================================
   18. ARTICLE PAGE RTL
   ============================================ */
html[dir="rtl"] .breadcrumb-nav + .article-main,
html[dir="rtl"] .breadcrumb-nav + main {
    margin-top: 0 !important;
    padding-top: 2rem;
}

/* Article Header */
html[dir="rtl"] .article-header { text-align: right; }
html[dir="rtl"] .article-category-link { flex-direction: row-reverse; }
html[dir="rtl"] .meta-item { flex-direction: row-reverse; }
html[dir="rtl"] .meta-item i { margin-right: 0; margin-left: 0.4rem; }
html[dir="rtl"] .article-tags { justify-content: flex-start; }

/* Article Layout */
html[dir="rtl"] .article-layout { direction: rtl; }
html[dir="rtl"] .article-content { text-align: right; }
html[dir="rtl"] .article-intro { border-left: none; border-right: 4px solid var(--accent); }

/* Table of Contents */
html[dir="rtl"] .table-of-contents { text-align: right; }
html[dir="rtl"] .table-of-contents h2 { flex-direction: row-reverse; }
html[dir="rtl"] .table-of-contents a { padding-left: 0; padding-right: 1.75rem; }
html[dir="rtl"] .table-of-contents a::before { left: auto; right: 0; }
html[dir="rtl"] .table-of-contents a:hover,
html[dir="rtl"] .table-of-contents a:focus { padding-left: 0; padding-right: 2rem; }

/* Article Sections */
html[dir="rtl"] .article-section { text-align: right; }
html[dir="rtl"] .article-conclusion { text-align: right; }
html[dir="rtl"] .article-faq { text-align: right; }
html[dir="rtl"] .article-faq h2 { flex-direction: row-reverse; }
html[dir="rtl"] .article-disclaimer { border-left: none; border-right: 4px solid var(--error); text-align: right; }

/* Sidebar */
html[dir="rtl"] .sidebar-card { text-align: right; }
html[dir="rtl"] .sidebar-card h3 { flex-direction: row-reverse; }
html[dir="rtl"] .related-stocks-list li a { flex-direction: row-reverse; }
html[dir="rtl"] .related-stocks-list li a:hover,
html[dir="rtl"] .related-stocks-list li a:focus { transform: translateX(-3px); }
html[dir="rtl"] .share-buttons { direction: rtl; }
html[dir="rtl"] .sidebar-cta { text-align: center; }
html[dir="rtl"] .cta-btn { flex-direction: row-reverse; }

/* ============================================
   19. MARKET PAGE RTL
   ============================================ */
html[dir="rtl"] .market-hero .hero-inner { text-align: right; }
html[dir="rtl"] .market-hero .hero-text { text-align: right; }
html[dir="rtl"] .market-hero .hero-text h1 { text-align: right; }
html[dir="rtl"] .market-hero .hero-text p { text-align: right; }

/* Movers */
html[dir="rtl"] .movers-grid { direction: rtl; }
html[dir="rtl"] .movers-card h3 { flex-direction: row-reverse; }
html[dir="rtl"] .mover-item { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .mover-data { text-align: left; }

/* Sectors */
html[dir="rtl"] .sectors-heatmap { direction: rtl; }
html[dir="rtl"] .sector-heat-card { border-left: none; border-right: 3px solid transparent; text-align: right; }
html[dir="rtl"] .sector-heat-card.sector-up { border-left-color: transparent; border-right-color: #10B981; }
html[dir="rtl"] .sector-heat-card.sector-down { border-left-color: transparent; border-right-color: #EF4444; }
html[dir="rtl"] .sector-heat-header { flex-direction: row-reverse; }
html[dir="rtl"] .sector-heat-meta { flex-direction: row-reverse; }

/* Trending */
html[dir="rtl"] .trending-grid { direction: rtl; }
html[dir="rtl"] .trending-card { text-align: right; }
html[dir="rtl"] .trending-header { flex-direction: row-reverse; }
html[dir="rtl"] .trending-stats { flex-direction: row-reverse; }
html[dir="rtl"] .trending-buzz { flex-direction: row-reverse; }
html[dir="rtl"] .trending-buzz i { margin-right: 0; margin-left: 0.25rem; }

/* Sentiment */
html[dir="rtl"] .sentiment-card { flex-direction: row-reverse; }
html[dir="rtl"] .sentiment-breakdown { flex-direction: row-reverse; }

/* Stock Directory */
html[dir="rtl"] .stocks-mobile-list { direction: rtl; }
html[dir="rtl"] .stock-mobile-card { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .stock-mobile-meta { flex-direction: row-reverse; }
html[dir="rtl"] .stock-mobile-price { text-align: left; }

/* Table */
html[dir="rtl"] .stocks-table { direction: rtl; }
html[dir="rtl"] .stocks-table th,
html[dir="rtl"] .stocks-table td { text-align: right; }
html[dir="rtl"] .stocks-table th:first-child { border-radius: 0 12px 0 0; }
html[dir="rtl"] .stocks-table th:last-child { border-radius: 12px 0 0 0; }
html[dir="rtl"] .stocks-table tbody tr:last-child td:first-child { border-radius: 0 0 12px 0; }
html[dir="rtl"] .stocks-table tbody tr:last-child td:last-child { border-radius: 0 0 0 12px; }
html[dir="rtl"] .table-stock-info { flex-direction: row-reverse; }
html[dir="rtl"] a.table-stock-info { flex-direction: row-reverse; }
html[dir="rtl"] .table-link { flex-direction: row-reverse; }

/* ============================================
   20. BUTTONS RTL
   ============================================ */
html[dir="rtl"] .btn-view-all { flex-direction: row-reverse; }
html[dir="rtl"] .cta-btn-primary,
html[dir="rtl"] .cta-btn-secondary { flex-direction: row-reverse; }

/* Arrow transforms */
html[dir="rtl"] .hero-cta .btn-glow i.fa-arrow-right,
html[dir="rtl"] .hero-cta .btn-glow i.fa-arrow-left,
html[dir="rtl"] .hero-cta .btn-glass i.fa-arrow-right,
html[dir="rtl"] .hero-cta .btn-glass i.fa-arrow-left,
html[dir="rtl"] .cta-buttons .btn-primary i.fa-arrow-right,
html[dir="rtl"] .cta-buttons .btn-primary i.fa-arrow-left,
html[dir="rtl"] .pipeline-cta .btn-glow i.fa-arrow-right,
html[dir="rtl"] .pipeline-cta .btn-glow i.fa-arrow-left,
html[dir="rtl"] .view-all-btn i.fa-arrow-right,
html[dir="rtl"] .view-all-btn i.fa-arrow-left,
html[dir="rtl"] .tg-comparison-cta-light .btn-primary i,
html[dir="rtl"] .tg-comparison-cta-light .btn-secondary i,
html[dir="rtl"] .btn-glow i.fa-arrow-right,
html[dir="rtl"] .btn-glow i.fa-arrow-left,
html[dir="rtl"] .btn-glass i.fa-arrow-right,
html[dir="rtl"] .btn-glass i.fa-arrow-left,
html[dir="rtl"] .btn-primary i.fa-arrow-right,
html[dir="rtl"] .btn-primary i.fa-arrow-left,
html[dir="rtl"] .cta-btn-ar i.fa-arrow-left {
    transform: scaleX(-1);
}

/* ============================================
   21. PAGE LOCK (Prevent Horizontal Scroll)
   ============================================ */
html[dir="rtl"] .container,
html[dir="rtl"] .secondary-nav-container,
html[dir="rtl"] .header-container-ar {
    max-width: 100%;
    overflow-x: clip;
}

html[dir="rtl"] .secondary-nav {
    max-width: 100vw;
    overflow-x: auto;
}

html[dir="rtl"] .secondary-nav-container {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

html[dir="rtl"] section,
html[dir="rtl"] main {
    max-width: 100vw;
    overflow-x: clip;
    overflow-y: visible !important;
}

html[dir="rtl"] .movers-grid,
html[dir="rtl"] .sectors-heatmap,
html[dir="rtl"] .trending-grid,
html[dir="rtl"] .hero-stats,
html[dir="rtl"] .stats-grid {
    max-width: 100%;
}

html[dir="rtl"] img,
html[dir="rtl"] video,
html[dir="rtl"] iframe {
    max-width: 100%;
    height: auto;
}

html[dir="rtl"] .table-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

html[dir="rtl"] .stocks-table {
    min-width: 600px;
}

/* ============================================
   22. RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 1024px) {
    html[dir="rtl"] .table-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--primary) var(--gray-200);
        border-radius: 12px;
    }
    
    html[dir="rtl"] .table-wrapper::-webkit-scrollbar { height: 6px; }
    html[dir="rtl"] .table-wrapper::-webkit-scrollbar-track { background: var(--gray-200); border-radius: 10px; }
    html[dir="rtl"] .table-wrapper::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }
    
    html[dir="rtl"] .stocks-table { min-width: 800px; width: 100%; }
    
    html[dir="rtl"] .table-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to right, transparent, rgba(0,0,0,0.05));
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.3s;
    }
    
    html[dir="rtl"] .stocks-mobile-list { display: flex; }
    html[dir="rtl"] .table-wrapper { display: none; }
}

@media (min-width: 769px) {
    html[dir="rtl"] .stocks-mobile-list { display: none; }
    html[dir="rtl"] .table-wrapper { display: block; }
}

@media (max-width: 768px) {
    html[dir="rtl"] .container { padding: 0 1.5rem; max-width: 100%; }
    html[dir="rtl"] .movers-grid,
    html[dir="rtl"] .hero-stats { grid-template-columns: 1fr !important; }
    html[dir="rtl"] .sectors-heatmap { grid-template-columns: repeat(2, 1fr) !important; }
    
    /* Top Movers Horizontal Scroll */
    html[dir="rtl"] .movers-card { position: relative; overflow: hidden; }
    html[dir="rtl"] .movers-list {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--primary) var(--gray-200);
        padding-bottom: 0.5rem;
    }
    html[dir="rtl"] .movers-list::-webkit-scrollbar { height: 4px; }
    html[dir="rtl"] .movers-list::-webkit-scrollbar-track { background: var(--gray-200); border-radius: 10px; }
    html[dir="rtl"] .movers-list::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }
    html[dir="rtl"] .mover-item { min-width: 280px; max-width: 280px; flex-shrink: 0; scroll-snap-align: start; }
    html[dir="rtl"] .movers-card::after {
        content: '';
        position: absolute;
        left: 0;
        top: 3rem;
        bottom: 1rem;
        width: 40px;
        background: linear-gradient(to right, var(--off-white), transparent);
        pointer-events: none;
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] .container { padding: 0 1rem; }
    html[dir="rtl"] .sectors-heatmap { grid-template-columns: 1fr !important; }
    html[dir="rtl"] .stocks-mobile-list { width: 100%; overflow-x: clip; }
    html[dir="rtl"] .stock-mobile-card { width: 100%; min-width: 0; }
    html[dir="rtl"] * { max-width: 100%; }
}

/* ============================================
   23. PRINT STYLES
   ============================================ */
@media print {
    html[dir="rtl"] body { direction: rtl; text-align: right; }
}