/* Woo Dash — Buy Now popup checkout. Shared by the live popup (storefront)
   and the settings-page live preview pane, so both stay visually identical. */

:root {
	--bnp-accent: #7239ea;
	--bnp-btn-bg: #7239ea;
	--bnp-btn-text: #ffffff;
	--bnp-title-icon: #f5a623;
	--bnp-secure-bg: #f3e8ff;
	--bnp-secure-text: #7239ea;
	--bnp-card-border: #e5e7eb;
	--bnp-discount-bg: #e8f9ee;
	--bnp-discount-text: #1a7f37;
	--bnp-qty-bg: #f3f4f6;
	--bnp-qty-text: #111827;
}

.wd-bnp-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.55 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 16px;
	/* Stops a drag that starts on the backdrop from being handed to whatever
	   is scrollable behind it. */
	overscroll-behavior: contain;
}

.wd-bnp-modal {
	background: #fff;
	border-radius: 12px;
	max-width: 420px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	/* Scroll chaining: without this, once the modal's own scroll reaches its
	   top or bottom the remaining gesture is passed to the page behind it, so
	   flicking through the form kept dragging the product page along at each
	   end. `contain` keeps the gesture inside the modal. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 20px 24px 24px;
	position: relative;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.3 );
	font-family: inherit;
}

/* Many themes set their own font-family on headings/buttons (h1-h6, button,
   input) that would otherwise override the modal's own `inherit` above on
   just those elements - forcing it back down through every descendant here
   keeps the whole popup, thank-you screen included, on one consistent
   (theme body) font. */
.wd-bnp-modal,
.wd-bnp-modal * {
	font-family: inherit;
}

.wd-bnp-modal::-webkit-scrollbar {
	display: none;
}

/* Sticky within .wd-bnp-modal's own overflow-y:auto scroll container - on a
   short viewport the modal is taller than the screen and the shopper has to
   scroll down inside it to reach the lower fields/buttons; without this the
   header (and the close button that lives in it) scrolled away with
   everything else, leaving no way to close the popup without scrolling back
   up first. Bleeds out to the modal's full edges via negative margins that
   cancel its own padding (same technique .wd-bnp-header-row-banner already
   used below, just applied unconditionally) and re-adds equivalent padding
   inside, so the row still visually sits exactly where it did before - the
   only change is that it now has a solid background and stays pinned to the
   top of the scroll area instead of scrolling away with the content beneath
   it. top:-20px cancels the modal's own 20px top padding so the sticky row
   sits flush against the modal's actual top edge once stuck, not 20px below it. */
.wd-bnp-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	/* margin-top/top stay tied to the MODAL's own 20px top padding (that's
	   what makes the sticky bleed math work) - only the header's own
	   re-added padding below is what controls how tall/roomy the visible
	   bar looks, reduced here for a sleeker bar. */
	margin: -20px -24px 6px;
	padding: 10px 24px 6px;
	position: sticky;
	top: -20px;
	background: #fff;
	z-index: 5;
}

/* Inline secure-badge position: the badge takes over the title's spot, and
   the whole row becomes a full-bleed colored banner across the top of the
   modal (matching the badge's own background) instead of a small pill
   floating in the middle of empty space - bleeds out through the modal's
   own padding via negative margins that exactly cancel it. */
.wd-bnp-header-row-banner {
	background: var( --bnp-secure-bg );
	margin: -20px -24px 12px;
	padding: 10px 20px;
	border-radius: 12px 12px 0 0;
}

.wd-bnp-header-row-banner .wd-bnp-secure-inline {
	background: none;
	padding: 0;
	border-radius: 0;
}

.wd-bnp-header-row-banner .wd-bnp-close {
	color: var( --bnp-secure-text );
}

/* Thank-you screen: the title/promo-banner header belongs to the form step,
   not the result - strip it down to just the close button, floated over the
   corner instead of occupying its own row, so no empty header-shaped gap is
   left behind and the success content can start right at the modal's top
   padding. */
.wd-bnp-modal.wd-bnp-success-active .wd-bnp-header-row {
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0;
	padding: 0;
	background: none;
	width: auto;
	z-index: 20;
}

.wd-bnp-modal.wd-bnp-success-active .wd-bnp-header-row > *:not( .wd-bnp-close ) {
	display: none;
}

.wd-bnp-modal.wd-bnp-success-active .wd-bnp-secure-badge:not( .wd-bnp-secure-inline ) {
	display: none;
}

.wd-bnp-close {
	background: rgba( 0, 0, 0, 0.08 );
	border: none;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #888;
	flex-shrink: 0;
	width: 1.6em;
	height: 1.6em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .15s ease;
}

.wd-bnp-close:hover {
	background: rgba( 0, 0, 0, 0.15 );
}

.wd-bnp-title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: var( --bnp-accent );
	display: flex;
	align-items: center;
	gap: 8px;
}

.wd-bnp-title-lock {
	fill: var( --bnp-title-icon );
	flex-shrink: 0;
}

