/* Right-to-left pages (Arabic). Loaded only when the page is dir="rtl" (assetStylesheet), after the page's first
   stylesheet. Flex and grid layouts mirror by themselves; this file mirrors what was written with left/right and keeps
   numbers, sizes and codes in their own left-to-right order. Every rule is scoped to [dir=rtl], so it outranks the rule
   it mirrors and no other language is touched. */

/* ---- text: Arabic letters join, so tracking must be off (the system's Arabic face is used through the normal fallback) */
[dir=rtl] *{letter-spacing:0!important}

/* ---- measurements, prices, codes, emails, phone numbers and inputs for them read left to right */
[dir=rtl] .ltr,[dir=rtl] [data-ltr],[dir=rtl] .unit-toggle,[dir=rtl] input[type=email],[dir=rtl] input[type=tel],[dir=rtl] input[type=number],[dir=rtl] input[type=url],[dir=rtl] input[type=password],[dir=rtl] .cw-card-value,[dir=rtl] .product-mini>.card-dimensions,[dir=rtl] .drawer-card-body>span:not([class]),[dir=rtl] .product-mini small,[dir=rtl] .drawer-card small,[dir=rtl] .rail-card small,[dir=rtl] .rail-sub{direction:ltr;unicode-bidi:isolate}
[dir=rtl] input[type=email],[dir=rtl] input[type=tel],[dir=rtl] input[type=url],[dir=rtl] input[type=password]{text-align:right}
/* catalog names are English or Chinese: each line takes its own direction, so an ellipsis lands at its end */
[dir=rtl] .product-mini strong,[dir=rtl] .drawer-card strong,[dir=rtl] .rail-card strong,[dir=rtl] .product-head h1,[dir=rtl] .rail-kicker{unicode-bidi:plaintext;text-align:right}
[dir=rtl] .rail-sub{text-align:right}

/* ---- language menu: the arrow points down, the list hangs from the button's left edge side */
[dir=rtl] .lang-menu>summary::after{transform:translateY(-2px) rotate(-45deg)}
[dir=rtl] .lang-menu[open]>summary::after{transform:translateY(1px) rotate(135deg)}

/* ---- Configurator */
[dir=rtl] .popover,[dir=rtl] #accountMenu,[dir=rtl] .box-set-panel,[dir=rtl] .sf-menu{right:auto;left:0}
[dir=rtl] .popover>span{float:left}
[dir=rtl] .stage{border-right:0;border-left:1px solid var(--border)}
[dir=rtl] #galleryPrevious{left:auto;right:16px}
[dir=rtl] #galleryNext{right:auto;left:16px}
[dir=rtl] #galleryPrevious svg,[dir=rtl] #galleryNext svg,[dir=rtl] .rail-scroll-btn svg,[dir=rtl] .cw-back svg{transform:scaleX(-1)}
[dir=rtl] .logo-stage>button{right:auto;left:12px}
[dir=rtl] .logo-stage>span{left:auto;right:14px}
[dir=rtl] .stage-material small,[dir=rtl] .drawer-group h3 span,[dir=rtl] #configurationPanel .design-name-row .rail-pill,[dir=rtl] #configurationPanel .rail-cur,[dir=rtl] #configurationPanel .summary .summary-actions,[dir=rtl] .unit-toggle,[dir=rtl] .sf-dock .sf-dock-cta,[dir=rtl] .box-set-panel>header button{margin-left:0;margin-right:auto}
[dir=rtl] .drawer-group h3 span{margin-right:4px}
[dir=rtl] .swatch-name,[dir=rtl] .quote-optional{margin-left:0;margin-right:6px}
[dir=rtl] .segments button,[dir=rtl] .fds-segmented button{border-right:0;border-left:1px solid var(--strong,var(--fds-border-strong))}
[dir=rtl] .segments button:last-child,[dir=rtl] .fds-segmented button:last-child{border-left:0}
[dir=rtl] .selection-card,[dir=rtl] .slot,[dir=rtl] .quantity-card,[dir=rtl] .material-card,[dir=rtl] .pill-menu a,[dir=rtl] .pill-menu button,[dir=rtl] #configurationPanel .rail-card,[dir=rtl] #configurationPanel .rail-row,[dir=rtl] #configurationPanel .product-mini,[dir=rtl] .drawer-v2 .drawer-series-card,[dir=rtl] .sf-menu a,[dir=rtl] .sf-menu button,[dir=rtl] .cw-about,[dir=rtl] .cw-form,[dir=rtl] .fds-choice{text-align:right}
[dir=rtl] .selection-section dd,[dir=rtl] body.sf .box-set-item .sf-amount,[dir=rtl] .quote-list-total,[dir=rtl] .quote-item dd,[dir=rtl] .quote-contact dd,[dir=rtl] .snapshot-summary dd{text-align:left}
[dir=rtl] .selection-card img{float:right;margin-right:0;margin-left:12px}
[dir=rtl] .mark,[dir=rtl] .zoom,[dir=rtl] .material-dialog .material-card .zoom,[dir=rtl] #configurationPanel .rail-card .mark,[dir=rtl] #configurationPanel .card-check,[dir=rtl] #configurationPanel .product-mini.current .card-check,[dir=rtl] #configurationPanel .rail-card.selected .card-check,[dir=rtl] .drawer-card-media .in-set-tag,[dir=rtl] .drawer-v2 .expand-inner .drawer-card-media .in-set-tag,[dir=rtl] .lightbox>button,[dir=rtl] .cw-x,[dir=rtl] .logo-recent-hide{right:auto}
[dir=rtl] .mark,[dir=rtl] .material-dialog .material-card .zoom,[dir=rtl] .drawer-card-media .in-set-tag{left:8px}
[dir=rtl] .zoom{left:14px}
[dir=rtl] #configurationPanel .rail-card .mark,[dir=rtl] .cw-x{left:12px}
[dir=rtl] #configurationPanel .card-check,[dir=rtl] #configurationPanel .product-mini.current .card-check,[dir=rtl] #configurationPanel .rail-card.selected .card-check{left:15px}
[dir=rtl] .drawer-v2 .expand-inner .drawer-card-media .in-set-tag{left:6px}
[dir=rtl] .lightbox>button{left:24px}
[dir=rtl] .logo-recent-hide{left:-6px}
[dir=rtl] .drawer-flag,[dir=rtl] .material-dialog .material-check{left:auto;right:8px}
[dir=rtl] #configurationPanel .product-mini .in-set-tag{left:auto;right:15px}
[dir=rtl] .material-preview{border-left:0;border-right:1px solid var(--border)}
[dir=rtl] #configurationPanel .rail-scroll-btn.is-prev{left:auto;right:-10px}
[dir=rtl] #configurationPanel .rail-scroll-btn.is-next{right:auto;left:-10px}
[dir=rtl] .dialog-close{float:left}

