/*!
 * Preorder Price & Dispatch Promise for WooCommerce — product page notice.
 *
 * Every selector is scoped to .ppdp-preorder-notice. Nothing here targets theme,
 * WooCommerce or global elements. Typography (font family and size) is inherited
 * from the theme; sizes are relative (em) so the notice follows the theme scale.
 *
 * Themes can adjust the palette through these custom properties on
 * .ppdp-preorder-notice: --ppdp-accent, --ppdp-accent-text, --ppdp-ink,
 * --ppdp-muted, --ppdp-surface, --ppdp-border, --ppdp-divider, --ppdp-band, --ppdp-alert.
 */

.ppdp-preorder-notice {
	--ppdp-accent: var(--btn-accented-bgcolor-hover, rgb(72, 162, 223));
	--ppdp-accent-text: #2c6c98;
	--ppdp-ink: #1d2327;
	--ppdp-muted: #50575e;
	--ppdp-surface: #fff;
	--ppdp-border: #dcdfe4;
	--ppdp-divider: #e6e9ed;
	--ppdp-band: #f6f9fc;
	--ppdp-alert: #c8372d;

	position: relative;
	display: block;
	box-sizing: border-box;
	width: auto;
	max-width: 36em;
	margin: 0 0 1em;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--ppdp-border);
	border-radius: 3px;
	background: var(--ppdp-surface);
	box-shadow: none;
	color: var(--ppdp-ink);
	font-family: inherit;
	font-size: 0.9375em;
	font-style: normal;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/*
 * Derive a readable text shade (about 5.8:1 on white for the default blue) and a
 * barely-there band tint from the theme accent. A custom accent chosen in the
 * settings is passed as inline custom properties, which take precedence.
 */
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.ppdp-preorder-notice {
		--ppdp-accent-text: color-mix(in srgb, var(--ppdp-accent) 66%, #000);
		--ppdp-band: color-mix(in srgb, var(--ppdp-accent) 5%, #fff);
	}
}

.ppdp-preorder-notice,
.ppdp-preorder-notice *,
.ppdp-preorder-notice *::before,
.ppdp-preorder-notice *::after {
	box-sizing: border-box;
}

.ppdp-preorder-notice[hidden],
.ppdp-preorder-notice [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* Main area                                                           */
/* ------------------------------------------------------------------ */

.ppdp-preorder-notice .ppdp-preorder-notice__main {
	padding: 0.75em 1em 0.8125em;
}

.ppdp-preorder-notice .ppdp-preorder-notice__title {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ppdp-accent-text);
	font-family: inherit;
	font-size: 0.75em;
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.ppdp-preorder-notice .ppdp-preorder-notice__title::before,
.ppdp-preorder-notice .ppdp-preorder-notice__title::after {
	content: none;
	display: none;
}

.ppdp-preorder-notice .ppdp-preorder-notice__heading {
	margin: 0.125em 0 0;
	padding: 0;
	color: var(--ppdp-ink);
	font-size: 1em;
	font-weight: 600;
	line-height: 1.35;
}

.ppdp-preorder-notice .ppdp-preorder-notice__pricing {
	margin: 0;
	padding: 0;
}

.ppdp-preorder-notice .ppdp-preorder-notice__ledger {
	display: grid;
	grid-template-columns: fit-content(62%) minmax(0, 1fr);
	column-gap: 1.25em;
	row-gap: 0;
	align-items: baseline;
	margin: 0.5em 0 0;
	padding: 0;
	border: 0;
	background: none;
}

.ppdp-preorder-notice .ppdp-preorder-notice__row {
	display: contents;
}

.ppdp-preorder-notice .ppdp-preorder-notice__term,
.ppdp-preorder-notice .ppdp-preorder-notice__value {
	display: block;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1em;
	line-height: 1.4;
}

.ppdp-preorder-notice .ppdp-preorder-notice__term {
	color: var(--ppdp-muted);
	font-weight: 400;
}

.ppdp-preorder-notice .ppdp-preorder-notice__value {
	color: var(--ppdp-muted);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ppdp-preorder-notice .ppdp-preorder-notice__row--current .ppdp-preorder-notice__value {
	color: var(--ppdp-ink);
	font-weight: 700;
}

.ppdp-preorder-notice .ppdp-preorder-notice__savings {
	margin: 0.25em 0 0;
	padding: 0;
	color: var(--ppdp-accent-text);
	font-size: 1em;
	font-weight: 600;
	line-height: 1.4;
}

.ppdp-preorder-notice .ppdp-preorder-notice__prompt {
	margin: 0.5em 0 0;
	padding: 0;
	color: var(--ppdp-muted);
	font-size: 0.9375em;
	line-height: 1.45;
}

/* ------------------------------------------------------------------ */
/* WooCommerce price markup: keep it inline and inherit our type.      */
/* ------------------------------------------------------------------ */

.ppdp-preorder-notice .ppdp-preorder-notice__amount,
.ppdp-preorder-notice .ppdp-preorder-notice__amount .woocommerce-Price-amount,
.ppdp-preorder-notice .ppdp-preorder-notice__amount .woocommerce-Price-currencySymbol,
.ppdp-preorder-notice .ppdp-preorder-notice__amount bdi {
	display: inline;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-decoration: none;
	vertical-align: baseline;
	white-space: nowrap;
}

.ppdp-preorder-notice .ppdp-preorder-notice__amount::before,
.ppdp-preorder-notice .ppdp-preorder-notice__amount::after,
.ppdp-preorder-notice .ppdp-preorder-notice__amount .woocommerce-Price-amount::before,
.ppdp-preorder-notice .ppdp-preorder-notice__amount .woocommerce-Price-amount::after {
	content: none;
}

.ppdp-preorder-notice .ppdp-preorder-notice__savings .ppdp-preorder-notice__amount {
	font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Dispatch commitment                                                 */
/* ------------------------------------------------------------------ */

.ppdp-preorder-notice .ppdp-preorder-notice__dispatch {
	display: flex;
	align-items: flex-start;
	gap: 0.625em;
	margin: 0;
	padding: 0.625em 1em 0.6875em;
	border-top: 1px solid var(--ppdp-divider);
	background: var(--ppdp-band);
}

.ppdp-preorder-notice .ppdp-preorder-notice__icon {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 1.125em;
	height: 1.125em;
	margin: 0.125em 0 0;
	color: var(--ppdp-accent);
	line-height: 0;
}

.ppdp-preorder-notice .ppdp-preorder-notice__svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	fill: none;
	stroke: currentColor;
}

.ppdp-preorder-notice .ppdp-preorder-notice__indicator {
	position: absolute;
	top: -0.1875em;
	inset-inline-end: -0.25em;
	display: block;
	width: 0.4375em;
	height: 0.4375em;
	border-radius: 50%;
	background: var(--ppdp-alert);
	box-shadow: 0 0 0 2px var(--ppdp-band);
}

.ppdp-preorder-notice--indicator-fade .ppdp-preorder-notice__indicator {
	animation: ppdp-indicator-fade 2.8s ease-in-out 0.6s 3;
}

@keyframes ppdp-indicator-fade {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.35;
	}
}

.ppdp-preorder-notice .ppdp-preorder-notice__dispatch-text {
	flex: 1 1 auto;
	min-width: 0;
}

.ppdp-preorder-notice .ppdp-preorder-notice__commitment {
	margin: 0;
	padding: 0;
	color: var(--ppdp-ink);
	font-size: 1em;
	font-weight: 600;
	line-height: 1.4;
}

.ppdp-preorder-notice .ppdp-preorder-notice__date {
	font: inherit;
	white-space: nowrap;
}

.ppdp-preorder-notice .ppdp-preorder-notice__support {
	margin: 0.125em 0 0;
	padding: 0;
	color: var(--ppdp-muted);
	font-size: 0.875em;
	font-weight: 400;
	line-height: 1.45;
}

/* ------------------------------------------------------------------ */
/* Placement spacing                                                   */
/* ------------------------------------------------------------------ */

.ppdp-preorder-notice.ppdp-preorder-notice--at-after-add-to-cart {
	margin-top: 1em;
}

/* ------------------------------------------------------------------ */
/* Narrow screens: tighter padding, nothing fixed-width.               */
/* ------------------------------------------------------------------ */

@media (max-width: 400px) {
	.ppdp-preorder-notice {
		font-size: 0.875em;
	}

	.ppdp-preorder-notice .ppdp-preorder-notice__main {
		padding: 0.75em 0.8125em 0.8125em;
	}

	.ppdp-preorder-notice .ppdp-preorder-notice__dispatch {
		padding: 0.625em 0.8125em 0.6875em;
		gap: 0.5625em;
	}

	.ppdp-preorder-notice .ppdp-preorder-notice__ledger {
		column-gap: 1em;
	}

	.ppdp-preorder-notice .ppdp-preorder-notice__date {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ppdp-preorder-notice .ppdp-preorder-notice__indicator {
		animation: none !important;
	}
}

@media print {
	.ppdp-preorder-notice .ppdp-preorder-notice__dispatch {
		background: none;
	}
}