.wd-bnp-secure-badge {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 6px;
	margin: 0 auto 14px;
	background: linear-gradient( 135deg, var( --bnp-secure-bg ), color-mix( in srgb, var( --bnp-secure-bg ) 55%, #fff ) );
	color: var( --bnp-secure-text );
	border-radius: 999px;
	font-weight: 600;
	position: relative;
	overflow: hidden;
}

.wd-bnp-secure-badge::after {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient( 100deg, transparent, rgba( 255, 255, 255, 0.85 ), transparent );
	animation: wd-bnp-badge-shine 5s ease-in-out infinite;
}

@keyframes wd-bnp-badge-shine {
	0% {
		left: -60%;
	}
	25% {
		left: 130%;
	}
	100% {
		left: 130%;
	}
}

.wd-bnp-secure-badge svg {
	fill: var( --bnp-secure-text );
	flex-shrink: 0;
}

.wd-bnp-secure-badge-text {
	transition: opacity .18s ease;
	white-space: nowrap;
}

.wd-bnp-badge-text-fade {
	opacity: 0;
}

.wd-bnp-secure-small {
	padding: 4px 10px;
	font-size: 11px;
}

.wd-bnp-secure-medium {
	padding: 6px 14px;
	font-size: 13px;
}

.wd-bnp-secure-large {
	padding: 8px 18px;
	font-size: 15px;
}

.wd-bnp-secure-inline {
	margin: 0;
	flex-shrink: 1;
	min-width: 0;
}

.wd-bnp-secure-inline span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wd-bnp-error-banner {
	background: #fdecea;
	color: #c0392b;
	border: 1px solid #f5c6cb;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 13px;
	margin-bottom: 14px;
}

.wd-bnp-product-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 14px;
	padding: 12px;
	border: 1px solid var( --bnp-card-border );
	border-radius: 10px;
}

/* Same `[hidden]`-vs-`display:flex` specificity issue as .wd-bnp-success:
   without this, hiding the product card/trust badges for the thank-you
   screen (via the `hidden` property in JS) is silently ignored. */
.wd-bnp-product-row[hidden] {
	display: none;
}

.wd-bnp-product-img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
	background: #f3f4f6;
}

.wd-bnp-product-info {
	flex: 1;
	min-width: 130px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 6px;
}

.wd-bnp-product-name {
	font-weight: 600;
	line-height: 1.3;
}

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

.wd-bnp-sale-price {
	font-size: 16px;
	font-weight: 700;
	color: #1a1a1a;
	white-space: nowrap;
}

/* Pill with a small tag icon (via ::before, so the JS that just sets
   textContent on the badge doesn't need to change) rather than a flat grey
   box - reads as a proper "variant" chip instead of a plain label, and sits
   pinned to the right of the row, inline with the price. */
.wd-bnp-qty-badge {
	flex-shrink: 0;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	background: var( --bnp-qty-bg );
	color: var( --bnp-qty-text );
	border: 1px solid rgba( 0, 0, 0, 0.07 );
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wd-bnp-qty-badge-editable {
	cursor: pointer;
}

.wd-bnp-qty-badge-editable:hover {
	background: color-mix( in srgb, var( --bnp-qty-bg ) 80%, #000 );
}

.wd-bnp-qty-badge::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;
}

.wd-bnp-trust-badges {
	display: flex;
	border: 1px solid var( --bnp-card-border );
	border-radius: 10px;
	padding: 12px 4px;
	margin-bottom: 16px;
}

.wd-bnp-trust-badges[hidden] {
	display: none;
}

.wd-bnp-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-weight: 600;
	color: #333;
	line-height: 1.25;
}

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

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

.wd-bnp-trust-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 4px 0 2px;
}

.wd-bnp-trust-footer-stats {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 12.5px;
	color: #555;
}

.wd-bnp-trust-footer-stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.wd-bnp-trust-footer-dot {
	color: #ccc;
}

.wd-bnp-trust-footer-badges {
	display: flex;
	align-items: center;
	gap: 0;
	width: 100%;
}

.wd-bnp-trust-footer-badge {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 6px;
	position: relative;
}

.wd-bnp-trust-footer-badge:not( :last-child )::after {
	content: '';
	position: absolute;
	right: 0;
	top: 15%;
	height: 70%;
	width: 1px;
	background: #ececec;
}

.wd-bnp-trust-footer-badge span {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	font-size: 12.5px;
	font-weight: 700;
	color: #222;
	white-space: nowrap;
}

.wd-bnp-trust-footer-badge span small {
	font-size: 10.5px;
	font-weight: 500;
	color: #888;
}

.wd-bnp-field-deliverable input {
	border-color: #1a7f37;
}

.wd-bnp-field-undeliverable input {
	border-color: #c0392b;
}

.wd-bnp-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
	color: #555;
}

.wd-bnp-summary-row[hidden] {
	display: none;
}

.wd-bnp-summary-discount-row .wd-bnp-summary-discount,
.wd-bnp-summary-discount-row .wd-bnp-summary-discount-label {
	color: #1a7f37;
}

.wd-bnp-summary-total-row {
	border-top: 1px solid #e2e2e8;
	margin-top: 6px;
	padding-top: 10px;
	font-size: 15px;
	font-weight: 700;
	color: #1a1a1a;
}

.wd-bnp-field {
	display: block;
	margin-bottom: 12px;
	font-size: 13px;
}

.wd-bnp-field span {
	display: block;
	margin-bottom: 4px;
	font-weight: 500;
	color: #333;
}

.wd-bnp-field input,
.wd-bnp-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 12px;
	/* min-height, not height: the control may still grow for a larger font or
	   a theme's line-height, it simply never renders shorter than the
	   configured height - which is what the icon/label/spinner offsets below
	   are all computed against. */
	min-height: var( --bnp-field-height, 48px );
	border: 1px solid #ddd;
	border-radius: 6px;
	/* !important because the theme (Blocksy) sets
	   `font-size: var(--theme-form-font-size, 16px)` on a compound selector
	   containing `input:is([type="url"], [type="tel"], [type="text"], ...)`.
	   `:is()` takes the specificity of its most specific argument, so that
	   scores (0,1,1) - element + attribute - which TIES with `.wd-bnp-field
	   input`, and the theme's sheet loads later so it won on source order.
	   Confirmed live: --bnp-field-size was correctly set to 16px on the modal
	   and inherited by the input, yet the computed size stayed 13px, because
	   the theme's own rule was the one applying and its
	   --theme-form-font-size is 13px - coincidentally the same as this rule's
	   fallback, which is what made it look like the setting did nothing. */
	font-size: var( --bnp-field-size, 13px ) !important;
	font-family: inherit;
	background: #fff;
}

