/* FPE Gift Cards — minimal layout, typography is inherited from the theme. */

.fpe-gc-fields {
	display: grid;
	gap: var(--spacing-lg, 1rem);
	margin: 0 0 20px;
}

.fpe-gc-field {
	display: grid;
	gap: 4px;
	margin: 0;
}

.fpe-gc-field input[type="text"],
.fpe-gc-field input[type="email"],
.fpe-gc-field textarea {
	width: 100%;
	box-sizing: border-box;
}

/* Same look as the theme's "Other variation(s)" label. */
.fpe-gc-label,
.fpe-gc-format legend.fpe-gc-label {
	display: block;
	margin: 0 0 0.25rem;
	padding: 0;
	font-size: 0.75rem;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--darkgreytext, #5c5e5d);
}

/* Amount: one outlined box, value in the middle, − and + on each side. */
.fpe-gc-stepper {
	display: grid;
	grid-template-columns: 3rem 1fr 3rem;
	align-items: center;
	border: var(--border, 1px solid #dddedd);
	border-radius: var(--b-radius, 0.25rem);
	transition: border-color var(--transition-ease, 0.33s ease);
}

/* Same width as one card format button; full width on mobile (theme breakpoint). */
.fpe-gc-stepper {
	width: calc((100% - var(--spacing-md, 0.75rem)) / 2);
	box-sizing: border-box;
}

@media (width <= 600px) {
	.fpe-gc-stepper {
		width: 100%;
	}
}

.fpe-gc-stepper:hover {
	border-color: var(--middlegreytext, #767676);
}

.fpe-gc-stepper__btn {
	height: 100%;
	min-height: 3rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.4rem;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
}

.fpe-gc-stepper__btn:disabled {
	opacity: 0.25;
	cursor: default;
}

.fpe-gc-stepper__value {
	text-align: center;
	font-size: 1.1rem;
	font-weight: 600;
}

/* Card format: two buttons side by side. */
.fpe-gc-format {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

.fpe-gc-format__options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-md, 0.75rem);
}

.fpe-gc-format__option {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	padding: var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem);
	border: var(--border, 1px solid #dddedd);
	border-radius: var(--b-radius, 0.25rem);
	text-align: center;
	cursor: pointer;
	transition: all var(--transition-ease, 0.33s ease);
}

.fpe-gc-format__option:hover {
	border-color: var(--middlegreytext, #767676);
}

.fpe-gc-format__option:has(input:checked) {
	border-color: var(--darkgrey, #3a3c3b);
	background: var(--ultralightgrey, #f6f7f5);
}

.fpe-gc-format__option:has(input:focus-visible) {
	outline: 2px solid var(--darkgrey, #3a3c3b);
	outline-offset: 2px;
}

/* The radio stays in the form (and for keyboards / screen readers), hidden visually. */
.fpe-gc-format__option input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.fpe-gc-format__title {
	font-weight: 600;
}

.fpe-gc-format__hint {
	font-size: 0.8rem;
	color: var(--middlegreytext, #767676);
}

/* Personalise: pencil icon + text link. */
.fpe-gc-personalize__open {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	justify-self: start;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.fpe-gc-personalize__open span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fpe-gc-personalize__icon {
	flex-shrink: 0;
}

.fpe-gc-personalize__summary {
	margin: 0;
	font-size: 0.9em;
	opacity: 0.7;
}

.fpe-gc-dialog {
	width: min(480px, calc(100vw - 32px));
	box-sizing: border-box;
	padding: 24px;
	border: 0;
	border-radius: 8px;
}

.fpe-gc-dialog[open] {
	display: grid;
	gap: 12px;
}

.fpe-gc-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.fpe-gc-dialog__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.fpe-gc-dialog__title {
	margin: 0;
	padding-right: 32px;
}

/* Theme form rows (floating label on the border): keep the field margin only. */
.fpe-gc-dialog .form-row {
	margin: 0;
}

.fpe-gc-dialog .form-row input,
.fpe-gc-dialog .form-row textarea {
	box-sizing: border-box;
	width: 100%;
}

.fpe-gc-dialog .form-row textarea {
	resize: vertical;
}

.fpe-gc-dialog .fpe-gc-dialog__done {
	margin-bottom: 0;
}

.fpe-gc-dialog__intro {
	margin: 0 0 0.5rem;
}

.fpe-gc-dialog__done {
	justify-self: end;
}

/*
 * Inside the "Gift card" payment method box. The theme (css/style-checkout.css)
 * positions every input of a payment method absolutely, for the radio button:
 * undo that for our field. Input and button keep the theme look.
 */
.fpe-gc-redeem {
	margin: 0;
}

.fpe-gc-redeem__form,
.fpe-gc-redeem__applied {
	display: flex;
	gap: 0.7em;
	align-items: center;
}

.wc_payment_methods .fpe-gc-redeem input[type="text"] {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
}

.wc_payment_methods .fpe-gc-redeem .button {
	flex-shrink: 0;
	margin-bottom: 0;
}

.fpe-gc-redeem__applied span {
	flex: 1;
}

.fpe-gc-redeem__rest {
	margin: 8px 0 0;
}

/* "Remove" on the gift card line of the totals. */
.fpe-gc-remove-link {
	margin-left: 8px;
	font-size: 0.85em;
	text-decoration: underline;
}

.fpe-gc-redeem__message {
	margin: 6px 0 0;
	font-size: 0.9em;
}

.fpe-gc-redeem__message:empty {
	display: none;
}

.fpe-gc-redeem__message.is-error {
	color: #b32d2e;
}

.fpe-gc-redeem.is-busy {
	opacity: 0.6;
}

.fpe-gc-issued {
	margin: 24px 0;
}

/* Checkout summary: card format under the product name. */
.fpe-gc-item-format {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--middlegreytext, #767676);
}