/* ===================================================================
   RTL Overrides for Arabic version
   Loaded only on [dir="rtl"] pages
   =================================================================== */

/* --- Font --- */
[dir="rtl"] body {
    font-family: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- Hero frame perspective flip --- */
[dir="rtl"] .hero__app-frame {
    transform: rotateY(4deg) rotateX(2deg);
}
[dir="rtl"] .hero__app-frame:hover {
    transform: rotateY(0) rotateX(0);
}

/* --- Score row label width for Arabic text --- */
[dir="rtl"] .sp__score-row > span:first-child {
    width: 120px;
}

/* --- Bar item label width --- */
[dir="rtl"] .sp__bar-item span:first-child {
    width: 60px;
}

/* --- FAQ arrow direction --- */
[dir="rtl"] .faq__question::after {
    margin-inline-start: 0;
    margin-inline-end: auto;
}

/* --- Arabic font on buttons/interactive elements --- */
[dir="rtl"] .btn,
[dir="rtl"] .screenshots__tab,
[dir="rtl"] .whatsapp-float,
[dir="rtl"] .side-nav__label {
    font-family: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- Logos carousel RTL direction --- */
[dir="rtl"] .logos__track {
    animation-name: logos-scroll-rtl;
    direction: ltr;
}
@keyframes logos-scroll-rtl {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(100% / 3)); }
}