/* The resting hint. Sized independently of the value text because the two do
   different jobs - the placeholder IS this design's visible label at rest
   (see the floating-label comment below), while the value is what the shopper
   typed. Kept out of the iOS rule below on purpose: Safari's focus-zoom is
   triggered by the INPUT's font-size, never the placeholder's, so this one is
   free to be smaller without causing a zoom. */
.wd-bnp-field input::placeholder,
.wd-bnp-floating input::placeholder {
	font-size: var( --bnp-field-placeholder, 13px );
	opacity: 1;
}

.wd-bnp-field input:focus,
.wd-bnp-field select:focus {
	outline: none;
	border-color: var( --bnp-accent );
}

.wd-bnp-field-error {
	display: block;
	color: #c0392b;
	font-size: 12px;
	margin-top: 4px;
}

/* Invalid-field state: red border + faint red tint on the control itself,
   so the error isn't just the small text line beneath it - matches the
   same red used for .wd-bnp-field-error/undeliverable pincode. */
.wd-bnp-field-invalid input,
.wd-bnp-field-invalid select {
	border-color: #c0392b !important;
	background: #fdf4f3;
}

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

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

/* Floating label - same technique the "Checkout for WooCommerce" plugin
   uses: the label stays in its natural DOM position (before the input, so
   it never has to fake overlap math) and is simply invisible at rest
   (opacity:0), while the input's own native `placeholder` attribute (set to
   the same text) shows the resting-state hint instead. A small JS handler
   toggles a "floated" class on value change - not on focus - matching a
   value actually being present (a <select> is always considered "floated"
   since it has no equivalent empty visual state). No transform/position
   math on the label at all, so there's nothing to miscalculate or overlap. */
.wd-bnp-floating {
	position: relative;
	margin-bottom: 12px;
}

.wd-bnp-floating input,
.wd-bnp-floating select {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 12px;
	min-height: var( --bnp-field-height, 48px );
	border: 1px solid #ddd;
	border-radius: 6px;
	/* Same theme collision as the rule above - see its comment. */
	font-size: var( --bnp-field-size, 13px ) !important;
	font-family: inherit;
	background: #fff;
	transition: padding .15s ease;
}

/* ── iOS focus zoom ──────────────────────────────────────────────────────
   Mobile Safari zooms the whole page when a focused input's font-size is
   under 16px, and does NOT zoom back out on blur - which on this popup
   pushes the close button and the payment buttons off-screen mid-checkout.
   The popup's default field size is 13px, so this applies out of the box.

   max() rather than a flat 16px so the setting is still respected when it is
   raised above 16 - this only ever enforces the floor Safari requires, and
   only on touch pointers, so desktop keeps exactly the configured size. */
@media ( pointer: coarse ) {
	.wd-bnp-field input,
	.wd-bnp-field select,
	.wd-bnp-floating input,
	.wd-bnp-floating select {
		/* !important for the same theme collision as the base rules, and
		   doubly needed here: without it this would lose to the theme AND to
		   this file's own !important base rule, leaving the iOS zoom floor
		   unenforced on exactly the devices it exists for. */
		font-size: max( 16px, var( --bnp-field-size, 13px ) ) !important;
	}
}

/* Native <select> chrome varies enough across browsers/OSes (its own
   internal vertical padding/line-height) that centering a leading icon
   against it via top:50% could land a couple px off depending on the
   platform - appearance:none makes the select's box model behave exactly
   like the text inputs it sits next to, so the same centering math is
   reliably correct for both. Re-adding a custom chevron since appearance:
   none also removes the native dropdown arrow. */
.wd-bnp-floating 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;
}

.wd-bnp-floating input:focus,
.wd-bnp-floating select:focus {
	outline: none;
	border-color: var( --bnp-accent );
}

.wd-bnp-floating .wd-bnp-float-label {
	display: block;
	position: absolute;
	left: 13px;
	top: 5px;
	font-size: var( --bnp-field-label, 11px );
	font-weight: 400;
	line-height: 1.2;
	color: #9aa0a6;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease-out;
	margin: 0;
}

.wd-bnp-floating.wd-bnp-label-floated input,
.wd-bnp-floating.wd-bnp-label-floated select {
	/* Enough top/bottom asymmetry to give the floated label real breathing
	   room above the value (rather than sitting right on top of it) - the
	   tradeoff is that the icon needs a matching downward shift below to
	   stay lined up with the value text again, see the icon-shift rule
	   further down. Only top/bottom are set (not the shorthand) so the
	   icon's left gap, set separately as padding-left:38px, is never
	   overwritten. */
	padding-top: 19px;
	padding-bottom: 7px;
}

.wd-bnp-floating.wd-bnp-label-floated .wd-bnp-float-label {
	opacity: 1;
}

/* The State dropdown opts out of the floating-label treatment entirely
   (marked wd-bnp-no-float-label, no label element rendered): its "Select
   State" placeholder / chosen value already reads as the field's own label,
   so a second "State" caption stacked on top was just redundant. Kept at the
   resting, non-floated padding so the option text stays vertically centred. */
.wd-bnp-no-float-label .wd-bnp-float-label {
	display: none;
}

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

/* Fixed-pixel top, deliberately NOT top:50%/transform:translateY(-50%) - a
   percentage (or calc() built from one) is relative to the WHOLE label,
   which includes .wd-bnp-field-error below the input. That error line is
   display:none while empty but takes up real height the instant JS writes
   a validation message into it (see .wd-bnp-field-error rules above), which
   made every field's icon visibly drop toward the error text the moment a
   field failed validation - not just PIN Code, every field with an icon.
   The input's own height is a fixed, known 48px regardless of what grows
   beneath it, so pinning the icon to a fixed pixel offset from the label's
   TOP (matching the input's actual vertical centre - see the floated-state
   comment below for exactly how these two numbers were derived) keeps it
   locked to the input in literally every case: empty, filled, valid,
   invalid, with or without an error message showing, any message length. */
