/* ============================================================
   Hebrew (RTL) overrides
   Loaded only on Hebrew pages via translate/he/main.html, after
   main-styles.css. Add html[dir=rtl] rules here (not in main-styles.css).
   ============================================================ */

/* --- Chart config header icons (camera/screenshot + fullscreen) --- */
/* The header is display:flex; .downloadButton uses margin-left:auto to push
   itself and the trailing fullscreen button to the right edge in LTR. That
   physical margin does not flip under RTL, leaving the icons on the wrong
   side. Mirror the auto margin (and the button's inner padding) so both icons
   sit together on the left/start edge, matching the mirrored toolbar. */
html[dir=rtl] .downloadButton {
    margin-left: 0;
    margin-right: auto;
}

html[dir=rtl] .popupSection__headerButton {
    padding-left: 0;
    padding-right: 1.5rem;
}

/* --- Left sidebar / main menu --- */
html[dir=rtl] .mainMenu {
    border-right: none;
    border-left: 1px solid #232939;
}

/* Sidebar rail items are [icon][fixed-width text] flex rows. The base rule
   forces text-align:left on the label, which under RTL leaves the text hugging
   the far side of its box away from the (right-aligned) icon, so Hebrew,
   English and mixed labels all sit at inconsistent offsets. Align the label
   toward the icon (right) so every item lines up the same regardless of script. */
html[dir=rtl] .mainMenu__menuLink span,
html[dir=rtl] .mainMenu__home span {
    text-align: right !important;
}
html[dir=rtl] .mainMenu__menuItem {
    border-radius: 0 13px 13px 0;
}

html[dir=rtl] .mainMenu__menuItem:after,
html[dir=rtl] .mainMenu__menuItem:before {
    right: auto;
    left: 0;
}

html[dir=rtl] .mainMenu__childInner {
    padding: 1.5rem 2.5rem 2.5rem 1rem;
}

html[dir=rtl] .mainMenu__childWrapper {
    left: auto;
    right: 2.5rem;
}

html[dir=rtl] .mainMenu__childWrapper--active {
    right: 0;
}

html[dir=rtl] .mainMenu__childWrapper ul {
    padding-right: 0;
    padding-left: 1rem;
}

/* Collapsible sidebar toggle button sits at the left edge in LTR */
@media (min-width: 1025px) {
    html[dir=rtl] .sidebarToggle {
        left: auto;
        right: 124px;
        transform: translateX(50%);
    }

    html[dir=rtl] .sidebar-collapsed .sidebarToggle {
        left: auto;
        right: 16px;
    }

    html[dir=rtl] .sidebar-collapsed .mainMenu {
        border-left: none;
    }

    /* Chevron points the other way in RTL (open + collapsed states) */
    html[dir=rtl] .sidebarToggle svg {
        transform: rotate(180deg);
    }

    html[dir=rtl] .sidebar-collapsed .sidebarToggle svg {
        transform: rotate(0deg);
    }
}

/* --- Footer --- */
html[dir=rtl] .footnotes,
html[dir=rtl] .footer-text {
    float: right;
}

html[dir=rtl] .main-footer .links :not(:last-child) {
    padding-right: 0;
    margin-right: 0;
    padding-left: 5px;
    margin-left: 5px;
}

/* --- Tables --- */
html[dir=rtl] .table thead th {
    text-align: right;
}

/* --- wysiwyg lists --- */
html[dir=rtl] .wysiwyg ul li {
    padding-left: 0;
    padding-right: 1.7rem;
}

html[dir=rtl] .wysiwyg ul li:before {
    left: auto;
    right: 0;
}

html[dir=rtl] .wysiwyg ol li {
    padding-left: 0;
    padding-right: 2rem;
}

html[dir=rtl] .wysiwyg ol li:before {
    left: auto;
    right: 0;
    text-align: right;
}

/* --- Page description header (chart pages) --- */
html[dir=rtl] .dashboardChart__header {
    text-align: right;
}

html[dir=rtl] .pageDesc__button--prev {
    border-right: none;
    border-left: 1px solid #e9effa;
}

html[dir=rtl] .pageDesc__button--next {
    border-left: none;
    border-right: 1px solid #e9effa;
}

/* --- Info block / single block --- */
html[dir=rtl] .singleBlock__circle {
    margin-right: 0;
    margin-left: 1rem;
}

/* --- Alerts --- */
html[dir=rtl] .alert__inner {
    padding: .75rem 1.25rem 1.25rem 3rem;
}

html[dir=rtl] .alert__close {
    right: auto;
    left: 0;
}

/* --- Popup / mobile menu --- */
html[dir=rtl] .popupMenu__close span {
    margin-left: 0;
    margin-right: 2rem;
}

html[dir=rtl] .popupMenu__inner {
    left: auto;
    right: 0;
}

html[dir=rtl] .popupMenu__menuItem--mmenu:before {
    right: auto;
    left: 7px;
    transform: rotate(-135deg) translateY(-50%);
}

html[dir=rtl] .popupMenu__socials {
    margin-left: 0;
    margin-right: -4px;
}

html[dir=rtl] .menuBeam__formClose {
    right: auto;
    left: 0;
}

/* --- Beam nav (secondary top nav) --- */
html[dir=rtl] .beamNav {
    margin-right: 0;
    margin-left: -1rem;
}

html[dir=rtl] .beamNav__button {
    text-align: right;
    padding: 2.8rem 1.7rem 2.7rem 6.5rem;
}

