/**
 * WC EU Withdrawal — frontend styles.
 *
 * All values reference design tokens from wceuw-tokens.css. Override tokens to
 * restyle; this file only maps tokens onto components.
 */

.wceuw {
	color: var( --wceuw-color-text );
	font-size: var( --wceuw-font-size-base );
	line-height: var( --wceuw-line-height );
}

.wceuw *,
.wceuw *::before,
.wceuw *::after {
	box-sizing: border-box;
}

/* Author display rules below override the UA `[hidden]` rule, so re-assert it. */
.wceuw [hidden] {
	display: none !important;
}

/* Wizard shell -------------------------------------------------------------*/
.wceuw-wizard {
	max-width: 42rem;
	margin-inline: auto;
}

.wceuw-wizard__step {
	background: var( --wceuw-color-surface );
	border: 1px solid var( --wceuw-color-border );
	border-radius: var( --wceuw-radius-lg );
	box-shadow: var( --wceuw-shadow-sm );
	padding: var( --wceuw-space-6 );
}

.wceuw-wizard__title {
	margin: 0 0 var( --wceuw-space-2 );
	font-size: var( --wceuw-font-size-xl );
	line-height: 1.25;
	outline: none;
}

.wceuw-wizard__lead {
	margin: 0 0 var( --wceuw-space-5 );
	color: var( --wceuw-color-muted );
}

/* Progress -----------------------------------------------------------------*/
.wceuw-wizard__progress {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wceuw-space-2 );
	margin: 0 0 var( --wceuw-space-5 );
	padding: 0;
	list-style: none;
	counter-reset: wceuw-step;
}

.wceuw-wizard__progress-item {
	display: flex;
	align-items: center;
	gap: var( --wceuw-space-2 );
	flex: 1 1 auto;
	min-width: 0;
	color: var( --wceuw-color-muted );
	font-size: var( --wceuw-font-size-sm );
}

.wceuw-wizard__progress-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var( --wceuw-radius-pill );
	border: 2px solid var( --wceuw-color-border );
	background: var( --wceuw-color-surface );
	font-size: var( --wceuw-font-size-sm );
	font-weight: 600;
	transition: var( --wceuw-transition );
	transition-property: background-color, border-color, color;
}

.wceuw-wizard__progress-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wceuw-wizard__progress-item.is-active {
	color: var( --wceuw-color-text );
	font-weight: 600;
}

.wceuw-wizard__progress-item.is-active .wceuw-wizard__progress-dot {
	border-color: var( --wceuw-color-accent );
	color: var( --wceuw-color-accent );
}

.wceuw-wizard__progress-item.is-done .wceuw-wizard__progress-dot {
	background: var( --wceuw-color-accent );
	border-color: var( --wceuw-color-accent );
	color: var( --wceuw-color-accent-contrast );
}

/* Messages -----------------------------------------------------------------*/
.wceuw-wizard__messages {
	margin-bottom: var( --wceuw-space-4 );
	border-radius: var( --wceuw-radius-md );
	outline: none;
	min-height: 0;
}

.wceuw-wizard__messages:empty {
	display: none;
}

.wceuw-wizard__messages--error,
.wceuw-wizard__messages--success,
.wceuw-wizard__messages--info {
	padding: var( --wceuw-space-3 ) var( --wceuw-space-4 );
	border: 1px solid transparent;
	font-size: var( --wceuw-font-size-sm );
}

.wceuw-wizard__messages--error {
	color: var( --wceuw-color-danger );
	background: var( --wceuw-color-danger-bg );
	border-color: var( --wceuw-color-danger );
}

.wceuw-wizard__messages--success {
	color: var( --wceuw-color-success );
	background: var( --wceuw-color-success-bg );
	border-color: var( --wceuw-color-success );
}

.wceuw-wizard__messages--info {
	color: var( --wceuw-color-info );
	background: var( --wceuw-color-info-bg );
	border-color: var( --wceuw-color-info );
}

/* Fields -------------------------------------------------------------------*/
.wceuw-field {
	margin: 0 0 var( --wceuw-space-4 );
}

.wceuw-field__label {
	display: block;
	margin-bottom: var( --wceuw-space-1 );
	font-weight: 600;
	font-size: var( --wceuw-font-size-sm );
}

.wceuw-field__control,
.wceuw .wceuw-field__control {
	display: block;
	width: 100%;
	padding: var( --wceuw-space-3 );
	border: 1px solid var( --wceuw-color-border );
	border-radius: var( --wceuw-radius-md );
	background: var( --wceuw-color-surface );
	color: var( --wceuw-color-text );
	font-size: var( --wceuw-font-size-base );
	line-height: 1.4;
	transition: var( --wceuw-transition );
	transition-property: border-color, box-shadow;
}

.wceuw-field__control:focus,
.wceuw-field__control:focus-visible {
	border-color: var( --wceuw-color-accent );
	box-shadow: var( --wceuw-focus-ring );
	outline: none;
}

