/* ============================================================
   XC EXCHANGE — CHECKOUT SURFACE  (Views/BuyCurrency/Index.cshtml)

   The category standard, played straight. See the direction
   contract at the top of _LayoutCheckout.cshtml.

   ADDITIVE. This file defines no token. It loads third, after
   XC_Home_v4.css (tokens, .btn, masthead, footer) and
   XC_Auth_v1.css (the field system: .afield, .arow, .ahint,
   .acheck, .btn-wide, .btn.is-busy, and the styled
   jquery.validate class contract). Neither is forked — a
   nine-step order form needs exactly those fields, and a second
   copy of them would guarantee the two drift.

   Reading order:
     1  SURFACE SHELL          the grid, the page ground
     2  THE STEP RAIL          nine numbered steps
     3  SECTIONS               the panel, its heading, its lede
     4  ACTION BARS            back / primary, one per step
     5  THE CURRENCY CART      ruled lines, add form, rates
     6  CHOICE ROWS            one state mechanism for every pick
     7  NOTICES                info / success / warning / danger
     8  VERIFICATION           OTP rows, locked fields, the SDK
     9  DELIVERY               post offices, datepickers, branches
    10  VELL                   the offer and the member panels
    11  SUMMARY & PAYMENT      the order, the bank details, terms
    12  ISSUED                 the placed order
    13  THE ORDER SUMMARY RAIL sticky, never off screen
    14  THE FAQ                below the flow, on the page ground
    15  THE BRIDGE            Bootstrap names paymentorder_v17.js injects
    16  THIRD PARTY            select2, toastr, jQuery UI datepicker
    17  BROWSER SURFACES       selection, caret, scrollbar, autofill
    18  RESPONSIVE
    19  REDUCED MOTION

   THE BRIDGE (15) is the load-bearing section. This surface loads
   no Bootstrap, but Scripts/paymentorder_v17.js injects Bootstrap
   class names at runtime — .spinner-border, .text-danger, .badge,
   .custom-control, .po-card, .mr-2 and friends. Style them; never
   rename them. Nothing new should be written against the bridge.
   ============================================================ */


/* ============================================================
   1  SURFACE SHELL
   ============================================================ */
body.checkoutsurface {
  /* --muted (#71769F) is 4.06:1 on white and ~3.7:1 on --surface-2, under
     the 4.5:1 floor at every size this surface sets text. It is a shared
     token, so it is not redefined here — this surface simply stops using
     it for type and uses this one instead: 6.4:1 on white, 5.4:1 on
     --surface-2, and still audibly quieter than --body. */
  --ck-quiet: #565C8A;

  background: var(--ground);
  color: var(--body);
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

main.checkout {
  width: var(--grid);
  margin-inline: auto;
  padding-block: 1.75rem 3.5rem;
}

/* The flow and its running order. The summary is a sibling of the
   steps rather than a panel inside them, so it can stick while a
   long step (identity, delivery) scrolls past it. */
/* The rail is 384px rather than 336px: at the narrower measure the
   assurance labels sat close to wrapping and the licence line broke
   across three rows. The flow keeps a comfortable measure either way —
   its own fields cap out well inside the remaining track. */
.ck-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  align-items: start;
  gap: 2rem;
}

.ck-body { min-width: 0; }

/* The payment outcome pages have no summary rail, so they are not in
   .ck-grid and would otherwise run the full 1240px. A receipt read at
   that measure is a receipt nobody reads. The selector is a direct
   child of main, so the order flow's own panels — which sit inside
   .ck-body — are untouched. */
main.checkout > .ck-pagehead,
main.checkout > .ck-steps,
main.checkout > .Steps {
  max-width: 46rem;
  margin-inline: auto;
}

/* the scroll anchor paymentorder_v17.js measures with .offset().top
   on every step change. It must stay in the document flow. */
#FocusHere { scroll-margin-top: 5.5rem; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   2  THE STEP RAIL

   Nine steps, numbered, because the visitor genuinely needs to
   know which of nine questions they are on — and because the
   flow contains an AML-mandated identity check, so showing what
   is already banked is the only honest way to make it survivable.

   The indicator is the site's own: one 2px brand rule, the same
   mechanism .mainnav uses in the masthead. Four states —
   unreached (muted, not interactive), reachable, completed
   (ticked, clickable), current (ink + rule).

   The JS contract, all of it preserved: #WrTabs, #TabStep1..9,
   data-tabnum, .TabSteps, .active, .completed, .tk_step_verified.
   FN_ChangeStep reads .closest('.TabSteps'), so the button may
   be the item or sit inside it.
   ============================================================ */
/* the payment outcome pages carry a heading above the rail. The order
   flow does not: its h1 is the surface's own and reads to assistive
   tech only, because the step rail already says where you are. */
.ck-pagehead {
  text-align: center;
  padding: .5rem 0 1.75rem;
}
.ck-pagehead h2 {
  font-family: var(--f-display);
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 .4rem;
  text-wrap: balance;
}
.ck-pagehead p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
  margin: 0;
}

.ck-steps {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .25rem .5rem;
  margin-bottom: 1.25rem;
}

#WrTabs {
  position: relative;
  display: grid;
  /* count-agnostic: the order flow has nine steps, the payment
     outcome pages have four */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
}

/* the continuous track the progress rule runs along */
#WrTabs::before {
  content: "";
  position: absolute;
  left: .5rem; right: .5rem;
  bottom: 0;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
}

.TabSteps {
  position: relative;
  min-width: 0;
}

.tk_step_btn {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .3rem;
  width: 100%;
  padding: .7rem .3rem .85rem;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: default;
  color: var(--ck-quiet);
  text-align: center;
  transition: color .16s ease;
}

/* the numeral. A drawn mark, so it may be round. */
.tk_step_icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.tk_step_icon svg { width: 13px; height: 13px; display: block; }

.tk_step_label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.25;
  color: inherit;
}

/* the one indicator: a 2px brand rule, scaled out at rest */
.TabSteps::after {
  content: "";
  position: absolute;
  left: .35rem; right: .35rem;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.3, .7, .2, 1);
}

/* --- done: ONE completion mark ---
   A blue-filled tick, shared by .completed (a step already passed) and
   .tk_step_verified (email, mobile or identity confirmed). Two different
   marks both meaning "done" — a blue numeral and an amber tick — left the
   rail with no readable rule, and the 2px blue rule scaled in under every
   completed rung so it marked nothing. Amber is spent once again, and the
   rule belongs to the current step alone (below). --- */
.TabSteps.completed .tk_step_btn,
.TabSteps.active .tk_step_btn { cursor: pointer; }

.TabSteps.completed .tk_step_btn { color: var(--body); }
.TabSteps.completed .tk_step_icon,
.TabSteps.tk_step_verified .tk_step_icon {
  background: var(--brand);
  border-color: var(--brand);
  color: #FFF;
}
.TabSteps.completed .tk_step_icon .tk_step_num,
.TabSteps.tk_step_verified .tk_step_icon .tk_step_num { display: none; }
.TabSteps.completed .tk_step_icon .tk_step_tick,
.TabSteps.tk_step_verified .tk_step_icon .tk_step_tick { display: block; }

.TabSteps.completed .tk_step_btn:hover { color: var(--ink); }

/* --- current: the ONLY rung that carries the 2px rule ---
   FIRST VIEWPORT promises the rule as the current-step marker. Scaling it
   in for .completed too put it under every prior rung, where it marked
   nothing. The current step also shows its numeral again, even when it is
   already verified, because "which of nine am I on" is the question the
   rail exists to answer. Declared after .completed so it wins. */
.TabSteps.active .tk_step_btn { color: var(--ink); }
.TabSteps.active .tk_step_label { color: var(--ink); }
.TabSteps.active .tk_step_icon {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 0, 255, .10);
}
.TabSteps.active .tk_step_icon .tk_step_num { display: grid; }
.TabSteps.active .tk_step_icon .tk_step_tick { display: none; }
.TabSteps.active::after { transform: scaleX(1); }

/* The sizing rule .tk_step_icon svg is (0,1,1) and beat a bare
   .tk_step_tick (0,1,0), so the tick rendered on every rung. Both
   sides are scoped through .tk_step_icon now. */
.tk_step_icon .tk_step_tick { display: none; }
.TabSteps.tk_step_verified .tk_step_icon .tk_step_num { display: none; }
.TabSteps.tk_step_verified .tk_step_icon .tk_step_tick { display: block; }

