/**
 * Gift Voucher — product field layout.
 */

/*
 * The voucher fields are injected inside `form.cart` before the add-to-cart
 * button. Many themes lay `form.cart` out as an inline / flex / grid row
 * (quantity + add-to-cart + wishlist), which squashes those controls when a
 * wide block is added as a sibling. Force the form to wrap and make our
 * fields occupy the full row so the cart controls render on their own line,
 * matching the layout of other products.
 */
form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 0.5rem;
}

form.cart > .gv-gift-voucher-fields {
	order: -1;
	flex: 1 0 100%;
	width: 100%;
	max-width: 100%;
}

.gv-gift-voucher-fields {
	margin: 1.5rem 0 1.75rem;
	padding: 1rem 0 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	max-width: 36rem;
}

.gv-fieldset {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.gv-legend {
	font-weight: 600;
	margin-bottom: 0.5rem;
	padding: 0;
	font-size: 1em;
}

.gv-radios--amount {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
}

.gv-radio-label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	cursor: pointer;
	font-weight: 500;
}

.gv-radio-label input {
	margin: 0;
}

.gv-helper {
	margin: 0.5rem 0 0;
	font-size: 0.9em;
	opacity: 0.85;
}

.gv-field {
	margin-bottom: 1rem;
}

.gv-field--conditional[hidden] {
	display: none !important;
}

.gv-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.gv-gift-voucher-fields .input-text,
.gv-gift-voucher-fields .select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.gv-gift-voucher-fields textarea.input-text {
	min-height: 5rem;
	resize: vertical;
}

@media (max-width: 480px) {
	.gv-radios--amount {
		flex-direction: column;
		align-items: flex-start;
	}
}