/*
 * Imperial Academy - RTL (Right-to-Left) Styles
 * For Arabic language support with Almarai font
 */

/* Base Direction */
html[dir="rtl"] body,
body.rtl {
    direction: rtl;
    text-align: right;
    font-family: var(--ia-font-arabic);
    overflow-x: hidden;
}

/* Prevent ALL horizontal overflow in RTL — fixes text cut-off on left edge */
html[dir="rtl"],
body.rtl {
    overflow-x: hidden;
    max-width: 100vw;
}

html[dir="rtl"] .ia-section,
html[dir="rtl"] .ia-container,
html[dir="rtl"] .ia-split-layout,
html[dir="rtl"] .ia-split-content,
html[dir="rtl"] .ia-split-image,
body.rtl .ia-section,
body.rtl .ia-container,
body.rtl .ia-split-layout,
body.rtl .ia-split-content,
body.rtl .ia-split-image {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Elementor columns/containers in RTL — fix overflow */
html[dir="rtl"] .elementor-section,
html[dir="rtl"] .elementor-container,
html[dir="rtl"] .elementor-column,
html[dir="rtl"] .elementor-widget-container,
html[dir="rtl"] .elementor-text-editor,
body.rtl .elementor-section,
body.rtl .elementor-container,
body.rtl .elementor-column,
body.rtl .elementor-widget-container,
body.rtl .elementor-text-editor {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Arabic Typography - Enhanced */
[dir="rtl"] {
    letter-spacing: 0 !important;
    word-spacing: 0.05em;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] a,
[dir="rtl"] li,
[dir="rtl"] button {
    font-family: var(--ia-font-arabic);
    line-height: 1.8;
}

[dir="rtl"] h1,
[dir="rtl"] h2 {
    line-height: 1.5;
}

/* =============================================
   HEADER RTL - Complete Flip
   ============================================= */

/* Main Header Container:
   IMPORTANT: The body has direction:rtl inherited. Reset to ltr then use explicit order. */
[dir="rtl"] .ia-header-container {
    direction: ltr;
}

/* Desktop RTL visual: [Account LEFT] [Nav CENTER] [Logo RIGHT]
   With justify-content:space-between on the container, the nav is naturally centered.
   DOM order: Logo(1) | Nav(2) | Account(3) | Toggle(4,hidden on desktop)
   Desired desktop visual order: Account=1, Nav=2, Logo=3 */
[dir="rtl"] .ia-logo {
    order: 3;
}

[dir="rtl"] .ia-nav {
    order: 2;
}

[dir="rtl"] .ia-header-account {
    order: 1;
    margin-left: 0;
    margin-right: 0;
}

[dir="rtl"] .ia-menu-toggle {
    order: 0;
    /* hidden on desktop, lowest order */
}

/* Navigation list items still read RTL */
[dir="rtl"] .ia-nav-list {
    direction: rtl;
    flex-direction: row-reverse;
}

[dir="rtl"] .ia-nav-item a::after {
    left: 0;
    right: 0;
    transform-origin: right;
}

/* =============================================
   MARQUEE RTL - Reverse animation direction
   ============================================= */

@keyframes marquee-rtl {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

[dir="rtl"] .marquee-track {
    animation-name: marquee-rtl !important;
    animation-direction: normal !important;
}

[dir="rtl"] .marquee-wrap {
    direction: ltr;
    /* Keep the marquee container LTR for proper animation */
}

[dir="rtl"] .marquee-item {
    direction: rtl;
    /* But text inside should be RTL */
}

/* =============================================
   TOP BAR RTL - Complete Flip
   ============================================= */

[dir="rtl"] .ia-topbar-container {
    flex-direction: row-reverse;
}

/* Children inherit RTL reading order from row-reverse container */
[dir="rtl"] .ia-topbar-left {
    flex-direction: row-reverse;
}

[dir="rtl"] .ia-topbar-right {
    flex-direction: row-reverse;
}

/* Contact Info */
[dir="rtl"] .ia-contact-info {
    flex-direction: row-reverse;
}

[dir="rtl"] .ia-contact-item {
    flex-direction: row-reverse;
}

[dir="rtl"] .ia-contact-item svg {
    margin-left: 0;
    margin-right: 0;
}

/* Social Icons — no reversal needed; icons have no reading direction */

/* Language Dropdown */

[dir="rtl"] .ia-lang-toggle {
    flex-direction: row-reverse;
}

[dir="rtl"] .ia-lang-menu {
    right: auto;
    left: 0;
    text-align: right;
}

[dir="rtl"] .ia-lang-menu a {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Theme Toggle */
[dir="rtl"] .ia-theme-toggle {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Course Card RTL */
[dir="rtl"] .ia-course-card-badge {
    right: auto;
    left: 0.75rem;
}

[dir="rtl"] .ia-course-card-footer {
    flex-direction: row-reverse;
}

[dir="rtl"] .ia-course-card-link {
    flex-direction: row-reverse;
}

[dir="rtl"] .ia-course-card-link svg {
    transform: scaleX(-1);
}

/* =============================================
   FOOTER RTL - Complete Flip
   ============================================= */

/* Footer Grid - Reverse column order */
[dir="rtl"] .ia-footer-grid {
    direction: rtl;
}

[dir="rtl"] .ia-footer-col {
    text-align: right;
}

[dir="rtl"] .ia-footer-col h4::after {
    left: auto;
    right: 0;
}

[dir="rtl"] .ia-footer-col ul {
    text-align: right;
}

[dir="rtl"] .ia-footer-col ul a:hover {
    padding-inline-start: 0;
    padding-inline-end: 0.5rem;
}

[dir="rtl"] .ia-footer-logo {
    text-align: right;
}

[dir="rtl"] .ia-footer-connect {
    justify-content: flex-start;
    flex-direction: row-reverse;
}

[dir="rtl"] .ia-footer-newsletter form {
    flex-direction: row-reverse;
}

[dir="rtl"] .ia-footer-newsletter input {
    text-align: right;
    border-radius: 0 var(--ia-radius-md) var(--ia-radius-md) 0;
}

[dir="rtl"] .ia-footer-newsletter button {
    border-radius: var(--ia-radius-md) 0 0 var(--ia-radius-md);
}

[dir="rtl"] .ia-footer-bottom {
    text-align: center;
}

[dir="rtl"] .ia-contact-list li {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .ia-contact-list svg {
    margin-left: 0.75rem;
    margin-right: 0;
}

/* Section Title RTL */
[dir="rtl"] .ia-section-title.text-start {
    text-align: right;
}

[dir="rtl"] .ia-section-title.text-start h2::after {
    left: auto;
    right: 0;
}

/* Breadcrumbs RTL */
[dir="rtl"] .ia-breadcrumbs {
    flex-direction: row-reverse;
}

/* Hero RTL */
[dir="rtl"] .ia-hero-buttons {
    flex-direction: row-reverse;
}

/* Icon Box RTL */
[dir="rtl"] .ia-icon-box {
    text-align: center;
}

/* Testimonial RTL */
[dir="rtl"] .ia-testimonial-author {
    flex-direction: row-reverse;
}

[dir="rtl"] .ia-testimonial-info {
    text-align: right;
}

/* Forms RTL */
[dir="rtl"] .ia-form-label {
    text-align: right;
}

[dir="rtl"] .ia-form-input,
[dir="rtl"] .ia-form-select,
[dir="rtl"] .ia-form-textarea {
    text-align: right;
}

/* Stats RTL */
[dir="rtl"] .ia-stats-grid {
    direction: rtl;
}

/* Force Western/English digits in stats */
[dir="rtl"] .ia-stat-number {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: var(--ia-font-primary);
}

/* Force Western/English digits on Elementor counters and all number elements */
[dir="rtl"] .elementor-counter-number-wrapper,
[dir="rtl"] .elementor-counter-number,
[dir="rtl"] .elementor-counter-number-prefix,
[dir="rtl"] .elementor-counter-number-suffix,
[dir="rtl"] .elementor-counter,
[dir="rtl"] [class*="counter"],
[dir="rtl"] [class*="number"],
[dir="rtl"] [class*="stat"] {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    font-family: var(--ia-font-primary) !important;
    font-feature-settings: "lnum" 1 !important;
    /* Use lining numerals */
}

/* Grid RTL */
[dir="rtl"] .ia-grid {
    direction: rtl;
}

/* Mobile RTL - Topbar & Header alignment fixes */
@media (max-width: 768px) {

    /* Mirror the English mobile topbar layout for RTL:
       EN:  [📞 ✉️]  ———space———  [🌐▾ 🌙]
       AR:  [🌐▾ 🌙]  ———space———  [📞 ✉️]
       Use direction:ltr so margin-inline-start:auto on topbar-right
       produces margin-left:auto (push right). Then swap with order. */
    [dir="rtl"] .ia-topbar-container {
        direction: ltr;
        flex-direction: row !important;
    }

    /* Right group (lang/theme) now visually on LEFT via order:1 */
    [dir="rtl"] .ia-topbar-right {
        flex-direction: row !important;
        order: 1;
        margin-inline-start: 0;
    }

    /* Left group (phone/email) now visually on RIGHT via order:2 + auto margin */
    [dir="rtl"] .ia-topbar-left {
        flex-direction: row !important;
        order: 2;
        margin-inline-start: auto;
    }

    [dir="rtl"] .ia-contact-info {
        flex-direction: row !important;
    }

    [dir="rtl"] .ia-contact-item {
        flex-direction: row !important;
    }

    [dir="rtl"] .ia-lang-toggle {
        flex-direction: row !important;
    }

    /* Header RTL mobile: gap between hamburger + account button */
    [dir="rtl"] .ia-header-account {
        margin-left: 0.5rem;
    }

    /* Ensure nav list items stack vertically in RTL */
    [dir="rtl"] .ia-nav .ia-nav-list {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: right !important;
    }

    [dir="rtl"] .ia-nav .ia-nav-item {
        width: 100% !important;
        text-align: right !important;
    }

    [dir="rtl"] .ia-nav .ia-nav-item a {
        text-align: right !important;
        justify-content: flex-end !important;
        flex-direction: row-reverse !important;
    }
}

/* Social Icons RTL */
[dir="rtl"] .ia-footer-social {
    flex-direction: row-reverse;
}

/* Accessibility Tools RTL */
[dir="rtl"] .ia-accessibility-tools {
    flex-direction: row-reverse;
}

/* Language Switcher RTL */
[dir="rtl"] .ia-lang-switcher {
    flex-direction: row-reverse;
}

/* Page Header RTL */
[dir="rtl"] .ia-page-header {
    text-align: center;
}

/* Mobile Navigation RTL — merged into block at line 377 */

/* Logical Properties Support - Modern browsers */
.ia-course-card-badge {
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
}

.ia-footer-col h4::after {
    inset-inline-start: 0;
}

/* Elementor RTL Compatibility */
[dir="rtl"] .elementor-widget-container {
    text-align: inherit;
}

[dir="rtl"] .elementor-column {
    direction: rtl;
}

[dir="rtl"] .elementor-row {
    flex-direction: row-reverse;
}

/* Fix for Elementor icons in RTL */
[dir="rtl"] .elementor-icon-list-item .elementor-icon-list-icon {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Elementor button alignment RTL */
[dir="rtl"] .elementor-button-content-wrapper {
    flex-direction: row-reverse;
}

/* Elementor form fields RTL */
[dir="rtl"] .elementor-form .elementor-field-group {
    text-align: right;
}

[dir="rtl"] .elementor-form .elementor-field {
    text-align: right;
}

/* Course Layout RTL */
[dir="rtl"] .ia-course-layout {
    direction: rtl;
}

[dir="rtl"] .ia-course-info-card {
    text-align: right;
}

[dir="rtl"] .ia-course-meta-list li {
    flex-direction: row-reverse;
}

[dir="rtl"] .ia-meta-value {
    margin-right: auto;
    margin-left: 0;
}

[dir="rtl"] .ia-course-share {
    text-align: center;
}

[dir="rtl"] .ia-share-buttons {
    flex-direction: row-reverse;
}

/* Pagination RTL */
[dir="rtl"] .ia-pagination {
    direction: rtl;
}

[dir="rtl"] .ia-pagination .nav-links {
    flex-direction: row-reverse;
}

/* Course Filters RTL */
[dir="rtl"] .ia-course-filters {
    flex-direction: row-reverse;
}

/* Contact List RTL */
[dir="rtl"] .ia-contact-list li {
    flex-direction: row-reverse;
    text-align: right;
}

/* Newsletter Form RTL */
[dir="rtl"] .ia-newsletter-form {
    flex-direction: row-reverse;
}

/* Course Card Meta RTL */
[dir="rtl"] .ia-course-card-meta {
    flex-direction: row-reverse;
}

[dir="rtl"] .ia-course-card-meta span {
    flex-direction: row-reverse;
}

/* Post Navigation RTL */
[dir="rtl"] .ia-post-navigation .nav-links {
    flex-direction: row-reverse;
}

/* ==========================================================================
   CINEMATIC HOMEPAGE — RTL OVERRIDES
   Sections that are always centred regardless of reading direction.
   The global body.rtl { text-align: right } can bleed through inherited
   text-align, so we pin each section explicitly.
   ========================================================================== */

/* ── Hero: always centred ── */
[dir="rtl"] .cm-hero__content {
    text-align: center;
}

[dir="rtl"] .cm-hero__content h1,
[dir="rtl"] .cm-hero__content>p,
[dir="rtl"] .cm-hero__badge,
[dir="rtl"] .cm-hero__scroll-hint {
    text-align: center !important;
}

[dir="rtl"] .cm-hero__content>p {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

[dir="rtl"] .cm-hero__stat {
    text-align: center;
}

/* ── CTA section: always centred ── */
[dir="rtl"] .cm-cta,
[dir="rtl"] .cm-cta__inner {
    text-align: center;
}

[dir="rtl"] .cm-cta h2,
[dir="rtl"] .cm-cta p {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

[dir="rtl"] .cm-cta .cm-section__sub {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Stats section: numbers + labels always centred ── */
[dir="rtl"] .cm-stats__grid {
    text-align: center;
}

[dir="rtl"] .cm-stats__num,
[dir="rtl"] .cm-stats__label {
    text-align: center;
}

/* ── Section subtitle stays START-aligned (matches title direction) ── */
/* Already handled by [dir="rtl"] .cm-section__sub { text-align: right } in main.css */