/* ===== 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);
}