/* Shared Arabic RTL layout for customer routes. English styles are untouched. */

html[lang^="ar"] body {
    direction: rtl;
    text-align: right;
}

html[lang^="ar"] .jro-header-top-inner {
    direction: ltr;
    justify-content: flex-end;
}

html[lang^="ar"] .jro-lang-switcher,
html[lang^="ar"] .jro-language-links {
    direction: ltr;
}

html[lang^="ar"] .jro-header-inner,
html[lang^="ar"] .jro-header-actions {
    direction: rtl;
}

html[lang^="ar"] body.woocommerce-account .woocommerce,
html[lang^="ar"] body.woocommerce-cart .wp-block-woocommerce-cart,
html[lang^="ar"] body.woocommerce-checkout .wp-block-woocommerce-checkout,
html[lang^="ar"] body.single-product .product-detail-main,
html[lang^="ar"] body.post-type-archive-product .jro-main-content,
html[lang^="ar"] body.tax-product_cat .jro-main-content,
html[lang^="ar"] body.tax-product_tag .jro-main-content {
    direction: rtl;
}

/* My Account: keep the navigation and content aligned as two RTL columns. */
html[lang^="ar"] body.woocommerce-account.logged-in .woocommerce {
    flex-direction: row;
}

html[lang^="ar"] body.woocommerce-account .woocommerce-MyAccount-navigation {
    order: 1;
    text-align: right;
}

html[lang^="ar"] body.woocommerce-account .woocommerce-MyAccount-content {
    order: 2;
    text-align: right;
}

html[lang^="ar"] body.woocommerce-account .jro-account-nav-link {
    border-left: 0;
    border-right: 3px solid transparent;
}

html[lang^="ar"] body.woocommerce-account .jro-account-nav-item.is-active .jro-account-nav-link {
    border-right-color: #9E1735;
}

html[lang^="ar"] body.woocommerce-account .u-columns,
html[lang^="ar"] body.woocommerce-account .u-column1,
html[lang^="ar"] body.woocommerce-account .u-column2 {
    direction: rtl;
    text-align: right;
}

/* Shop/listing: filters stay on the physical right and cards remain ordered. */
html[lang^="ar"] body.post-type-archive-product .jro-listing-layout,
html[lang^="ar"] body.tax-product_cat .jro-listing-layout,
html[lang^="ar"] body.tax-product_tag .jro-listing-layout {
    direction: rtl;
}

html[lang^="ar"] body.post-type-archive-product .jro-listing-toolbar,
html[lang^="ar"] body.tax-product_cat .jro-listing-toolbar,
html[lang^="ar"] body.tax-product_tag .jro-listing-toolbar,
html[lang^="ar"] body.post-type-archive-product .jro-listing-ordering,
html[lang^="ar"] body.tax-product_cat .jro-listing-ordering,
html[lang^="ar"] body.tax-product_tag .jro-listing-ordering {
    direction: rtl;
}

html[lang^="ar"] body.post-type-archive-product .jro-listing-main ul.products,
html[lang^="ar"] body.tax-product_cat .jro-listing-main ul.products,
html[lang^="ar"] body.tax-product_tag .jro-listing-main ul.products {
    direction: rtl;
}

/* Homepage/category cover titles belong to the Arabic reading edge.  The base
 * card places them at left:24px for LTR; mirror that physical anchor once for
 * every category card so desktop and mobile use the same treatment. */
html[lang^="ar"] .jro-category-name {
    right: 24px;
    left: auto;
    max-width: calc(100% - 48px);
    direction: rtl;
    text-align: right;
}

/* Cart and checkout: mirror the visual columns while keeping WooCommerce blocks intact. */
html[lang^="ar"] body.woocommerce-cart .wp-block-woocommerce-cart,
html[lang^="ar"] body.woocommerce-checkout .wp-block-woocommerce-checkout {
    text-align: right;
}

html[lang^="ar"] body.woocommerce-cart .wc-block-cart,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-sidebar-layout {
    direction: rtl;
}

html[lang^="ar"] body.woocommerce-cart .wc-block-cart__sidebar {
    order: 1;
}

html[lang^="ar"] body.woocommerce-cart .wc-block-cart__main {
    order: 2;
}

html[lang^="ar"] body.woocommerce-checkout .wc-block-components-main {
    order: 1;
}

html[lang^="ar"] body.woocommerce-checkout .wc-block-components-sidebar {
    order: 2;
}

