/* Right-to-left marketing site (Arabic, 2026-10-03). Loaded by layouts/site3.php
   ONLY when the page language is in SiteContentService::RTL, AFTER crafto's own
   style-rtl.css, which mirrors the template (floats, spacing utilities, header,
   dropdowns). This file mirrors what style-rtl.css cannot know about: our own
   site3-overrides.css rules and the Arabic typography. */

/* Arabic script: Manrope has no Arabic glyphs, so name system Arabic faces
   explicitly (macOS/iOS: Geeza Pro, Windows: Segoe UI / Tahoma, Android: Noto)
   instead of letting each browser pick an arbitrary fallback. No webfont: CSP
   font-src is 'self' and a system face costs nothing to load. */
:root {
    --alt-font: 'Manrope', 'Segoe UI', 'Geeza Pro', 'Noto Sans Arabic', 'Noto Naskh Arabic', Tahoma, sans-serif;
    --primary-font: 'Manrope', 'Segoe UI', 'Geeza Pro', 'Noto Sans Arabic', 'Noto Naskh Arabic', Tahoma, sans-serif;
}

/* Negative tracking (crafto's .ls-minus-*px and heading defaults) pulls the
   letters of a cursive script apart at the joins. Arabic is never tracked. */
html[dir="rtl"] body,
html[dir="rtl"] body * {
    letter-spacing: 0 !important;
}
/* Arabic needs more line height than Latin at the same size. */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 {
    line-height: 1.35;
}

/* Arrows point the way you read. */
html[dir="rtl"] .bx-right-arrow-alt,
html[dir="rtl"] .bx-left-arrow-alt,
html[dir="rtl"] .bx-chevron-right,
html[dir="rtl"] .bx-chevron-left {
    transform: scaleX(-1);
}

/* Header login button: overrides.css sets margin-left on phones. */
@media (max-width: 575px) {
    html[dir="rtl"] .navbar .yr-nav-login-btn.btn.btn-small {
        margin-left: 0 !important;
        margin-right: 8px !important;
    }
}
html[dir="rtl"] .yr-nav-login-btn.ms-15px {
    margin-left: 0 !important;
    margin-right: 15px !important;
}

/* Stack slides >=1200px: overrides.css bleeds the screenshot to the RIGHT edge
   (and LEFT on .yr-stack-flip). Mirror both. */
@media (min-width: 1200px) {
    html[dir="rtl"] .stack-box .yr-stack-media-col { right: auto; left: 0; text-align: left; }
    html[dir="rtl"] .stack-box .yr-stack-flip .yr-stack-media-col { left: auto; right: 0; text-align: right; }
    html[dir="rtl"] .stack-box .yr-stack-media-col .atropos-inner { text-align: left !important; }
    html[dir="rtl"] .stack-box .yr-stack-flip .yr-stack-media-col .atropos-inner { text-align: right !important; }
    html[dir="rtl"] .stack-box .yr-stack-media-col img { border-radius: 0 18px 18px 0; }
    html[dir="rtl"] .stack-box .yr-stack-flip .yr-stack-media-col img { border-radius: 18px 0 0 18px; }
    html[dir="rtl"] .stack-box .stack-item .yr-stack-copy { margin-left: auto !important; margin-right: 0 !important; }
    html[dir="rtl"] .stack-box .yr-stack-flip .yr-stack-copy { margin-right: auto !important; margin-left: 0 !important; }
}

/* Latin-only fragments inside Arabic text (brand, prices, e-mails, URLs) keep
   their own direction when wrapped in <bdi>/<span dir="ltr">; inputs that take
   an e-mail or phone stay left-to-right. */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: right;
}