/*
 * Elementor Shop Buy Now — the three-dialog BUY NOW flow.
 *
 * Every value here is taken from the reference storefront's own compiled
 * stylesheet (the `data-v-082e31b2` / `data-v-78529122` scoped blocks in
 * hggorras' ShopHome bundle), not measured off a screenshot. Colours, radii,
 * letter-spacings and gradients are the original values.
 *
 * The dialogs are printed in wp_footer, i.e. OUTSIDE Elementor's `.elementor`
 * wrapper, so Elementor's `.elementor img { border-radius: 0; ... }` rule does
 * not reach them. The `!important`s below are belt-and-braces for the case
 * where a theme or a later plugin tries to restyle a bare `img`.
 *
 * Naming: `esbn-` (Elementor Shop Buy Now). Deliberately NOT `espp-`, so this
 * plugin shares no class names with the products grid and can be removed
 * without touching it.
 */

/* ---------------------------------------------------------------- tokens */

.esbn-layer,
.esbn-toast,
.esbn-confirm-modal,
.esbn-success-modal {
	/* Overridable in one place; these are the reference's values. */
	--esbn-gold: #aa771c;
	--esbn-gold-soft: #e6c875;
	--esbn-gold-mid: #e5bd5d;
	--esbn-gold-deep: #b38f3d;
	--esbn-gold-pale: #f5dfa0;
	--esbn-ink: #171717;
	--esbn-ink-soft: #262626;
	--esbn-muted: #737373;
	--esbn-muted-2: #a3a3a3;
	--esbn-body: #525252;
	--esbn-line: #e5e5e5;
	--esbn-line-soft: #f5f5f5;
	--esbn-field: #fafafa;
	--esbn-danger: #dc2626;
	--esbn-ok-bg: #ecfdf5;
	--esbn-ok-line: #a7f3d0;
	--esbn-ok-text: #065f46;
	--esbn-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	--esbn-radius: 24px;
	--esbn-btn-radius: 16px;
	--esbn-shadow: 0 25px 60px rgba(0, 0, 0, 0.149);

	box-sizing: border-box;
}

.esbn-layer *,
.esbn-layer *::before,
.esbn-layer *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------- layers */

.esbn-layer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-family: 'Jost', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--esbn-ink);
	opacity: 0;
	transition: opacity 0.25s ease;
}

/* `hidden` is what the JS toggles, so it must win over the flex display.
   Stated with `display:none` rather than relying on the UA default because the
   layer above sets `display:flex` at the same specificity. */
.esbn-layer[hidden] {
	display: none;
}

.esbn-layer.is-open {
	opacity: 1;
}

/* No `user-select:none` here on purpose: the reference disables selection
   because it is an app shell, but the whole point of the code box is to let a
   shopper select and copy the reference by hand when the clipboard API is
   unavailable. */

.esbn-backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: default;
}

/* The confirm dialog is one layer above the detail dialog, exactly as the
   reference stacks them (130 vs 120). */
.esbn-confirm {
	z-index: 130;
	background: rgba(7, 7, 8, 0.62);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* The success dialog sits BELOW both in the reference (z-index 100). Keeping
   that number matters: it is why a stale confirm dialog would appear on top of
   the receipt rather than behind it. */
.esbn-success {
	z-index: 100;
}

/* Shared entrance animation for the two centred cards. */
@keyframes esbn-modal-in {
	0% {
		opacity: 0;
		transform: translateY(8px) scale(0.99);
	}

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

/* ------------------------------------------------------------------ body */

body.esbn-locked {
	overflow: hidden;
}

/* =============================================== 1. product detail modal */

.esbn-panel {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 896px;
	overflow: hidden;
	border: 1px solid var(--esbn-line);
	border-radius: var(--esbn-radius);
	background: #fff;
	box-shadow: var(--esbn-shadow);
	animation: esbn-modal-in 0.25s ease-out both;
}

/* --------------------------------------- added-to-cart / copied notice */

/* Fixed to the viewport rather than absolute inside a panel: this one element
   is shared by the detail dialog (added to cart) and the receipt dialog (code
   copied), and the two are never open at the same time. Sits above every
   layer, including the confirm dialog's z-index 130. */
.esbn-toast {
	position: fixed;
	top: 24px;
	left: 50%;
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 32px);
	padding: 12px 24px;
	border: 1px solid var(--esbn-ok-line);
	border-radius: 999px;
	background: var(--esbn-ok-bg);
	box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
	color: var(--esbn-ok-text);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.025em;
	white-space: nowrap;
	transform: translateX(-50%);
}

.esbn-toast[hidden] {
	display: none;
}

/* The one notice that is not good news: the dialog's session expired and the
   script is about to reopen the product. Same pill, warning colours — red 50 /
   200 / 800, the mirror of the emerald tokens above. */
.esbn-toast.is-error {
	border-color: #fecaca;
	background: #fef2f2;
	color: #991b1b;
}

/* `.esbn-toast svg` below sets the mark's colour directly, and a colour set on
   the element always beats the one inherited from this block, whatever the
   specificity. So it has to be overridden on the mark itself, not the pill. */
.esbn-toast.is-error svg {
	color: var(--esbn-danger);
}

.esbn-toast .esbn-toast-warn {
	display: none;
}

.esbn-toast.is-error .esbn-toast-ok {
	display: none;
}

.esbn-toast.is-error .esbn-toast-warn {
	display: block;
}

.esbn-toast svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: #10b981;
}

