/**
 * Checkbox (Checkout 2188:1543): 22px box, radius 7, 1.5px muted border;
 * checked orange with a white check; Body/M label, 12px gap. Checkout
 * markup: .checkout-check__label / __box; elsewhere .check / .check__box.
 */

.check,
.checkout-check__label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--color-ink);
	font-size: var(--text-body-m);
	line-height: var(--leading-body-m);
	cursor: pointer;
}

.check__box,
.checkout-check__box,
.checkout-check input[type="checkbox"] {
	flex: none;
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	border: 1.5px solid var(--color-muted);
	border-radius: 7px;
	background: var(--color-white) center / 14px no-repeat;
	appearance: none;
	cursor: pointer;
}

.check__box:checked,
.checkout-check__box:checked,
.checkout-check input[type="checkbox"]:checked {
	border-color: var(--color-orange);
	background-color: var(--color-orange);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
}

.check a,
.checkout-check__label a {
	color: inherit;
	text-decoration: underline;
}

.check a:hover,
.checkout-check__label a:hover {
	color: var(--color-orange);
}