/*
 * Estilos MINIMOS y heredados: solo el layout funcional de los cajones del codigo,
 * que no se puede resolver con el tema. Sin colores, tipografias ni bordes propios
 * — el boton usa .wp-element-button/.button del tema y los cajones heredan del
 * input del tema. Ver la regla de estilos minimos del grupo.
 */
.cgr-redeem__boxes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	align-items: center;
	margin-bottom: 0.9em;
}

.cgr-redeem__box {
	width: 3.6em;
	min-width: 0;
	padding: 0.6em 0.3em;
	text-align: center;
	letter-spacing: 0.08em;
	box-sizing: border-box;
}

.cgr-redeem__sep {
	opacity: 0.5;
}

.cgr-redeem__applied {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
}

.cgr-redeem__applied-item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	align-items: baseline;
	margin-bottom: 0.3em;
}

.cgr-redeem__msg {
	margin: 0 0 1em;
	padding: 0.8em 1em;
	border-left: 4px solid currentColor;
}

.cgr-redeem--page .cgr-redeem__form {
	max-width: 26em;
}

/* En el checkout/carrito clasico el bloque va compacto dentro de su columna. */
.cgr-redeem--checkout,
.cgr-redeem--cart {
	margin-bottom: 1.5em;
}

/* Fila "campo + boton" del formulario del checkout de bloques. Sin esto el boton
   se encima del campo (el bloque de descuentos no impone layout a sus fills). */
.cgr-redeem__inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: center;
}

.cgr-redeem__input {
	flex: 1 1 9em;
	min-width: 0;
}

.cgr-redeem__inline .cgr-redeem__submit {
	flex: 0 0 auto;
}

.cgr-redeem--blocks {
	margin: 0.75em 0 0;
}

.cgr-redeem__label {
	display: block;
	margin-bottom: 0.4em;
}

.cgr-redeem--blocks .cgr-redeem__applied-item {
	gap: 0.5em;
}