/**
 * Site Hub Pre-Order Badges — front-end styles.
 *
 * Colours come from custom properties set inline by the plugin, so this file
 * stays static and cacheable while the badge colour remains editable in
 * WooCommerce > Settings > Products > Pre-Orders.
 */

:root {
	--sitehub-preorder-bg: #3429e2;
	--sitehub-preorder-fg: #ffffff;
}

/* Shared badge -------------------------------------------------------- */

.sitehub-preorder-badge {
	display: inline-block;
	background: var(--sitehub-preorder-bg);
	color: var(--sitehub-preorder-fg);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 3px;
	white-space: nowrap;
}

/* Product card banner ------------------------------------------------- */

/*
 * WooCommerce already sets position: relative on .product for its own sale
 * flash, but themes occasionally reset it, so it is restated defensively.
 */
.woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
}

.sitehub-preorder-badge--loop {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 9;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	pointer-events: none;
}

/*
 * If the product is also on sale, WooCommerce's .onsale badge sits top-right by
 * default in most themes and top-left in some. Nudge ours down when both are
 * present so they never stack on top of each other.
 */
.woocommerce ul.products li.product .onsale ~ .sitehub-preorder-badge--loop,
ul.products li.product .onsale ~ .sitehub-preorder-badge--loop {
	top: 48px;
}

/* Single product ------------------------------------------------------ */

.sitehub-preorder-single {
	margin: 0 0 0.75em;
}

.sitehub-preorder-badge--single {
	font-size: 13px;
	padding: 7px 14px;
}

.sitehub-preorder-notice {
	margin-bottom: 1.25em;
}

/* Order details table ------------------------------------------------- */

.sitehub-preorder-order-line {
	margin: 4px 0 0;
}

.sitehub-preorder-badge--order {
	font-size: 11px;
	padding: 2px 8px;
}

/* Respect users who prefer less motion / high contrast ---------------- */

@media (prefers-contrast: more) {
	.sitehub-preorder-badge {
		outline: 2px solid currentColor;
		outline-offset: -2px;
	}
}