/* --------------------------------------------------------- close button */

.esbn-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border: 1px solid var(--esbn-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	color: var(--esbn-muted);
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.esbn-close:hover {
	background: var(--esbn-line-soft);
	color: var(--esbn-ink-soft);
}

.esbn-close svg {
	width: 18px;
	height: 18px;
}

/* ------------------------------------------------------------- two-column */

.esbn-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.esbn-showcase {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	border-bottom: 1px solid var(--esbn-line-soft);
	background: var(--esbn-field);
}

.esbn-image-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--esbn-btn-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.esbn-image-frame .esbn-image {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* The product code, laid over the bottom-left of the picture. Monospace and
   wide-tracked so it reads as an identifier rather than a caption. */
.esbn-watermark {
	position: absolute;
	bottom: 16px;
	left: 24px;
	padding: 4px 12px;
	border-radius: 6px;
	background: rgba(23, 23, 23, 0.9);
	color: var(--esbn-line);
	font-family: var(--esbn-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	line-height: 1.25;
}

.esbn-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 32px;
}

.esbn-info {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.esbn-code {
	display: block;
	margin-bottom: 4px;
	color: var(--esbn-gold);
	font-family: var(--esbn-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.25;
	text-transform: uppercase;
}

.esbn-name {
	margin: 0;
	color: var(--esbn-ink);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1.25;
}

.esbn-price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--esbn-line-soft);
	border-bottom: 1px solid var(--esbn-line-soft);
}

.esbn-price-label {
	color: var(--esbn-muted-2);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.25;
	text-transform: uppercase;
}

.esbn-price {
	color: var(--esbn-gold);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1.25;
}

.esbn-selector-label {
	display: block;
	margin-bottom: 12px;
	color: var(--esbn-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.25;
	text-transform: uppercase;
}

/* ------------------------------------------------------------ qty stepper */

.esbn-qty {
	display: flex;
	align-items: center;
	width: fit-content;
	overflow: hidden;
	border: 1px solid var(--esbn-line);
	border-radius: 12px;
	background: var(--esbn-field);
}

.esbn-qty button {
	padding: 8px 14px;
	border: 0;
	background: transparent;
	color: var(--esbn-muted);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.esbn-qty button:hover:not(:disabled) {
	background: var(--esbn-line-soft);
	color: var(--esbn-ink-soft);
}

.esbn-qty button:disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

/* The reference centres the number in a fixed 60px well with hairline rules on
   both sides, so the stepper keeps one width whatever the quantity is. */
.esbn-qty input {
	width: 60px;
	min-width: 0;
	padding: 8px 10px;
	border: 0;
	border-right: 1px solid var(--esbn-line);
	border-left: 1px solid var(--esbn-line);
	outline: none;
	background: #fff;
	color: var(--esbn-ink-soft);
	font-family: var(--esbn-mono);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

.esbn-qty input:focus {
	position: relative;
	box-shadow: inset 0 0 0 1px var(--esbn-gold-deep);
}

/* ---------------------------------------------------------------- footer */

.esbn-footer {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--esbn-line-soft);
}

.esbn-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.esbn-action {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	padding: 16px;
	border-radius: var(--esbn-btn-radius);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.25;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.esbn-action svg {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.esbn-action:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.esbn-action-cart {
	border: 1px solid #d4d4d4;
	background: var(--esbn-field);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	color: var(--esbn-ink-soft);
}

.esbn-action-cart:hover:not(:disabled) {
	background: var(--esbn-line-soft);
}

.esbn-action-buy {
	border: 0;
	background: linear-gradient(90deg, var(--esbn-gold), var(--esbn-gold-soft));
	box-shadow: 0 4px 12px rgba(207, 161, 67, 0.3);
	color: #070708;
}

.esbn-action-buy:hover:not(:disabled) {
	box-shadow: 0 6px 20px rgba(207, 161, 67, 0.5);
	transform: scale(1.01);
}

.esbn-close-wide {
	width: 100%;
	margin-top: 12px;
	padding: 14px 24px;
	border: 1px solid var(--esbn-line);
	border-radius: var(--esbn-btn-radius);
	background: #fff;
	color: var(--esbn-muted);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.esbn-close-wide:hover {
	background: var(--esbn-field);
	color: var(--esbn-ink-soft);
}

/* ================================================== 2. confirm dialog */

.esbn-confirm-modal {
	position: relative;
	width: min(100%, 420px);
	padding: 32px;
	border: 1px solid rgba(207, 161, 67, 0.28);
	border-radius: var(--esbn-radius);
	background: #fff;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
	text-align: center;
	animation: esbn-modal-in 0.25s ease-out both;
}

/* A text multiplication sign, not an icon — that is what the reference
   renders, and it is why this one is 22px in a 34px circle while the detail
   dialog's is an 18px SVG in a 40px circle. */
.esbn-confirm-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	width: 34px;
	height: 34px;
	padding: 0;
	place-items: center;
	border: 1px solid var(--esbn-line);
	border-radius: 50%;
	background: #fff;
	color: var(--esbn-muted);
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.esbn-confirm-close:hover {
	background: var(--esbn-line-soft);
	color: var(--esbn-ink-soft);
}

.esbn-confirm-icon {
	display: grid;
	width: 64px;
	height: 64px;
	margin: 0 auto;
	place-items: center;
	border-radius: 50%;
	background: rgba(207, 161, 67, 0.12);
	color: var(--esbn-gold);
}

.esbn-confirm-icon svg {
	width: 28px;
	height: 28px;
}

.esbn-confirm-title {
	margin: 18px 0 10px;
	color: var(--esbn-ink-soft);
	font-size: 20px;
	font-weight: 700;
}

.esbn-confirm-message {
	margin: 0;
	color: var(--esbn-muted);
	font-size: 14px;
	line-height: 1.7;
}

.esbn-confirm-actions {
	display: grid;
	margin-top: 28px;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.esbn-confirm-actions button {
	min-height: 46px;
	padding: 12px 16px;
	border-radius: 12px;
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	transition: opacity 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.esbn-confirm-cancel {
	border: 1px solid #dedede;
	background: #fff;
	color: var(--esbn-body);
}

.esbn-confirm-cancel:hover {
	background: var(--esbn-field);
}

/* White label, unlike the detail dialog's black-on-gold BUY NOW. That
   inconsistency is the reference's own; kept so the two dialogs match it. */
.esbn-confirm-submit {
	border: 0;
	background: linear-gradient(90deg, var(--esbn-gold), var(--esbn-gold-mid));
	box-shadow: 0 8px 20px rgba(170, 119, 28, 0.22);
	color: #fff;
}

.esbn-confirm-submit:disabled {
	opacity: 0.65;
	cursor: wait;
}

/* ================================================= 3. order created modal */

.esbn-success-backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.esbn-success-modal {
	position: relative;
	width: min(100%, 448px);
	padding: 32px;
	border: 1px solid var(--esbn-line);
	border-radius: var(--esbn-radius);
	background: #fff;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
	text-align: center;
	animation: esbn-modal-in 0.25s ease-out both;
}

.esbn-success-mark {
	position: relative;
	display: grid;
	width: 80px;
	height: 80px;
	margin: 0 auto 24px;
	place-items: center;
	border: 1px solid rgba(207, 161, 67, 0.2);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(207, 161, 67, 0.15), transparent 70%);
	color: #cfa143;
}

.esbn-success-mark svg {
	width: 36px;
	height: 36px;
}

/* The dashed ring is an empty absolutely-positioned span that spins, exactly
   as in the reference — it is not a border on the badge itself, which is why
   the dashes rotate independently of the check. */
.esbn-success-mark span {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 1px dashed rgba(207, 161, 67, 0.3);
	border-radius: 50%;
	animation: esbn-spin 8s linear infinite;
}

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

.esbn-success-title {
	margin: 0 0 8px;
	color: var(--esbn-ink-soft);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

.esbn-success-intro {
	margin: 0 0 24px;
	color: var(--esbn-muted);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.6;
}

/* The whole box is the copy target (double-click), not just the digits. */
.esbn-order-code {
	position: relative;
	width: 100%;
	margin-bottom: 16px;
	padding: 18px 24px;
	border: 1px solid rgba(207, 161, 67, 0.3);
	border-radius: var(--esbn-btn-radius);
	background: var(--esbn-field);
	color: var(--esbn-gold);
	cursor: copy;
	transition: background-color 0.2s ease;
}

.esbn-order-code:hover {
	background: var(--esbn-line-soft);
}

.esbn-order-code strong {
	display: block;
	font-family: var(--esbn-mono);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.1em;
	word-break: break-all;
}

/* Overlaps the bottom edge of the box by 11px — the reference hangs it off the
   border rather than sitting it inside. */
.esbn-order-code small {
	position: absolute;
	bottom: -11px;
	left: 50%;
	padding: 2px 8px;
	border: 1px solid var(--esbn-line);
	border-radius: 999px;
	background: var(--esbn-line-soft);
	color: var(--esbn-muted);
	font-size: 9px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transform: translateX(-50%);
	white-space: nowrap;
}

.esbn-sales-tip {
	margin: 20px 0 24px;
	color: var(--esbn-danger);
	font-size: 14px;
	font-weight: 700;
	animation: esbn-pulse 1.8s ease-in-out infinite;
}

@keyframes esbn-pulse {
	50% {
		opacity: 0.55;
	}
}

.esbn-success-desc {
	margin: 0 0 32px;
	color: var(--esbn-muted-2);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.6;
}

/* Only ever shown to a signed-in shopper, so it is styled as a gold aside
   rather than a primary action — the Accept button below it stays the one
   thing the dialog is asking for. */
.esbn-receipt-link {
	display: inline-block;
	margin: 0 0 24px;
	color: var(--esbn-gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

/* The `hidden` attribute is set by the markup and toggled by the script, but
   `display: inline-block` above is an author rule and so outranks the user
   agent's `[hidden] { display: none }`. Without this rescue the link is painted
   whenever the receipt dialog is open, carrying the markup's placeholder
   href="#", on every path where the payload deliberately withholds a URL —
   which is all guests, and everyone when the setting is off. Same guard the
   layers and the toast already carry. */
.esbn-receipt-link[hidden] {
	display: none;
}

.esbn-receipt-link:hover {
	color: var(--esbn-gold-deep);
}

/* Three-stop gradient, unlike BUY NOW's two-stop one. */
.esbn-success-close {
	width: 100%;
	padding: 14px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(90deg, var(--esbn-gold), var(--esbn-gold-pale), var(--esbn-gold-deep));
	color: #070708;
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: box-shadow 0.2s ease;
}

.esbn-success-close:hover {
	box-shadow: 0 6px 20px rgba(207, 161, 67, 0.4);
}

/* ------------------------------------------------------------- responsive */

@media (min-width: 1025px) {
	.esbn-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.esbn-showcase {
		padding: 48px;
		border-right: 1px solid var(--esbn-line-soft);
		border-bottom: 0;
	}

	.esbn-content {
		padding: 40px;
	}
}

/* Stacked action buttons once two of them plus their labels stop fitting on
   one line. The reference keeps them side by side at every width; at 360px the
   letterspaced labels collide, so this is a deliberate deviation. */
@media (max-width: 420px) {
	.esbn-actions {
		flex-direction: column;
	}

	.esbn-action {
		width: 100%;
	}

	.esbn-confirm-modal,
	.esbn-success-modal {
		padding: 24px;
	}

	.esbn-panel {
		border-radius: 20px;
	}
}

/* The shop's own motion preference wins over the reference's decoration. */
@media (prefers-reduced-motion: reduce) {
	.esbn-layer,
	.esbn-panel,
	.esbn-confirm-modal,
	.esbn-success-modal,
	.esbn-success-mark span,
	.esbn-sales-tip {
		animation: none !important;
		transition: none !important;
	}

	.esbn-layer {
		opacity: 1;
	}
}