.tk_step_btn:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
  border-radius: var(--r);
}

/* a payment that did not land. The rung keeps its label; the
   colour is a second signal, never the only one — the page's own
   heading and message say what happened. */
.TabSteps.is-bad .tk_step_icon {
  border-color: var(--down);
  color: var(--down);
  box-shadow: 0 0 0 3px var(--down-wash);
}
.TabSteps.is-bad::after { background: var(--down); }



/* ============================================================
   3  SECTIONS

   A step is one or more panels on the page ground. Separation is
   a hairline and a change of ground; a panel never contains
   another panel.
   ============================================================ */
.Steps { display: block; }

.ck-sec {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem 1.65rem;
  margin-bottom: 1.25rem;
}

.ck-sec-h {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.15rem;
}

.ck-sec-h h2 {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.011em;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

/* an edit link back to an earlier step, right-aligned on the rule */
.ck-edit {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.ck-edit svg { width: 13px; height: 13px; }
.ck-edit:hover { text-decoration: underline; text-underline-offset: 2px; }

.ck-lede {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--body);
  max-width: 85ch;
  margin: 0 0 1.25rem;
}
.ck-lede:last-child { margin-bottom: 0; }
.ck-lede a { color: var(--brand); text-underline-offset: 2px; }

/* a heading inside a section: more space above than below */
.ck-grouph {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 1.85rem 0 .8rem;
}
.ck-grouph:first-child { margin-top: 0; }

.ck-rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 1.6rem 0 1.25rem;
}

.ck-note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ck-quiet);
  margin: .7rem 0 0;
}
.ck-note a { color: var(--brand); }

.ck-req {
  list-style: none;
  padding: 0;
  margin: .9rem 0 0;
  display: grid;
  gap: .3rem;
}
.ck-req li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 12.5px;
  color: var(--ck-quiet);
}
.ck-req li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line-strong);
}


/* ============================================================
   4  ACTION BARS

   One primary action per step, on the right, where the reading
   order ends. Back is quiet and on the left. The bar sits on the
   page ground, not inside the last panel — it belongs to the
   step, not to a section of it.
   ============================================================ */
.ck-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding-top: .25rem;
}
.ck-actions .ck-next,
.ck-actions .ck-right { margin-left: auto; }

.ck-actions-r {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-left: auto;
}

/* the spinner slot beside a primary action */
.ck-spin {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 12.5px;
  color: var(--body);
}
.ck-spin::before {
  content: "";
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--brand);
  animation: ck-spin .7s linear infinite;
}
@keyframes ck-spin { to { transform: rotate(360deg); } }


/* ============================================================
   5  THE CURRENCY CART

   Ruled lines, not cards. The figures are the content, so they
   are tabular and they align on their decimals down the column.

   .currencyRow, .oneCurrencyItem, .currencyRateRow, .SourceAmount,
   .DestAmount and .ddlDestCurrency are all read by
   paymentorder_v17.js and by the inline script in
   AddItemToCart.cshtml. Names preserved.
   ============================================================ */
.ck-cart { margin: 0; }

.ck-cart-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 0 0 .5rem;
  border-bottom: 1px solid var(--line-strong);
}
.ck-cart-head span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ck-quiet);
}
.ck-cart-head span:last-child { text-align: right; }

/* With nothing in the cart the header ruled over empty space and sat a
   hairline away from the total row, reading as a broken table. It is
   suppressed until FN_LoadCart has put a line in. */
.ck-sec:has(#cartItemsWrapper:empty) .ck-cart-head { display: none; }
.ck-sec:has(#cartItemsWrapper:empty) .ck-carttotal { border-top: 0; padding-top: 0; }

.currencyRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
  padding: 1.1rem 0 .5rem;
  border-bottom: 1px solid var(--line);
}

.ck-smallest-denom {
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--line);
}
.ck-smallest-denom-lab {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0 0 .35rem;
}
.ck-smallest-denom-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.ck-smallest-denom-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 14px;
  color: var(--body);
}
.ck-smallest-denom-list .code {
  font-weight: 600;
  color: var(--ink);
}
.ck-smallest-denom-list .val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}

.ck-amt {
  display: grid;
  gap: .4rem;
  min-width: 0;
}
/* an empty validation span must not occupy a line: it is what pushed the
   Buy button off the input line */
.ck-amt .field-validation-valid:empty,
.ck-amt .text-danger:empty { display: none; }
.ck-amt > label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ck-quiet);
}
.ck-amt-in {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.ck-amt-in input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: .8rem .9rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r) 0 0 var(--r);
  box-shadow: inset 0 1px 2px rgba(0, 10, 77, .045);
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  caret-color: var(--brand);
  transition: border-color .16s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ck-amt-in input:hover:not(:focus) { border-color: var(--body); }
.ck-amt-in input:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 0, 255, .12);
  position: relative;
  z-index: 1;
}
.ck-amt-in input::placeholder { color: var(--body); font-weight: 500; }

/* the currency unit, welded to the field rather than floating beside it */
.ck-unit {
  display: inline-flex;
  align-items: center;
  padding: 0 .7rem;
  border: 1px solid var(--line-strong);
  border-left: 0;
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--surface-2);
  color: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* THE CURRENCY PICKER.

   Welded to the right of the amount field with a tinted fill and a hairline
   caret, this read as a unit suffix — the same drawing as the static "AUD"
   beside the other field — not as something you could open. It is now a
   control in its own right: detached by a gap, its own full border and
   radius, a white field, and a caret with a rule beside it so the hit area
   is legible. .ck-amt-sel marks the cell that holds one. */
.ck-amt-sel { gap: .5rem; }
.ck-amt-sel > input { border-radius: var(--r) !important; }

.ck-amt-in select.ddlDestCurrency {
  flex: 0 0 auto;
  min-height: 48px;
  min-width: 6.4rem;
  padding: .5rem 2.3rem .5rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background-color: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(0, 10, 77, .045);
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
  /* a divider rule plus a heavier caret: two marks that say "opens" */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230000FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8'/%3E%3C/svg%3E"),
    linear-gradient(var(--line-strong), var(--line-strong));
  background-repeat: no-repeat, no-repeat;
  background-position: right .8rem center, right 2.05rem center;
  background-size: 12px, 1px 60%;
}
.ck-amt-in select.ddlDestCurrency:hover { border-color: var(--muted); }
.ck-amt-in select.ddlDestCurrency:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 0, 255, .12);
}

/* the action sits ON the input line, matching the 48px field height so
   the row reads as one control line rather than a button hung below it */
.ck-rowacts {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  padding-bottom: 0;
}
.ck-rowacts > .btn { min-height: 48px; white-space: nowrap; }

/* REMOVE, on hover.

   .btn-quiet is a text button with no fill of its own; at rest it only
   darkens from --body to --ink, which is the right weight for
   something sitting beside a currency the visitor has just chosen and
   probably wants to keep. On hover it takes a fill, because the one
   thing this button does is throw a line away and the word on its own
   was the only warning of that.

   --down is this surface's own red -- it already carries the warning
   callouts, the failed step and a falling rate -- so no new colour
   enters the page. White on it measures 5.3:1, clear of the 4.5:1
   floor. The fade is the base .btn transition, which already covers
   background-color, border-color and color.

   Scoped to .checkoutsurface rather than added to .btn-quiet in
   XC_Home_v4.css: that file is the button system for every redesigned
   page, and a destructive red belongs to this one button rather than
   to the class. The cart row is re-rendered by AJAX on every add and
   remove, so this has to be a stylesheet rule -- anything bound in
   script would be lost with the markup it was bound to. */
.checkoutsurface .ck-rowacts > .btn-quiet:hover {
  background: var(--down);
  border-color: var(--down);
  color: #FFFFFF;
}

/* the rate the line was priced at, stated under it */
.currencyRateRow,
.ck-rate {
  padding: .1rem 0 .85rem;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--body);
  font-variant-numeric: tabular-nums;
}
.currencyRateRow .ck-rate-fig,
.ck-rate .ck-rate-fig { color: var(--body); font-weight: 600; }

.ck-untradable {
  display: inline-flex;
  align-items: center;
  padding: .3rem .55rem;
  border-radius: var(--r);
  background: var(--down-wash);
  color: var(--down);
  font-size: 11.5px;
  font-weight: 600;
}


/* the add-currency disclosure. Served visible; xc-checkout_v1.js
   collapses it, so with JS blocked it is a plain, usable form. */