textarea.wceuw-field__control {
	min-height: 6rem;
	resize: vertical;
}

.wceuw-field__hint {
	margin: var( --wceuw-space-1 ) 0 0;
	color: var( --wceuw-color-muted );
	font-size: var( --wceuw-font-size-sm );
}

.wceuw-field-group {
	display: grid;
	gap: var( --wceuw-space-2 );
	margin-bottom: var( --wceuw-space-4 );
	padding: var( --wceuw-space-4 );
	border: 1px dashed var( --wceuw-color-border );
	border-radius: var( --wceuw-radius-md );
	background: var( --wceuw-color-surface-alt );
}

.wceuw-field-group .wceuw-field:last-child {
	margin-bottom: 0;
}

/* Item cards ---------------------------------------------------------------*/
.wceuw-wizard__items {
	display: grid;
	gap: var( --wceuw-space-3 );
	margin-bottom: var( --wceuw-space-5 );
}

.wceuw-item {
	display: flex;
	align-items: center;
	gap: var( --wceuw-space-3 );
	padding: var( --wceuw-space-3 );
	border: 1px solid var( --wceuw-color-border );
	border-radius: var( --wceuw-radius-md );
	background: var( --wceuw-color-surface );
	cursor: pointer;
	transition: var( --wceuw-transition );
	transition-property: border-color, box-shadow;
}

.wceuw-item:focus-within {
	border-color: var( --wceuw-color-accent );
	box-shadow: var( --wceuw-focus-ring );
}

.wceuw-item__check {
	width: 1.15rem;
	height: 1.15rem;
	flex: 0 0 auto;
	accent-color: var( --wceuw-color-accent );
}

.wceuw-item__body {
	display: flex;
	align-items: center;
	gap: var( --wceuw-space-3 );
	flex: 1 1 auto;
	min-width: 0;
}

.wceuw-item__image {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var( --wceuw-radius-sm );
	flex: 0 0 auto;
}

.wceuw-item__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wceuw-item__name {
	font-weight: 600;
}

.wceuw-item__price {
	color: var( --wceuw-color-muted );
	font-size: var( --wceuw-font-size-sm );
}

.wceuw-item__qty {
	flex: 0 0 auto;
}

.wceuw-item__qty-input {
	width: 4.5rem;
	padding: var( --wceuw-space-2 );
	border: 1px solid var( --wceuw-color-border );
	border-radius: var( --wceuw-radius-sm );
	text-align: center;
	font-size: var( --wceuw-font-size-base );
}

/* Review -------------------------------------------------------------------*/
.wceuw-wizard__review {
	display: grid;
	gap: var( --wceuw-space-4 );
	margin-bottom: var( --wceuw-space-5 );
}

.wceuw-review__block {
	padding: var( --wceuw-space-4 );
	border: 1px solid var( --wceuw-color-border );
	border-radius: var( --wceuw-radius-md );
	background: var( --wceuw-color-surface-alt );
}

.wceuw-review__heading {
	margin: 0 0 var( --wceuw-space-2 );
	font-size: var( --wceuw-font-size-sm );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --wceuw-color-muted );
}

.wceuw-review__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wceuw-review__item {
	display: flex;
	justify-content: space-between;
	gap: var( --wceuw-space-3 );
	padding: var( --wceuw-space-1 ) 0;
}

.wceuw-review__qty {
	color: var( --wceuw-color-muted );
	white-space: nowrap;
}

/* Return instructions ------------------------------------------------------*/
.wceuw-return {
	margin-bottom: var( --wceuw-space-4 );
	padding: var( --wceuw-space-4 );
	border: 1px solid var( --wceuw-color-border );
	border-radius: var( --wceuw-radius-md );
	background: var( --wceuw-color-surface-alt );
}

.wceuw-return--address {
	border-left: 3px solid var( --wceuw-color-accent );
}

.wceuw-return__heading {
	margin: 0 0 var( --wceuw-space-2 );
	font-size: var( --wceuw-font-size-sm );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --wceuw-color-muted );
}

.wceuw-return__text {
	margin: 0;
}

.wceuw-return__address {
	margin: 0;
	font-style: normal;
	font-weight: 600;
	line-height: 1.6;
}

/* Statement + checkbox -----------------------------------------------------*/
.wceuw-wizard__statement {
	margin-bottom: var( --wceuw-space-4 );
	padding: var( --wceuw-space-4 );
	border-left: 3px solid var( --wceuw-color-accent );
	background: var( --wceuw-color-surface-alt );
	border-radius: var( --wceuw-radius-sm );
}

.wceuw-wizard__statement p {
	margin: 0;
}

.wceuw-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var( --wceuw-space-2 );
	margin-bottom: var( --wceuw-space-4 );
	cursor: pointer;
}

.wceuw-checkbox__input {
	margin-top: 0.2rem;
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var( --wceuw-color-accent );
}

