/* ========================================================================== RTL overrides for Hebrew (he-il) — applied when ========================================================================== */ html[dir="rtl"] body { direction: rtl; text-align: right; } /* --- Bootstrap col flip (image left → image right; info right → info left) --- */ html[dir="rtl"] .col-xs-1, html[dir="rtl"] .col-xs-2, html[dir="rtl"] .col-xs-3, html[dir="rtl"] .col-xs-4, html[dir="rtl"] .col-xs-5, html[dir="rtl"] .col-xs-6, html[dir="rtl"] .col-xs-7, html[dir="rtl"] .col-xs-8, html[dir="rtl"] .col-xs-9, html[dir="rtl"] .col-xs-10, html[dir="rtl"] .col-xs-11, html[dir="rtl"] .col-xs-12, html[dir="rtl"] .col-sm-1, html[dir="rtl"] .col-sm-2, html[dir="rtl"] .col-sm-3, html[dir="rtl"] .col-sm-4, html[dir="rtl"] .col-sm-5, html[dir="rtl"] .col-sm-6, html[dir="rtl"] .col-sm-7, html[dir="rtl"] .col-sm-8, html[dir="rtl"] .col-sm-9, html[dir="rtl"] .col-sm-10, html[dir="rtl"] .col-sm-11, html[dir="rtl"] .col-sm-12, html[dir="rtl"] .col-md-1, html[dir="rtl"] .col-md-2, html[dir="rtl"] .col-md-3, html[dir="rtl"] .col-md-4, html[dir="rtl"] .col-md-5, html[dir="rtl"] .col-md-6, html[dir="rtl"] .col-md-7, html[dir="rtl"] .col-md-8, html[dir="rtl"] .col-md-9, html[dir="rtl"] .col-md-10, html[dir="rtl"] .col-md-11, html[dir="rtl"] .col-md-12, html[dir="rtl"] .col-lg-1, html[dir="rtl"] .col-lg-2, html[dir="rtl"] .col-lg-3, html[dir="rtl"] .col-lg-4, html[dir="rtl"] .col-lg-5, html[dir="rtl"] .col-lg-6, html[dir="rtl"] .col-lg-7, html[dir="rtl"] .col-lg-8, html[dir="rtl"] .col-lg-9, html[dir="rtl"] .col-lg-10, html[dir="rtl"] .col-lg-11, html[dir="rtl"] .col-lg-12 { float: right; } html[dir="rtl"] .pull-left { float: right !important; } html[dir="rtl"] .pull-right { float: left !important; } html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } /* --- Inline float:left used in product.tpl price block --- */ html[dir="rtl"] .prop-price > span[style*="float:left"], html[dir="rtl"] .prop-price > span[style*="float: left"] { float: right !important; } /* --- Product page specific layout --- */ html[dir="rtl"] .product-info, html[dir="rtl"] .product-description { text-align: right; } html[dir="rtl"] .details-manufacturer, html[dir="rtl"] .description-authors, html[dir="rtl"] .details-isbn, html[dir="rtl"] .details-sku { text-align: right; } html[dir="rtl"] .details-manufacturer img { margin-left: 6px; margin-right: 0; } html[dir="rtl"] .authors-list { padding-right: 0; padding-left: 0; } html[dir="rtl"] .review { text-align: right; } html[dir="rtl"] .review .pipe { margin: 0 6px; } /* --- Description / annotation --- */ html[dir="rtl"] .product-description ul, html[dir="rtl"] .product-description ol, html[dir="rtl"] .tab-content ul, html[dir="rtl"] .tab-content ol { padding-right: 30px; padding-left: 0; } html[dir="rtl"] .product-description li, html[dir="rtl"] .tab-content li { margin-right: 15px !important; margin-left: 0 !important; } /* --- Tabs --- */ html[dir="rtl"] .nav-tabs > li { float: right; margin-left: 2px; margin-right: 0; } /* --- Buttons / cart area --- */ html[dir="rtl"] .basket-add-one, html[dir="rtl"] .basket-go-cart { text-align: right; } html[dir="rtl"] .arrow-wrapper { transform: scaleX(-1); } html[dir="rtl"] .price-old, html[dir="rtl"] .price-new { text-align: right; } /* --- Carousels (other books / may like / related) --- */ html[dir="rtl"] .list_other_autor_products, html[dir="rtl"] .related_books, html[dir="rtl"] .slider__children, html[dir="rtl"] .slider__children__item { direction: rtl; } html[dir="rtl"] .list_other_title { text-align: right; } html[dir="rtl"] .information_wrapper, html[dir="rtl"] .information_wrapper .name, html[dir="rtl"] .information_wrapper .authors, html[dir="rtl"] .information_wrapper .description { text-align: right; } html[dir="rtl"] .badge25-home, html[dir="rtl"] .badge-recommendations { right: auto; left: 0; } /* --- Wishlist / compare hover --- */ html[dir="rtl"] .wishlist_hover { right: auto; left: 5px; } /* --- Delivery box / express labels --- */ html[dir="rtl"] .delivery_text, html[dir="rtl"] .custom_text_class { text-align: right; } html[dir="rtl"] .delivery_text > div:first-child, html[dir="rtl"] [class*="custom_text_class"] > div:first-child { margin-left: 10px; margin-right: 0; float: right; } /* --- Quantity / form layout --- */ html[dir="rtl"] .form-control { text-align: right; } html[dir="rtl"] input[type="number"] { text-align: center; } /* --- Breadcrumbs --- */ html[dir="rtl"] .breadcrumb > li + li:before { content: "\\"; padding: 0 5px; } /* --- Star ratings (keep LTR for visual consistency) --- */ html[dir="rtl"] .rating, html[dir="rtl"] .review .rating { direction: ltr; display: inline-block; } /* --- Sale badges --- */ html[dir="rtl"] .discount, html[dir="rtl"] .discount_super_price { direction: rtl; } /* --- Header search / cart / nav --- */ html[dir="rtl"] .navbar-nav { float: right; } html[dir="rtl"] .dropdown-menu { right: 0; left: auto; text-align: right; } html[dir="rtl"] .input-group-btn:last-child > .btn, html[dir="rtl"] .input-group-btn:last-child > .btn-group { margin-right: -1px; margin-left: 0; } /* --- Swiper / Slick (carousels) --- */ html[dir="rtl"] .slick-slide { float: right; } /* Keep numbers / SKU / EAN / ISBN in LTR */ html[dir="rtl"] .details-isbn, html[dir="rtl"] .details-sku { unicode-bidi: plaintext; } /* ========================================================================== Top header bar — RTL fixes ========================================================================== */ /* Search block: don't force 927px in RTL — let bootstrap col-lg-7 handle width */ @media (min-width: 768px) { html[dir="rtl"] .search-block { width: auto !important; max-width: 100%; margin-right: 0 !important; margin-left: 36px !important; } } /* Icons row: flip margins so they sit nicely in RTL */ html[dir="rtl"] .callmeback { padding-right: 0; padding-left: 10px; justify-content: flex-start; flex-direction: row-reverse; } html[dir="rtl"] .callmeback li { margin-left: 0; margin-right: 15px; } @media (min-width: 1200px) { html[dir="rtl"] .callmeback li { margin-right: 11px !important; margin-left: 0 !important; } } /* Language / currency dropdown popover — anchor to right edge in RTL */ html[dir="rtl"] .callmeback .top_header_drop_down, html[dir="rtl"] .callmeback .my-dropdown .drop-down { right: 0; left: auto; } /* Two-line labels under icons — keep stable width so they don't push siblings */ .callmeback .menu_text { line-height: 14px; min-width: 64px; white-space: normal; } html[dir="rtl"] .callmeback .menu_text { text-align: center; } /* Cart icon counter: in RTL move to opposite side */ html[dir="rtl"] .shortcut .shortcut_heading1 .count { left: auto; right: 16px; } /* Search input itself — RTL alignment + placeholder direction */ html[dir="rtl"] .search-block input[type="text"], html[dir="rtl"] .search-block input[type="search"] { text-align: right; direction: rtl; } html[dir="rtl"] .search-block .btn, html[dir="rtl"] .search-block .input-group-btn { /* Keep search button on the LEFT in RTL (visually = "end" of input) */ } /* Search input — leave room for the button on the LEFT side in RTL */ html[dir="rtl"] #search input[type="text"], html[dir="rtl"] #search input[name="search"] { padding-left: 50px; padding-right: 16px; } /* Mirror button to left side in RTL (vertical centering inherited from custom.css) */ html[dir="rtl"] #search .search-btn, html[dir="rtl"] #search .button-search { right: auto !important; left: 4px !important; } /* ========================================================================== Login page — RTL layout fix ========================================================================== */ /* Decorative sidebar: move from left:0 to right:0 in RTL */ html[dir="rtl"] .login_page_leftside { left: auto; right: 0; } /* Form panel: already floats left (via pull-right → float:left in RTL), add margin-left so it doesn't go under the fixed sidebar on the right */ html[dir="rtl"] .login_page_rightside { float: left !important; margin-left: 0; margin-right: 25%; } /* Tabs: direction + text alignment */ html[dir="rtl"] .login-tabs { direction: rtl; } html[dir="rtl"] .login-tab { text-align: center; } /* Social login buttons in RTL */ html[dir="rtl"] .social-login-btn { flex-direction: row-reverse; } html[dir="rtl"] .social-login-btn .social-btn-icon { margin-left: 0; margin-right: 10px; } /* Labels left-aligned for form inputs in RTL = right side */ html[dir="rtl"] .login_page_rightside .control-label { text-align: right !important; } /* OR divider text alignment */ html[dir="rtl"] .or span { text-align: center; }