/* AdvanSEM e-commerce landing page: right-to-left overrides for ecommerce.css.
   Load after ecommerce.css on the Arabic page (html dir="rtl"). Only what does not
   mirror on its own: side offsets, one-sided borders and spacing, text-align,
   horizontal nudges, and letter-spacing (Arabic must never be letter-spaced). */

/* ---- shared blocks ---- */
html[dir="rtl"] .asx .map{text-align:right}
html[dir="rtl"] .asx .layer-tag,
html[dir="rtl"] .asx .layer-tag em{letter-spacing:0}
html[dir="rtl"] .asx .node{text-align:right}
html[dir="rtl"] .asx .flow{padding:12px 132px 12px 0}
@media(max-width:860px){html[dir="rtl"] .asx .flow{padding:10px 0}}
html[dir="rtl"] .asx .flow span:after{left:auto;right:-4px}
html[dir="rtl"] .asx .map-read{border-left:1px solid var(--line-navy);border-right:3px solid var(--em)}
html[dir="rtl"] .asx .sym button{text-align:right}
html[dir="rtl"] .asx .rx-card.start{border-left:0;border-right:3px solid var(--em)}
html[dir="rtl"] .asx .rx-card.avoid{border-left:0;border-right:3px solid #94A3B8}
html[dir="rtl"] .asx .rx-l{letter-spacing:0}
html[dir="rtl"] .asx .svc li{padding-left:0;padding-right:18px}
html[dir="rtl"] .asx .svc li:before{left:auto;right:0}
html[dir="rtl"] .asx .pk-c .nm{letter-spacing:0}
html[dir="rtl"] .asx .q button{text-align:right}
html[dir="rtl"] .asx .fit button{text-align:right}
html[dir="rtl"] .asx .tier .badge{letter-spacing:0}
html[dir="rtl"] .asx .gfx-read{text-align:right}
html[dir="rtl"] .asx .lp-legend button{text-align:right}
html[dir="rtl"] .asx button.tier{text-align:right}

/* ---- stage diagnostic verdict: accent bar on the right ---- */
html[dir="rtl"] .asx .verdict{border-left:1px solid var(--line);border-right:3px solid var(--line)}
html[dir="rtl"] .asx .verdict.other{border-left-color:#D7E3F3;border-right-color:var(--navy)}
html[dir="rtl"] .asx .verdict.mixed{border-left-color:#E2E8F0;border-right-color:#94A3B8}
html[dir="rtl"] .asx .verdict.yes{border-left-color:var(--line);border-right-color:var(--em)}
html[dir="rtl"] .asx .fit-lead{padding-left:0;padding-right:15px;border-left:0;border-right:3px solid var(--em)}
html[dir="rtl"] .asx .verdict .vk{letter-spacing:0}
html[dir="rtl"] .asx .verdict .vl li{padding-left:0;padding-right:22px}
html[dir="rtl"] .asx .verdict .vl li:before{left:auto;right:0}
html[dir="rtl"] .elementor .gx-fitset .verdict .jump:hover{transform:translateX(-3px)}

/* ---- first ten days: the day label sits on the right ---- */
html[dir="rtl"] .asx .day .n{border-right:0;border-left:1px solid var(--line);letter-spacing:0}
html[dir="rtl"] .asx .day .c + .c{border-left:0;border-right:1px solid var(--line)}
html[dir="rtl"] .asx .day .l{letter-spacing:0}
@media(max-width:760px){
  html[dir="rtl"] .asx .day .n{border-left:0}
  html[dir="rtl"] .asx .day .c + .c{border-right:0}
}

/* ---- numbers, price block, cards ---- */
html[dir="rtl"] .elementor .gx-pnum p,
html[dir="rtl"] .elementor .gx-rnum p,
html[dir="rtl"] .elementor .gx-prob .gx-pnum p,
html[dir="rtl"] .elementor .gx-price-w .price .n{letter-spacing:0}
html[dir="rtl"] .elementor .gx-price-w .promise{padding:0 40px 0 0;border-left:0;border-right:1px solid #DCEAE3}
@media(max-width:760px){html[dir="rtl"] .elementor .gx-price-w .promise{padding:16px 0 0;border-right:0}}
html[dir="rtl"] .elementor .gx-price-w .price-sub{text-align:right}
html[dir="rtl"] .elementor .gx-tiers .tier:before{background:radial-gradient(120% 120% at 88% 0%, rgba(16,185,129,.16), transparent 62%)}
html[dir="rtl"] .elementor .bz-band .li .from,
html[dir="rtl"] .elementor .bz-band .notin-c .add{margin-left:0;margin-right:-7px}
html[dir="rtl"] .elementor .bz-band .li .from:hover,
html[dir="rtl"] .elementor .bz-band .notin-c .add:hover{transform:translateX(-3px)}
html[dir="rtl"] .elementor .gx-prob:before{left:auto;right:0}
html[dir="rtl"] .elementor .gx-kpi{transition:background .22s,padding-right .22s}
html[dir="rtl"] .elementor .gx-kpi:hover{padding-left:0;padding-right:14px}
html[dir="rtl"] .elementor .gx-kpi:after{left:auto;right:0}
html[dir="rtl"] .mb-tier-badge{right:auto;left:18px}
html[dir="rtl"] .mb-tier-badge.elementor-widget-heading .elementor-heading-title{letter-spacing:0}
html[dir="rtl"] .sm-tip{margin-left:0;margin-right:6px}
html[dir="rtl"] .sm-tip::after{text-align:right}
html[dir="rtl"] .ix-mx .ix-mo{margin-left:0;margin-right:1px}

/* ---- hero: the leaking funnel switches (knob starts on the right, slides left when on) ---- */
html[dir="rtl"] .elementor .gx-hero .fn-sw{padding:6px 6px 6px 10px}
html[dir="rtl"] .elementor .gx-hero .fn-sw i:after{left:auto;right:2px;transition:right .28s}
html[dir="rtl"] .elementor .gx-hero .fn-sw[aria-pressed="true"] i:after{left:auto;right:11px}
html[dir="rtl"] .elementor .gx-hero .fn-sw b{letter-spacing:0}

/* ---- one order, all the way down: the receipt ---- */
html[dir="rtl"] .elementor .gx-rcpt label{letter-spacing:0}
/* values sit on the outer edge; minus signs and the multiplier stay on the correct side */
html[dir="rtl"] .elementor .gx-rcpt output{text-align:left;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .elementor .gx-rcpt .rc .rl b,
html[dir="rtl"] .elementor .gx-rcpt .rc .tot b{direction:ltr;unicode-bidi:isolate}
@media(min-width:901px){html[dir="rtl"] .elementor .gx-rcpt .rc{transform:rotate(1.4deg)}}
html[dir="rtl"] .elementor .gx-rcpt .rc .hd,
html[dir="rtl"] .elementor .gx-rcpt .rc .sub,
html[dir="rtl"] .elementor .gx-rcpt .rc .tot span,
html[dir="rtl"] .elementor .gx-rcpt .rc .tot b,
html[dir="rtl"] .elementor .gx-rcpt .rc .ft{letter-spacing:0}

/* ---- where to start: answers align right, nudge toward the reading direction ---- */
html[dir="rtl"] .gx-dx-opts button{text-align:right}
html[dir="rtl"] .gx-dx-opts button:hover{transform:translateX(-4px)}
html[dir="rtl"] .gx-dx-res h3{letter-spacing:0}
html[dir="rtl"] .gx-dx-res .gx-dx-week{border-left:1px solid var(--ln);border-right:3px solid var(--em);border-radius:12px 0 0 12px}