/**
 * Post-order pages: order-received ("thank you") and order-pay.
 *
 * This is the ONLY stylesheet either page loads. Until v5.61.0 both also
 * pulled in the Buy Now popup's 51 KB buy-now.css, because the thank-you
 * screen was that popup's success screen re-rendered server-side; ~85% of that
 * file was modal, overlay and form rules matching nothing here. The two pages
 * now share their DATA with the popup (order_context(), money_rows(), the same
 * timeline builder) and none of its CSS, which is both lighter and the part
 * that actually has to agree.
 *
 * Design tokens come from the checkout's own settings (printed on :root by
 * Woo_Dash_Checkout_Postorder::maybe_enqueue), so this reads as the same
 * product as the checkout the shopper just came from.
 *
 * Scoped under body.wd-npo throughout, so nothing here can reach any other
 * page. Note the standing rule from checkout.css: Blocksy styles WooCommerce's
 * own native classes (tables, addresses, buttons, lists) and frequently loads
 * after this file, so rules targeting those need `!important` rather than a
 * specificity contest this file cannot reliably win.
 *
 * No web fonts, no background images, no icon font, no framework: every icon
 * on these pages is inline SVG in the markup, and every surface is a CSS
 * gradient or a flat fill. A shopper reaches the thank-you page with a payment
 * redirect still settling, so the cheapest asset is the one never requested.
 */

.wd-npo {
	--npo-line: #e7e9ef;
	--npo-ink: #111827;
	--npo-muted: #6b7280;
	--npo-faint: #9aa0ab;
	--npo-ok: #12a34b;
	--npo-ok-soft: #eefaf3;
	--npo-ok-line: #bfe9d1;
	--npo-wait: #b45309;
	--npo-wait-soft: #fffbeb;
	--npo-wait-line: #fde68a;
	--npo-card: #fff;
	--npo-shadow: 0 1px 2px rgba( 17, 24, 39, .04 );
}

/* ══════════════════════════════════════════════════════════════════════
   SHELL
   ══════════════════════════════════════════════════════════════════════ */

.wd-npo .wd-npo-shell {
	box-sizing: border-box;
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	font-size: 14px;
	line-height: 1.5;
	color: var( --npo-ink );
}

.wd-npo .wd-npo-shell *,
.wd-npo .wd-npo-shell *::before,
.wd-npo .wd-npo-shell *::after {
	box-sizing: border-box;
}

/* Themes give ul/ol a list marker and a left indent by default, and every
   list on these pages (items, contact rows, trust badges, the timeline) is a
   list for semantics rather than for bullets.
 *
 * Note the element names on both sides of this reset and on every component
 * rule that later sets padding or margin on a list: this reset is (0,2,1), so
 * a bare `.wd-npo .wd-npo-track-step` at (0,2,0) LOSES to it no matter where
 * it sits in the file. That is not hypothetical - it silently flattened the
 * timeline's step spacing, the item rows and the trust badges to zero padding
 * the first time this file was written. `list-style` keeps its !important
 * because that is the one declaration a theme sets from a more specific
 * selector; the box metrics deliberately do not, so component rules can win
 * on order instead of an !important arms race. */
