/**
 * EU Withdrawal Button: frontend styles.
 *
 * Design contract:
 * - Namespaced under .spd-wb, low specificity via :where(), so any theme
 *   rule wins without !important.
 * - Driven by CSS custom properties with quiet, neutral fallbacks. Set the
 *   variables on :root (or .spd-wb) to align the flow with your brand:
 *
 *   --spd-wb-accent      Primary action colour        (default #1d2327)
 *   --spd-wb-accent-fg   Text on the primary action   (default #ffffff)
 *   --spd-wb-fg          Body text colour             (default inherit)
 *   --spd-wb-muted       Secondary text colour        (default #5f6368)
 *   --spd-wb-error       Error colour                 (default #b32d2e)
 *   --spd-wb-border      Border colour                (default #d5d8dc)
 *   --spd-wb-bg          Panel background             (default transparent)
 *   --spd-wb-radius      Corner radius                (default 6px)
 *   --spd-wb-space       Base spacing unit            (default 1rem)
 *   --spd-wb-font        Font family                  (default inherit)
 *   --spd-wb-max-width   Flow max width               (default 40rem)
 *   --spd-wb-focus       Focus outline colour         (default currentColor / accent)
 *   --spd-wb-notice-bg   Notice panel wash            (default faint neutral tint)
 *   --spd-wb-ok          Positive eligibility accent  (default #2e7d32)
 *   --spd-wb-warn        Attention eligibility accent (default #b26900)
 *
 * Dark themes: the fallbacks use light-dark() where contrast matters, which
 * follows the page's color-scheme. If your dark theme does not declare
 * color-scheme: dark, set at least --spd-wb-muted, --spd-wb-error,
 * --spd-wb-notice-bg and --spd-wb-focus to values that pass WCAG AA.
 *
 * Logical properties throughout: RTL works without a separate sheet.
 * No !important anywhere.
 */

