/* ==========================================================================
   urdu.css — right-to-left layout and Urdu typography
   --------------------------------------------------------------------------
   Loaded on every page, but almost everything in it is inside
   [dir="rtl"] or :lang(ur), so it costs an English visitor nothing.

   TWO SEPARATE JOBS, and it helps to keep them apart in your head:

     1. DIRECTION.  [dir="rtl"] mirrors the layout. Most of the site already
        uses logical properties (padding-inline, margin-inline, inset-inline)
        which mirror by themselves; this file only has to fix the places that
        use physical left/right, plus the handful of arrows and chevrons that
        must point the other way.

     2. TYPOGRAPHY. :lang(ur) restyles the type. Nastaliq is not a Latin face
        with different glyphs — it is a calligraphic script that slopes down to
        the left, so letters need far more vertical room than Latin does, and
        SMALL SIZES ARE UNREADABLE. Every Urdu rule here is bigger and looser
        than its English counterpart, and that is not decoration.

   THE FACE
     Noto Nastaliq Urdu, which is what Urdu readers in Pakistan expect for
     running text — BBC Urdu and the Urdu dailies all set Nastaliq. The
     alternative, Naskh, is easier to fit into a layout but reads as foreign.
     assets/js/i18n.js requests it only when somebody actually switches.
   ========================================================================== */

:root {
  --ur-face: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Alvi Nastaleeq",
             "Urdu Typesetting", serif;
}

/* ==========================================================================
   1. THE LANGUAGE SWITCH
   ========================================================================== */
.langsw {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  overflow: hidden;
  /* it sits in the dark top bar, which is a flex row of small links */
  align-self: center;
}

/*
  THE FALLBACK POSITION. i18n.js mounts the switch into .switch__meta in the
  top bar. The checkout page has no top bar — its header is deliberately
  stripped back to a logo and a phone number — so there the switch floats
  instead. See the host lookup in assets/js/i18n.js.
*/
.langsw--float {
  position: absolute;
  top: clamp(0.85rem, 2vh, 1.5rem);
  left: clamp(1rem, 2.5vw, 2rem);
  z-index: 12;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  color: #fff;
}

[dir="rtl"] .langsw--float {
  left: auto;
  right: clamp(1rem, 2.5vw, 2rem);
}

.langsw__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0.28rem 0.7rem;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease;
}

/* the Urdu button shows its own name in its own script, so it needs the face
   even while the page is still in English */
.langsw__btn[data-lang="ur"] {
  font-family: var(--ur-face);
  font-size: 0.9rem;
  /* Nastaliq sits low in its box; nudge it back onto the baseline of the Latin
     button beside it */
  padding-block: 0.1rem 0.34rem;
}

.langsw__btn:hover { background: rgba(255, 255, 255, 0.14); }

.langsw__btn.is-on {
  background: #fff;
  color: #111;
}

/*
  ON THE CHECKOUT PAGE the switch sits in a LIGHT header rather than in the
  dark top bar, so the white hairline border and the white "current" pill both
  vanish against it. Same control, inverted.

  It used to fall back to .langsw--float there, which put it in the top-left
  corner — measured at x=32 against a logo starting at x=40, so it was drawn
  straight over the 5M mark. checkout.html now carries a [data-lang-host] for
  it instead; see the host lookup in assets/js/i18n.js.
*/
.co__lang { display: flex; align-items: center; }

.co__lang .langsw {
  border-color: var(--line);
  color: var(--muted);
}

.co__lang .langsw__btn:hover { background: rgba(15, 20, 26, 0.06); }

.co__lang .langsw__btn.is-on {
  background: var(--brand);
  color: var(--on-brand);
}

/* ==========================================================================
   2. URDU TYPOGRAPHY
   --------------------------------------------------------------------------
   Applied by language, not by direction, so a stray English word inside an
   Urdu page keeps its own face.
   ========================================================================== */
:lang(ur) body,
[lang="ur"] body {
  font-family: var(--ur-face);
  /* Nastaliq needs roughly double the leading of Latin. 1.6 — fine for Inter —
     makes the descenders of one line collide with the next. */
  line-height: 2.05;
}