html[dir=rtl] .beamNav__buttonArrow {
    right: auto;
    left: 2rem;
}

html[dir=rtl] .beamNav__item:last-child .beamNav__child {
    right: auto;
    left: 0;
}

html[dir=rtl] .beamNav__child {
    left: auto;
    right: 0;
}

html[dir=rtl] .beamNav__child li a svg {
    margin-right: 0;
    margin-left: 1rem;
}

/* --- Main search --- */
html[dir=rtl] .mainSearch__input {
    padding-left: 2rem;
    padding-right: 8rem;
}

html[dir=rtl] .mainSearch__button {
    left: auto;
    right: 0;
}

html[dir=rtl] .mainSearch__button:before {
    right: auto;
    left: 0;
}

/* --- Form selects / labels --- */
html[dir=rtl] .form__group--select:after {
    right: auto;
    left: 3.5rem;
}

html[dir=rtl] .form__label {
    left: auto;
    right: 2.5rem;
}

html[dir=rtl] .form__checkbox~label {
    padding-left: 0;
    padding-right: 3.9rem;
}

html[dir=rtl] .form__checkbox~label:before {
    left: auto;
    right: 0;
}

html[dir=rtl] .form__checkbox~label:after {
    left: auto;
    right: 1rem;
    transform: translate(50%, -50%);
}

/* --- Mobile off-canvas menu (mmenu) --- */
html[dir=rtl] .mm-spn.mm-spn--navbar:before {
    left: auto;
    right: var(--mm-spn-item-indent);
    transform: rotate(45deg) translate(-50%, -50%);
}

html[dir=rtl] .mm-spn li:before {
    right: auto;
    left: calc(var(--mm-spn-item-height) / 2);
    transform: rotate(-135deg) translateY(-50%);
}

html[dir=rtl] .mm-spn a:not(:last-child):after {
    right: auto;
    left: 0;
}

/* --- Chart header toolbar (title, badges, currency, alert, favorite, promo) --- */
html[dir=rtl] .pageDesc__title,
html[dir=rtl] .pageDesc__text,
html[dir=rtl] .pageDesc__content {
    text-align: right;
}

/* Alert + Favorite buttons float to the left edge in RTL */
html[dir=rtl] .favorite-group {
    float: left;
}

/* Spacing between the alert and favorite buttons (mirrors inline margin-left:7px) */
html[dir=rtl] #button_alert {
    margin-left: 0;
    margin-right: 7px;
}

/* Terminal button sits left of the favorite button under RTL; its base
   margin-right:7px lands on the wrong (outer) side, leaving it tight against
   the neighbor. Add the gap on the left instead. */
html[dir=rtl] .terminal-group {
    margin-right: 0;
    margin-left: 7px;
}

/* API promo box sits on the left in RTL (mirrors inline float:right in newad.html) */
html[dir=rtl] .pageDesc #bj-wrap {
    float: left;
}

@media (max-width: 800px) {
    /* Reflowed toolbar: reset physical margin used to break onto a new row */
    html[dir=rtl] .pageDesc__content > .getIndicator:first-of-type,
    html[dir=rtl] .pageDesc__content > a.getIndicator,
    html[dir=rtl] .pageDesc__content > .favorite-group#button_alert {
        margin-left: auto;
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    html[dir=rtl] .favorite-group {
        float: right;
    }
}

/* --- Top navbar (Hebrew): logo + main menu on the right, auth on the left --- */
/* Let the banner flow RTL so the logo (first DOM child) sits at the right edge
   and the nav block follows to its left; mirror the navbar's physical
   float/padding so the menu items line up right-to-left next to the logo. */
html[dir=rtl] .bitbo-banner-inner {
    padding: 20px 30px 20px 0;
}

html[dir=rtl] .main-navbar {
    float: right;
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 35px;
}

/* Profile + logout (auth) group pushed to the far left edge in RTL. */
html[dir=rtl] .main-navbar .auth-links {
    margin-left: 0;
    margin-right: auto;
}

/* --- Chart footer export buttons (Hebrew) --- */
/* Labels are Latin (API, CSV, XLSX, JSON); keep the icon before the label
   (LTR order) so the icon aligns with its text like the English version,
   instead of being mirrored to the right side of the label under RTL. */
html[dir=rtl] .chartFooter__btn {
    direction: ltr;
}

/* --- Calendar (price/YEAR) pages: year nav + stats block --- */
/* Year navigation: the flex container uses justify-content:space-between plus
   .nav-left{margin-right:auto}/.nav-right{margin-left:auto}. Those physical
   auto-margins do not flip under RTL, so both links get pulled to the center.
   Mirror the auto-margins so each link is pinned to the correct edge: the
   older/"previous" link (.nav-left, first in DOM -> right edge under RTL) stays
   at the right, and the newer/"next" link (.nav-right -> left edge) stays at
   the left. Arrow glyphs are flipped in the Hebrew templates so the older link
   points right and the newer link points left (outward, mirroring English). */
html[dir=rtl] .nav-left {
    margin-right: 0;
    margin-left: auto;
}

html[dir=rtl] .nav-right {
    margin-left: 0;
    margin-right: auto;
}

/* Stats list ("year-info"): right-align each row so the Hebrew label sits on
   the right, and render the price/date value as an isolated LTR run so the
   "$", digits and English date keep their natural left-to-right order and are
   not scrambled by the bidi algorithm next to the Hebrew connector "ב-". */
html[dir=rtl] .year-info li {
    text-align: right;
}

html[dir=rtl] .year-info__val {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}