/* ========================================
   Piperona Seller Landing - RTL Styles
   ======================================== */

/* Arabic Typography */
html[dir="rtl"] {
    font-family: 'Cairo', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

html[dir="rtl"] body {
    font-family: 'Cairo', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Flip layout for RTL */
html[dir="rtl"] .hero-container {
    direction: rtl;
}

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

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

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

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

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

/* Step connectors */
html[dir="rtl"] .step-connector {
    background: linear-gradient(270deg, var(--primary), var(--gray-200));
}

/* Benefits layout - checkmarks on right */
html[dir="rtl"] .benefits-grid {
    direction: rtl;
}

html[dir="rtl"] .benefits-list li {
    flex-direction: row;
}

html[dir="rtl"] .benefits-list li>div {
    text-align: right;
}

html[dir="rtl"] .benefit-check {
    margin-left: 0;
    margin-right: 0;
}

html[dir="rtl"] .benefits-content .section-title {
    text-align: right;
}

/* Footer grid */
html[dir="rtl"] .footer-grid {
    direction: rtl;
}

html[dir="rtl"] .footer-links ul {
    text-align: right;
}

/* Button arrows flip */
html[dir="rtl"] .btn svg {
    transform: scaleX(-1);
}

/* FAQ text alignment */
html[dir="rtl"] .faq-question {
    text-align: right;
}

html[dir="rtl"] .faq-answer p {
    text-align: right;
}

/* Feature cards */
html[dir="rtl"] .feature-card {
    text-align: right;
}

/* Steps - reversed for RTL (right to left: 1, 2, 3) */
html[dir="rtl"] .steps {
    flex-direction: row;
}

html[dir="rtl"] .step-content {
    text-align: center;
}

/* Language switcher button */
.lang-switch {
    font-weight: 600;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
}

.lang-switch:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

/* Responsive RTL adjustments */
@media (max-width: 768px) {
    html[dir="rtl"] .steps {
        flex-direction: column;
    }

    html[dir="rtl"] .footer-grid {
        text-align: center;
    }

    html[dir="rtl"] .footer-links ul {
        text-align: center;
    }

    html[dir="rtl"] .benefits-content .section-title {
        text-align: center;
    }
}