/* Arabic Font Styling - Tajawal
-------------------------------------------------- */
/* Apply Arabic font styles when language is set to Arabic */
html[lang="ar"] body {
    font-family: 'Tajawal', sans-serif !important;
}

/* Special styling for Arabic UI elements with improved readability */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 700;
    line-height: 1.5;
}

/* Arabic paragraph text with proper line height for readability */
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] span:not(.icon),
html[lang="ar"] a {
    font-family: 'Tajawal', sans-serif !important;
    line-height: 1.6;
}

/* For buttons and important UI elements - better visibility */
html[lang="ar"] button,
html[lang="ar"] .btn,
html[lang="ar"] .primary-btn,
html[lang="ar"] .secondary-btn {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Navigation menu specific styling for Arabic */
html[lang="ar"] .nav-link,
html[lang="ar"] #mobileNavContent .nav-links-wrapper a,
html[lang="ar"] #mobileLangOptions .lang-options-wrapper a {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 500;
}

/* Mobile menu titles with proper font weight */
html[lang="ar"] #mobileNavToggle h4,
html[lang="ar"] #mobileLangToggle h4 {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 700;
    font-size: 1.2rem;
    text-align: right;
}

/* Right-to-left specific adjustments */
html[lang="ar"] {
    direction: rtl;
}

/* Keep content cards and sliders in LTR mode even in Arabic */
html[lang="ar"] .content-showcase,
html[lang="ar"] .showcase-card,
html[lang="ar"] .content-slider,
html[lang="ar"] .slider-container,
html[lang="ar"] .content-grid,
html[lang="ar"] .channel-slider,
html[lang="ar"] .channel-card,
html[lang="ar"] .movie-slider,
html[lang="ar"] .movie-card,
html[lang="ar"] .content-carousel,
html[lang="ar"] .carousel-item,
html[lang="ar"] .slick-slider,
html[lang="ar"] .slick-list,
html[lang="ar"] .slick-track,
html[lang="ar"] .swiper-container,
html[lang="ar"] .swiper-wrapper,
html[lang="ar"] .swiper-slide,
html[lang="ar"] [class*="slider-"],
html[lang="ar"] [class*="carousel-"],
html[lang="ar"] [class*="swiper-"],
html[lang="ar"] .testimonials,
html[lang="ar"] .testimonials-slider,
html[lang="ar"] .testimonial-card,
html[lang="ar"] .testimonial-item {
    direction: ltr !important;
    text-align: left !important;
}

/* Override any RTL slider animations and transitions */
html[lang="ar"] .slick-slider,
html[lang="ar"] .slick-slider .slick-track,
html[lang="ar"] .slick-slider .slick-list,
html[lang="ar"] .swiper-container-rtl .swiper-button-next,
html[lang="ar"] .swiper-container-rtl .swiper-button-prev,
html[lang="ar"] .swiper-container,
html[lang="ar"] .carousel,
html[lang="ar"] .slider {
    transform: translate3d(0, 0, 0) !important;
    float: none !important;
}

/* Force normal LTR slider behavior for Arabic */
html[lang="ar"] .slick-slider[dir="rtl"],
html[lang="ar"] .swiper-container-rtl,
html[lang="ar"] [dir="rtl"] .slick-slider,
html[lang="ar"] [dir="rtl"] .slider-container,
html[lang="ar"] [dir="rtl"] .carousel,
html[lang="ar"] .testimonials .slick-slider {
    direction: ltr !important;
}

/* Keep device support buttons in LTR mode in Arabic */
html[lang="ar"] .device-switcher,
html[lang="ar"] .device-option,
html[lang="ar"] .device-showcase,
html[lang="ar"] .device-headline,
html[lang="ar"] .device-display {
    direction: ltr !important;
    text-align: left !important;
}

html[lang="ar"] .device-option span {
    direction: ltr !important;
    text-align: center !important;
}

/* Ensure slider animations move left to right as normal */
html[lang="ar"] .slick-slider .slick-track {
    flex-direction: row !important;
    float: left !important;
}

/* Force slider navigation direction to be standard LTR for Arabic */
html[lang="ar"] .slick-prev {
    left: 10px !important;
    right: auto !important;
}

html[lang="ar"] .slick-next {
    right: 10px !important;
    left: auto !important;
}

/* Fix flex order for content items in Arabic */
html[lang="ar"] .content-showcase .showcase-card .showcase-content,
html[lang="ar"] .channel-slider .channel-card .channel-info,
html[lang="ar"] .movie-slider .movie-card .movie-info {
    direction: ltr !important;
    text-align: left !important;
}

/* Keep icons and badges positioned correctly in LTR mode */
html[lang="ar"] .showcase-card .showcase-badge,
html[lang="ar"] .channel-card .channel-badge,
html[lang="ar"] .movie-card .movie-badge {
    left: auto;
    right: 10px;
}

html[lang="ar"] .hero-feature i {
    margin-right: 0;
    margin-left: 8px;
}

/* Fix icon positioning in RTL */
html[lang="ar"] .nav-link i {
    margin-right: 0;
    margin-left: 8px;
}

/* Pricing cards and feature cards adjustments */
html[lang="ar"] .pricing-card,
html[lang="ar"] .feature-card {
    text-align: right;
}

/* Hero section RTL adjustments */
html[lang="ar"] .hero-content {
    text-align: right;
}

/* Ensure that left and right margins are correctly applied in RTL */
html[lang="ar"] .ml-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

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

/* Mobile menu icons RTL positioning */
html[lang="ar"] .mobile-nav-header .nav-icon,
html[lang="ar"] .lang-switcher-header .lang-icon {
    margin-right: 0;
    margin-left: 15px;
    order: 2; /* Change flex order to appear on right in RTL */
}

html[lang="ar"] .mobile-nav-header .nav-toggle-icon,
html[lang="ar"] .lang-switcher-header .lang-toggle-icon {
    order: 0; /* Change flex order to appear on left in RTL */
}

html[lang="ar"] .mobile-nav-header h4,
html[lang="ar"] .lang-switcher-header h4 {
    order: 1; /* Keep text in middle */
}

/* Adjust mobile menu items for RTL */
html[lang="ar"] .mobile-nav-content .nav-links-wrapper a i {
    margin-right: 0;
    margin-left: 10px;
}

html[lang="ar"] #mobileLangOptions .lang-option {
    text-align: right;
    padding-right: 15px;
}

/* Section headers and titles in RTL */
html[lang="ar"] .section-header,
html[lang="ar"] .section-title {
    text-align: center;
}

/* Center the content section header specifically */
html[lang="ar"] #content .section-header,
html[lang="ar"] #content .section-tag,
html[lang="ar"] #content .section-title,
html[lang="ar"] #content .section-subtitle {
    text-align: center;
}

/* FAQ sections in RTL */
html[lang="ar"] .faq-item {
    text-align: right;
}

/* Contact form RTL */
html[lang="ar"] .contact-form label,
html[lang="ar"] .contact-form input,
html[lang="ar"] .contact-form textarea {
    text-align: right;
}