/**
 * EZ Buy Now Pro — front-end styles.
 * Design tokens are injected as CSS custom properties by Assets::dynamic_css().
 */

/* ---------------------------------------------------------------------
 * Core button
 * ------------------------------------------------------------------ */
.ezbnp-button {
	display: var(--ezbnp-display, inline-block);
	width: auto;
	background-color: var(--ezbnp-bg, #111827) !important;
	color: var(--ezbnp-color, #ffffff) !important;
	border: none !important;
	border-radius: var(--ezbnp-radius, 8px) !important;
	padding: 0.75em 1.4em;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	position: relative;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease, opacity 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}

.ezbnp-button.ezbnp-full-width,
.ezbnp-full-width .ezbnp-button {
	display: block;
	width: 100%;
}

.ezbnp-button:hover,
.ezbnp-button:focus {
	background-color: var(--ezbnp-hover-bg, #000000) !important;
	color: var(--ezbnp-hover-color, #ffffff) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

.ezbnp-button:active {
	transform: translateY(1px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.ezbnp-button[disabled],
.ezbnp-button.is-loading {
	opacity: 0.7;
	cursor: not-allowed;
}

.ezbnp-button .ezbnp-spinner {
	display: none;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -2px;
	animation: ezbnp-spin 0.6s linear infinite;
}

.ezbnp-button.is-loading .ezbnp-spinner {
	display: inline-block;
}

.ezbnp-button.is-loading .ezbnp-btn-label {
	opacity: 0.85;
}

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

.ezbnp-error {
	display: none;
	margin-top: 6px;
	font-size: 0.85em;
	color: #d63638;
}

.ezbnp-error.is-visible {
	display: block;
}

/* ---------------------------------------------------------------------
 * Force a real flexbox layout for the "action row" (quantity + native
 * Add to Cart + our Buy Now button), instead of leaving it to the theme's
 * default float-based layout.
 *
 * This is the actual fix for margin (especially left/right) being
 * unreliable: a block-level box that merely follows a *floated* sibling
 * does not reposition itself around the float — only its *inline
 * content* wraps around it — so horizontal margin on that box often has
 * no visible effect, while vertical (top) margin still works because it
 * isn't part of the same float-geometry quirk. Once the row is a genuine
 * flex container, every child becomes a flex item and its margin (all
 * four sides) is respected exactly as set, with no float involved at all
 * — floats are ignored entirely on flex items per the CSS spec.
 *
 * Simple and variable products need two different selectors because the
 * row lives in a different place in WooCommerce's own templates:
 *   - Simple products: the row IS `form.cart` itself.
 *   - Variable products: `form.cart` (class `variations_form cart`) also
 *     contains the attribute-selection table *before* the row, so only
 *     the nested `.woocommerce-variation-add-to-cart` wrapper — not the
 *     whole form — should become the flex container.
 * ------------------------------------------------------------------ */
.single-product div.product form.cart:not(.variations_form) {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
}

.single-product div.product form.cart.variations_form .woocommerce-variation-add-to-cart:not(.woocommerce-variation-add-to-cart-disabled) {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
}

/* ---------------------------------------------------------------------
 * Wrap containers
 * ------------------------------------------------------------------ */
.ezbnp-shortcode-wrap {
	margin-top: 10px;
	text-align: center;
}

/* When the button isn't full-width it's `inline-block`, which only
 * centers via `text-align` if the wrap itself spans the full card width.
 * Many themes (Astra included) lay out `li.product` as a flex column, so
 * a plain `<div>` sibling shrinks to fit its content instead of spanning
 * full width — `text-align:center` then has no extra space to center
 * within. Forcing the wrap itself to be a full-width flex container that
 * centers its own child sidesteps that entirely, regardless of how the
 * theme lays out the surrounding card. */
.ezbnp-loop-wrap {
	margin-top: 10px;
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Single product page: margin and padding here are admin-configurable
 * (Design tab → "Single Product Page Button Spacing"), scoped to this
 * wrap only so the loop/sticky/shortcode buttons are unaffected. Left/
 * right margin creates a gap when the Buy Now button sits beside the
 * native Add to Cart button (Position: Before/After Add to Cart). Now
 * that the row above is a genuine flex container, this margin applies
 * predictably on all four sides for both simple and variable products.
 * Deliberately NOT stretched/centered like the loop card — this button
 * should sit directly beside the native Add to Cart button with only the
 * exact gap set by the margin values above, not float in extra leftover
 * row space.
 *
 * Both `!important` and the extra `body.single-product` qualifier are
 * needed here: many themes (Astra included) ship their own global button
 * padding/margin rules with `!important`, which otherwise silently wins
 * over a plain, non-important declaration regardless of how many classes
 * our own selector has. */
body.single-product .ezbnp-single-wrap {
	margin: var(--ezbnp-single-margin-top, 12px) var(--ezbnp-single-margin-right, 10px) var(--ezbnp-single-margin-bottom, 12px) var(--ezbnp-single-margin-left, 10px) !important;
}

body.single-product .ezbnp-single-wrap .ezbnp-button {
	padding: var(--ezbnp-single-padding-y, 14px) var(--ezbnp-single-padding-x, 24px) !important;
}

/* Replace mode: hide WooCommerce's native submit button on the single
 * product page, but keep quantity input + variation dropdowns intact. */
body.ezbnp-replace-atc .single_add_to_cart_button {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---------------------------------------------------------------------
 * Mobile: prevent the native quantity/Add to Cart controls and our Buy
 * Now button from being squeezed into one narrow row (which shrinks the
 * button and forces its label onto two lines). The parent is already a
 * flex container (rule above) on every screen size, so `flex-wrap: wrap`
 * is already in effect — here we only need to make each item *want* the
 * full row width so they each land on their own line once the viewport
 * is this narrow.
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {
	.single-product div.product form.cart .quantity,
	.single-product div.product form.cart .single_add_to_cart_button,
	.single-product div.product form.cart .ezbnp-single-wrap {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.single-product div.product form.cart .quantity {
		margin: 0 0 10px !important;
	}

	.single-product div.product form.cart .single_add_to_cart_button {
		text-align: center;
		margin: 0 0 10px !important;
	}

	body.single-product .ezbnp-single-wrap {
		margin: var(--ezbnp-single-margin-top, 12px) 0 var(--ezbnp-single-margin-bottom, 12px) 0 !important;
	}

	.single-product div.product form.cart .ezbnp-single-wrap .ezbnp-button {
		width: 100% !important;
		display: block !important;
	}
}

/* ---------------------------------------------------------------------
 * Stock badge
 * ------------------------------------------------------------------ */
.ezbnp-stock-badge {
	display: inline-block;
	margin: 6px 0;
	padding: 4px 10px;
	font-size: 0.8em;
	font-weight: 700;
	color: #9a3412;
	background: #ffedd5;
	border-radius: 999px;
}

/* ---------------------------------------------------------------------
 * Discount percentage badge
 * ------------------------------------------------------------------ */
.ezbnp-discount-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	font-size: 0.78em;
	font-weight: 700;
	color: #bb1c1c;
	background: #fdecec;
	border-radius: 999px;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------
 * Loop "overlay" card style — price + discount badge on top, and a
 * small, permanently visible call-to-action pill underneath. This is
 * intentionally NOT hover-dependent: the pill is a real element that is
 * always rendered and always visible, on both desktop and mobile, so a
 * shopper never has to guess that the card is tappable. On desktop the
 * pill simply darkens slightly on hover/focus, like any ordinary button —
 * nothing moves, slides, or swaps.
 * ------------------------------------------------------------------ */

/* Hide the theme's native price element only when the overlay style has
 * moved the price inside our own control (avoids showing it twice). */
body.ezbnp-loop-overlay ul.products li.product > a .price,
body.ezbnp-loop-overlay ul.products li.product .price:not(.ezbnp-overlay-price) {
	display: none !important;
}

.ezbnp-button.ezbnp-style-overlay {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding: 10px 12px !important;
	background-color: #ffffff !important;
	color: inherit !important;
	border: 1px solid #e2e2e2 !important;
	text-align: center;
	white-space: normal;
}

.ezbnp-overlay-price {
	font-weight: 600;
	color: inherit;
}

.ezbnp-overlay-price .woocommerce-Price-amount {
	font-weight: 700;
}

.ezbnp-overlay-cta {
	display: block;
	padding: 7px 10px;
	background-color: var(--ezbnp-bg, #111827);
	color: var(--ezbnp-color, #ffffff);
	font-weight: 700;
	font-size: 0.85em;
	border-radius: var(--ezbnp-radius, 8px);
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.ezbnp-button.ezbnp-style-overlay:hover .ezbnp-overlay-cta,
.ezbnp-button.ezbnp-style-overlay:focus-visible .ezbnp-overlay-cta {
	background-color: var(--ezbnp-hover-bg, #000000);
	color: var(--ezbnp-hover-color, #ffffff);
}

.ezbnp-button.ezbnp-style-overlay:active .ezbnp-overlay-cta {
	transform: scale(0.97);
}

/* ---------------------------------------------------------------------
 * Countdown
 * ------------------------------------------------------------------ */
.ezbnp-countdown {
	margin: 8px 0;
	font-size: 0.9em;
	color: #b91c1c;
}

.ezbnp-countdown-label {
	font-weight: 600;
	margin-right: 4px;
}

.ezbnp-countdown-timer {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* ---------------------------------------------------------------------
 * Mobile sticky bar — Astra-friendly (respects safe-area / mobile header)
 * ------------------------------------------------------------------ */
.ezbnp-sticky-bar {
	display: none;
}

@media (max-width: 921px) {
	.ezbnp-sticky-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background: #ffffff;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	}

	/* Avoid overlapping Astra's mobile menu / footer bar if present. */
	.ast-mobile-header-active .ezbnp-sticky-bar,
	.ast-mobile-menu-buttons-active .ezbnp-sticky-bar {
		bottom: env(safe-area-inset-bottom, 0px);
	}

	.ezbnp-sticky-info {
		display: flex;
		flex-direction: column;
		min-width: 0;
		flex: 1 1 auto;
	}

	.ezbnp-sticky-title {
		font-size: 0.8em;
		color: #4b5563;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ezbnp-sticky-price {
		font-weight: 700;
		font-size: 1em;
	}

	.ezbnp-sticky-action {
		flex: 0 0 auto;
	}

	.ezbnp-sticky-action .ezbnp-button {
		background-color: var(--ezbnp-sticky-bg, #dc2626) !important;
		color: var(--ezbnp-sticky-color, #ffffff) !important;
		padding: 0.65em 1.2em;
	}

	body.single-product {
		padding-bottom: 64px;
	}
}