/**
 * Skill Carte Cadeau - the gift card field in the cart and at checkout.
 *
 * Shared by the shortcode field and the block field, so the two look the same
 * on a shop that uses one page of each.
 *
 * As on the product form, almost nothing is styled: this sits inside someone
 * else's theme next to their coupon box, and it has to look like it belongs
 * there rather than announce itself. Borders come from currentColor, sizes
 * from em, so both follow the surrounding text.
 */

.skcc-redeem {
	margin: 1em 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.skcc-redeem > label {
	font-weight: 600;
}

.skcc-redeem__row {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
	align-items: stretch;
}

.skcc-redeem__input {
	flex: 1 1 11em;
	min-width: 0;
	/* Codes are read off a card and typed back: a monospace face keeps the
	   blocks aligned and tells O from 0 while typing. */
	font-family: Consolas, "SF Mono", Menlo, monospace;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.skcc-redeem__input::placeholder {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	opacity: 0.6;
}

.skcc-redeem__apply {
	flex: 0 0 auto;
	min-height: 44px;
	cursor: pointer;
}

.skcc-redeem__apply[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.skcc-redeem__message {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.5;
	opacity: 0.85;
}

.skcc-redeem__message.is-error {
	/* Semantic colour, used only where it means something. */
	color: #a83a33;
	opacity: 1;
}

.skcc-redeem__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.skcc-redeem__item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 0.25em 0.75em;
	align-items: center;
	padding: 0.6em 0.75em;
	border: 1px solid currentColor;
	border-radius: 6px;
	/* Dimmed rather than recoloured, so the box works on any background. */
	border-color: rgba(128, 128, 128, 0.35);
}

.skcc-redeem__code {
	font-family: Consolas, "SF Mono", Menlo, monospace;
	font-size: 0.95em;
	letter-spacing: 0.04em;
}

.skcc-redeem__amount {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.skcc-redeem__remove {
	background: none;
	border: 0;
	padding: 0.25em;
	cursor: pointer;
	font-size: 0.9em;
	text-decoration: underline;
	color: inherit;
	opacity: 0.75;
	min-height: 44px;
}

.skcc-redeem__remove:hover,
.skcc-redeem__remove:focus-visible {
	opacity: 1;
}

.skcc-redeem__item small {
	grid-column: 1 / -1;
	opacity: 0.7;
	font-size: 0.85em;
}

/* Inside the blocks, the discounts slot already provides its own padding. */
.skcc-redeem--blocks {
	margin: 0;
}

@media (max-width: 480px) {
	.skcc-redeem__item {
		grid-template-columns: 1fr auto;
	}

	.skcc-redeem__remove {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

/* Balance checker ---------------------------------------------------------- */

.skcc-balance {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin: 1em 0;
}

.skcc-balance > label {
	font-weight: 600;
}

.skcc-balance__row {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
	align-items: stretch;
}

.skcc-balance__input {
	flex: 1 1 11em;
	min-width: 0;
	font-family: Consolas, "SF Mono", Menlo, monospace;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.skcc-balance__input::placeholder {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	opacity: 0.6;
}

.skcc-balance__submit {
	flex: 0 0 auto;
	min-height: 44px;
	cursor: pointer;
}

.skcc-balance__result {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.5;
	min-height: 1.5em;
}

.skcc-balance__result.is-error {
	color: #a83a33;
}