/**
 * The free delivery panel.
 *
 * Sits above the basket, so it has to look like it belongs to the shop rather
 * than to a plugin: the same rounded, bordered, off-white card the product page
 * uses for its artwork guidelines and option groups.
 */

.prismat-cr-freeship {
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid #e6e6e6;
	border-radius: 6px;
	background-color: #fafafa;
}

/* Nothing to say yet - an empty basket, or the shop has the message switched
   off. The panel stays in the page so the script has somewhere to write. */
.prismat-cr-freeship.is-quiet {
	display: none;
}

.prismat-cr-freeship__text {
	margin: 0;
	font-weight: 600;
	line-height: 1.4;
}

.prismat-cr-freeship__track {
	margin-top: 10px;
	height: 6px;
	border-radius: 3px;
	background-color: #ececec;
	overflow: hidden;
}

.prismat-cr-freeship__bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 3px;
	background-color: #2f6fed;
	transition: width 0.3s ease;
}

/*
 * Earned. Green, matching the "Exclusive Online Price" badge, because both say
 * the same thing to a customer: this order is better than it was.
 */
.prismat-cr-freeship.is-qualified {
	border-color: #cbe6d4;
	background-color: #f2f9f5;
}

.prismat-cr-freeship.is-qualified .prismat-cr-freeship__bar {
	background-color: #1d6f42;
}

.prismat-cr-freeship.is-qualified .prismat-cr-freeship__text:before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: middle;
	background-color: #1d6f42;
}

/* The bar is decoration once the goal is met; the words carry the meaning. */
.prismat-cr-freeship.is-qualified .prismat-cr-freeship__track {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.prismat-cr-freeship__bar {
		transition: none;
	}
}