/*
  HEADINGS. The English headings are set in Archivo Black, uppercase, with
  negative tracking — none of which means anything in Urdu. Nastaliq has no
  case, letter-spacing breaks the joins between letters, and there is no black
  weight. So all three are switched off and size does the work instead.
*/
[lang="ur"] .vals__title,
[lang="ur"] .val__head,
[lang="ur"] .close__title,
[lang="ur"] .stepcard__head,
[lang="ur"] .showcase__title,
[lang="ur"] .sccard__name,
[lang="ur"] .vhero__title,
[lang="ur"] .cg-h1,
[lang="ur"] .cg-h2,
[lang="ur"] h1, [lang="ur"] h2, [lang="ur"] h3 {
  font-family: var(--ur-face);
  font-weight: 600;
  text-transform: none;      /* uppercase is meaningless in this script */
  letter-spacing: normal;    /* tracking severs the joins */
  line-height: 1.85;
}

/*
  SMALL UPPERCASE LABELS. Space Mono, 0.6-0.72rem, tracked out to 0.2em. In
  Nastaliq that is illegible — the script simply does not survive at 10px with
  letters pushed apart. Bigger, untracked, and no uppercase.
*/
[lang="ur"] .vals__eyebrow,
[lang="ur"] .val__no,
[lang="ur"] .stepcard__no,
[lang="ur"] .stepcard__cap,
[lang="ur"] .stepcard__foot,
[lang="ur"] .steps__hint,
[lang="ur"] .showcase__eyebrow,
[lang="ur"] .vhero__eyebrow,
[lang="ur"] .cg-label,
[lang="ur"] .cg-link,
[lang="ur"] .cg-btn,
[lang="ur"] .card__sku,
[lang="ur"] .mark,
[lang="ur"] .tag,
[lang="ur"] .footer h3 {
  font-family: var(--ur-face);
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.95rem;
  line-height: 1.9;
}

/* running text: a size up and looser, because Nastaliq needs both */
[lang="ur"] .val__body,
[lang="ur"] .vhero__body,
[lang="ur"] .showcase__sub,
[lang="ur"] .close__sub,
[lang="ur"] .stepcard__body,
[lang="ur"] .pdp-fold__body p,
[lang="ur"] .featlist li,
[lang="ur"] .card__spec,
[lang="ur"] .footer__note,
[lang="ur"] .footer li {
  font-family: var(--ur-face);
  font-size: 1.12rem;
  line-height: 2.1;
}

/* the brush word is a Latin display face; in Urdu it becomes an ordinary
   coloured heading rather than a fake brush */
[lang="ur"] .val__brush,
[lang="ur"] .close__brush {
  font-family: var(--ur-face);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.9;
}

/* buttons need the extra height or the descenders are clipped */
[lang="ur"] .btn,
[lang="ur"] .vbtn,
[lang="ur"] .cg-btn,
[lang="ur"] .langsw__btn[data-lang="ur"] {
  line-height: 1.9;
  padding-block: 0.62rem 0.78rem;
}

/* numbers, codes and ratings stay Latin — keep them in a Latin face so they
   are not rendered with Nastaliq's contextual forms */