.wd-bnp-has-icon svg {
	position: absolute;
	left: 12px;
	/* (height - icon) / 2, computed from the height setting rather than the
	   old hardcoded 15px (which was that same sum for a fixed 48px box), so
	   changing the field height keeps the icon centred instead of stranding
	   it near the top. Still a fixed pixel offset from the label's TOP, for
	   the reason in the comment above - it must not shift when the error line
	   below the input appears. */
	top: calc( ( var( --bnp-field-height, 48px ) - 18px ) / 2 );
	color: #9aa0a6;
	pointer-events: none;
	z-index: 1;
}

/* Once floated, the field's padding becomes asymmetric (19px reserved on
   top for the label, only 7px on the bottom) so the label has real
   breathing room above the value instead of sitting right on top of it.
   A text <input>'s value sits inside that padding box, so its visual
   centre shifts down accordingly - shifting the icon down to match
   (verified against the input's actual rendered text centre, not just
   derived from the padding numbers, since border-box sizing means the
   two don't work out to be exactly the same thing - 15px + 6px, not a
   recomputed padding-derived value) lines it back up with the value.
   This intentionally does NOT use :has() - it's unsupported on some
   mobile Safari versions, and since it silently fails closed (the icon
   just never gets shifted, instead of erroring), it was invisibly
   breaking this exact alignment on real phones while looking fine in
   desktop testing. It's also unnecessary: the only <select> in this form
   (billing_state) is marked wd-bnp-no-float-label, which - per
   buy-now.js's updateFloatLabel() - means it never receives the
   wd-bnp-label-floated class at all, so this plain compound-class
   selector already can't match a <select> without :has()'s help. */
.wd-bnp-has-icon.wd-bnp-label-floated svg {
	top: calc( ( ( var( --bnp-field-height, 48px ) - 18px ) / 2 ) + 6px );
}

/* !important here is deliberate: this is a narrow, additive override on top
   of the base/floated padding rules (which set padding via the same-
   specificity shorthand), guaranteeing the icon never collides with the
   placeholder/value text regardless of rule order. */
.wd-bnp-has-icon input,
.wd-bnp-has-icon select {
	padding-left: 38px !important;
}

.wd-bnp-has-icon .wd-bnp-float-label {
	left: 38px !important;
}

.wd-bnp-floating .wd-bnp-field-error {
	display: block;
	color: #c0392b;
	font-size: 12px;
	margin-top: 4px;
}

/* While empty (no validation error showing) the error line must not reserve
   any height - its 4px top margin would otherwise make the label taller than
   the control and drag the centred leading icon a couple of pixels low. It
   reappears automatically the moment JS writes an error message into it. */
.wd-bnp-floating .wd-bnp-field-error:empty {
	display: none;
}

/* Pincode lookup feedback (spinner while looking up, brief check on success)
   sits on the right edge of the PIN Code field, mirroring the leading icon's
   left-edge treatment - both anchor to .wd-bnp-floating's own
   position:relative, and both need the same downward shift once the label
   floats (see .wd-bnp-has-icon.wd-bnp-label-floated svg above) to stay
   centred on the value text rather than the taller floated-label box. */
.wd-bnp-field input[name="billing_pincode"] {
	padding-right: 24px !important;
}

/* Reserved permanently (not just while the tag is visible) so City's own
   text never reflows/jumps when the tag fades in or out - same approach as
   the PIN field's own permanently-reserved icon gutter above. */
.wd-bnp-field input[name="billing_city"] {
	padding-right: 98px !important;
}

/* Sits INSIDE the City field on its right edge, vertically centred in the
   fixed 48px input box - height:18px with top:15px is (48-18)/2 = 15,
   matching the same fixed-pixel-not-percentage centring approach used for
   every other field icon in this file (so an error message appearing below
   can never drag this off-centre either). Its own opacity/transform
   transition (not display:none) is what lets the 5s visible window in
   buy-now.js showAutoFilledTag() fade out smoothly instead of popping away
   instantly. */
