/* Public withdrawal form (block + shortcode).
   Borders use a translucent grey so they stay visible on any theme background
   (light or dark) — themes that set their own border colour to white/near-bg
   would otherwise make the fields invisible. Field/control rules are scoped
   under .sceu-wf so they out-specify the theme's `input[type=...]` rules. */

.sceu-wf {
	--sceu-field-border: rgba( 127, 127, 127, 0.45 );
	--sceu-border: rgba( 127, 127, 127, 0.3 );
	--sceu-muted: rgba( 127, 127, 127, 0.9 );
	max-width: 32em;
	margin: 1em 0;
}

/* `.sceu-wf .…` (0,2,0) so the heading follows the form's colour rather than a
   theme that colours bare headings — e.g. Astra's `.entry-content :where(h3)`
   (0,1,0) — which would otherwise keep its light-mode colour on a dark page. */
.sceu-wf .sceu-wf__heading {
	margin: 0 0 0.4em;
	color: inherit;
}

.sceu-wf__intro {
	margin: 0 0 1em;
}

/* Field anatomy mirrors SureCart's sc-form-control: a label, an input wrapper,
   then optional help text — so fields read the same as SureCart's forms. */
.sceu-form-control {
	margin: 0 0 0.85em;
}

.sceu-form-control__label,
.sceu-wf__label {
	display: block;
	font-weight: 600;
	margin: 0 0 0.35em;
}

/* Astra colours bare `label` (0,0,1); scope under .sceu-wf (0,2,0) so labels
   follow the form's colour and stay readable on SureCart's dark theme. */
.sceu-wf .sceu-form-control__label,
.sceu-wf .sceu-wf__label {
	color: inherit;
}

.sceu-form-control__required {
	color: #d63638;
	margin-left: 0.15em;
}

.sceu-form-control__help-text {
	margin: 0.35em 0 0;
	font-size: 0.875em;
	opacity: 0.7;
}

/* Editor-only note under the static block preview. */
.sceu-wf__preview-note {
	margin: 0.8em 0 0;
	font-size: 0.85em;
	opacity: 0.7;
}

.sceu-wf .sceu-wf__input,
.sceu-wf .sceu-wf__textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.7em;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var( --sceu-field-border );
	border-radius: 6px;
}

/* Block + vertical-only resize: a textarea is inline-block and resizable in
   both axes by default, so shrinking its width let the submit button slide up
   beside it and broke the layout. */
.sceu-wf .sceu-wf__textarea {
	display: block;
	min-height: 6em;
	resize: vertical;
}