[lang="ur"] .price,
[lang="ur"] .card__sku,
[lang="ur"] .vrow__code,
[lang="ur"] .vrow__price,
[lang="ur"] .spec__val,
[lang="ur"] code,
[lang="ur"] .est,
[lang="ur"] .est * {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==========================================================================
   3. DIRECTION — mirroring the layout
   ========================================================================== */

/* --- table and cell alignment: physical -> mirrored ------------------- */
[dir="rtl"] .vrow__price,
[dir="rtl"] .line__right { text-align: left; }

[dir="rtl"] .co__field label,
[dir="rtl"] .catbar__count { text-align: right; }

/* --- indented category tree ------------------------------------------ */
[dir="rtl"] .catside__tree .lv2 { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .catside__tree .lv3 { padding-left: 0; padding-right: 2rem; }
[dir="rtl"] .catside__tree .lv4 { padding-left: 0; padding-right: 3rem; }

/* --- chevrons and arrows must point the other way -------------------- */
/*
  Every chevron on the site is drawn from two borders on an ::after and rotated
  45deg. Mirroring it is one scaleX, which is far less fragile than swapping
  which two borders are set.
*/
[dir="rtl"] .cg-link::after,
[dir="rtl"] .cg-btn::after,
[dir="rtl"] .catfilter > summary::after {
  transform: rotate(45deg) scaleX(-1);
}

[dir="rtl"] .cg-link:hover::after {
  transform: rotate(45deg) scaleX(-1) translate(2px, -2px);
}

/* the literal arrow characters in links, and the SVG arrow icons */
[dir="rtl"] .vbtn-link,
[dir="rtl"] .showcase__all,
[dir="rtl"] .vbundle { direction: rtl; }

[dir="rtl"] .btn svg use[href="#i-arrow"],
[dir="rtl"] svg.rtl-flip { transform: scaleX(-1); }

/* --- the hero's fanned card stack ------------------------------------ */
/* the fan overlaps its cards with negative physical margins; mirror them */
[dir="rtl"] .vpack__card:nth-child(1) { margin-right: 0; margin-left: -3.2rem; }
[dir="rtl"] .vpack__card:nth-child(3) { margin-left: 0; margin-right: -3.2rem; }

/* --- the four-steps track -------------------------------------------- */
/*
  The row is moved with a negative translateX, and in RTL a flex row already
  starts from the right — so the sign has to flip or the cards would slide off
  the wrong edge. Same for the wall behind them.
*/
[dir="rtl"] .steps__track {
  transform: translate3d(calc(var(--p, 0) * var(--travel, 0px)), 0, 0);
}

[dir="rtl"] .steps__wall {
  transform: translate3d(calc(var(--p, 0) * var(--travel, 0px) * 0.32), 0, 0);
}

/* --- the coverflow carousel ------------------------------------------ */
/*
  showcase.css positions cards with a signed --dx. Mirroring the whole strip is
  one transform on the stage rather than re-signing every position, and the
  cards' own contents are flipped back so text is not reversed.
*/
[dir="rtl"] .showcase__stage { transform: scaleX(-1); }
[dir="rtl"] .sccard { transform: scaleX(-1) translate(50%, -50%) translateX(calc(var(--dx) * -1)) scale(var(--sk)); }

/* --- the drifting product discs -------------------------------------- */
/* --x is a percentage from the left; in RTL read it from the right instead */
[dir="rtl"] .vdot { left: auto; right: var(--x); }

/* the welcome overlay mirrors itself — see the [dir="rtl"] rules at the foot
   of assets/css/intro.css */

/* --- the cart drawer slides in from the other side ------------------- */
[dir="rtl"] .cart { right: auto; left: 0; }
[dir="rtl"] .cart:not(.is-open) { transform: translateX(-100%); }

/* --- the search field's icon ----------------------------------------- */
[dir="rtl"] .search svg { order: 2; }

/* ==========================================================================
   4. STAYING RESPONSIVE IN URDU
   --------------------------------------------------------------------------
   Urdu runs longer than English and Nastaliq runs taller, so the two places
   with the least slack need a little more room.
   ========================================================================== */

/* the nav is a single row of seven items; in Urdu it needs to be allowed to
   wrap rather than squeeze */
[lang="ur"] .nav {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

/* the step cards are a fixed height with six stacked blocks of type. Urdu
   makes each block taller, so let the card grow. */
[lang="ur"] .stepcard { min-height: 0; }

/* the value entries are min-height: 78vh with the text centred; Urdu body copy
   can exceed that, so let it push */
@media (min-width: 940px) {
  [lang="ur"] .val { min-height: 0; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
}

/* small screens: Nastaliq at 1.12rem in a 78vw card is tight */
@media (max-width: 560px) {
  [lang="ur"] .val__body,
  [lang="ur"] .stepcard__body,
  [lang="ur"] .close__sub { font-size: 1.06rem; line-height: 2; }
}

/* ==========================================================================
   5. PRINT — the bill is always English
   --------------------------------------------------------------------------
   The Estimate is a commercial document that has to match the paper slip the
   counter hands over, and it is a dense grid of Latin part numbers and Latin
   figures. It stays left-to-right and in its own face whatever the site is set
   to. i18n.js also refuses to translate anything inside .est.
   ========================================================================== */
@media print {
  [dir="rtl"] .est,
  [dir="rtl"] .est-wrap {
    direction: ltr;
    text-align: left;
  }
}