/*
 * Waka free shipping bar
 *
 * Shared by the standalone widget and by the Waka Cart order summary, so both
 * always look the same. Colours come in through the variables below.
 */

.waka-ship {
	--waka-ship-primary:   #F0616E;
	--waka-ship-secondary: #4778AB;
	--waka-ship-ink:       #2F3A45;
	--waka-ship-muted:     #8A97A3;
	--waka-ship-track:     #F6E5E7;
	--waka-ship-card:      #FFFFFF;
	--waka-ship-line:      #E6ECF2;
	--waka-ship-radius:    999px;

	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	color: var(--waka-ship-ink);
	background: var(--waka-ship-card);
	border: 1px solid var(--waka-ship-line);
	border-radius: var(--waka-ship-radius);
}

.waka-ship__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--waka-ship-primary);
	background: rgba(240, 97, 110, .12);
	border-radius: 50%;
}

.waka-ship__icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.waka-ship__body {
	flex: 1 1 auto;
	min-width: 0;
}

.waka-ship__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.35;
}

.waka-ship__text strong {
	font-weight: 700;
	color: var(--waka-ship-primary);
}

.waka-ship:not( .is-reached ) .waka-ship__text {
	margin-bottom: 6px;
}

.waka-ship__track {
	height: 8px;
	overflow: hidden;
	background: var(--waka-ship-track);
	border-radius: 999px;
}

.waka-ship__fill {
	display: block;
	height: 100%;
	background: var(--waka-ship-primary);
	border-radius: inherit;
	transition: width .4s ease;
}

.waka-ship__amount {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--waka-ship-muted);
	white-space: nowrap;
}

/* unlocked: no bar, no figures - just the good news */
.waka-ship.is-reached {
	background: rgba(240, 97, 110, .07);
	border-color: transparent;
	border-radius: 12px;
}

.waka-ship.is-reached .waka-ship__icon {
	color: #fff;
	background: var(--waka-ship-primary);
}

/* the copy inside the cart summary sits in a tighter box */
.waka-ship--summary {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 12px;
}

.waka-ship--summary .waka-ship__icon {
	width: 30px;
	height: 30px;
}

.waka-ship--summary .waka-ship__icon svg {
	width: 16px;
	height: 16px;
}

.waka-ship--summary .waka-ship__text {
	font-size: 13px;
}

@media (max-width: 767px) {
	.waka-ship {
		flex-wrap: wrap;
		border-radius: 16px;
	}

	.waka-ship__amount {
		order: 3;
		width: 100%;
		text-align: right;
	}
}