/* ==========================================================================
   Right-to-left pages (Arabic /ar/ and Persian /fa/). Each language adds
   its own typeface from font-<lang>.css.

   The layout itself is mirrored by the *.rtl.css files that rtlcss writes
   from the English stylesheets. This file only adds what a mirror cannot:
   an Arabic typeface, and the habits of Latin typography that break Arabic.
   ========================================================================== */

/* Tracking pulls joined Arabic letters apart, and Arabic has no italic. */
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after {
    letter-spacing: 0 !important;
}

html[dir="rtl"] em,
html[dir="rtl"] cite,
html[dir="rtl"] i:not([class*="ph"]) {
    font-style: normal;
}

/* Arabic needs a little more room between lines than Latin at the same size. */
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] dd {
    line-height: 1.85;
}

/* Arrows point the way the page reads. */
html[dir="rtl"] .ph-arrow-right::before,
html[dir="rtl"] .ph-arrow-left::before,
html[dir="rtl"] .ph-arrow-up-right::before,
html[dir="rtl"] .ph-arrow-up-left::before,
html[dir="rtl"] .ph-arrow-down-right::before,
html[dir="rtl"] .ph-caret-right::before,
html[dir="rtl"] .ph-caret-left::before,
html[dir="rtl"] .ph-arrow-line-right::before,
html[dir="rtl"] .ph-arrow-circle-right::before,
html[dir="rtl"] .ph-paper-plane-right::before,
html[dir="rtl"] .ph-paper-plane-tilt::before {
    display: inline-block;
    transform: scaleX(-1);
}

/* Phone numbers, emails and prices keep their own order inside Arabic text. */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] .ft-val {
    unicode-bidi: plaintext;
}

/* The quote form and the WhatsApp widget write their own <style> from
   quote-modal.js, so rtlcss never sees them. Mirrored here instead; the
   html[dir] prefix outweighs the injected single-class rules. */
html[dir="rtl"] .bq-close { right: auto; left: 1.2rem; }
html[dir="rtl"] .bq-check { right: auto; left: 5px; }
html[dir="rtl"] .bq-field-icon { left: auto; right: .9rem; }
html[dir="rtl"] .bq-input { padding: .8rem 2.5rem .8rem 1rem; }
html[dir="rtl"] .bq-summary { text-align: right; }
html[dir="rtl"] .bq-summary-val { text-align: left; }
html[dir="rtl"] .bq-pill:hover,
html[dir="rtl"] .bq-pill.selected { transform: translateX(-3px); }
html[dir="rtl"] .bq-btn .ph-arrow-right::before,
html[dir="rtl"] .bq-btn .ph-arrow-left::before { display: inline-block; transform: scaleX(-1); }

html[dir="rtl"] #bisanWaFloat { right: auto; left: 24px; }
html[dir="rtl"] .bwa-widget { align-items: flex-start; }
html[dir="rtl"] .bwa-trigger-btn { padding: .75rem 1rem .75rem 1.25rem; }
html[dir="rtl"] .bwa-popup { right: auto; left: 0; }
html[dir="rtl"] .bwa-status-dot { right: auto; left: 0; }
html[dir="rtl"] .bwa-bubble { border-radius: 14px 14px 4px 14px; }
html[dir="rtl"] .bwa-bubble-time { text-align: left; }
@media (max-width: 540px) {
    html[dir="rtl"] #bisanWaFloat { left: 18px; }
    html[dir="rtl"] .bwa-trigger-btn { padding: .8rem; }
    html[dir="rtl"] .bwa-popup { left: -6px; }
}

/* legal pages: notice that the English text is the binding version */
.legal-note {
    padding: 12px 16px;
    border-inline-start: 3px solid currentColor;
    background: rgba(127, 127, 127, 0.08);
    font-size: 0.95em;
    opacity: 0.9;
}

/* Arabic letters drop below the baseline (ي ج ع); the Latin line-height of
   these display headings let them run into what sits underneath. */
html[dir="rtl"] .about-main-title { line-height: 1.55; margin-bottom: 1.4rem; }
html[dir="rtl"] :is(h1, h2, h3):not(.big-main-headline):not([class*="kinetic"]),
html[dir="rtl"] :is(.svc-title, .svc-h2, .svc-deck-title, .nfc-h1, .nfc-h2, .roadmap-title,
                    .reviews-main-title, .blog-main-title, .about-box-title, .faq-title) {
    line-height: 1.4;
}