/* RTL layout for Arabic registration page — load after styles.css */

html[dir="rtl"] body {
    direction: rtl;
}

html[dir="rtl"] .container {
    direction: rtl;
}

html[dir="rtl"] .brand-pill-nav {
    flex-direction: row-reverse;
}

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

/* Keep English brand word readable in RTL context */
html[dir="rtl"] .brand-monks .monks-word {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-flex;
}

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

html[dir="rtl"] .form-group label {
    text-transform: none;
    letter-spacing: 0.02em;
    text-align: right;
}

html[dir="rtl"] .form-group small {
    text-align: right;
    padding-right: 2px;
    padding-left: 0;
}

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

html[dir="rtl"] input[type="email"] {
    direction: ltr;
    text-align: right;
}

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

html[dir="rtl"] .success-details strong {
    min-width: 0;
}

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

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

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

html[dir="rtl"] .showcase-track {
    animation-direction: reverse;
}

/* Keep Arabic page RTL, but make showcase marquee behave like English */
html[dir="rtl"] .showcase-carousel,
html[dir="rtl"] .showcase-track {
    direction: ltr;
}

html[dir="rtl"] .showcase-track {
    animation-direction: normal;
}

html[dir="rtl"] .lang-switch {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

/* Responsive fixes for Arabic mobile layout */
@media (max-width: 768px) {
    html[dir="rtl"] .brand-pill-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        border-radius: 24px;
        padding: 10px 12px;
    }

    html[dir="rtl"] .brand-identity {
        justify-content: space-between;
        width: 100%;
        gap: 10px;
    }

    html[dir="rtl"] .top-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    html[dir="rtl"] .top-nav a {
        font-size: 13px;
        padding: 8px 11px;
    }
}

@media (max-width: 600px) {
    html[dir="rtl"] .brand-monks .monks-word {
        font-size: clamp(23px, 8vw, 29px);
    }

    html[dir="rtl"] .promo-panel {
        min-height: 300px;
        padding: 18px 14px;
    }

    html[dir="rtl"] .promo-line-static,
    html[dir="rtl"] .promo-rotator-track span {
        font-size: clamp(34px, 11vw, 48px);
        line-height: 1.08;
    }

    html[dir="rtl"] .promo-subtitle {
        font-size: 16px;
        line-height: 1.35;
    }
}