.ck-add {
  margin-top: 1.35rem;
  padding: 1.25rem 1.65rem;
  /* the band runs to all three panel edges: stopping short of the bottom
     left a strip of white under it that read as a misaligned box */
  margin: 1.35rem -1.65rem -1.5rem;
  background: var(--surface-2);
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--line);
}
.ck-add[hidden] { display: none; }
.ck-add .currencyRow { border-bottom: 0; padding-top: 0; }
/* On the tinted add band the fields lift back to white. The currency
   picker is NOT listed here: it carries a caret and a divider rule as
   background-images, and the `background` shorthand these rules use would
   wipe both — which is exactly what it did, leaving a select with no
   visible affordance at all. It keeps its own white field. */
.ck-add .ck-amt-in input { background: var(--surface); }
.ck-add .ck-unit { background: var(--surface-3); }

.ck-eq {
  align-self: end;
  padding-bottom: .78rem;
  color: var(--body);
  font-size: 14px;
}

/* the running order total under the cart */
.ck-carttotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
  margin-top: .3rem;
  border-top: 1px solid var(--line-strong);
}
.ck-carttotal dt {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--body);
  margin: 0;
}
.ck-carttotal dd {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--ink);
}


/* ============================================================
   6  CHOICE ROWS

   One state mechanism for every pick on the surface — banknote
   preference, delivery method, payment method, post office.
   Three renderings and no exceptions: rest, chosen, unavailable.
   The legacy page drew four different radio treatments.
   ============================================================ */
.ck-choices { display: grid; gap: .7rem; }

.ck-choice { position: relative; }

.ck-choice > input[type="radio"],
.ck-choice > input[type="checkbox"] {
  position: absolute;
  top: 1.25rem; left: 1.1rem;
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

.ck-choice > label {
  display: block;
  padding: 1.05rem 1.15rem 1.05rem 2.9rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .18s ease;
}
.ck-choice > label:hover { border-color: var(--body); background: var(--surface-2); }

.ck-choice > input:checked + label {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--brand), 0 1px 2px rgba(0, 10, 77, .05);
}
.ck-choice > input:focus-visible + label {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
}
.ck-choice > input:disabled + label {
  cursor: not-allowed;
  background: var(--surface-2);
  border-color: var(--line);
  opacity: .62;
}

.ck-choice-h {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.ck-choice-p {
  display: block;
  margin-top: .22rem;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ck-quiet);
}
.ck-choice-fig {
  float: right;
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--body);
}


/* ============================================================
   7  NOTICES

   Four kinds, one shape. Colour never carries the message alone:
   each notice states its own condition in words, and the mark is
   drawn, not a glyph from an icon font.
   ============================================================ */
.ck-notice {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .85rem 1rem;
  border: 0;
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 1.15rem;
}
.ck-notice:last-child { margin-bottom: 0; }
.ck-notice strong { color: var(--ink); font-weight: 600; }
.ck-notice a { color: var(--brand); }
.ck-notice .ic { flex: 0 0 auto; margin-top: .1rem; }
.ck-notice .ic svg { display: block; width: 16px; height: 16px; }

.ck-notice-ok {
  background: var(--up-wash);
  border-color: color-mix(in srgb, var(--up) 34%, transparent);
  color: color-mix(in srgb, var(--up) 82%, var(--ink));
}
.ck-notice-ok strong,
.ck-notice-ok .ic { color: var(--up); }

.ck-notice-warn {
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent-fill) 52%, transparent);
  color: var(--accent);
}
.ck-notice-warn strong,
.ck-notice-warn .ic { color: var(--accent); }

.ck-notice-bad {
  background: var(--down-wash);
  border-color: color-mix(in srgb, var(--down) 32%, transparent);
  color: color-mix(in srgb, var(--down) 86%, var(--ink));
}
.ck-notice-bad strong,
.ck-notice-bad .ic { color: var(--down); }

/* a dev-mode hint. Loud on purpose: it must be impossible to
   mistake for production copy. */
.ck-dev {
  border-style: dashed;
  border-width: 1px;
  font-family: var(--f-mono);
  font-size: 12.5px;
}

/* an inline error under a control, written by the order logic */
.ck-err {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--down);
  margin-top: .55rem;
}
.ck-err:empty { display: none; }


/* ============================================================
   8  VERIFICATION — email, mobile, identity

   Send-code and verify sit on one row with their field, because
   they act on it. The field keeps the 48px floor from
   XC_Auth_v1.css; the button matches it.
   ============================================================ */
.ck-verify {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .75rem;
  max-width: 34rem;
}
.ck-verify .btn { min-height: 48px; white-space: nowrap; }

.ck-otp { margin-top: 1.35rem; }
.ck-otp[hidden] { display: none; }

/* the code itself is read character by character */
.ck-verify input.ck-code {
  font-family: var(--f-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .32em;
  font-variant-numeric: tabular-nums;
}

.ck-resend {
  font-size: 12.5px;
  color: var(--ck-quiet);
  margin: .85rem 0 0;
}
.ck-resend a { color: var(--brand); font-weight: 600; }
.ck-resend a.disabled { color: var(--body); pointer-events: none; text-decoration: none; }

/* a value already on file and not editable in checkout */
.ck-locked {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* the returning-customer panel on the email step. A change of
   ground, not a card inside a card. */
.ck-known {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line-strong);
}
.ck-known[hidden] { display: none; }
.ck-known h3 {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .4rem;
}
.ck-sub {
  margin-top: 1.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

/* --- the identity SDK ---
   The Onfido mount is a third-party iframe. It gets a plain,
   quiet frame and nothing else: no border weight competing with
   its own chrome, and a fixed floor so the panel does not jump
   as the SDK loads. Ids inside SignupIdentity/Step4_Entrust are
   targeted by the SDK driver — never rename them. */
.ck-sdk { margin-top: 1.35rem; }
.ck-sdkwait {
  display: grid;
  place-items: center;
  gap: .8rem;
  min-height: 320px;
  max-width: 600px;
  margin-inline: auto;
  padding: 2.5rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: center;
}
.ck-sdkwait::before {
  content: "";
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2.5px solid var(--line-strong);
  border-top-color: var(--brand);
  animation: ck-spin .8s linear infinite;
}
.ck-sdkwait p { margin: 0; }
.ck-sdkwait .ck-sdkwait-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.ck-sdkwait .ck-sdkwait-s { font-size: 12.5px; color: var(--ck-quiet); }

#onfido-mount {
  min-height: 520px;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}


/* ============================================================
   9  DELIVERY — post offices, dates, branches
   ============================================================ */
.ck-panel[hidden] { display: none; }

.ck-find {
  display: grid;
  grid-template-columns: minmax(0, 12rem) auto;
  align-items: end;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.ck-find .btn { min-height: 48px; white-space: nowrap; }

/* the results. A keyed index: every office is one row, read the
   same way as every other choosable row on the surface. */
.post-office-results-shell {
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 1.35rem;
}
.post-office-results-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .95rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.post-office-results-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--body);
}
.post-office-results-count {
  margin-left: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ck-quiet);
}
.post-office-results-scroll {
  max-height: 22rem;
  overflow-y: auto;
  background: var(--surface);
}

/* .po-card is injected by paymentorder_v17.js — see THE BRIDGE.
   It is a ruled row, not a card, whatever it is called. */
.po-card {
  border-bottom: 1px solid var(--line);
  transition: background-color .16s ease;
}
.po-card:last-child { border-bottom: 0; }
.po-card:hover { background: var(--surface-2); }
.po-card.is-selected { background: rgba(0, 0, 255, .045); box-shadow: inset 2px 0 0 var(--brand); }

.po-card-main { position: relative; }
.po-card-main > input[type="radio"] {
  position: absolute;
  top: 1.05rem; left: .95rem;
  width: 17px; height: 17px;
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.po-card-main > label {
  display: block;
  padding: .9rem 1rem .9rem 2.6rem;
  cursor: pointer;
  margin: 0;
}
.po-card-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.po-card-distance {
  display: block;
  margin-top: .15rem;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ck-quiet);
}
/* The script rewrites this button's innerHTML on every click, so its
   chevron ships as an icon-font <i> that this surface cannot render.
   ::before is generated content on the button itself, which innerHTML
   does not touch — so the mark is drawn here and .is-open (the class
   the script toggles) turns it. */
