/* Tiered Pricing — Package Table addon */

.tpt-package-table {
	--tpt-package-text: #3e4a66;
	--tpt-package-muted: #6b7280;
	--tpt-package-border: #e3e8ef;
	--tpt-package-separator: #eef1f6;
	--tpt-package-accent: #f0862b;
	--tpt-package-button: #f6c343;
	--tpt-package-button-icon: #2e3a56;
	--tpt-package-hover: #2b5df5;
	--tpt-package-hover-muted: #7c92c9;
	--tpt-package-strike: #c0392b;

	display: flex;
	flex-direction: column;
	margin: 1em 0;
	width: 100%;
	background: #fff;
	border: 1px solid var(--tpt-package-border);
	border-radius: 2px;
	container-type: inline-size;
}

.tpt-package-row__amount {
	flex-shrink: 0;
}

.tpt-package-row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border-bottom: 1px solid var(--tpt-package-separator);
	padding: 9px 16px 9px 24px;
	cursor: pointer;
	transition: background-color .15s ease;
}

.tpt-package-row:last-child {
	border-bottom: 0;
}

/* Hovering a row turns its content blue and highlights the cart button with a soft halo;
   the free-shipping badge keeps its accent color. */
.tpt-package-row:hover .tpt-package-row__quantity,
.tpt-package-row:hover .tpt-package-row__per-piece,
.tpt-package-row:hover .tpt-package-row__unit,
.tpt-package-row:hover .tpt-package-row__total,
.tpt-package-row:hover .tpt-package-icon--package {
	color: var(--tpt-package-hover);
}

.tpt-package-row:hover .tpt-package-row__regular-total {
	color: var(--tpt-package-hover-muted);
}

/* The active tier pops out of the flat list as an elevated card. */
.tpt-package-row.tiered-pricing--active {
	position: relative;
	z-index: 1;
	background: #fff;
	border: 1px solid var(--tpt-package-border);
	border-radius: 3px;
	box-shadow: 0 7px 18px rgba(46, 58, 86, 0.10);
	margin: -1px -7px;
}

/* Left cluster: quantity, package icon, price per piece */
.tpt-package-row__amount {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 1 auto;
	min-width: 0;
}

.tpt-package-row__quantity {
	font-size: 20px;
	font-weight: 700;
	color: var(--tpt-package-text);
	min-width: 2.1em;
}

.tpt-package-icon--package {
	color: var(--tpt-package-text);
	flex: 0 0 auto;
}

.tpt-package-row__per-piece {
	color: var(--tpt-package-muted);
	font-size: 15px;
	white-space: nowrap;
}

.tpt-package-row__unit {
	color: var(--tpt-package-muted);
}

/* Icons: hard-pinned sizes so theme-wide svg rules can never stretch them. */
.tpt-package-icon {
	flex: 0 0 auto;
	display: inline-block;
}

.tpt-package-icon--package,
.tpt-package-icon--truck,
.tpt-package-icon--cart,
.tpt-package-icon--check {
	width: 22px;
	height: 22px;
	min-width: 0;
	max-width: 22px;
	max-height: 22px;
}

/* Middle cluster: free shipping badge, anchored at a fixed distance from the price column so the
   badges align as a column across rows. Empty cells just push the prices to the right edge. */
.tpt-package-row__shipping {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	color: var(--tpt-package-accent);
	font-size: 16px;
}

.tpt-package-row__shipping--has-badge {
	margin-right: 36px;
}

/* Right cluster: totals + cart button. The fixed minimum width keeps its left edge (and with it
   the badge column) identical on every row. */
.tpt-package-row__prices {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 12px;
	min-width: 205px;
	white-space: nowrap;
}

.tpt-package-row__regular-total {
	color: var(--tpt-package-muted);
	font-size: 16px;
	text-decoration: none;
	position: relative;
}

.tpt-package-row__regular-total::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	top: 50%;
	border-top: 2px solid var(--tpt-package-strike);
	transform: rotate(-4deg);
}

.tpt-package-row__total {
	font-size: 20px;
	font-weight: 700;
	color: var(--tpt-package-text);
}

.tpt-package-row__total .woocommerce-Price-amount,
.tpt-package-row__regular-total .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

.tpt-package-row__cart {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50% !important;
	border: 0;
	background: var(--tpt-package-button);
	color: var(--tpt-package-button-icon);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 0 0 0 rgba(246, 195, 67, 0);
	transition: transform .12s ease, color .12s ease, box-shadow .22s ease;
}

.tpt-package-row:hover .tpt-package-row__cart,
.tpt-package-row__cart:hover {
	color: var(--tpt-package-hover);
	animation: tpt-package-halo 1.1s ease-out infinite;
}

