/* ============================================================
   rtl.css — Arabic / RTL layout for the marketing site + client portal.
   (The admin panel keeps its own RTL rules in admin.css.)
   Rules activate only under [dir="rtl"]; direction:rtl auto-mirrors
   flex/grid order, and these rules fix alignment, spacing, dropdowns and icons.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

/* Base direction + Arabic font */
[dir="rtl"] body { direction: rtl; font-family: 'Cairo','Montserrat',system-ui,sans-serif; text-align: right; }

/* Unified Arabic font — apply Cairo (the navbar font) to ALL text in RTL.
   Many elements (headings, buttons, hero titles) declare 'Montserrat', which has
   no Arabic glyphs and falls back to a mismatched system font; this overrides them.
   Font Awesome icons and code/monospace are explicitly left untouched. */
[dir="rtl"] *:not(i):not(svg):not(path):not(code):not(pre):not(kbd):not([class*="fa-"]):not(.fa):not(.logo):not(.logo-text):not(.logo-icon) {
    font-family: 'Cairo','Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif !important;
}

/* Brand wordmark stays Montserrat even in Arabic (it is a Latin logotype). */
[dir="rtl"] .logo,
[dir="rtl"] .logo-text,
[dir="rtl"] .logo-icon,
[dir="rtl"] .mobile-nav-brand .logo-text {
    font-family: 'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5,
[dir="rtl"] p,[dir="rtl"] li,[dir="rtl"] label,
[dir="rtl"] .ovw-eyebrow,[dir="rtl"] .ovw-sub,[dir="rtl"] .ovw-trust,
[dir="rtl"] .footer-grid,[dir="rtl"] .footer-links,[dir="rtl"] .footer-brand { text-align: right; }

/* Centered blocks stay centered */
[dir="rtl"] .hero,[dir="rtl"] .hero *,
[dir="rtl"] .ovw-hero .ovw-container,[dir="rtl"] .ovw-hero .ovw-container *,
[dir="rtl"] .cta,[dir="rtl"] .cta *,
[dir="rtl"] .ovw-cta-band,[dir="rtl"] .ovw-cta-band *,
[dir="rtl"] .ovw-bento-head,[dir="rtl"] .ovw-bento-head * { text-align: center; }

/* Lists & tick rows */
[dir="rtl"] ul { padding-right: 1.1em; padding-left: 0; }
[dir="rtl"] .ovw-ticks li { flex-direction: row-reverse; text-align: right; }

/* Spacing swaps for the most common left-margin utilities */
[dir="rtl"] .lang-dropdown { margin-left: 0; margin-right: 15px; }

/* Language dropdown menus: open from the correct edge */
[dir="rtl"] .lang-dropdown-menu { right: auto; left: 0; text-align: right; }
[dir="rtl"] .footer-brand .lang-dropdown-menu { left: auto; right: 0; }

/* Directional icons flip horizontally */
[dir="rtl"] .fa-arrow-right,[dir="rtl"] .fa-arrow-left,[dir="rtl"] .fa-long-arrow-alt-right,
[dir="rtl"] .fa-angle-right,[dir="rtl"] .fa-angle-left,[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,[dir="rtl"] .fa-arrow-right-long,
[dir="rtl"] .fa-right-to-bracket,[dir="rtl"] .fa-arrow-left-long { transform: scaleX(-1); }

/* ---------- Client portal ---------- */
[dir="rtl"] .top-header,[dir="rtl"] .top-header * { text-align: right; }
[dir="rtl"] .top-header .lang-dropdown-menu { left: 0; right: auto; }
[dir="rtl"] .stat-card,[dir="rtl"] .portal-card,[dir="rtl"] .card,
[dir="rtl"] .dashboard-card,[dir="rtl"] .info-card { text-align: right; }
[dir="rtl"] .breadcrumb,[dir="rtl"] .card-header,[dir="rtl"] .stat-row { flex-direction: row-reverse; }

/* Forms */
[dir="rtl"] input,[dir="rtl"] textarea,[dir="rtl"] select { text-align: right; }
[dir="rtl"] input[type="checkbox"],[dir="rtl"] input[type="radio"] { text-align: initial; }

/* ---------- Client portal layout (fixed right sidebar) ---------- */
[dir="rtl"] .portal-sidebar { left: auto; right: 0; }
[dir="rtl"] .main-content { margin-left: 0 !important; margin-right: 280px; }
@media (max-width: 992px){ [dir="rtl"] .main-content { margin-right: 0; } }

/* ---------- Client portal: mirror physical properties inside cards ----------
   direction:rtl auto-flips text & flex order, but NOT physical left/right,
   border-left/right, padding-left or translateX. Mirror those here. */

/* Sidebar nav icons + hover slide */
[dir="rtl"] .nav-item i { margin-right: 0; margin-left: 14px; }
[dir="rtl"] .nav-item:hover { transform: translateX(-4px); }
[dir="rtl"] .nav-item.active { transform: none; }

/* Stat card corner "view" link */
[dir="rtl"] .stat-link { right: auto; left: 16px; }

/* Alert / accent-bordered cards: move the colored bar to the right edge */
[dir="rtl"] .alert { border-left: 0; border-right: 4px solid; }

/* Documentation search box: icon + input padding */
[dir="rtl"] .search-box i { left: auto; right: 18px; }
[dir="rtl"] .search-input { padding-left: 16px !important; padding-right: 52px !important; }

/* Documentation link hover indent */
[dir="rtl"] .doc-list a:hover { padding-left: 0; padding-right: 12px; }

/* Video card duration badge */
[dir="rtl"] .video-duration { right: auto; left: 12px; }

/* FAQ answer indent */
[dir="rtl"] .faq-answer { padding-left: 0; padding-right: 32px; }

/* Card text alignment (components not covered by the generic card rule) */
[dir="rtl"] .doc-card,
[dir="rtl"] .doc-card-content,
[dir="rtl"] .license-card,
[dir="rtl"] .video-card,
[dir="rtl"] .video-info { text-align: right; }
[dir="rtl"] .quick-link-card { text-align: center; }

/* Tables inside cards (invoices, orders, licenses, downloads) */
[dir="rtl"] .table th { text-align: right; }
[dir="rtl"] .table td { text-align: right; }

/* "End" alignment utility flips in RTL (e.g. amount / total columns) */
[dir="rtl"] .text-right { text-align: left; }
[dir="rtl"] .user-info { text-align: left; }

/* Tablet: sidebar is 240px wide, mirror the content offset */
@media (min-width: 768px) and (max-width: 992px) {
    [dir="rtl"] .main-content { margin-left: 0 !important; margin-right: 240px; }
}

/* Card headers: rely on direction:rtl alone. The earlier row-reverse double-flipped
   single-child headers (category name / FAQ heading) to the LEFT. Force normal row so
   the heading sits on the right and any action button goes to the left. */
[dir="rtl"] .card-header { flex-direction: row; }