.wd-bnp-autofilled-tag {
	position: absolute;
	/* (height - 20) / 2, for the 20px pill below - same fixed-pixel-not-
	   percentage approach, now derived from the height setting so the tag
	   stays centred at any field height. */
	top: calc( ( var( --bnp-field-height, 48px ) - 20px ) / 2 );
	right: 10px;
	height: 20px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Soft success combination: pale mint fill + deep green text and a hairline
	   green border, rather than a heavy solid-green block. Reads as a gentle
	   "done" confirmation that sits lightly on the white form instead of a
	   loud badge competing with the CTA buttons below. */
	background: #e7f8ee;
	color: #12805a;
	border: 1px solid #bfe9d1;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.35;
	/* Verified live via Range.getBoundingClientRect() on the actual text node
	   (tighter than the element box, i.e. real glyph ink) against
	   getBoundingClientRect() on the pill: with even top/bottom padding, the
	   text measured 1.9px of space above it and 3.09px below - "Auto-filled"
	   has no descenders (no g/j/p/q/y), so the line-height box's usual
	   reserved descender space at the bottom goes unused, biasing the glyphs
	   visually high inside a box that's centred purely by geometry. The 1.2px
	   asymmetric top padding compensates for exactly that - confirmed by the
	   same live measurement afterward showing 2.5px above and 2.5px below,
	   i.e. genuinely equal, not just close. */
	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-bnp-autofilled-tag.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

/* Fixed pixel top so it stays put regardless of the label growing when an
   error/note appears below (same rationale as .wd-bnp-has-icon svg above).
   Deliberately a plain, constant vertical centre in the input box -
   (height - 16) / 2 - and NOT the +6px floated-label shift the left-hand
   field icon uses: this is a right-edge status indicator, so it should read
   as centred in the field box, not tracking the value text's baseline. The
   status only ever appears once the pincode has a value (you can't look up
   an empty pincode), i.e. always in the floated state, so a floated-only
   override here was the bug that pushed both the spinner AND the success
   tick 6px low, out toward the field's bottom edge. Loader and tick share
   this one rule, so they land in the exact same centred spot. */
.wd-bnp-pincode-status {
	position: absolute;
	right: 10px;
	top: calc( ( var( --bnp-field-height, 48px ) - 16px ) / 2 );
	width: 16px;
	height: 16px;
	display: none;
	pointer-events: none;
}

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

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

/* position:static is the actual fix here (width/height/display alone are not
   enough): this svg sits inside the PIN Code field's own .wd-bnp-has-icon
   wrapper, so the generic ".wd-bnp-has-icon svg" rule above (position:
   absolute; left:12px; top:15px/21px - meant for the LEFT-hand field icon)
   also matches it as a plain descendant selector. That rule's
   position:absolute was being applied relative to THIS checkmark's own
   parent (.wd-bnp-pincode-status, itself absolutely positioned), which
   pushed the checkmark completely outside the visible 16x16 box - the exact
   "tick mark floating below/outside the field" bug. position:static cancels
   the inherited absolute positioning entirely, letting the svg render as a
   normal flex child of its is-success parent (display:flex;
   align-items:center; justify-content:center above), which is what actually
   centres it. */
.wd-bnp-pincode-status.is-success svg {
	position: static;
	width: 16px;
	height: 16px;
	display: block;
}

/* Deliberately calm, not error-styled (no red, no "invalid" language/border)
   - a well-formed 6-digit pincode the local database doesn't recognise isn't
   actually invalid input, so this reads as a helpful aside rather than
   something the shopper needs to fix. */
.wd-bnp-pincode-note {
	display: block;
	color: #8a8f98;
	font-size: 11.5px;
	margin-top: 4px;
	line-height: 1.35;
}

.wd-bnp-field-row {
	display: flex;
	gap: 10px;
	/* Top-align rather than stretch: a <select> and an <input> in the same
	   row don't render at identical heights, and stretching the shorter one
	   to match would push its absolutely-positioned leading icon off the
	   control's real vertical centre (the icon anchors to 50% of the label,
	   which would then be taller than the control it sits in). */
	align-items: flex-start;
}

.wd-bnp-field-row .wd-bnp-field {
	flex: 1;
}

.wd-bnp-field-row-4060 .wd-bnp-field:first-child {
	flex: 0 0 40%;
}

.wd-bnp-field-row-4060 .wd-bnp-field:last-child {
	flex: 1;
}

.wd-bnp-divider {
	width: var( --bnp-divider-width, 75% );
	height: 1px;
	margin: 16px auto;
	border: none;
	background: var( --bnp-divider-color, #cccccc );
}

.wd-bnp-gateway-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 16px 0 4px;
}

/* Compact single-line CTA buttons. Two distinct colors, not just one filled
   + one outlined - green for COD (the classic high-contrast "proceed/go"
   action color used across CRO-tested checkout buttons) and blue for
   online payment (the color most associated with trust/security in
   payment UI specifically - PayPal, Visa, and Razorpay's own brand all use
   it), so each gateway reads as its own clear, tappable action rather than
   one being an afterthought next to the other. */
.wd-bnp-gateway-btn {
	position: relative;
	/* Without an explicit z-index, position:relative alone does NOT establish
	   a stacking context - so the ripple-clip child's z-index:-1 would escape
	   to whatever ancestor stacking context sits above this button (likely
	   rendering it behind the whole modal, invisible) instead of just behind
	   this button's own background. Hovering happened to "fix" it by
	   accident, because :hover's transform/filter each independently create a
	   stacking context - meaning the ripple only ever appeared on hover. This
	   z-index:0 makes the button its own stacking context permanently, so the
	   ripple is correctly scoped (and visible) at rest too. */
	z-index: 0;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	border: none;
	border-radius: 10px;
	padding: 14px 14px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	color: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.12 );
	transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}

.wd-bnp-gateway-btn.wd-bnp-gateway-cod {
	background: #16a34a;
}

.wd-bnp-gateway-btn.wd-bnp-gateway-prepaid {
	background: #2563eb;
}

/* Ripple sweeps left-to-right across the button (a band travelling from
   just off the left edge to just off the right edge), rather than
   expanding outward from the center - a periodic pulse of a secondary
   shade to draw the eye without being a constant distraction. Scoped to
   just the prepaid button per the request; color, speed, width and how
   many pulses run at once are all admin-configurable. Each pulse is a real
   element (not a single ::after) so multiple staggered ripples can run at
   the same time; opacity is animated (not baked into the stored hex) so it
   fades in/out smoothly. `left` (not transform) carries the sweep so the
   travel distance is always relative to the button, regardless of the
   configured band width.

   The waves live inside .wd-bnp-gateway-ripple-clip, a dedicated
   inset:0/overflow:hidden layer, rather than the button clipping itself -
   that way the "Save X%" ribbon (a separate, later sibling of this wrapper)
   is never clipped even though it deliberately pokes out above the
   button's own top edge. z-index:-1 keeps the sweep behind the icon/title/
   price text without needing to touch those elements' own stacking. */
.wd-bnp-gateway-ripple-clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	z-index: -1;
}

.wd-bnp-gateway-ripple-wave {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100%;
	width: var( --wd-bnp-ripple-width, 100% );
	background: var( --wd-bnp-ripple-color, #93c5fd );
	border-radius: inherit;
	pointer-events: none;
	animation: wd-bnp-gateway-ripple var( --wd-bnp-ripple-duration, 2.6s ) ease-in-out infinite;
}

@keyframes wd-bnp-gateway-ripple {
	0% {
		left: -100%;
		opacity: 0.55;
	}
	60% {
		left: 100%;
		opacity: 0;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
}

.wd-bnp-gateway-btn:hover:not( :disabled ) {
	filter: brightness( 1.07 );
	transform: translateY( -1px );
	box-shadow: 0 5px 14px rgba( 0, 0, 0, 0.18 );
}

.wd-bnp-gateway-btn:active:not( :disabled ) {
	transform: translateY( 0 );
	filter: brightness( 0.98 );
}

.wd-bnp-gateway-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.2 );
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
}

