/**
 * WM Herroepingsknop — front-end styling architecture.
 *
 * Design rules:
 * - Every own class is prefixed `wm-withdrawal-`.
 * - Single-class selectors only (no IDs, no !important, no deep nesting),
 *   so any theme can override with equal or lower effort.
 * - Inherits font-family/color from the theme; never forces a palette.
 * - Configurable visuals (button colour/background/shape) arrive as CSS
 *   custom properties set inline on the wrapper from plugin settings
 *   (see WM_Withdrawal_Settings::get_css_variables()), each with a safe
 *   fallback via var(--x, fallback) so the plugin still looks finished
 *   with no settings saved yet.
 */

.wm-withdrawal-form,
.wm-withdrawal-button,
.wm-withdrawal-text-link {
	font-family: inherit;
	color: inherit;
	box-sizing: border-box;
}

.wm-withdrawal-form *,
.wm-withdrawal-form *::before,
.wm-withdrawal-form *::after {
	box-sizing: inherit;
}

/* Spacing + type scale: internal layout tokens, not user-configurable. */
.wm-withdrawal-form {
	--wm-withdrawal-space-xs: 0.25em;
	--wm-withdrawal-space-sm: 0.5em;
	--wm-withdrawal-space-md: 1em;
	--wm-withdrawal-space-lg: 1.5em;
	--wm-withdrawal-space-xl: 2.5em;
	--wm-withdrawal-font-size-sm: 0.875em;
	--wm-withdrawal-font-size-md: 1em;
	--wm-withdrawal-font-size-lg: 1.25em;

	position: relative;
	max-width: 40em;
	line-height: 1.5;
}

/*
 * Loading overlay, shown by form.js while an async step submission is in
 * flight (the match-check can take a moment). Covers only this wrapper,
 * not the whole page.
 */
.wm-withdrawal-form--loading::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.7);
	z-index: 20;
}

.wm-withdrawal-form--loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2em;
	height: 2em;
	margin: -1em 0 0 -1em;
	border: 3px solid rgba(0, 0, 0, 0.15);
	border-top-color: var(--wm-withdrawal-button-bg, #1d2327);
	border-radius: 50%;
	z-index: 21;
	animation: wm-withdrawal-spin 0.8s linear infinite;
}

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

.wm-withdrawal-form p {
	margin: 0 0 var(--wm-withdrawal-space-md);
}

.wm-withdrawal-form h2,
.wm-withdrawal-form h3 {
	font-size: var(--wm-withdrawal-font-size-lg);
	margin: 0 0 var(--wm-withdrawal-space-md);
}

.wm-withdrawal-intro {
	margin: 0 0 var(--wm-withdrawal-space-lg);
}

.wm-withdrawal-intro > :last-child {
	margin-bottom: 0;
}

/*
 * Excluded-products information: deliberately as neutral as the intro text
 * above it - no warning colours, no border, nothing that reads as a
 * blocker. It is informational only and never limits the request itself.
 */
.wm-withdrawal-excluded-products {
	margin: 0 0 var(--wm-withdrawal-space-lg);
}

.wm-withdrawal-excluded-products > :last-child {
	margin-bottom: 0;
}

/* Progress indicator (1 Gegevens → 2 Controleren → 3 Bevestigd). */
.wm-withdrawal-progress {
	display: flex;
	gap: var(--wm-withdrawal-space-sm);
	margin: 0 0 var(--wm-withdrawal-space-lg);
	padding: 0;
	list-style: none;
	font-size: var(--wm-withdrawal-font-size-sm);
}

.wm-withdrawal-progress-step {
	flex: 1;
	padding: var(--wm-withdrawal-space-xs) 0;
	text-align: center;
	border-bottom: 3px solid rgba(0, 0, 0, 0.15);
	opacity: 0.6;
}

.wm-withdrawal-progress-step--active,
.wm-withdrawal-progress-step--done {
	opacity: 1;
	font-weight: 600;
	border-bottom-color: var(--wm-withdrawal-button-bg, #1d2327);
}

/* Fieldsets and form fields. */
.wm-withdrawal-fieldset {
	margin: 0 0 var(--wm-withdrawal-space-lg);
	padding: 0;
	border: 0;
}

.wm-withdrawal-fieldset legend {
	padding: 0 0 var(--wm-withdrawal-space-sm);
	font-weight: 600;
}

.wm-withdrawal-field-row {
	margin: 0 0 var(--wm-withdrawal-space-md);
}

.wm-withdrawal-field-label {
	display: block;
	margin-bottom: var(--wm-withdrawal-space-xs);
	font-weight: 600;
}

.wm-withdrawal-field {
	display: block;
	width: 100%;
	padding: var(--wm-withdrawal-space-sm);
	font-size: var(--wm-withdrawal-font-size-md);
	font-family: inherit;
	color: inherit;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 4px;
}

.wm-withdrawal-field-qty {
	width: 6em;
}

/* Repeatable item rows (name + qty + remove). */
.wm-withdrawal-item-row {
	display: flex;
	gap: var(--wm-withdrawal-space-sm);
	align-items: flex-end;
	margin: 0 0 var(--wm-withdrawal-space-sm);
}

.wm-withdrawal-item-row-name {
	flex: 1 1 auto;
}

.wm-withdrawal-item-row-qty {
	flex: 0 0 auto;
}

.wm-withdrawal-item-row-remove {
	flex: 0 0 auto;
}

/* Cards: grouped read-only content (review step, confirmation). */
.wm-withdrawal-card {
	padding: var(--wm-withdrawal-space-md);
	margin: 0 0 var(--wm-withdrawal-space-lg);
	background: rgba(0, 0, 0, 0.03);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: var(--wm-withdrawal-radius, 6px);
}

.wm-withdrawal-card dl {
	margin: 0;
}

.wm-withdrawal-card dt {
	font-weight: 600;
}

.wm-withdrawal-card dd {
	margin: 0 0 var(--wm-withdrawal-space-sm);
}

.wm-withdrawal-notice {
	padding: var(--wm-withdrawal-space-sm) var(--wm-withdrawal-space-md);
	margin: 0 0 var(--wm-withdrawal-space-md);
	font-weight: 600;
	border-left: 3px solid currentColor;
}

/*
 * Buttons: our own fallback look, driven entirely by the configurable CSS
 * variables. A single class selector, so a theme's own `.button` rules
 * (added when "WooCommerce-knopstijl gebruiken" is on) can win outright.
 */
.wm-withdrawal-button {
	display: inline-block;
	padding: 0.6em 1.4em;
	font-size: var(--wm-withdrawal-font-size-md, 1em);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	color: var(--wm-withdrawal-button-color, #ffffff);
	background-color: var(--wm-withdrawal-button-bg, #1d2327);
	border: 0;
	border-radius: var(--wm-withdrawal-radius, 6px);
}

.wm-withdrawal-button:hover,
.wm-withdrawal-button:focus {
	color: var(--wm-withdrawal-button-color, #ffffff);
	filter: brightness(0.92);
}

.wm-withdrawal-button-secondary {
	color: inherit;
	background-color: transparent;
	border: 1px solid rgba(0, 0, 0, 0.25);
}

.wm-withdrawal-text-link {
	text-decoration: underline;
}