.tls-mgc {
	clear: both;
	margin: 0 0 1.5em;
	padding: 0.75em 1em;
	border: 1px solid rgba(0, 0, 0, 0.12);
}

.tls-mgc summary {
	cursor: pointer;
	font-weight: 600;
}

/* Even spacing between the help text, fields, button and message. */
.tls-mgc[open] summary {
	margin-bottom: 0.75em;
}

.tls-mgc > p {
	margin: 0 0 0.75em;
}

.tls-mgc .tls-mgc-message {
	margin: 0.75em 0 0;
}

.tls-mgc .tls-mgc-message:empty,
.tls-mgc [hidden] {
	display: none;
}

.tls-mgc label {
	display: block;
}

.tls-mgc input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 22em;
}

.tls-mgc .tls-mgc-message {
	padding: 0.5em 0.75em;
	border-left: 5px solid rgba(0, 0, 0, 0.3);
	background: var(--mro-green, #006a55);
	color: #fff;
}

.tls-mgc .tls-mgc-message.is-error {
	background: #b32d2e;
}

/* Beats GeneratePress's ".woocommerce button.button:hover { background: var(--accent) }", which is empty on this site. */
.woocommerce .tls-mgc button.tls-mgc-apply:hover,
.woocommerce .tls-mgc button.tls-mgc-apply:focus-visible {
	background: var(--mro-green, #006a55);
	color: #fff;
}

.tls-mgc-remove {
	margin-left: 0.5em;
	font-size: 0.85em;
}

/* Match the cart totals column (WooCommerce: 48% right, full width on small screens). */
.cart-collaterals .tls-mgc {
	box-sizing: border-box;
	width: 48%;
	margin-left: auto;
}

@media (max-width: 768px) {
	.cart-collaterals .tls-mgc {
		width: 100%;
	}
}