/* Soft base ring plus a pulse wave expanding outward. */
@keyframes tpt-package-halo {
	0% {
		box-shadow: 0 0 0 6px rgba(246, 195, 67, 0.4), 0 0 0 6px rgba(246, 195, 67, 0.35);
	}
	100% {
		box-shadow: 0 0 0 6px rgba(246, 195, 67, 0.4), 0 0 0 18px rgba(246, 195, 67, 0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.tpt-package-row:hover .tpt-package-row__cart,
	.tpt-package-row__cart:hover {
		animation: none;
		box-shadow: 0 0 0 7px rgba(246, 195, 67, 0.4);
	}
}

.tpt-package-row__cart:active {
	transform: scale(0.94);
}

.tpt-package-row__cart:disabled {
	opacity: .6;
	cursor: wait;
}

.tpt-package-row__cart-check {
	display: none;
}

.tpt-package-row__cart.is-added .tpt-package-row__cart-icon {
	display: none;
}

.tpt-package-row__cart.is-added .tpt-package-row__cart-check {
	display: inline-flex;
	color: #1e8e3e;
}

.tpt-package-row__cart.is-loading .tpt-package-row__cart-icon {
	animation: tpt-package-pulse .8s ease-in-out infinite;
}

@keyframes tpt-package-pulse {
	50% { opacity: .35; }
}

/* Catalog / shop loop context (sizing is handled by the container queries below). */
.tpt-package-loop .tpt-package-table {
	margin: 10px 0 0;
}

/* Sized by the table's own width (sidebars, loop cards), not the viewport. */

/* Compact one-line layout for medium containers. */
@container (max-width: 640px) {

	.tpt-package-row {
		gap: 8px;
		padding: 11px 12px 11px 16px;
	}

	.tpt-package-row__quantity {
		font-size: 17px;
		min-width: 1.8em;
	}

	.tpt-package-row__per-piece,
	.tpt-package-row__shipping {
		font-size: 13px;
	}

	.tpt-package-icon--package {
		width: 18px;
		height: 18px;
	}

	.tpt-package-row__regular-total {
		font-size: 13px;
	}

	.tpt-package-row__total {
		font-size: 17px;
	}

	.tpt-package-row__prices {
		gap: 8px;
		min-width: 150px;
	}

	.tpt-package-row__shipping--has-badge {
		margin-right: 18px;
	}

	.tpt-package-row__cart {
		width: 38px;
		height: 38px;
	}
}

/* Narrow containers (catalog/loop cards): ultra-compact, still one line per tier. */
@container (max-width: 460px) {

	.tpt-package-row {
		gap: 6px;
		padding: 7px 8px 7px 12px;
	}

	.tpt-package-row.tiered-pricing--active {
		margin: -1px -3px;
	}

	.tpt-package-row__quantity {
		font-size: 15px;
		min-width: 1.6em;
	}

	.tpt-package-row__per-piece,
	.tpt-package-row__shipping {
		font-size: 11px;
	}

	.tpt-package-row__shipping {
		gap: 4px;
	}

	/* Inline next to the prices — centering wastes width here. */
	.tpt-package-row__shipping--has-badge {
		margin-right: 4px;
	}

	.tpt-package-icon--package {
		width: 15px;
		height: 15px;
	}

	.tpt-package-icon--truck {
		width: 16px;
		height: 16px;
	}

	.tpt-package-row__regular-total {
		font-size: 11px;
	}

	.tpt-package-row__total {
		font-size: 15px;
	}

	.tpt-package-row__prices {
		gap: 6px;
		min-width: 105px;
	}

	.tpt-package-row__cart {
		width: 32px;
		height: 32px;
	}

	.tpt-package-row__cart .tpt-package-icon--cart,
	.tpt-package-row__cart .tpt-package-icon--check {
		width: 17px;
		height: 17px;
	}
}

/* Tiny containers: the free-shipping badge moves to its own line. */
@container (max-width: 330px) {

	.tpt-package-row {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.tpt-package-row.tiered-pricing--active {
		margin: -1px 0;
	}

	.tpt-package-row__shipping {
		order: 3;
		flex-basis: 100%;
		margin-left: 0;
		justify-content: flex-start;
	}

	.tpt-package-row__prices {
		margin-left: auto;
	}
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {

	@media (max-width: 480px) {

		.tpt-package-row {
			flex-wrap: wrap;
			row-gap: 6px;
			padding: 11px 14px;
		}

		.tpt-package-row.tiered-pricing--active {
			margin: -1px 0;
		}

		.tpt-package-row__shipping {
			order: 3;
			flex-basis: 100%;
			margin-left: 0;
			justify-content: flex-start;
		}

		.tpt-package-row__prices {
			margin-left: auto;
		}
	}
}