.wd-bnp-gateway-icon svg {
	width: 15px;
	height: 15px;
}

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

.wd-bnp-gateway-title-row {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.wd-bnp-gateway-title {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

/* Optional short line under the title (e.g. "No extra charges", "Pay when
   your order arrives") - muted relative to the title, never shown at all
   when the admin leaves it blank (no reserved empty space). */
.wd-bnp-gateway-description {
	font-size: 11.5px;
	font-weight: 500;
	opacity: 0.8;
	line-height: 1.3;
}

/* No longer a small "Pay ₹X" second line under the title - the amount
   itself now takes the arrow's old spot, right-aligned, as the button's
   own prominent call-to-action figure. */
.wd-bnp-gateway-price {
	flex-shrink: 0;
	margin-left: auto;
	font-size: 16px;
	font-weight: 800;
	color: #fff;
	white-space: nowrap;
}

/* Solid, high-contrast chip (not a translucent white-on-color tint) sitting
   on the title row, next to the title text. */
.wd-bnp-gateway-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 );
}

/* Placeholder shown in the price slot while the gateway's real total is
   still being computed by the summary AJAX - keeps the button fully laid
   out (no reflow when the number arrives) with a subtle shimmer. */
.wd-bnp-amount-skeleton {
	display: inline-block;
	width: 52px;
	height: 0.85em;
	vertical-align: middle;
	border-radius: 4px;
	background: rgba( 255, 255, 255, 0.4 );
	animation: wd-bnp-amount-pulse 1s ease-in-out infinite;
}

@keyframes wd-bnp-amount-pulse {
	0%, 100% {
		opacity: 0.4;
	}
	50% {
		opacity: 0.75;
	}
}

.wd-bnp-gateway-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.wd-bnp-gateway-spinner {
	width: 15px;
	height: 15px;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: wd-bnp-spin 0.7s linear infinite;
	flex-shrink: 0;
}

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

.wd-bnp-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 32px 8px 20px;
	gap: 8px;
}

/* Header no longer occupies its own row (see .wd-bnp-modal.wd-bnp-success-active
   .wd-bnp-header-row above) - the success content can sit much closer to the
   modal's actual top edge instead of leaving the old header's worth of gap. */
.wd-bnp-modal.wd-bnp-success-active .wd-bnp-success {
	padding-top: 14px;
}

/* The `display: flex` above has higher specificity than the browser's own
   UA-stylesheet `[hidden] { display: none }` rule, so without this override
   the `hidden` attribute set in the template markup is silently ignored and
   the whole screen renders open on page load, before any order exists. */
.wd-bnp-success[hidden] {
	display: none;
}

.wd-bnp-success-icon {
	margin-bottom: 6px;
}

.wd-bnp-modal.wd-bnp-success-active .wd-bnp-success-icon {
	margin-top: 2px;
}

/* Ring fades/scales in first, then the check draws itself along the path -
   a plain static checkmark reads as just another icon on the page, this
   reads as confirmation actually happening. */
.wd-bnp-success-icon-ring {
	transform-origin: center;
	animation: wd-bnp-success-ring-in 0.35s ease-out both;
}

.wd-bnp-success-icon-check {
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: wd-bnp-success-check-in 0.35s 0.25s ease-out forwards;
}

@keyframes wd-bnp-success-ring-in {
	from {
		opacity: 0;
		transform: scale( 0.6 );
	}
	to {
		opacity: 1;
		transform: scale( 1 );
	}
}

@keyframes wd-bnp-success-check-in {
	to {
		stroke-dashoffset: 0;
	}
}

.wd-bnp-success-heading {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #1a1a1a;
	margin: 0;
}

.wd-bnp-success-message {
	font-size: 13.5px;
	font-weight: 500;
	color: #666;
	margin: 4px 0 0;
}

.wd-bnp-success-order-number {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 600;
	color: #666;
	background: #f4f4f7;
	padding: 4px 12px;
	border-radius: 999px;
	margin: 2px 0 4px;
}

.wd-bnp-success-order-number[hidden] {
	display: none;
}

/* ── Thank-you screen: Ordered -> Shipped -> Delivery projection ────────
   One flex row of 3 equal-width steps. Dot AND label live inside the SAME
   step box (both centered by that box's own text-align/flex-centering), so
   they can never drift apart the way two independently-aligned rows could.
   The connector to the NEXT step is an absolutely-positioned bar anchored
   at left:50% (this step's own center) spanning width:100% (out to the
   next step's center, since columns are equal width) - a classic
   connected-step pattern, inherently exact regardless of container width,
   dot size, or text length. (The post-order screens draw their own timeline in
   post-order.css.) */
.wd-bnp-success-timeline {
	box-sizing: border-box;
	/* .wd-bnp-success is a column flexbox with align-items:center, which
	   sizes children to their own content width (shrink-to-fit) rather than
	   stretching them - an explicit width is required here, or this element
	   collapses to only as wide as its content needs, badly cramping the
	   dots/labels. width is 100% of the PARENT's content box plus the full
	   bleed amount added back (see margin below), which is what actually
	   pushes the Ordered/Delivery dots close to the popup's edges instead
	   of bunched toward the center. Fixed px bleed against the modal's
	   fixed px padding keeps a consistent (never-clipping) gutter at any
	   viewport width. */
	width: calc( 100% + 40px );
	margin: 16px -20px 8px;
	padding: 0 6px;
	/* Reserves the steps row's typical rendered height (46px dot + label +
	   date, see .wd-bnp-timeline-* below) BEFORE its content actually
	   arrives (a separate, later AJAX call - see loadPopupRecap() in
	   buy-now.js) - without this, the element sits at 0 height until that
	   call resolves, then jumps to full height, visibly shoving the rest of
	   the thank-you screen down a moment after the shopper already started
	   reading it. Empty-but-reserved is the fix; [hidden] below still fully
	   collapses it for the rare case the AJAX call fails outright. */
	min-height: 108px;
}

