/**
 * Free Over Threshold – front-end styles.
 *
 * Colours use currentColor so the label adapts to whatever background the theme
 * puts it on (e.g. white text on a coloured price box, dark text in the cart).
 * Sizes are in px so they aren't scaled by the theme's large price font or root size.
 * Override the custom properties below in your theme to restyle it.
 */

.fot-price,
.fot-label {
	--fot-font-size: 13px;
	--fot-free-font-size: 16px;
	--fot-cart-font-size: 12px;
	--fot-radius: 999px;
	--fot-gap: 10px;
}

/*
 * Own line, inherits the parent's text-align. Font size and line height are reset
 * here (not just on the badge) so the line box isn't sized by the theme's big price font.
 */
.fot-label {
	display: block;
	margin: 0 0 var(--fot-gap);
	font-size: var(--fot-font-size);
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.fot-label__badge {
	display: inline-block;
	max-width: 100%;
	padding: 5px 12px;
	border: 1px solid currentColor;
	border-radius: var(--fot-radius);
	background: rgba(255, 255, 255, 0.15);
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	white-space: normal;
	box-sizing: border-box;
}

/* Stop theme price styling (large amounts, block display) leaking into the label. */
.fot-label .woocommerce-Price-amount,
.fot-label .woocommerce-Price-amount bdi,
.fot-label .woocommerce-Price-currencySymbol {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	letter-spacing: inherit !important;
}

/* Qualifying state: the label replaces the price, so give it more presence. */
.fot-label--free {
	margin: 0 0 var(--fot-gap);
	font-size: var(--fot-free-font-size);
}

.fot-label--free .fot-label__badge {
	padding: 8px 16px;
	border-width: 2px;
	background: rgba(255, 255, 255, 0.22);
	font-weight: 700;
}

/* Cart, mini-cart and checkout: label sits under the price, smaller. */
.woocommerce-cart-form .fot-label,
.woocommerce-checkout-review-order-table .fot-label,
.woocommerce-mini-cart .fot-label {
	margin: 4px 0 0;
	font-size: var(--fot-cart-font-size);
}

.woocommerce-cart-form .fot-label__badge,
.woocommerce-checkout-review-order-table .fot-label__badge,
.woocommerce-mini-cart .fot-label__badge {
	padding: 3px 9px;
	border-width: 1px;
}

/*
 * Product page only: hide the theme's "+ VAT" note (a sibling of the price) while the
 * product being viewed is free. "fot-price--main" is only added to that product's price,
 * so related products, upsells and shop pages are unaffected.
 */
.fot-price--main.fot-price--free ~ .tax {
	display: none !important;
}