/**
 * Native checkout (/checkout/) - phase 1: product box + trust badges.
 *
 * Everything here is namespaced under .wd-nchk-* so it can never bleed into
 * the theme's own checkout styling, and every colour/size comes from the
 * --nchk-* custom properties printed on .wd-nchk-top by
 * Woo_Dash_Checkout_Frontend::get_top_sections_html(), so the settings panel
 * drives the look without a single inline style per element.
 */

.wd-nchk-top {
	margin: 0 0 22px;
}

/* ─────────────────────────────────────────────── Product cards */

.wd-nchk-products {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 14px;
}

.wd-nchk-card {
	border: 1px solid var( --nchk-card-border, #e5e7eb );
	border-radius: 10px;
	padding: 12px;
	background: #fff;
}

.wd-nchk-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.wd-nchk-img {
	width: var( --nchk-img-size, 80px );
	height: var( --nchk-img-size, 80px );
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
	background: #f3f4f6;
	display: block;
}

.wd-nchk-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var( --nchk-title-gap, 6px );
}

.wd-nchk-name {
	font-size: var( --nchk-title-size, 15px );
	font-weight: 600;
	line-height: 1.3;
	color: #111827;
}

.wd-nchk-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.wd-nchk-price,
.wd-nchk-price .amount,
.wd-nchk-price bdi {
	font-size: var( --nchk-price-size, 16px );
	font-weight: 700;
	color: #1a1a1a;
	white-space: nowrap;
}

/* The theme's own checkout typography frequently sets a small-print size on
   .amount inside checkout; this keeps the card's price on the size the
   merchant actually configured. */
.wd-nchk-price small {
	font-size: 0.75em;
	font-weight: 500;
	color: #6b7280;
}

/* ── The chip: "QTY 1" for a simple line, the picked variant for a variable
      one. Rendered as a <button> only when it actually opens the picker, so a
      simple product's chip has nothing to click - matching the popup, where
      tapping "QTY 1" is deliberately inert. */