.po-details-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .75rem 2.6rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
}
.po-details-toggle::before {
  content: "";
  width: 11px; height: 11px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230000FF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8'/%3E%3C/svg%3E");
  transition: transform .2s cubic-bezier(.3, .7, .2, 1);
}
.po-details-toggle.is-open::before { transform: rotate(180deg); }
.po-details-toggle:hover { text-decoration: underline; text-underline-offset: 2px; }
/* the injected <i> is hidden by the bridge; this keeps the gap it left
   from doubling the one ::before already provides */
.po-details-chevron { display: none; }
.po-card-details {
  padding: .25rem 1rem .95rem 2.6rem;
  display: grid;
  gap: .35rem;
}
.po-detail-row {
  display: flex;
  gap: .5rem;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--body);
}

/* the date choice. The calendar is the one element that owns its
   step, so it gets the room. */
/* the date choice is its own region: a rule, its head, then the
   calendar. The rule belongs to the block, not to the grid, or
   the head would sit above the separator it introduces. */
.ck-cal-block {
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
  margin-top: 1.6rem;
}

.ck-cal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.ck-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.ck-cal-out {
  padding-left: 1.5rem;
  border-left: 1px solid var(--line);
  min-width: 0;
}
.ck-cal-out > div { min-width: 0; }
#selected_collect_date,
#selected_delivery_date,
#selected_postoffice_date {
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
}
#postoffice_fee_display,
#delivery_fee_display {
  margin-top: .9rem;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#postoffice_fee_vell_note,
#delivery_fee_vell_note {
  margin-top: .6rem;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ck-quiet);
}
#postoffice_fee_vell_note strong,
#delivery_fee_vell_note strong { color: var(--body); }

/* the priority-delivery switch. Bootstrap's custom-switch names
   are kept because the order logic reads the input by id and the
   markup shape is shared with the injected po-card controls. */
.custom-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 0;
}
.custom-switch .custom-control-input {
  position: absolute;
  opacity: 0;
  width: 40px; height: 22px;
  margin: 0;
  cursor: pointer;
}
.custom-switch .custom-control-label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  margin: 0;
}
.custom-switch .custom-control-label::before {
  content: "";
  order: -1;
  width: 40px; height: 22px;
  border-radius: 11px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  transition: background-color .18s ease, border-color .18s ease;
}
.custom-switch .custom-control-label::after {
  content: "";
  position: absolute;
  left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 10, 77, .28);
  transition: transform .18s cubic-bezier(.3, .7, .2, 1);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--brand);
  border-color: var(--brand);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(18px); }
.custom-switch .custom-control-input:focus-visible ~ .custom-control-label::before {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
}

/* --- the branch, its hours and its closures --- */
#branch_details { margin-top: 1.25rem; }

.ck-branch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.ck-branch-lines { display: grid; gap: 1.25rem; }
.ck-branch-info h4,
.ck-branch-map h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ck-quiet);
  margin: 0 0 .5rem;
}
.ck-branch-addr {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--body);
  margin: 0 0 .6rem;
}
.ck-branch-info a,
.ck-lede a,
.ck-note a,
.ck-notice a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.ck-branch-info a:hover,
.ck-lede a:hover,
.ck-note a:hover,
.ck-notice a:hover { text-decoration-thickness: 2px; }
.ck-branch-info .num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
/* The embed paints its own square corners straight over a radius set on
   the iframe, so the radius and the clip live on a wrapper instead. The
   Google chrome inside it — the keyboard-shortcuts strip, Terms, the pan
   puck, "Open in Maps" — is cross-origin and cannot be restyled or
   moved; the frame around it is what this system gets to decide. */
.ck-map-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  line-height: 0;
}
.branch-map-iframe {
  display: block;
  width: 100%;
  min-height: 280px;
  border: 0;
  border-radius: 0;
}
.ck-branch-nomap {
  display: grid;
  place-items: center;
  min-height: 280px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 13px;
  color: var(--ck-quiet);
  text-align: center;
  padding: 1rem;
}

.ck-hours { width: 100%; border-collapse: collapse; }
.ck-hours td {
  padding: .3rem 0;
  font-size: 13px;
  color: var(--body);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.ck-hours tr:last-child td { border-bottom: 0; }
.ck-hours td:last-child { text-align: right; }
.ck-hours .tk_current_day { color: var(--ink); font-weight: 700; }
.ck-hours .Closed { color: var(--down); font-weight: 600; }

.ck-closures { display: grid; gap: .4rem; margin-top: .5rem; }
.ck-closure {
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  font-size: 13px;
  color: var(--body);
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}
.ck-closure:last-child { border-bottom: 0; }
.ck-closure .d { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }


/* ============================================================
   10  VELL — the membership offer

   A partner offer inside a currency order. It is allowed to look
   like an offer, but it may not out-shout the order: the amount
   payable stays the one blue figure on the surface, so the offer
   carries amber.
   ============================================================ */
.vell-offer-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.6rem 1.65rem;
  background: var(--navy);
  border-radius: var(--r);
  color: var(--on-navy);
}
.vell-offer-title {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.22;
  color: #FFF;
  margin: 0 0 .55rem;
  text-wrap: balance;
}
.vell-offer-lead {
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-navy);
  margin: 0;
  max-width: 48ch;
}
/* the partner's name, below the lead rather than above the heading */
.vell-offer-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 1.05rem 0 0;
  padding: .3rem .6rem .3rem .5rem;
  border: 1px solid var(--navy-line);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .07);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--accent-fill);
}
.vell-offer-kicker .ic { display: inline-flex; }
.vell-offer-kicker .ic svg { display: block; width: 13px; height: 13px; }

.vell-offer-price { text-align: right; }
.vell-original-fee {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--on-navy-dim);
  text-decoration: line-through;
}
.vell-free-fee {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--accent-fill);
  white-space: nowrap;
}
.vell-free-fee span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-navy-dim);
}

.vell-benefits-heading {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 2rem 0 .9rem;
}
.vell-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.vell-benefit-card {
  background: var(--surface);
  padding: 1.15rem 1.15rem 1.25rem;
}
.vell-benefit-icon { color: var(--brand); margin-bottom: .6rem; }
.vell-benefit-icon svg { display: block; width: 20px; height: 20px; }
.vell-benefit-card h4 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .3rem;
}
.vell-benefit-card p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}

/* the already-a-member state */
.vell-member-plate {
  display: grid;
  justify-items: center;
  gap: .7rem;
  padding: 2.25rem 1.5rem;
  background: var(--navy);
  border-radius: var(--r);
  text-align: center;
  color: var(--on-navy);
}
.vell-member-mark { color: var(--accent-fill); }
.vell-member-mark svg { display: block; width: 36px; height: 36px; }
.vell-member-plate h3 {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 700;
  color: #FFF;
  margin: 0;
}
.vell-member-plate p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  max-width: 34rem;
  color: var(--on-navy);
}


/* ============================================================
   11  SUMMARY & PAYMENT

   The recap is a ruled statement. Its rows meet: the label rule
   and the value rule have to touch, or every separator reads as
   two broken lines with a notch in it — so the label takes
   padding-right, never a column-gap.
   ============================================================ */
.order-summary-grid {
  display: grid;
  margin: 0 0 1.35rem;
}
.order-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: baseline;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.order-summary-row:first-child { padding-top: 0; }
.order-summary-label {
  padding-right: 1.25rem;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ck-quiet);
}
.order-summary-value {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow-wrap: break-word;
}

/* VELL points redeem (summary step) */
.vell-redeem {
  margin: 1.15rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
}
.vell-redeem-h {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0 0 .45rem;
}
.vell-redeem .afield select {
  width: 100%;
  max-width: 18rem;
}

/* a tinted band across the panel, not a box inside it */
.order-totals-box {
  padding: 1.05rem 1.65rem;
  margin: 0 -1.65rem -1.5rem;
  background: var(--surface-2);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.order-totals-box .ck-trow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .28rem 0;
  font-size: 13.5px;
  color: var(--body);
  font-variant-numeric: tabular-nums;
}
.order-totals-box .ck-trow-tot {
  margin-top: .5rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line-strong);
  font-size: 15px;
}
.order-totals-box .ck-trow-tot strong:first-child { color: var(--ink); font-weight: 600; }
/* the one blue figure on the surface */
.order-totals-box .ck-trow-tot .ck-payable {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--brand);
}

/* --- payment --- */
.payment-panel { margin-top: 1.25rem; }
.payment-panel[hidden] { display: none; }

