/* ============================================================================
   PTE VOUCHER PAGE ONLY — /exam-vouchers/pte-academic.

   Loaded by Views/VoucherProduct/Pte.cshtml after site.css and home.css. The storefront
   chrome, the dialogs, the voucher cards and the trust panel come from home.css; this file
   is only what the product page adds — the buy box, the in-page tabs, the explainer
   sections and the phone buy bar. Built on site.css's tokens throughout.
   ========================================================================= */

/* ============================ hero: product + buy box ============================ */

.mi-pdp {
  position: relative;
  padding-block: var(--mi-space-6);
  /* No background of its own (28 Sep 2026, business's request): the page's plain canvas. */
}
.mi-pdp .mi-breadcrumb { margin-bottom: var(--mi-space-5); }

.mi-pdp-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
}
@media (min-width: 1024px) {
  .mi-pdp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 40px; }
  /* The product stays beside the buy box while a long buy box scrolls. Clears the header. */
  .mi-pdp-gallery { position: sticky; top: 100px; }
}

/* ---------- the product visual ---------- */

.mi-pdp-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 380px;
  overflow: hidden;
  background:
    radial-gradient(110% 90% at 100% 0%, rgb(254 198 36 / 0.24) 0%, transparent 55%),
    radial-gradient(110% 90% at 0% 100%, rgb(67 86 232 / 0.16) 0%, transparent 55%),
    linear-gradient(160deg, #fffaf0 0%, #eef2fc 100%);
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-xl);
  box-shadow: var(--mi-shadow);
}
.mi-pdp-stage .mi-voucher-code { right: -8px; bottom: -34px; font-size: 220px; }
.mi-pdp-stage .mi-voucher-provider { top: 18px; left: 18px; }

.mi-pdp-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(330px, 72%);
  height: 136px;
  padding: 22px 30px;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: 22px;
  box-shadow: 0 26px 54px rgb(19 26 58 / 0.14);
}
.mi-pdp-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.mi-pdp-seal {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: rgb(255 255 255 / 0.94);
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-pill);
  box-shadow: var(--mi-shadow-sm);
  color: #0b7a53;
  font: 600 var(--mi-text-xs)/1.3 var(--font-primary);
}

.mi-pdp-facts {
  display: grid;
  gap: var(--mi-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin: var(--mi-space-4) 0 0;
}
@media (min-width: 640px) {
  .mi-pdp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mi-pdp-facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--mi-space-3);
  padding: 14px;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
  box-shadow: var(--mi-shadow-sm);
  color: var(--mi-muted);
  font-size: var(--mi-text-xs);
  line-height: 1.5;
}
.mi-pdp-facts strong {
  display: block;
  margin-bottom: 2px;
  color: var(--mi-title);
  font: 600 var(--mi-text-sm)/1.3 var(--font-primary);
}

.mi-pdp-fact-icon,
.mi-pdp-mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: linear-gradient(140deg, rgb(67 86 232 / 0.12) 0%, rgb(157 123 255 / 0.12) 100%);
  border-radius: 12px;
  color: var(--mi-brand-deep);
  transition: background var(--mi-transition), color var(--mi-transition);
}

/* ---------- the buy box ---------- */

.mi-pdp-buy {
  position: relative;
  display: grid;
  gap: var(--mi-space-4);
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-xl);
  box-shadow: var(--mi-shadow-lg);
}
/* The gold commercial edge — the same mark the purchasable voucher card carries. */
.mi-pdp-buy::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--mi-accent), transparent);
}
.mi-pdp-buy .mi-qv-kicker { padding-right: 0; }

.mi-pdp-title {
  margin: 0;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem);
  letter-spacing: -0.028em;
  line-height: 1.08;
}
/* Darker than --mi-muted, which read too faint under the title (28 Sep 2026). */
.mi-pdp-sub { margin: 0; color: var(--mi-body); font-size: var(--mi-text-lg, 1.125rem); font-weight: 500; }

