/* ============================================================
   ZOVA TRADING — ENGLISH (LTR) DIRECTION OVERRIDES
   Loaded ONLY on /en/ pages. Inert on Arabic pages (dir="rtl").
   All rules are scoped under html[dir="ltr"].
   ============================================================ */

/* ---------- Typography ----------
   El Messiri is an Arabic-display font; keep English headings
   in Cairo so Latin glyphs render crisply and consistently. */
html[dir="ltr"] body,
html[dir="ltr"] .zova-about-title,
html[dir="ltr"] .zova-founder-name,
html[dir="ltr"] .zova-founder-role,
html[dir="ltr"] .zova-acrostic-title {
    font-family: 'Cairo', 'El Messiri', sans-serif;
}

/* ---------- Root Direction ----------
   Several component stylesheets (fqa 3, hero 3, points 1, contact 2,
   achievement 1, ctad3, ctaf3) force `body { direction: rtl }` globally.
   In the English pages that must be overridden back to LTR, otherwise
   every flex layout, text alignment and fixed element renders RTL. */
html[dir="ltr"] body {
    direction: ltr !important;
    unicode-bidi: isolate;
}

/* ---------- Header / Nav ---------- */
/* Active + hover underline starts from the left edge */
html[dir="ltr"] .zova-nav-link.active::after,
html[dir="ltr"] .zova-nav-link:hover::after {
    right: auto;
    left: 0;
    background: linear-gradient(270deg, #d4af37 0%, #e5c158 100%);
}

/* Dropdown menu aligns to the left edge in LTR */
html[dir="ltr"] .zova-dropdown-menu {
    right: auto;
    left: 0;
}

/* ---------- Hero Side Panels ---------- */
/* English body text aligns left; flex push stays mirrored */
html[dir="ltr"] .zova-content-right,
html[dir="ltr"] .zova-content-left {
    text-align: left;
}

html[dir="ltr"] .zova-content-right {
    justify-content: flex-start;
}

html[dir="ltr"] .zova-content-left {
    justify-content: flex-end;
}

/* ---------- FAQ / Accordion ---------- */
html[dir="ltr"] .ebfq3-btn,
html[dir="ltr"] .ebfq3-question,
html[dir="ltr"] .ebfq3-question-text {
    text-align: left;
}

html[dir="ltr"] .ebfq3-icon {
    margin-right: 0;
    margin-left: 15px;
}

/* ---------- About ---------- */
/* Gold accent bar moves to the left in LTR (desktop only; mobile uses
   a direction-neutral bottom border) */
@media (min-width: 769px) {
    html[dir="ltr"] .zova-about-slogan-card {
        border-right: none;
        border-left: 4px solid var(--zova-gold-primary);
        border-radius: 14px 0 0 14px;
    }
}

/* Founder card text */
html[dir="ltr"] .zova-founder-card {
    text-align: left;
}

/* Top gold accent gradients start on the left */
html[dir="ltr"] .zova-value-card::before,
html[dir="ltr"] .zova-founder-card::before {
    background: linear-gradient(270deg, #d4af37, #f5e6be, transparent);
}

/* ---------- Footer ---------- */
/* Column title underline starts from the left (desktop only; mobile centers
   it with right:50%, so we must not override it there) */
@media (min-width: 769px) {
    html[dir="ltr"] .ebftr1-column-title::after {
        right: auto;
        left: 0;
        background: linear-gradient(270deg, #d4af37, transparent);
    }
}

/* Footer link hover slides forward (right in LTR) */
html[dir="ltr"] .ebftr1-link:hover {
    transform: translateX(5px);
}

html[dir="ltr"] .ebftr1-link:hover i {
    transform: translateX(3px);
}

/* ---------- Floating Contact Buttons ---------- */
/* In LTR the floating WhatsApp/phone stack sits on the right side */
html[dir="ltr"] .floating-whatsapp {
    left: auto;
    right: 25px;
}

html[dir="ltr"] .floating-phone {
    left: auto;
    right: 25px;
}

/* ---------- Activity Cards ---------- */
/* Forward arrow nudges right on hover in LTR */
html[dir="ltr"] .zova-activity-link:hover i {
    transform: translateX(4px);
}

/* ---------- Gallery Badge ---------- */
html[dir="ltr"] .zova-gallery-badge {
    right: auto;
    left: 15px;
}

/* ---------- Points Cards ---------- */
/* Large decorative background number moves to the start (top-left) corner */
html[dir="ltr"] .ebpt1-card-num {
    right: auto;
    left: 30px;
}

/* ---------- Mobile ---------- */
/* Mobile drawer slides in from the left in LTR */
@media (max-width: 992px) {
    html[dir="ltr"] .ebhdr9-hdr-open .ebhdr9-nav-menu-pages {
        right: auto;
        left: 0;
        border-left: none;
        border-right: 1px solid rgba(212, 175, 55, 0.3);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.9);
    }

    html[dir="ltr"] .ebhdr9-hdr-open .zova-dropdown-menu {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}

@media (max-width: 768px) {
    /* Floating contact buttons move to the right on mobile in LTR */
    html[dir="ltr"] .floating-whatsapp {
        left: auto !important;
        right: 15px !important;
    }

    html[dir="ltr"] .floating-phone {
        left: auto !important;
        right: 15px !important;
    }

    html[dir="ltr"] .zova-about-pillars {
        text-align: left;
    }

    html[dir="ltr"] .zova-about-float-badge {
        right: auto;
        left: 0;
    }

    html[dir="ltr"] .zova-about-exp-badge {
        left: auto;
        right: 0;
    }
}