.wd-nchk-chip {
	flex-shrink: 0;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	background: var( --nchk-qty-bg, #f3f4f6 );
	color: var( --nchk-qty-text, #111827 );
	border: 1px solid rgba( 0, 0, 0, 0.07 );
	font-size: var( --nchk-qty-size, 12px );
	font-weight: 600;
	line-height: 1.4;
	font-family: inherit;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wd-nchk-chip::before {
	content: '';
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	background-color: currentColor;
	opacity: 0.65;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20.59 13.41-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z'/%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20.59 13.41-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z'/%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
}

button.wd-nchk-chip {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .15s ease, border-color .15s ease;
}

button.wd-nchk-chip:hover,
button.wd-nchk-chip:focus-visible {
	border-color: var( --nchk-accent, #7239ea );
}

/* Caret so the chip visibly reads as "this opens something", and flips when
   the picker below is open. */
button.wd-nchk-chip::after {
	content: '';
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	background-color: currentColor;
	opacity: .7;
	transition: transform .18s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

button.wd-nchk-chip[aria-expanded="true"]::after {
	transform: rotate( 180deg );
}

.wd-nchk-card.wd-nchk-busy {
	opacity: .55;
	pointer-events: none;
}

/* ─────────────────────────── Variant picker (expands out of the card) */

.wd-nchk-picker {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var( --nchk-card-border, #e5e7eb );
	animation: wd-nchk-expand .16s ease;
}

.wd-nchk-picker[hidden] {
	display: none;
}

@keyframes wd-nchk-expand {
	from { opacity: 0; transform: translateY( -4px ); }
	to   { opacity: 1; transform: none; }
}

.wd-nchk-attr + .wd-nchk-attr {
	margin-top: 12px;
}

/* Centred, matching the product page's own variation title - the swatch row
   below it is centred too, so a left-aligned caption over centred buttons read
   as a misalignment rather than a choice. */
.wd-nchk-attr-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #6b7280;
	margin-bottom: 8px;
	text-align: center;
}

/* Swatch list. Deliberately the same class names the product page's swatches
   use (see Woo_Dash_VS_Swatches::render_swatches) and the same look, but
   scoped under .wd-nchk-picker so nothing here can reach the product page and
   nothing there leaks in - the product page's own rules are all prefixed
   `.variations`, which never exists on the checkout. */
.wd-nchk-picker .variable-items-wrapper {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
}

.wd-nchk-picker .variable-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-sizing: border-box;
	position: relative;
	border: 1.5px solid #e5e7eb;
	background: #fff;
	color: #1f2937;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .1s ease;
}

.wd-nchk-picker .variable-item:hover {
	border-color: #9ca3af;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, .06 );
	transform: translateY( -1px );
}

.wd-nchk-picker .variable-item-contents {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
}

/* Colour / image chips: fixed size, from the swatch module's Width/Height. */
.wd-nchk-picker .color-variable-item,
.wd-nchk-picker .image-variable-item {
	width: var( --nchk-swatch-w, 30px );
	height: var( --nchk-swatch-h, 30px );
	padding: 3px;
	flex: 0 0 auto;
}

.wd-nchk-picker .color-variable-item .variable-item-contents,
.wd-nchk-picker .image-variable-item .variable-item-contents {
	width: 100%;
}

.wd-nchk-picker .variable-item-span-color {
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

.wd-nchk-picker .variable-item-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.wd-nchk-picker .color-variable-item.selected,
.wd-nchk-picker .image-variable-item.selected {
	border-color: #111827;
	box-shadow: 0 0 0 2px #111827;
}

.wd-nchk-picker .color-variable-item.selected .variable-item-contents::after,
.wd-nchk-picker .image-variable-item.selected .variable-item-contents::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	color: var( --nchk-tick-color, #ffffff );
	font-size: 14px;
	font-weight: 700;
	text-shadow: 0 0 3px rgba( 0, 0, 0, .7 );
	pointer-events: none;
}

/* Button swatches: 2 per row on phones, 3 from 768px - the same grid the
   product page uses, so a shopper sees the identical control in both places.
   `!important` on the widths only: these class names are shared with the
   product page on purpose (so the swatches look identical), which also means
   a store's Additional CSS rule like `.button-variable-item{width:43%
   !important}` would otherwise reach in here and collapse this grid. */
.wd-nchk-picker .button-variable-item {
	flex: 0 0 auto !important;
	width: calc( 50% - 4px ) !important;
	height: auto;
	padding: 0;
}

@media ( min-width: 768px ) {
	.wd-nchk-picker .button-variable-item {
		width: calc( 33.333% - 5.34px ) !important;
	}
}

.wd-nchk-picker .button-variable-item .variable-item-contents {
	width: 100%;
}

.wd-nchk-picker .variable-item-span-button {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	min-height: 42px;
	box-sizing: border-box;
	padding: 8px 12px;
	font-size: var( --nchk-swatch-font, 14px );
	line-height: 1.25;
	font-weight: 500;
}

.wd-nchk-picker .button-variable-item.selected {
	border-color: #111827;
	color: #111827;
	box-shadow: inset 0 0 0 1px #111827;
}

.wd-nchk-picker .wvs-style-squared .variable-item { border-radius: 6px; }
.wd-nchk-picker .wvs-style-round .variable-item { border-radius: 50%; }
.wd-nchk-picker .wvs-style-round .button-variable-item { border-radius: 27px; }

/* Unavailable combinations - same three presentations the swatch module
   offers (blur + cross / blur / hide), driven by the same saved option. */
.wd-nchk-picker .variable-item.disabled {
	cursor: not-allowed;
	pointer-events: none;
}

.wd-nchk-picker .wdvs-disabled-style-hide .variable-item.disabled { display: none; }

.wd-nchk-picker .wdvs-disabled-style-blur .variable-item.disabled .variable-item-contents,
.wd-nchk-picker .wdvs-disabled-style-blur-cross .variable-item.disabled .variable-item-contents {
	filter: blur( 1.5px );
	opacity: .5;
}

.wd-nchk-picker .wdvs-disabled-style-blur-cross .variable-item.disabled::after {
	content: '✕';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	color: var( --nchk-cross-color, #ff0000 );
	font-size: 18px;
	font-weight: 700;
	text-shadow: 0 0 3px rgba( 255, 255, 255, .6 );
	pointer-events: none;
}

.wd-nchk-picker-msg {
	margin-top: 10px;
	font-size: 12.5px;
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	padding: 8px 10px;
}

.wd-nchk-picker-msg[hidden] { display: none; }

/* ─────────────────────────────────────────────── Trust badges */

.wd-nchk-trust {
	display: flex;
	border: 1px solid var( --nchk-card-border, #e5e7eb );
	border-radius: 10px;
	padding: 12px 4px;
	background: #fff;
}

.wd-nchk-trust-item {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	text-align: center;
	padding: 0 4px;
	position: relative;
	font-size: var( --nchk-trust-size, 12px );
	font-weight: 600;
	color: #333;
	line-height: 1.25;
}

.wd-nchk-trust-item span {
	white-space: nowrap;
}

.wd-nchk-trust-item svg {
	flex-shrink: 0;
}

.wd-nchk-trust-item:not( :last-child )::after {
	content: '';
	position: absolute;
	right: 0;
	top: 10%;
	height: 80%;
	width: 1px;
	background: #ececec;
}

/* ───────────────────── Theme headings this block replaces */

/* "Billing details" (core) / "Billing & Shipping" (Blocksy) - kept in the DOM
   for the document outline, removed visually because the product box + form
   below it now open the page. */
.wd-nchk-hide-billing-title .woocommerce-billing-fields > h3,
.wd-nchk-hide-billing-title .woocommerce-billing-fields > h2,
.wd-nchk-hide-billing-title #customer_details .col-1 > h3:first-child,
.wd-nchk-hide-billing-title #customer_details .col-1 > h2:first-child {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
}

.wd-nchk-hide-shipping-title .woocommerce-shipping-fields > h3,
.wd-nchk-hide-shipping-title .woocommerce-shipping-fields > h2 {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* ─────────────────────────────────────────────── Small screens */

@media ( max-width: 480px ) {
	.wd-nchk-trust {
		padding: 10px 2px;
	}

	.wd-nchk-trust-item {
		font-size: calc( var( --nchk-trust-size, 12px ) - 1px );
		gap: 4px;
	}

	.wd-nchk-bottom {
		gap: 6px;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   ORDER FORM — a replica of the Buy Now popup's form, applied to
   WooCommerce's own checkout fields.

   The popup builds its own markup, so its rules can target
   `.wd-bnp-field > input`. Here the same classes land on WooCommerce's
   `.form-row`, whose input sits one level deeper inside
   `.woocommerce-input-wrapper`, and whose <label> is a sibling before it.
   Every rule below is that same design re-anchored to that structure —
   the numbers (12px padding, 6px radius, 13px text, 19px/7px floated
   padding, icon at 12px/15px, +6px when floated) are copied from
   assets/buy-now-css/buy-now.css unchanged, because matching them by eye
   is exactly how two "identical" forms drift apart.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Grid: reproduces the popup's full-width stack with one 40/60 row ──
   A grid, not the theme's float-based .form-row-first/.form-row-last:
   floats don't apply to grid items, so this cleanly wins over whatever
   width rules the theme has for those classes without an !important war. */
/* Applied to WooCommerce's own field wrappers rather than to a div this
   plugin injects - the fields are rendered by core/theme templates, and
   wrapping them would mean overriding those templates just to add one class. */
.wd-nchk-form .woocommerce-billing-fields__field-wrapper,
.wd-nchk-form .woocommerce-shipping-fields__field-wrapper,
.wd-nchk-form .woocommerce-additional-fields__field-wrapper,
.wd-nchk-form .wd-nchk-form-grid {
	display: grid;
	grid-template-columns: repeat( 10, 1fr );
	column-gap: 10px;
	align-items: start;
}

.wd-nchk-form .woocommerce-billing-fields__field-wrapper > .form-row,
.wd-nchk-form .woocommerce-shipping-fields__field-wrapper > .form-row,
.wd-nchk-form .woocommerce-additional-fields__field-wrapper > .form-row,
.wd-nchk-form .wd-nchk-form-grid > .form-row {
	grid-column: span 10;
	float: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* These MUST carry the same ancestor chain as the `span 10` default above.
   Written as `.wd-nchk-form .wd-col-4` they are two classes against that
   rule's three, so the default won on specificity no matter what order the
   file was in - which is exactly why PIN Code and State kept rendering
   full-width instead of sharing their row. */
.wd-nchk-form .woocommerce-billing-fields__field-wrapper > .wd-col-4,
.wd-nchk-form .woocommerce-shipping-fields__field-wrapper > .wd-col-4,
.wd-nchk-form .wd-nchk-form-grid > .wd-col-4 { grid-column: span 4; }

.wd-nchk-form .woocommerce-billing-fields__field-wrapper > .wd-col-6,
.wd-nchk-form .woocommerce-shipping-fields__field-wrapper > .wd-col-6,
.wd-nchk-form .wd-nchk-form-grid > .wd-col-6 { grid-column: span 6; }

.wd-nchk-form .woocommerce-billing-fields__field-wrapper > .wd-col-10,
.wd-nchk-form .woocommerce-shipping-fields__field-wrapper > .wd-col-10,
.wd-nchk-form .wd-nchk-form-grid > .wd-col-10 { grid-column: span 10; }

/* Fields the settings switch off (Company, Country when the store is
   single-country, Last Name when the Full Name field is merged). Hidden,
   never removed — they still post their value and still validate. */
.wd-nchk .wd-nchk-hidden {
	display: none !important;
}

/* ── The field itself ────────────────────────────────────────────────── */

.wd-nchk .wd-nchk-field {
	position: relative;
	display: block;
	margin: 0 0 12px;
	padding: 0;
	font-size: var( --nchk-input-size, 13px );
	/* checkout.js scrolls a failed field into view with `block: 'start'` -
	   without this, the theme's own sticky header (fixed, on top of the
	   page) covers the top of whatever lands at scrollTop 0, since 'start'
	   only knows the viewport's geometry, not what's actually painted over
	   it. This reserves that header's height as breathing room the browser
	   accounts for automatically. 100px is a safe approximation of Blocksy's
	   sticky mobile header - not pixel-measured against every theme, but a
	   few pixels of extra headroom above a field is a far smaller issue than
	   the oversized gap or the header hiding it entirely. */
	scroll-margin-top: 100px;
}

.wd-nchk .wd-nchk-field .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.wd-nchk .wd-nchk-field input[type="text"],
.wd-nchk .wd-nchk-field input[type="tel"],
.wd-nchk .wd-nchk-field input[type="email"],
.wd-nchk .wd-nchk-field input[type="number"],
.wd-nchk .wd-nchk-field input[type="password"],
.wd-nchk .wd-nchk-field select,
.wd-nchk .wd-nchk-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 12px;
	/* Height is a setting, so the icon/label maths below derives from it
	   rather than assuming the popup's 48px. min-height (not height) so a
	   field can still grow if a theme gives it a larger line-height. */
	min-height: var( --nchk-input-height, 48px );
	border: 1px solid var( --nchk-input-border, #dddddd );
	border-radius: var( --nchk-input-radius, 6px );
	font-size: var( --nchk-input-size, 16px );
	font-family: inherit;
	line-height: 1.4;
	background: #fff;
	color: #1a1a1a;
	box-shadow: none;
	transition: padding .15s ease, border-color .15s ease;
}

.wd-nchk .wd-nchk-field textarea {
	min-height: 96px;
	resize: vertical;
}

.wd-nchk .wd-nchk-field input:focus,
.wd-nchk .wd-nchk-field select:focus,
.wd-nchk .wd-nchk-field textarea:focus {
	outline: none;
	border-color: var( --nchk-accent, #7239ea );
	box-shadow: none;
}

/* Native <select> chrome (its own internal padding/line-height) varies by
   browser and OS, which would land the leading icon a couple of pixels off
   centre against it. appearance:none makes the select's box model behave
   exactly like the text inputs beside it, so one centring number is right
   for both — and the chevron comes back as a background image, since
   appearance:none also removes the native one. */
.wd-nchk .wd-nchk-field select {
	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");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 34px;
}

/* ── Floating label ──────────────────────────────────────────────────────
   Same technique as the popup: the label keeps its natural DOM position and
   is simply invisible at rest (opacity:0) while the input's own placeholder
   carries the resting hint. checkout.js toggles the floated class on VALUE
   change, not focus, so the label always reflects real content. No transform
   math on the label at all, so there is nothing to miscalculate. */
.wd-nchk .wd-nchk-floating > label {
	display: block;
	position: absolute;
	left: 13px;
	top: 5px;
	font-size: var( --nchk-label-size, 11px );
	font-weight: 400;
	line-height: 1.2;
	color: #9aa0a6;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease-out;
	margin: 0;
	padding: 0;
	z-index: 2;
}

.wd-nchk .wd-nchk-floating.wd-nchk-label-floated > label {
	opacity: 1;
}

/* Enough top/bottom asymmetry to give the floated label real breathing room
   above the value rather than sitting on top of it. Only top/bottom are set
   (not the shorthand) so the icon's 38px left gutter is never overwritten. */
.wd-nchk .wd-nchk-floating.wd-nchk-label-floated input,
.wd-nchk .wd-nchk-floating.wd-nchk-label-floated select {
	padding-top: 19px;
	padding-bottom: 7px;
}

/* The State / Country dropdowns opt out entirely: the chosen value already
   reads as the field's own label, so a second caption stacked above it was
   just redundant. Kept at resting padding so the option text stays centred. */
.wd-nchk .wd-nchk-no-float-label > label {
	display: none;
}

.wd-nchk .wd-nchk-no-float-label select {
	padding-top: 12px;
	padding-bottom: 12px;
}

/* The asterisk is hidden, never the `required` flag — the field stays
   genuinely required, this is only the popup's cleaner look. */
.wd-nchk-hide-asterisks .wd-nchk-field .required,
.wd-nchk-hide-asterisks .wd-nchk-field .optional {
	display: none;
}

/* ── Leading icons ───────────────────────────────────────────────────────
   Drawn as a masked ::before on the row rather than injected markup, so
   WooCommerce's field HTML is untouched and a theme that rebuilds that
   markup can't drop them. Fixed-pixel top, deliberately NOT top:50% — a
   percentage resolves against the WHOLE row, which grows the instant
   WooCommerce writes a validation message under the input, and every icon
   would visibly drop toward it. The input's own height is a known constant,
   so a fixed offset stays locked to it in every state. */
.wd-nchk .wd-nchk-has-icon::before {
	content: '';
	position: absolute;
	left: 12px;
	/* (height - icon) / 2, computed from the height setting instead of the
	   popup's hardcoded 15px, so changing the field height keeps the icon
	   centred instead of stranding it near the top. */
	top: calc( ( var( --nchk-input-height, 48px ) - 18px ) / 2 );
	width: 18px;
	height: 18px;
	background-color: #9aa0a6;
	pointer-events: none;
	z-index: 1;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: top .15s ease;
}

/* Once floated the padding turns asymmetric (19px top / 7px bottom), so the
   value's visual centre shifts down and the icon shifts with it — the same
   +6px the popup uses, measured against the rendered text centre rather than
   recomputed from the padding (border-box sizing makes those two different). */
.wd-nchk .wd-nchk-has-icon.wd-nchk-label-floated::before {
	top: calc( ( ( var( --nchk-input-height, 48px ) - 18px ) / 2 ) + 6px );
}

/* Narrow, additive overrides so the icon can never collide with the
   placeholder or the value, whatever order the rules above resolve in. */
.wd-nchk .wd-nchk-has-icon input,
.wd-nchk .wd-nchk-has-icon select {
	padding-left: 38px !important;
}

.wd-nchk .wd-nchk-has-icon > label {
	left: 38px !important;
}

/* The same eight icons the popup draws inline, as mask images. */
.wd-nchk .wd-icon-person::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}

.wd-nchk .wd-icon-phone::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L14 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 4 6a2 2 0 0 1 0-2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L14 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 4 6a2 2 0 0 1 0-2z'/%3E%3C/svg%3E");
}

.wd-nchk .wd-icon-pin::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}

.wd-nchk .wd-icon-note::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M15 3v6h6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M15 3v6h6'/%3E%3C/svg%3E");
}

.wd-nchk .wd-icon-hash::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3 7 21M17 3l-2 18M4 8h17M3 16h17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3 7 21M17 3l-2 18M4 8h17M3 16h17'/%3E%3C/svg%3E");
}

.wd-nchk .wd-icon-map::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 4-6 2v14l6-2 6 2 6-2V4l-6 2-6-2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 4-6 2v14l6-2 6 2 6-2V4l-6 2-6-2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E");
}

.wd-nchk .wd-icon-city::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='7' height='12'/%3E%3Crect x='13' y='4' width='7' height='17'/%3E%3Cpath d='M7 13h1M7 17h1M16 8h1M16 12h1M16 16h1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='7' height='12'/%3E%3Crect x='13' y='4' width='7' height='17'/%3E%3Cpath d='M7 13h1M7 17h1M16 8h1M16 12h1M16 16h1'/%3E%3C/svg%3E");
}

.wd-nchk .wd-icon-mail::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

/* Deliberately no `:has()` rule for the textarea's icon position. `:has()` is
   unsupported on older mobile Safari, and an unsupported selector invalidates
   the WHOLE rule it appears in - the popup already lost an icon-alignment fix
   that way, looking correct on desktop while silently broken on real phones.
   The only textarea here (Order Notes) is rendered without an icon, so there
   is nothing to reposition anyway. */

/* ── Pincode autofill ─────────────────────────────────────────────────────
   Loading spinner / success tick anchored to the PIN Code field's own
   wrapper (already position:relative via .wd-nchk-field), the "couldn't
   verify" note under it, and the "Auto-filled" tag on City - copied
   value-for-value from the Buy Now popup's own pincode-autofill UI
   (.wd-bnp-pincode-status / .wd-bnp-pincode-note / .wd-bnp-autofilled-tag in
   buy-now.css) so both checkouts give the shopper the identical feedback. */
.wd-nchk .wd-nchk-pincode-status {
	position: absolute;
	right: 10px;
	top: calc( ( var( --nchk-input-height, 48px ) - 16px ) / 2 );
	width: 16px;
	height: 16px;
	display: none;
	pointer-events: none;
	z-index: 2;
}

.wd-nchk .wd-nchk-pincode-status.is-loading {
	display: block;
	box-sizing: border-box;
	border: 2px solid #d8dade;
	border-top-color: var( --nchk-accent, #7239ea );
	border-radius: 50%;
	animation: wd-nchk-spin .7s linear infinite;
}

.wd-nchk .wd-nchk-pincode-status.is-success {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #16a34a;
}

.wd-nchk .wd-nchk-pincode-status.is-success svg {
	position: static;
	width: 16px;
	height: 16px;
	display: block;
}

.wd-nchk .wd-nchk-pincode-note {
	display: block;
	color: #8a8f98;
	font-size: 11.5px;
	margin-top: 4px;
	line-height: 1.35;
}

.wd-nchk .wd-nchk-autofilled-tag {
	position: absolute;
	top: calc( ( var( --nchk-input-height, 48px ) - 20px ) / 2 );
	right: 10px;
	height: 20px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #e7f8ee;
	color: #12805a;
	border: 1px solid #bfe9d1;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.35;
	padding: 1.2px 9px 0;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba( 16, 128, 90, 0.12 );
	opacity: 0;
	transform: translateY( 4px );
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
	z-index: 2;
	white-space: nowrap;
}

.wd-nchk .wd-nchk-autofilled-tag.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

/* ── Invalid state ───────────────────────────────────────────────────────
   WooCommerce marks a failed row .woocommerce-invalid-required-field; this
   paints it with the popup's own red border + faint tint instead of leaving
   it looking identical to a valid field. */
.wd-nchk .wd-nchk-field.woocommerce-invalid input,
.wd-nchk .wd-nchk-field.woocommerce-invalid select,
.wd-nchk .wd-nchk-field.woocommerce-invalid textarea {
	border-color: #c0392b !important;
	background-color: #fdf4f3;
}

.wd-nchk .wd-nchk-field.woocommerce-validated input,
.wd-nchk .wd-nchk-field.woocommerce-validated select {
	border-color: #cfd8dc;
}

.wd-nchk-field-shake {
	animation: wd-nchk-field-shake .35s ease-in-out;
}

@keyframes wd-nchk-field-shake {
	20%, 60% { transform: translateX( -4px ); }
	40%, 80% { transform: translateX( 4px ); }
}

/* ── Errors & notices ─────────────────────────────────────────────────────
   Per explicit request: the top notice list (WooCommerce's own
   `ul.woocommerce-error` / `.woocommerce-message` / `.woocommerce-info`,
   printed at the top of the form after a failed submit) is removed entirely
   - the per-field message WooCommerce's own client-side validation writes
   under each invalid input (`checkout-inline-error-message`, confirmed live -
   this is core WooCommerce behaviour, not the theme's) is the only error
   surface left on this checkout. The coupon box is unaffected - it renders
   its own `.wd-nchk-coupon-notice` now (see the coupon-field rules below),
   never WooCommerce's raw `.woocommerce-error` markup, so it was never a
   target of this rule to begin with.

   Note the trade-off this accepts: an error that ISN'T tied to any one field
   - a payment-gateway failure, an expired session, an out-of-stock line -
   has no fallback surface any more once its top-level notice is hidden.

   `form.checkout` is `display:grid` (confirmed live: computed `gap: 20px
   35px`). Hiding only the `.woocommerce-error` INSIDE the notice wrapper
   collapsed to a genuine 0px content box, but the wrapper `<div
   class="woocommerce-NoticeGroup-checkout">` core prepends around it is
   still a real grid item - and a grid's row-gap is charged BETWEEN TRACKS
   regardless of whether a track's content is empty. Confirmed live via
   `getComputedStyle(form).gridTemplateRows`: a fresh `"0px 1042px 609.625px"`
   - a real, allocated 0px row, with the grid's own 20px gap still inserted
   before the next one. That gap is exactly the "extra space above the
   product box" that survived the first fix: hiding the ERROR content was
   necessary but not sufficient, because the WRAPPER around it was never
   hidden and a display:none child does not remove its parent from grid flow.
   Hiding the wrapper itself removes it from the grid's row list entirely, so
   no gap is ever charged against it. */
.wd-nchk .woocommerce-error,
.wd-nchk .woocommerce-message,
.wd-nchk .woocommerce-info,
.wd-nchk .woocommerce-NoticeGroup,
.wd-nchk .woocommerce-NoticeGroup-checkout {
	display: none !important;
}

/* Errors that belong to no single field (a declined payment, no shipping
   method, an out-of-stock line), drawn by checkout.js immediately above the
   payment box. Without this they would be invisible, since the top notice
   group is hidden above - and an error the shopper cannot see reads as a
   Place Order button that does nothing. */
.wd-nchk .wd-nchk-form-error {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid #fecaca;
	border-radius: var( --nchk-input-radius, 6px );
	background: #fef2f2;
	color: #b91c1c;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
}

.wd-nchk .wd-nchk-form-error p {
	margin: 0;
}

.wd-nchk .wd-nchk-form-error p + p {
	margin-top: 6px;
}

/* WooCommerce's own real-time per-field validation message. */
.wd-nchk .checkout-inline-error-message {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #b91c1c !important;
	margin: 6px 0 0 !important;
	line-height: 1.35 !important;
}

/* ── Ship-to-different-address toggle ────────────────────────────────── */

.wd-nchk-hide-ship-to #ship-to-different-address,
.wd-nchk-hide-ship-to .woocommerce-shipping-fields {
	display: none;
}

/* ── Narrow screens ─────────────────────────────────────────────────── */

@media ( max-width: 420px ) {
	/* PIN Code / State stop sharing a row on the narrowest phones — at 40%
	   of a 320px viewport the PIN field is too tight for its own
	   placeholder, which is what truncated it to "PIN Cod" in the popup. */
	.wd-nchk-form .woocommerce-billing-fields__field-wrapper > .wd-col-4,
	.wd-nchk-form .woocommerce-billing-fields__field-wrapper > .wd-col-6,
	.wd-nchk-form .woocommerce-shipping-fields__field-wrapper > .wd-col-4,
	.wd-nchk-form .woocommerce-shipping-fields__field-wrapper > .wd-col-6,
	.wd-nchk-form .wd-nchk-form-grid > .wd-col-4,
	.wd-nchk-form .wd-nchk-form-grid > .wd-col-6 {
		grid-column: span 10;
	}
}

/* ── Promo note ──────────────────────────────────────────────────────────
   The single line between the form and the order summary. Replaces the block
   the merchant was inserting through the theme, so it is worded and coloured
   from this plugin's own settings and travels with an export/import like
   every other setting here. */

/* The promo's own margin is only half the story: the order-notes block above
   it and the review heading below it carry much larger theme margins, and the
   bigger of two adjacent margins wins - which is why setting 20px here alone
   did not visibly change the gap. Those two neighbours are zeroed just below,
   so this margin is the only thing between them. */
.wd-nchk-promo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: var( --nchk-promo-gap, 20px ) 0 !important;
	padding: 11px 14px;
	border: 1px solid var( --nchk-promo-border, #e5e7eb );
	border-radius: var( --nchk-input-radius, 6px );
	background: var( --nchk-promo-bg, #ffffff );
	color: var( --nchk-promo-text, #7239ea );
	font-size: var( --nchk-promo-size, 13px );
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}

.wd-nchk-promo svg {
	flex-shrink: 0;
}

/* Everything below is what actually produces the gap, measured on the live
   checkout rather than assumed - setting a margin on the promo alone moved
   nothing, because three other things owned that space:

   1. the last billing row's own 12px bottom margin (the form's field rhythm),
   2. the empty second checkout column, which carries a 40px top margin even
      when it renders nothing at all,
   3. the checkout form itself, which is a CSS grid with a 35px row gap - that
      gap, not any margin, is what separates the form column from the order
      summary once they stack on a phone.

   So the promo's own margin governs the space above it, and the form's row
   gap governs the space below it; both are driven by the same setting. All of
   it is gated on the promo actually rendering, so a store with it switched off
   keeps the theme's own spacing untouched. */
.wd-nchk-has-promo .wd-nchk-promo {
	margin-top: var( --nchk-promo-gap, 20px ) !important;
	margin-bottom: 0 !important;
}

.wd-nchk-has-promo form.checkout {
	row-gap: var( --nchk-promo-gap, 20px ) !important;
}

.wd-nchk-has-promo .woocommerce-billing-fields__field-wrapper > .form-row:last-child,
.wd-nchk-has-promo .woocommerce-shipping-fields__field-wrapper > .form-row:last-child {
	margin-bottom: 0 !important;
}

.wd-nchk-has-promo .ct-order-review,
.wd-nchk-has-promo #order_review_heading,
.wd-nchk-has-promo #order_review {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.wd-nchk-has-promo .woocommerce-additional-fields {
	margin: 0 !important;
	padding: 0 !important;
}

/* The second checkout column's 40px top margin is only dead space while that
   column renders nothing. checkout.js measures it and sets this class, rather
   than a `:has()` selector - `:has()` invalidates its whole rule on older
   mobile Safari, and it has to re-evaluate anyway when a shopper opens "ship
   to a different address" mid-checkout. */
.wd-nchk-form .col2-set.wd-nchk-col2-empty > .col-2 {
	margin-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   SELECT2 (State / Country)

   WooCommerce upgrades those two <select>s to select2, which hides the real
   control and draws its own markup - so the padding/height/border set on the
   <select> above landed on something invisible, leaving the leading icon
   sitting on top of the value text. These rules give select2's visible box
   the same geometry as a text input, so one icon offset is correct for both.
   ══════════════════════════════════════════════════════════════════════ */

.wd-nchk .wd-nchk-field .select2-container {
	width: 100% !important;
	/* inline-block by default, so its baseline alignment left the control a
	   pixel above the text inputs beside it - and the leading icon with it. */
	display: block;
	vertical-align: top;
}

.wd-nchk .wd-nchk-field .select2-container--default .select2-selection--single {
	height: var( --nchk-input-height, 48px );
	border: 1px solid var( --nchk-input-border, #dddddd );
	border-radius: var( --nchk-input-radius, 6px );
	background: #fff;
	outline: none;
	display: flex;
	align-items: center;
}

.wd-nchk .wd-nchk-field .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.4;
	padding: 0 34px 0 12px;
	color: #1a1a1a;
	font-size: var( --nchk-input-size, 16px );
	width: 100%;
}

/* Same 38px gutter the inputs reserve, so the icon never overlaps the value. */
.wd-nchk .wd-nchk-has-icon .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 38px;
}

.wd-nchk .wd-nchk-field .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 8px;
}

.wd-nchk .wd-nchk-field .select2-container--open .select2-selection--single,
.wd-nchk .wd-nchk-field .select2-container--focus .select2-selection--single {
	border-color: var( --nchk-accent, #7239ea );
}

/* select2 renders its dropdown at the end of <body>, outside .wd-nchk - so
   this one rule is deliberately not scoped to it. */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var( --nchk-accent, #7239ea );
}

/* ══════════════════════════════════════════════════════════════════════
   ORDER SUMMARY

   A skin over WooCommerce's OWN review-order table, never a replacement.
   Every row it prints - line items, coupon discounts, the gateway fee,
   shipping, each tax rate, the total - is already computed by WooCommerce
   against the real cart, so restyling rather than rebuilding is what
   guarantees the number shown is the number charged.
   ══════════════════════════════════════════════════════════════════════ */

/* #order_review itself gets NO card treatment: the theme already wraps this
   column in one, so bordering it too produced a visible box inside a box. The
   card sits on the table alone, and the payment buttons below it are left
   outside that card entirely so the two read as separate blocks. */
.wd-nchk-summary #order_review,
.wd-nchk-summary .woocommerce-checkout-review-order {
	border: none;
	padding: 0;
	background: none;
	box-shadow: none;
}



/* WooCommerce's own payment box (method list + Place Order button) is left
   exactly as WooCommerce and the theme render it - only spaced away from the
   summary card above so the two do not read as one block. */
.wd-nchk-summary #payment {
	margin-top: 20px;
}

.wd-nchk-summary #order_review_heading {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 12px;
	color: #111827;
}

/* The theme draws its own 2px frame around this whole column; with the card
   below on the table itself that read as a box inside a box, so the outer one
   goes. Its side padding goes with it - on a 375px phone that padding is what
   squeezed the table into a column too narrow for its own content. */
.wd-nchk-summary .ct-order-review {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ONE definition for this table now, not two - it used to be split across
   this spot and a second block further down, with `padding`/`border-radius`
   only decided by whichever happened to sit later in the file. That kind of
   split is exactly what silently produced a 0px-padding table earlier (see
   the git history on this file), so it is consolidated here for good:
   `table-layout: fixed` keeps it inside the phone (with the default `auto`,
   a table never shrinks below its own min-content width - a long product
   name once pushed this 157px past its container and clipped the prices),
   `separate` + zero spacing is what lets `border-radius` actually render on
   the table box, and `overflow: hidden` is what clips the head row's own
   corners to that same radius now that the summary's title lives inside
   this table as a real `<thead>` row (see review-order.php). */
.wd-nchk-summary .woocommerce-checkout-review-order-table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: 14px;
	border: 1px solid var( --nchk-summary-border, #e5e7eb );
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	overflow: hidden;
}

/* Horizontal inset lives ONLY here, as the longhand left/right pair - the
   single place that decides it, instead of being fought over by a shorthand
   `padding: 10px 0` elsewhere (which sets left/right to 0 as a side effect of
   setting top/bottom) landing later in the cascade and winning by accident.

   !important because .product-name / .product-total are WooCommerce's OWN
   standard classes, not this plugin's - confirmed live that something
   outside this file (the theme's own WooCommerce integration CSS is the
   likely source) sets their horizontal padding to 0 at a point in the
   cascade this rule cannot out-specificity its way past. This is the one
   place that gets the final, unconditional word on it. */
.wd-nchk-summary .woocommerce-checkout-review-order-table th,
.wd-nchk-summary .woocommerce-checkout-review-order-table td {
	padding-left: 20px !important;
	padding-right: 20px !important;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table th,
.wd-nchk-summary .woocommerce-checkout-review-order-table td {
	border: none;
	padding-top: 10px;
	padding-bottom: 10px;
	vertical-align: middle;
	background: none;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table tbody tr {
	border-bottom: 1px solid #f1f2f4;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table .cart_item td {
	color: #374151;
	line-height: 1.45;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table .product-name {
	font-weight: 600;
	color: #111827;
}

/* WooCommerce prints the quantity as "&nbsp;x 2" inside the name cell. */
.wd-nchk-summary .product-quantity {
	font-weight: 600;
	color: #6b7280;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table .product-total,
.wd-nchk-summary .woocommerce-checkout-review-order-table td:last-child {
	text-align: right;
	white-space: nowrap;
}

/* Variation / item meta under a line item. */
.wd-nchk-summary .woocommerce-checkout-review-order-table dl.variation {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: #6b7280;
	font-weight: 500;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table dl.variation dt,
.wd-nchk-summary .woocommerce-checkout-review-order-table dl.variation dd {
	display: inline;
	margin: 0 4px 0 0;
	font-weight: inherit;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table dl.variation p {
	display: inline;
	margin: 0;
}

/* Totals block: subtotal, every coupon, the gateway fee, shipping, taxes. */
.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot th {
	font-weight: 500;
	color: #6b7280;
	text-align: left;
}

/* Under `table-layout: fixed` these two are what define the columns, so the
   label side and the amount side line up across every row of the summary. */
.wd-nchk-summary .woocommerce-checkout-review-order-table .cart_item .product-name,
.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot th {
	width: 58%;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table .cart_item .product-total,
.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot td {
	width: 42%;
}

/* Themes commonly right-align or stack the shipping row's label; these keep
   every totals row on the same two-column rhythm as the rest of the table. */
.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot tr,
.wd-nchk-summary .woocommerce-checkout-review-order-table tbody tr {
	display: table-row;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals th {
	vertical-align: top;
	padding-top: 12px;
}



.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
	font-weight: 600;
	color: #111827;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot tr {
	border-bottom: 1px solid #f1f2f4;
}

/* A discount is money coming off - green and signed, so it reads as a saving
   rather than just another line. Covers both WooCommerce's coupon rows and a
   negative gateway fee, which is the shape the prepaid discount takes. */
.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot .cart-discount td,
.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot .fee td {
	color: #12a34b;
	font-weight: 700;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot .cart-discount th,
.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot .fee th {
	color: #12a34b;
}

.wd-nchk-summary .woocommerce-remove-coupon {
	font-size: 12px;
	font-weight: 500;
	margin-left: 6px;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot .order-total {
	border-bottom: none;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot .order-total th {
	font-size: 15px;
	font-weight: 700;
	color: var( --nchk-summary-total, #111827 );
	padding-top: 14px;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot .order-total td {
	font-size: 18px;
	font-weight: 800;
	color: var( --nchk-summary-total, #111827 );
	padding-top: 14px;
}

/* WooCommerce's own "(includes ₹47.57 IGST)" note under the total. */
.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot .order-total small,
.wd-nchk-summary .includes_tax {
	display: block;
	font-size: 11.5px;
	font-weight: 500;
	color: #6b7280;
	margin-top: 2px;
}

/* Blocksy renders shipping as ONE cell spanning both columns, with the label
   in a div and the rate in a list - so the th/td rules above never reached it
   and it stacked into two lines.

   Floats, not flex: `display: flex` on a <td> takes it out of the table box
   model entirely, which made it ignore its own colspan and shrink into the
   first column. Kept as a real table-cell, the colspan still spans the table
   and the two children float to opposite edges. The theme puts `clear: both`
   on the method list, which is what kept pushing it onto its own line. */
.wd-nchk-summary .woocommerce-shipping-totals > td[colspan] {
	display: table-cell !important;
	width: auto !important;
}

.wd-nchk-summary .woocommerce-shipping-totals > td[colspan]::after {
	content: '';
	display: block;
	clear: both;
}

.wd-nchk-summary .ct-shipping-heading {
	float: left;
	width: auto !important;
	max-width: 58%;
	margin: 0 !important;
	font-weight: 500;
	color: #6b7280;
}

.wd-nchk-summary .woocommerce-shipping-methods {
	float: right;
	clear: none !important;
	width: auto !important;
	max-width: 58%;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
	font-weight: 600;
}

.wd-nchk-summary .woocommerce-shipping-methods li {
	margin: 0;
}

.wd-nchk-summary .woocommerce-shipping-methods label {
	margin: 0;
	font-weight: 600;
	color: #111827;
}

/* ══════════════════════════════════════════════════════════════════════
   VARIANT SWAP - PAGE BLOCKER

   While the cart line is being rewritten, the summary and the Place Order
   button below are still showing the previous variant's price. Covering the
   whole page (not just the card) is the point: it makes it impossible to
   submit an order against a cart that is mid-change.
   ══════════════════════════════════════════════════════════════════════ */

.wd-nchk-blocker {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba( 255, 255, 255, 0.62 );
	backdrop-filter: saturate( 0.6 ) blur( 1px );
	-webkit-backdrop-filter: saturate( 0.6 ) blur( 1px );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: progress;
	animation: wd-nchk-fade-in .12s ease;
}

@keyframes wd-nchk-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.wd-nchk-blocker-spinner {
	width: 34px;
	height: 34px;
	border: 3px solid rgba( 0, 0, 0, 0.12 );
	border-top-color: var( --nchk-accent, #7239ea );
	border-radius: 50%;
	animation: wd-nchk-spin .7s linear infinite;
}

@keyframes wd-nchk-spin {
	to { transform: rotate( 360deg ); }
}

/* NOT `overflow: hidden` here - confirmed live it was the actual cause of a
   visible 1s page shift to the right every time this fires: removing body's
   scrollbar (which `overflow:hidden` does) widens the viewport by the
   scrollbar's own width, and the page's own content shifts to fill it, then
   snaps back the instant the class is removed. The overlay is `position:
   fixed; inset:0` regardless of scroll position and `form.checkout` below
   already refuses all pointer/keyboard interaction, so scroll-locking the
   body was never actually needed to keep the page safe during the wait. */
body.wd-nchk-blocked form.checkout {
	pointer-events: none;
	user-select: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.wd-nchk-blocker { animation: none; }
	.wd-nchk-blocker-spinner { animation-duration: 1.6s; }
}

/* ══════════════════════════════════════════════════════════════════════
   PROMO FLASH

   The same idea as the popup's prepaid-button ripple: a shine travelling
   across the line on a timer, rather than a blink. Sits behind the text on
   its own clipped layer so it can never wash out the wording.
   ══════════════════════════════════════════════════════════════════════ */

.wd-nchk-promo {
	position: relative;
	overflow: hidden;
	z-index: 0;
}

.wd-nchk-promo-flash {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent 0%,
		var( --nchk-promo-flash, #f3e8ff ) 50%,
		transparent 100%
	);
	animation: wd-nchk-promo-flash var( --nchk-promo-flash-speed, 3s ) ease-in-out infinite;
}

@keyframes wd-nchk-promo-flash {
	0%   { left: -60%; opacity: 0; }
	15%  { opacity: 1; }
	55%  { left: 115%; opacity: 0; }
	100% { left: 115%; opacity: 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.wd-nchk-promo-flash { animation: none; opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   ORDER SUMMARY - this plugin's own review-order template

   Two lines per item (name + price, then variation or quantity), then
   shipping, then one line per tax rate, then the total.
   ══════════════════════════════════════════════════════════════════════ */

/* WooCommerce's own "Your order" heading is unconditionally hidden whenever
   this redesigned summary is active - summary_head_row() is now the ONLY
   source of the card's title, so the native one would just be a second,
   invisible-but-still-taking-space duplicate. Hidden rather than emptied -
   an empty <h3> keeps its own margin box and would leave an unexplained gap. */
.wd-nchk-summary #order_review_heading {
	display: none;
}

.wd-nchk-summary .wd-nchk-table .wd-nchk-item td {
	padding-bottom: 2px;
	border: none;
}

.wd-nchk-summary .wd-nchk-table .wd-nchk-item .product-name {
	font-weight: 600;
	color: #111827;
	line-height: 1.35;
}

.wd-nchk-summary .wd-nchk-table .wd-nchk-item .product-total {
	font-weight: 600;
	color: #111827;
	white-space: nowrap;
	vertical-align: top;
}

/* Second line, mirroring the first: the variation on the left under the
   product name, the quantity on the right under the price. Muted and tight
   under that first line so the pair reads as one item, not two rows. A simple
   product simply has nothing in the left cell. */
.wd-nchk-summary .wd-nchk-table .wd-nchk-item-meta td {
	padding-top: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid #f1f2f4;
	font-size: 12.5px;
	font-weight: 500;
	color: #6b7280;
	line-height: 1.4;
}

.wd-nchk-summary .wd-nchk-table .wd-nchk-item-qty {
	text-align: right;
	white-space: nowrap;
	vertical-align: top;
}

.wd-nchk-summary .wd-nchk-table .wd-nchk-item-meta dl.variation,
.wd-nchk-summary .wd-nchk-table .wd-nchk-item-meta p {
	display: inline;
	margin: 0;
}

.wd-nchk-summary .wd-nchk-table .wd-nchk-shipping td {
	font-weight: 600;
	color: #111827;
}

/* Tax lines. Under tax-inclusive pricing these amounts are already part of
   the total, so the note beside each label says so - without it the column
   reads as if tax were being added on top and stops adding up. */
.wd-nchk-summary .wd-nchk-table .tax-rate th {
	font-weight: 500;
	color: #6b7280;
}

.wd-nchk-summary .wd-nchk-tax-note {
	font-size: 11px;
	font-weight: 500;
	color: #9ca3af;
	white-space: nowrap;
}

.wd-nchk-summary .wd-nchk-table .tax-rate td {
	font-weight: 500;
	color: #6b7280;
}

/* ══════════════════════════════════════════════════════════════════════
   REDESIGN - promo, summary card, payment cards, place order

   One visual system across the four blocks: same 14px radius, same 1px
   #e9eaee border, same 16-18px inner padding, accent purple for anything
   interactive and green reserved strictly for money the shopper SAVES.
   That last rule is why "FREE", the You Pay row and the discount badges are
   the only green things on the page - green stops meaning "good news" the
   moment it is also used for decoration.
   ══════════════════════════════════════════════════════════════════════ */

.wd-nchk-summary,
.wd-nchk-pay {
	--nchk-line: #e9eaee;
	--nchk-ink: #111827;
	--nchk-muted: #6b7280;
	--nchk-save: #12a34b;
	--nchk-save-soft: #eefaf3;
}

/* ── Promo line ──────────────────────────────────────────────────────── */

.wd-nchk-promo {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: flex-start;
	text-align: left;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid color-mix( in srgb, var( --nchk-promo-text, #7239ea ) 25%, transparent );
	background: color-mix( in srgb, var( --nchk-promo-text, #7239ea ) 7%, #fff );
}

/* color-mix is recent; these are the flat fallbacks older browsers use. */
@supports not ( background: color-mix( in srgb, red 50%, blue ) ) {
	.wd-nchk-promo {
		border-color: var( --nchk-promo-border, #e5e7eb );
		background: var( --nchk-promo-bg, #ffffff );
	}
}

.wd-nchk-promo-icon {
	flex-shrink: 0;
}

.wd-nchk-promo-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.wd-nchk-promo-text {
	font-weight: 700;
	line-height: 1.3;
}

.wd-nchk-promo-sub {
	font-size: 0.82em;
	font-weight: 500;
	color: var( --nchk-muted );
	line-height: 1.3;
}

.wd-nchk-promo-chip {
	flex-shrink: 0;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 12px;
	border-radius: 999px;
	background: color-mix( in srgb, var( --nchk-promo-text, #7239ea ) 14%, #fff );
	color: var( --nchk-promo-text, #7239ea );
	font-size: 0.86em;
	font-weight: 800;
	letter-spacing: .02em;
	white-space: nowrap;
}

.wd-nchk-promo-chip .amount,
.wd-nchk-promo-chip bdi {
	font-weight: 800;
}

/* ── Coupon field ─────────────────────────────────────────────────────────
   Deliberately minimal, per the actual request: one fused control - field on
   the left, Apply button on the right, no gap between them, no toggle link,
   no message paragraph. This is this plugin's OWN markup (not WooCommerce's
   checkout/form-coupon.php - that template wraps its fields in a `<form>`,
   which cannot legally nest inside the main checkout form this renders
   inside; see the docblock on render_coupon_field() for what that actually
   broke). The Apply button still talks to WooCommerce's real coupon
   endpoint via checkout.js's own small handler. */

.wd-nchk-coupon {
	margin: 20px 0;
}

.wd-nchk-coupon-row {
	display: flex;
	border: 1px solid var( --nchk-input-border, #dddddd );
	border-radius: var( --nchk-input-radius, 6px );
	overflow: hidden;
	background: #fff;
	transition: border-color .15s ease;
}

.wd-nchk-coupon-row:focus-within {
	border-color: var( --nchk-accent, #7239ea );
}

/* !important on the input's own border/radius: Blocksy's theme stylesheet
   gives every text input a border and border-radius by default, loads after
   this file, and matches at equal or higher specificity - confirmed live,
   the input was rendering with its OWN 1px border and 6px radius on top of
   the row's, which is what made it read as two separate pill shapes instead
   of one fused bar. Only the outer .wd-nchk-coupon-row should ever draw a
   border or a radius; the input itself must always be flat. */
.wd-nchk-coupon-input {
	flex: 1;
	min-width: 0;
	border: none !important;
	border-radius: 0 !important;
	padding: 12px 14px;
	font-size: var( --nchk-input-size, 16px );
	font-family: inherit;
	background: transparent;
	/* Coupon codes are handed out in capitals, so the field shows them that
	   way as they are typed. Display only - WooCommerce lowercases the value
	   itself for matching (wc_format_coupon_code), so this never changes what
	   is actually submitted, and the placeholder is excluded below so it does
	   not turn into a shouted "COUPON CODE".

	   !important because Blocksy sets `text-transform:
	   var(--theme-form-text-transform)` on a compound selector that includes
	   `input:is([type="text"], ...)`. `:is()` takes the specificity of its most
	   specific argument, so that selector scores (0,1,1) - element plus
	   attribute - against this rule's single class at (0,1,0), and wins on pure
	   specificity regardless of source order. Confirmed live: computed
	   text-transform was `none` with this rule present and matching. Same
	   theme-styles-native-inputs collision documented throughout this file. */
	text-transform: uppercase !important;
	letter-spacing: .02em;
}

/* The placeholder would otherwise inherit the uppercase above. */
.wd-nchk-coupon-input::placeholder {
	text-transform: none !important;
	letter-spacing: normal;
}

.wd-nchk-coupon-input:focus {
	outline: none;
}

.wd-nchk-coupon-apply {
	flex-shrink: 0;
	/* Same !important reasoning as the input - a theme default reaching this
	   far would break the fused look identically on this side. No border-left
	   either: the two controls read as one bar, split only by colour. */
	border: none !important;
	border-radius: 0 !important;
	padding: 12px 20px;
	background: var( --nchk-accent, #7239ea );
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: filter .15s ease;
}

.wd-nchk-coupon-apply:hover:not( :disabled ) {
	filter: brightness( 1.08 );
}

.wd-nchk-coupon-apply:disabled {
	opacity: .7;
	cursor: not-allowed;
}

.wd-nchk-coupon-msg:empty {
	display: none;
}

/* This plugin's own notice, built by checkout.js's renderNotice() from the
   TEXT of whatever WooCommerce's apply-coupon endpoint returned - never the
   raw markup, which would otherwise inherit the theme's own harsh, solid
   error-banner styling site-wide instead of reading as part of this design. */
.wd-nchk-coupon-notice {
	margin: 8px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.wd-nchk-coupon-notice p {
	margin: 0;
}

.wd-nchk-coupon-notice p + p {
	margin-top: 4px;
}

.wd-nchk-coupon-notice-error {
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.wd-nchk-coupon-notice-success {
	color: #166534;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

/* Removal is neutral, never green. Green on this checkout means money the
   shopper SAVES (the design rule the FREE shipping, You Pay band and discount
   badges all follow) - and taking a coupon off is the opposite of that, so
   showing it in the same green as "applied successfully" made the two
   outcomes read identically at a glance. Plain grey: it happened, nothing is
   wrong, nothing was gained. */
.wd-nchk-coupon-notice-info {
	color: #374151;
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
}

/* ── Applied state ────────────────────────────────────────────────────────
   Same bar, same height, same fused shape as the input + Apply pair it
   replaces - only the left half changes from a white field to a filled chip
   showing the code, so applying a coupon reads as the control changing state
   rather than the layout jumping. */

.wd-nchk-coupon-row-applied {
	align-items: stretch;
}

/* White, matching the coupon INPUT it replaces - the bar keeps exactly the
   same shape and colour it had before the coupon was applied, so only the
   contents change. The tinted half is the Remove button below. */
.wd-nchk-coupon-applied {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	background: #fff;
	font-size: var( --nchk-input-size, 16px );
	font-weight: 700;
	color: #111827;
	overflow: hidden;
}

.wd-nchk-coupon-applied-code {
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
	flex-shrink: 0;
}

/* What the coupon is actually worth - "10% OFF" for a percentage coupon, the
   real rupee figure for a fixed one. Muted and lighter than the code so the
   code stays the identifier and this reads as its value. Allowed to shrink and
   ellipsis first, since the code itself must never be truncated. */
.wd-nchk-coupon-applied-value {
	min-width: 0;
	font-size: 0.82em;
	font-weight: 600;
	color: #12a34b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* A ticket icon, so the chip reads as a coupon rather than just a grey box.
   Masked pseudo-element, same technique as the form's field icons. */
.wd-nchk-coupon-applied-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: #12a34b;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20.59 13.41-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z'/%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20.59 13.41-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z'/%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Removing is a quiet, reversible action, so it is deliberately NOT given the
   accent-filled treatment the Apply button has - a bordered white button reads
   as available without competing with the primary action anywhere on the page. */
.wd-nchk-coupon-remove {
	flex-shrink: 0;
	border: none !important;
	border-left: 1px solid var( --nchk-input-border, #dddddd ) !important;
	border-radius: 0 !important;
	padding: 12px 20px;
	background: #eeeeee;
	color: #4b5563;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: color .15s ease, background .15s ease;
}

.wd-nchk-coupon-remove:hover:not( :disabled ) {
	background: #e5e7eb;
	color: #b91c1c;
}

.wd-nchk-coupon-remove:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* ── The order summary's own remove control ───────────────────────────────
   WooCommerce renders this as an <a> reading "[Remove]"; the brackets are
   stripped in PHP (filter_coupon_html) and it is given the same minimal
   bordered-button shape as the one above, so the two controls that do the
   same thing look like they do the same thing. !important throughout: this is
   WooCommerce's own class and the theme styles anchors globally - the standing
   rule for this file. */
.wd-nchk-summary .woocommerce-remove-coupon {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 10px !important;
	border: 1px solid var( --nchk-line, #e9eaee ) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: #6b7280 !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	text-decoration: none !important;
	white-space: nowrap;
	vertical-align: middle;
}

.wd-nchk-summary .woocommerce-remove-coupon:hover {
	border-color: #fecaca !important;
	background: #fdf4f3 !important;
	color: #b91c1c !important;
}

/* The coupon row's label, so an applied coupon reads as a coupon in the
   totals rather than as another anonymous discount line. */
.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot .cart-discount th {
	font-weight: 700;
}

/* ── Summary card header (a real <thead> row now - see
   Woo_Dash_Checkout_Frontend::summary_head_row() for why it moved inside the
   table) ──────────────────────────────────────────────────────────────── */

/* !important on border-bottom too: the generic th/td rule further up this
   file sets `border: none` at HIGHER specificity (two classes vs. this
   selector's one class + tag), which silently wins regardless of source
   order and was erasing this exact line - confirmed live, computed
   border-bottom-width was 0px despite this rule being present. */
.wd-nchk-summary-head-row th {
	padding: 16px 20px !important;
	border-bottom: 1px solid var( --nchk-line ) !important;
	background: #fff;
}

.wd-nchk-summary-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.wd-nchk-summary-head-title {
	font-size: 17px;
	font-weight: 700;
	color: var( --nchk-ink );
	line-height: 1.3;
}

.wd-nchk-summary-secure {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var( --nchk-save );
	white-space: nowrap;
}

/* ── Summary card ────────────────────────────────────────────────────── */

/* border-radius, overflow, background and the 20px horizontal inset are all
   now declared once, on the single table rule near the top of this file -
   see the comment there for why splitting this across two rules was itself
   the bug. */
.wd-nchk-summary .wd-nchk-item .product-name {
	padding-top: 16px;
}

.wd-nchk-summary .wd-nchk-item .product-total {
	padding-top: 16px;
	font-size: 15px;
}

.wd-nchk-summary .wd-nchk-item-meta td {
	padding-bottom: 16px;
	border-bottom: 1px dashed var( --nchk-line );
}

/* Totals block */
.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot th,
.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot td {
	padding: 9px 0;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot tr {
	border-bottom: none;
}

.wd-nchk-summary .wd-nchk-shipping th {
	font-weight: 600;
	color: var( --nchk-ink );
}

.wd-nchk-summary .wd-nchk-shipping-free td {
	color: var( --nchk-save );
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* The You Pay row is the answer to the only question that matters on this
   page, so it gets its own tinted band edge-to-edge rather than another
   ordinary row. Negative side margins pull it back out through the table's
   own padding. */
.wd-nchk-summary .wd-nchk-you-pay th,
.wd-nchk-summary .wd-nchk-you-pay td {
	background: var( --nchk-save-soft );
	padding-top: 16px;
	padding-bottom: 16px;
	border-top: 1px solid var( --nchk-line );
}

.wd-nchk-summary .wd-nchk-you-pay th {
	font-size: 15px;
	font-weight: 800;
	color: var( --nchk-save );
}

.wd-nchk-summary .wd-nchk-you-pay td {
	font-size: 19px;
	font-weight: 800;
	color: var( --nchk-save );
}

.wd-nchk-summary .wd-nchk-you-pay td strong {
	font-weight: 800;
}

.wd-nchk-summary .woocommerce-checkout-review-order-table tfoot .wd-nchk-you-pay {
	position: relative;
}

/* ── Delivery & Payment ──────────────────────────────────────────────── */

.wd-nchk-pay-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 26px 0 14px;
}

.wd-nchk-pay-heading h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var( --nchk-ink );
	line-height: 1.3;
}

.wd-nchk-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1.5px solid var( --nchk-accent, #7239ea );
	color: var( --nchk-accent, #7239ea );
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
}

/* Method cards */
.wd-nchk-pay #payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wd-nchk-pay #payment ul.payment_methods::after {
	content: none;
}

/* `border: none` matters here: the theme draws its OWN 1px border on this
   <li>, which sat around the card's border and produced the visible double
   outline - confirmed live, the li computed to `1px solid rgb(231,233,239)`
   while the card inside it carried its own. The card is the only thing that
   should ever draw a border. */
.wd-nchk-pay .wd-nchk-method {
	margin: 0;
	padding: 0;
	border: none !important;
	background: none;
	list-style: none;
}

/* The real radio: kept in the DOM and focusable, visually replaced by the
   dot drawn inside the label. Never display:none - that would take it out of
   the tab order and out of reach of a screen reader. */
.wd-nchk-pay .wd-nchk-method-radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.wd-nchk-pay .wd-nchk-method-card {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 16px;
	border: 1px solid var( --nchk-line );
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

/* The theme renders its own custom radio as a ::before on this label - a
   16px block that sat as a flex item ahead of our own dot and pushed it 27px
   in from the card's edge (measured live). Removed so the dot is the only
   radio, and sits where the card's own padding puts it. */
.wd-nchk-pay .wd-nchk-method-card::before,
.wd-nchk-pay .wd-nchk-method-card::after {
	content: none !important;
	display: none !important;
}

.wd-nchk-pay .wd-nchk-method-card:hover {
	border-color: #cfd3da;
}

/* One border when selected too - the accent colour alone carries the state,
   with no ring stacked outside it. A box-shadow ring here read as a second
   outline around an already-bordered card. */
.wd-nchk-pay .wd-nchk-method-radio:checked + .wd-nchk-method-card {
	border-color: var( --nchk-accent, #7239ea );
	background: color-mix( in srgb, var( --nchk-accent, #7239ea ) 3%, #fff );
}

@supports not ( background: color-mix( in srgb, red 50%, blue ) ) {
	.wd-nchk-pay .wd-nchk-method-radio:checked + .wd-nchk-method-card {
		background: #fff;
	}
}

/* Keyboard focus has to be visible on the card, since the radio itself is not. */
.wd-nchk-pay .wd-nchk-method-radio:focus-visible + .wd-nchk-method-card {
	outline: 2px solid var( --nchk-accent, #7239ea );
	outline-offset: 2px;
}

.wd-nchk-pay .wd-nchk-method-dot {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #cbd0d8;
	background: #fff;
	position: relative;
	transition: border-color .15s ease;
}

.wd-nchk-pay .wd-nchk-method-radio:checked + .wd-nchk-method-card .wd-nchk-method-dot {
	border-color: var( --nchk-accent, #7239ea );
}

.wd-nchk-pay .wd-nchk-method-radio:checked + .wd-nchk-method-card .wd-nchk-method-dot::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var( --nchk-accent, #7239ea );
}

.wd-nchk-pay .wd-nchk-method-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* Title and its badge share a line, exactly as the popup lays them out. */
.wd-nchk-pay .wd-nchk-method-title-row {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

/* Type scale copied from the popup's own gateway buttons (14px/700 title,
   11.5px/500 description) - only the colours differ, because there they sit
   on a saturated button and here on a white card. */
.wd-nchk-pay .wd-nchk-method-title {
	font-size: 16px;
	font-weight: 700;
	color: var( --nchk-ink );
	line-height: 1.3;
}

.wd-nchk-pay .wd-nchk-method-desc {
	font-size: 11.5px;
	font-weight: 500;
	color: var( --nchk-muted );
	line-height: 1.3;
}

/* The popup's "Save X%" chip, copied value-for-value from
   .wd-bnp-gateway-save in assets/buy-now-css/buy-now.css - same amber, same
   ink, same 11px/800, same pill and shadow. Matching it by eye is exactly
   how two "identical" badges drift apart. */
.wd-nchk-pay .wd-nchk-method-save {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: #facc15;
	color: #78350f;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.25 );
}

/* A surcharge, on the same line - amber-on-cream rather than the discount's
   amber-on-gold, so "costs more" never reads as "saves you money". */
.wd-nchk-pay .wd-nchk-method-fee {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: #fef3c7;
	color: #92400e;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	white-space: nowrap;
}

/* The popup's gateway icon, moved to the right of the card where the totals
   used to sit. Circular like the popup's, but tinted for a white card
   instead of the popup's translucent-white-on-colour. */
.wd-nchk-pay .wd-nchk-method-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	margin-left: auto;
	border-radius: 50%;
	background: #f4f5f7;
	color: #6b7280;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease;
}

.wd-nchk-pay .wd-nchk-method-icon svg {
	width: 18px;
	height: 18px;
}

.wd-nchk-pay .wd-nchk-method-radio:checked + .wd-nchk-method-card .wd-nchk-method-icon {
	background: color-mix( in srgb, var( --nchk-accent, #7239ea ) 12%, #fff );
	color: var( --nchk-accent, #7239ea );
}

.wd-nchk-pay .wd-nchk-method-fields {
	margin: 8px 0 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: #f8f9fb;
	border: 1px solid var( --nchk-line );
}

.wd-nchk-pay .wd-nchk-method-fields::before {
	content: none;
}

/* ── Trust row + footer line ─────────────────────────────────────────── */

.wd-nchk-pay-trust {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 18px 0 0;
	padding: 16px 8px;
	border-radius: 14px;
	background: #f6f7f9;
}

.wd-nchk-pay-trust-item {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 0 12px;
	position: relative;
}

.wd-nchk-pay-trust-item:not( :last-child )::after {
	content: '';
	position: absolute;
	right: 0;
	top: 6%;
	height: 88%;
	width: 1px;
	background: #e3e5e9;
}

.wd-nchk-pay-trust-item svg {
	flex-shrink: 0;
	margin-top: 1px;
}

.wd-nchk-pay-trust-item span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wd-nchk-pay-trust-item strong {
	font-size: 13px;
	font-weight: 700;
	color: var( --nchk-ink );
	line-height: 1.25;
}

.wd-nchk-pay-trust-item small {
	font-size: 11.5px;
	font-weight: 500;
	color: var( --nchk-muted );
	line-height: 1.3;
}

.wd-nchk-pay-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 14px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --nchk-muted );
	text-align: center;
}

/* ── Place Order ─────────────────────────────────────────────────────── */

.wd-nchk-pay #payment .form-row.place-order {
	margin: 20px 0 0;
	padding: 0;
}

.wd-nchk-pay .wd-nchk-place-order,
.wd-nchk-pay #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 17px 20px;
	border: none;
	border-radius: 14px;
	background: linear-gradient( 135deg, var( --nchk-cta-from, #7239ea ), var( --nchk-cta-to, #5b21b6 ) );
	color: var( --nchk-cta-text, #fff );
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba( 91, 33, 182, .22 );
	transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}

/* The label is a bare text node inside the button, NOT a nested span - see the
   long docblock on Woo_Dash_Checkout_Payment::filter_order_button() for why
   nothing may be nested in here (WooCommerce's own checkout.js calls
   jQuery.text() on this button, which destroys every child node). Styling the
   button itself is what survives that. */
.wd-nchk-pay .wd-nchk-place-order {
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: .02em;
}

/* Lock icon as a masked ::before rather than an inline <svg> child - a
   pseudo-element is not a child node, so .text() cannot remove it. Same mask
   technique the form's field icons already use in this file. */
.wd-nchk-pay .wd-nchk-place-order::before {
	content: '';
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	opacity: .95;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The live total, printed from the data-total attribute PHP writes. An
   attribute survives .text() for the same reason a pseudo-element does, and
   attr() re-reads it automatically every time the fragment re-renders. Only
   drawn when there is actually a total to show - `place_order_show_total` off
   renders data-total="", which this selector deliberately skips so no stray
   bullet separator is left behind. */
.wd-nchk-pay .wd-nchk-place-order[data-total]:not( [data-total=""] )::after {
	content: '\00b7\00a0' attr( data-total );
	font-weight: 800;
	white-space: nowrap;
	opacity: .95;
}

.wd-nchk-pay .wd-nchk-place-order:hover {
	filter: brightness( 1.06 );
	transform: translateY( -1px );
	box-shadow: 0 10px 24px rgba( 91, 33, 182, .28 );
}

.wd-nchk-pay .wd-nchk-place-order:active {
	transform: translateY( 0 );
	filter: brightness( .98 );
}

/* The former `.wd-nchk-place-order svg` / `.wd-nchk-place-order-total` rules
   are gone with the child elements they styled - the icon and the total are
   now ::before / ::after on the button itself, defined above. */

@media ( prefers-reduced-motion: reduce ) {
	.wd-nchk-pay .wd-nchk-place-order:hover { transform: none; }
}

/* ── Narrow screens ──────────────────────────────────────────────────── */

@media ( max-width: 480px ) {
	.wd-nchk-promo {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.wd-nchk-promo-chip {
		margin-left: 0;
	}

	.wd-nchk-summary .woocommerce-checkout-review-order-table th,
	.wd-nchk-summary .woocommerce-checkout-review-order-table td {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.wd-nchk-summary-head-row th {
		padding: 14px 16px !important;
	}

	/* Stays a single row on a phone: with no prices on the card any more, the
	   dot, the text and one small round icon fit comfortably at 375px, and
	   wrapping would only add height for nothing. */
	.wd-nchk-pay .wd-nchk-method-card {
		gap: 10px;
		padding: 14px;
	}

	.wd-nchk-pay .wd-nchk-method-icon {
		width: 32px;
		height: 32px;
	}

	.wd-nchk-pay-trust {
		flex-direction: column;
		gap: 12px;
		padding: 14px;
	}

	.wd-nchk-pay-trust-item {
		padding: 0;
	}

	.wd-nchk-pay-trust-item:not( :last-child )::after {
		content: none;
	}

	.wd-nchk-pay .wd-nchk-place-order {
		font-size: 15px;
		padding: 16px;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   THEME RESETS - measured against the live checkout, not assumed

   Blocksy deliberately bleeds the payment box past its column with a
   negative side margin (0 -26px) and compensates with 25px of padding on
   the rows inside it. That is right for the theme's own full-width tinted
   panel and wrong for cards, which then hung 25px over the edge of the
   summary above them. Both halves are undone together - removing one
   without the other just moves the misalignment.

   The `!important` here is deliberate and narrow: these override theme
   rules that are themselves more specific than anything this file can
   reasonably write, and each one is a single geometric property.
   ══════════════════════════════════════════════════════════════════════ */

body.wd-nchk-pay #payment {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.wd-nchk-pay #payment .form-row.place-order {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.wd-nchk-pay #payment .wd-nchk-method-card {
	padding: 16px !important;
}

body.wd-nchk-pay #payment .wd-nchk-place-order {
	padding: 17px 20px !important;
	border-radius: 14px !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	height: auto !important;
	/* Same reasoning as every other !important in this block: #place_order is
	   WooCommerce's OWN element, so the theme is already styling it - and
	   Blocksy does set its own text-transform and font stack on buttons. */
	text-transform: uppercase !important;
	font-family: 'Montserrat', sans-serif !important;
}

@media ( max-width: 480px ) {
	body.wd-nchk-pay #payment .wd-nchk-method-card {
		padding: 14px !important;
	}

	body.wd-nchk-pay #payment .wd-nchk-place-order {
		padding: 16px !important;
		font-size: 15px !important;
	}
}