.mi-pdp-price {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgb(255 250 236) 0%, #fff 60%, rgb(247 249 254) 100%);
  border: 1px solid rgb(240 177 0 / 0.28);
  border-radius: var(--mi-radius);
}
.mi-pdp-now {
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.mi-pdp-now .mi-voucher-cur { font-size: var(--mi-text-base); }
/* The chip is absolutely placed on the voucher cards; here it sits in the price row. */
.mi-home .mi-pdp-save { position: static; }

.mi-pdp-live {
  display: flex;
  align-items: center;
  gap: var(--mi-space-2);
  margin: 0;
  color: #0b7a53;
  font-size: var(--mi-text-xs);
  font-weight: 600;
}

/* ---------- voucher only / book with our help ---------- */

.mi-pdp-modes {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
@media (min-width: 480px) {
  .mi-pdp-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mi-pdp-modes legend { margin-bottom: var(--mi-space-2); padding: 0; }

.mi-pdp-mode { position: relative; cursor: pointer; }
/* Visually hidden but still the focusable, announced control. */
.mi-pdp-mode input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }

.mi-pdp-mode-card {
  display: flex;
  align-items: flex-start;
  gap: var(--mi-space-3);
  height: 100%;
  padding: 14px;
  background: #fff;
  border: 1.5px solid var(--mi-line-strong);
  border-radius: var(--mi-radius);
  color: var(--mi-muted);
  font-size: var(--mi-text-xs);
  line-height: 1.45;
  transition: border-color var(--mi-transition), background var(--mi-transition),
              box-shadow var(--mi-transition);
}
.mi-pdp-mode-card strong {
  display: block;
  margin-bottom: 2px;
  color: var(--mi-title);
  font: 600 var(--mi-text-sm)/1.3 var(--font-primary);
}
.mi-pdp-mode-icon { width: 34px; height: 34px; border-radius: 10px; }
.mi-pdp-mode:hover .mi-pdp-mode-card { border-color: rgb(67 86 232 / 0.4); }
.mi-pdp-mode input:checked + .mi-pdp-mode-card {
  background: rgb(67 86 232 / 0.05);
  border-color: var(--mi-brand);
  box-shadow: 0 0 0 3px rgb(67 86 232 / 0.12);
}
.mi-pdp-mode input:checked + .mi-pdp-mode-card .mi-pdp-mode-icon {
  background: linear-gradient(135deg, #5468ee 0%, var(--mi-brand-deep) 100%);
  color: #fff;
}
.mi-pdp-mode input:focus-visible + .mi-pdp-mode-card { outline: 2px solid var(--mi-link); outline-offset: 2px; }

.mi-pdp-panel { display: grid; gap: var(--mi-space-3); }

/* ---------- the shop: ticket + order card (every voucher page) ----------
   Views/Shared/_VoucherShop.cshtml. Redesigned 28 Sep 2026 away from the reference site's
   layout (tabs across the top, a card split white / dark): the voucher as a ticket on the left,
   one white order card with numbered steps on the right. Every per-option piece carries
   .mi-pdp-offer--{id}; the partial writes the rules that show the checked option's. */
.mi-pdp-offer { display: grid; }

.mi-pdp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mi-space-3) var(--mi-space-5);
  margin-bottom: var(--mi-space-5);
}
.mi-pdp-head-text { display: grid; gap: var(--mi-space-2); max-width: 100%; }

/* PTE: the exams the voucher covers, highlighted, with a note under it. */
.mi-pdp-authorised-wrap { display: grid; justify-items: start; gap: 6px; margin-bottom: 4px; }
.mi-pdp-authorised {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #5b4bf0 0%, #3a4bd6 55%, var(--mi-brand-deep) 100%);
  border-radius: var(--mi-radius-pill);
  box-shadow: 0 8px 20px rgb(58 75 214 / 0.25);
  color: #fff;
  font: 700 var(--mi-text-sm)/1.35 var(--font-primary);
  letter-spacing: 0.01em;
}
.mi-pdp-authorised .mi-ico { flex-shrink: 0; color: #fec624; }
/* PTE's seal in a dark green (30 Sep 2026, business's request); the four-class selector outranks
   the design preview's gold (.dv main .mi-pdp-authorised .mi-ico). */
.mi-pdp-head--aside .mi-pdp-authorised-wrap--aside .mi-pdp-authorised .mi-ico {
  color: #047857;
  filter: drop-shadow(0 2px 4px rgb(4 120 87 / 0.3));
}
.mi-pdp-authorised-note {
  padding-left: 4px;
  color: var(--mi-brand-deep);
  font: 600 var(--mi-text-sm)/1.4 var(--font-primary);
}
/* On the right of the heading on a wide screen (30 Sep 2026, in place of the seal); above the
   title, as before, on a narrow one. */
.mi-pdp-authorised-wrap--aside { flex-basis: 100%; }
@media (min-width: 1200px) {
  .mi-pdp-head--aside { flex-wrap: nowrap; }
  .mi-pdp-head--aside .mi-pdp-head-text { flex: 1 1 0; min-width: 0; }
  .mi-pdp-authorised-wrap--aside {
    flex: 0 0 auto;
    order: 2;
    align-self: flex-start;
    justify-items: end;
    margin: 0;
    text-align: right;
  }
}
.mi-pdp-head .mi-pdp-seal { position: static; }
/* The seal in the head — a dark green pill (29 Sep 2026, business's request: the pale one did not
   stand out). The WhatsApp button's green family, white words and shield. */
.mi-pdp-head .mi-pdp-seal {
  padding: 9px 16px;
  background: linear-gradient(135deg, #0a6b3c 0%, #064e3b 100%);
  border: 1px solid #043d2e;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 8px 20px -8px rgb(6 78 59 / 0.6);
  color: #fff;
  font-size: var(--mi-text-sm);
}
.mi-pdp-head .mi-pdp-seal .mi-ico { color: #fff; }

.mi-pdp-shop {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
}
@media (min-width: 960px) {
  /* Even halves (30 Sep 2026): the ticket lost its 132px stub, and that width went to the order
     card so the options read more easily. It was 1.15fr / 0.85fr. */
  .mi-pdp-shop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* The order card stays in view while the left column is read. Clears the header. */
  .mi-shop-order { position: sticky; top: 100px; }
}

/* The PTE page (.mi-pdp--wide, 30 Sep 2026, business's request): less dead margin either side
   on a wide screen — every container on the page, header and footer included, so the edges
   line up. Below 1330px the site's own container already reaches the gutter.
   The buy box keeps even halves (a 0.88 / 1.12 split squeezed the ticket — reverted the same
   day), and stacks below 1100px, where two halves are too narrow for the ticket beside the
   order card's price tables. */
@media (min-width: 1330px) {
  body:has(.mi-pdp--wide) { --mi-container: min(calc(100vw - 48px), 1800px); }
}
@media (max-width: 1099px) {
  .mi-pdp--wide .mi-pdp-shop { grid-template-columns: minmax(0, 1fr); }
}

.mi-shop-side { display: grid; gap: var(--mi-space-4, 20px); min-width: 0; }

/* ---- the ticket: the voucher's face ----
   29 Sep 2026: the business signed off one look for this card — a glossy lavender face with a
   soft light across its top-left, white indigo-edged chips and a grey-blue tagline — and asked
   for it everywhere, so it is drawn here rather than per design. Its tear-off "% OFF" stub (and
   the perforation and notches that joined it) went on 30 Sep 2026, business's request. */

.mi-shop-ticket {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 200px;
  filter: drop-shadow(0 24px 40px rgb(67 86 232 / 0.22));
}
.mi-shop-ticket-main {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px 22px 26px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(124 77 234 / 0.14) 0%, transparent 60%),
    linear-gradient(145deg, #ffffff 0%, #f3f4ff 100%);
  border-radius: 22px;
}
/* No gloss over the face (removed 1 Oct 2026, business's request): a white light laid over the
   whole card — which the design preview moved with the pointer — washed out the illustration. */
.mi-shop-ticket-copy { display: grid; gap: 10px; flex: 1 1 auto; min-width: 0; }
/* The animated illustration (study.json). The artboard is square with the scene in its middle
   band, so the box is wider than tall and the SVG is cropped to it, centred. */
.mi-shop-ticket-art {
  flex: 0 0 auto;
  width: clamp(170px, 36%, 260px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
/* The scene fills only the middle of its 2000×2000 artboard; zoom in so it reads at card size.
   !important because the Lottie player writes its own inline transform on the <svg>. */
.mi-shop-ticket-art svg { display: block; transform: scale(1.2) !important; transform-origin: 50% 58%; }
@media (max-width: 560px) {
  .mi-shop-ticket-art { display: none; }
}
.mi-shop-ticket-logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  height: 75px;
  margin-bottom: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: 14px;
  box-shadow: var(--mi-shadow-sm);
}
.mi-shop-ticket-logo img { width: auto; height: 100%; }
/* PTE: the sharper 320×128 Pearson artwork, whose own margins keep the mark off the edge — the
   box's padding shrinks to match, so the logo reads larger in the same-height box. */
.mi-pdp--wide .mi-shop-ticket-logo { padding: 4px 8px; }
.mi-pdp--wide .mi-shop-ticket-logo img { display: block; max-width: 100%; object-fit: contain; }
.mi-shop-ticket-text { position: relative; z-index: 1; gap: 4px; }
.mi-shop-ticket-kind {
  color: var(--mi-brand);
  font: 700 var(--mi-text-xs)/1.2 var(--font-primary);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mi-shop-ticket-name {
  color: #0b1026;
  font: 700 clamp(1.2rem, 1rem + 0.8vw, 1.6rem)/1.25 var(--font-primary);
  letter-spacing: -0.01em;
}
.mi-shop-ticket-tagline { margin: 0; color: #4f5877; font-size: var(--mi-text-sm); line-height: 1.45; }
.mi-shop-ticket-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.mi-shop-ticket-chips li {
  /* An inline SVG and its words (HomeContent.ShopChip); the icon takes the chip's colour. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  background: #fff;
  border: 1.5px solid rgb(67 86 232 / 0.30);
  border-radius: var(--mi-radius-pill);
  box-shadow: 0 2px 8px -2px rgb(67 86 232 / 0.18);
  color: #0b1026;
  font: 700 var(--mi-text-xs)/1.2 var(--font-primary);
  white-space: nowrap;
}
.mi-shop-ticket-chips .mi-ico { color: #4356e8; }

/* An exam with no artwork in the project (OET) shows its code instead — none is invented. */
.mi-pdp-brand-mark { color: var(--mi-title); font: 800 var(--mi-text-lg)/1 var(--font-primary); letter-spacing: 0.02em; }

/* ---- what the picked option includes ---- */

.mi-shop-includes {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-lg);
  box-shadow: var(--mi-shadow-sm);
}
.mi-shop-includes-body { gap: 10px; }
.mi-shop-includes-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--mi-title);
  font: 700 var(--mi-text-base)/1.3 var(--font-primary);
}
.mi-shop-includes-title .mi-ico { color: var(--mi-violet); }
.mi-shop-includes-lead { margin: 0; color: var(--mi-muted); font-size: var(--mi-text-sm); }

.mi-pdp-checks {
  display: grid;
  gap: 10px 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .mi-pdp-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mi-pdp-checks li { display: flex; align-items: flex-start; gap: 10px; color: var(--mi-title); font-size: var(--mi-text-sm); }
.mi-pdp-checks .mi-ico {
  flex-shrink: 0;
  box-sizing: content-box;
  padding: 3px;
  background: rgb(18 156 107 / 0.12);
  border-radius: 50%;
  color: var(--mi-success);
}

/* ---- two facts as tiles ----
   Tinted and coloured (28 Sep 2026: "too dull" on white) — each tile carries its own colour from
   the home page's step palette: a wash, a matching edge, a solid icon and darker text. */

.mi-shop-facts {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .mi-shop-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mi-shop-facts li {
  --fact-ink: #3346d3;
  --fact-tint: #eef0ff;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--fact-tint) 0%, #fff 100%);
  border: 1px solid color-mix(in srgb, var(--fact-ink) 22%, transparent);
  border-left: 4px solid var(--fact-ink);
  border-radius: var(--mi-radius);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--fact-ink) 10%, transparent);
  color: var(--mi-title);
  font: 600 var(--mi-text-sm)/1.45 var(--font-primary);
}
.mi-shop-facts li:nth-child(2) { --fact-ink: #6d44d9; --fact-tint: #f3edff; }
.mi-shop-fact-icon {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--fact-ink);
  border-radius: 12px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--fact-ink) 35%, transparent);
  color: #fff;
}

/* ---- the order card ---- */

.mi-shop-order {
  display: grid;
  gap: 20px;
  padding: clamp(20px, 2.6vw, 30px);
  background: #fff;
  border: 1px solid rgb(67 86 232 / 0.16);
  border-radius: var(--mi-radius-xl);
  box-shadow: 0 26px 60px rgb(47 63 181 / 0.14);
}
.mi-shop-step { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
/* Room under "1 Choose what you need" (29 Sep 2026). It is the fieldset's <legend>, which the
   fieldset's grid gap does not reach — so the first option sat right against it. */
.mi-shop-step > legend.mi-shop-step-title { margin-bottom: 16px; }
.mi-shop-step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--mi-title);
  font: 700 var(--mi-text-base)/1.3 var(--font-primary);
}
.mi-shop-step-n {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: #eef0ff;
  border-radius: 50%;
  color: #3346d3;
  font: 700 var(--mi-text-xs)/1 var(--font-primary);
}
.mi-shop-pay .mi-shop-step-n { background: #f3edff; color: #6d44d9; }

/* Options: a vertical list of radio rows, each with its own price. */
.mi-shop-opts { display: grid; gap: 10px; }
.mi-shop-opt { position: relative; cursor: pointer; }
.mi-shop-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mi-shop-opt-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "dot label price" "dot off price";
  align-items: center;
  gap: 6px 14px;
  padding: 16px 20px;
  background: #fff;
  border: 1.5px solid var(--mi-line-strong);
  border-radius: 14px;
  transition: border-color var(--mi-transition), background var(--mi-transition), box-shadow var(--mi-transition);
}
.mi-shop-opt-dot {
  grid-area: dot;
  width: 20px;
  height: 20px;
  border: 2px solid var(--mi-line-strong);
  border-radius: 50%;
  transition: border-color var(--mi-transition), box-shadow var(--mi-transition);
}
.mi-shop-opt-label { grid-area: label; color: var(--mi-title); font: 700 var(--mi-text-sm)/1.3 var(--font-primary); }
/* "Save NPR 8,500" — the saving in rupees as a green pill (30 Sep 2026; a percentage before). */
.mi-shop-opt-off {
  grid-area: off;
  justify-self: start;
  padding: 3px 10px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 1px solid rgb(4 120 87 / 0.18);
  border-radius: var(--mi-radius-pill);
  color: #047857;
  font: 700 var(--mi-text-xs)/1.3 var(--font-primary);
  white-space: nowrap;
}
.mi-shop-opt-price { grid-area: price; display: grid; justify-items: end; gap: 2px; text-align: right; }
.mi-shop-opt-price strong { color: var(--mi-title); font: 700 var(--mi-text-base)/1.2 var(--font-primary); white-space: nowrap; }
.mi-shop-opt-price s { color: var(--mi-faint); font-size: var(--mi-text-xs); }

/* ---- the order card with price tables (VoucherShop.DetailedPrices — PTE, 30 Sep 2026) ----
   Each option: its name, then Actual Price / Offer Price / the Save badge stacked in one tinted
   panel. Offer Price leads. Colours read the design preview's theme tokens where it sets them
   (--dv-*) and fall back to the brand's. */
.mi-shop-order--detailed .mi-shop-step-title { font-size: var(--mi-text-lg); letter-spacing: -0.01em; }
.mi-shop-order--detailed legend.mi-shop-step-title { width: 100%; flex-wrap: wrap; row-gap: 6px; }
.mi-shop-order--detailed .mi-shop-step-n {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #5b4bf0 0%, var(--mi-brand-deep) 100%);
  box-shadow: 0 6px 14px -4px rgb(67 86 232 / 0.55);
  color: #fff;
}
.mi-shop-step-note {
  margin-left: auto;
  padding: 4px 10px;
  background: rgb(var(--dv-a1-rgb, 67 86 232) / 0.07);
  border-radius: var(--mi-radius-pill);
  color: var(--mi-muted);
  font: 600 var(--mi-text-xs)/1.3 var(--font-primary);
  letter-spacing: 0;
}
.mi-shop-order--detailed .mi-shop-opts { gap: 8px; }

/* The option's label is the size container (not the card, so the card's own grid can respond);
   its width is the card's, padding included. */
.mi-shop-order--detailed .mi-shop-opt { container-type: inline-size; }
.mi-shop-opt-card--table {
  /* The figures run the card's full width, under the radio too; the Save badge is the last of them. */
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "dot label" "table table";
  gap: 9px 12px;
  padding: 13px 16px;
  border-radius: 16px;
  transition: border-color var(--mi-transition), background var(--mi-transition),
              box-shadow var(--mi-transition), transform 0.15s ease-out;
}
.mi-shop-opt-card--table .mi-shop-opt-label { font-size: var(--mi-text-base); letter-spacing: -0.005em; }
/* "Save NPR 8,500" — a solid green badge, the amount its focus (30 Sep 2026, business's request:
   it has to be noticed); since 1 Oct 2026 the last line of the stacked figures. Scoped to the order
   card so the design preview's paler badge (.dv main .mi-shop-opt-off) does not override it. */
.mi-shop-order--detailed .mi-shop-opt-card--table .mi-shop-opt-off,
.mi-pb-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  align-self: center;
  padding: 5px 12px 5px 9px;
  background: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%);
  border: 0;
  border-radius: var(--mi-radius-pill);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 6px 16px -6px rgb(5 150 105 / 0.65);
  color: #fff;
  font: 600 12px/1.2 var(--font-primary);
  white-space: nowrap;
}
.mi-shop-order--detailed .mi-shop-opt-off .mi-ico,
.mi-pb-save .mi-ico { flex-shrink: 0; opacity: 0.9; }
.mi-shop-opt-off-k { opacity: 0.92; }
.mi-shop-order--detailed .mi-shop-opt-off strong,
.mi-pb-save strong {
  font: 800 15px/1.1 var(--font-primary);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.mi-shop-order--detailed .mi-shop-opt-card--table .mi-shop-opt-off { grid-area: auto; justify-self: start; }
.mi-shop-opt:hover .mi-shop-opt-card--table {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -16px rgb(var(--dv-a1-rgb, 67 86 232) / 0.45);
}
/* Selected: a brand-gradient edge and a soft glow (the design preview draws its own). */
.mi-shop-order--detailed .mi-shop-opt input:checked + .mi-shop-opt-card--table {
  background:
    linear-gradient(135deg, #f5f6ff 0%, #f8f4ff 100%) padding-box,
    linear-gradient(135deg, #5b4bf0 0%, #3a4bd6 55%, #2f7bf0 100%) border-box;
  border-color: transparent;
  box-shadow: 0 16px 34px -18px rgb(67 86 232 / 0.55);
}
.mi-shop-order--detailed .mi-shop-opt input:checked + .mi-shop-opt-card--table .mi-shop-opt-dot {
  background: radial-gradient(circle, #fff 0 3.5px, transparent 4px), linear-gradient(135deg, #5b4bf0, var(--mi-brand-deep));
  border-color: transparent;
  box-shadow: 0 4px 10px -2px rgb(67 86 232 / 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .mi-shop-opt:hover .mi-shop-opt-card--table { transform: none; }
}

.mi-shop-opt-table {
  grid-area: table;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: rgb(var(--dv-a1-rgb, 67 86 232) / 0.045);
  border: 1px solid rgb(var(--dv-a1-rgb, 67 86 232) / 0.13);
  border-radius: 12px;
  overflow: hidden;
}
.mi-shop-opt input:checked + .mi-shop-opt-card--table .mi-shop-opt-table { background: rgb(255 255 255 / 0.85); }
/* One row under another at every width (1 Oct 2026, business's request — not three across), each
   label on the left with its figure beside it. The label column is a fixed width so the three
   figures line up. */
.mi-shop-opt-cell {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  column-gap: 12px;
  padding: 7px 12px;
}
.mi-shop-opt-cell + .mi-shop-opt-cell { border-top: 1px solid rgb(var(--dv-a1-rgb, 67 86 232) / 0.10); }
.mi-shop-opt-cell.is-save { padding-block: 8px; }
.mi-shop-opt-k { color: var(--mi-muted); font: 600 var(--mi-text-xs)/1.3 var(--font-primary); }
.mi-shop-opt-v {
  color: var(--mi-title);
  font: 700 var(--mi-text-sm)/1.25 var(--font-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* "USD 248.6 (NPR 38,500)" may wrap after the USD in a narrow card rather than overflow it. */
.mi-shop-opt-cell.is-actual .mi-shop-opt-v { white-space: normal; }
.mi-shop-opt-cell.is-actual .mi-nowrap,
.mi-pb-col .mi-nowrap { white-space: nowrap; }
/* Offer Price: its own tinted cell, the brand's colour, the largest figure — sized to the card
   (cqi), never the window, so it cannot outgrow its cell. */
.mi-shop-opt-cell.is-our {
  background: linear-gradient(135deg, rgb(var(--dv-a1-rgb, 67 86 232) / 0.10) 0%, rgb(var(--dv-a1-rgb, 67 86 232) / 0.03) 100%);
}
.mi-shop-opt-cell.is-our .mi-shop-opt-k { color: var(--dv-a1, var(--mi-brand)); }
.mi-shop-opt-cell.is-our .mi-shop-opt-v {
  color: var(--dv-ink, var(--mi-brand-deep));
  font: 800 clamp(1rem, 3.4cqi, 1.3rem)/1.15 var(--font-primary);
  letter-spacing: -0.01em;
}
/* A phone's card (under ~320px) has no room for the figure beside its label — "(NPR 38,500)
   Approx." ran out of the panel and was cut off — so the label sits above it instead. */
@container (max-width: 320px) {
  .mi-shop-opt-cell { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}

.mi-shop-opt:hover .mi-shop-opt-card { border-color: rgb(67 86 232 / 0.45); }
.mi-shop-opt input:checked + .mi-shop-opt-card {
  background: linear-gradient(135deg, #f3f4ff 0%, #f7f2ff 100%);
  border-color: var(--mi-brand);
  box-shadow: 0 8px 22px rgb(67 86 232 / 0.14);
}
.mi-shop-opt input:checked + .mi-shop-opt-card .mi-shop-opt-dot {
  border-color: var(--mi-brand);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--mi-brand);
}
.mi-shop-opt input:checked + .mi-shop-opt-card .mi-shop-opt-price strong { color: var(--mi-brand-deep); }
.mi-shop-opt input:focus-visible + .mi-shop-opt-card { outline: 2px solid var(--mi-link); outline-offset: 2px; }

/* The approximate USD beside an NPR price — quieter than the NPR it follows. */
.mi-shop-usd { color: var(--mi-muted); font: 600 var(--mi-text-xs)/1.3 var(--font-primary); white-space: nowrap; }
.mi-shop-opt input:checked + .mi-shop-opt-card .mi-shop-usd { color: var(--mi-brand); }

/* ---- price breakdown: its own section (_VoucherPriceBreakdown), one card per option ---- */

.mi-pb-grid {
  display: grid;
  gap: var(--mi-space-4, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  max-width: 1080px;
  margin-inline: auto;
}
.mi-pb-card {
  --pb-ink: #3346d3;
  position: relative;
  padding: 22px 22px 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-lg);
  box-shadow: var(--mi-shadow-sm);
}
.mi-pb-card:nth-child(4n + 2) { --pb-ink: #6d44d9; }
.mi-pb-card:nth-child(4n + 3) { --pb-ink: #0a7fa8; }
.mi-pb-card:nth-child(4n + 4) { --pb-ink: #15924a; }
.mi-pb-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--pb-ink);
}
.mi-pb-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--mi-title);
  font: 700 var(--mi-text-base)/1.3 var(--font-primary);
}
.mi-pb-title .mi-ico { color: var(--pb-ink); }

.mi-pb-table { width: 100%; border-collapse: collapse; font-size: var(--mi-text-sm); }
.mi-pb-table th,
.mi-pb-table td { padding: 9px 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mi-pb-table th[scope="row"],
.mi-pb-table thead th:first-child { text-align: left; color: var(--mi-muted); font-weight: 500; white-space: normal; }
.mi-pb-table thead th {
  padding-top: 0;
  color: var(--mi-faint);
  font: 700 11px/1.3 var(--font-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mi-pb-table td + td,
.mi-pb-table th + th { padding-left: 16px; }
.mi-pb-table tbody tr > * { border-top: 1px dashed var(--mi-line-strong); }
.mi-pb-table td { color: var(--mi-title); font-weight: 600; }
.mi-pb-table s { color: var(--mi-faint); font-weight: 500; }
.mi-pb-table .is-save td { color: var(--mi-success); }
.mi-pb-table .is-total > * {
  padding-block: 12px;
  border-top: 1.5px solid var(--mi-line-strong);
  color: var(--pb-ink);
  font-weight: 800;
  font-size: var(--mi-text-base);
}
.mi-pb-table .is-total th[scope="row"] { color: var(--mi-title); font-weight: 700; }
/* PTE's breakdown (VoucherShop.DetailedPrices, 1 Oct 2026): every option, a card each, across
   the section's full width — three across where the section has room, one under another where
   it does not. Never two across: the third card would sit alone with half its row empty. The
   section's own width decides (a named container), not the window's, so it holds in every
   design preview layout. Each card: Actual Price, Offer Price, Save (the order card's green
   badge — .mi-pb-save shares its rule above), each label with its figure beside it. */
#price:has(.mi-pb-grid--detailed) > .mi-container { container: pbsec / inline-size; }
#price .mi-pb-grid--detailed { max-width: none; grid-template-columns: minmax(0, 1fr); }
@container pbsec (min-width: 940px) {
  #price .mi-pb-grid--detailed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* One option (GRE, 1 Oct 2026): the card takes the row. In a third of it, the design
     preview's lone-card layout (title beside the figures) left the figures no width at all. */
  #price .mi-pb-grid--detailed:has(> .mi-pb-card:only-child) { grid-template-columns: minmax(0, 1fr); }
}
.mi-pb-card--detailed { container-type: inline-size; }
.mi-pb-card--detailed .mi-pb-title { margin-bottom: 16px; font-size: var(--mi-text-lg); }
.mi-pb-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  overflow: hidden;
  background: rgb(var(--dv-a1-rgb, 67 86 232) / 0.045);
  border: 1px solid rgb(var(--dv-a1-rgb, 67 86 232) / 0.13);
  border-radius: 14px;
}
/* The label column is a fixed width so the three figures line up, as in the order card. */
.mi-pb-col {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: 12px 16px;
}
.mi-pb-col + .mi-pb-col { border-top: 1px solid rgb(var(--dv-a1-rgb, 67 86 232) / 0.10); }
.mi-pb-col dt { color: var(--mi-muted); font: 600 var(--mi-text-sm)/1.3 var(--font-primary); }
.mi-pb-col dd {
  margin: 0;
  color: var(--mi-title);
  font: 700 var(--mi-text-base)/1.3 var(--font-primary);
  font-variant-numeric: tabular-nums;
}
.mi-pb-col.is-save dd { display: flex; }
/* Offer Price leads: its own tinted cell and the largest figure. */
.mi-pb-col.is-offer {
  background: linear-gradient(135deg, rgb(var(--dv-a1-rgb, 67 86 232) / 0.12) 0%, rgb(var(--dv-a1-rgb, 67 86 232) / 0.04) 100%);
}
.mi-pb-col.is-offer dt { color: var(--dv-a1, var(--mi-brand)); }
.mi-pb-col.is-offer dd {
  color: var(--dv-ink, var(--mi-brand-deep));
  font: 800 clamp(1.2rem, 4cqi, 1.5rem)/1.15 var(--font-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* A phone's card (under ~380px): the label above its figure, which otherwise ran out of the
   panel and was cut off, as in the order card. */
@container (max-width: 380px) {
  .mi-pb-col { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}
/* The smallest phones (320px): "(NPR 38,500) Approx." may break too, and so may a long Offer
   Price ("NPR 27,000.01"). */
@container (max-width: 260px) {
  .mi-pb-col .mi-nowrap,
  .mi-pb-col.is-offer dd { white-space: normal; }
  .mi-pb-col .mi-pb-save { padding-inline: 8px 10px; }
  .mi-pb-col .mi-pb-save strong { font-size: 13px; }
}

.mi-pb-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: var(--mi-space-5) auto 0;
  max-width: 760px;
  text-align: center;
}
.mi-pb-note .mi-ico { flex-shrink: 0; margin-top: 3px; color: var(--mi-success); }
.mi-shop-total-amounts { display: grid; justify-items: end; gap: 2px; }

/* Quantity, total, Buy now. */
.mi-shop-pay { padding-top: 18px; border-top: 1px dashed var(--mi-line-strong); }
.mi-shop-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mi-shop-each { color: var(--mi-muted); font-size: var(--mi-text-sm); }
.mi-shop-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--mi-surface-2);
  border-radius: 14px;
}
.mi-shop-total > span { display: grid; gap: 2px; color: var(--mi-title); font: 600 var(--mi-text-sm)/1.3 var(--font-primary); }
.mi-shop-total small { color: var(--mi-faint); font: 400 var(--mi-text-xs)/1.3 var(--font-body, inherit); }
.mi-shop-total strong {
  color: var(--mi-brand-deep);
  font: 800 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1 var(--font-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mi-shop-saving {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--mi-success);
  font: 600 var(--mi-text-xs)/1.3 var(--font-primary);
}
.mi-home .mi-shop-buy { gap: 10px; min-height: 52px; font-size: var(--mi-text-base); }

/* Trust lines and payment apps — the left column's last card. Highlighted (28 Sep 2026): the
   trust lines are green chips, the card sits on the home page's lavender wash with a brand
   stripe, and the payment apps are white chips with a brand edge. */
.mi-shop-secure {
  position: relative;
  display: grid;
  /* Centred, never stretched: where a layout makes this card taller than its content (the
     preview's Bento, beside a tall order card), a stretched grid stretched its rows, then the
     chip rows, then each chip — tall pills with their words stuck to the top (30 Sep 2026). */
  align-content: center;
  gap: 14px;
  min-width: 0;
  padding: 20px 22px 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef1ff 0%, #ffffff 55%, #f5efff 100%);
  border: 1px solid rgb(67 86 232 / 0.2);
  border-radius: var(--mi-radius-lg);
  box-shadow: 0 12px 28px rgb(47 63 181 / 0.10);
}
.mi-shop-secure::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mi-brand) 0%, var(--mi-violet) 55%, #56cffd 100%);
}
.mi-shop-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mi-shop-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 7px 12px;
  background: rgb(18 156 107 / 0.10);
  border: 1px solid rgb(18 156 107 / 0.28);
  border-radius: var(--mi-radius-pill);
  color: #0b6b48;
  font: 600 var(--mi-text-xs)/1.2 var(--font-primary);
}
.mi-shop-trust .mi-ico { flex-shrink: 0; color: var(--mi-success); }
.mi-shop-paywith {
  display: grid;
  align-content: start;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px dashed rgb(67 86 232 / 0.25);
  color: var(--mi-brand-deep);
  font: 700 11px/1.3 var(--font-primary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Each app a chip at its own height, words centred, kept on one line; the row wraps instead. */
.mi-shop-paywith .mi-pdp-paychips { align-items: center; align-content: flex-start; gap: 8px; padding: 0; list-style: none; }
.mi-shop-paywith .mi-pdp-paychips li {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  white-space: nowrap;
  line-height: 1.3;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid rgb(67 86 232 / 0.25);
  box-shadow: 0 2px 6px rgb(47 63 181 / 0.08);
  color: var(--mi-brand-deep);
  font-size: var(--mi-text-xs);
  letter-spacing: 0;
  text-transform: none;
}

/* ---- off sale: the page still renders, with a way to ask (Pte and Voucher views) ---- */

.mi-pdp-deal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  overflow: hidden;
  background: #fff;
  border: 1px solid rgb(67 86 232 / 0.16);
  border-radius: var(--mi-radius-xl);
  box-shadow: 0 24px 60px rgb(47 63 181 / 0.12);
}
.mi-pdp-deal-info { display: grid; align-content: start; gap: var(--mi-space-4, 20px); padding: clamp(20px, 3vw, 36px); }
.mi-pdp-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  height: 56px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: 12px;
}
.mi-pdp-brand img { width: auto; height: 100%; }

/* "Buy direct, or buy here?" uses the home page's comparison card (.mi-compare-card in
   home.css) — the same table, tick and cross. It only needs centring here. */
.mi-pdp-compare-card { max-width: 920px; margin-inline: auto; }
.mi-pdp-compare-cta { display: flex; justify-content: center; margin-top: var(--mi-space-5); }

.mi-pdp-panel-text {
  margin: 0;
  padding: 14px 16px;
  background: var(--mi-surface-2);
  border-radius: var(--mi-radius);
  color: var(--mi-body);
  font-size: var(--mi-text-sm);
}

.mi-pdp-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.mi-pdp-qty .mi-label { margin: 0; }
.mi-pdp-line { margin-left: auto; color: var(--mi-muted); font-size: var(--mi-text-sm); }
.mi-pdp-line strong {
  margin-left: 6px;
  color: var(--mi-title);
  font: 700 var(--mi-text-lg)/1 var(--font-primary);
  white-space: nowrap;
}
.mi-home .mi-pdp-hint { margin-top: -6px; color: var(--mi-faint); font-size: var(--mi-text-xs); }

.mi-pdp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mi-pdp-actions .mi-btn { flex: 1 1 200px; }

/* Without scripting the steppers cannot step; the number field is still typeable. */
html:not(.mi-js) .mi-pdp .mi-stepper-btn { display: none; }

.mi-pdp-secure {
  padding: 14px 16px;
  border: 1px dashed var(--mi-line-strong);
  border-radius: var(--mi-radius);
  color: var(--mi-muted);
  font-size: var(--mi-text-xs);
}
.mi-pdp-secure p { margin: 0 0 var(--mi-space-2); }
.mi-pdp-secure .mi-pdp-secure-title {
  display: flex;
  align-items: center;
  gap: var(--mi-space-2);
  margin-bottom: 4px;
  color: var(--mi-title);
  font: 600 var(--mi-text-sm)/1.3 var(--font-primary);
}
.mi-pdp-secure-title .mi-ico { color: var(--mi-success); }

.mi-pdp-paychips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.mi-pdp-paychips li {
  padding: 4px 10px;
  background: var(--mi-surface-2);
  border-radius: var(--mi-radius-pill);
  color: var(--mi-body);
  font-size: 11px;
  font-weight: 600;
}

.mi-pdp-highlights { padding-top: 14px; border-top: 1px solid var(--mi-line); }

/* ============================ in-page tabs ============================ */

/* Sticks under the sticky header (76px bar plus its 1px border). */
.mi-pdp-tabs {
  position: sticky;
  top: 77px;
  z-index: 40;
  background: rgb(255 255 255 / 0.92);
  border-block: 1px solid var(--mi-line);
  backdrop-filter: var(--mi-blur-sm);
  -webkit-backdrop-filter: var(--mi-blur-sm);
}
.mi-pdp-tabs ul {
  display: flex;
  gap: 6px;
  margin: 0;
  padding-block: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mi-pdp-tabs ul::-webkit-scrollbar { display: none; }
.mi-pdp-tabs a {
  display: inline-flex;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--mi-radius-pill);
  color: var(--mi-body);
  font: 600 var(--mi-text-sm)/1 var(--font-primary);
  white-space: nowrap;
  transition: background var(--mi-transition), color var(--mi-transition),
              border-color var(--mi-transition);
}
.mi-pdp-tabs a:hover,
.mi-pdp-tabs a:focus-visible {
  background: linear-gradient(135deg, #5468ee 0%, var(--mi-brand-deep) 100%);
  border-color: transparent;
  color: #fff;
}

/* Header plus tabs, so a jumped-to heading is not hidden under either. */
.mi-pdp-section { scroll-margin-top: 140px; }

/* ============================ explainer sections ============================ */

.mi-pdp-two {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: center;
}
@media (min-width: 900px) {
  .mi-pdp-two { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; }
}

.mi-pdp-notes { display: grid; gap: 10px; margin: var(--mi-space-5) 0 0; }
.mi-pdp-notes li { display: flex; align-items: flex-start; gap: 10px; color: var(--mi-body); }
.mi-pdp-notes .mi-ico { margin-top: 4px; color: var(--mi-success); }

.mi-pdp-muted { color: var(--mi-muted); font-size: var(--mi-text-sm); }

/* ---------- what arrives: the order summary artwork ----------
   The business's tablet mockup (6 Oct 2026), replacing the masked voucher-code card. The file is
   430px wide, so it is shown at that size at most rather than enlarged and softened. */

.mi-pdp-ordershot {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  padding-block: 18px;
}
/* Highlighted (6 Oct 2026, business's request): a blurred brand-colour glow behind the tablet,
   sized to the picture rather than the column, and a deeper shadow under it. drop-shadow rather
   than box-shadow because the PNG's corners are transparent — a box-shadow would draw the
   rectangle around them. */
.mi-pdp-ordershot::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 2%;
  bottom: -2%;
  left: 50%;
  width: calc(min(430px, 100%) + 56px);
  max-width: 100%;
  transform: translateX(-50%);
  border-radius: 48px;
  background:
    radial-gradient(60% 70% at 25% 35%, rgb(86 207 253 / 0.7) 0%, transparent 72%),
    radial-gradient(60% 70% at 78% 65%, rgb(157 123 255 / 0.75) 0%, transparent 72%),
    rgb(67 86 232 / 0.3);
  filter: blur(30px);
}
.mi-pdp-ordershot img {
  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
  filter:
    drop-shadow(0 30px 44px rgb(47 63 181 / 0.32))
    drop-shadow(0 8px 14px rgb(19 26 58 / 0.18));
}

/* ---------- how buying works: a timeline ---------- */

.mi-pdp-timeline {
  position: relative;
  display: grid;
  gap: 18px;
  max-width: 820px;
  margin: 0 auto;
  counter-reset: pdpstep;
}
.mi-pdp-timeline::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--mi-brand), var(--mi-violet), rgb(86 207 253 / 0.4));
}
/* Each step takes one of the home page's "How to pay" colours — blue, violet, cyan, green —
   so the page reads as the same storefront. */
.mi-pdp-timeline li {
  --step-tint: #eef0ff;
  --step-ink: #3346d3;
  --step-edge: rgb(51 70 211 / 0.2);
}
.mi-pdp-timeline li:nth-child(4n + 2) { --step-tint: #f3edff; --step-ink: #6d44d9; --step-edge: rgb(109 68 217 / 0.2); }
.mi-pdp-timeline li:nth-child(4n + 3) { --step-tint: #e6f7fd; --step-ink: #0a7fa8; --step-edge: rgb(10 127 168 / 0.2); }
.mi-pdp-timeline li:nth-child(4n + 4) { --step-tint: #e7f8ee; --step-ink: #15924a; --step-edge: rgb(21 146 74 / 0.22); }

.mi-pdp-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.mi-pdp-step-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--step-tint);
  border: 2px solid var(--step-edge);
  border-radius: 16px;
  box-shadow: 0 0 0 6px var(--mi-page);
  color: var(--step-ink);
}
.mi-pdp-timeline li > div {
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-left: 3px solid var(--step-ink);
  border-radius: var(--mi-radius-lg);
  box-shadow: var(--mi-shadow-sm);
  transition: box-shadow var(--mi-transition);
}
/* Hovered, a step lifts on a shadow in its own colour (1 Oct 2026, business's request). */
.mi-pdp-timeline li:hover > div {
  box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--step-ink) 45%, transparent), var(--mi-shadow-sm);
}
.mi-pdp-timeline h3 { margin: 0 0 4px; font-size: var(--mi-text-base); }
.mi-pdp-timeline h3::before {
  counter-increment: pdpstep;
  content: "Step " counter(pdpstep);
  display: block;
  margin-bottom: 4px;
  color: var(--step-ink);
  font-size: var(--mi-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mi-pdp-timeline p { margin: 0; color: var(--mi-muted); font-size: var(--mi-text-sm); }

/* ---------- why buy the PTE Exam Voucher here (PTE page) ---------- */

.mi-pdp-why {
  display: grid;
  gap: var(--mi-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
@media (min-width: 640px) {
  .mi-pdp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mi-pdp-why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mi-pdp-why-card {
  --why-tint: #eef0ff;
  --why-ink: #3346d3;
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-lg);
  box-shadow: var(--mi-shadow-sm);
  transition: transform var(--mi-transition), box-shadow var(--mi-transition), border-color var(--mi-transition);
}
.mi-pdp-why-card:nth-child(4n + 2) { --why-tint: #f3edff; --why-ink: #6d44d9; }
.mi-pdp-why-card:nth-child(4n + 3) { --why-tint: #e6f7fd; --why-ink: #0a7fa8; }
.mi-pdp-why-card:nth-child(4n + 4) { --why-tint: #e7f8ee; --why-ink: #15924a; }
.mi-pdp-why-card::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--why-tint) 0%, transparent 70%);
  pointer-events: none;
}
/* Hover fills the card with the logo's blue (28 Sep 2026, business's request) and turns the
   icon box white: every card, whatever its resting tint, ends up the same. */
.mi-pdp-why-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(145deg, var(--mi-brand) 0%, var(--mi-brand-deep) 100%);
  border-color: var(--mi-brand-deep);
  box-shadow: 0 18px 38px rgb(47 63 181 / 0.3);
}
.mi-pdp-why-card:hover::after { background: radial-gradient(circle, rgb(255 255 255 / 0.18) 0%, transparent 70%); }
.mi-pdp-why-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  background: var(--why-tint);
  border-radius: 14px;
  color: var(--why-ink);
  transition: background var(--mi-transition), color var(--mi-transition);
}
.mi-pdp-why-card:hover .mi-pdp-why-icon { background: #fff; color: var(--mi-brand-deep); }
.mi-pdp-why-card h3 { margin: 0; font-size: var(--mi-text-base); transition: color var(--mi-transition); }
.mi-pdp-why-card p { margin: 0; color: var(--mi-muted); font-size: var(--mi-text-sm); transition: color var(--mi-transition); }
.mi-pdp-why-card:hover h3 { color: #fff; }
.mi-pdp-why-card:hover p { color: rgb(255 255 255 / 0.86); }

/* ============================ the phone buy bar ============================ */

.mi-buybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 44;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--mi-space-3);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgb(255 255 255 / 0.96);
  border-top: 1px solid var(--mi-line);
  box-shadow: 0 -10px 30px rgb(19 26 58 / 0.12);
  backdrop-filter: var(--mi-blur-sm);
  -webkit-backdrop-filter: var(--mi-blur-sm);
  transform: translateY(110%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 1023px) {
  .mi-buybar { display: flex; }
  /* Clear of the bar while it is up. */
  body:has(.mi-buybar.is-visible) .mi-wa-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body:has(.mi-buybar.is-visible) .mi-toast { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}
.mi-buybar.is-visible { transform: none; }

.mi-buybar-price { display: grid; gap: 2px; min-width: 0; }
.mi-buybar-price span {
  color: var(--mi-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mi-buybar-price strong { color: var(--mi-title); font: 700 var(--mi-text-lg)/1.1 var(--font-primary); }
.mi-home .mi-buybar .mi-btn { flex: 0 0 auto; width: auto; }

/* ============================ phones ============================ */

@media (max-width: 640px) {
  .mi-pdp-stage { min-height: 260px; }
  .mi-pdp-stage .mi-voucher-code { font-size: 150px; bottom: -22px; }
  .mi-pdp-logo { height: 110px; }
  .mi-pdp-timeline li { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .mi-pdp-timeline::before { left: 21px; }
  .mi-pdp-step-icon { width: 44px; height: 44px; }
}

/* ============================ motion & print ============================ */

@media (prefers-reduced-motion: reduce) {
  .mi-buybar { transition: none; }
}

@media print {
  .mi-buybar, .mi-pdp-tabs, .mi-pdp-actions, .mi-pdp-modes, .mi-pdp-picker { display: none !important; }
}

/* ---------- other ways to buy (the exams sold three ways) ---------- */

/* Assisted booking and the training bundle, on a page whose buy box sells the voucher. They are
   listed with their prices and a way to ask, never a checkout: there is no product behind either
   yet, and a Buy button that cannot complete is worse than saying so. */
.mi-pdp-ways {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px dashed var(--mi-line-strong);
  border-radius: var(--mi-radius);
}
.mi-pdp-ways-title {
  margin: 0;
  color: var(--mi-title);
  font: 600 var(--mi-text-sm)/1.3 var(--font-primary);
}
.mi-pdp-ways-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mi-pdp-ways-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mi-space-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mi-line);
}
.mi-pdp-ways-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.mi-pdp-ways-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 190px; }
.mi-pdp-ways-main strong { color: var(--mi-title); font: 600 var(--mi-text-sm)/1.3 var(--font-primary); }
.mi-pdp-ways-main span { color: var(--mi-muted); font-size: var(--mi-text-xs); line-height: 1.45; }
.mi-pdp-ways-price {
  flex: 0 0 auto;
  color: var(--mi-accent-ink);
  font: 700 var(--mi-text-sm)/1.2 var(--font-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Its own line under the option it belongs to — flex-basis 100% breaks the row rather than
   squeezing the price. */
.mi-pdp-ways-ask {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 100%;
  color: var(--mi-link);
  font: 600 var(--mi-text-xs)/1.2 var(--font-primary);
  text-decoration: none;
}
.mi-pdp-ways-ask:hover,
.mi-pdp-ways-ask:focus-visible { text-decoration: underline; }
.mi-pdp-ways-ask svg { flex: 0 0 auto; }

.mi-pdp-ways .mi-btn { justify-self: start; }

/* ============================ contact page ============================
   The voucher pages' shell (.mi-pdp, .mi-pdp-head) with one white card: details on a tinted
   rail, the form beside it. Reuses .mi-pdp-deal for the card itself.
   At two columns the form is on the LEFT and the details rail on the right (12 Oct 2026,
   business's request) — by `order`, so a phone still stacks the details above the form. */
.mi-contact-card { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .mi-contact-card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .mi-contact-form { order: -1; }
}
.mi-contact-info,
.mi-contact-form { display: grid; align-content: start; gap: var(--mi-space-4, 20px); padding: clamp(20px, 3vw, 36px); }
.mi-contact-info {
  background: linear-gradient(180deg, rgb(67 86 232 / 0.06), rgb(67 86 232 / 0.02));
  border-bottom: 1px solid var(--mi-line);
}
@media (min-width: 900px) {
  .mi-contact-info { border-bottom: 0; border-left: 1px solid var(--mi-line); }
}
.mi-contact-h { margin: 0; color: var(--mi-title); font: 700 var(--mi-text-xl, 1.35rem)/1.2 var(--font-primary); }
.mi-contact-rows { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mi-contact-rows li,
.mi-contact-office { display: flex; align-items: flex-start; gap: 14px; }
.mi-contact-ico {
  display: inline-grid;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  place-items: center;
  background: #fff;
  border: 1px solid rgb(67 86 232 / 0.18);
  border-radius: 12px;
  color: var(--mi-brand-deep);
  box-shadow: 0 6px 16px rgb(47 63 181 / 0.1);
}
.mi-contact-rows small { display: block; color: var(--mi-muted); font-size: var(--mi-text-sm); }
.mi-contact-rows a { color: var(--mi-title); font-weight: 600; overflow-wrap: anywhere; }
.mi-contact-office h3 { margin: 0 0 2px; color: var(--mi-title); font: 700 1rem/1.3 var(--font-primary); }
.mi-contact-office address { color: #000; font-style: normal; line-height: 1.7; }
.mi-contact-info .mi-btn--wa { justify-self: start; }

/* The two columns end together (6 Oct 2026, business's request): the form was ~230px taller
   than the details rail, which stretched to match and left an empty tinted block under the
   WhatsApp button. The form is tightened — field spacing, input padding, a shorter message box,
   the reply note beside the button rather than above it — and at two columns the WhatsApp button
   sits on the rail's floor, level with Submit, so what difference remains is above it. A flex
   column rather than grid rows because the number of office blocks is admin-edited. */
.mi-contact-form .mi-form { gap: 14px; }
.mi-contact-form .mi-field { gap: 6px; }
.mi-contact-form .mi-input { padding-block: 10px; }
.mi-contact-form .mi-textarea { min-height: 104px; padding-block: 10px; }
.mi-contact-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 4px; }
.mi-contact-submit .mi-form-note { flex: 1 1 220px; margin: 0; }
@media (min-width: 900px) {
  .mi-contact-info { display: flex; flex-direction: column; }
  .mi-contact-info .mi-btn--wa { align-self: flex-start; margin-top: auto; }
}