.finmore-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1px;
  /* The hairlines are drawn by each cell, not by showing the container
     through 1px gaps. With the rule colour as the container background, an
     incomplete final row -- which a -wide cell forces as soon as the cell
     count is not a multiple of the column count -- rendered as a grey
     block. Now a gap in the grid simply shows the sheet. */
  background: var(--surface);
  border: 0;
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.15rem 0;
}
.finmore-cell {
  background: var(--surface);
  padding: .8rem .95rem;
  min-width: 0;
  /* the 1px ring bleeds into the 1px gap, so neighbours share one
     hairline and the grid keeps its outer rule; overflow:hidden on the
     container trims the corners */
  box-shadow: 0 0 0 1px var(--line);
}
.finmore-cell-wide { grid-column: 1 / -1; }
.finmore-field-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ck-quiet);
  margin-bottom: .28rem;
}
.finmore-field-label small { font-weight: 600; text-transform: none; letter-spacing: 0; }
.finmore-field-value {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.finmore-reference {
  color: var(--brand);
  letter-spacing: .04em;
}

/* the copy control on the figures a customer has to retype */
.ck-copy {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  margin-left: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--body);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.ck-copy svg { width: 14px; height: 14px; display: block; }
.ck-copy:hover { color: var(--brand); border-color: var(--brand); background: var(--surface-2); }
.ck-copy .ck-copy-done { display: none; }
.ck-copy.is-done { color: var(--up); border-color: var(--up); }
.ck-copy.is-done .ck-copy-idle { display: none; }
.ck-copy.is-done .ck-copy-done { display: block; }

.payment-validation-list {
  list-style: none;
  padding: 0;
  margin: 1.15rem 0;
  display: grid;
  gap: .4rem;
}
.payment-validation-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 13px;
  line-height: 1.55;
  color: var(--body);
}
.payment-validation-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .38em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--up);
  border-bottom: 2px solid var(--up);
  transform: rotate(-45deg);
}

.fiserv-card-shell {
  padding: 1.1rem 1.15rem;
  background: var(--surface-2);
  border: 0;
  border-radius: var(--r);
  margin-bottom: 1.15rem;
}

/* --- terms --- */
.ck-terms {
  display: grid;
  gap: .9rem;
}
.ck-terms ol {
  margin: 0;
  padding-left: 1.35rem;
  display: grid;
  gap: .55rem;
}
.ck-terms li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--body);
}
.ck-terms a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* the declaration checkbox */
.ck-declare {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}
.ck-declare input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: .12rem 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.ck-declare label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.ck-declare input:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
}


/* ============================================================
   12  ISSUED — the order is placed

   The one authored arrival on the surface, and the only place
   something is actually issued.
   ============================================================ */
.ck-issued {
  display: grid;
  justify-items: center;
  gap: .8rem;
  padding: 2.5rem 1.5rem 2.25rem;
  text-align: center;
}

/* The separator belongs to whatever FOLLOWS the issued block, not to the
   block itself. Carried on .ck-issued as a border-bottom it dangled under
   a rule with nothing beneath it on every screen where nothing follows
   (bad request) or where the next panel is display:none (a non-EFT
   order). A hidden sibling draws no rule at all. */
.ck-issued + * {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.ck-issued-mark {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--up-wash);
  color: var(--up);
  animation: ck-land .42s cubic-bezier(.2, .9, .25, 1) both;
}
.ck-issued-mark svg { width: 28px; height: 28px; display: block; }
.ck-issued-mark.is-bad { background: var(--down-wash); color: var(--down); }
.ck-issued-mark.is-wait { background: var(--accent-wash); color: var(--accent); }
@keyframes ck-land {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}

.ck-issued-lab {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ck-quiet);
}
.ck-issued-serial {
  font-family: var(--f-mono);
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.tk_order_id {
  font-family: var(--f-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--ink);
}
.ck-issued-say {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
  max-width: 52ch;
  margin: 0;
}
.ck-issued-say strong { color: var(--ink); }

.ck-recap { display: grid; }
.ck-recap-row {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  align-items: baseline;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.ck-recap-row:last-child { border-bottom: 0; }
.ck-recap-row > dt {
  padding-right: 1.25rem;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ck-quiet);
  margin: 0;
}
.ck-recap-row > dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.ck-recap-row > dd .num { font-variant-numeric: tabular-nums; }

/* a figure the legacy view printed with no label of its own */
.ck-recap-tot {
  padding-top: .9rem;
  margin-top: .3rem;
  border-top: 1px solid var(--line-strong);
  text-align: right;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* unlabelled lines, as upstream printed them */
.ck-stack { display: grid; gap: .3rem; }
.ck-stack > div {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.ck-stack > div:empty { display: none; }


/* ============================================================
   13  THE ORDER SUMMARY RAIL

   The single largest usability defect in the page this replaces:
   the amount payable was visible on step 1 and nowhere else, for
   eight further steps of identity and delivery questions.

   xc-checkout_v1.js mirrors #totalAudCart into #RailTotalValue,
   watching the element rather than hooking the four success
   handlers that write it.
   ============================================================ */
.ck-rail { min-width: 0; }

/* only ever shown below 1080px — see the responsive section */
.ck-mobar { display: none; }
.ck-rail-in {
  position: sticky;
  top: 5.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.ck-rail-h {
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.ck-rail-h h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--body);
  margin: 0;
}

.ck-total {
  display: grid;
  gap: .2rem;
  padding: 1.25rem 1.25rem 1.35rem;
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.ck-total dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ck-quiet);
  margin: 0;
}
.ck-total dd {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
}
.ck-total dd .cur {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--body);
  vertical-align: .28em;
}
/* the figure acknowledges the change rather than swapping silently */
.ck-total dd.is-changed { animation: ck-tick .5s cubic-bezier(.3, .7, .2, 1); }
@keyframes ck-tick {
  0%   { color: var(--brand); transform: translateY(-2px); }
  100% { color: var(--ink);   transform: translateY(0); }
}

.ck-fee {
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ck-quiet);
}

/* what a customer actually wants to know while handing over
   identity documents and money. Wording and icon paths are
   lifted from the home page's .promise list so the two surfaces
   cannot drift into making different claims. The icons are
   decorative — each sits beside its own visible label — so they
   are hidden from assistive tech rather than labelled twice.

   Four flat 12.5px rows under a hairline read as fine print, which is
   the wrong register for the only reassurance on a screen where money
   and identity documents change hands. They are now ruled rows with a
   drawn icon tile each: the wider rail buys the room, and the ruling
   makes four claims countable instead of a paragraph in a list.

   The rows are not links and never were, so the hover state is a
   response rather than an affordance: the tile takes the brand fill,
   the glyph reverses to amber, an amber rule wipes up the left edge,
   the label goes to full ink and the row shifts 2px. Nothing appears
   on hover that is not already legible without it -- every mark added
   is decoration, not information -- and the whole effect is motion,
   so the reduced-motion block at the foot of this file reduces it to
   the colour change alone.

   This is amber's fourth role on the surface, and unlike the other
   three it is not load-bearing: on a blue tile the amber glyph is the
   one reversal that stays legible, and the row is not a control, so
   nothing about the state depends on being read as amber. */
.ck-assure {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.ck-assure li {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1.25rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--body);
  transition: background-color .22s ease, color .22s ease,
              transform .28s cubic-bezier(.2, .8, .2, 1);
}
.ck-assure li + li { border-top: 1px solid var(--line); }

/* the amber rule wipes up from the centre of the row edge */
.ck-assure li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-fill);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.ck-assure li:hover::before { transform: scaleY(1); }

.ck-assure .ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--brand);
  transition: background-color .22s ease, border-color .22s ease,
              color .22s ease, box-shadow .28s ease;
}
.ck-assure .ic svg {
  display: block;
  width: 17px;
  height: 17px;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.ck-assure li:hover {
  background: var(--surface-2);
  color: var(--ink);
  transform: translateX(2px);
}
/* the glyph goes logo amber on the blue tile and takes one small step
   up as it changes -- the movement is what makes the state read as a
   response rather than a repaint */
.ck-assure li:hover .ic {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--accent-fill);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 255, .55);
}
.ck-assure li:hover .ic svg { transform: translateY(-1px) scale(1.06); }

.ck-foot {
  padding: 1.05rem 1.25rem 1.15rem;
  background: var(--surface-2);
}
.ck-foot p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--body);
}
.ck-foot p + p { margin-top: .2rem; }
.ck-foot .num { font-variant-numeric: tabular-nums; }

