/**
 * Urgency Kit for WooCommerce — front-end styles.
 *
 * Every colour and measurement is a custom property, so a theme or child theme
 * can restyle the whole block by redefining them on .wuk-badges.
 *
 * @package   WooUrgencyKit
 * @author    Muhammad Hassan <me@mhassan.pro>
 * @copyright 2026 Muhammad Hassan
 * @license   GPL-2.0-or-later
 */

.wuk-badges {
	--wuk-radius: 4px;
	--wuk-bar: 4px;
	--wuk-gap: 10px;
	--wuk-pad-y: 11px;
	--wuk-pad-x: 15px;
	--wuk-font: 15px;

	--wuk-stock-bg: #fdf1f1;
	--wuk-stock-bar: #e02b2b;
	--wuk-stock-text: #b42121;

	--wuk-cart-bg: #f0faf2;
	--wuk-cart-bar: #29a745;
	--wuk-cart-text: #1c7a33;

	--wuk-viewers-bg: #f3f3f4;
	--wuk-viewers-bar: transparent;
	--wuk-viewers-text: #4f4f57;

	display: flex;
	flex-direction: column;
	gap: var( --wuk-gap );
	margin: 0 0 1.25em;
	clear: both;
}

.wuk-badge {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: var( --wuk-pad-y ) var( --wuk-pad-x );
	border: 0;
	border-left: var( --wuk-bar ) solid transparent;
	border-radius: var( --wuk-radius );
	font-size: var( --wuk-font );
	line-height: 1.35;
	box-sizing: border-box;
}

.wuk-badge .wuk-text {
	display: inline;
}

.wuk-badge .wuk-count {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.wuk-icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	opacity: 0.9;
}

/* Stock left */
.wuk-badge--stock {
	background: var( --wuk-stock-bg );
	border-left-color: var( --wuk-stock-bar );
	color: var( --wuk-stock-text );
	font-weight: 500;
}

/* Added to cart */
.wuk-badge--cart {
	background: var( --wuk-cart-bg );
	border-left-color: var( --wuk-cart-bar );
	color: var( --wuk-cart-text );
	font-weight: 500;
}

/* Live viewers */
.wuk-badge--viewers {
	background: var( --wuk-viewers-bg );
	border-left-color: var( --wuk-viewers-bar );
	color: var( --wuk-viewers-text );
	font-weight: 400;
}

.wuk-badge--viewers .wuk-count {
	font-weight: 600;
	transition: opacity 0.25s ease;
}

.wuk-badge--viewers .wuk-count.wuk-pulse {
	opacity: 0.35;
}

@media ( prefers-reduced-motion: reduce ) {
	.wuk-badge--viewers .wuk-count {
		transition: none;
	}

	.wuk-badge--viewers .wuk-count.wuk-pulse {
		opacity: 1;
	}
}

/* -------------------------------------------------------------------------
 * Buy Now button
 * ---------------------------------------------------------------------- */

.wuk-buy-now {
	display: inline-block;
	vertical-align: middle;
	/* Never grow or shrink. A shrinkable third child in a flex form is what
	   squeezes the theme's quantity field down to nothing. */
	flex: 0 0 auto;
	margin-left: var( --wuk-gap-x, 10px );
	cursor: pointer;
}

/* High enough specificity to beat a theme that zeroes out button margins
   (Avada wraps both buttons in .fusion-button-wrapper and does exactly that).
   The gap value itself arrives as an inline --wuk-gap-x on the button. */
.woocommerce div.product form.cart .wuk-buy-now {
	margin-left: var( --wuk-gap-x, 10px );
}

/* Horizontal dash between Add to Cart and Buy Now. align-self keeps it from
   being stretched to full height inside a flex button wrapper. */
.wuk-buy-now-sep {
	display: inline-block;
	align-self: center;
	flex: 0 0 auto;
	vertical-align: middle;
	width: var( --wuk-dash-len, 14px );
	height: var( --wuk-dash-thick, 2px );
	margin: 0 var( --wuk-gap-x, 10px );
	background: #494949;
	opacity: 1;
	border-radius: 0px;
}

/* "Own row" layout: force a line break in flex and non-flex forms alike. */
.wuk-buy-now-row {
	flex: 1 0 100%;
	width: 100%;
	margin: 10px 0 0;
}

.wuk-buy-now-row .wuk-buy-now,
.woocommerce div.product form.cart .wuk-buy-now-row .wuk-buy-now {
	width: 100%;
	margin-left: 0;
}

/* Specificity bump so an explicit Outlined/Solid choice beats theme button
   styles. Choose "Inherit theme button" to opt out entirely. */
.woocommerce div.product form.cart .wuk-buy-now--outline,
.woocommerce div.product form.cart .wuk-buy-now--solid,
.wuk-buy-now--outline,
.wuk-buy-now--solid {
	padding: 0.85em 2em;
	border-radius: 6px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.woocommerce div.product form.cart .wuk-buy-now--outline,
.wuk-buy-now--outline {
	background: transparent;
	border: 2px solid #1a1a1a;
	color: #1a1a1a;
}

.wuk-buy-now--outline:hover,
.wuk-buy-now--outline:focus {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}

.woocommerce div.product form.cart .wuk-buy-now--solid,
.wuk-buy-now--solid {
	background: #1a1a1a;
	border: 2px solid #1a1a1a;
	color: #fff;
}

.wuk-buy-now--solid:hover,
.wuk-buy-now--solid:focus {
	background: #000;
	border-color: #000;
	color: #fff;
}

.wuk-buy-now[disabled],
.wuk-buy-now.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

@media ( max-width: 600px ) {
	.wuk-buy-now-sep {
		display: none;
	}

	.wuk-buy-now,
	.woocommerce div.product form.cart .wuk-buy-now {
		display: block;
		width: 100%;
		margin: 10px 0 0;
	}
}

/*
 * Theme compatibility rules (flex-wrap on the form, and a non-shrinking
 * quantity field) are injected inline and can be switched off in
 * WooCommerce → Settings → Urgency Kit → Buy Now button.
 *
 * To put Add to Cart and Buy Now on one row at equal width, add this to your
 * child theme:
 *
 * .woocommerce div.product form.cart .single_add_to_cart_button,
 * .woocommerce div.product form.cart .wuk-buy-now { flex: 1 1 180px; margin-left: 0; }
 */