/*
 * Storefront cart pieces from this plugin.
 *   .chv-rw  rewards bar — side cart, cart page, checkout (src/RewardBar.php)
 *   .chv-mc  side cart discount summary (src/MiniCartSummary.php)
 */

/* ------------------------------------------------------------------ rewards bar */

.chv-rw {
	--chv-rw-accent: #3d5a4b;
	--chv-rw-ground: #f1f5f0;
	--chv-rw-line: #dde6dc;
	--chv-rw-text: #25211f;
	--chv-rw-muted: #6b7570;
	--chv-rw-icon: 34px;
	box-sizing: border-box;
	padding: 12px 14px 10px;
	border-radius: 10px;
	background: var(--chv-rw-ground);
	color: var(--chv-rw-text);
	font-size: 13px;
	line-height: 1.5;
	/* The layout follows the box's own width, not the screen's: the same bar sits in a 360px side cart
	   and across a full checkout page. */
	container-type: inline-size;
}

.chv-rw[hidden] {
	display: none;
}

.chv-rw__inner {
	display: grid;
	gap: 12px;
}

.chv-rw__msg {
	margin: 0;
	font-weight: 600;
	text-wrap: balance;
}

.chv-rw__msg .woocommerce-Price-amount {
	color: var(--chv-rw-accent);
	font-weight: 700;
	white-space: nowrap;
}

.chv-rw__note {
	margin: 6px 0 0;
	color: var(--chv-rw-muted);
	font-size: 12px;
}

.chv-rw__track {
	position: relative;
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The line runs from the centre of the first icon to the centre of the last — nothing sticks out past
 * them — and fills from the start side (right in Arabic). Each step is an equal column, so the icons'
 * centres sit half a column in from each end. --chv-rw-fill is 0 at the first icon and 1 at the last.
 */
.chv-rw__track::before,
.chv-rw__track::after {
	content: "";
	position: absolute;
	top: calc(var(--chv-rw-icon) / 2 - 2px);
	inset-inline-start: calc(100% / var(--chv-rw-steps, 3) / 2);
	height: 4px;
}

.chv-rw__track::before {
	inset-inline-end: calc(100% / var(--chv-rw-steps, 3) / 2);
	background: var(--chv-rw-line);
}

.chv-rw__track::after {
	width: calc((100% - 100% / var(--chv-rw-steps, 3)) * var(--chv-rw-fill, 0));
	background: var(--chv-rw-accent);
}

.chv-rw__step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0 2px;
	text-align: center;
}

.chv-rw__icon {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: var(--chv-rw-icon);
	height: var(--chv-rw-icon);
	margin-bottom: 4px;
	border: 2px solid var(--chv-rw-line);
	border-radius: 50%;
	background: #fff;
	color: var(--chv-rw-muted);
}

.chv-rw__icon svg {
	display: block;
}

.chv-rw__label {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
}

.chv-rw__amount {
	color: var(--chv-rw-muted);
	font-size: 11.5px;
	line-height: 1.35;
	white-space: nowrap;
}

.chv-rw__amount .woocommerce-Price-amount {
	color: inherit;
	font-weight: 400;
}

.chv-rw__step.is-done .chv-rw__icon {
	border-color: var(--chv-rw-accent);
	background: var(--chv-rw-accent);
	color: #fff;
}

.chv-rw__step.is-done .chv-rw__label {
	color: var(--chv-rw-accent);
}

/* Reached but held back (a coupon or bundle savings): a white circle on the line, clearly not earned. */
.chv-rw__step.is-held .chv-rw__icon {
	border-style: dashed;
	border-color: #b9c4bd;
}

.chv-rw__step.is-held .chv-rw__label,
.chv-rw__step.is-held .chv-rw__amount {
	color: var(--chv-rw-muted);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Side cart: above the products, inside the drawer's side padding. */
.chv-rw--side {
	margin: 12px 15px 4px;
}

/* Cart page and checkout: a framed box like the others on those pages. */
.chv-rw--cart,
.chv-rw--checkout {
	--chv-rw-icon: 40px;
	margin: 0 0 24px;
	padding: 16px 18px;
	border: 1px solid var(--chv-rw-line);
	background: #fff;
}

.chv-rw--cart .chv-rw__msg,
.chv-rw--checkout .chv-rw__msg {
	font-size: 14px;
}

.chv-rw--cart .chv-rw__label,
.chv-rw--checkout .chv-rw__label {
	font-size: 13px;
}

/* Wide box: the words on one side, the steps across the rest. */
@container (min-width: 640px) {
	.chv-rw__inner {
		grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
		align-items: center;
		gap: 32px;
	}

	.chv-rw__msg {
		font-size: 15px;
	}
}

/* ------------------------------------------------------------------ side cart summary */

/* WooCommerce prints the total inside a flex paragraph; the summary takes the whole line. */
.chv-mc {
	display: grid;
	flex: 1 1 100%;
	gap: 6px;
	width: 100%;
	font-weight: 400;
}

.chv-mc__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}

.chv-mc__row--discount {
	color: #3d5a4b;
}

.chv-mc__row--discount .woocommerce-Price-amount {
	color: inherit;
}

.chv-mc__row--total {
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid #dde6dc;
	font-size: 18px;
}

.chv-mc__note {
	color: #6b7570;
	font-size: 12px;
}

/* ------------------------------------------------------------------ gift lines */

.chv-rw-free {
	color: #3d5a4b;
	font-weight: 700;
}