.spd-wb {
	box-sizing: border-box;
	max-inline-size: var(--spd-wb-max-width, 40rem);
	/* Strong text by default: many themes use light grey body text, which
	   made filled-in values look like placeholders. Override via --spd-wb-fg. */
	color: var(--spd-wb-fg, light-dark(#1c2430, #ebe9e6));
	font-family: var(--spd-wb-font, inherit);
	line-height: 1.6;
}

.spd-wb *,
.spd-wb *::before,
.spd-wb *::after {
	box-sizing: inherit;
}

.spd-wb--inline {
	display: inline-block;
	max-inline-size: none;
}

/* ------------------------------------------------------------------ *
 * Type
 * ------------------------------------------------------------------ */

:where(.spd-wb) .spd-wb-heading {
	margin-block: 0 calc(var(--spd-wb-space, 1rem) * 0.75);
	font-size: 1.375em;
	line-height: 1.3;
}

:where(.spd-wb) .spd-wb-intro {
	margin-block: 0 var(--spd-wb-space, 1rem);
	overflow-wrap: anywhere;
}

:where(.spd-wb) .spd-wb-meta {
	margin-block: var(--spd-wb-space, 1rem) 0;
	color: var(--spd-wb-muted, #5f6368);
	color: var(--spd-wb-muted, light-dark(#5f6368, #a7aaad));
	font-size: 0.875em;
}

:where(.spd-wb) .spd-wb-muted {
	color: var(--spd-wb-muted, #5f6368);
	color: var(--spd-wb-muted, light-dark(#5f6368, #a7aaad));
	font-size: 0.9375em;
}

:where(.spd-wb) .spd-wb-optional {
	font-weight: 400;
	color: var(--spd-wb-muted, #5f6368);
	color: var(--spd-wb-muted, light-dark(#5f6368, #a7aaad));
	font-size: 0.875em;
}

/* ------------------------------------------------------------------ *
 * Form
 * ------------------------------------------------------------------ */

:where(.spd-wb) .spd-wb-form {
	margin: 0;
}

:where(.spd-wb) .spd-wb-field {
	margin-block-end: calc(var(--spd-wb-space, 1rem) * 1.125);
}

:where(.spd-wb) .spd-wb-field > label,
:where(.spd-wb) .spd-wb-items > legend {
	display: block;
	margin-block-end: 0.375rem;
	font-weight: 600;
}

:where(.spd-wb) .spd-wb-hint {
	margin-block: -0.125rem 0.375rem;
	color: var(--spd-wb-muted, #5f6368);
	color: var(--spd-wb-muted, light-dark(#5f6368, #a7aaad));
	font-size: 0.875em;
}

:where(.spd-wb) .spd-wb-field input[type="text"],
:where(.spd-wb) .spd-wb-field input[type="email"],
:where(.spd-wb) .spd-wb-field select,
:where(.spd-wb) .spd-wb-field textarea {
	display: block;
	inline-size: 100%;
	min-block-size: 2.75rem;
	padding: 0.5rem 0.75rem;
	/* Control boundaries need 3:1 (SC 1.4.11); #767676 is 4.5:1 on white. */
	border: 1px solid var(--spd-wb-border, #767676);
	border-radius: var(--spd-wb-radius, 6px);
	background: var(--spd-wb-bg, transparent);
	color: inherit;
	font: inherit;
}

:where(.spd-wb) .spd-wb-field textarea {
	min-block-size: 0;
	resize: vertical;
}

/* Browser autofill previews must be as legible as typed text. */
:where(.spd-wb) .spd-wb-field input:-webkit-autofill,
:where(.spd-wb) .spd-wb-field input:-webkit-autofill:hover,
:where(.spd-wb) .spd-wb-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--spd-wb-fg, light-dark(#1c2430, #ebe9e6));
}

:where(.spd-wb) .spd-wb-field input:focus-visible,
:where(.spd-wb) .spd-wb-field select:focus-visible,
:where(.spd-wb) .spd-wb-field textarea:focus-visible,
:where(.spd-wb) a:focus-visible {
	outline: 2px solid var(--spd-wb-focus, currentColor);
	outline-offset: 2px;
}

/*
 * Buttons need their own focus treatment: their currentColor is the light
 * button text, which would draw an invisible outline over light pages. The
 * dark outline plus the light inner ring stays visible on any background.
 */
:where(.spd-wb) .spd-wb-button:focus-visible {
	outline: 2px solid var(--spd-wb-focus, var(--spd-wb-accent, #1d2327));
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--spd-wb-accent-fg, #ffffff);
}

:where(.spd-wb) .spd-wb-field [aria-invalid="true"] {
	border-color: var(--spd-wb-error, #b32d2e);
	border-color: var(--spd-wb-error, light-dark(#b32d2e, #ef9a9a));
}

:where(.spd-wb) .spd-wb-field-error {
	margin-block: 0 0.375rem;
	color: var(--spd-wb-error, #b32d2e);
	color: var(--spd-wb-error, light-dark(#b32d2e, #ef9a9a));
	font-size: 0.875em;
	font-weight: 600;
}

/* Item checkboxes (partial withdrawal) */

:where(.spd-wb) .spd-wb-items {
	padding: 0;
	border: 0;
	margin-inline: 0;
}

:where(.spd-wb) .spd-wb-checkbox {
	display: flex;
	gap: 0.625rem;
	align-items: baseline;
	padding-block: 0.625rem;
	font-weight: 400;
}

:where(.spd-wb) .spd-wb-checkbox input {
	inline-size: 1.125rem;
	block-size: 1.125rem;
	flex: none;
}

:where(.spd-wb) .spd-wb-checkbox span {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

/* Honeypot: hidden from everyone; aria-hidden covers assistive tech. */

.spd-wb .spd-wb-hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Notices
 * ------------------------------------------------------------------ */

:where(.spd-wb) .spd-wb-notice {
	margin-block-end: var(--spd-wb-space, 1rem);
	padding: 0.75rem 1rem;
	border-inline-start: 3px solid currentColor;
	border-radius: var(--spd-wb-radius, 6px);
	background: var(--spd-wb-notice-bg, rgba(0, 0, 0, 0.04));
	background: var(--spd-wb-notice-bg, light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.06)));
}

:where(.spd-wb) .spd-wb-notice--error {
	color: var(--spd-wb-error, #b32d2e);
	color: var(--spd-wb-error, light-dark(#b32d2e, #ef9a9a));
}

:where(.spd-wb) .spd-wb-notice--error a {
	color: inherit;
	/* The summary items are the recovery controls; never rely on the host
	   theme keeping default link underlines. */
	text-decoration: underline;
	text-underline-offset: 2px;
}

:where(.spd-wb) .spd-wb-notice__title {
	margin-block: 0 0.375rem;
	font-size: 1em;
}

:where(.spd-wb) .spd-wb-notice ul {
	margin-block: 0;
	margin-inline-start: 1.25rem;
	padding: 0;
}

:where(.spd-wb) .spd-wb-eligibility {
	margin-block: var(--spd-wb-space, 1rem);
	padding: 0.75rem 1rem;
	border-inline-start: 3px solid var(--spd-wb-border, #d5d8dc);
	border-radius: var(--spd-wb-radius, 6px);
	background: var(--spd-wb-notice-bg, rgba(0, 0, 0, 0.04));
	background: var(--spd-wb-notice-bg, light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.06)));
	font-size: 0.9375em;
}

:where(.spd-wb) .spd-wb-eligibility--ok {
	border-inline-start-color: var(--spd-wb-ok, #2e7d32);
	border-inline-start-color: var(--spd-wb-ok, light-dark(#2e7d32, #7bc47f));
}

:where(.spd-wb) .spd-wb-eligibility--attention {
	border-inline-start-color: var(--spd-wb-warn, #b26900);
	border-inline-start-color: var(--spd-wb-warn, light-dark(#b26900, #e3a638));
}

:where(.spd-wb) .spd-wb-eligibility p {
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * Declaration and summary
 * ------------------------------------------------------------------ */

:where(.spd-wb) .spd-wb-declaration {
	margin: var(--spd-wb-space, 1rem) 0;
	padding-block: 0.25rem;
	padding-inline: 1rem 0;
	border-inline-start: 3px solid var(--spd-wb-border, #d5d8dc);
	font-style: italic;
}

:where(.spd-wb) .spd-wb-declaration p {
	margin: 0;
}

:where(.spd-wb) .spd-wb-summary {
	margin: var(--spd-wb-space, 1rem) 0;
	border: 1px solid var(--spd-wb-border, #d5d8dc);
	border-radius: var(--spd-wb-radius, 6px);
	overflow: hidden;
}

:where(.spd-wb) .spd-wb-summary__row {
	display: grid;
	grid-template-columns: minmax(9rem, 1fr) 2fr;
	gap: 0.25rem 1rem;
	padding: 0.625rem 1rem;
}

:where(.spd-wb) .spd-wb-summary__row + .spd-wb-summary__row {
	border-block-start: 1px solid var(--spd-wb-border, #d5d8dc);
}

:where(.spd-wb) .spd-wb-summary dt {
	margin: 0;
	font-weight: 600;
}

:where(.spd-wb) .spd-wb-summary dd {
	margin: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
	:where(.spd-wb) .spd-wb-summary__row {
		grid-template-columns: 1fr;
	}
}

:where(.spd-wb) .spd-wb-plainlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.spd-wb) .spd-wb-reference {
	font-size: 0.875em;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */

:where(.spd-wb) .spd-wb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block: calc(var(--spd-wb-space, 1rem) * 1.25) 0;
}

:where(.spd-wb) .spd-wb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	padding: 0.5rem 1.375rem;
	border: 1px solid var(--spd-wb-border, #d5d8dc);
	border-radius: var(--spd-wb-radius, 6px);
	background: var(--spd-wb-accent, #1d2327);
	color: var(--spd-wb-accent-fg, #ffffff);
	font: inherit;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 120ms ease;
}

:where(.spd-wb) .spd-wb-button:hover {
	opacity: 0.88;
	color: var(--spd-wb-accent-fg, #ffffff);
}

:where(.spd-wb) .spd-wb-button[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

:where(.spd-wb) .spd-wb-button--ghost {
	background: transparent;
	border-color: var(--spd-wb-border, #767676);
	color: inherit;
}

/* The generic hover recolours text for the solid button; the ghost variant
   must keep its own text colour or it disappears on light pages. */
:where(.spd-wb) .spd-wb-button--ghost:hover {
	color: inherit;
	opacity: 1;
	background: var(--spd-wb-notice-bg, light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.06)));
}

/*
 * The statutory control often renders as a link; theme content-link rules
 * (.entry-content a and similar) would otherwise recolour its text. These
 * state-explicit rules carry just enough specificity to win against the
 * common patterns while staying overridable by the tokens.
 */
:where(.spd-wb) a.spd-wb-button,
:where(.spd-wb) a.spd-wb-button:link,
:where(.spd-wb) a.spd-wb-button:visited,
:where(.spd-wb) a.spd-wb-button:hover,
:where(.spd-wb) a.spd-wb-button:focus,
:where(.spd-wb) a.spd-wb-button:active {
	color: var(--spd-wb-accent-fg, #ffffff);
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * Placements
 * ------------------------------------------------------------------ */

.spd-wb-footer {
	max-inline-size: none;
	padding: 0 1rem;
	border-block-start: 1px solid var(--spd-wb-border, #d5d8dc);
	text-align: center;
	font-size: 0.875em;
}

.spd-wb-footer__link {
	/* The hit area lives on the link itself, reaching the 44px target. */
	display: inline-block;
	padding-block: 0.75rem;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.spd-wb-thankyou {
	margin-block: var(--spd-wb-space, 1rem);
	padding: 1rem 1.25rem;
	border: 1px solid var(--spd-wb-border, #d5d8dc);
	border-radius: var(--spd-wb-radius, 6px);
}

.spd-wb-thankyou p {
	margin-block: 0 0.75rem;
}

/* ------------------------------------------------------------------ *
 * My Account intro
 * ------------------------------------------------------------------ */

:where(.spd-wb) .spd-wb-table {
	inline-size: 100%;
	margin-block-end: var(--spd-wb-space, 1rem);
	border-collapse: collapse;
}

:where(.spd-wb) .spd-wb-table th,
:where(.spd-wb) .spd-wb-table td {
	padding: 0.5rem 0.75rem;
	border-block-end: 1px solid var(--spd-wb-border, #d5d8dc);
	text-align: start;
	overflow-wrap: anywhere;
}

:where(.spd-wb) .spd-wb-orderlist {
	margin: 0 0 var(--spd-wb-space, 1rem);
	padding: 0;
	list-style: none;
}

:where(.spd-wb) .spd-wb-orderlist li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

:where(.spd-wb) .spd-wb-orderlist a {
	/* The hit area lives on the link itself, reaching the 44px target. */
	display: inline-block;
	padding-block: 0.5625rem;
}

.spd-wb-account {
	margin-block-end: calc(var(--spd-wb-space, 1rem) * 1.5);
}

/* ------------------------------------------------------------------ *
 * Motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.spd-wb *,
	.spd-wb *::before,
	.spd-wb *::after {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
	}
}