/* WooCommerce Blocks keeps several checkout labels left-aligned and floats the
 * login link with a negative margin.  Normalize those shared primitives once
 * so every Arabic checkout state has the same RTL alignment without changing
 * the English checkout or any form handler. */
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-main,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-sidebar,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-checkout-step,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-checkout-step__heading,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-checkout-step__title,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-text-input,
html[lang^="ar"] body.woocommerce-checkout .wc-blocks-components-select,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-checkbox,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-radio-control,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-radio-control__option,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-radio-control__label,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-radio-control__secondary-label,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-order-summary,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-totals-item,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-panel__button {
    direction: rtl;
    text-align: right !important;
}

html[lang^="ar"] body.woocommerce-checkout .wc-block-components-text-input input,
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-text-input textarea,
html[lang^="ar"] body.woocommerce-checkout .wc-blocks-components-select select {
    direction: rtl;
    text-align: right !important;
}

/* Blocks positions its floating labels with physical `left`; mirror that
 * anchor explicitly so Arabic labels sit on the right edge of every field. */
html[lang^="ar"] body.woocommerce-checkout .wc-block-components-text-input > label,
html[lang^="ar"] body.woocommerce-checkout .wc-blocks-components-select > label {
    left: auto !important;
    right: 10px !important;
    text-align: right !important;
    transform-origin: top right;
}

html[lang^="ar"] body.woocommerce-checkout .wc-block-components-checkout-step__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

html[lang^="ar"] body.woocommerce-checkout .wc-block-components-checkout-step__heading h2 {
    flex: 1 1 180px;
    min-width: 0;
    margin: 0;
    text-align: right !important;
}

html[lang^="ar"] body.woocommerce-checkout .wc-block-components-checkout-step__heading-content {
    display: flex;
    flex: 0 1 auto;
    max-width: 100%;
    align-items: center;
}

html[lang^="ar"] body.woocommerce-checkout .wc-block-checkout__login-prompt {
    float: none;
    width: auto;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    padding-inline: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    text-align: right !important;
}

html[lang^="ar"] body.woocommerce-checkout .wc-block-components-radio-control__option {
    box-sizing: border-box;
    min-height: 50px;
}

html[lang^="ar"] body.woocommerce-checkout .wc-block-components-button {
    box-sizing: border-box;
    max-width: 100%;
}

/* Product detail: keep the product/gallery relationship stable under RTL. */
html[lang^="ar"] body.single-product .product-main-area,
html[lang^="ar"] body.single-product .product-info-area,
html[lang^="ar"] body.single-product .product-data-area {
    direction: rtl;
    text-align: right;
}

html[lang^="ar"] body.single-product .product-info-area .cart,
html[lang^="ar"] body.single-product .variations_form {
    direction: rtl;
}

html[lang^="ar"] body.single-product .product-data-area .value-cell {
    text-align: right;
}

@media (max-width: 767px) {
    /* Keep the compact summary toggle above the form on every language.  The
     * block DOM contains the sidebar before the form in English but after it
     * in Arabic, so explicit mobile orders avoid a language-dependent summary
     * appearing at the bottom beside the place-order button. */
    body.woocommerce-checkout .wc-block-components-sidebar-layout {
        flex-direction: column;
    }

    body.woocommerce-checkout .wc-block-components-sidebar {
        order: 0;
    }

    body.woocommerce-checkout .wc-block-components-main {
        order: 1;
    }

    html[lang^="ar"] body.woocommerce-account.logged-in .woocommerce,
    html[lang^="ar"] body.woocommerce-cart .wc-block-cart,
    html[lang^="ar"] body.woocommerce-checkout .wc-block-components-sidebar-layout {
        flex-direction: column;
    }

    html[lang^="ar"] body.woocommerce-account .woocommerce-MyAccount-navigation,
    html[lang^="ar"] body.woocommerce-account .woocommerce-MyAccount-content,
    html[lang^="ar"] body.woocommerce-cart .wc-block-cart__main,
    html[lang^="ar"] body.woocommerce-cart .wc-block-cart__sidebar,
    html[lang^="ar"] body.woocommerce-checkout .wc-block-components-main,
    html[lang^="ar"] body.woocommerce-checkout .wc-block-components-sidebar {
        order: initial;
        width: 100%;
        max-width: 100%;
    }

    html[lang^="ar"] body.woocommerce-checkout .wc-block-components-main {
        order: 1;
    }

    html[lang^="ar"] body.woocommerce-checkout .wc-block-components-sidebar {
        order: 0;
    }

    html[lang^="ar"] body.post-type-archive-product .jro-listing-layout,
    html[lang^="ar"] body.tax-product_cat .jro-listing-layout,
    html[lang^="ar"] body.tax-product_tag .jro-listing-layout {
        flex-direction: column;
    }

    html[lang^="ar"] body.single-product .product-main-area {
        grid-template-columns: 1fr;
    }

    html[lang^="ar"] body.woocommerce-checkout .wc-block-components-checkout-step__heading {
        align-items: flex-start;
    }

    html[lang^="ar"] body.woocommerce-checkout .wc-block-components-checkout-step__heading h2,
    html[lang^="ar"] body.woocommerce-checkout .wc-block-components-checkout-step__heading-content {
        flex-basis: 100%;
    }

    html[lang^="ar"] body.woocommerce-checkout .wc-block-checkout__login-prompt {
        width: auto;
    }
}

