/* 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;
}

.wd-bnp-modal {
	background: #fff;
	border-radius: 12px;
	max-width: 420px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	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;
}

.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 );
}

.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;
}

/* ── Bottom section layout variants ──────────────────────────────────────
   V1 (default) is the design above, untouched. V2/V3/V4 are CSS-only skins
   over the exact same gateway-button and trust-footer markup - no separate
   DOM per variant - so the admin live preview and the real popup can never
   fall out of sync with whichever is selected in Settings → Payment
   Buttons → Bottom Section Layout, and switching is just one class on the
   modal. `!important` is used deliberately in a few spots: each button's
   background/text color is written as an inline style in JS from the
   admin's configured per-gateway colors, and a skin has to be able to
   override that inline color with its own scheme. */

/* V2 — "Selector Cards": side-by-side outlined cards on a white surface,
   a radio-style check indicator, and a "BEST VALUE" ribbon that appears
   automatically on whichever gateway currently carries a real configured
   discount (no separate flag - keyed off the same .wd-bnp-gateway-save tag
   used elsewhere, so it can never advertise a saving that isn't real). */
.wd-bnp-bottom-v2 .wd-bnp-gateway-buttons {
	flex-direction: row;
}

.wd-bnp-bottom-v2 .wd-bnp-gateway-btn {
	background: #fff !important;
	color: #1a1a1a !important;
	border: 2px solid #e5e7eb;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	box-shadow: none;
	gap: 8px;
}

.wd-bnp-bottom-v2 .wd-bnp-gateway-btn.wd-bnp-gateway-cod {
	border-color: #bbf7d0;
}

.wd-bnp-bottom-v2 .wd-bnp-gateway-btn.wd-bnp-gateway-prepaid {
	border-color: #c7d2fe;
}

.wd-bnp-bottom-v2 .wd-bnp-gateway-btn:has( .wd-bnp-gateway-save ) {
	border-color: var( --bnp-accent );
	box-shadow: 0 0 0 1px var( --bnp-accent );
}

/* The ripple effect's sweep only suits the solid-fill V1 button - on V2's
   plain white/bordered card it would just be an odd grey smear. */
.wd-bnp-bottom-v2 .wd-bnp-gateway-ripple-clip {
	display: none;
}

.wd-bnp-bottom-v2 .wd-bnp-gateway-btn:has( .wd-bnp-gateway-save )::before {
	content: 'BEST VALUE';
	position: absolute;
	top: -9px;
	right: 12px;
	background: var( --bnp-accent );
	color: #fff !important;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .05em;
	padding: 3px 9px;
	border-radius: 999px;
}

.wd-bnp-bottom-v2 .wd-bnp-gateway-icon {
	background: rgba( 0, 0, 0, 0.06 ) !important;
}

.wd-bnp-bottom-v2 .wd-bnp-gateway-icon,
.wd-bnp-bottom-v2 .wd-bnp-gateway-icon svg,
.wd-bnp-bottom-v2 .wd-bnp-gateway-title,
.wd-bnp-bottom-v2 .wd-bnp-gateway-price,
.wd-bnp-bottom-v2 .wd-bnp-gateway-amount {
	color: #1a1a1a !important;
}

.wd-bnp-bottom-v2 .wd-bnp-gateway-btn::after {
	content: '';
	position: absolute;
	top: 12px;
	right: 12px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #d1d5db;
	box-sizing: border-box;
}

.wd-bnp-bottom-v2 .wd-bnp-gateway-btn:has( .wd-bnp-gateway-save )::after {
	border-color: var( --bnp-accent );
	background: var( --bnp-accent );
	box-shadow: inset 0 0 0 3px #fff;
}

.wd-bnp-bottom-v2 .wd-bnp-trust-footer-stats {
	justify-content: flex-start;
}

/* V3 — "Compact Chips": small icon-on-top pill buttons side by side, like
   a mobile quick-pay row, plus a softly tinted card wrapping the trust
   footer instead of a plain border. */
.wd-bnp-bottom-v3 .wd-bnp-gateway-buttons {
	flex-direction: row;
	gap: 8px;
}

.wd-bnp-bottom-v3 .wd-bnp-gateway-btn {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 12px 8px;
	border-radius: 16px;
}

.wd-bnp-bottom-v3 .wd-bnp-gateway-body {
	align-items: center;
}

