/*
 * Flex Quantity Discounts — frontend selector.
 * Everything is scoped under .fqd-wrap and driven by CSS custom properties
 * (set from Appearance settings as inline CSS). Fonts are inherited from the
 * theme; no global elements are styled. Logical properties give RTL support.
 */

.fqd-wrap {
	--fqd-width: 100%;
	--fqd-surface: transparent;
	--fqd-surface-pad: 0px;
	--fqd-radius: 12px;
	--fqd-border-width: 1px;
	--fqd-border: #e4e4e7;
	--fqd-bg: #fff;
	--fqd-text: #18181b;
	--fqd-muted: #71717a;
	--fqd-accent: #18181b;
	--fqd-heading-size: 18px;
	--fqd-heading-weight: 600;
	--fqd-body-size: 14px;
	--fqd-price-size: 16px;
	--fqd-price-weight: 600;
	--fqd-badge-bg: #ecfdf5;
	--fqd-badge-text: #047857;
	--fqd-promo-bg: #18181b;
	--fqd-promo-text: #fff;
	--fqd-selected-bg: #fafafa;
	--fqd-selected-border: #18181b;
	--fqd-button-bg: #18181b;
	--fqd-button-text: #fff;
	--fqd-button-radius: 8px;
	--fqd-pad: 16px;
	--fqd-gap: 10px;
	--fqd-pad-m: 12px;
	--fqd-gap-m: 8px;
	--fqd-ease: cubic-bezier(.2, .7, .2, 1);

	box-sizing: border-box;
	width: 100%;
	max-width: var(--fqd-width);
	margin-block: 0 1.25em;
	padding: var(--fqd-surface-pad);
	background: var(--fqd-surface);
	border-radius: calc(var(--fqd-radius) + 4px);
	color: var(--fqd-text);
	font-size: var(--fqd-body-size);
	line-height: 1.45;
	text-align: start;
	clear: both;
}

.fqd-wrap *,
.fqd-wrap *::before,
.fqd-wrap *::after {
	box-sizing: border-box;
}

.fqd-wrap .fqd-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Header ---------------------------------------------------------------- */

.fqd-wrap .fqd-head {
	margin-block-end: calc(var(--fqd-gap) + 2px);
}

.fqd-wrap .fqd-heading {
	margin: 0;
	font-size: var(--fqd-heading-size);
	font-weight: var(--fqd-heading-weight);
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--fqd-text);
}

.fqd-wrap .fqd-subtitle {
	margin: .25em 0 0;
	padding: 0;
	color: var(--fqd-muted);
	font-size: .93em;
}

/* Shared tier basics ---------------------------------------------------- */

.fqd-wrap .fqd-tiers {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
	display: grid;
	gap: var(--fqd-gap);
}

.fqd-wrap .fqd-tier {
	position: relative;
	display: grid;
	align-items: center;
	margin: 0;
	padding: var(--fqd-pad);
	background: var(--fqd-bg);
	border: var(--fqd-border-width) solid var(--fqd-border);
	border-radius: var(--fqd-radius);
	cursor: pointer;
	font-weight: inherit;
	transition: border-color .18s var(--fqd-ease), background-color .18s var(--fqd-ease), box-shadow .18s var(--fqd-ease), transform .18s var(--fqd-ease);
	-webkit-tap-highlight-color: transparent;
}

.fqd-wrap .fqd-tier:hover {
	border-color: color-mix(in srgb, var(--fqd-selected-border) 45%, var(--fqd-border));
}

/* Native radio, visually replaced but still focusable and announced. */
.fqd-wrap .fqd-radio {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.fqd-wrap .fqd-tier.is-active,
.fqd-wrap .fqd-tier:has(.fqd-radio:checked) {
	background: var(--fqd-selected-bg);
	border-color: var(--fqd-selected-border);
	box-shadow: 0 0 0 1px var(--fqd-selected-border), 0 6px 18px -10px color-mix(in srgb, var(--fqd-selected-border) 60%, transparent);
}

.fqd-wrap .fqd-tier:has(.fqd-radio:focus-visible) {
	outline: 2px solid var(--fqd-accent);
	outline-offset: 2px;
}

.fqd-wrap .fqd-tier.is-unavailable {
	cursor: not-allowed;
	opacity: .55;
}

.fqd-wrap .fqd-check {
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--fqd-muted) 70%, transparent);
	background: var(--fqd-bg);
	display: inline-grid;
	place-items: center;
	transition: border-color .18s var(--fqd-ease);
}

.fqd-wrap .fqd-check::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fqd-selected-border);
	transform: scale(0);
	transition: transform .18s var(--fqd-ease);
}

.fqd-wrap .fqd-tier.is-active .fqd-check,
.fqd-wrap .fqd-tier:has(.fqd-radio:checked) .fqd-check {
	border-color: var(--fqd-selected-border);
}