.wd-bnp-success-timeline[hidden] {
	display: none;
	min-height: 0;
}

.wd-bnp-timeline-steps {
	display: flex;
}

.wd-bnp-timeline-step {
	flex: 1;
	min-width: 0;
	text-align: center;
	position: relative;
}

.wd-bnp-timeline-connector {
	position: absolute;
	left: 50%;
	width: 100%;
	top: 23px;
	height: 3px;
	border-radius: 2px;
	z-index: 0;
}

.wd-bnp-timeline-connector--done {
	background: var( --bnp-accent );
}

/* A dashed connector means the leg it leads TO hasn't happened yet - its
   state tracks the step it points at, not the (already-done) step behind it. */
.wd-bnp-timeline-connector--pending {
	height: 0;
	top: 24.5px;
	border-top: 3px dashed #d7dbe2;
}

.wd-bnp-timeline-dot-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wd-bnp-timeline-dot {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	background: #e5e7eb;
	color: #9ca3af;
}

.wd-bnp-timeline-dot svg {
	width: 22px;
	height: 22px;
}

.wd-bnp-timeline-dot-wrap--done .wd-bnp-timeline-dot {
	background: var( --bnp-accent );
	color: #fff;
}

.wd-bnp-timeline-dot-wrap--estimated .wd-bnp-timeline-dot {
	background: color-mix( in srgb, var( --bnp-accent ) 12%, #fff );
	color: var( --bnp-accent );
	border: 2px dashed var( --bnp-accent );
}

/* The delivery step is (almost always, at the moment an order is placed)
   still an open-ended estimate - a gentle pulsing ring gives it a sense of
   "in motion / still to come" rather than sitting static and inert. */
.wd-bnp-timeline-dot-wrap--delivery.wd-bnp-timeline-dot-wrap--estimated .wd-bnp-timeline-dot {
	animation: wd-bnp-timeline-pulse 2s ease-in-out infinite;
}

@keyframes wd-bnp-timeline-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 color-mix( in srgb, var( --bnp-accent ) 35%, transparent );
	}
	50% {
		box-shadow: 0 0 0 6px color-mix( in srgb, var( --bnp-accent ) 0%, transparent );
	}
}

.wd-bnp-timeline-label {
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 700;
	color: #333;
}

.wd-bnp-timeline-date {
	font-size: 11px;
	color: #888;
	margin-top: 3px;
	line-height: 1.4;
}

.wd-bnp-timeline-date--animate {
	animation: wd-bnp-timeline-fade-up 0.4s ease-out both;
}

/* Shipped/Delivery's dates before loadPopupRecap()'s AJAX resolves - a
   pulsing bar standing in for text that isn't known yet, rather than either
   blank space or the whole timeline waiting to appear (see
   buildTimelineSkeletonSteps() in buy-now.js). */
