/* ─────────────────────────────────────────────────────────────────────────
   RTL layer — loaded only by the Arabic locales (/ae/, /jo/).

   Everything here is scoped to [dir="rtl"], so this file is inert on any
   page that does not opt in. It is a separate stylesheet on purpose: adding
   these rules to styles.css would force the ?v= cache-bust on all 246 HTML
   pages (and the article template in analytic_gold/publish_article.py) to
   ship a change that only two locales can ever see.

   Only *physical* offsets need overriding. Flex/grid track order,
   justify-content, align-items, text-align:start and margin-inline already
   follow `direction`, so those rules are deliberately absent below.
   ───────────────────────────────────────────────────────────────────────── */


/* ── 1. Physical offsets CSS does not flip on its own ──────────────────── */

[dir="rtl"] .bcf-info-col {
    padding-left: 0;
    padding-right: 0.8rem;
}

/* The stat column sits on the far side of the card; its text hugs the card
   edge, which is the left edge once the grid tracks flip. */
[dir="rtl"] .bcf-stat {
    text-align: left;
}

/* FAQ list bullets: the '–' pseudo-element is absolutely positioned. */
[dir="rtl"] .faq-answer ul li {
    padding-left: 0;
    padding-right: 1.2rem;
}
[dir="rtl"] .faq-answer ul li::before {
    left: auto;
    right: 0;
}

/* Region dropdown: the panel is anchored to the button's leading edge. */
[dir="rtl"] .region-dropdown-menu {
    left: auto;
    right: 0;
}
[dir="rtl"] .region-dropdown-btn svg {
    margin-left: 0;
    margin-right: 0.2rem;
}

/* Exit-intent popup. */
[dir="rtl"] .popup-close {
    right: auto;
    left: 10px;
}
[dir="rtl"] .popup-broker-btn {
    text-align: right;
}
[dir="rtl"] .popup-broker-logo {
    border-right: none;
    border-left: 1px solid rgba(0, 0, 0, 0.22);
    padding-right: 0;
    padding-left: 14px;
    object-position: right center;
}

/* Legal pages (privacy-policy.html / terms-of-service.html) carry their own
   inline <style>; these are the three directional rules in it.

   NOT ACTIVE TODAY: /ae/ and /jo/ legal pages ship English copy (~4,270 Latin
   chars against 43 Arabic, and the Arabic is only region-dropdown labels), so
   they deliberately keep dir="ltr" -- an RTL base direction on English prose
   throws sentence-final periods to the left. These rules are here for the day
   that copy is actually translated; flipping a page is then just adding
   dir="rtl" and a link to this file. */
[dir="rtl"] .policy-section ul {
    padding-left: 0;
    padding-right: 1.5rem;
}
[dir="rtl"] .policy-highlight {
    border-left: none;
    border-right: 3px solid var(--gold-primary);
    border-radius: 8px 0 0 8px;
}
[dir="rtl"] .policy-section th,
[dir="rtl"] .policy-section td {
    text-align: right;
}

@media (max-width: 768px) {
    /* styles.css already centres this at ≤768px; restate it so the
       text-align:left above does not win on mobile. */
    [dir="rtl"] .bcf-stat { text-align: center; }
}


/* block4 takeaways: the bullet is a directional arrow, so it mirrors -- and
   like the FAQ bullet it is absolutely positioned, so `left` does not flip. */
[dir="rtl"] .analytics-takeaways-list li {
    padding-left: 0;
    padding-right: 1rem;
}
[dir="rtl"] .analytics-takeaways-list li::before {
    content: '←';        /* LEFTWARDS ARROW */
    left: auto;
    right: 0;
}


/* ── 2. Decorative sweep follows the reading direction ─────────────────── */

@keyframes shiny-sweep-rtl {
      0% { left: 100%; }
     50% { left: -100%; }
    100% { left: -100%; }
}
[dir="rtl"] .trade-btn::after,
[dir="rtl"] .popup-broker-shiny::after {
    animation-name: shiny-sweep-rtl;
}


/* ── 3. LTR islands ────────────────────────────────────────────────────────
   Third-party widgets and Latin/numeric atoms are NOT mirrored. TradingView
   draws a left-to-right time axis on Arabic financial sites too, and its
   ticker mask (.ticker-container::before) is pinned to the physical left.
   ─────────────────────────────────────────────────────────────────────── */

[dir="rtl"] .chart-container,
[dir="rtl"] .chart-wrapper,
[dir="rtl"] .tradingview-widget-container,
[dir="rtl"] .ticker-container {
    direction: ltr;
}

/* The live price is written by price-live.js as
   'AED 17,156.24 (≈ $3,850 USD)' and sits inline inside an Arabic sentence.
   Without an isolate the parentheses mirror and the two number runs swap. */
[dir="rtl"] #gold-price-aed-display,
[dir="rtl"] #gold-price-jod-display,
[dir="rtl"] #faq-usd-example,
[dir="rtl"] #faq-local-example {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Short mixed atoms — 'TradingView ★★★★★ 4.7', '860,000+', 'BEST 2026',
   'منذ 2008'. `plaintext` derives each one's base direction from its own
   first strong character, so Latin-led strings stay LTR and Arabic-led
   strings stay RTL without having to enumerate which is which. */
[dir="rtl"] .bcf-ratings > span,
[dir="rtl"] .bcf-tags > span,
[dir="rtl"] .bcf-stat-num,
[dir="rtl"] .bcf-badge,
[dir="rtl"] .bcf-note,
[dir="rtl"] .footer-email a,
[dir="rtl"] .footer-copyright,
[dir="rtl"] .region-search-input {
    unicode-bidi: plaintext;
}