/* ==========================================================================
   Right-to-left (Kurdish & Arabic) — loaded only when <html dir="rtl">.
   Flex/grid layouts flip on their own; this file mirrors the rules that use
   physical left/right and swaps in a font that covers Arabic script.

   Load order note: this sheet is linked after base/header/components/pages/
   footer but BEFORE chat.css and page sheets (careers.css, modern.css).
   Every override is therefore prefixed with [dir="rtl"] so its specificity
   beats the original selector regardless of order. Where a later/stronger
   original rule (state or media query) would be shadowed by that extra
   specificity, it is re-declared here as well.
   ========================================================================== */

:root {
    --font: "Vazirmatn", "Lato", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    --font-heading: "Vazirmatn", "Sora", system-ui, Tahoma, sans-serif;
}
h1, h2, h3, h4 { letter-spacing: 0; }
.drawer__label, .eyebrow { letter-spacing: 0; }

/* Phone numbers, prices and codes stay left-to-right inside RTL text. */
.topbar__phone, .footer-contact a, .price, [data-cart-subtotal], input[type="tel"], input[type="email"] { unicode-bidi: plaintext; }

/* --------------------------------------------------------------------------
   Directional icons — mirrored with the individual `scale` property so any
   existing `transform` (hover nudges like translateX(3px), rotate) still
   composes; a +x nudge is automatically mirrored into a -x nudge.
   Not mirrored on purpose: chevron-down/up, truck, play/media, check, logo.
   -------------------------------------------------------------------------- */
[dir="rtl"] .icon-chevron-right,
[dir="rtl"] .icon-chevron-left,
[dir="rtl"] .icon-arrow-right,
[dir="rtl"] .icon-arrow-left,
[dir="rtl"] .icon-arrow-up-right,
[dir="rtl"] .icon-send,
[dir="rtl"] .icon-logout,
[dir="rtl"] .drawer__account > .icon { scale: -1 1; }

/* ---------- base.css ---------- */
[dir="rtl"] .skip-link { left: auto; right: 16px; }
[dir="rtl"] .select select { padding-right: 1rem; padding-left: 2.5rem; }
[dir="rtl"] .select > .icon { right: auto; left: .9rem; }

/* ---------- header.css ---------- */
[dir="rtl"] .header-search__cat select { padding: 0 1.1rem 0 2.1rem; }
[dir="rtl"] .header-search__cat .icon { right: auto; left: .9rem; }
[dir="rtl"] .search-suggest__price { text-align: left; }
[dir="rtl"] .header-action--cart { margin-left: 0; margin-right: .35rem; }
[dir="rtl"] .badge-count { right: auto; left: -8px; }
[dir="rtl"] .header-nav__aside { margin-left: 0; margin-right: auto; }

/* Category browser: panel anchors to the right, flyout opens to the left */
[dir="rtl"] .cat-menu { margin-right: 0; margin-left: .75rem; }
[dir="rtl"] .cat-menu__chevron { margin-left: 0; margin-right: .4rem; }
[dir="rtl"] .cat-menu__panel { left: auto; right: 0; }
[dir="rtl"] .cat-menu__flyout { left: auto; right: calc(100% - 4px); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }

/* Shop mega menu (.mega uses left:0;right:0 — symmetric, no change) */
[dir="rtl"] .mega__col ul { padding-left: 0; padding-right: calc(32px + .6rem); }
/* .mega__promo-body uses equal left/right insets — symmetric, no change */

/* Company dropdown: mirror the centre-offset anchoring */
[dir="rtl"] .nav-dropdown { left: auto; margin-left: 0; right: 50%; margin-right: -260px; }