/* ============================================================
   13a  THE RUNNING SUMMARY

   The rail carried one figure. This adds the three things a
   customer nine steps deep could no longer see: the foreign
   amount they asked for, where they chose to collect it, and
   what the fee did to the total.

   Ruled blocks under the big figure, not cards — the same
   hairline grammar the cart and the assurance rows use. The
   foreign amount is the content, so it is the largest thing in
   the block and set in the mono face the surface reserves for
   figures; the AUD it came from is the quiet second line.

   Every block is served hidden and revealed by
   xc-checkout_v1.js only once GetRailSummary has given it
   something true to say, so [hidden] must survive .ck-sum-b
   becoming a grid — a class selector in this sheet would
   otherwise outrank the UA's [hidden] { display: none }.
   ============================================================ */
.ck-sum[hidden],
.ck-sum-b[hidden],
.ck-line[hidden],
.ck-sum-where[hidden],
.ck-sum-when[hidden] { display: none !important; }

.ck-sum-b {
  padding: .95rem 1.25rem 1.05rem;
  border-bottom: 1px solid var(--line);
}

.ck-sum-h {
  margin: 0 0 .6rem;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ck-quiet);
}

/* --- what they receive ------------------------------------ */
.ck-recv {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.ck-recv-i {
  display: grid;
  gap: .1rem;
}
.ck-recv-i + .ck-recv-i {
  padding-top: .55rem;
  border-top: 1px solid var(--line);
}

.ck-recv-amt {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--ink);
}
.ck-recv-code {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--body);
  vertical-align: .18em;
}
.ck-recv-from {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ck-quiet);
}
/* the cart already refuses to price an untradable line; the rail
   repeats the reason rather than showing a blank amount */
.ck-recv-flag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--down, #C33A2E);
}

/* --- where they collect it -------------------------------- */
.ck-sum-meth {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.ck-sum-where,
.ck-sum-when {
  margin: .18rem 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ck-quiet);
}
.ck-sum-when { font-variant-numeric: tabular-nums; }

/* --- the money -------------------------------------------- */
.ck-lines {
  margin: 0;
  display: grid;
  gap: .42rem;
}
.ck-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.ck-line dt {
  margin: 0;
  font-size: 12.5px;
  color: var(--ck-quiet);
}
.ck-line dd {
  margin: 0;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--body);
}
/* a credit reads as a credit without relying on the sign alone */
.ck-line dd.is-credit { color: var(--up, #0B7A52); }

.ck-line-tot {
  margin-top: .3rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line-strong, var(--line));
}
.ck-line-tot dt {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.ck-line-tot dd {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* matches the inline padding .ck-sec takes at the same width, so the
   rail and the flow keep one left edge on a narrow screen */
@media (max-width: 460px) {
  .ck-sum-b { padding-inline: .95rem; }
}


/* ============================================================
   14  THE FAQ

   Below the flow, on the page ground: these answer questions
   about the product, not about this order. _FaqDocket.cshtml
   serves every panel open and without `hidden`, so with
   JS blocked the page is a plain, complete, readable FAQ.
   ============================================================ */
/* The markup is _FaqDocket.cshtml's and was not edited:
   .ck-faq-sec wraps, .ck-faq-aside holds the heading, .ck-faq-list
   holds nine .ck-faq items, each a .ck-faq-head > h3.ck-faq-h >
   button.ck-faq-q (.ck-faq-ic + .ck-faq-t + .ck-faq-mark) and a
   .ck-faq-a > .ck-faq-inner panel. .ck-faq-mark is served empty,
   so its chevron is drawn here. */
/* One column: the heading sits above the list and every answer gets the
   full width of the section. The two-column arrangement put each answer
   in a 1fr track beside a 16rem heading that was empty below its first
   line, so long answers wrapped narrow while a third of the section
   stayed blank. */
.ck-faq-sec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-top: 2.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line-strong);
}

.ck-faq-aside { position: static; }
.ck-faq-aside h2 {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.ck-faq-em { color: var(--ck-quiet); }

.ck-faq-list { display: grid; }

/* one question */
.ck-faq { border-bottom: 1px solid var(--line); }
.ck-faq-head { margin: 0; }
.ck-faq-h { margin: 0; font-size: inherit; font-weight: inherit; }

.ck-faq-q {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  width: 100%;
  padding: 1rem 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: color .16s ease;
}
.ck-faq-q:hover { color: var(--brand); }
.ck-faq-q:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }

.ck-faq-ic { flex: 0 0 auto; color: var(--brand); margin-top: .12rem; }
.ck-faq-ic svg { display: block; width: 17px; height: 17px; }

.ck-faq-t {
  flex: 1 1 auto;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: inherit;
}

/* the chevron, drawn: the span is served empty */
.ck-faq-mark {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin-top: .2rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2371769F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8'/%3E%3C/svg%3E");
  transition: transform .22s cubic-bezier(.3, .7, .2, 1);
}
.ck-faq-q[aria-expanded="true"] .ck-faq-mark {
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230000FF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8'/%3E%3C/svg%3E");
}

/* the disclosure moves grid-template-rows between 1fr and 0fr,
   so no height is measured in JS and a panel opens to whatever
   its content needs even after the viewport changes */
.ck-faq-a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .26s cubic-bezier(.3, .7, .2, 1);
}
.ck-faq-a > .ck-faq-inner { overflow: hidden; }
.ck-faq-a.is-collapsed { grid-template-rows: 0fr; }

.ck-faq-inner {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--body);
  padding-bottom: 1.15rem;
}
.ck-faq-a.is-collapsed .ck-faq-inner { padding-bottom: 0; }
.ck-faq-inner a { color: var(--brand); text-underline-offset: 2px; }
/* the 46-currency list is the one answer that wants columns; at full
   section width it takes three rather than two */
.ck-faq-inner ul {
  margin: .7rem 0 0;
  padding-left: 1.2rem;
  columns: 3;
  column-gap: 2rem;
}
.ck-faq-inner li { break-inside: avoid; margin-bottom: .16rem; }


/* ============================================================
   15  THE BRIDGE

   Class names Scripts/paymentorder_v17.js injects at runtime.
   This surface loads no Bootstrap, so each is re-implemented
   here in this system's terms. Style them; never rename them.
   Nothing new should be written against the bridge.
   ============================================================ */

/* no icon font is loaded on this surface. The injected <i> slots
   collapse rather than rendering a tofu box; every one of them
   sits beside its own visible label. */
.checkoutsurface i.fas,
.checkoutsurface i.far,
.checkoutsurface i.fab { display: none; }

