/**
 * The gift card purchase form.
 *
 * Sits inside somebody else's theme on the product page, and inside a page the
 * owner designed in the block. So it styles its own fields and nothing around
 * them: no resets, no opinions about buttons the theme already owns.
 */
/* The block's own wrapper carries whatever the editor's design controls set —
   background, padding, border, type — so it states nothing itself beyond how
   its parts stack. Anything written here would be a value the owner cannot
   change from the editor. */
.spgc-block {
	display: flex;
	flex-direction: column;
}

/* Size and weight stay the theme's — this only says how much room it takes,
   since the block is free to sit under a heading the page already has. */
.spgc-title {
	margin: 0 0 var(--spgc-gap, 1rem);
}

.spgc-description {
	margin: 0 0 var(--spgc-gap, 1rem);
}

/* Only an editor ever sees this: a gift card with no price cannot be sold, and
   a dead form would be a worse way to say so. */
.spgc-empty {
	padding: 1rem;
	border: 1px dashed var(--spgc-border, #d5d8dd);
	border-radius: var(--spgc-radius, 0.375rem);
	color: var(--spgc-hint, #6b7380);
}

.spgc-form,
.spgc-fields {
	/* Every value the form draws with, in one place. Override any of these from
	   a theme or a snippet and the form follows — which is how it is styled
	   outside the block editor, on the product page, where a block's own design
	   controls cannot reach. */
	--spgc-gap: 1rem;
	--spgc-section-gap: 1.5rem;
	/* --spgc-field-gap is deliberately not here. The block writes it onto the
	   form as an inline style, and a declaration on the form itself would win
	   over that — the control would move and nothing would happen. Used with a
	   fallback instead, which is also what the product page needs, having no
	   block around it to write anything. */
	--spgc-hint: #6b7380;
	--spgc-border: #d5d8dd;
	--spgc-rule: 1px solid var(--spgc-border);
	--spgc-radius: 0.375rem;
	/* The theme's own type scale and heading colour where there is one, and
	   values of our own where there is not. */
	--spgc-label-size: var(--font-xs, 0.75rem);
	--spgc-label-color: var(--theme-palette-color-4, #111111);
	--spgc-label-transform: uppercase;
	--spgc-label-spacing: 0.09em;
	--spgc-label-weight: 600;
	--spgc-input-size: var(--font-s, 0.875rem);
	--spgc-hint-size: 0.75rem;
	--spgc-summary-label-size: 0.875rem;
	--spgc-summary-label-weight: 700;
	--spgc-value-size: 1.5rem;
	--spgc-value-weight: 700;
	/* The theme's own accent, with somewhere to fall back to on a theme that
	   has no such thing. */
	--spgc-value-color: var(--theme-palette-color-1, currentcolor);
	--spgc-field-width: 100%;
}

.spgc-form {
	display: flex;
	flex-direction: column;
}

/* A rule between groups rather than a box around each: the form reads as
   price, then card, then what it comes to, without any chrome of its own to
   argue with the theme.

   The price and the summary state their own rule rather than relying on
   sitting next to another section, because .spgc-fields wraps the middle ones
   and an adjacency selector does not reach across it. */
.spgc-section {
	padding: var(--spgc-section-gap) 0;
}

.spgc-form > .spgc-section:first-child {
	padding-top: 0;
}

.spgc-fields > .spgc-section + .spgc-section,
.spgc-summary {
	border-top: var(--spgc-rule);
}

.spgc-price {
	border-bottom: var(--spgc-rule);
}

.spgc-price,
.spgc-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--spgc-gap);
	margin: 0;
}

/* The summary labels are their own thing: they name a sum rather than a field,
   and they read as running text, not as a form label. */
.spgc-price__label,
.spgc-total__label {
	font-size: var(--spgc-summary-label-size);
	font-weight: var(--spgc-summary-label-weight);
	color: var(--spgc-label-color);
}

.spgc-price__value,
.spgc-total__value {
	font-size: var(--spgc-value-size);
	font-weight: var(--spgc-value-weight);
	color: var(--spgc-value-color);
}

.spgc-total {
	margin-bottom: var(--spgc-gap);
}

.spgc-form .spgc-submit {
	display: block;
	width: 100%;
}

.spgc-note {
	margin: 0.75rem 0 0;
	font-size: var(--spgc-label-size);
	color: var(--spgc-hint);
	text-align: center;
}

.spgc-fields {
	display: flex;
	flex-direction: column;
	margin: 0;
}

/* The space between one field and the next — what the block's control changes.
   Not declared in the token list above for the same reason the old one was
   not: the block sets it on an ancestor, and a declaration nearer the fields
   would win over the inherited value and leave the control inert. */
.spgc-fields .spgc-section {
	display: flex;
	flex-direction: column;
	gap: var(--spgc-field-gap, 1.5rem);
}

.spgc-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
}

.spgc-field label {
	font-size: var(--spgc-label-size);
	font-weight: var(--spgc-label-weight);
	color: var(--spgc-label-color);
	text-transform: var(--spgc-label-transform);
	letter-spacing: var(--spgc-label-spacing);
}

/* Width and radius only — colour, font and focus ring stay the theme's, so the
   fields look like the rest of the page rather than like a plugin. */
.spgc-input {
	width: var(--spgc-field-width);
	border-radius: var(--spgc-radius);
	font-size: var(--spgc-input-size);
}

/* One denomination is not a choice, so it is stated rather than offered. */
.spgc-only-amount {
	margin: 0;
	font-size: var(--spgc-value-size);
	font-weight: var(--spgc-value-weight);
	color: var(--spgc-value-color);
}

.spgc-hint {
	font-size: var(--spgc-hint-size);
	color: var(--spgc-hint);
}

/* Taking an applied card off again.

   WooCommerce draws the money for it, a row above this one, because a gift
   card reaches the total as a cart fee. All that was missing was the way to
   undo it. The cross is red so the control is recognisable without reading;
   the words stay quiet, because a line of red text under the total reads as
   something having gone wrong. */
.spgc-applied {
	--spgc-remove: currentcolor;
	--spgc-remove-active: #b32d2e;
	--spgc-summary-inset: 1rem;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	margin-bottom: 0.5rem;
}

/* The summary insets its rows once it is wide enough to be a sidebar, and it
   does that to panels and totals items — neither of which this is. Same
   container query, same inset, so the control lines up with the words beneath
   it instead of hanging off the edge. */
@container (min-width: 700px) {
	.wc-block-components-sidebar .spgc-applied {
		padding-left: var(--spgc-summary-inset);
		padding-right: var(--spgc-summary-inset);
	}
}

.spgc-remove {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--spgc-remove);
	font-size: 0.875rem;
	opacity: 0.7;
	cursor: pointer;
}

.spgc-remove:hover,
.spgc-remove:focus-visible {
	color: var(--spgc-remove-active);
	opacity: 1;
}

.spgc-remove[disabled] {
	cursor: default;
	opacity: 0.3;
}

/* The cross carries the warning, the words stay quiet — so the control reads
   as "remove" at a glance without a line of red text sitting under the total. */
.spgc-remove__icon {
	fill: var(--spgc-remove-active);
}

/* The field in the block cart and checkout.

   Almost nothing, on purpose. The field is built from WooCommerce's own
   Panel, ValidatedTextInput and Button, inside its own TotalsWrapper, so the
   divider, the floating label, the borders and the button are all drawn by the
   rules that draw the coupon box. Anything we added here would be a second
   opinion about a control we do not own. */