/* Choose Box opens from the right edge */
[dir=rtl] .drawer,[dir=rtl] .fds-drawer{inset:0 0 0 auto;animation-name:drawer-rtl}
@keyframes drawer-rtl{from{transform:translateX(24px);opacity:0}}

/* the summary pill: text side roomy, button side tight */
[dir=rtl] .summary{padding:6px 22px 6px 6px}
[dir=rtl] .sf-dock,[dir=rtl] body.sf .sf-dock.box-set-summary{padding:8px 24px 8px 8px}
[dir=rtl] .sf-avatar{padding:0 5px 0 10px}
[dir=rtl] .selection-card img{margin:0 0 4px 9px}
[dir=rtl] .drawer.drawer-v2{border-radius:22px 0 0 22px}
[dir=rtl] .material-dialog .material-preview{padding:0 20px 0 0}
@media (max-width:900px){
  [dir=rtl] .summary{padding:5px 16px 5px 5px}
  [dir=rtl] .drawer.drawer-v2{border-radius:22px 22px 0 0}
  [dir=rtl] .stage{border-left:0}
  [dir=rtl] .popover,[dir=rtl] .box-set-panel{left:0;right:0}
  [dir=rtl] .drawer.drawer-v2{inset:auto 0 0 0;animation-name:drawerSheet}
}

/* ---- storefront and commercial pages */
[dir=rtl] .customer-brand,[dir=rtl] .commercial-brand,[dir=rtl] .production-brand{margin-right:0;margin-left:auto}
[dir=rtl] .customer-note,[dir=rtl] .state-message{border-left:0;border-right:3px solid #98ad70}
[dir=rtl] .state-message{border-right-color:var(--c-copper,#98ad70)}
[dir=rtl] body.sf .state-message,[dir=rtl] body.sf .customer-note{border-right:0}
@media (max-width:600px){[dir=rtl] .quote-list-total{text-align:right}}
@media (max-width:380px){[dir=rtl] .summary{padding-right:14px}[dir=rtl] body.sf .sf-dock.box-set-summary{padding-right:14px}}

/* ---- support dialog */
[dir=rtl] .cw-tab{left:auto;right:0;border-radius:10px 0 0 10px}