.wd-bnp-bottom-v3 .wd-bnp-gateway-title-row {
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.wd-bnp-bottom-v3 .wd-bnp-gateway-title {
	font-size: 11.5px !important;
	font-weight: 600 !important;
}

.wd-bnp-bottom-v3 .wd-bnp-gateway-price {
	font-size: 15px !important;
	font-weight: 800 !important;
}

.wd-bnp-bottom-v3 .wd-bnp-gateway-save {
	font-size: 9px;
	padding: 1px 6px;
}

.wd-bnp-bottom-v3 .wd-bnp-gateway-icon {
	width: 32px;
	height: 32px;
}

.wd-bnp-bottom-v3 .wd-bnp-trust-footer {
	background: #f8f9fb;
	border-radius: 12px;
	padding: 14px;
}

.wd-bnp-bottom-v3 .wd-bnp-trust-footer-badges {
	flex-wrap: wrap;
	row-gap: 10px;
	justify-content: center;
}

/* V4 — "Spotlight": the prepaid gateway becomes one large glowing primary
   CTA (reordered to the top regardless of which gateway the site lists
   first), Cash on Delivery drops to a plain underlined text link beneath
   it - a common "nudge toward the preferred method" pattern - and the
   trust footer becomes a bordered card with a faint lock watermark. */
.wd-bnp-bottom-v4 .wd-bnp-gateway-buttons {
	gap: 8px;
}

.wd-bnp-bottom-v4 .wd-bnp-gateway-btn.wd-bnp-gateway-prepaid {
	order: 1;
	padding: 16px;
	box-shadow: 0 4px 18px color-mix( in srgb, var( --bnp-accent ) 35%, transparent );
	animation: wd-bnp-spotlight-glow 2.4s ease-in-out infinite;
}

.wd-bnp-bottom-v4 .wd-bnp-gateway-btn.wd-bnp-gateway-cod {
	order: 2;
	background: transparent !important;
	box-shadow: none;
	padding: 6px 4px;
	justify-content: center;
	gap: 6px;
}

.wd-bnp-bottom-v4 .wd-bnp-gateway-btn.wd-bnp-gateway-cod .wd-bnp-gateway-icon {
	display: none;
}

.wd-bnp-bottom-v4 .wd-bnp-gateway-btn.wd-bnp-gateway-cod .wd-bnp-gateway-body {
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

.wd-bnp-bottom-v4 .wd-bnp-gateway-btn.wd-bnp-gateway-cod .wd-bnp-gateway-title,
.wd-bnp-bottom-v4 .wd-bnp-gateway-btn.wd-bnp-gateway-cod .wd-bnp-gateway-price {
	color: #666 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: underline;
}

@keyframes wd-bnp-spotlight-glow {
	0%, 100% {
		box-shadow: 0 4px 18px color-mix( in srgb, var( --bnp-accent ) 35%, transparent );
	}
	50% {
		box-shadow: 0 4px 26px color-mix( in srgb, var( --bnp-accent ) 60%, transparent );
	}
}

.wd-bnp-bottom-v4 .wd-bnp-trust-footer {
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 14px;
	position: relative;
	overflow: hidden;
}

.wd-bnp-bottom-v4 .wd-bnp-trust-footer::before {
	content: '';
	position: absolute;
	right: -10px;
	bottom: -12px;
	width: 70px;
	height: 70px;
	opacity: 0.05;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9z'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

.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-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;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 13px;
	font-family: inherit;
	background: #fff;
}

.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;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 13px;
	font-family: inherit;
	background: #fff;
	transition: padding .15s ease;
}

/* 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: 10.5px;
	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;
	top: 15px;
	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: 21px;
}

/* !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;
	/* (48-20)/2 = 14 - recomputed for the taller 20px pill below (was 18px/
	   top:15px), same fixed-pixel-not-percentage approach. */
	top: 14px;
	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 48px input box -
   (48-16)/2 = 16px - 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: 16px;
	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;
}

/* 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;
}

/* 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-message {
	font-size: 18px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 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;
}

.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: column;
	align-items: flex-start;
	line-height: 1.3;
}

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

.wd-bnp-success-panel-amount {
	font-size: 15px;
	font-weight: 700;
}

.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: 10px;
	padding: 12px 14px;
}

.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-continue {
	margin-top: 16px;
	padding: 11px 20px;
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	cursor: pointer;
}

.wd-bnp-success-continue:hover {
	background: #f7f7f7;
}

/* ── 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-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;
}

/* ── 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 );
}