/* ===== ARABIC / RTL OVERRIDES =====
   Loaded ONLY by pages in /ar/ — after the shared styles.css.
   Overrides font stacks and adjusts layout for right-to-left reading. */

/* --- Font family: prefer Noto Sans Arabic --- */
body {
    font-family: 'Noto Sans Arabic', 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans Arabic', 'Plus Jakarta Sans', sans-serif;
}

/* Elements that explicitly set font-family in styles.css need overrides too */
.filter-pill,
.filter-toggle-label,
.sidebar-input,
.sidebar-btn,
.mobile-article-nav select,
.lang-select-native {
    font-family: 'Noto Sans Arabic', 'Inter', sans-serif;
}

/* --- RTL list padding --- */
[dir="rtl"] .page-content ul,
[dir="rtl"] .page-content ol,
[dir="rtl"] .tool-detail ul,
[dir="rtl"] .tool-detail ol {
    padding-right: 24px;
    padding-left: 0;
}

/* --- RTL blockquote --- */
[dir="rtl"] blockquote {
    border-right: 3px solid var(--accent);
    border-left: none;
    padding-right: 16px;
    padding-left: 0;
}

/* --- RTL: flip directional SVG icons --- */
[dir="rtl"] .read-more-link svg,
[dir="rtl"] .popular-arrow,
[dir="rtl"] .tool-link-btn svg {
    transform: scaleX(-1);
}

/* --- RTL: reverse arrow hover direction --- */
[dir="rtl"] .popular-item:hover .popular-arrow {
    transform: translateX(-2px) scaleX(-1);
}

/* --- RTL: verdict border flip --- */
[dir="rtl"] .verdict {
    border-left: none;
    border-right: 3px solid var(--accent);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* --- RTL: rank badge position flip --- */
[dir="rtl"] .tcm-rank-badge {
    right: auto;
    left: 14px;
}

/* --- RTL: Learn More arrow flip --- */
[dir="rtl"] .tcm-btn-learn {
    direction: rtl;
}

/* --- RTL: visit icon flip --- */
[dir="rtl"] .tcm-btn-visit svg {
    transform: scaleX(-1);
}

/* --- RTL: benchmark snapshot accent border flip --- */
[dir="rtl"] .benchmark-item {
    border-left: none;
    border-right: 3px solid var(--accent);
    padding-left: 0;
    padding-right: 14px;
}

[dir="rtl"] .bench-desc {
    padding-left: 0;
    padding-right: 14px;
}

/* --- RTL: benchmark snapshot — mobile --- */
@media (max-width: 768px) {
    [dir="rtl"] .benchmark-item {
        border-right-width: 2px;
        padding-right: 10px;
        padding-left: 0;
    }

    [dir="rtl"] .bench-desc {
        padding-right: 0;
    }
}