/* Arabic account forms: keep every native WooCommerce control in one shared
 * RTL rule set.  WooCommerce's account stylesheet restores left alignment and
 * floats the login button, while its password control keeps a vertical
 * translate for an older input height.  These scoped overrides correct those
 * shared primitives for login, registration, account settings and addresses
 * without changing the English route or any form handler. */
html[lang^="ar"] body.woocommerce-account .woocommerce form,
html[lang^="ar"] body.woocommerce-account .woocommerce form .form-row,
html[lang^="ar"] body.woocommerce-account .woocommerce form .form-row label,
html[lang^="ar"] body.woocommerce-account .woocommerce form .form-row .required,
html[lang^="ar"] body.woocommerce-account .woocommerce-LostPassword,
html[lang^="ar"] body.woocommerce-account .woocommerce-MyAccount-content form,
html[lang^="ar"] body.woocommerce-account .woocommerce-MyAccount-content fieldset,
html[lang^="ar"] body.woocommerce-account .woocommerce-MyAccount-content legend {
    direction: rtl;
    text-align: right !important;
}

html[lang^="ar"] body.woocommerce-account .woocommerce form input.input-text,
html[lang^="ar"] body.woocommerce-account .woocommerce form input.woocommerce-Input,
html[lang^="ar"] body.woocommerce-account .woocommerce form textarea,
html[lang^="ar"] body.woocommerce-account .woocommerce form select {
    direction: rtl;
    text-align: right !important;
    unicode-bidi: plaintext;
}

/* Addresses and email identifiers remain visually anchored to the right while
 * retaining LTR character ordering for values such as ashraf@example.com. */
html[lang^="ar"] body.woocommerce-account .woocommerce form input[type="email"],
html[lang^="ar"] body.woocommerce-account .woocommerce form input[type="url"] {
    direction: ltr;
    text-align: right !important;
}

