/* ==========================================================================
   Arabic pages only (loaded by the pages under /ar/).

   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.
   ========================================================================== */

/* IBM Plex Sans Arabic, SIL Open Font License (OFL-IBM-Plex-Sans-Arabic.txt).
   Declared under its own name and, limited to Arabic code points, under the
   two Latin families the site already uses -- so every existing font stack
   picks up Arabic letters without one rule being rewritten, while Latin
   words, the brand name and numbers stay in Adelle Sans. */
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("plex-arabic-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url("plex-arabic-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("plex-arabic-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700 900; font-display: swap; src: url("plex-arabic-700.woff2") format("woff2"); }

@font-face { font-family: "Adelle Sans EXT"; font-weight: 100 450; font-display: swap; src: url("plex-arabic-400.woff2") format("woff2");
             unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Adelle Sans EXT"; font-weight: 451 550; font-display: swap; src: url("plex-arabic-500.woff2") format("woff2");
             unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Adelle Sans EXT"; font-weight: 551 650; font-display: swap; src: url("plex-arabic-600.woff2") format("woff2");
             unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Adelle Sans EXT"; font-weight: 651 1000; font-display: swap; src: url("plex-arabic-700.woff2") format("woff2");
             unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 100 450; font-display: swap; src: url("plex-arabic-400.woff2") format("woff2");
             unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 451 650; font-display: swap; src: url("plex-arabic-600.woff2") format("woff2");
             unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 651 1000; font-display: swap; src: url("plex-arabic-700.woff2") format("woff2");
             unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

html[lang="ar"] {
    --font-primary: "Adelle Sans EXT", "IBM Plex Sans Arabic", system-ui, sans-serif;
}

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

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

/* Arabic needs a little more room between lines than Latin at the same size. */
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] 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[lang="ar"] a[href^="tel:"],
html[lang="ar"] a[href^="mailto:"],
html[lang="ar"] .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[lang="ar"] .about-main-title { line-height: 1.55; margin-bottom: 1.4rem; }
html[lang="ar"] :is(h1, h2, h3):not(.big-main-headline):not([class*="kinetic"]),
html[lang="ar"] :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;
}