/* RTL layout for Arabic and Hebrew storefront locales */
html[dir="rtl"] {
    text-align: start;
}

html[dir="rtl"] .navbar-inner,
html[dir="rtl"] .sidebar-menu,
html[dir="rtl"] .footer-div,
html[dir="rtl"] .footer-list,
html[dir="rtl"] .batteries-browse-grid,
html[dir="rtl"] .batteries-grid,
html[dir="rtl"] .checkout-content,
html[dir="rtl"] .order-details-row,
html[dir="rtl"] .summary-row,
html[dir="rtl"] .quantity-input-row,
html[dir="rtl"] .compat-checker__dropdowns,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .breadcrumb-nav {
    direction: rtl;
}

/* Sidebar already slides in from the right in LTR. Mirror for RTL so closed stays off-screen. */
html[dir="rtl"] .sidebar {
    right: auto;
    left: -100%;
    transition: left 0.3s ease;
}

html[dir="rtl"] .menu-toggle:checked ~ .sidebar {
    left: 0;
    right: auto;
}

html[dir="rtl"] .checkout-left-column,
html[dir="rtl"] .checkout-right-column {
    text-align: start;
}

html[dir="rtl"] .summary-row,
html[dir="rtl"] .price-row,
html[dir="rtl"] .order-details-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .quantity-input-wrapper {
    flex-direction: row-reverse;
}

html[dir="rtl"] .topbutton {
    flex-direction: row-reverse;
}

html[dir="rtl"] .topbutton > svg {
    transform: scaleX(-1) rotate(-50deg);
}

html[dir="rtl"] .topbutton:hover svg {
    transform: scaleX(-1) rotate(-90deg);
}

html[dir="rtl"] .lang-switcher__select {
    max-width: 12rem;
    background-position: left 0.4rem center;
    padding-left: 1.6rem;
    padding-right: 0.55rem;
}

html[dir="rtl"] .breadcrumb-separator,
html[dir="rtl"] .breadcrumb-nav__item + .breadcrumb-nav__item::before {
    /* keep visual separators readable in RTL */
}

html[dir="rtl"] .shipping-option {
    flex-direction: row-reverse;
}

/* Back controls: sit on the inline-start edge (right in RTL) and point the chevron that way */
html[dir="rtl"] .battery-hero-back-button-wrapper {
    left: auto;
    right: 10px;
}

html[dir="rtl"] .checkout-back-button-wrapper {
    justify-content: flex-end;
    text-align: end;
}

html[dir="rtl"] back-button {
    flex-direction: row-reverse;
}

html[dir="rtl"] back-button > svg,
html[dir="rtl"] .checkout-page-top back-button > svg {
    transform: scaleX(-1);
}

html[dir="rtl"] back-button:hover > svg,
html[dir="rtl"] .checkout-page-top back-button:hover > svg {
    transform: scaleX(-1) translateX(5px);
}

html[dir="rtl"] .input-field,
html[dir="rtl"] .select-field,
html[dir="rtl"] textarea {
    text-align: start;
}

/* Newsletter signup: keep email | subscribe left-to-right (LTR form pattern).
   html[dir=rtl] alone reverses flex and breaks the joined border-radius. */
html[dir="rtl"] .email-group {
    direction: ltr;
    flex-direction: row;
}

html[dir="rtl"] .email-group .email {
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] select.dropdown-input,
html[dir="rtl"] select.dropdown-input:hover,
html[dir="rtl"] select.dropdown-input:focus,
html[dir="rtl"] select.dropdown-input:focus-visible {
    background-position: left 1rem center, 0 0;
    padding: 0 1rem 0 2.25rem;
}