/**
 * Pre-Orders for WooCommerce, store front styles.
 *
 * Deliberately small and low specificity so themes win by default. Everything
 * uses CSS custom properties, so a theme can restyle the whole plugin by
 * redefining six variables.
 */

:root {
	--anticipo-po-accent: #7f54b3;
	--anticipo-po-accent-contrast: #ffffff;
	--anticipo-po-surface: rgba( 127, 84, 179, 0.06 );
	--anticipo-po-border: rgba( 127, 84, 179, 0.25 );
	--anticipo-po-text-muted: #646970;
	--anticipo-po-radius: 4px;
}

.anticipo-po-badge {
	background: var( --anticipo-po-accent );
	border-radius: var( --anticipo-po-radius );
	color: var( --anticipo-po-accent-contrast );
	display: inline-block;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	padding: 0.25em 0.6em;
	text-transform: uppercase;
}

.woocommerce ul.products li.product .anticipo-po-badge {
	left: 0.5em;
	position: absolute;
	top: 0.5em;
	z-index: 2;
}

.anticipo-po-badge--inline {
	margin-right: 0.4em;
	vertical-align: middle;
}

.anticipo-po-notice {
	background: var( --anticipo-po-surface );
	border: 1px solid var( --anticipo-po-border );
	border-radius: var( --anticipo-po-radius );
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
}

.anticipo-po-notice__message {
	font-weight: 600;
	margin: 0;
}

.anticipo-po-notice__billing {
	color: var( --anticipo-po-text-muted );
	margin: 0.5em 0 0;
}

.anticipo-po-loop-availability {
	color: var( --anticipo-po-text-muted );
	font-size: 0.85em;
	margin: 0.25em 0 0.5em;
}

.anticipo-po-countdown {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: 0.75em;
}

.anticipo-po-countdown__label {
	color: var( --anticipo-po-text-muted );
	font-size: 0.85em;
	text-transform: uppercase;
}

.anticipo-po-countdown__value {
	font-size: 1.05em;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.anticipo-po-meter {
	margin-top: 0.9em;
}

.anticipo-po-meter__bar {
	background: rgba( 0, 0, 0, 0.08 );
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
	width: 100%;
}

.anticipo-po-meter__fill {
	background: var( --anticipo-po-accent );
	display: block;
	height: 100%;
	transition: width 0.4s ease;
}

.anticipo-po-meter__label {
	color: var( --anticipo-po-text-muted );
	font-size: 0.85em;
	margin: 0.4em 0 0;
}

.anticipo-po-cart-notice {
	line-height: 1.6;
}

.anticipo-po-order-summary {
	margin-top: 2em;
}

.anticipo-po-table td,
.anticipo-po-account-table td {
	vertical-align: middle;
}

.anticipo-po-qty {
	color: var( --anticipo-po-text-muted );
	white-space: nowrap;
}

.anticipo-po-pay-button {
	margin-left: 0.5em;
}

.anticipo-po-pagination {
	display: flex;
	gap: 0.5em;
	margin-top: 1em;
}

@media ( prefers-reduced-motion: reduce ) {
	.anticipo-po-meter__fill {
		transition: none;
	}
}