/**
 * Customer-entered gift card amount field.
 * Reuses .sgc-denomination-pill styling from denomination-picker.css for
 * the suggested-amount buttons. The number input itself is deliberately
 * left to inherit the theme's own input[type="number"] styling (border,
 * radius, font, padding) rather than overriding it, so it matches its
 * sibling fields (recipient email, message, etc.) exactly rather than
 * looking like a separate, unstyled control.
 */

.sgc_custom_amount {
	margin-bottom: 1em;
}

.sgc_custom_amount label {
	display: block;
	margin-bottom: 0.4em;
	font-family: var(--em-font__main, inherit);
	font-size: var(--em-input-font-size, inherit);
	color: var(--em-input-color, inherit);
}

.sgc_custom_amount input[type="number"] {
	width: 100%;
}

.sgc_custom_amount input[type="number"]:invalid {
	border-color: #b23a3a;
}