/* =============================================================================
   Right-to-left pages (Arabic).
   Loaded only on those pages, after the page's own styles. The browser already
   mirrors anything laid out with flex, grid or tables; this file mirrors the
   rules that name a side (left/right), and sets the Arabic type.
   ============================================================================= */

/* Type: an Arabic font, more room between lines, and no letter-spacing
   (spacing breaks the joins between Arabic letters). */
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    font-family: "IBM Plex Sans Arabic", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
}

html[dir="rtl"] * {
    letter-spacing: 0 !important;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
    line-height: 1.45;
}

/* The phone mock-ups show the app, which is in English: keep them left to right. */
html[dir="rtl"] .g-frame,
html[dir="rtl"] .sv-frame {
    direction: ltr;
    text-align: left;
}

/* Email and web addresses typed by the visitor read left to right. */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: right;
}

/* ---- Text that was pinned to the left ---- */
html[dir="rtl"] .pricing-features,
html[dir="rtl"] .pricing-table,
html[dir="rtl"] .pricing-tiers-table,
html[dir="rtl"] .leadgen-benefits,
html[dir="rtl"] .leadgen-content,
html[dir="rtl"] .faq-question,
html[dir="rtl"] .form-error,
html[dir="rtl"] .exit-popup-content,
html[dir="rtl"] .comparison-table thead th:first-child,
html[dir="rtl"] .comparison-table tbody td:first-child {
    text-align: right;
}

html[dir="rtl"] .char-counter {
    text-align: left;
}

html[dir="rtl"] .comparison-table thead th:first-child,
html[dir="rtl"] .comparison-table tbody td:first-child {
    padding-left: 0;
    padding-right: var(--spacing-md);
}

@media (min-width: 768px) {
    html[dir="rtl"] .footer-brand,
    html[dir="rtl"] .ebook-cta-content {
        text-align: right;
    }

    html[dir="rtl"] .ebook-cta-text {
        margin-left: auto;
        margin-right: 0;
    }
}

@media (min-width: 1024px) {
    html[dir="rtl"] .hero .container,
    html[dir="rtl"] .hero-cta,
    html[dir="rtl"] .feature-card {
        text-align: right;
    }

    html[dir="rtl"] .feature-icon {
        margin-left: auto;
        margin-right: 0;
    }
}

/* ---- Accent bars and rounded corners that sat on the left ---- */
html[dir="rtl"] .pain-point-card,
html[dir="rtl"] .pricing-honesty-note,
html[dir="rtl"] .post-tip,
html[dir="rtl"] .pb-math {
    border-left: 0;
}

html[dir="rtl"] .pain-point-card,
html[dir="rtl"] .pricing-honesty-note,
html[dir="rtl"] .post-tip {
    border-right: 4px solid var(--color-primary);
}

html[dir="rtl"] .pb-math {
    border-right: 5px solid var(--color-primary);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

html[dir="rtl"] .post-tip {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

html[dir="rtl"] .post ol {
    padding-left: 0;
    padding-right: 1.4rem;
}

html[dir="rtl"] .pb-form-note svg {
    margin-right: 0;
    margin-left: 4px;
}

/* ---- Header, language menu, pop-up ---- */
html[dir="rtl"] .lang-switch {
    margin-left: var(--spacing-xs);
    margin-right: auto;
}

html[dir="rtl"] .lang-switch ul {
    right: auto;
    left: 0;
}

@media (min-width: 768px) {
    html[dir="rtl"] .nav {
        margin-left: 0;
        margin-right: auto;
    }

    html[dir="rtl"] .lang-switch {
        margin-left: 0;
        margin-right: var(--spacing-lg);
    }
}

html[dir="rtl"] .exit-popup-close {
    right: auto;
    left: var(--spacing-sm);
}

html[dir="rtl"] .exit-popup-headline {
    padding-right: 0;
    padding-left: var(--spacing-xl);
}

/* The language row at the top of the legal and ebook pages: the same order as on every
   other page (English first), sitting on the left */
html[dir="rtl"] .lang-row {
    direction: ltr;
    text-align: left !important;
}

/* Legal pages: lists indent from the right */
html[dir="rtl"] body > ul,
html[dir="rtl"] body > ol {
    padding-left: 0;
    padding-right: 24px;
}

/* The hidden spam-trap field is parked off-screen. On a right-to-left page anything parked
   to the left makes the page scroll sideways, so park it to the right instead. */
html[dir="rtl"] .form-hp {
    left: auto;
    right: -9999px;
}