/* =============================================
   RTL (Right-to-Left) Overrides for Arabic
   ============================================= */

/* ----- Base Direction ----- */
html[dir="rtl"] body {
    text-align: right;
    direction: rtl;
}

/* ----- Arabic Font Stack ----- */
html[dir="rtl"] body,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] span,
html[dir="rtl"] li,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] button,
html[dir="rtl"] select,
html[dir="rtl"] label {
    font-family: 'Open Sans Hebrew', 'Open Sans', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* ----- Header ----- */
html[dir="rtl"] .header-left {
    margin-right: 0;
    margin-left: auto;
}

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

html[dir="rtl"] .header-right .dropdown+a,
html[dir="rtl"] .header-right .dropdown+.dropdown {
    margin-left: 0;
    margin-right: 1.5rem;
}

html[dir="rtl"] .logo {
    margin-right: 0;
    margin-left: 2rem;
}

/* ----- Navigation ----- */
html[dir="rtl"] .main-nav {
    margin-left: auto;
    margin-right: 0;
}

html[dir="rtl"] .menu>li>a {
    padding-left: 0;
    padding-right: 0;
}

/* ----- Megamenu: base position ----- */
html[dir="rtl"] .megamenu {
    left: auto !important;
    right: 0 !important;
    text-align: right;
}

/* Main nav top-level dropdown: align from right side */
html[dir="rtl"] .menu>li>.submenu,
html[dir="rtl"] .menu>li .megamenu {
    left: auto !important;
    right: -1.5rem !important;
}

/* Vertical category menu: sub-megamenu opens to the LEFT in RTL */
html[dir="rtl"] .vertical-menu>li>ul,
html[dir="rtl"] .vertical-menu>li .megamenu {
    left: auto !important;
    right: 100% !important;
    transform: translate3d(15px, 0, 0);
}

html[dir="rtl"] .vertical-menu>li:hover>ul,
html[dir="rtl"] .vertical-menu>li:hover .megamenu,
html[dir="rtl"] .vertical-menu>li.active>ul,
html[dir="rtl"] .vertical-menu>li.active .megamenu {
    left: auto !important;
    right: 100% !important;
    top: 0;
    transform: translate3d(0, 0, 0);
}

html[dir="rtl"] .vertical-menu>li:first-child:hover>ul,
html[dir="rtl"] .vertical-menu>li:first-child:hover .megamenu,
html[dir="rtl"] .vertical-menu>li:first-child.active>ul,
html[dir="rtl"] .vertical-menu>li:first-child.active .megamenu {
    top: -1rem;
}

/* Arrow indicator for has-submenu items in vertical menu */
html[dir="rtl"] .vertical-menu>.has-submenu>a::after {
    right: auto;
    left: 1rem;
    transform: scaleX(-1);
}

html[dir="rtl"] .has-submenu>ul {
    left: auto !important;
    right: 100% !important;
}

/* ----- Category Dropdown ----- */
html[dir="rtl"] .category-dropdown {
    margin-right: 0;
    margin-left: 1rem;
}

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

html[dir="rtl"] .category-toggle i {
    margin-right: 0;
    margin-left: 0.8rem;
}

/* Category dropdown box: open from the left in RTL (because toggle is on the right side of header) */
html[dir="rtl"] .category-dropdown .dropdown-box {
    left: 0 !important;
    right: auto !important;
}

/* ----- Dropdowns ----- */
html[dir="rtl"] .dropdown-box {
    left: auto;
    right: 0;
}

html[dir="rtl"] .lang-dropdown {
    left: auto;
    right: 0;
}

/* ----- Search Bar ----- */
/* Flip borders: search input border was border-right:0, in RTL it should be border-left:0 */
html[dir="rtl"] .header-search input.form-control {
    padding-left: 15px;
    padding-right: 15px;
    text-align: right;
    border-right: 2px solid #000000;
    border-left: 0;
    border-radius: 0 0.3rem 0.3rem 0;
    /* round right side in RTL = visual left */
}

/* Search button: move to the left side in RTL */
html[dir="rtl"] .header-search .btn-search {
    border-right: 0;
    border-left: 2px solid #000000;
    border-radius: 0.3rem 0 0 0.3rem;
}

html[dir="rtl"] .header-top .header-right .topbar-links {
    margin-left: 0;
    padding-right: 2rem;
    padding-left: 0px;
    border-right: 2px solid #fff;
    border-left: 0;
}

html[dir="rtl"] .header-top .header-right>* {
    margin-right: 2rem;
}

html[dir="rtl"] .banner figure img {
    transform: scaleX(-1);
}

/* hs-round variant border radius flip */
html[dir="rtl"] .header-search.hs-round .form-control {
    border-radius: 0 0.3rem 0.3rem 0;
}

html[dir="rtl"] .header-search.hs-round .btn-search {
    border-radius: 0.3rem 0 0 0.3rem;
}

/* hs-expanded: flip select box border */
html[dir="rtl"] .header-search.hs-expanded .select-box {
    border-right: none;
    border-left: 2px solid #000000;
}

html[dir="rtl"] .header-search .form-control {
    text-align: right;
}

html[dir="rtl"] .live-search-popup {
    text-align: right;
}

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

html[dir="rtl"] .search-item-image {
    margin-right: 0;
    margin-left: 12px;
}

html[dir="rtl"] .category-menu li .megamenu {
    padding: 0 2rem 0 0;
}

/* ----- Product Cards ----- */
html[dir="rtl"] .product-details {
    text-align: right;
}

html[dir="rtl"] .product .product-details {
    text-align: center;
}

html[dir="rtl"] .product-tabs .nav-item:not(:last-child) {
    margin-left: 4rem;
    margin-right: 0;
}

html[dir="rtl"] .product-gallery-vertical .product-thumbs-wrap {
    margin: 0 0 0 1rem;
}

html[dir="rtl"] .list-type-check li::before {
    right: 0;
}

html[dir="rtl"] .list-type-check li {
    padding-left: 0;
    padding-right: 2rem;
}

/* ----- Breadcrumb ----- */
html[dir="rtl"] .breadcrumb li+li::before {
    content: '/';
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

/* ----- Buttons with Icons ----- */
html[dir="rtl"] .btn-icon-right i {
    margin-left: 0;
    margin-right: 0.5rem;
}

html[dir="rtl"] .w-icon-long-arrow-right::before {
    transform: scaleX(-1);
}

html[dir="rtl"] .w-icon-long-arrow-left::before {
    transform: scaleX(-1);
}

/* ----- Pagination ----- */
html[dir="rtl"] .pagination {
    direction: rtl;
}

/* ----- Sidebar / Filters ----- */
html[dir="rtl"] .left-sidebar {
    left: auto;
    right: 0;
}

html[dir="rtl"] .sidebar-content {
    text-align: right;
}

html[dir="rtl"] .filter-items li {
    padding-left: 0;
    padding-right: 0;
}

html[dir="rtl"] .sidebar-close {
    left: 1rem;
    right: auto;
}

/* ----- Icon Boxes ----- */
html[dir="rtl"] .icon-box-side {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .icon-box-side .icon-box-icon {
    margin-right: 0;
    margin-left: 1.5rem;
}

/* ----- Banner Content ----- */
html[dir="rtl"] .banner-content {
    text-align: right;
}

html[dir="rtl"] .banner-content.text-center {
    text-align: center;
}

/* ----- Swiper / Slider ----- */
html[dir="rtl"] .swiper-button-prev {
    left: auto;
    right: 10px;
}

html[dir="rtl"] .swiper-button-next {
    right: auto;
    left: 10px;
}

/* ----- Product Details Page ----- */
html[dir="rtl"] .product-single .product-details {
    text-align: right;
}

html[dir="rtl"] .product-short-desc ul {
    padding-left: 0;
    padding-right: 0;
}

html[dir="rtl"] .product-button {
    text-align: right;
}

html[dir="rtl"] .product-gallery-vertical {
    direction: rtl;
}

/* ----- Tabs ----- */
html[dir="rtl"] .nav-tabs {
    padding-right: 0;
}

/* ----- Accordion ----- */
html[dir="rtl"] .accordion .card-header a {
    text-align: right;
    padding-left: 2.5rem;
    padding-right: 1.5rem;
}

html[dir="rtl"] .accordion .card-header a::after {
    left: 1.5rem;
    right: auto;
}

/* ----- Contact Form ----- */
html[dir="rtl"] .contact-us-form .form-group {
    text-align: right;
}

html[dir="rtl"] .contact-us-form label {
    text-align: right;
}

html[dir="rtl"] .contact-us-form input,
html[dir="rtl"] .contact-us-form textarea {
    text-align: right;
}

/* ----- Footer ----- */
html[dir="rtl"] .footer .widget {
    text-align: right;
}

html[dir="rtl"] .footer .widget-body {
    padding-right: 0;
}

html[dir="rtl"] .footer-bottom {
    text-align: right;
}

html[dir="rtl"] .contact-widget a i {
    margin-right: 0;
    margin-left: 0.8rem;
}

/* ----- Mobile Menu ----- */
html[dir="rtl"] .mobile-menu-wrapper {
    left: auto;
    right: 0;
}

html[dir="rtl"] .mobile-menu-container {
    transform: translateX(100%);
    box-shadow: -1px 0 5px rgba(0, 0, 0, 0.5);
}

html[dir="rtl"] .mmenu-active .mobile-menu-container {
    transform: translateX(0);
}

html[dir="rtl"] .mobile-menu-close {
    left: 1rem;
    right: auto;
}

html[dir="rtl"] .mobile-menu {
    text-align: right;
    padding-right: 0;
}

/* ----- Sticky Footer ----- */
html[dir="rtl"] .sticky-footer {
    direction: rtl;
}

/* ----- Sticky Action Buttons ----- */
html[dir="rtl"] .sticky-action {
    align-items: flex-start;
}

html[dir="rtl"] .sticky-action-btn p {
    transform: translateX(-12px);
}

html[dir="rtl"] .sticky-action-btn:hover p {
    transform: translateX(0);
    margin-left: 0;
    margin-right: 10px;
}

html[dir="rtl"] .sticky-action-btn:hover {
    justify-content: flex-start;
    padding-right: 10px;
    padding-left: 12px;
}

/* ----- Work Section (Rental) ----- */
html[dir="rtl"] .work-grid {
    direction: rtl;
}

html[dir="rtl"] .work-content {
    text-align: right;
}

/* ----- Counter Section ----- */
html[dir="rtl"] .counter-wrap {
    text-align: center;
}

/* ----- About / Vision Mission ----- */
html[dir="rtl"] .vm-content {
    text-align: right;
}

html[dir="rtl"] .introduce .content {
    text-align: right;
}

/* ----- Blog ----- */
html[dir="rtl"] .post-details {
    text-align: right;
}

/* ----- Enquiry Popup ----- */
html[dir="rtl"] .enquiry-popup {
    text-align: right;
}

html[dir="rtl"] .enquiry-popup label {
    text-align: right;
}

/* ----- Misc RTL Utilities ----- */
html[dir="rtl"] .ml-0 {
    margin-left: unset;
    margin-right: 0;
}

html[dir="rtl"] .ml-1 {
    margin-left: unset;
    margin-right: 0.25rem;
}

html[dir="rtl"] .ml-4 {
    margin-left: unset;
    margin-right: 1.5rem;
}

html[dir="rtl"] .mr-0 {
    margin-right: unset;
    margin-left: 0;
}

html[dir="rtl"] .pl-0 {
    padding-left: unset;
    padding-right: 0;
}

html[dir="rtl"] .pl-4 {
    padding-left: unset;
    padding-right: 1.5rem;
}

html[dir="rtl"] .pr-0 {
    padding-right: unset;
    padding-left: 0;
}

html[dir="rtl"] .pr-4 {
    padding-right: unset;
    padding-left: 1.5rem;
}

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

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

/* ----- Float Reverse ----- */
html[dir="rtl"] .float-left {
    float: right;
}

html[dir="rtl"] .float-right {
    float: left;
}

/* ----- 404 page ----- */
html[dir="rtl"] .error-404 .banner-content {
    text-align: center;
}

/* ----- Spec Grid ----- */
html[dir="rtl"] .spec-grid .spec-box h5,
html[dir="rtl"] .spec-grid .spec-box p {
    text-align: right;
}

/* ----- Language Switcher Active State ----- */
html[dir="rtl"] .lang-dropdown a.active-lang {
    font-weight: 700;
    color: var(--wolmart-primary-color, #336699);
}

/* ================================================================
   RTL BANNER & HERO SECTION FIXES
   The base CSS positions content from the LEFT side.
   In RTL we mirror: LEFT-anchored content → RIGHT-anchored content,
   keeping content on the TEXT side (right in RTL) and images on left.
   ================================================================ */

/* ----- x-50 centering: base class uses left:50% !important, keep that same
   centering logic (left:50% + translateX(-50%) DOES center correctly in both LTR and RTL
   because left:50% is from the left physical edge) -----
   The REAL problem is that the content has NO WIDTH → add min-width */
html[dir="rtl"] .banner-content.x-50 {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    min-width: 60vw;
    /* prevent word-by-word collapse */
    max-width: 80vw;
    text-align: center;
}

html[dir="rtl"] .banner-content.y-50.x-50 {
    transform: translate(-50%, -50%) !important;
}

/* ----- Hero Banner Slides (intro-slide2): content was at left:15.2%
   In RTL: flip to right side. Add max-width to prevent overlap with images -----*/
html[dir="rtl"] .intro-slide2 .banner-content {
    left: auto !important;
    right: 15.2% !important;
    margin: 0 2.1rem;
    text-align: right;
    max-width: 42%;
    min-width: 280px;
}

/* ----- Hero Banner Slides (intro-slide3) ----- */
html[dir="rtl"] .intro-slide3 .banner-content {
    left: auto !important;
    right: 16.9% !important;
    text-align: right;
    max-width: 42%;
    min-width: 280px;
}

/* Override responsive breakpoint: base CSS sets left:4% for slide2/3, flip it in RTL */
@media (max-width: 1199px) {

    html[dir="rtl"] .intro-slide2 .banner-content,
    html[dir="rtl"] .intro-slide3 .banner-content {
        left: auto !important;
        right: 4% !important;
        max-width: 55%;
    }
}

/* ----- Promo Banner Grid (category-banner-wrapper2)
   Base CSS: .category-banner-wrapper2 .banner .banner-content { left: 7.8% }
   In RTL: keep text on the right side -----*/
html[dir="rtl"] .category-banner-wrapper2 .banner .banner-content {
    left: auto !important;
    right: 7.8% !important;
    text-align: right;
    max-width: 55%;
    min-width: 200px;
}

/* ----- Generic banners-grid banner content ----- */
html[dir="rtl"] .banners-grid .banner-content {
    left: auto !important;
    right: 5% !important;
    max-width: 60%;
    text-align: right;
    min-width: 180px;
}

/* ----- Widget Banner (Side Banner) Fix ----- */
html[dir="rtl"] .widget-banner .banner-content {
    left: auto !important;
    right: 5% !important;
    align-items: flex-start;
    text-align: right;
    max-width: 60%;
    min-width: 180px;
}

/* ----- RTL Nav Top Arrows (Fix overlap with title) ----- */
html[dir="rtl"] .nav-top>.swiper-button-next {
    right: auto;
    left: 3.7rem;
    transform: translateX(-50%) scaleX(-1);
}

html[dir="rtl"] .nav-top>.swiper-button-prev {
    right: auto;
    left: 3.5rem;
    transform: translateX(50%) scaleX(-1);
}

html[dir="rtl"] .products-navs button {
    transform: scaleX(-1);
}

/* ----- RTL Title Links ----- */
html[dir="rtl"] .title-link-wrapper a {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .w-icon-long-arrow-right {
    display: inline-block;
    transform: scaleX(-1);
}

/* ----- RTL Brands Logo Grid ----- */
html[dir="rtl"] .brands-wrapper .swiper-slide {
    margin-right: 0;
    margin-left: 30px;
}

/* ----- RTL Product Grids & Cards ----- */
html[dir="rtl"] .product-widget .product-media {
    margin-right: 0;
    margin-left: 1.5rem;
}

html[dir="rtl"] .product-widget .product-details {
    text-align: right;
}

/* ----- Ensure all banner-fixed content with y-50 (non-centered) clears left ----- */
html[dir="rtl"] .banner-fixed>.banner-content.y-50:not(.x-50) {
    left: auto;
}