/* ============================================
   SiteBuilder RTL (Right-to-Left) Stylesheet
   Loaded automatically when SiteLanguage = 'ar'
   
   KEY FIX: direction:rtl + flex-direction:row = R→L flow
   DO NOT combine direction:rtl + flex-direction:row-reverse
   (they cancel each other = back to L→R!)
   ============================================ */

/* === BASE DIRECTION === */
html[dir="rtl"] body {
    text-align: right;
    direction: rtl;
}

/* === FONT === */
html[dir="rtl"] body,
html[dir="rtl"] * {
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

/* === CRITICAL: Keep FontAwesome icons visible === */
html[dir="rtl"] .fas,
html[dir="rtl"] .far,
html[dir="rtl"] .fab,
html[dir="rtl"] .fa,
html[dir="rtl"] i.fas,
html[dir="rtl"] i.far,
html[dir="rtl"] i.fab,
html[dir="rtl"] i.fa {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands' !important;
    display: inline-block !important;
    visibility: visible !important;
}
html[dir="rtl"] .fab {
    font-family: 'Font Awesome 6 Brands' !important;
}

/* === TOP INFO BAR === */
html[dir="rtl"] .top-info-bar {
    direction: rtl !important;
}
html[dir="rtl"] .top-info-bar .info-item {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
html[dir="rtl"] .top-info-bar .info-item i {
    font-family: 'Font Awesome 6 Free' !important;
    display: inline-block !important;
    margin-left: 6px;
    margin-right: 0;
}
html[dir="rtl"] .top-info-bar .social-icons {
    display: flex !important;
    gap: 10px;
}
html[dir="rtl"] .top-info-bar .social-icons a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
html[dir="rtl"] .top-info-bar .social-icons a i {
    font-family: 'Font Awesome 6 Brands' !important;
    display: inline-block !important;
}

/* ============================================
   NAVIGATION - RTL
   direction:rtl makes flex items flow R→L
   DO NOT add flex-direction:row-reverse!
   ============================================ */
html[dir="rtl"] .site-header {
    direction: rtl !important;
}
html[dir="rtl"] .nav-container {
    direction: rtl !important;
}
html[dir="rtl"] .nav-brand {
    direction: rtl !important;
    margin-right: 0 !important;
    margin-left: 10px !important;
}
html[dir="rtl"] .nav-brand span {
    margin-right: 0;
    margin-left: 10px;
}
html[dir="rtl"] .nav-menu {
    direction: rtl !important;
}
html[dir="rtl"] .nav-menu li {
    direction: rtl !important;
}
html[dir="rtl"] .nav-menu li a {
    direction: rtl !important;
    text-align: right !important;
}
html[dir="rtl"] .nav-toggle {
    left: 15px;
    right: auto;
}
html[dir="rtl"] .nav-actions {
    direction: rtl !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
}

/* Nav menu item icons */
html[dir="rtl"] .nav-menu li a i {
    margin-right: 0;
    margin-left: 6px;
}

/* === NAV ACTION BUTTONS (E-Book, Taaleb Login) === */
html[dir="rtl"] .nav-btn-ebook,
html[dir="rtl"] .nav-btn-taaleb,
html[dir="rtl"] .nav-lang-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
html[dir="rtl"] .nav-btn-ebook i,
html[dir="rtl"] .nav-btn-taaleb i,
html[dir="rtl"] .nav-lang-btn i {
    font-family: 'Font Awesome 6 Free' !important;
    display: inline-block !important;
}
html[dir="rtl"] .nav-login-btn {
    display: inline-flex !important;
}
html[dir="rtl"] .nav-login-btn i {
    font-family: 'Font Awesome 6 Free' !important;
    display: inline-block !important;
}

/* === DROPDOWN MENUS === */
html[dir="rtl"] .nav-menu > li > .dropdown-menu,
html[dir="rtl"] .has-sub > .dropdown-menu {
    left: auto !important;
    right: 0 !important;
}
html[dir="rtl"] .dropdown-menu li a {
    text-align: right !important;
    direction: rtl !important;
}
html[dir="rtl"] .dropdown-menu li a i {
    font-family: 'Font Awesome 6 Free' !important;
    display: inline-block !important;
    margin-right: 0 !important;
    margin-left: 8px;
}
html[dir="rtl"] .dropdown-menu li a:hover {
    padding-right: 24px;
    padding-left: 20px;
}
html[dir="rtl"] .nav-menu > li > a.has-dropdown::after {
    margin-left: 0 !important;
    margin-right: 6px !important;
}

/* === HERO === */
html[dir="rtl"] .hero-section {
    text-align: center;
}
html[dir="rtl"] .hero-buttons {
    direction: rtl;
}
html[dir="rtl"] .hero-buttons a i {
    font-family: 'Font Awesome 6 Free' !important;
    display: inline-block !important;
}

/* === CONTENT BLOCKS === */
html[dir="rtl"] .content-block {
    direction: rtl;
}
html[dir="rtl"] .content-block.image-right {
    flex-direction: row-reverse;
}
html[dir="rtl"] .content-block.image-left {
    flex-direction: row;
}
html[dir="rtl"] .content-text {
    text-align: right;
}
html[dir="rtl"] .content-text ul,
html[dir="rtl"] .content-text ol {
    padding-right: 20px;
    padding-left: 0;
}

/* === FEATURES GRID === */
html[dir="rtl"] .features-grid {
    direction: rtl;
}
html[dir="rtl"] .feature-card {
    text-align: center;
}
html[dir="rtl"] .feature-icon i {
    font-family: 'Font Awesome 6 Free' !important;
    display: inline-block !important;
}

/* === SECTION HEADERS === */
html[dir="rtl"] .section-header {
    text-align: center;
}
html[dir="rtl"] .section-header h2::after {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* === TESTIMONIALS === */
html[dir="rtl"] .testimonials-grid {
    direction: rtl;
}
html[dir="rtl"] .testimonial-card .quote {
    text-align: right;
}
html[dir="rtl"] .testimonial-author {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .testimonial-author img {
    margin-right: 0;
    margin-left: 12px;
}

/* === TEAM === */
html[dir="rtl"] .team-grid { direction: rtl; }
html[dir="rtl"] .team-card { text-align: center; }

/* === PRICING === */
html[dir="rtl"] .pricing-grid { direction: rtl; }
html[dir="rtl"] .pricing-card { text-align: center; }
html[dir="rtl"] .features-list { text-align: right; padding-right: 0; padding-left: 0; }
html[dir="rtl"] .features-list li { text-align: right; }
html[dir="rtl"] .features-list li::before { margin-left: 8px; margin-right: 0; }

/* === FAQ === */
html[dir="rtl"] .faq-list { direction: rtl; }
html[dir="rtl"] .faq-question { text-align: right; padding-right: 0; padding-left: 30px; }
html[dir="rtl"] .faq-question::after { left: 15px; right: auto; }
html[dir="rtl"] .faq-answer { text-align: right; }

/* === CONTACT === */
html[dir="rtl"] .contact-wrapper { direction: rtl; }
html[dir="rtl"] .contact-info-item { direction: rtl; text-align: right; }
html[dir="rtl"] .contact-info-item i { margin-right: 0; margin-left: 12px; }
html[dir="rtl"] .contact-form label { text-align: right; display: block; }
html[dir="rtl"] .contact-form input,
html[dir="rtl"] .contact-form textarea { text-align: right; direction: rtl; }
html[dir="rtl"] .btn-submit { width: 100%; }

/* === GALLERY === */
html[dir="rtl"] .gallery-grid { direction: rtl; }

/* === CTA === */
html[dir="rtl"] .cta-section { text-align: center; }

/* === CALENDAR === */
html[dir="rtl"] .uca-cal-header { direction: rtl; }
html[dir="rtl"] .cal-nav { direction: ltr; }
html[dir="rtl"] .cal-event-item { direction: rtl; text-align: right; }
html[dir="rtl"] .cal-no-events { text-align: center; }

/* === FOOTER === */
html[dir="rtl"] .footer-content { direction: rtl; }
html[dir="rtl"] .footer-brand { text-align: right; }
html[dir="rtl"] .footer-links { text-align: right; }
html[dir="rtl"] .footer-links h4 { text-align: right; }
html[dir="rtl"] .footer-links ul { padding-right: 0; padding-left: 0; }
html[dir="rtl"] .footer-links li { text-align: right; }
html[dir="rtl"] .footer-links li i {
    font-family: 'Font Awesome 6 Free' !important;
    display: inline-block !important;
    margin-right: 0;
    margin-left: 8px;
}
html[dir="rtl"] .footer-social { direction: rtl; }
html[dir="rtl"] .footer-social a { margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .footer-social a i {
    font-family: 'Font Awesome 6 Brands' !important;
    display: inline-block !important;
}
html[dir="rtl"] .footer-bottom { text-align: center; }

/* === BUTTONS - Keep icons visible === */
html[dir="rtl"] .btn i,
html[dir="rtl"] .btn .fa,
html[dir="rtl"] .btn .fas,
html[dir="rtl"] .btn .fab {
    font-family: 'Font Awesome 6 Free' !important;
    display: inline-block !important;
    margin-right: 0;
    margin-left: 8px;
}
html[dir="rtl"] .btn .fab {
    font-family: 'Font Awesome 6 Brands' !important;
}

/* === WHATSAPP FLOAT === */
html[dir="rtl"] .whatsapp-float { right: auto; left: 25px; }
html[dir="rtl"] .whatsapp-float i {
    font-family: 'Font Awesome 6 Brands' !important;
    display: inline-block !important;
}

/* === COOKIE BANNER === */
html[dir="rtl"] #cookieBanner { direction: rtl; text-align: right; }

/* === RESPONSIVE MOBILE RTL === */
@media (max-width: 768px) {
    html[dir="rtl"] .top-info-bar { display: none !important; }
    html[dir="rtl"] .nav-container { direction: rtl !important; }
    html[dir="rtl"] .nav-menu {
        direction: rtl !important;
        flex-direction: column !important;
        text-align: right !important;
    }
    html[dir="rtl"] .nav-menu li a { text-align: right !important; }
    html[dir="rtl"] .content-block,
    html[dir="rtl"] .content-block.image-right,
    html[dir="rtl"] .content-block.image-left { flex-direction: column; }
    html[dir="rtl"] .contact-wrapper { flex-direction: column; }
    html[dir="rtl"] .footer-content { flex-direction: column; text-align: center; }
    html[dir="rtl"] .footer-brand,
    html[dir="rtl"] .footer-links { text-align: center; }
    html[dir="rtl"] .hero-buttons { flex-direction: column; align-items: center; }
    html[dir="rtl"] .hero-buttons a { margin-left: 0; margin-bottom: 10px; }
    html[dir="rtl"] .nav-actions { direction: rtl !important; }
    html[dir="rtl"] .has-sub > .dropdown-menu {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* === ANIMATIONS RTL FIX === */
html[dir="rtl"] .animate-slideLeft { transform: translateX(30px); }
html[dir="rtl"] .animate-slideLeft.visible { transform: translateX(0); }

/* === GENERAL UTILITY === */
html[dir="rtl"] .text-left { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }
html[dir="rtl"] .float-left { float: right; }
html[dir="rtl"] .float-right { float: left; }
html[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }