/*
 * English (ltr) overrides, loaded only on /en pages (see layouts/website.blade.php).
 *
 * style-ltr.min.css (generated from style.min.css with RTLCSS) already mirrors the main
 * stylesheet. This file fixes what the mirror can't: the inline <style> block and style=""
 * attributes of the layout, and places where English text needs a different treatment.
 * Every rule starts with html[dir="ltr"] so it wins over the inline layout styles; when a
 * rule doesn't apply, match the depth of the original selector.
 */

/* ---------- floating WhatsApp button: bottom right, away from the start of the text ---------- */
html[dir="ltr"] .fixed-icon,
html[dir="ltr"] .float {
    left: auto;
    right: 10px;
}
html[dir="ltr"] .float {
    right: 24px;
}

/* ---------- desktop dropdowns open from the left edge of their item ---------- */
html[dir="ltr"] .dropdown-menu {
    text-align: left !important;
    left: 0 !important;
    right: auto !important;
}

/* ---------- mobile menu: the ▼ arrow and the indented pricing item (inline styles) ---------- */
html[dir="ltr"] .mobile-list .mobile-dropdown-toggle span {
    float: right !important;
    margin-right: 0 !important;
    margin-left: 5px !important;
}
html[dir="ltr"] .mobile-list .nav-item[style*="padding-right"] {
    padding-right: 0 !important;
    padding-left: 15px !important;
}

/* ---------- big one-word badges in the ROI cards ("Integration", "Collections") are wider than
   their Arabic words and spill out of the card at ~1024px: scale them with the screen ---------- */
html[dir="ltr"] .roi-card .number {
    font-size: clamp(2.2rem, 2.4vw + 1rem, 3.2rem);
}

/* ---------- "forward" arrow icons point left in Arabic: mirror them ---------- */
html[dir="ltr"] img[src*="icons/arrow"] {
    transform: scaleX(-1);
}