.d-none { display: none !important; }
.d-block { display: block; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.align-self-start { align-self: flex-start; }
.align-middle { vertical-align: middle; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.small { font-size: 12.5px; }
.font-weight-bold { font-weight: 700; }
.font-weight-normal { font-weight: 400; }

.text-muted   { color: var(--body); }
.text-danger  { color: var(--down); }
.text-success { color: var(--up); }
.text-primary { color: var(--brand); }
.text-warning { color: var(--accent); }

.m-0  { margin: 0; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mt-2 { margin-top: .5rem; }
.mt-auto { margin-top: auto; }
.mr-2 { margin-right: .5rem; }
.ml-2 { margin-left: .5rem; }
.ml-3 { margin-left: 1rem; }
.ml-auto { margin-left: auto; }
.pt-2 { padding-top: .5rem; }
.px-3 { padding-inline: 1rem; }
.py-4 { padding-block: 1.5rem; }

/* the injected grid. A minimal, non-Bootstrap reimplementation:
   .row is flex with a negative gutter, the columns take a basis. */
.checkoutsurface .row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -.5rem;
}
.checkoutsurface .row > [class*="col-"] {
  padding-inline: .5rem;
  min-width: 0;
}
.checkoutsurface .col-12 { flex: 0 0 100%; max-width: 100%; }
.checkoutsurface .col-md-6 { flex: 0 0 100%; max-width: 100%; }
.checkoutsurface .col-lg-4 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
  .checkoutsurface .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px) {
  .checkoutsurface .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

/* .card / .card-body: the injected eSIM plan shells. Flat panels,
   never a card inside a card. */
.checkoutsurface .card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
}
.checkoutsurface .card-body { padding: 1.1rem 1.15rem; }
.ck-sec .card,
.order-totals-box .card { border-color: var(--line); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: .26rem .5rem;
  border-radius: var(--r);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.badge-warning { background: var(--accent-wash); color: var(--accent); }
.badge-danger  { background: var(--down-wash);  color: var(--down); }
.badge-success { background: var(--up-wash);    color: var(--up); }

/* .btn is defined in XC_Home_v4.css and not forked. The two
   injected variants are the ones it does not carry. */
.btn-link {
  color: var(--brand);
  border: 0;
  background: none;
  padding: 0;
  font-weight: 600;
  cursor: pointer;
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* the injected spinners */
.spinner-border,
.spinner-grow {
  display: inline-block;
  width: 20px; height: 20px;
  vertical-align: middle;
}
.spinner-border {
  border: 2px solid var(--line-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: ck-spin .7s linear infinite;
}
.spinner-border-sm { width: 14px; height: 14px; border-width: 1.6px; }
.spinner-grow {
  border-radius: 50%;
  background: var(--brand);
  animation: ck-grow 1s ease-in-out infinite;
}
@keyframes ck-grow {
  0%, 100% { transform: scale(.35); opacity: .45; }
  50%      { transform: scale(1);   opacity: 1; }
}
/* .text-warning on a spinner would recolour only the border top */
.spinner-border.text-warning { border-top-color: var(--accent-fill); }
.spinner-grow.text-warning { background: var(--accent-fill); }

.ui-helper-hidden-accessible {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* injected generic containers. Stripped rather than styled: they
   already sit inside a panel, and a bordered box in there is a
   nested card. */
.ck-body .border,
.ck-body .rounded { border: 0 !important; border-radius: 0 !important; }
.ck-body .bg-white,
.ck-body .bg-light { background: none !important; }

.tk_primaryLight { color: var(--brand); }

/* the injected eSIM plan cards. The step is disabled, but the
   selectors are honoured so a re-enable is a view change only. */
.esim-plan-card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 1.1rem;
}
.esim-plan-card.selected { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.esim-plan-badge {
  display: inline-flex;
  padding: .22rem .45rem;
  border-radius: var(--r);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 600;
}
.esim-price {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* legacy alert names still present in a few server-rendered
   partials, mapped onto .ck-notice's palette */
.alert {
  padding: .85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.55;
}
.alert-success { background: var(--up-wash);     border-color: color-mix(in srgb, var(--up) 34%, transparent);          color: color-mix(in srgb, var(--up) 82%, var(--ink)); }
.alert-warning { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent-fill) 52%, transparent); color: var(--accent); }
.alert-danger  { background: var(--down-wash);   border-color: color-mix(in srgb, var(--down) 32%, transparent);        color: color-mix(in srgb, var(--down) 86%, var(--ink)); }
.alert-info    { background: rgba(0, 0, 255, .05); border-color: rgba(0, 0, 255, .22);                                  color: var(--ink); }


/* ============================================================
   16  THIRD PARTY — select2, toastr, jQuery UI datepicker

   These three ship their own stylesheets and their own opinions.
   XC_Checkout_v1.css loads after both third-party sheets on
   purpose: several of these selectors tie with theirs, and a tie
   is decided by source order.
   ============================================================ */

/* --- select2: the branch picker ---

   THE WIDTH. The init in Index.cshtml calls .select2() without a width
   option, so select2's default `width: 'resolve'` runs while
   #PickupDatePanel is still display:none, resolves to nothing, and
   stamps `style="width: auto"` on the container. An inline-block at
   auto width then shrink-wraps to the longest branch name plus its
   address: measured at 390px it was a 703px control inside a 311px
   field, dragging 360px of horizontal scroll onto the page. This is
   fixed here rather than in the init because the init is order logic
   and this is a layout defect. !important is required: the width is
   inline.

   THE HEIGHT follows from it. templateSelection renders the branch
   name and its full street address on one line, which no phone can
   hold, so the control is min-height rather than height and the
   selection wraps -- the address stays readable instead of being
   ellipsed away. The arrow is centred on the whole control so it does
   not float above a wrapped second line. */
/* the field's own container only. select2 appends a SECOND element
   with this class to <body> to carry the open dropdown, and body is
   .checkoutsurface, so an unscoped rule stretched that one to the
   viewport and knocked the dropdown 16px out of alignment with the
   field. The child combinator keeps this to the control in the form. */
.checkoutsurface .afield > .select2-container {
  display: block;
  width: 100% !important;
  max-width: 100%;
}

.select2-container--default .select2-selection--single {
  height: auto;
  min-height: 48px;
  padding: .8rem 2.3rem .8rem .95rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: inset 0 1px 2px rgba(0, 10, 77, .045);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.35;
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: break-word;
}
.select2-container--default .select2-selection--single .select2-selection__rendered small { color: var(--body); font-weight: 500; }
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  bottom: 0;
  height: auto;
  right: .6rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--body) transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 0, 255, .12);
}
.select2-dropdown {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: 0 28px 56px -30px rgba(0, 10, 77, .32), 0 2px 6px rgba(0, 10, 77, .06);
}
.select2-container--default .select2-results__option {
  padding: .6rem .8rem;
  font-size: 14px;
  color: var(--body);
}
.select2-container--default .select2-results__option strong { color: var(--ink); font-weight: 600; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--surface-2);
  color: var(--ink);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: rgba(0, 0, 255, .06);
  color: var(--ink);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: .55rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-family: var(--f-ui);
  font-size: 14px;
}
/* each option is a branch name over a wrapped street address, so
   select2's 200px list showed barely two of them on a phone */
.checkoutsurface .select2-results__options { max-height: 300px; }
@media (max-width: 760px) {
  /* iOS zooms the page on a focused field under 16px */
  .checkoutsurface .select2-container--default .select2-search--dropdown .select2-search__field { font-size: 16px; }
}

/* --- toastr: every error the order logic raises --- */
.checkoutsurface #toast-container > div {
  opacity: 1;
  border-radius: var(--r);
  box-shadow: 0 28px 56px -30px rgba(0, 10, 77, .38), 0 2px 6px rgba(0, 10, 77, .08);
  font-family: var(--f-ui);
  font-size: 13.5px;
  line-height: 1.5;
  background-image: none !important;
  padding: .9rem 1.1rem;
}
.checkoutsurface #toast-container > .toast-error   { background: var(--down); }
.checkoutsurface #toast-container > .toast-success { background: var(--up); }
.checkoutsurface #toast-container > .toast-info    { background: var(--navy); }
.checkoutsurface #toast-container > .toast-warning { background: var(--accent-fill); color: var(--accent-ink); }

/* --- jQuery UI: the three inline datepickers ---
   jquery-ui.js is loaded without its stylesheet on this surface,
   so the calendar is drawn here in full. */
.ui-datepicker.ui-datepicker-inline {
  width: 17.5rem;
  max-width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--f-ui);
}
.ui-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .7rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.ui-datepicker-title {
  order: 0;
  flex: 1 1 auto;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.ui-datepicker-prev,
.ui-datepicker-next {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--body);
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  transition: border-color .16s ease, background-color .16s ease;
}
.ui-datepicker-prev { order: -1; }
.ui-datepicker-next { order: 1; }
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover { border-color: var(--brand); background: var(--surface-2); }
.ui-datepicker-prev::after,
.ui-datepicker-next::after {
  content: "";
  position: absolute;
  inset: 0;
  text-indent: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px;
}
.ui-datepicker-prev::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%233E4470' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 1 1.5 6l5 5'/%3E%3C/svg%3E");
}
.ui-datepicker-next::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%233E4470' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1l5 5-5 5'/%3E%3C/svg%3E");
}
.ui-datepicker-prev.ui-state-disabled,
.ui-datepicker-next.ui-state-disabled { opacity: .35; pointer-events: none; }

.ui-datepicker-calendar { width: 100%; border-collapse: collapse; }
.ui-datepicker-calendar th {
  padding: .35rem 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ck-quiet);
}
.ui-datepicker-calendar td { padding: 1px; text-align: center; }
.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
  display: grid;
  place-items: center;
  height: 34px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .14s ease, color .14s ease;
}
.ui-datepicker-calendar td a:hover { background: var(--surface-2); }
/* a date that cannot be chosen says so by being unreachable and
   quiet, never by being invisible */
