/* RTL Styles for Arabic Support
   Bundled into css/main.css (scripts/phase5_perf.js); every rule is scoped to
   html[dir="rtl"], so it is inert on LTR pages.

   A flex row already runs right-to-left under dir="rtl", and grids mirror too.
   Do not add flex-direction: row-reverse to mirror a layout: under RTL that
   flips it back to left-to-right order (it did exactly that to the header nav,
   the screenshots section and the contact block, and turned the mobile footer
   column into a row). Only genuinely directional details belong here. */
html[dir="rtl"] {
    text-align: right;
    direction: rtl;
}

/* Header */
html[dir="rtl"] .header-brand {
    flex-direction: row;
    /* Keep logo and text together */
}

html[dir="rtl"] .language-dropdown {
    right: auto;
    left: 0;
    /* The selector sits near the left edge in RTL; opening rightwards keeps the menu on screen */
}

/* In the drawer (css/header.css, the same max-width query) the selector sits at
   the drawer's right edge, its inline start under RTL. Opening rightwards from
   there ran the menu past the edge of the screen and cut off the flags; anchor
   it to the selector's right edge so it opens leftwards, into the drawer, as the
   LTR menu opens rightwards from the drawer's left edge.
   test/css/drawer.test.js guards this. */
@media (max-width: 79.99875em) {
    html[dir="rtl"] .language-dropdown {
        right: 0;
        left: auto;
    }
}

/* The menu button sits at the left edge under RTL, so the drawer slides in from
   the left: the close (X) control, which stays above the drawer, then lands
   inside the panel (the right-hand drawer left it 90px outside).
   test/css/drawer.test.js guards this. */
@media (max-width: 79.99875em) {
    html[dir="rtl"] #main-nav {
        right: auto;
        left: -100%;
        transition: left 0.3s ease, visibility 0s linear 0.3s;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
    }

    html[dir="rtl"] #main-nav.mobile-nav-open {
        right: auto;
        left: 0;
        transition-delay: 0s;
    }
}

html[dir="rtl"] .language-option {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Hero */
html[dir="rtl"] .hero-content {
    text-align: right;
}

html[dir="rtl"] .download-btn .btn-text {
    text-align: right;
}

/* Features */
html[dir="rtl"] .feature-card {
    text-align: right;
}

/* The card is in normal flow with logical padding, so the icon, title and
   text start at the right edge on their own. */

html[dir="rtl"] .carousel-arrow-left,
html[dir="rtl"] .carousel-arrow-right {
    transform: scaleX(-1);
    /* Flip arrow icons */
}

/* Screenshots */
html[dir="rtl"] .accordion-header {
    flex-direction: row;
    justify-content: space-between;
}

html[dir="rtl"] .accordion-arrow {
    margin-left: 0;
}

html[dir="rtl"] .accordion-content {
    text-align: right;
}

/* FAQ */
html[dir="rtl"] .faq-item-header {
    flex-direction: row;
    justify-content: space-between;
}

html[dir="rtl"] .faq-toggle-button {
    margin-left: 0;
    margin-right: 1rem;
}

/* Contact Form */
html[dir="rtl"] .contact-form-left {
    text-align: right;
}

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

/* Footer */
html[dir="rtl"] .footer-social-icons {
    flex-direction: row;
}

html[dir="rtl"] .social-icon {
    margin-right: 0;
    margin-left: 1rem;
}

@media (min-width: 768px) {
    html[dir="rtl"] .footer-links-list li {
        text-align: right;
    }

    html[dir="rtl"] .footer-company {
        align-items: flex-start;
    }
}