.wd-npo .wd-npo-shell ul,
.wd-npo .wd-npo-shell ol,
.wd-npo .wd-npo-shell dl,
.wd-npo .wd-npo-shell li {
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.wd-npo .wd-npo-shell p,
.wd-npo .wd-npo-shell h1,
.wd-npo .wd-npo-shell h2 {
	margin: 0;
}

.wd-npo .wd-npo-shell img {
	max-width: 100%;
	height: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   HERO

   Deliberately flat: a tinted panel, a ring and a check. The reference
   mockups put a rendered parcel illustration and scattered confetti here,
   which is a decorative raster on the critical path of a page the shopper
   reaches mid-redirect - the single heaviest thing on the design and the
   first thing cut.
   ══════════════════════════════════════════════════════════════════════ */

.wd-npo .wd-npo-hero {
	padding: 26px 20px 22px;
	border: 1px solid var( --npo-ok-line );
	border-radius: 18px;
	background: linear-gradient( 180deg, var( --npo-ok-soft ), #fff 82% );
	text-align: center;
}

.wd-npo .wd-npo-hero--wait {
	border-color: var( --npo-wait-line );
	background: linear-gradient( 180deg, var( --npo-wait-soft ), #fff 82% );
}

/* Cancelled, refunded, or a payment that failed. Not amber: those are states
   that resolve on their own if you wait, and these do not. */
.wd-npo .wd-npo-hero--stop {
	border-color: #fecaca;
	background: linear-gradient( 180deg, #fef2f2, #fff 82% );
}

.wd-npo .wd-npo-hero-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var( --npo-ok );
	color: #fff;
	/* The soft outer ring, as a spread shadow rather than a second element. */
	box-shadow: 0 0 0 7px rgba( 18, 163, 75, .12 );
}

.wd-npo .wd-npo-hero--wait .wd-npo-hero-mark {
	background: #d97706;
	box-shadow: 0 0 0 7px rgba( 217, 119, 6, .12 );
}

.wd-npo .wd-npo-hero--stop .wd-npo-hero-mark {
	background: #dc2626;
	box-shadow: 0 0 0 7px rgba( 220, 38, 38, .12 );
}

.wd-npo .wd-npo-hero-title {
	font-size: 25px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var( --npo-ink );
}

.wd-npo .wd-npo-hero-msg {
	max-width: 520px;
	margin: 7px auto 0 !important;
	font-size: 14px;
	font-weight: 500;
	color: var( --npo-muted );
}

/* ── Order number chip ─────────────────────────────────────────────── */

.wd-npo .wd-npo-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px !important;
	padding: 7px 8px 7px 14px;
	border: 1px solid var( --npo-line );
	border-radius: 999px;
	background: #fff;
	box-shadow: var( --npo-shadow );
}

.wd-npo .wd-npo-chip-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var( --npo-muted );
}

.wd-npo .wd-npo-chip-no {
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: .01em;
	color: var( --npo-ink );
}

.wd-npo .wd-npo-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0 !important;
	border: none !important;
	border-radius: 8px !important;
	background: #f3f4f7 !important;
	color: var( --npo-muted ) !important;
	line-height: 0 !important;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.wd-npo .wd-npo-copy:hover {
	background: #e9eaef !important;
	color: var( --npo-ink ) !important;
}

/* The tick swaps in for ~1.6s after a successful copy. Both icons ship in the
   markup and one is hidden, so confirming costs no request and no reflow. */
.wd-npo .wd-npo-copy-ok,
.wd-npo .wd-npo-copy.is-copied .wd-npo-copy-i {
	display: none;
}

.wd-npo .wd-npo-copy.is-copied .wd-npo-copy-ok {
	display: block;
}

.wd-npo .wd-npo-copy.is-copied {
	background: var( --npo-ok-soft ) !important;
	color: var( --npo-ok ) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PAYMENT STRIP
   ══════════════════════════════════════════════════════════════════════ */

.wd-npo .wd-npo-strip {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 14px;
	padding: 13px 16px;
	border: 1px solid var( --npo-wait-line );
	border-radius: var( --npo-radius, 14px );
	background: var( --npo-wait-soft );
	color: var( --npo-wait );
}

.wd-npo .wd-npo-strip--paid {
	border-color: var( --npo-ok-line );
	background: var( --npo-ok-soft );
	color: #0f7a39;
}

.wd-npo .wd-npo-strip-i {
	flex: 0 0 auto;
}

/* Takes the free space so the label and the amount stay on one line: without
   it the note's own width squeezed this box and pushed the amount under its
   own label, which is the one thing on the strip that has to be read at a
   glance. */
.wd-npo .wd-npo-strip-main {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex: 1 1 auto;
	flex-wrap: wrap;
	min-width: 0;
}

.wd-npo .wd-npo-strip-label {
	font-size: 13.5px;
	font-weight: 600;
}

.wd-npo .wd-npo-strip-amount {
	font-size: 17px;
	font-weight: 800;
	color: inherit;
}

.wd-npo .wd-npo-strip-amount .woocommerce-Price-amount {
	color: inherit;
}

/* Pushed to the far end on a wide strip and dropped entirely on a phone: it
   is a helpful aside, never the message, and at narrow widths it would wrap
   under the amount and bury it. */
.wd-npo .wd-npo-strip-note {
	flex: 0 1 auto;
	margin-left: auto;
	padding-left: 12px;
	max-width: 42%;
	font-size: 12.5px;
	font-weight: 500;
	opacity: .82;
	text-align: right;
}

/* ══════════════════════════════════════════════════════════════════════
   GRID

   One column by default, which is also what a phone gets; the two columns
   are the enhancement. Two children only - the summary and a side wrapper -
   so there is nothing to reflow and, crucially, no named areas: an area holds
   its row whether or not anything is placed in it, and the side cards are
   optional (the help card needs a configured support address; the order-pay
   page has none at all).
   ══════════════════════════════════════════════════════════════════════ */

.wd-npo .wd-npo-grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 14px;
	margin-top: 14px;
}

.wd-npo .wd-npo-side {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

@media ( min-width: 700px ) {
	.wd-npo .wd-npo-grid {
		grid-template-columns: minmax( 0, 1.3fr ) minmax( 0, 1fr );
		/* Each column keeps its own height rather than the shorter one
		   stretching to match the taller. */
		align-items: start;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════════ */

.wd-npo .wd-npo-card {
	padding: 16px 18px;
	border: 1px solid var( --npo-line );
	border-radius: var( --npo-radius, 14px );
	background: var( --npo-card );
	box-shadow: var( --npo-shadow );
}

.wd-npo .wd-npo-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.wd-npo .wd-npo-card-title {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	color: var( --npo-ink );
}

.wd-npo .wd-npo-card-badge {
	padding: 3px 9px;
	border-radius: 999px;
	background: #f3f4f7;
	font-size: 11.5px;
	font-weight: 700;
	color: var( --npo-muted );
	white-space: nowrap;
}

/* A filled control, not a text link. It is the only thing on this page a
   shopper can act on once the order is placed, and a bare coloured word in a
   card header reads as a heading decoration rather than a button. */
.wd-npo .wd-npo-card-action {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 12px !important;
	border: 1px solid #e0d6fb !important;
	border-radius: 9px !important;
	background: #f4f0ff !important;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	color: var( --npo-accent, #7239ea ) !important;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.wd-npo .wd-npo-card-action:hover {
	background: #ece4ff !important;
	border-color: #cdbcf7 !important;
	text-decoration: none !important;
}

.wd-npo .wd-npo-card-action svg {
	flex: 0 0 auto;
}

/* Shown in place of the button once the order has moved past the statuses an
   address may be corrected in - see
   Woo_Dash_Checkout_Postorder::can_edit_address(). */
.wd-npo .wd-npo-addr-locked {
	margin-top: 12px !important;
	padding-top: 11px;
	border-top: 1px solid var( --npo-line );
	font-size: 12.5px;
	font-weight: 500;
	color: var( --npo-faint );
}

/* ── Items ─────────────────────────────────────────────────────────── */

.wd-npo li.wd-npo-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var( --npo-line );
}

.wd-npo li.wd-npo-item:first-child {
	padding-top: 0;
}

.wd-npo .wd-npo-item-img {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border: 1px solid var( --npo-line );
	border-radius: 10px;
	object-fit: cover;
	background: #f7f8fa;
}

.wd-npo .wd-npo-item-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 auto;
}

.wd-npo .wd-npo-item-name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var( --npo-ink );
}

.wd-npo .wd-npo-item-meta {
	font-size: 12.5px;
	font-weight: 500;
	color: var( --npo-muted );
}

.wd-npo .wd-npo-item-money {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	color: var( --npo-ink );
}

.wd-npo .wd-npo-item-qty {
	font-size: 12px;
	font-weight: 500;
	color: var( --npo-muted );
}

/* ── Money lines ───────────────────────────────────────────────────── */

.wd-npo dl.wd-npo-lines {
	margin-top: 12px !important;
}

.wd-npo .wd-npo-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 5px 0;
	font-size: 13.5px;
}

.wd-npo .wd-npo-line dt {
	margin: 0;
	font-weight: 500;
	color: var( --npo-muted );
}

.wd-npo .wd-npo-line dd {
	margin: 0 !important;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
	color: var( --npo-ink );
}

/* Money coming off, and a waived charge, are green here for the same reason
   they are green in the cart and the checkout summary: a receipt that prints
   the same discount in plain black reads as a different product. */
.wd-npo .wd-npo-line--cut dd,
.wd-npo .wd-npo-line--free dd {
	color: var( --npo-ok );
	font-weight: 700;
}

/* An inclusive tax is already inside the total, so it is a breakdown of money
   the shopper has accounted for rather than another thing to pay. */
.wd-npo .wd-npo-line--muted dt,
.wd-npo .wd-npo-line--muted dd {
	color: var( --npo-faint );
	font-weight: 500;
}

.wd-npo .wd-npo-line--total {
	margin-top: 8px;
	padding: 12px 14px;
	border-radius: 11px;
	background: #f6f4ff;
	font-size: 15px;
}

.wd-npo .wd-npo-line--total dt {
	font-weight: 800;
	color: var( --npo-ink );
}

.wd-npo .wd-npo-line--total dd {
	font-size: 18px;
	font-weight: 800;
	color: var( --npo-accent, #7239ea );
}

.wd-npo .wd-npo-line--total dd .woocommerce-Price-amount {
	color: inherit;
}

/* ── Address ───────────────────────────────────────────────────────── */

.wd-npo .wd-npo-addr-name {
	font-size: 14px;
	font-weight: 700;
	color: var( --npo-ink );
}

.wd-npo .wd-npo-addr-lines {
	margin-top: 3px;
	font-size: 13.5px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.55;
	color: var( --npo-muted );
}

/* WooCommerce returns the address as a formatted block; Blocksy italicises
   the <address> element it sometimes lands in. */
.wd-npo .wd-npo-addr-lines address {
	margin: 0 !important;
	font-style: normal !important;
	line-height: inherit !important;
}

.wd-npo ul.wd-npo-addr-contact {
	margin-top: 11px !important;
	padding-top: 11px !important;
	border-top: 1px solid var( --npo-line );
}

.wd-npo ul.wd-npo-addr-contact li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
	color: var( --npo-faint );
	/* Long guest email addresses have no spaces to break on and would
	   otherwise push the card wider than its grid column. */
	min-width: 0;
}

.wd-npo .wd-npo-addr-contact svg {
	flex: 0 0 auto;
}

.wd-npo .wd-npo-addr-contact a {
	font-size: 13px;
	font-weight: 600;
	color: var( --npo-muted ) !important;
	text-decoration: none !important;
	overflow-wrap: anywhere;
}

.wd-npo .wd-npo-addr-contact a:hover {
	color: var( --npo-accent, #7239ea ) !important;
}

/* Shown only on an order that carries no email address, and only while it is
   still editable - see Woo_Dash_Checkout_Postorder::address_view_html(). */
.wd-npo .wd-npo-addmail {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var( --npo-line );
}

.wd-npo .wd-npo-addmail-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 13px !important;
	border: 1px dashed #cbb8f7 !important;
	border-radius: 9px !important;
	background: #faf8ff !important;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	color: var( --npo-accent, #7239ea ) !important;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.wd-npo .wd-npo-addmail-btn:hover {
	background: #f2ecff !important;
	border-color: #b39cf3 !important;
}

.wd-npo .wd-npo-addmail-note {
	margin-top: 7px !important;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
	color: var( --npo-faint );
}

/* ── Help ──────────────────────────────────────────────────────────── */

.wd-npo .wd-npo-help-text {
	margin-top: 6px !important;
	font-size: 13px;
	font-weight: 500;
	color: var( --npo-muted );
}

.wd-npo .wd-npo-help-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: var( --npo-accent, #7239ea ) !important;
	text-decoration: none !important;
	overflow-wrap: anywhere;
}

.wd-npo .wd-npo-help-link:hover {
	text-decoration: underline !important;
}

/* ══════════════════════════════════════════════════════════════════════
   TIMELINE

   A vertical list, top to bottom, with every other step nudged 36px to the
   right so the first and third line up under each other and the middle one
   steps out - the shape in the reference this card is modelled on. Each step
   is a dot plus a tinted pill carrying the label, the date and a one-line
   explanation, and a short curved elbow joins one dot to the next.

   It replaced a three-across horizontal row, which gave each step a third of
   the card's width: "2 October / ESTIMATED" under a one-word label kept
   wrapping to three lines on a phone. As a column every step gets most of the
   width, and it needs no breakpoint of its own.

   The connector is an inline <svg> with preserveAspectRatio="none" and
   vector-effect="non-scaling-stroke", which is what lets the CURVE stretch to
   whatever height the pill above it ends up at without the stroke and the
   dashes stretching with it. The same path is mirrored with scaleX(-1) for
   the legs that come back the other way, so there is one path in the markup
   rather than two.
   ══════════════════════════════════════════════════════════════════════ */

.wd-npo .wd-npo-card--track {
	margin-top: 14px;
}

/* Capped and centred, because this card is full width. The indent-and-return
   rhythm reads at roughly a phone's width; stretched across a 1040px desktop
   the pills become long thin bands with an enormous gap before the tag. */
.wd-npo ol.wd-npo-track {
	/* The vertical gap between one step and the next. A variable because the
	   connector's height is derived from it (see .wd-npo-track-link) and the
	   two must not be changed independently. */
	--track-gap: 36px;

	/* How far the connector tucks under the dots at each end. See the
	   dash-phase note on .wd-npo-track-link. */
	--track-overlap: 5px;

	/* The gap between a step's own parts - rail, dot, card. A variable
	   because the connector has to add it back: the rail stops one gap short
	   of the dot it is aiming at, so `width: 100%` of the rail leaves the
	   line hanging exactly this far from the dot's centre. */
	--track-inner-gap: 14px;

	max-width: 520px;
	margin: 0 auto !important;
	padding: 2px 0 0 !important;
}

.wd-npo li.wd-npo-track-step {
	position: relative;
	display: flex;
	/* Centred against the pill, so the dot sits on the box's midline rather
	   than level with its first line of text. */
	align-items: center;
	gap: var( --track-inner-gap );
	/* MARGIN, not padding, and this is load-bearing: an absolutely positioned
	   child's percentage height resolves against its containing block's
	   PADDING box. With the gap as padding, the connector's `100%` silently
	   included that gap and every offset below would have to subtract it
	   again. As a margin, `100%` is the pill's own height - which is what the
	   connector's geometry is actually expressed in terms of. */
	margin-bottom: var( --track-gap );
}

/* The rail: the empty run to the left of a nudged-in step's dot.
 *
 * It does two jobs at once, and the second is the reason it exists. As a
 * `flex: 1 1 auto` item it absorbs every spare pixel, which pushes the dot AND
 * its card to the right edge together - the icon travels with its own card
 * rather than being left behind at a fixed indent. And because flexbox has
 * measured that spare space, the rail's width IS the horizontal distance the
 * connectors have to cover, so they can simply be `width: 100%` of it. No
 * script, nothing to recompute on resize, and it stays correct as the card
 * grows or shrinks with its text.
 *
 * min-width: 0 so a wide card can push the rail down to nothing rather than
 * forcing the row wider than the track. */
.wd-npo .wd-npo-track-rail {
	flex: 1 1 auto;
	min-width: 0;
	/* Full height of the step, so the connectors' percentage offsets resolve
	   against the row rather than against a shrink-wrapped box. */
	align-self: stretch;
	position: relative;
}

.wd-npo li.wd-npo-track-step.is-last {
	margin-bottom: 0;
}

/* ── Dots ──────────────────────────────────────────────────────────── */

.wd-npo .wd-npo-track-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #fff;
	color: var( --npo-faint );
	line-height: 0;
	box-shadow: 0 2px 8px rgba( 17, 24, 39, .1 );
	/* Painted above the connector, which deliberately runs a few pixels INTO
	   each dot - see --track-overlap. Without this the absolutely positioned
	   connector would sit on top of the dot instead of under it, since a
	   positioned element paints above an unpositioned sibling whatever the
	   source order. */
	position: relative;
	z-index: 1;
}