.ui-datepicker-calendar td.ui-datepicker-unselectable span,
.ui-datepicker-calendar td.ui-state-disabled span { color: var(--line-strong); }
/* Today is a landmark, not a choice: a ring, never a fill. jQuery UI
   puts .ui-datepicker-current-day on TODAY while nothing is selected,
   so keying "selected" off that class made an unselected calendar
   claim a date the customer never picked — and on this surface today
   is usually not even orderable (minDate is days ahead). Only the
   anchor's own .ui-state-active means selected. */
.ui-datepicker-calendar td.ui-datepicker-today a,
.ui-datepicker-calendar td.ui-datepicker-today span {
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-weight: 600;
}
.ui-datepicker-calendar td a.ui-state-active {
  background: var(--brand);
  color: #FFF;
  font-weight: 600;
  box-shadow: none;
}
/* jQuery UI also parks .ui-state-hover on today's cell at render time */
.ui-datepicker-calendar td a.ui-state-highlight:not(.ui-state-active) {
  background: none;
  color: var(--ink);
}

/* the month and year pickers, when changeMonth / changeYear are on.
   Left to the browser they are raw OS dropdowns inside an otherwise
   drawn calendar. */
.ui-datepicker-title select {
  min-height: 28px;
  padding: .2rem 1.5rem .2rem .45rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2371769F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .35rem center;
  background-size: 9px;
}
.ui-datepicker-title select + select { margin-left: .3rem; }
.ui-datepicker-title select:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 0, 255, .12);
}
.ui-datepicker-calendar td.ui-datepicker-other-month span { color: transparent; }

.ck-today-tag {
  display: inline-flex;
  align-items: center;
  padding: .2rem .45rem;
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ck-quiet);
}


/* ============================================================
   17  BROWSER SURFACES

   The parts not drawn here still carry the design.
   ============================================================ */
.checkoutsurface ::selection { background: var(--accent-fill); color: var(--accent-ink); }

.checkoutsurface :focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
}

.post-office-results-scroll { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.post-office-results-scroll::-webkit-scrollbar { width: 10px; }
.post-office-results-scroll::-webkit-scrollbar-track { background: transparent; }
.post-office-results-scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 5px;
  border: 3px solid var(--surface);
}
.post-office-results-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* autofill floods a field with the browser's own yellow. The
   inset box-shadow paints it back to the surface colour. */
.checkoutsurface input:-webkit-autofill,
.checkoutsurface input:-webkit-autofill:hover,
.checkoutsurface input:-webkit-autofill:focus,
.checkoutsurface select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--surface) inset, inset 0 1px 2px rgba(0, 10, 77, .045);
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--brand);
}

/* every figure on the surface is read as a quantity */
.checkoutsurface .num,
.checkoutsurface .is-measured { font-variant-numeric: tabular-nums; }


/* ============================================================
   18  RESPONSIVE

   The rail moves above the flow rather than below it: the amount
   payable is the thing a customer on a phone most wants and
   least wants to hunt for. It does not stick there — the
   masthead is already sticky, and a second sticky band on a
   360px screen leaves no room for the question itself.
   ============================================================ */
@media (max-width: 1080px) {
  .ck-grid { grid-template-columns: minmax(0, 1fr); }
  /* The summary went ABOVE the flow and, all-zero on arrival, filled the
     first screenful with nothing the visitor could act on — and it did not
     stick, so STORY's "the amount payable is never off screen" held on
     desktop only. It now sits after the question, and .ck-mobar keeps the
     figure on screen instead. */
  .ck-rail { order: 1; }
  .ck-rail-in { position: static; }
  .ck-assure { display: none; }
  .ck-total { padding-block: .95rem 1rem; }
  .ck-total dd { font-size: 23px; }

  /* the running total, pinned. aria-hidden in the markup: it is a second
     rendering of the rail's own live region, not a second announcement. */
  .ck-mobar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem clamp(1rem, 4vw, 1.5rem);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -18px 40px -30px rgba(0, 10, 77, .5);
  }
  .ck-mobar .l {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ck-quiet);
  }
  .ck-mobar .v {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.015em;
    color: var(--ink);
  }
  .ck-mobar .v .cur {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--ck-quiet);
    vertical-align: .3em;
  }
  /* the bar must never cover the last action on the page */
  main.checkout { padding-bottom: 5.5rem; }

  .ck-faq-sec { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .ck-faq-aside { position: static; }
  .ck-faq-inner ul { columns: 1; }
}

@media (max-width: 900px) {
  .ck-cal { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .ck-cal-out { padding-left: 0; border-left: 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
  .ck-branch { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* nine labelled steps do not fit. The rail keeps its numerals
     and scrolls inside its own panel — never full-bleed, which
     is what put a horizontal scrollbar under the account page —
     and the current step is named in words above it. */
  /* The rail keeps its LABELS here rather than swapping them for an
     authored "Step n of 9" sentence: those nine words are the flow's own
     content, and the sentence was not. The rail scrolls inside its own
     panel — never full-bleed, which is what put a horizontal scrollbar
     under the account page — and a trailing fade says it continues. */
  .ck-steps { padding-inline: 0; }
  /* 4.6rem, not 5.4rem: at 375px nine rungs of 5.4rem put rung 4 flush
     against the panel edge, and a rung that terminates exactly at the
     edge does not read as "there is more to the right" no matter what
     gradient sits over it. This width leaves the fifth rung visibly
     half-cut, which is the cue that actually works. */
  #WrTabs {
    /* four rungs (the outcome record) stretch to fill; nine would take
       4.6rem each and scroll, leaving the fifth half-cut as the cue */
    grid-auto-columns: minmax(4.6rem, 1fr);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-inline: .5rem;
  }
  #WrTabs::-webkit-scrollbar { display: none; }
  #WrTabs::before { left: .5rem; right: .5rem; }
  .tk_step_btn { padding: .6rem .2rem .75rem; }
  .tk_step_label { font-size: 9.5px; letter-spacing: .04em; }
}

@media (max-width: 760px) {
  /* the bottom value clears .ck-mobar (52px pinned), not just the page
     end: this block loads after the 1080px one and was overriding the
     clearance set there back down to 40px */
  main.checkout { padding-block: 1.25rem 5.5rem; }
  .ck-sec { padding: 1.15rem 1.15rem; }
  .order-summary-row,
  .ck-recap-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .2rem;
  }
  .order-summary-label,
  .ck-recap-row > dt { padding-right: 0; }
  .order-summary-value,
  .ck-recap-row > dd { text-align: left; }

  .currencyRow,
  .ck-cart-head { grid-template-columns: minmax(0, 1fr); }
  .ck-cart-head { display: none; }
  .ck-eq { display: none; }
  .ck-rowacts { padding-top: .35rem; }

  .ck-verify,
  .ck-find { grid-template-columns: minmax(0, 1fr); }
  .ck-verify .btn,
  .ck-find .btn { width: 100%; }

  .vell-offer-hero { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .vell-offer-price { text-align: left; }

  .ck-actions { gap: .6rem; }
  .ck-actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 460px) {
  .ck-sec { padding: 1rem .95rem; }
  .ck-issued { padding-inline: .5rem; }
}


/* ============================================================
   19  REDUCED MOTION

   The entrance animations start from opacity: 0 with
   animation-fill-mode: both, so they must be REMOVED, never
   shortened. The necessary spinners slow rather than stop.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .checkoutsurface *,
  .checkoutsurface *::before,
  .checkoutsurface *::after {
    transition-duration: .01ms !important;
  }
  .ck-issued-mark,
  .ck-total dd.is-changed { animation: none !important; }
  .ck-assure li,
  .ck-assure li::before,
  .ck-assure .ic,
  .ck-assure .ic svg { transition: none !important; }
  .ck-assure li:hover { transform: none; }
  .ck-assure li:hover::before { transform: scaleY(1); }
  .ck-assure li:hover .ic svg { transform: none; }
  .ck-spin::before,
  .ck-sdkwait::before,
  .spinner-border,
  .spinner-grow { animation-duration: 2.4s !important; }
  #WrTabs { scroll-behavior: auto; }
}


/* ============================================================
   20  THE AUTH FIELD LABEL, ON THIS SURFACE

   XC_Auth_v1.css sets .afield > label to --muted, which is 4.06:1 on
   white. That file is shared with the account screens and is not edited
   here, so the override is scoped to this surface only.
   ============================================================ */
.checkoutsurface .afield > label,
.checkoutsurface .afield-lab,
.checkoutsurface .ahint { color: var(--ck-quiet); }
.checkoutsurface .afield input::placeholder { color: var(--ck-quiet); }