.sceu-wf .sceu-wf__submit {
	/* inline-flex + centring so the in-flight spinner (::before) sits centred
	   beside the label instead of dropping to the text baseline. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	cursor: pointer;
	padding: 0.6em 1.2em;
	border: none;
	border-radius: 6px;
	background: var( --sc-color-primary-500, #2271b1 );
	color: var( --sc-color-primary-text, #fff );
}

.sceu-wf .sceu-wf__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* In-flight state: keep the label, just disable the button and show a spinner
   before it (the button is inline-flex, so ::before sits left of the text). */
.sceu-wf .sceu-wf__submit.is-loading::before {
	content: "";
	/* flex:none — the button is inline-flex, so without this the empty pseudo
	   shrinks to ~0 width and renders as a sliver instead of a circle. */
	flex: none;
	display: inline-block;
	box-sizing: border-box;
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	border: 2px solid rgba( 255, 255, 255, 0.45 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: sceu-spin 0.6s linear infinite;
}

@keyframes sceu-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Respect reduced-motion: show the ring but stop it spinning. */
@media ( prefers-reduced-motion: reduce ) {
	.sceu-wf .sceu-wf__submit.is-loading::before {
		animation: none;
	}
}

.sceu-wf .sceu-wf__back {
	font: inherit;
	cursor: pointer;
	background: none;
	border: none;
	color: var( --sceu-muted, currentColor );
	padding: 0.6em 0.4em;
	margin-left: 0.5em;
}

/* These are <button>s styled as text links; without explicit hover/focus the
   theme's button:hover would paint them with a solid background. Keep them
   link-like and override the theme. */
.sceu-wf .sceu-wf__again:hover,
.sceu-wf .sceu-wf__again:focus,
.sceu-wf .sceu-wf__back:hover,
.sceu-wf .sceu-wf__back:focus {
	background: none;
	box-shadow: none;
	color: inherit;
	text-decoration: underline;
}

.sceu-wf__actions {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 1em;
}

/* Honeypot: visually hidden but present for bots. */
.sceu-wf__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sceu-wf__error {
	color: #a50e0e;
	margin: 0.6em 0 0;
}

/* Per-field validation message, shown directly below the input it refers to. */
.sceu-wf .sceu-form-control__error {
	color: #a50e0e;
	margin: 0.35em 0 0;
	font-size: 0.875em;
}

/* Invalid field outline — scoped under .sceu-wf so it beats the theme's input
   border rule (which sets the colour at 0,1,1; this wins at 0,2,1). */
.sceu-wf .sceu-wf__input[aria-invalid="true"] {
	border-color: #d63638;
}

/* Visually hidden but announced by screen readers (quantity live region). */
.sceu-wf .sceu-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* Don't show a focus outline when we programmatically move focus to the
   result region after a lookup (it's not a user-actioned focus). */
.sceu-wf .sceu-wf__result:focus {
	outline: none;
}

.sceu-wf__again {
	font: inherit;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0 0 0.6em;
	color: var( --sceu-muted, currentColor );
	text-decoration: underline;
}

.sceu-wf__order-head {
	font-weight: 600;
	margin: 0 0 0.5em;
}

/* Item picker — same structure + look as the logged-in dashboard form.
   Scoped under .sceu-wf so these out-specify the theme's input/button rules
   (and min-*:0 defeats themes that force a fixed control height), giving the
   same 30px steppers the dashboard uses. */

.sceu-wf .sceu-items {
	list-style: none;
	margin: 0.75em 0 1em;
	padding: 0.6em 0 0;
	border-top: 1px solid var( --sceu-border );
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.sceu-wf .sceu-items__hint {
	margin: 0;
	font-size: 0.85em;
	opacity: 0.7;
}

.sceu-wf .sceu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
}

.sceu-wf .sceu-item__img {
	width: 40px;
	height: 40px;
	flex: none;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var( --sceu-border );
}

.sceu-wf .sceu-item__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.sceu-wf .sceu-item__name {
	font-weight: 500;
}

.sceu-wf .sceu-item__avail {
	font-size: 0.82em;
	opacity: 0.7;
}

.sceu-wf .sceu-item__qty {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: none;
}

.sceu-wf .sceu-step {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 1px solid var( --sceu-field-border );
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.sceu-wf .sceu-step:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.sceu-wf .sceu-item__input {
	box-sizing: border-box;
	width: 3em;
	height: 30px;
	min-height: 0;
	text-align: center;
	padding: 0 0.25em;
	border: 1px solid var( --sceu-field-border );
	border-radius: 6px;
	font: inherit;
	line-height: normal;
	color: inherit;
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
}

.sceu-wf .sceu-item__input::-webkit-outer-spin-button,
.sceu-wf .sceu-item__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sceu-wf__review {
	margin: 0 0 0.5em;
	padding-left: 1.2em;
}

.sceu-wf__whole {
	font-style: italic;
	margin: 0 0 0.8em;
}

.sceu-wf__notfound {
	margin: 0 0 0.8em;
}

.sceu-wf__success {
	padding: 1em 1.25em;
	border: 1px solid var( --sceu-border, #c3c4c7 );
	border-radius: 8px;
}

/* SureCart dark theme. The form follows the page via `color: inherit`, but
   SureCart's dark theme only darkens the background — the inherited text colour
   stays a light-mode slate, leaving the heading and copy low-contrast on the
   dark page. SureCart flags dark mode with `body.surecart-theme-dark`; restore a
   readable text colour (and a lighter error red) there. Scoped to that class so
   the shortcode on non-SureCart pages keeps inheriting the surrounding theme. */
body.surecart-theme-dark .sceu-wf {
	color: #f4f5f7;
}

body.surecart-theme-dark .sceu-wf__error,
body.surecart-theme-dark .sceu-wf .sceu-form-control__error {
	color: #f08a8a;
}