/* ===== Languages: switcher, typography per script, and the right-to-left (Arabic) mirror of shop.css / lp.css ===== */

/* ---- language menu (no JavaScript needed: <details>) ---- */
.langsw{position:relative}
.langsw summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:9px;font-weight:600;font-size:.92rem;color:var(--text);white-space:nowrap}
.langsw summary::-webkit-details-marker{display:none}
.langsw summary:hover,.langsw[open] summary{background:var(--brand-l,#eef6f5)}
.langsw ul{list-style:none;margin:0;padding:6px;position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:150px;background:#fff;border:1px solid var(--line,#e5e7ec);border-radius:12px;box-shadow:0 14px 34px rgba(16,24,40,.16);z-index:200}
.langsw li a{display:block;padding:8px 12px;border-radius:8px;color:var(--text);font-weight:500}
.langsw li a:hover{background:var(--brand-l,#eef6f5);text-decoration:none}
.langsw li a[aria-current]{background:var(--brand,#0f766e);color:#fff;font-weight:700}
@media(max-width:900px){.langsw summary span{display:none}}

/* ---- typography per script ---- */
html[lang=ar] body{line-height:1.85}
html[lang=ar] *{letter-spacing:0!important}                 /* letter-spacing breaks the joined Arabic letters */
html[lang=hi] body{line-height:1.8}
html[lang=hi] h1,html[lang=hi] h2,html[lang=hi] h3{line-height:1.45}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{line-height:1.5}

/* ---- right-to-left mirror ---- */
html[dir=rtl] .arr{display:inline-block;transform:scaleX(-1)}                      /* → becomes ← */
html[dir=rtl] input[type=tel],html[dir=rtl] input[type=email],html[dir=rtl] input[type=url],html[dir=rtl] input[type=number],html[dir=rtl] input[type=date],
html[dir=rtl] input[name=phone],html[dir=rtl] input[name=code],html[dir=rtl] input[name=coupon]{direction:ltr;text-align:right}   /* numbers and e-mail addresses stay left-to-right */
html[dir=rtl] .price b,html[dir=rtl] .price s,html[dir=rtl] .big,html[dir=rtl] .sum b,html[dir=rtl] .tot,html[dir=rtl] .cp-price b,html[dir=rtl] .cp-price s{unicode-bidi:isolate}

/* header / search */
html[dir=rtl] .search input{border-radius:0 11px 11px 0;border-right:1px solid var(--line);border-left:0}
html[dir=rtl] .search button{border-radius:11px 0 0 11px}
html[dir=rtl] .hact{margin-left:0;margin-right:auto}
html[dir=rtl] .cartb{right:auto;left:0}
html[dir=rtl] .dd-menu{left:auto;right:0}
html[dir=rtl] .dd-menu .sub,html[dir=rtl] .side .sub{padding-left:0;padding-right:24px}

/* product cards, prices, quantity */
html[dir=rtl] .tag{left:auto;right:10px}
html[dir=rtl] .tag.new{right:auto;left:10px}
html[dir=rtl] .price s,html[dir=rtl] .pd .big s,html[dir=rtl] .cp-price s,html[dir=rtl] .offer s{margin-left:0;margin-right:8px}
html[dir=rtl] .big-rate span,html[dir=rtl] #sn-toast a{margin-left:0;margin-right:6px}
html[dir=rtl] table.t th,html[dir=rtl] .t th,html[dir=rtl] .t td{text-align:right}
html[dir=rtl] .cmp td:first-child{text-align:right}

/* rating stars fill from the right */
html[dir=rtl] .stars::before{background:linear-gradient(270deg,#f59e0b calc(var(--rate) / 5 * 100%),#d5d9d9 0);-webkit-background-clip:text;background-clip:text}
html[dir=rtl] .pick-stars{flex-direction:row}                 /* 1 … 5 from the right; the hover/checked rule fills towards the reading start */
html[dir=rtl] .pick-stars label:hover,html[dir=rtl] .pick-stars label:hover~label,html[dir=rtl] .pick-stars input:checked~label{color:#f59e0b}

/* horizontal rows: "previous" is on the right in RTL and the arrow glyphs mirror */
html[dir=rtl] .hs-nav.prev{left:auto;right:-14px}
html[dir=rtl] .hs-nav.next{right:auto;left:-14px}
html[dir=rtl] .hs-nav{transform:translateY(-50%) scaleX(-1)}

/* pop-up */
html[dir=rtl] .cp-x{right:auto;left:10px}
html[dir=rtl] .cp-head{padding-right:0;padding-left:28px}

/* order timeline */
html[dir=rtl] .steps li{padding:0 22px 14px 0;border-left:0;border-right:2px solid var(--line);margin-left:0;margin-right:6px}
html[dir=rtl] .steps li::before{left:auto;right:-7px}

/* landing pages */
html[dir=rtl] .nums .card::before{left:auto;right:22px}
html[dir=rtl] .wa{right:auto;left:16px}
html[dir=rtl] .sticky{direction:rtl}