/* Arabic (RTL) layout — only active when <html dir="rtl"> */

/*brand stays left-to-right*/
html[dir="rtl"] header h1,
html[dir="rtl"] .footer-1 h4 {
    direction: ltr;
}

/*header search*/
html[dir="rtl"] .header-search-wrap .iconify {
    left: auto;
    right: 1rem;
}

html[dir="rtl"] header nav input {
    padding-left: 1rem;
    padding-right: 3.2rem;
}

/*hero*/
html[dir="rtl"] .hero-img h2 {
    left: auto;
    right: 5%;
    text-align: right;
}

@media (min-width: 901px) {
    html[dir="rtl"] .hero-img h2 span {
        margin-left: 0;
        margin-right: 4rem;
    }
}

/*home carousel scrolls left-to-right*/
html[dir="rtl"] .crousel {
    direction: ltr;
}

html[dir="rtl"] .crousel .card h3 {
    direction: rtl;
}

/*icons next to text*/
html[dir="rtl"] .footer-1 .iconify {
    margin-right: 0;
    margin-left: 0.5rem;
}

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

html[dir="rtl"] .footer-1 h3::after {
    left: auto;
    right: 0;
}

html[dir="rtl"] .footer-2 p {
    direction: rtl;
}

html[dir="rtl"] .footer-1 .quick-link span {
    display: inline-block;
    transform: scaleX(-1);
}

html[dir="rtl"] .footer-1 .quick-link:hover {
    transform: translateX(-5px);
}

/*whatsapp*/
html[dir="rtl"] .whatsapp-float {
    right: auto;
    left: 20px;
}

/*shopping cart drawer slides from the left*/
html[dir="rtl"] .global-cart-drawer {
    right: auto;
    left: -440px;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.25);
    transition: left 0.35s ease;
}

html[dir="rtl"] .global-cart-drawer.active {
    left: 0;
}

html[dir="rtl"] .global-cart-count {
    right: auto;
    left: -5px;
}

html[dir="rtl"] .global-cart-item-info {
    padding-right: 0;
    padding-left: 2rem;
}

html[dir="rtl"] .global-cart-remove {
    right: auto;
    left: 0;
}

html[dir="rtl"] input[type="tel"] {
    unicode-bidi: plaintext;
    text-align: right;
}

/*added-to-cart toast*/
html[dir="rtl"] #cartToast {
    right: auto;
    left: 25px;
    border-left: none;
    border-right: 5px solid var(--tertiary-color);
    transform: translateX(-120px);
}

html[dir="rtl"] #cartToast.show {
    transform: translateX(0);
}

/*mobile menu slides from the right*/
@media (max-width: 768px) {
    html[dir="rtl"] header .nav-list {
        left: auto;
        right: -290px;
        border-right: none;
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: -8px 0 28px rgba(0, 0, 0, 0.25);
        transition: right 0.35s ease;
    }

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

    html[dir="rtl"] header .nav-list li a,
    html[dir="rtl"] .mobile-language-title {
        text-align: right;
    }

    html[dir="rtl"] header .nav-list li a::before {
        margin-right: 0;
        margin-left: 0.5rem;
    }

    html[dir="rtl"] body:has(header .nav-list.active) .menu-toggle {
        left: auto;
        right: 240px;
    }

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

    html[dir="rtl"] .footer-1 h3::after {
        left: auto !important;
        right: 0 !important;
    }

    html[dir="rtl"] .footer-1 h2 .iconify,
    html[dir="rtl"] .footer-1 .iconify {
        margin-right: 0 !important;
        margin-left: 0.35rem !important;
    }

    html[dir="rtl"] .global-cart-button {
        right: auto;
        left: 1rem;
    }

    html[dir="rtl"] #cartToast {
        left: 15px;
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] header .nav-list {
        left: auto;
        right: -80vw;
    }

    html[dir="rtl"] body:has(header .nav-list.active) .menu-toggle {
        left: auto;
        right: min(calc(76vw - 42px), 238px);
    }
}

/*auto parts: keep the same inset from the start edge as English*/
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .filter-container {
    margin-left: 0;
    margin-right: 5rem;
}

html[dir="rtl"] .catalog-flex {
    margin-left: 4rem;
    margin-right: 5rem;
}

@media (max-width: 1200px) {
    html[dir="rtl"] .breadcrumb,
    html[dir="rtl"] .filter-container {
        margin-left: 0;
        margin-right: 3rem;
    }

    html[dir="rtl"] .catalog-flex {
        margin-left: 3rem;
        margin-right: 3rem;
    }
}

@media (max-width: 900px) {
    html[dir="rtl"] .breadcrumb {
        margin: 8rem 1rem 0;
    }

    html[dir="rtl"] .filter-container {
        margin: 1rem 1.25rem;
    }

    html[dir="rtl"] .catalog-flex {
        margin: 1rem 1.25rem 3rem;
    }
}

@media (max-width: 768px) {
    html[dir="rtl"] .breadcrumb {
        margin: 8rem 1.25rem 0;
    }

    html[dir="rtl"] .filter-container {
        margin: 1rem 1.25rem;
    }
}