/* The wallet box at checkout, and the wallet page in the customer's account. */

.kw-box {
	margin: 1em 0;
	padding: .9em 1em;
	border: 1px solid rgba( 0, 0, 0, .14 );
	border-radius: 10px;
}

.kw-box__title {
	font-weight: 700;
	margin-bottom: .5em;
}

.kw-box__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .75em;
	margin-bottom: .5em;
}

.kw-box__toggle {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	cursor: pointer;
	line-height: 1.6;
}

.kw-box__busy,
.kw-box__note {
	display: block;
	font-size: .85em;
	opacity: .7;
	margin: .4em 0 0;
}

/* --- account page --- */

.kw-balance {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	padding: 1.1em 1.25em;
	border: 1px solid rgba( 0, 0, 0, .14 );
	border-radius: 12px;
	margin-bottom: 1.25em;
}

.kw-balance__label {
	opacity: .75;
}

.kw-balance__value {
	font-size: 1.6em;
	font-weight: 700;
}

.kw-history {
	width: 100%;
	border-collapse: collapse;
}

.kw-history th,
.kw-history td {
	padding: .6em .5em;
	border-bottom: 1px solid rgba( 0, 0, 0, .1 );
	text-align: start;
	vertical-align: top;
}

.kw-amount--in {
	color: #1d7a45;
	font-weight: 700;
}

.kw-amount--out {
	color: #a3324a;
	font-weight: 700;
}

.kw-expiry {
	font-size: .85em;
	opacity: .7;
}

.kw-empty {
	opacity: .7;
}

@media ( prefers-color-scheme: dark ) {
	.kw-box,
	.kw-balance {
		border-color: rgba( 255, 255, 255, .22 );
	}
	.kw-history th,
	.kw-history td {
		border-bottom-color: rgba( 255, 255, 255, .16 );
	}
	.kw-amount--in { color: #6ee7a8; }
	.kw-amount--out { color: #ff9db1; }
}

/* --- "you will earn" line, product page and shortcode --- */

.kw-earn {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	margin: .75em 0;
	padding: .6em .8em;
	border-radius: 8px;
	background: rgba( 29, 122, 69, .08 );
	color: inherit;
	font-size: .92em;
	line-height: 1.7;
}

.kw-earn__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: rgba( 29, 122, 69, .18 );
	font-weight: 700;
	font-size: .85em;
}

.kw-earn--bar {
	justify-content: center;
	text-align: center;
	font-size: 1em;
}

.kw-earn-badge {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin-top: .45em;
	padding: .25em .6em;
	border-radius: 999px;
	border: 1px solid rgba( 29, 122, 69, .22 );
	background: rgba( 29, 122, 69, .1 );
	color: #1d7a45;
	/* Fixed, not em: card text is already small and .8em made this unreadable. */
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.kw-earn-badge .amount,
.kw-earn-badge bdi { color: inherit; font-weight: 700; }

.kw-earn-badge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35em;
	height: 1.35em;
	border-radius: 50%;
	background: rgba( 29, 122, 69, .18 );
	font-size: .85em;
	font-weight: 700;
}

.kw-box__row--earn {
	color: #1d7a45;
}

@media ( prefers-color-scheme: dark ) {
	.kw-earn,
	.kw-earn-badge { background: rgba( 110, 231, 168, .12 ); }
	.kw-earn-badge { color: #6ee7a8; border-color: rgba( 110, 231, 168, .28 ); }
	.kw-earn-badge__icon { background: rgba( 110, 231, 168, .22 ); }
	.kw-earn__icon { background: rgba( 110, 231, 168, .22 ); }
	.kw-box__row--earn { color: #6ee7a8; }
}