/* Buttons ------------------------------------------------------------------*/
.wceuw-wizard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wceuw-space-3 );
	align-items: center;
}

.wceuw-wizard__actions--center {
	justify-content: center;
}

.wceuw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --wceuw-space-2 );
	padding: var( --wceuw-space-3 ) var( --wceuw-space-5 );
	border: 1px solid transparent;
	border-radius: var( --wceuw-radius-md );
	font-size: var( --wceuw-font-size-base );
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: var( --wceuw-transition );
	transition-property: background-color, border-color, color, box-shadow, opacity;
}

.wceuw-btn:focus-visible {
	box-shadow: var( --wceuw-focus-ring );
	outline: none;
}

.wceuw-btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.wceuw-btn--primary {
	background: var( --wceuw-color-accent );
	border-color: var( --wceuw-color-accent );
	color: var( --wceuw-color-accent-contrast );
}

.wceuw-btn--primary:hover {
	background: var( --wceuw-color-accent-hover );
	border-color: var( --wceuw-color-accent-hover );
}

.wceuw-btn--secondary {
	background: var( --wceuw-color-surface );
	border-color: var( --wceuw-color-accent );
	color: var( --wceuw-color-accent );
}

.wceuw-btn--ghost {
	background: transparent;
	border-color: var( --wceuw-color-border );
	color: var( --wceuw-color-text );
}

.wceuw-btn--ghost:hover {
	background: var( --wceuw-color-surface-alt );
}

/* Spinner during AJAX ------------------------------------------------------*/
.wceuw-wizard--loading .wceuw-btn[aria-busy="true"]::before {
	content: "";
	width: 0.95em;
	height: 0.95em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: wceuw-spin 0.7s linear infinite;
}

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

/* Success ------------------------------------------------------------------*/
.wceuw-wizard__success {
	text-align: center;
}

.wceuw-wizard__success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: var( --wceuw-space-3 );
	border-radius: var( --wceuw-radius-pill );
	color: var( --wceuw-color-success );
	background: var( --wceuw-color-success-bg );
}

.wceuw-wizard__summary {
	font-weight: 600;
	font-size: var( --wceuw-font-size-lg );
	margin: 0 0 var( --wceuw-space-2 );
}

.wceuw-wizard__account-link {
	color: var( --wceuw-color-accent );
}

.wceuw-btn--sm {
	padding: var( --wceuw-space-2 ) var( --wceuw-space-3 );
	font-size: var( --wceuw-font-size-sm );
}

/* My Account list ----------------------------------------------------------*/
.wceuw-account__title {
	margin-bottom: var( --wceuw-space-4 );
}

.wceuw-account__empty {
	padding: var( --wceuw-space-6 );
	border: 1px dashed var( --wceuw-color-border );
	border-radius: var( --wceuw-radius-lg );
	background: var( --wceuw-color-surface-alt );
	text-align: center;
}

.wceuw-account__empty p {
	margin: 0 0 var( --wceuw-space-4 );
	color: var( --wceuw-color-muted );
}

.wceuw-account__table .wceuw-account__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wceuw-space-2 );
}

/* Status badges ------------------------------------------------------------*/
.wceuw-status-badge {
	display: inline-block;
	padding: 0.15em 0.7em;
	border-radius: var( --wceuw-radius-pill );
	font-size: var( --wceuw-font-size-sm );
	font-weight: 600;
	line-height: 1.6;
	color: var( --wceuw-color-info );
	background: var( --wceuw-color-info-bg );
}

.wceuw-status-badge--new,
.wceuw-status-badge--accepted {
	color: var( --wceuw-color-info );
	background: var( --wceuw-color-info-bg );
}

.wceuw-status-badge--goods_received {
	color: var( --wceuw-color-warning );
	background: var( --wceuw-color-warning-bg );
}

.wceuw-status-badge--refunded {
	color: var( --wceuw-color-success );
	background: var( --wceuw-color-success-bg );
}

.wceuw-status-badge--rejected {
	color: var( --wceuw-color-danger );
	background: var( --wceuw-color-danger-bg );
}

.wceuw-status-badge--revoked {
	color: var( --wceuw-color-muted );
	background: var( --wceuw-color-surface-alt );
}

/* Footer button ------------------------------------------------------------*/
.wceuw-footer-withdrawal-button {
	margin: var( --wceuw-space-4 ) 0;
	text-align: center;
}

/* Responsive ---------------------------------------------------------------*/
@media ( max-width: 640px ) {
	.wceuw-wizard__step {
		padding: var( --wceuw-space-4 );
	}

	.wceuw-wizard__progress-label {
		display: none;
	}

	.wceuw-wizard__actions .wceuw-btn {
		flex: 1 1 100%;
	}

	.wceuw-item {
		flex-wrap: wrap;
	}

	.wceuw-item__qty {
		width: 100%;
	}

	.wceuw-item__qty-input {
		width: 100%;
	}
}