html[lang^="ar"] body.woocommerce-account .woocommerce form button.button,
html[lang^="ar"] body.woocommerce-account .woocommerce form button.woocommerce-Button {
    display: inline-flex;
    float: none !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

html[lang^="ar"] body.woocommerce-account .woocommerce-form-login__rememberme {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    margin-inline: 0;
    text-align: right !important;
}

html[lang^="ar"] body.woocommerce-account .woocommerce-form-login__rememberme input {
    flex: 0 0 auto;
    margin: 0;
}

html[lang^="ar"] body.woocommerce-account .woocommerce form .password-input {
    position: relative;
    display: block;
    width: 100%;
    min-height: 44px;
    text-align: right !important;
}

html[lang^="ar"] body.woocommerce-account .woocommerce form .password-input input {
    /* The eye is physically on the right; keep the final RTL character away
     * from it instead of relying on inline-end (which maps to the left). */
    padding-right: 48px !important;
    padding-left: 16px !important;
}

html[lang^="ar"] body.woocommerce-account .woocommerce form .show-password-input {
    position: absolute;
    top: 50% !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: 24px;
    height: 24px;
    min-height: 0;
    padding: 0;
    border: 0;
    transform: translateY(-50%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F7F7F7 !important;
    background: transparent !important;
    z-index: 2;
}

/* WooCommerce embeds a black SVG in the pseudo-element, so color alone cannot
 * recolor it.  Inverting that asset keeps the eye visible on the dark field. */
html[lang^="ar"] body.woocommerce-account .woocommerce form .show-password-input::before {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* Logged-in account cards and sections use the same physical right edge as
 * the forms.  Grid/flex ordering remains intact; only the reading direction
 * and alignment are normalized. */
html[lang^="ar"] body.woocommerce-account .woocommerce-MyAccount-content,
html[lang^="ar"] body.woocommerce-account .jro-dashboard-section,
html[lang^="ar"] body.woocommerce-account .jro-dashboard-header,
html[lang^="ar"] body.woocommerce-account .jro-dashboard-title,
html[lang^="ar"] body.woocommerce-account .jro-dashboard-column-left,
html[lang^="ar"] body.woocommerce-account .jro-dashboard-column-right,
html[lang^="ar"] body.woocommerce-account .jro-order-card,
html[lang^="ar"] body.woocommerce-account .jro-order-card-header,
html[lang^="ar"] body.woocommerce-account .jro-order-card-body,
html[lang^="ar"] body.woocommerce-account .jro-order-card-actions,
html[lang^="ar"] body.woocommerce-account .jro-vehicle-card,
html[lang^="ar"] body.woocommerce-account .jro-vehicle-info,
html[lang^="ar"] body.woocommerce-account .jro-empty-state,
html[lang^="ar"] body.woocommerce-account .jro-account-nav-link {
    direction: rtl;
    text-align: right !important;
}

html[lang^="ar"] body.woocommerce-account .jro-dashboard-columns,
html[lang^="ar"] body.woocommerce-account .jro-order-cards,
html[lang^="ar"] body.woocommerce-account .jro-history-row,
html[lang^="ar"] body.woocommerce-account .jro-history-header-row {
    direction: rtl;
}

@media (max-width: 767px) {
    html[lang^="ar"] body.woocommerce-account .jro-vehicle-card {
        text-align: right !important;
    }

    html[lang^="ar"] body.woocommerce-account .jro-vehicle-actions,
    html[lang^="ar"] body.woocommerce-account .jro-form-actions {
        direction: rtl;
    }
}

/* Logged-in account navigation and address cards share the same RTL surface
 * rules as the guest forms.  This covers native WooCommerce address markup as
 * well as the JRO account wrapper without touching the English route. */
html[lang^="ar"] body.woocommerce-account .woocommerce-MyAccount-navigation,
html[lang^="ar"] body.woocommerce-account .woocommerce-MyAccount-navigation ul,
html[lang^="ar"] body.woocommerce-account .woocommerce-MyAccount-navigation li,
html[lang^="ar"] body.woocommerce-account .woocommerce-MyAccount-navigation a,
html[lang^="ar"] body.woocommerce-account .woocommerce-Addresses,
html[lang^="ar"] body.woocommerce-account .woocommerce-Address,
html[lang^="ar"] body.woocommerce-account .woocommerce-Address header,
html[lang^="ar"] body.woocommerce-account .woocommerce-Address-title,
html[lang^="ar"] body.woocommerce-account .woocommerce-Address address,
html[lang^="ar"] body.woocommerce-account .woocommerce-MyAccount-content > p {
    direction: rtl;
    text-align: right !important;
}

html[lang^="ar"] body.woocommerce-account .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

html[lang^="ar"] body.woocommerce-account .woocommerce-Address-title h3 {
    flex: 1 1 auto;
    margin: 0;
    text-align: right !important;
}

html[lang^="ar"] body.woocommerce-account .woocommerce-Address-title a,
html[lang^="ar"] body.woocommerce-account .woocommerce-Address-title .edit {
    float: none !important;
    margin: 0;
    text-align: right !important;
}

/* The verification prompt is a shared WooCommerce notice.  Keep its message,
 * action, and icon in one non-overlapping flow in both desktop and mobile RTL. */
html[lang^="ar"] body.woocommerce-account .woocommerce-message,
html[lang^="ar"] body.woocommerce-account .woocommerce-error,
html[lang^="ar"] body.woocommerce-account .woocommerce-info {
    direction: rtl;
    text-align: right !important;
}

@media (max-width: 767px) {
    html[lang^="ar"] body.woocommerce-account .woocommerce-Address-title {
        align-items: flex-start;
    }

    html[lang^="ar"] body.woocommerce-account .woocommerce-Address-title h3,
    html[lang^="ar"] body.woocommerce-account .woocommerce-Address-title a {
        flex-basis: 100%;
    }
}

/* Shop filter selects use a custom arrow because native arrows are hidden.
 * In RTL, keep that arrow on the left and reserve its space so it never
 * sits on top of the selected year, make, model, or variant text. */
html[lang^="ar"] body.post-type-archive-product .jro-filter-select,
html[lang^="ar"] body.tax-product_cat .jro-filter-select,
html[lang^="ar"] body.tax-product_tag .jro-filter-select {
    direction: rtl;
    text-align: right;
    background-position: left 12px center;
    padding: 8px 12px 8px 40px;
}