/* AdvanSEM retail store landing page: right-to-left overrides for retail-store.css.
   Load after retail-store.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.no{border-left-color:#E2E8F0;border-right-color:#94A3B8}
html[dir="rtl"] .asx .verdict.mixed{border-left-color:var(--line);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 local search ---- */
html[dir="rtl"] .elementor .gx-hero .pk-bar .caret{margin-left:0;margin-right:3px}
html[dir="rtl"] .elementor .gx-hero .pk-bar .loc{letter-spacing:0}
/* distance and rank columns sit on the left edge now, so they align to it */
html[dir="rtl"] .elementor .gx-hero .sr .ds,
html[dir="rtl"] .elementor .gx-hero .sr .rk{text-align:left}
html[dir="rtl"] .elementor .gx-hero .sr.cut span{letter-spacing:0}
html[dir="rtl"] .elementor .gx-hero .pack-side .lbl,
html[dir="rtl"] .elementor .gx-hero .pack-side .num{letter-spacing:0}
/* switches: the tick box moves to the right edge (the tick itself is not mirrored) */
html[dir="rtl"] .elementor .gx-hero .pack-sw button{text-align:right;padding:11px 46px 11px 14px}
html[dir="rtl"] .elementor .gx-hero .pack-sw button:before{left:auto;right:16px}
html[dir="rtl"] .elementor .gx-hero .pack-sw button:after{left:auto;right:22.5px}

/* ---- "I didn't know you were here": the shopfront switches ---- */
html[dir="rtl"] .elementor .gx-front .fr-sw button{text-align:right;padding:13px 50px 13px 18px}
html[dir="rtl"] .elementor .gx-front .fr-sw button:before{left:auto;right:16px}
html[dir="rtl"] .elementor .gx-front .fr-sw button:after{left:auto;right:22.5px}
html[dir="rtl"] .elementor .gx-front .fr-out .lbl,
html[dir="rtl"] .elementor .gx-front .fr-out .num{letter-spacing:0}

/* ---- the missing middle ---- */
html[dir="rtl"] .elementor .gx-mid .mid-node span,
html[dir="rtl"] .elementor .gx-mid .mid-step span{letter-spacing:0}
/* stacked on phones the chain reads right to left: it enters on the right and leaves on the left */
@media(max-width:900px){
  html[dir="rtl"] .elementor .gx-mid .mid-elbow.in{left:auto;right:26px;
    border-left-width:0;border-right-width:1.5px;border-bottom-left-radius:0;border-bottom-right-radius:18px}
  html[dir="rtl"] .elementor .gx-mid .mid-elbow.out{right:auto;left:26px;
    border-right-width:0;border-left-width:1.5px;border-top-right-radius:0;border-top-left-radius:18px}
}

/* ---- 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}