.fqd-wrap .fqd-tier.is-active .fqd-check::after,
.fqd-wrap .fqd-tier:has(.fqd-radio:checked) .fqd-check::after {
	transform: scale(1);
}

.fqd-wrap .fqd-qty {
	font-weight: 600;
	color: var(--fqd-text);
}

.fqd-wrap .fqd-desc {
	display: block;
	margin-block-start: 2px;
	color: var(--fqd-muted);
	font-size: .9em;
}

.fqd-wrap .fqd-unit {
	font-size: var(--fqd-price-size);
	font-weight: var(--fqd-price-weight);
	color: var(--fqd-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.fqd-wrap .fqd-unit .woocommerce-Price-amount,
.fqd-wrap .fqd-unit bdi {
	color: inherit;
	font: inherit;
}

.fqd-wrap .fqd-each {
	margin-inline-start: 3px;
	font-size: .78em;
	font-weight: 400;
	color: var(--fqd-muted);
}

.fqd-wrap .fqd-original {
	color: var(--fqd-muted);
	font-size: .88em;
	font-weight: 400;
	text-decoration: line-through;
	opacity: .9;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	background: none;
}

.fqd-wrap .fqd-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--fqd-badge-bg);
	color: var(--fqd-badge-text);
	font-size: .8em;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.fqd-wrap .fqd-save-amount {
	color: var(--fqd-badge-text);
	font-size: .85em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.fqd-wrap .fqd-muted {
	color: var(--fqd-muted);
	font-size: .9em;
}

.fqd-wrap .fqd-promo {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: var(--fqd-pad);
	transform: translateY(-50%);
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--fqd-promo-bg);
	color: var(--fqd-promo-text);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.6;
	white-space: nowrap;
}

.fqd-wrap .fqd-promo--inline {
	position: static;
	transform: none;
	margin-inline-start: 6px;
	vertical-align: 1px;
	font-size: 10px;
}

/* Cards ------------------------------------------------------------------ */

.fqd-wrap .fqd-tiers--cards .fqd-tier {
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"check main price"
		"check main save";
	column-gap: 12px;
	row-gap: 2px;
}

.fqd-wrap .fqd-tiers--cards .fqd-tier.has-badge {
	margin-block-start: 6px;
}

.fqd-wrap .fqd-tiers--cards .fqd-check { grid-area: check; }
.fqd-wrap .fqd-tiers--cards .fqd-tier-main { grid-area: main; min-width: 0; }
.fqd-wrap .fqd-tiers--cards .fqd-tier-price {
	grid-area: price;
	display: flex;
	flex-direction: row-reverse;
	align-items: baseline;
	justify-content: flex-start;
	gap: 8px;
	text-align: end;
}
.fqd-wrap .fqd-tiers--cards .fqd-tier-save {
	grid-area: save;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.fqd-wrap .fqd-add {
	grid-column: 1 / -1;
	margin-block-start: 10px;
	padding: 9px 14px;
	border: 0;
	border-radius: var(--fqd-button-radius);
	background: var(--fqd-button-bg);
	color: var(--fqd-button-text);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: filter .18s var(--fqd-ease), transform .1s var(--fqd-ease);
}

.fqd-wrap .fqd-add:hover { filter: brightness(1.08); }
.fqd-wrap .fqd-add:active { transform: translateY(1px); }
.fqd-wrap .fqd-add:focus-visible { outline: 2px solid var(--fqd-accent); outline-offset: 2px; }

/* Table ----------------------------------------------------------------- */

.fqd-wrap .fqd-tiers--table {
	gap: 0;
	border: var(--fqd-border-width) solid var(--fqd-border);
	border-radius: var(--fqd-radius);
	background: var(--fqd-bg);
	overflow: hidden;
}

.fqd-wrap .fqd-thead,
.fqd-wrap .fqd-tiers--table .fqd-tier {
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 12px;
}

.fqd-wrap .fqd-thead {
	display: grid;
	padding: 10px var(--fqd-pad);
	color: var(--fqd-muted);
	font-size: .78em;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-block-end: var(--fqd-border-width) solid var(--fqd-border);
}

.fqd-wrap .fqd-thead span:not(:first-child),
.fqd-wrap .fqd-cell--price,
.fqd-wrap .fqd-cell--save {
	text-align: end;
}

.fqd-wrap .fqd-tiers--table .fqd-tier {
	padding-block: calc(var(--fqd-pad) * .8);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	border-block-end: var(--fqd-border-width) solid var(--fqd-border);
}

.fqd-wrap .fqd-tiers--table .fqd-tier:last-child { border-block-end: 0; }

.fqd-wrap .fqd-tiers--table .fqd-tier.is-active,
.fqd-wrap .fqd-tiers--table .fqd-tier:has(.fqd-radio:checked) {
	box-shadow: inset 3px 0 0 var(--fqd-selected-border);
}

[dir="rtl"] .fqd-wrap .fqd-tiers--table .fqd-tier.is-active,
[dir="rtl"] .fqd-wrap .fqd-tiers--table .fqd-tier:has(.fqd-radio:checked) {
	box-shadow: inset -3px 0 0 var(--fqd-selected-border);
}

.fqd-wrap .fqd-tiers--table .fqd-tier:has(.fqd-radio:focus-visible) {
	outline-offset: -2px;
}

.fqd-wrap .fqd-cell--qty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	min-width: 0;
}

.fqd-wrap .fqd-cell--qty .fqd-desc { flex-basis: 100%; padding-inline-start: 28px; margin: 0; }

.fqd-wrap .fqd-cell--price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
}

