/* ==========================================================================
   RTL / Arabic support — loaded only on right-to-left locales (config
   localization.rtl_locales), AFTER style.rtl.css / custom.rtl.css.

   The bulk of the mirroring is in the generated *.rtl.css files (rtlcss, see
   `npm run rtl`). This file holds only what rtlcss cannot reach:
     1. the Arabic font (same Noto Sans Arabic as codspot-future),
     2. things that must stay left-to-right (logo tickers),
     3. mirrored versions of the direction-dependent rules that live in
        per-view inline <style> blocks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Arabic font — Noto Sans Arabic, SIL OFL (licence: ../fonts/Noto_Sans_Arabic/OFL.txt,
   which must ship with the files). Same four static weights codspot-future uses.

   Each weight is declared three times: under its own name, and under the two
   Latin families the site already uses ("Inter", "Bricolage Grotesque"). The
   browser merges @font-face rules of the same family by unicode-range, so the
   Google-hosted faces keep drawing Latin text (brand names, numbers) and these
   faces draw the Arabic codepoints — every existing font-family declaration,
   including inline ones, picks up Arabic with no change. unicode-range also
   keeps the files out of the download path until Arabic text is on the page.
   -------------------------------------------------------------------------- */
@font-face{font-family:"Noto Sans Arabic";src:url("../fonts/Noto_Sans_Arabic/static/NotoSansArabic-Regular.ttf") format("truetype");font-weight:100 400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF}
@font-face{font-family:"Noto Sans Arabic";src:url("../fonts/Noto_Sans_Arabic/static/NotoSansArabic-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF}
@font-face{font-family:"Noto Sans Arabic";src:url("../fonts/Noto_Sans_Arabic/static/NotoSansArabic-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF}
@font-face{font-family:"Noto Sans Arabic";src:url("../fonts/Noto_Sans_Arabic/static/NotoSansArabic-Bold.ttf") format("truetype");font-weight:700 900;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF}

@font-face{font-family:"Inter";src:url("../fonts/Noto_Sans_Arabic/static/NotoSansArabic-Regular.ttf") format("truetype");font-weight:100 400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF}
@font-face{font-family:"Inter";src:url("../fonts/Noto_Sans_Arabic/static/NotoSansArabic-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF}
@font-face{font-family:"Inter";src:url("../fonts/Noto_Sans_Arabic/static/NotoSansArabic-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF}
@font-face{font-family:"Inter";src:url("../fonts/Noto_Sans_Arabic/static/NotoSansArabic-Bold.ttf") format("truetype");font-weight:700 900;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF}

@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/Noto_Sans_Arabic/static/NotoSansArabic-Regular.ttf") format("truetype");font-weight:100 400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/Noto_Sans_Arabic/static/NotoSansArabic-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/Noto_Sans_Arabic/static/NotoSansArabic-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/Noto_Sans_Arabic/static/NotoSansArabic-Bold.ttf") format("truetype");font-weight:700 900;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF}

/* Form controls don't inherit font-family by default. */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button{font-family:inherit}

/* Arabic is a joined script: the negative/positive tracking tuned for Inter and
   Bricolage breaks letter joining, so tracking is reset on Arabic pages. */
html[lang="ar"] body,
html[lang="ar"] body *{letter-spacing:normal !important}

/* Arabic glyphs sit taller than Latin ones; give tight headings a little room. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3{line-height:1.35}

/* Directional icons (back/next arrows) carry this class in the markup. */
html[dir="rtl"] .rtl-flip{transform:scaleX(-1)}

/* --------------------------------------------------------------------------
   2. Must stay left-to-right
   -------------------------------------------------------------------------- */

/* Logo / testimonial tickers: jquery.webticker positions and animates with
   `left`, so the strips keep LTR flow. Their fade masks go back to their
   original sides (the mask images are drawn for a specific edge). */
html[dir="rtl"] .delivery__companies .top,
html[dir="rtl"] .early__access .outer__early .grid{direction:ltr}
html[dir="rtl"] .delivery__companies .tickercontainer .mask:before{left:0;right:auto}
html[dir="rtl"] .delivery__companies .tickercontainer .mask:after{right:0;left:auto}

/* Phone numbers, emails and URLs typed into forms read LTR even on Arabic pages. */
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"]{direction:ltr;text-align:right}

/* --------------------------------------------------------------------------
   3. Mirrors of inline <style> rules in individual views
   -------------------------------------------------------------------------- */

/* official/ads_sign_up.blade.php */
html[dir="rtl"] .signup-hero-content{padding-right:0;padding-left:40px}
html[dir="rtl"] .signup-hero-content ul li{padding-left:0;padding-right:28px;text-align:right}
html[dir="rtl"] .signup-hero-content ul li::before{left:auto;right:0}
html[dir="rtl"] .signup-form-card h2{text-align:right}
html[dir="rtl"] .signup-divider::before{left:auto;right:0}
html[dir="rtl"] .signup-divider::after{right:auto;left:0}
@media (max-width: 991px){
    html[dir="rtl"] .signup-hero-content{padding-left:0;text-align:center}
}
@media (max-width: 575px){
    html[dir="rtl"] .signup-hero-content ul{text-align:right}
}

/* posts/post.blade.php + help-tutorials/tutorial.blade.php — article body.
   Scoped to [dir="rtl"] on the content wrapper, which is set from the language
   of the content actually rendered (an English fallback stays LTR). */
[dir="rtl"] .section-content ul,
[dir="rtl"] .section-content ol{margin-left:0;margin-right:1.5rem}
[dir="rtl"] .section-content blockquote{border-left:0;padding-left:0;border-right:4px solid #ccc;padding-right:1rem}
[dir="rtl"] .customer-story{border-left:0;border-right:4px solid #007bff}
html[dir="rtl"] .blog-language-switcher{right:auto;left:clamp(16px, 3vw, 28px)}
@media (max-width: 768px){
    html[dir="rtl"] .blog-language-switcher{right:auto;left:12px}
}

/* posts/index.blade.php + help-tutorials/index.blade.php */
html[dir="rtl"] .tutorial__list .elem__tutorial .media{margin-right:0;margin-left:48px}
@media (max-width: 768px){
    html[dir="rtl"] .tutorial__list .elem__tutorial .media{margin-left:0}
}

/* partner/join-us.blade.php */
html[dir="rtl"] .custom-checkbox input[type="checkbox"]{margin-right:0;margin-left:10px}
html[dir="rtl"] .success-details{text-align:right}
html[dir="rtl"] .success-details li{padding-left:0;padding-right:24px}
html[dir="rtl"] .success-details li:before{left:auto;right:0}

/* official/integrations.blade.php — search icon on the start (right) side. */
html[dir="rtl"] .search-input-wrapper svg{left:auto;right:20px}
html[dir="rtl"] .search-input-wrapper input{padding:0 48px 0 20px}