.wd-bnp-timeline-date--loading {
	display: inline-block;
	width: 34px;
	height: 11px;
	border-radius: 4px;
	background: linear-gradient( 90deg, #ececec 25%, #f6f6f6 50%, #ececec 75% );
	background-size: 200% 100%;
	animation: wd-bnp-timeline-shimmer 1.3s ease-in-out infinite;
}

@keyframes wd-bnp-timeline-shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

@keyframes wd-bnp-timeline-fade-up {
	from {
		opacity: 0;
		transform: translateY( 4px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

.wd-bnp-timeline-est-tag {
	display: block;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --bnp-accent );
	margin-top: 2px;
}

.wd-bnp-success-payment-panel {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	padding: 10px 16px;
	border-radius: 10px;
	width: 100%;
	box-sizing: border-box;
}

.wd-bnp-success-payment-panel[hidden] {
	display: none;
}

.wd-bnp-success-cod-panel {
	border: 1px solid #fde68a;
	background: #fffbeb;
}

.wd-bnp-success-paid-panel {
	border: 1px solid #bbf7d0;
	background: #f0fdf4;
}

.wd-bnp-success-payment-panel span {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	line-height: 1.3;
}

.wd-bnp-success-panel-label {
	font-size: 13.5px;
	color: #666;
}

.wd-bnp-success-panel-amount {
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
}

/* wc_price() wraps its output in a <bdi> (for RTL-safe currency display) that
   some themes' own CSS forces onto its own line inside a flex/column
   ancestor - explicitly keeping the whole amount (symbol + figure) as one
   inline run here fixes that regardless of what the active theme does. */
.wd-bnp-success-panel-amount bdi,
.wd-bnp-success-panel-amount .woocommerce-Price-amount,
.wd-bnp-success-panel-amount .woocommerce-Price-currencySymbol {
	display: inline;
	white-space: nowrap;
}

.wd-bnp-success-cod-amount {
	color: #78350f;
}

.wd-bnp-success-paid-amount {
	color: #15803d;
}

/* ── Order/address recap ─────────────────────────────────────────────── */
.wd-bnp-success-details {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
	text-align: left;
}

.wd-bnp-success-details[hidden] {
	display: none;
}

.wd-bnp-success-section {
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 14px 16px;
	background: #fcfcfd;
}

.wd-bnp-success-section-title {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #999;
	margin-bottom: 8px;
}

.wd-bnp-success-item-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid #f0f0f0;
}

.wd-bnp-success-item-img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
	background: #f4f4f7;
}

.wd-bnp-success-item-info {
	min-width: 0;
}

.wd-bnp-success-item-name {
	font-size: 13.5px;
	font-weight: 600;
	color: #222;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wd-bnp-success-item-qty {
	font-size: 12px;
	color: #888;
}

.wd-bnp-success-details .wd-bnp-summary-row {
	padding: 3px 0;
	font-size: 13px;
}

.wd-bnp-success-total-row {
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid #f0f0f0;
	font-weight: 700;
	color: #222;
}

.wd-bnp-success-address-name {
	font-size: 13.5px;
	font-weight: 600;
	color: #222;
}

.wd-bnp-success-address-lines {
	font-size: 13px;
	color: #555;
	line-height: 1.4;
	margin-top: 2px;
}

.wd-bnp-success-address-phone {
	font-size: 13px;
	color: #555;
	margin-top: 2px;
}

.wd-bnp-success-address-email {
	font-size: 13px;
	color: #555;
	margin-top: 2px;
}

.wd-bnp-success-address-email[hidden] {
	display: none;
}

/* "View Full Order Details" - the shopper's permanent link back to this
   order (WCO_Order_View); the sole call-to-action on the thank-you screen. */
.wd-bnp-success-view-order,
.wd-bnp-success-view-order:link,
.wd-bnp-success-view-order:visited,
.wd-bnp-success-view-order:hover,
.wd-bnp-success-view-order:active,
.wd-bnp-success-view-order:focus {
	/* Explicit for every pseudo-class, not just the base selector - this is
	   an <a>, and a browser's default :visited color (often a dull
	   purple/gray) can otherwise show through once the shopper has followed
	   it and come back, making the white label unreadable against the
	   purple background. */
	display: inline-block;
	margin-top: 18px;
	padding: 11px 22px;
	border-radius: 10px;
	background: var( --bnp-accent, #7239ea );
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
}

.wd-bnp-success-view-order:hover,
.wd-bnp-success-view-order:active {
	filter: brightness( 0.94 );
}

.wd-bnp-success-view-order[hidden] {
	display: none;
}

.wd-bnp-success-address-note {
	font-size: 11.5px;
	color: #999;
	text-align: center;
	margin: 10px 0 0;
	line-height: 1.5;
}

.wd-bnp-success-address-note[hidden] {
	display: none;
}

/* ── Razorpay cancelled: same "stay in the popup" treatment as success,
   offering a retry rather than ever navigating to WooCommerce's own
   order-pay/checkout pages. ──────────────────────────────────────────── */
.wd-bnp-payment-retry {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 28px 16px;
	gap: 10px;
}

.wd-bnp-payment-retry[hidden] {
	display: none;
}

.wd-bnp-payment-retry-heading {
	font-size: 17px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
}

.wd-bnp-payment-retry-message {
	font-size: 14px;
	color: #555;
	margin: 0;
}

.wd-bnp-payment-retry-btn {
	margin-top: 6px;
	padding: 11px 20px;
	border: none;
	background: var( --bnp-accent, #7239ea );
	color: #fff;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.wd-bnp-inline-error {
	color: #c0392b;
	font-size: 13px;
	margin-top: 8px;
}


/* Applied to the real WooCommerce .variations table on the product page
   itself (not inside the popup) when the shopper clicks the variant chip
   and the popup closes - a brief pulsing outline so it's obvious what to
   look at and change, then clears itself after ~2s. */
.wd-bnp-variations-highlight {
	/* --wd-bnp-variations-accent is set inline by highlightVariations() in
	   buy-now.js, read from the same merchant-configured accent color the
	   popup itself uses - falls back to the popup's own default purple if
	   that's ever unset for some reason. */
	--wd-bnp-variations-accent-rgb: 114, 57, 234;
	animation: wd-bnp-variations-pulse 1.1s ease-in-out 2;
	border-radius: 8px;
}

@keyframes wd-bnp-variations-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba( var( --wd-bnp-variations-accent-rgb ), 0 );
	}
	50% {
		box-shadow: 0 0 0 6px rgba( var( --wd-bnp-variations-accent-rgb ), 0.25 );
	}
}

body.wd-bnp-open {
	overflow: hidden;
}

/* ── Background scroll lock, touch devices ───────────────────────────────
   `overflow: hidden` on the body above is enough on desktop but iOS Safari
   simply ignores it for touch scrolling, so the product page kept scrolling
   under the open popup - most obviously when the drag started on the backdrop
   around the modal, which has nothing scrollable of its own.

   position:fixed is what actually pins it: with the body taken out of flow
   there is no document scroll left to chain to, so a touch anywhere outside
   the modal does nothing. The page would jump to the top on its own, so
   buy-now.js records the offset into --wd-bnp-scroll-y before locking and
   scrolls back to it on close.

   Scoped to coarse pointers deliberately. On desktop, position:fixed removes
   the scrollbar and shifts the whole page sideways by its width the moment
   the popup opens - the same visible jump that had to be removed from the
   checkout's own blocking overlay. Desktop keeps the overflow rule above,
   which works there. */
@media ( pointer: coarse ) {
	body.wd-bnp-open {
		position: fixed;
		top: var( --wd-bnp-scroll-y, 0 );
		left: 0;
		right: 0;
		width: 100%;
	}
}

/* ── Settings-page live preview pane ─────────────────────────────────── */
.wd-bnp-preview-frame {
	background: #f4f4f7;
	border-radius: 12px;
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wd-bnp-preview-frame .wd-bnp-overlay {
	position: static;
	background: transparent;
	padding: 0;
}

.wd-bnp-preview-frame .wd-bnp-modal {
	box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.12 );
}

/* ── Thank-you screen: the order-received page's own cards ────────────────
   Order Summary and Delivery Address are drawn by post-order.css (loaded on
   demand once an order exists) inside a `wd-npo` / `wd-npo-shell` pair. The
   thank-you screen is centre-aligned; these cards are not. */
.wd-bnp-success-details .wd-bnp-npo-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: none;
	margin: 0;
	text-align: left;
}

.wd-bnp-success-details .wd-bnp-npo-cards .wd-npo-card {
	margin: 0;
}