.wqp-current-price {
	transition: color 0.3s ease;
}

.wqp-current-price.wqp-is-wholesale {
	color: #178a45;
}

/* Belt-and-suspenders: this is WordPress core's own .screen-reader-text
   rule. Some themes don't load it in every context, which lets WooCommerce's
   accessibility copy ("Original price was...") render as visible text. This
   keeps it available to screen readers while hiding it visually, wherever
   it appears near a wholesale-priced product. */
.wqp-current-price .screen-reader-text,
.wqp-banner .screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Pulse whenever price recalculates */
@keyframes wqp-pulse {
	0%   { transform: scale( 1 ); }
	30%  { transform: scale( 1.1 ); }
	60%  { transform: scale( 0.98 ); }
	100% { transform: scale( 1 ); }
}
.wqp-price-pulse {
	animation: wqp-pulse 0.35s ease;
	display: inline-block;
}

/* ============================
   Wholesale banner card
   ============================ */

@keyframes wqp-banner-in {
	0%   { opacity: 0; transform: translateY( 10px ); }
	100% { opacity: 1; transform: translateY( 0 ); }
}

.wqp-banner {
	max-width: 420px;
	margin: 14px 0 20px;
	border-radius: 14px;
	background: linear-gradient( 165deg, #f4faf6 0%, #eef8f1 100% );
	border: 1px solid #d7ecdf;
	box-shadow: 0 2px 10px rgba( 24, 100, 58, 0.06 );
	overflow: hidden;
	animation: wqp-banner-in 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
	font-family: inherit;
}

.wqp-banner-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	padding: 12px 16px;
	border-bottom: 1px solid #d7ecdf;
}

.wqp-banner-icon {
	font-size: 1.1em;
	line-height: 1;
}

.wqp-banner-title {
	font-size: 0.95em;
	font-weight: 700;
	color: #1f4d33;
	letter-spacing: 0.01em;
	margin-right: auto;
}

/* Wholesale unlocked badge, sits inline in the header, animates in/out */
.wqp-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: linear-gradient( 135deg, #1a8917, #27ae60 );
	color: #fff;
	font-size: 0.74em;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 6px 11px;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba( 26, 137, 23, 0.28 );
	opacity: 0;
	transform: translateY( 4px ) scale( 0.85 );
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 ), max-width 0.4s ease, padding 0.4s ease;
}

.wqp-badge-check {
	font-size: 0.9em;
}

.wqp-badge-visible {
	opacity: 1;
	transform: translateY( 0 ) scale( 1 );
	max-width: 280px;
	pointer-events: auto;
	animation: wqp-badge-pop 0.5s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

@keyframes wqp-badge-pop {
	0%   { transform: scale( 0.6 ); opacity: 0; }
	60%  { transform: scale( 1.08 ); opacity: 1; }
	100% { transform: scale( 1 ); opacity: 1; }
}

/* Tier list */
.wqp-tier-list {
	padding: 6px 8px;
}

.wqp-tier-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px;
	border-radius: 8px;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.wqp-tier-row + .wqp-tier-row {
	margin-top: 2px;
}

.wqp-tier-check {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid #b9dcc4;
	position: relative;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.wqp-tier-check::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 5px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translate( -50%, -60% ) rotate( -45deg ) scale( 0 );
	transition: transform 0.25s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.wqp-tier-range {
	flex: 1 1 auto;
	font-size: 0.88em;
	color: #4b5f54;
}

.wqp-tier-price {
	flex: 0 0 auto;
	font-size: 0.88em;
	font-weight: 700;
	color: #2b3d33;
	white-space: nowrap;
}

.wqp-tier-unit {
	font-weight: 400;
	font-size: 0.85em;
	color: #7c8a80;
	margin-left: 3px;
}

.wqp-tier-row.wqp-tier-active {
	background: #e2f4e8;
	transform: translateX( 2px );
}

.wqp-tier-row.wqp-tier-active .wqp-tier-check {
	background: #1a8917;
	border-color: #1a8917;
}

.wqp-tier-row.wqp-tier-active .wqp-tier-check::after {
	transform: translate( -50%, -60% ) rotate( -45deg ) scale( 1 );
}

.wqp-tier-row.wqp-tier-active .wqp-tier-range,
.wqp-tier-row.wqp-tier-active .wqp-tier-price {
	color: #17663a;
}

/* Mobile */
@media ( max-width: 480px ) {
	.wqp-banner {
		max-width: 100%;
		border-radius: 12px;
		margin: 12px 0 16px;
	}

	.wqp-banner-head {
		padding: 10px 12px;
	}

	.wqp-banner-title {
		font-size: 0.88em;
	}

	.wqp-badge {
		font-size: 0.7em;
		padding: 5px 9px;
	}

	.wqp-tier-row {
		padding: 9px 6px;
	}

	.wqp-tier-range,
	.wqp-tier-price {
		font-size: 0.85em;
	}
}