/* Off-canvas drawers: menu drawer comes from the right, cart from the left */
[dir="rtl"] .drawer--left { left: auto; right: 0; transform: translateX(100%); }
[dir="rtl"] .drawer--right { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .drawer.is-open { transform: none; }

@media (max-width: 1023px) {
    /* .tabbar uses left:0;right:0 — symmetric, no change */
    [dir="rtl"] .tabbar .badge-count { right: auto; left: -10px; }
}
@media (max-width: 639px) {
    [dir="rtl"] .header-search__input { padding-left: 1rem; padding-right: 1.1rem; }
}

/* ---------- components.css ---------- */
[dir="rtl"] .page-hero::before { right: auto; left: -10%; }
[dir="rtl"] .page-hero--image::before { left: 0; right: 0; background: linear-gradient(270deg, rgba(11, 21, 48, .92) 0%, rgba(11, 21, 48, .7) 45%, rgba(11, 21, 48, .2) 100%); }
[dir="rtl"] .breadcrumbs li + li::before { margin-right: 0; margin-left: .25rem; }

/* Product card: badges top-right, tools top-left, tooltip opens to the right */
[dir="rtl"] .product-card__badges { left: auto; right: .6rem; }
[dir="rtl"] .product-card__tools { right: auto; left: .6rem; }
@media (hover: hover) and (pointer: fine) {
    [dir="rtl"] .product-card__tools form:not(:first-child) .tool-btn:not(.is-on), [dir="rtl"] .product-card__tools > a { translate: -8px 0; }
    [dir="rtl"] .product-card:hover .product-card__tools .tool-btn, [dir="rtl"] .product-card:focus-within .product-card__tools .tool-btn { translate: 0 0; }
    [dir="rtl"] .tool-btn[data-tooltip]:hover::after { right: auto; left: calc(100% + 8px); }
}

/* Rating stars fill and stock meter grow from the right */
[dir="rtl"] .rating__stars { background: linear-gradient(270deg, var(--amber) var(--rating), #dfe3ec var(--rating)); }
[dir="rtl"] .stock-meter__bar span { background: linear-gradient(270deg, var(--amber), var(--accent)); }

/* Toasts: top-left on desktop, exit toward the left */
[dir="rtl"] .toasts { right: auto; left: 20px; }
[dir="rtl"] .toast.is-leaving { animation-name: toast-out-rtl; }
@keyframes toast-out-rtl { to { opacity: 0; transform: translateX(-20px); } }
@media (max-width: 639px) { [dir="rtl"] .toasts { left: 16px; right: 16px; } }

/* Newsletter pill: big padding sits at the start (right) */
[dir="rtl"] .newsletter__field { padding: 6px 1.1rem 6px 6px; }

[dir="rtl"] .testimonial__quote { right: auto; left: 1.5rem; }

/* Horizontal scrollers: "previous" sits on the right, "next" on the left
   (scroll-snap rows flip natively; see report for the JS scrollLeft fix) */
[dir="rtl"] .scroller__arrow--prev { left: auto; right: -14px; }
[dir="rtl"] .scroller__arrow--next { right: auto; left: -14px; }

/* Brands marquee: the track overflows to the left in RTL, so run it rightward */
[dir="rtl"] .brands__list { padding-right: 0; padding-left: clamp(2rem, 4vw, 4.5rem); }
[dir="rtl"] .brands__track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }

[dir="rtl"] .business-cta::before { background: radial-gradient(60% 120% at 0% 0%, rgba(46, 68, 166, .55), transparent 60%), radial-gradient(40% 80% at 100% 100%, rgba(61, 95, 209, .25), transparent 60%); }

/* .line-tabs__tab::after uses left:0;right:0 + scaleX from centre — symmetric */
[dir="rtl"] .prose ul { padding-left: 0; padding-right: 1.2rem; }
[dir="rtl"] .prose blockquote { border-left: 0; border-right: 4px solid var(--brand); border-radius: var(--radius) 0 0 var(--radius); }
[dir="rtl"] .data-table th, [dir="rtl"] .data-table td,
[dir="rtl"] .spec-table th, [dir="rtl"] .spec-table td { text-align: right; }
[dir="rtl"] .tag .icon { margin-right: 0; margin-left: 3px; }

/* ---------- footer.css (+ chat.css) ---------- */
/* Floating corner controls move to the bottom-left */
[dir="rtl"] .back-to-top { right: auto; left: 20px; }
@media (max-width: 1023px) { [dir="rtl"] .back-to-top { left: 16px; } }

/* ---------- pages.css ---------- */
/* Hero slider: scrim darkens the start (right) side; arrows swap sides */
[dir="rtl"] .hero__slide::before { background: linear-gradient(270deg, rgba(8, 14, 34, .7) 0%, rgba(8, 14, 34, .35) 38%, rgba(8, 14, 34, 0) 62%); }
[dir="rtl"] .hero__slide--artwork::before { background: linear-gradient(0deg, rgba(7, 17, 31, .55) 0%, rgba(7, 17, 31, 0) 35%); }
[dir="rtl"] .hero__badge { border-radius: 999px 4px 4px 999px; }
[dir="rtl"] .hero__arrow--prev { left: auto; right: clamp(.75rem, 1.4vw, 1.25rem); }
[dir="rtl"] .hero__arrow--next { right: auto; left: clamp(.75rem, 1.4vw, 1.25rem); }
/* .hero__dots: left:50% + translate -50% — centred, no change.
   .hero__bg / .side-banner__bg object-position: skipped (artwork crop, not layout). */
[dir="rtl"] .side-banner::before { background: linear-gradient(270deg, rgba(7, 17, 31, .82) 0%, rgba(7, 17, 31, .45) 45%, rgba(7, 17, 31, 0) 75%); }
[dir="rtl"] .promo--dark::before { background: linear-gradient(270deg, rgba(14, 12, 34, .78) 0%, rgba(14, 12, 34, .45) 45%, transparent 70%); }

[dir="rtl"] .about-split__badge { right: auto; left: clamp(-1rem, -2vw, -2rem); }
@media (max-width: 899px) { [dir="rtl"] .about-split__badge { left: 1rem; } }

/* Shop filters / toolbar (.filter-promo span: equal insets — symmetric) */
[dir="rtl"] .filter-cats a > span:last-child { margin-left: 0; margin-right: auto; }
[dir="rtl"] .price-inputs__prefix { left: auto; right: .8rem; }
[dir="rtl"] .price-inputs input { padding: 0 1.6rem 0 .6rem; }
[dir="rtl"] .shop-toolbar__sort { margin-left: 0; margin-right: auto; }
[dir="rtl"] .shop-toolbar__sort select { padding: 0 1rem 0 2.4rem; }

/* Product / cart / checkout */
[dir="rtl"] .gallery__tag { left: auto; right: 1rem; }
[dir="rtl"] .cart-table th { text-align: right; }
[dir="rtl"] .summary-lines__thumb span { right: auto; left: -7px; }
[dir="rtl"] legend.form-card__title { float: right; }
[dir="rtl"] .confirm-card__lines, [dir="rtl"] .confirm-card .totals { text-align: right; }

/* Blog sidebar (.widget-promo > span: equal insets — symmetric) */
[dir="rtl"] .widget--search .input { padding-right: 1rem; padding-left: 3.25rem; }
[dir="rtl"] .widget--search .icon-btn { right: auto; left: 4px; }
[dir="rtl"] .share span { margin-right: 0; margin-left: .35rem; }

/* About / company */
[dir="rtl"] .stat-band li { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .stat-band li:last-child { border-left: 0; }
[dir="rtl"] .timeline li::before { left: auto; right: 37px; }
[dir="rtl"] .legal-nav a { border-left: 0; border-right: 3px solid transparent; }
[dir="rtl"] .legal-nav a.is-active { border-right-color: var(--brand); }
[dir="rtl"] figcaption { left: auto; right: .6rem; }
[dir="rtl"] .service-media__body .service-card__icon { left: auto; right: 1.75rem; }

/* Auth / account */
[dir="rtl"] .auth-pass .input { padding-right: 1rem; padding-left: 3rem; }
[dir="rtl"] .auth-pass__toggle { right: auto; left: .4rem; }
[dir="rtl"] .account-nav a, [dir="rtl"] .account-nav button { text-align: right; }
[dir="rtl"] .acc-count { margin-left: 0; margin-right: .25rem; }
[dir="rtl"] .acc-dl dd { text-align: left; }
[dir="rtl"] .acc-switch input::after { left: auto; right: 3px; }
[dir="rtl"] .acc-switch input:checked::after { transform: translateX(-20px); }

/* ---------- chat.css (loads after this file; [dir] prefix wins on specificity) ---------- */
[dir="rtl"] .chatw { right: auto; left: 20px; }
[dir="rtl"] .chatw__badge { right: auto; left: -2px; }
[dir="rtl"] .chatw__panel { right: auto; left: 0; transform-origin: bottom left; }
[dir="rtl"] .chatw__msg--bot .chatw__bubble, [dir="rtl"] .chatw__msg--agent .chatw__bubble { border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; }
[dir="rtl"] .chatw__msg--customer .chatw__bubble { border-bottom-right-radius: 16px; border-bottom-left-radius: 5px; }
[dir="rtl"] .chatw__typing { border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; }
[dir="rtl"] .chatw__name { padding-left: 0; padding-right: .25rem; }
@media (max-width: 1023px) { [dir="rtl"] .chatw { right: auto; left: 16px; } }
@media (max-width: 639px) {
    [dir="rtl"] .chatw.is-open { inset: 0; }
    [dir="rtl"] .chatw__panel { inset: 0; }
}

/* ---------- careers.css (decorative blobs + card accents) ---------- */
[dir="rtl"] .crr-hero-shape--1 { right: auto; left: -100px; }
[dir="rtl"] .crr-hero-shape--2 { left: auto; right: -50px; }
[dir="rtl"] .crr-hero-shape--3 { left: auto; right: 40%; }
/* @keyframes floatShape drift: decorative, intentionally not mirrored */
[dir="rtl"] .crr-value-card::before { transform-origin: right; }
/* .crr-job-card::after: left:0;right:0 + origin centre — symmetric */
[dir="rtl"] .crr-detail-list li:hover { transform: translateX(-4px); }

/* ---------- modern.css (careers/contact pages) ---------- */
/* .cx-btn__arrow / .crr-nav-next / .ct-quick__go nudges: handled by the icon `scale` mirror */
[dir="rtl"] .cx-why__item:hover { transform: translateX(-2px); }
[dir="rtl"] .cx-hero__title span { background: linear-gradient(270deg, #9cc0ff, #fff); -webkit-background-clip: text; background-clip: text; }
[dir="rtl"] .cx-steps-list li { padding: .15rem 2.6rem 0 0; }
[dir="rtl"] .cx-steps-list li::before { left: auto; right: 0; }
[dir="rtl"] .cx-facts dd { text-align: left; }
[dir="rtl"] .ct-counter { text-align: left; }
/* .cx-sticky-apply, .ct-map__card-wrap: left:0;right:0 — symmetric */