/* A step that has actually happened: filled, with a soft halo. The halo is a
   spread shadow rather than a second element, so it costs no markup. */
.wd-npo .wd-npo-track-step--done .wd-npo-track-dot {
	background: linear-gradient( 135deg, var( --npo-accent, #7239ea ), var( --npo-cta-to, #5b21b6 ) );
	color: #fff;
	box-shadow: 0 0 0 6px rgba( 114, 57, 234, .12 ), 0 4px 12px rgba( 91, 33, 182, .28 );
}

/* The step the order is heading into next. White like the upcoming ones, but
   the icon carries the accent - the difference between "next" and "later". */
.wd-npo .wd-npo-track-step--estimated .wd-npo-track-dot {
	color: var( --npo-accent, #7239ea );
}

/* The icons come from WCO_Order_Timeline::icon_svg(), which is shared with
   the order page and the popup and carries its own width/height attributes.
   Sized here instead of there, so this page can run bigger without changing
   how those two look. */
.wd-npo .wd-npo-track-dot svg {
	width: 23px;
	height: 23px;
}

.wd-npo .wd-npo-track-step--done .wd-npo-track-dot svg {
	width: 21px;
	height: 21px;
}

/* ── Pills ─────────────────────────────────────────────────────────── */

/* Shrink-wrapped, not stretched: the tint is there to frame the step's text,
   and a band running to the card's right edge framed mostly empty space -
   worse on a desktop, where the card is at its widest and "Ordered / 28
   September" left two thirds of the pill blank.
 *
 * `flex: 0 1 auto` is the whole trick - it sizes to content but stays
 * shrinkable, so a long label still wraps inside the card instead of pushing
 * the timeline wider than it. max-width keeps that promise when the content
 * genuinely cannot shrink (an unbroken word), and min-width: 0 lets a flex
 * item shrink below its content's intrinsic width at all, which it refuses to
 * do by default. */
.wd-npo .wd-npo-track-pill {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	padding: 11px 14px;
	border-radius: 13px;
	background: #f7f5ff;
}

/* The step in progress gets the stronger tint, so the eye lands on where the
   order actually is rather than on the first row. */
.wd-npo .wd-npo-track-step--done .wd-npo-track-pill,
.wd-npo .wd-npo-track-step.is-live .wd-npo-track-pill {
	background: #f1ecff;
}

.wd-npo .wd-npo-track-step--upcoming .wd-npo-track-pill {
	background: #f7f8fa;
}

/* Label then tag, on one line inside the pill. Now that the pill shrink-wraps
   its content, this row is what decides the pill's width, so the gap here is
   the visible separation between the two rather than something
   space-between resolves - there is no slack left to distribute. */
.wd-npo .wd-npo-track-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.wd-npo .wd-npo-track-label {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	color: var( --npo-ink );
}

.wd-npo .wd-npo-track-step--upcoming .wd-npo-track-label {
	color: var( --npo-muted );
}

.wd-npo .wd-npo-track-date {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 600;
	color: var( --npo-muted );
}

.wd-npo .wd-npo-track-tag {
	flex: 0 0 auto;
	padding: 3px 8px;
	border-radius: 6px;
	background: #fff;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var( --npo-accent, #7239ea );
}

/* ── Connectors ────────────────────────────────────────────────────── */

/* Spans exactly the 36px a nudged step is offset by, starting on one dot's
   centre and ending on the next one's.
 *
 * Sized with an explicit width/height rather than left+right+top+bottom
 * insets. An <svg> is a REPLACED element: with `width: auto` it takes its
 * intrinsic size (the 300x150 default) instead of the size its insets imply,
 * the box is then over-constrained, and the connector renders three times too
 * tall - which it did, trailing the curve out of the card and across the
 * summary below it.
 *
 * Both offsets are derived rather than fixed, because the dot is centred on
 * the pill and so its position depends on how tall that pill is. `100%` is
 * the pill's own height (see the margin note on the step), and half the dot
 * is 23px, so:
 *
 *   dot bottom   = 50% + 23px
 *   to step end  = 50% - 23px
 *   the gap      = --track-gap
 *   to next dot  = 50% - 23px   (the next pill is the same height)
 *
 * which totals 100% - 46px + --track-gap. Hard-coding the height instead left
 * the curve hanging short of the next dot by however much taller than the dot
 * a pill happened to be. The one assumption is that consecutive pills are the
 * same height, which holds because every step carries the same two lines; a
 * label long enough to wrap would leave the curve a few pixels off, on a
 * decorative connector. */
/* The --track-overlap at each end is what makes the line meet the dots. The
   stroke is DASHED, and a dash pattern lands wherever the path length puts
   it: run the path exactly from one dot's edge to the next and it will, at
   most lengths, both begin and end on a GAP - so the line appears to float,
   detached from the circle at one or both ends, and by a different amount on
   every order depending on how tall that step's pill happens to be.
   Overshooting into the dots hides the phase entirely: wherever the dashes
   fall, the ends are underneath a circle that paints over them. */
/*
 * Both legs live in the rail and span it exactly.
 *
 * Horizontally: `left: 23px` starts the line half a dot in from the rail's
 * left, which is the flush neighbour's dot centre. The width is the rail plus
 * one inner gap, because the rail ends a gap short of the dot it is aiming
 * at - without adding it back the line stopped 14px clear of the middle dot,
 * which is precisely the "string not attached" gap. One expression covers
 * every card width, because flexbox sized the rail in the first place.
 *
 * Vertically, `100%` and `50%` are the step's own height (the rail is
 * stretched to it), so:
 *   this dot's top    = 50% - 23px      this dot's bottom = 50% + 23px
 *   the step above ends --track-gap before this one starts, and its dot sits
 *   the same 23px either side of ITS midline
 * which makes each leg 100% - 46px + --track-gap tall. Deriving it rather
 * than fixing it is what keeps the line joined when a card is taller than a
 * dot. The one assumption is that neighbouring steps are the same height,
 * which holds because every step carries the same two lines.
 *
 * `width`/`height` are set explicitly rather than with left+right or
 * top+bottom insets: an <svg> is a REPLACED element, so with `width: auto` it
 * takes its intrinsic 300x150 default instead of the size its insets imply,
 * the box is over-constrained, and the connector renders three times too tall
 * - which it did, trailing the curve out of the card and across the summary
 * below it.
 */
.wd-npo .wd-npo-track-link {
	position: absolute;
	display: block;
	left: 23px;
	width: calc( 100% + var( --track-inner-gap ) );
	height: calc( 100% - 46px + var( --track-gap ) + ( var( --track-overlap ) * 2 ) );
	overflow: visible;
}

/* Arriving from the step above: starts at that step's dot and ends at this
   one's, so it reaches up out of this step by the gap plus half a card. */
.wd-npo .wd-npo-track-link--in {
	top: calc( 23px - 50% - var( --track-gap ) - var( --track-overlap ) );
}

/* Leaving for the step below. Same span, but right-to-left, so the one path
   is mirrored rather than a second one being drawn. */
.wd-npo .wd-npo-track-link--out {
	top: calc( 50% + 23px - var( --track-overlap ) );
	transform: scaleX( -1 );
}

.wd-npo .wd-npo-track-link path {
	stroke: #d1d4dd;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 5 7;
}

/* Solid and coloured for a leg the order has already travelled. */
.wd-npo .wd-npo-track-link--done path {
	stroke: var( --npo-accent, #7239ea );
	stroke-dasharray: none;
}

/* The step the order is actually sitting on. One keyframe, on one element. */
.wd-npo .wd-npo-track-step.is-live .wd-npo-track-dot {
	animation: wd-npo-pulse 2s ease-out infinite;
}

@keyframes wd-npo-pulse {
	0%   { box-shadow: 0 2px 8px rgba( 17, 24, 39, .1 ), 0 0 0 0 rgba( 114, 57, 234, .3 ); }
	70%  { box-shadow: 0 2px 8px rgba( 17, 24, 39, .1 ), 0 0 0 10px rgba( 114, 57, 234, 0 ); }
	100% { box-shadow: 0 2px 8px rgba( 17, 24, 39, .1 ), 0 0 0 0 rgba( 114, 57, 234, 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.wd-npo .wd-npo-track-step.is-live .wd-npo-track-dot {
		animation: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   TRUST BADGES + CTAs
   ══════════════════════════════════════════════════════════════════════ */

.wd-npo ul.wd-npo-trust {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 10px;
	margin-top: 14px !important;
}

@media ( min-width: 700px ) {
	.wd-npo ul.wd-npo-trust {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

.wd-npo li.wd-npo-trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 12px;
	border: 1px solid var( --npo-line );
	border-radius: 11px;
	background: #fafbfc;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var( --npo-muted );
}

.wd-npo .wd-npo-trust-item svg {
	flex: 0 0 auto;
}

.wd-npo .wd-npo-cta {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 15px 20px;
	border-radius: var( --npo-radius, 14px );
	background: linear-gradient( 135deg, var( --npo-cta-from, #7239ea ), var( --npo-cta-to, #5b21b6 ) );
	color: var( --npo-cta-text, #fff ) !important;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba( 91, 33, 182, .18 );
	transition: filter .15s ease, box-shadow .15s ease;
}

.wd-npo .wd-npo-cta:hover {
	filter: brightness( 1.06 );
	box-shadow: 0 10px 24px rgba( 91, 33, 182, .24 );
}

/* WooCommerce's own "Thank you. Your order has been received." paragraph is
   printed by the page ABOVE this template on some themes; the screen states
   its own status, so a second, differently-worded one is just noise. */
.wd-npo-thankyou .woocommerce-notice--success:not( .wd-npo-hero-msg ) {
	display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   ADDRESS EDITOR

   The markup and every behaviour here belong to the Order View module -
   WCO_Order_View::address_form_html() renders it and order-view.js drives it,
   so the phone rule, the pincode autofill, the dirty tracking and the
   client-side validation are the same code the order page runs. This section
   is only its appearance on THIS page. (There is no separate stylesheet for the
   order page any more: every post-order screen shares this file, so the form is
   styled once, here, for all of them.)
   ══════════════════════════════════════════════════════════════════════ */

/* ── The dialog ────────────────────────────────────────────────────── */

.wd-npo .wd-npo-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.wd-npo .wd-npo-modal[hidden] {
	display: none;
}

/* Scroll lock. The dialog scrolls internally, so letting the page behind it
   scroll too means a shopper dragging down the form drifts the page under it
   instead - the classic scroll-chaining trap on a phone. */
body.wd-npo-modal-open {
	overflow: hidden;
}

.wd-npo .wd-npo-modal-veil {
	position: absolute;
	inset: 0;
	background: rgba( 17, 24, 39, .45 );
}

.wd-npo .wd-npo-modal-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 460px;
	/* Never taller than the viewport; the body scrolls instead, so the Save
	   button cannot end up below the fold on a short screen. */
	max-height: calc( 100vh - 32px );
	max-height: calc( 100dvh - 32px );
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 24px 60px rgba( 17, 24, 39, .3 );
	overflow: hidden;
}

.wd-npo .wd-npo-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 0 0 auto;
	padding: 16px 18px;
	border-bottom: 1px solid var( --npo-line );
}

.wd-npo .wd-npo-modal-title {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	color: var( --npo-ink );
}

.wd-npo .wd-npo-modal-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0 !important;
	border: none !important;
	border-radius: 9px !important;
	background: #f3f4f7 !important;
	color: var( --npo-muted ) !important;
	line-height: 0 !important;
	cursor: pointer;
}

.wd-npo .wd-npo-modal-x:hover {
	background: #e9eaef !important;
	color: var( --npo-ink ) !important;
}

.wd-npo .wd-npo-modal-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 16px 18px 18px;
	-webkit-overflow-scrolling: touch;
}

@media ( max-width: 520px ) {
	/* Still a card on a phone, not a full-bleed sheet. The veil around it is
	   what says "this is a dialog over your order" - edge to edge it reads as
	   a new page, and the way back becomes less obvious than tapping beside
	   it. Just a tighter gutter and a slightly larger card. */
	.wd-npo .wd-npo-modal {
		padding: 12px;
	}

	.wd-npo .wd-npo-modal-card {
		max-height: calc( 100vh - 24px );
		max-height: calc( 100dvh - 24px );
		border-radius: 14px;
	}

	.wd-npo .wd-npo-modal-head {
		padding: 13px 15px;
	}

	.wd-npo .wd-npo-modal-body {
		padding: 14px 15px 16px;
	}
}

/* ── The form inside it ────────────────────────────────────────────── */

/* No top border or margin any more: the dialog's own header is the divider,
   and the form is the only thing in the body. */
.wd-npo .wov-address-form[hidden] {
	display: none;
}

/* The same field shape as the native checkout and the Buy Now popup: leading
   icon, placeholder at rest, and a small caption that floats above the value
   once there is one. The shopper typed this address minutes ago in a form that
   looked exactly like this. */
.wd-npo .wov-field {
	position: relative;
	display: block;
	margin-bottom: 10px;
}

.wd-npo .wov-field input,
.wd-npo .wov-field select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 50px;
	/* Padded for the floated caption by default; the empty-and-unfocused rule
	   below re-centres the placeholder when there is no caption showing. */
	padding: 20px 12px 6px 40px !important;
	border: 1px solid #dcdfe6 !important;
	border-radius: 10px !important;
	background: #fff !important;
	/* 16px floor on touch: mobile Safari zooms the page when a focused input
	   is smaller, and never zooms back out. Same rule the popup applies. */
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	color: var( --npo-ink ) !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease, padding .12s ease;
}

@media ( hover: none ) and ( pointer: coarse ) {
	.wd-npo .wov-field input,
	.wd-npo .wov-field select {
		font-size: 16px;
	}
}

/* Nothing typed and not focused: no caption to make room for, so the
   placeholder sits centred. :placeholder-shown is what makes the float work
   with no JavaScript - the popup toggles a class from buy-now.js instead. */
.wd-npo .wov-field input:placeholder-shown:not( :focus ) {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

.wd-npo .wov-field input:focus,
.wd-npo .wov-field select:focus {
	outline: none;
	border-color: var( --npo-accent, #7239ea ) !important;
	box-shadow: 0 0 0 3px rgba( 114, 57, 234, .12 ) !important;
}

.wd-npo .wov-field-icon {
	position: absolute;
	left: 13px;
	top: 25px;
	transform: translateY( -50% );
	color: #9aa0a6;
	pointer-events: none;
}

.wd-npo .wov-field input:focus ~ .wov-field-icon,
.wd-npo .wov-field select:focus ~ .wov-field-icon {
	color: var( --npo-accent, #7239ea );
}

/* The caption. It follows its input in the source so this rule can react to
   :placeholder-shown on a preceding sibling; being absolutely positioned, the
   visual order is unaffected. */
.wd-npo .wov-float-label {
	position: absolute;
	left: 40px;
	top: 6px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	color: #9aa0a6;
	opacity: 1;
	pointer-events: none;
	transition: opacity .12s ease-out;
}

.wd-npo .wov-field input:placeholder-shown:not( :focus ) ~ .wov-float-label {
	opacity: 0;
}

/* A <select> has no :placeholder-shown, and its chosen value already reads as
   the field's own label - so it opts out of the caption entirely and keeps the
   resting padding, exactly as State does in the popup and the checkout. */
.wd-npo .wov-no-float-label .wov-float-label {
	display: none;
}

.wd-npo .wov-field select {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	/* appearance:none so the select's box model matches the text inputs beside
	   it and the icon centres against both identically; the chevron is
	   re-added because removing the appearance removes it too. */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" ) !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 16px !important;
	padding-right: 34px !important;
}

/* Two fields side by side on anything wider than a small phone; stacked
   below that, where 50% of 343px leaves a pincode field too narrow to show
   six digits and its label. */
.wd-npo .wov-field-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 0 10px;
}

@media ( min-width: 400px ) {
	.wd-npo .wov-field-row {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}
}

.wd-npo .wov-field-error,
.wd-npo .wov-pincode-note {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.35;
	color: #b91c1c;
}

.wd-npo .wov-pincode-note {
	color: var( --npo-faint );
	font-weight: 500;
}

.wd-npo .wov-field-invalid input,
.wd-npo .wov-field-invalid select {
	border-color: #ef4444 !important;
}

.wd-npo .wov-address-form-actions {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-top: 4px;
}

/*
 * Both buttons are pinned to the same explicit height rather than left to
 * match by padding.
 *
 * As flex siblings they should already stretch to equal height, so one of them
 * being taller means the theme is giving it an explicit `height` - which opts
 * that item out of stretching, and which of the two it hits depends on the
 * theme's own selectors (Blocksy styles `button[type="submit"]` separately from
 * a plain button). Fixing the symptom by nudging padding would only hold until
 * the next theme update. Setting the box height here, centring the label with
 * inline-flex and neutralising vertical padding makes the two identical
 * whatever the theme does.
 */
.wd-npo .wov-address-save-btn,
.wd-npo .wov-address-cancel-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 50px !important;
	min-height: 50px !important;
	max-height: 50px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: 1.2 !important;
	box-sizing: border-box;
}

.wd-npo .wov-address-save-btn {
	flex: 1 1 auto;
	padding-left: 18px !important;
	padding-right: 18px !important;
	border: none !important;
	border-radius: var( --npo-radius, 14px ) !important;
	background: linear-gradient( 135deg, var( --npo-cta-from, #7239ea ), var( --npo-cta-to, #5b21b6 ) ) !important;
	color: var( --npo-cta-text, #fff ) !important;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: filter .15s ease, opacity .15s ease;
}

.wd-npo .wov-address-save-btn:hover:not( [disabled] ) {
	filter: brightness( 1.06 );
}

/* order-view.js disables Save until something actually changes, so this state
   is the form's normal resting appearance, not an error. */
.wd-npo .wov-address-save-btn[disabled] {
	opacity: .5;
	cursor: default;
}

.wd-npo .wov-address-cancel-btn {
	flex: 0 0 auto;
	padding-left: 16px !important;
	padding-right: 16px !important;
	border: 1px solid var( --npo-line ) !important;
	border-radius: var( --npo-radius, 14px ) !important;
	background: #fff !important;
	color: var( --npo-muted ) !important;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.wd-npo .wov-address-cancel-btn:hover {
	background: #f7f8fa !important;
	color: var( --npo-ink ) !important;
}

.wd-npo .wov-address-form-msg {
	margin-top: 10px !important;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --npo-muted );
}

.wd-npo .wov-address-form-msg--error {
	color: #b91c1c;
}

.wd-npo .wov-address-form-msg[hidden] {
	display: none;
}

/* The save confirmation. order-view.js appends this to <body>, so it is
   styled from the body class rather than from inside the shell. Fixed to the
   bottom on a phone and the bottom-right on a desktop, because the form is
   closing underneath it at that moment and an inline message would vanish
   with it. */
.wd-npo .wov-toast {
	position: fixed;
	z-index: 99999;
	left: 16px;
	right: 16px;
	bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 16px;
	border-radius: 12px;
	background: #10241a;
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .22 );
	opacity: 0;
	transform: translateY( 12px );
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
}

.wd-npo .wov-toast svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	color: #4ade80;
}

.wd-npo .wov-toast--in {
	opacity: 1;
	transform: translateY( 0 );
}

@media ( min-width: 700px ) {
	.wd-npo .wov-toast {
		left: auto;
		right: 24px;
		bottom: 24px;
		justify-content: flex-start;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wd-npo .wov-toast {
		transition: opacity .22s ease;
		transform: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   NARROW SCREENS
   ══════════════════════════════════════════════════════════════════════ */

@media ( max-width: 600px ) {
	.wd-npo .wd-npo-hero {
		padding: 22px 14px 18px;
		border-radius: 14px;
	}

	.wd-npo .wd-npo-hero-title {
		font-size: 21px;
	}

	.wd-npo .wd-npo-hero-msg,
	.wd-npo .wd-npo-card,
	.wd-npo .wd-npo-strip {
		font-size: 13.5px;
	}

	.wd-npo .wd-npo-card {
		padding: 14px;
	}

	/* The aside under the amount. At this width it wraps beneath the figure
	   and pushes the strip to three lines for a sentence nobody needed. */
	.wd-npo .wd-npo-strip-note {
		display: none;
	}

	.wd-npo .wd-npo-item-img {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
	}

	.wd-npo .wd-npo-line--total dd {
		font-size: 17px;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   ORDER-PAY PAGE

   Reached only by a prepaid order nobody has paid for - a fresh redirect out
   of the checkout, or a shopper returning to an abandoned payment.

   Every selector below was read off the LIVE page, because this page is not
   WooCommerce's stock form-pay.php: the gateway (Razorpay) owns the whole
   body and renders a bare `ul.order_details`, an unclassed `<p>` message, and
   its own `#btn-razorpay` / `#btn-razorpay-cancel`. There is no `#place_order`,
   no `.button.alt` and no `a.cancel` here - an earlier version of this file
   styled exactly those three and consequently did nothing at all.
   ══════════════════════════════════════════════════════════════════════ */

/* The gateway's own order/date/total/method list. Everything in it is already
   in the designed block this module renders above, so it would be the same
   four facts twice. */
.wd-npo-pay ul.order_details {
	display: none !important;
}

/* The gateway's loose paragraphs. This styles TEXT only, which is what lets
   one rule cover both of them: the message paragraph gets the muted treatment,
   and the paragraph that wraps the two buttons has no text of its own, so the
   same rule is invisible there. That is deliberate - neither paragraph carries
   a class, so they cannot be told apart in CSS, and `:has()` is off the table
   in this file (it invalidates its whole rule on older mobile Safari). */
.wd-npo-pay .woocommerce > p {
	max-width: 1040px;
	margin: 0 auto 12px;
	text-align: center;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.5;
	color: var( --npo-muted );
}

/* Razorpay's "Please wait while we are processing your payment." - it manages
   its own visibility, so this only restyles it and never touches `display`. */
.wd-npo-pay #msg-razorpay-success {
	padding: 14px 16px !important;
	border: 1px solid var( --npo-wait-line ) !important;
	border-radius: var( --npo-radius, 14px ) !important;
	background: var( --npo-wait-soft ) !important;
	color: var( --npo-wait ) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

.wd-npo-pay #msg-razorpay-success::before {
	content: none !important;
}

/* The action that completes the purchase, given the checkout's own Place Order
   treatment so it looks the same in both places. */
.wd-npo-pay #btn-razorpay,
.wd-npo .wd-npo-pay-btn {
	display: block !important;
	width: 100%;
	max-width: 1040px;
	margin: 0 auto 10px !important;
	padding: 17px 20px !important;
	border: none !important;
	border-radius: var( --npo-radius, 14px ) !important;
	background: linear-gradient( 135deg, var( --npo-cta-from, #7239ea ), var( --npo-cta-to, #5b21b6 ) ) !important;
	color: var( --npo-cta-text, #fff ) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	height: auto !important;
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba( 91, 33, 182, .22 );
	transition: filter .15s ease, box-shadow .15s ease;
}

.wd-npo-pay #btn-razorpay:hover,
.wd-npo .wd-npo-pay-btn:hover {
	filter: brightness( 1.06 );
	box-shadow: 0 10px 24px rgba( 91, 33, 182, .28 );
}

/* Cancelling abandons a real order, so it is deliberately quiet - a plain text
   control, never a second button competing with Pay. */
.wd-npo-pay #btn-razorpay-cancel,
.wd-npo .wd-npo-pay-cancel {
	display: block !important;
	width: auto;
	margin: 0 auto !important;
	padding: 6px 12px !important;
	border: none !important;
	background: none !important;
	color: var( --npo-muted ) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-decoration: underline;
	cursor: pointer;
	box-shadow: none !important;
}

.wd-npo-pay #btn-razorpay-cancel:hover,
.wd-npo .wd-npo-pay-cancel:hover {
	color: #b91c1c !important;
}

/* The designed block above the buttons is the page's own card, so it should
   not also sit inside a second bordered box on this page. */
.wd-npo-pay .wd-npo-pay-screen {
	margin-bottom: 18px;
}

/* ══════════════════════════════════════════════════════════════════════
   TRACKING CARD

   Full width under the status timeline. Reuses the summary card's label/value
   lines; only the courier button and the copy control beside the tracking
   number are its own.
   ══════════════════════════════════════════════════════════════════════ */

.wd-npo .wd-npo-card--tracking {
	margin-top: 14px;
}

.wd-npo .wd-npo-trackinfo .wd-npo-line dd {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.wd-npo .wd-npo-track-btn {
	display: block;
	margin-top: 14px;
	padding: 12px 18px;
	border-radius: 11px;
	background: var( --npo-accent, #7239ea );
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: #fff !important;
	text-decoration: none !important;
}

.wd-npo .wd-npo-track-btn:hover {
	filter: brightness( .93 );
}

/* ══════════════════════════════════════════════════════════════════════
   VIEW-ORDER PAGE

   The /view-order/ page renders the order-received screen inside the theme's own
   header and footer. `wd-npo` is on this wrapper (not <body>, as it is on the
   order-received page), which scopes everything above; the wrapper only gives
   the screen the breathing room the theme's content area does not.
   ══════════════════════════════════════════════════════════════════════ */

.wd-npo.wd-npo-view-page {
	padding: 24px 16px 56px;
}

/* ══════════════════════════════════════════════════════════════════════
   PAY-NOW PAGE

   The /pay-now/ page is the Complete-your-payment screen. The Pay Now and Cancel
   controls above are shared with the order-pay page, where the gateway plugin
   supplies them as #btn-razorpay / #btn-razorpay-cancel; here the store does, as
   .wd-npo-pay-btn / .wd-npo-pay-cancel, and they look identical.
   ══════════════════════════════════════════════════════════════════════ */

.wd-npo.wd-npo-pay-page {
	padding: 24px 16px 56px;
}

.wd-npo .wd-npo-pay-actions {
	margin-bottom: 18px;
}

/* Status line under the buttons: "Starting payment…", a cancelled attempt, an
   error. Hidden until there is something to say. */
.wd-npo .wd-npo-pay-msg {
	margin-top: 12px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	color: var( --npo-muted );
}

.wd-npo .wd-npo-pay-msg[hidden] {
	display: none;
}

.wd-npo .wd-npo-pay-msg--error {
	color: #b91c1c;
	font-weight: 600;
}

.wd-npo .wd-npo-pay-btn:disabled {
	opacity: .7;
	cursor: wait;
	filter: none;
}

/* The Cancel control is a link on this page, not a button: shrink it to its text
   so it centres instead of stretching the width of the screen. */
.wd-npo .wd-npo-pay-cancel {
	width: fit-content;
	text-align: center;
}

/* With the gateway's "please click the button below" sentence removed at the
   source (Woo_Dash_Checkout_Postorder::drop_gateway_pay_line), its paragraph is
   left empty; collapse it so it does not add a stray gap under the Amount due bar.
   `:empty` never matches the paragraph that holds the buttons. */
.wd-npo-pay .woocommerce > p:empty {
	display: none;
}