.fqd-wrap .fqd-cell--save {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

/* Minimal --------------------------------------------------------------- */

.fqd-wrap .fqd-tiers--minimal {
	grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
	gap: calc(var(--fqd-gap) * .8);
}

.fqd-wrap .fqd-tiers--minimal .fqd-tier {
	justify-items: center;
	gap: 2px;
	padding: calc(var(--fqd-pad) * .7) 8px;
	text-align: center;
}

.fqd-wrap .fqd-tiers--minimal .fqd-qty { font-size: .9em; }
.fqd-wrap .fqd-tiers--minimal .fqd-unit { font-size: calc(var(--fqd-price-size) * .95); }
.fqd-wrap .fqd-tiers--minimal .fqd-badge { margin-block-start: 2px; }

/* Summary --------------------------------------------------------------- */

.fqd-wrap .fqd-summary {
	margin-block-start: calc(var(--fqd-gap) + 4px);
	display: grid;
	gap: 8px;
}

.fqd-wrap .fqd-progress-text {
	color: var(--fqd-muted);
	font-size: .9em;
	margin-block-end: 6px;
}

.fqd-wrap .fqd-progress-text strong { color: var(--fqd-text); font-weight: 600; }

.fqd-wrap .fqd-progress-track {
	height: 5px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--fqd-border) 70%, transparent);
	overflow: hidden;
}

.fqd-wrap .fqd-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--fqd-accent);
	transition: width .35s var(--fqd-ease);
}

.fqd-wrap .fqd-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}

.fqd-wrap .fqd-total-label { color: var(--fqd-muted); }
.fqd-wrap .fqd-total-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.fqd-wrap .fqd-total-save { color: var(--fqd-badge-text); font-size: .9em; }

.fqd-wrap .fqd-placeholder {
	margin: 0;
	padding: var(--fqd-pad);
	border: var(--fqd-border-width) dashed var(--fqd-border);
	border-radius: var(--fqd-radius);
	color: var(--fqd-muted);
	text-align: center;
}

.fqd-wrap .fqd-error {
	margin: 8px 0 0;
	color: #b42318;
	font-size: .88em;
}

.fqd-wrap .fqd-body[aria-busy="true"] {
	opacity: .55;
	transition: opacity .15s linear;
	pointer-events: none;
}

/* Visibility toggles from Appearance settings. */
.fqd-wrap.fqd-hide-original .fqd-original,
.fqd-wrap.fqd-hide-pct .fqd-badge--pct,
.fqd-wrap.fqd-hide-amount .fqd-save-amount,
.fqd-wrap.fqd-hide-amount .fqd-total-save,
.fqd-wrap.fqd-hide-desc .fqd-desc,
.fqd-wrap.fqd-hide-badges .fqd-promo,
.fqd-wrap.fqd-hide-progress .fqd-progress,
.fqd-wrap.fqd-hide-total .fqd-total {
	display: none !important;
}

[hidden].fqd-summary,
.fqd-wrap [hidden] {
	display: none !important;
}

/* Mobile ---------------------------------------------------------------- */

@media (max-width: 600px) {
	.fqd-wrap {
		--fqd-pad: var(--fqd-pad-m);
		--fqd-gap: var(--fqd-gap-m);
	}

	.fqd-wrap .fqd-thead { display: none; }

	.fqd-wrap .fqd-tiers--table .fqd-tier {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "qty price" "qty save";
		row-gap: 4px;
	}

	.fqd-wrap .fqd-tiers--table .fqd-cell--qty { grid-area: qty; }
	.fqd-wrap .fqd-tiers--table .fqd-cell--price { grid-area: price; flex-direction: row-reverse; align-items: baseline; gap: 6px; }
	.fqd-wrap .fqd-tiers--table .fqd-cell--save { grid-area: save; flex-direction: row; align-items: center; gap: 6px; }

	.fqd-wrap .fqd-tiers--cards .fqd-tier-save .fqd-save-amount { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fqd-wrap *,
	.fqd-wrap {
		transition: none !important;
		animation: none !important;
	}
}

@media (forced-colors: active) {
	.fqd-wrap .fqd-tier.is-active { outline: 2px solid Highlight; }
}