/*
 * SW-Sales portal layout.
 *
 * Contrast ratios of the token palette (WCAG 2.1 relative luminance, computed 2026-09-14,
 * all >= 4.5:1):
 *   text  #F2F3F5 on background #101113 ............ 17.02:1
 *   muted #ADB3BC on background #101113 ............  8.95:1
 *   muted #ADB3BC on card       #1B1D20 ............  8.00:1
 *   button text #111315 on primary button #D5D9DF .. 13.14:1
 *   text  #F2F3F5 on sidebar    #131518 ............ 16.47:1
 *   text  #F2F3F5 on card       #1B1D20 ............ 15.21:1
 *   danger #F28B82 on card      #1B1D20 ............  7.07:1
 * Non-text contrast (WCAG 1.4.11, >= 3:1) of control boundaries:
 *   control-border #6F7680 on card #1B1D20 ..........  3.68:1
 *   control-border #6F7680 on background #101113 ....  4.12:1
 * The plain border token (#303338, 1.33:1 on card) is decorative only: card and table rules.
 */

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

/* Core always wraps a template part in div.wp-block-template-part; unwrap it for layout. */
.wp-block-template-part {
	display: contents;
}

/* ---------- Shell ---------- */

.swp-shell {
	display: grid;
	grid-template-columns: var(--wp--custom--sidebar-width) minmax(0, 1fr);
	min-height: 100vh;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--text);
}

.swp-shell--auth,
.swp-shell--legal {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
}

.swp-back {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--small);
}

.swp-main {
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-width: 0;
}

.swp-shell > *,
.swp-main > * {
	min-width: 0;
}

/* ---------- Word mark ---------- */

.swp-wordmark {
	display: block;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.swp-wordmark:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

.swp-wordmark__sub {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

/* ---------- Sidebar ---------- */

.swp-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--sidebar);
	border-right: var(--wp--custom--line) solid var(--wp--preset--color--border);
	min-width: 0;
}

/*
 * Customer tile and logout directly below the navigation, so they stay
 * reachable on long pages without a sticky sidebar.
 */
.swp-sidebar__account {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-sidebar__customer,
.swp-sidebar__logout {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: var(--wp--custom--control-height);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.swp-sidebar__customer:hover,
.swp-sidebar__logout:hover {
	background: var(--wp--preset--color--card);
}

.swp-sidebar__avatar {
	flex: 0 0 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.swp-sidebar__customer-name {
	min-width: 0;
	overflow-wrap: break-word;
	font-weight: 600;
}

.swp-sidebar__logout {
	color: var(--wp--preset--color--muted);
}

.swp-nav__icon--logout {
	-webkit-mask-image: url("../icons/logout.svg");
	mask-image: url("../icons/logout.svg");
}

.swp-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.swp-nav__link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--30);
	text-align: left;
	min-height: var(--wp--custom--control-height);
	padding: 0 var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.swp-nav__link:hover {
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
}

.swp-nav__link.is-active {
	background: var(--wp--preset--color--card);
	border: var(--wp--custom--line) solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

.swp-nav__icon {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	background-color: currentColor;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

.swp-nav__icon--uebersicht {
	-webkit-mask-image: url("../icons/home.svg");
	mask-image: url("../icons/home.svg");
}

.swp-nav__icon--dateiservice {
	-webkit-mask-image: url("../icons/document.svg");
	mask-image: url("../icons/document.svg");
}

.swp-nav__icon--support {
	-webkit-mask-image: url("../icons/support.svg");
	mask-image: url("../icons/support.svg");
}

.swp-nav__icon--credits {
	-webkit-mask-image: url("../icons/credits.svg");
	mask-image: url("../icons/credits.svg");
}

.swp-nav__icon--credit-verlauf {
	-webkit-mask-image: url("../icons/history.svg");
	mask-image: url("../icons/history.svg");
}

.swp-nav__icon--rechnungen {
	-webkit-mask-image: url("../icons/invoice.svg");
	mask-image: url("../icons/invoice.svg");
}

.swp-nav__icon--konto {
	-webkit-mask-image: url("../icons/account.svg");
	mask-image: url("../icons/account.svg");
}

/* ---------- Header ---------- */

.swp-header {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--wp--custom--header-height);
	padding: 0 var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--sidebar);
	border-bottom: var(--wp--custom--line) solid var(--wp--preset--color--border);
	min-width: 0;
}

/*
 * Every page without the sidebar (login, registration, password, e-mail
 * confirmation, denied access, legal texts, not found) shares one header:
 * logo left, "Kundenportal" beside it; centered logo only on small screens.
 */
.swp-header--auth {
	justify-content: flex-start;
	min-height: 88px;
	padding-inline: var(--wp--custom--content-padding);
}

.swp-header--auth .swp-wordmark {
	flex: 0 0 auto;
	width: 206px;
	height: 69px;
	font-size: 0;
	background: url("../images/sw-sales-web-600.png") center / contain no-repeat;
}

.swp-header__context {
	align-self: stretch;
	display: flex;
	align-items: center;
	padding-inline-start: var(--wp--preset--spacing--60);
	border-left: var(--wp--custom--line) solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--medium);
}

@media (max-width: 768px) {
	.swp-header--auth {
		justify-content: center;
		min-height: 76px;
		padding-inline: var(--wp--custom--gutter-mobile);
	}

	.swp-header--auth .swp-wordmark {
		width: 176px;
		height: 59px;
	}

	.swp-header__context {
		display: none;
	}
}

.swp-page-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* Portal header: "Kundenportal / Seite"; the page's h1 sits in the content. */
.swp-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--medium);
}

.swp-breadcrumb__item + .swp-breadcrumb__item::before {
	content: "/";
	margin-right: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
}

.swp-breadcrumb__link {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.swp-breadcrumb__link:hover {
	color: var(--wp--preset--color--text);
	text-decoration: underline;
}

.swp-breadcrumb__item[aria-current="page"] {
	color: var(--wp--preset--color--text);
}

/* One main heading style for every portal page (design system: 32px / 700). */
.swp-page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.swp-page-head__actions {
	flex: 0 0 auto;
}

.swp-page-head__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: break-word;
}

.swp-page-head__text {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	min-width: 0;
}

.swp-page-head__subtitle {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
}

.swp-page-head__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

@media (max-width: 768px) {
	.swp-page-head {
		flex-wrap: wrap;
	}

	.swp-page-head__actions,
	.swp-page-head__actions .swp-button {
		width: 100%;
	}
}

.swp-logout {
	margin-left: auto;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	min-height: var(--wp--custom--control-height);
	display: inline-flex;
	align-items: center;
}

.swp-wordmark--mobile,
.swp-nav-toggle {
	display: none;
}

/* ---------- Skip link ---------- */

.swp-skip {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.swp-skip:focus,
.swp-skip:focus-visible {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--30);
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--control-height);
	background: var(--wp--preset--color--card);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--text);
}

/* ---------- Content ---------- */

.swp-content {
	padding: var(--wp--custom--content-padding);
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--card-gap);
	min-width: 0;
}

.swp-content--auth {
	align-items: center;
	justify-content: center;
}

.swp-auth-column {
	width: 100%;
	max-width: var(--wp--custom--auth-width);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/* ---------- Login page visual refinement (plan 97) ---------- */

.swp-route--anmelden .swp-shell--auth {
	min-height: 100svh;
	background:
		radial-gradient(circle at 50% 38%, rgba(48, 51, 56, 0.24), transparent 42%),
		var(--wp--preset--color--background);
}

.swp-route--anmelden .swp-content--auth {
	padding-block: clamp(32px, 7vh, 72px);
}

.swp-route--anmelden .swp-auth-column {
	max-width: 520px;
	gap: var(--wp--preset--spacing--40);
	padding: clamp(28px, 5vw, 48px);
	background: rgba(27, 29, 32, 0.86);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
}

.swp-route--anmelden .swp-auth-column > .swp-page-title {
	font-size: var(--wp--preset--font-size--x-large);
}

.swp-route--anmelden .swp-auth-column > .swp-card {
	gap: var(--wp--preset--spacing--40);
	padding: 0;
	background: transparent;
	border: 0;
}

.swp-route--anmelden #swp-login {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.swp-route--anmelden #swp-login p {
	margin: 0;
}

.swp-route--anmelden #swp-login label {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

/* Only the colour: the shorthand would drop the field icons. Same height as registration. */
.swp-route--anmelden #swp-login input[type="text"],
.swp-route--anmelden #swp-login input[type="password"] {
	min-height: 54px;
	background-color: rgba(16, 17, 19, 0.72);
}

.swp-route--anmelden #swp-login input:is(:-webkit-autofill, :autofill) {
	-webkit-text-fill-color: var(--wp--preset--color--text);
	caret-color: var(--wp--preset--color--text);
	box-shadow: 0 0 0 1000px #15171a inset;
}

.swp-route--anmelden #swp-login .login-remember label {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: var(--wp--custom--control-height);
	font-weight: 400;
}

.swp-route--anmelden #swp-login input[type="submit"] {
	min-height: 54px;
	font-size: var(--wp--preset--font-size--medium);
}

.swp-route--anmelden .swp-card > p {
	margin: 0;
}

/* Layout of the design reference: intro, form, "oder", "Noch kein Konto?", register, info. */
.swp-route--anmelden .swp-login__intro {
	margin-top: calc(-1 * var(--wp--preset--spacing--20));
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
}

.swp-route--anmelden .swp-login__divider {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.swp-route--anmelden .swp-login__divider::before,
.swp-route--anmelden .swp-login__divider::after {
	content: "";
	flex: 1 1 auto;
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-route--anmelden .swp-login__signup {
	margin-bottom: calc(-1 * var(--wp--preset--spacing--20));
	text-align: center;
}

.swp-route--anmelden .swp-login__register .swp-button {
	width: 100%;
	min-height: 54px;
	font-size: var(--wp--preset--font-size--medium);
}

.swp-route--anmelden .swp-login__info {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.swp-route--anmelden .swp-login__info::before {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("../icons/info.svg") center / contain no-repeat;
	mask: url("../icons/info.svg") center / contain no-repeat;
}

.swp-route--anmelden .swp-notice {
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 768px) {
	.swp-route--anmelden .swp-content--auth {
		justify-content: flex-start;
		padding-block: var(--wp--preset--spacing--50);
	}

	.swp-route--anmelden .swp-auth-column {
		padding: var(--wp--preset--spacing--50);
	}
}

/* ---------- Password recovery visual refinement (plan 100) ---------- */

.swp-route--passwort .swp-shell--auth {
	min-height: 100svh;
	background:
		radial-gradient(circle at 50% 38%, rgba(48, 51, 56, 0.24), transparent 42%),
		var(--wp--preset--color--background);
}

.swp-route--passwort .swp-content--auth {
	padding-block: clamp(32px, 7vh, 72px);
}

.swp-route--passwort .swp-auth-column {
	position: relative;
	max-width: 520px;
	gap: var(--wp--preset--spacing--40);
	padding: clamp(28px, 5vw, 48px);
	background: rgba(27, 29, 32, 0.86);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
}

.swp-route--passwort .swp-auth-column > .swp-page-title {
	padding-right: 76px;
	font-size: var(--wp--preset--font-size--x-large);
}

.swp-route--passwort .swp-auth-column > .swp-logout {
	position: absolute;
	top: clamp(36px, 6vw, 54px);
	right: clamp(28px, 5vw, 48px);
	font-size: var(--wp--preset--font-size--small);
}

.swp-route--passwort .swp-auth-column > .swp-card {
	gap: var(--wp--preset--spacing--40);
	padding: 0;
	background: transparent;
	border: 0;
}

.swp-route--passwort .swp-card > h2,
.swp-route--passwort .swp-card > p,
.swp-route--passwort .swp-form > p {
	margin: 0;
}

.swp-route--passwort .swp-card > h2 {
	font-size: var(--wp--preset--font-size--large);
}

.swp-route--passwort .swp-card > p:first-child {
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
}

.swp-route--passwort .swp-form {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.swp-route--passwort .swp-field label {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

.swp-route--passwort .swp-field input:not([type="submit"]) {
	min-height: 54px;
	background-color: rgba(16, 17, 19, 0.72);
}

.swp-route--passwort .swp-field input:is(:-webkit-autofill, :autofill) {
	-webkit-text-fill-color: var(--wp--preset--color--text);
	caret-color: var(--wp--preset--color--text);
	box-shadow: 0 0 0 1000px #15171a inset;
}

.swp-route--passwort .swp-field__hint {
	margin-top: calc(-1 * var(--wp--preset--spacing--30));
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.swp-route--passwort .swp-field__error {
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--line) solid var(--wp--preset--color--danger);
	border-radius: var(--wp--custom--radius);
}

.swp-route--passwort .swp-form .swp-button--primary,
.swp-route--passwort .swp-card > p .swp-button {
	width: 100%;
	min-height: 54px;
	font-size: var(--wp--preset--font-size--medium);
}

.swp-route--passwort .swp-card > p:has(.swp-button--secondary) {
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-route--passwort .swp-card > p .swp-button--secondary {
	background: transparent;
	border-color: var(--wp--preset--color--control-border);
	color: var(--wp--preset--color--text);
}

@media (max-width: 768px) {
	.swp-route--passwort .swp-content--auth {
		justify-content: flex-start;
		padding-block: var(--wp--preset--spacing--50);
	}

	.swp-route--passwort .swp-auth-column {
		padding: var(--wp--preset--spacing--50);
	}

	.swp-route--passwort .swp-auth-column > .swp-page-title {
		padding-right: 0;
	}

	.swp-route--passwort .swp-auth-column > .swp-logout {
		position: static;
	}
}

/* ---------- Registration page visual refinement (plan 99) ---------- */

.swp-route--registrieren .swp-shell--auth {
	min-height: 100svh;
	background:
		radial-gradient(circle at 50% 28%, rgba(48, 51, 56, 0.24), transparent 44%),
		var(--wp--preset--color--background);
}

.swp-route--registrieren .swp-content--auth {
	padding-block: clamp(32px, 6vh, 72px);
}

/* Heading inside the card, as on the login and password pages. */
.swp-route--registrieren .swp-auth-column {
	position: relative;
	max-width: 1040px;
	gap: var(--wp--preset--spacing--40);
	padding: clamp(28px, 4vw, 48px);
	background: rgba(27, 29, 32, 0.9);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
}

.swp-route--registrieren .swp-auth-column > .swp-page-title {
	padding-right: 76px;
	font-size: var(--wp--preset--font-size--x-large);
}

.swp-route--registrieren .swp-auth-column > .swp-logout {
	position: absolute;
	top: clamp(34px, 4.5vw, 54px);
	right: clamp(28px, 4vw, 48px);
	font-size: var(--wp--preset--font-size--small);
}

.swp-route--registrieren .swp-auth-column > .swp-card {
	gap: var(--wp--preset--spacing--50);
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.swp-route--registrieren .swp-card > .swp-notice {
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--muted);
}

.swp-route--registrieren .swp-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.swp-route--registrieren .swp-form > p,
.swp-route--registrieren .swp-card > p {
	margin: 0;
}

.swp-route--registrieren .swp-form > .swp-notice,
.swp-route--registrieren .swp-form > .swp-consent,
.swp-route--registrieren .swp-form > p:has(#swp-password),
.swp-route--registrieren .swp-form > p:has(> .swp-button) {
	grid-column: 1 / -1;
}

.swp-route--registrieren .swp-form > .swp-notice {
	padding: var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--control-border);
	color: var(--wp--preset--color--muted);
}

.swp-route--registrieren .swp-field label {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

/* :not() matches the specificity of the generic input rule further down. */
.swp-route--registrieren .swp-field input:not([type="submit"]),
.swp-route--registrieren .swp-field select {
	min-height: 54px;
	background-color: rgba(16, 17, 19, 0.72);
}

.swp-route--registrieren .swp-field input:is(:-webkit-autofill, :autofill) {
	-webkit-text-fill-color: var(--wp--preset--color--text);
	caret-color: var(--wp--preset--color--text);
	box-shadow: 0 0 0 1000px #15171a inset;
}

.swp-route--registrieren .swp-consent {
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-route--registrieren .swp-consent label {
	position: relative;
	display: block;
	min-height: 24px;
	padding-left: 36px;
}

.swp-route--registrieren .swp-consent input[type="checkbox"] {
	position: absolute;
	top: 1px;
	left: 0;
	margin: 0;
}

.swp-route--registrieren .swp-form .swp-button--primary {
	width: 100%;
	min-height: 54px;
	font-size: var(--wp--preset--font-size--medium);
}

.swp-route--registrieren .swp-card > p:last-child {
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
	text-align: center;
}

@media (max-width: 768px) {
	.swp-route--registrieren .swp-content--auth {
		padding-block: var(--wp--preset--spacing--50);
	}

	.swp-route--registrieren .swp-auth-column {
		padding: var(--wp--preset--spacing--50);
	}

	.swp-route--registrieren .swp-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.swp-route--registrieren .swp-form > .swp-notice,
	.swp-route--registrieren .swp-form > .swp-consent,
	.swp-route--registrieren .swp-form > p:has(#swp-password),
	.swp-route--registrieren .swp-form > p:has(> .swp-button) {
		grid-column: 1;
	}

	.swp-route--registrieren .swp-card > p:last-child .swp-button {
		width: 100%;
	}
}

/* ---------- Public legal pages (plan 98) ---------- */

.swp-legal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

@media (max-width: 768px) {
	.swp-legal-actions .swp-button {
		width: 100%;
	}
}

.swp-prose {
	width: 100%;
	max-width: var(--wp--custom--prose-width);
	margin: 0 auto;
}

.swp-prose h2,
.swp-prose h3 {
	margin-top: var(--wp--preset--spacing--50);
}

/* ---------- Cards ---------- */

.swp-card {
	background: var(--wp--preset--color--card);
	border: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--custom--card-padding);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

.swp-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.35;
}

/* ---------- Forms ---------- */

.swp-field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

.swp-content label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.swp-content input:not([type="submit"]),
.swp-content select,
.swp-content textarea {
	width: 100%;
	min-height: var(--wp--custom--control-height);
	padding: 0 var(--wp--preset--spacing--30);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--background);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
}

/* Select with a list of our own (order-form.js, plan 227): part of an entry in bold. */

.swp-select {
	position: relative;
	display: block;
	min-width: 0;
}

/* The native select stays the form field; it is only taken out of sight and out of the tab order. */
.swp-content select.swp-select__native {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	min-height: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.swp-content .swp-select__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	min-height: var(--wp--custom--control-height);
	padding: 0 var(--wp--preset--spacing--30);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--text);
	text-align: left;
	background: var(--wp--preset--color--background);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	cursor: pointer;
}

.swp-select__button::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.swp-select.is-open .swp-select__button::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.swp-select__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.swp-select__value.is-placeholder {
	color: var(--wp--preset--color--muted);
}

/* Pure white, one step above the main text colour, so that the bold part stands out (operator, 2026-10-08). */
.swp-select__value strong,
.swp-select__option strong {
	font-weight: 700;
	color: #fff;
}

.swp-select__list {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	left: 0;
	z-index: 30;
	max-height: 316px;
	margin: 0;
	padding: 4px 0;
	overflow-y: auto;
	list-style: none;
	background: var(--wp--preset--color--card);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.swp-select__list[hidden] {
	display: none;
}

.swp-select__option {
	min-height: 44px;
	padding: 12px var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	line-height: 20px;
	color: var(--wp--preset--color--text);
	overflow-wrap: anywhere;
	cursor: pointer;
}

.swp-select__option.is-active {
	background: rgba(255, 255, 255, 0.08);
}

.swp-select__option[aria-selected="true"] {
	box-shadow: inset 2px 0 0 var(--wp--preset--color--text);
}

.swp-content input[type="file"] {
	padding: 6px;
	line-height: 30px;
	cursor: pointer;
}

/* File fields take a dropped file (file-drop.js of the plugin). */

.swp-drop__hint {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.swp-drop__message {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--danger);
}

.swp-drop__message:empty {
	display: none;
}

.swp-dragging .swp-drop {
	outline: 2px dashed var(--wp--preset--color--control-border);
	outline-offset: 6px;
	border-radius: var(--wp--custom--radius);
}

.swp-dragging .swp-drop.is-over {
	outline-color: var(--wp--preset--color--text);
	background: rgba(255, 255, 255, 0.06);
}

.swp-content input[type="file"]::file-selector-button {
	min-height: 32px;
	margin-right: var(--wp--preset--spacing--30);
	padding: 0 var(--wp--preset--spacing--40);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	background: transparent;
	color: var(--wp--preset--color--text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.swp-content input[type="file"]::file-selector-button:hover {
	background: var(--wp--preset--color--card);
}

/* Field icons on login and registration, as in the design reference. */
.swp-content #user_login,
.swp-content #user_pass,
.swp-content #swp-company,
.swp-content #swp-first_name,
.swp-content #swp-last_name,
.swp-content #swp-email,
.swp-content #swp-street,
.swp-content #swp-phone,
.swp-content #swp-vat_id,
.swp-content #swp-password,
.swp-content #swp-reset-email,
.swp-content #swp-resend-email,
.swp-content #swp-reset-password,
.swp-content #swp-reset-password-confirm {
	padding-left: 44px;
	background-position: 14px center;
	background-repeat: no-repeat;
	background-size: 20px;
}

.swp-content #user_login,
.swp-content #swp-email,
.swp-content #swp-reset-email,
.swp-content #swp-resend-email {
	background-image: url("../icons/field/mail.svg");
}

.swp-content #user_pass,
.swp-content #swp-password,
.swp-content #swp-reset-password,
.swp-content #swp-reset-password-confirm {
	background-image: url("../icons/field/lock.svg");
}

.swp-content #swp-company {
	background-image: url("../icons/field/building.svg");
}

.swp-content #swp-first_name,
.swp-content #swp-last_name {
	background-image: url("../icons/field/person.svg");
}

.swp-content #swp-street {
	background-image: url("../icons/field/pin.svg");
}

.swp-content #swp-phone {
	background-image: url("../icons/field/phone.svg");
}

.swp-content #swp-vat_id {
	background-image: url("../icons/field/document.svg");
}

/* Show/hide button inside password fields (added by password-toggle.js). */
.swp-password {
	position: relative;
	display: block;
}

.swp-password input {
	padding-right: 48px;
}

.swp-password__toggle {
	position: absolute;
	top: 50%;
	right: 4px;
	width: 40px;
	height: 40px;
	transform: translateY(-50%);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius);
	background: transparent;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}

.swp-password__toggle::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: auto;
	background-color: currentColor;
	-webkit-mask: url("../icons/eye.svg") center / contain no-repeat;
	mask: url("../icons/eye.svg") center / contain no-repeat;
}

.swp-password__toggle[aria-pressed="true"]::before {
	-webkit-mask-image: url("../icons/eye-off.svg");
	mask-image: url("../icons/eye-off.svg");
}

.swp-password__toggle:hover {
	color: var(--wp--preset--color--text);
}

/* Core's wp_login_form() submits with input[type=submit]: style it as the primary button. */
.swp-content input[type="submit"] {
	width: 100%;
	min-height: var(--wp--custom--control-height);
	padding: 0 var(--wp--preset--spacing--40);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--primary-button-text);
	background: var(--wp--preset--color--primary-button);
	border: var(--wp--custom--line) solid transparent;
	border-radius: var(--wp--custom--radius);
	cursor: pointer;
}

.swp-content textarea {
	padding: var(--wp--preset--spacing--30);
	min-height: 120px;
	line-height: 1.5;
}

.swp-content input[type="checkbox"],
.swp-content input[type="radio"] {
	width: auto;
	min-height: 0;
	inline-size: 20px;
	block-size: 20px;
}

/* Consent checkbox rows and inline field errors (registration form). */

.swp-consent label {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--text);
	line-height: 1.5;
}

.swp-consent input[type="checkbox"] {
	margin-block-start: 2px;
	flex: 0 0 auto;
}

.swp-field__error {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--danger);
}

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

.swp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--control-height);
	padding: 0 var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius);
	border: var(--wp--custom--line) solid transparent;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

.swp-button--primary {
	background: var(--wp--preset--color--primary-button);
	color: var(--wp--preset--color--primary-button-text);
}

.swp-button--secondary {
	background: transparent;
	border-color: var(--wp--preset--color--control-border);
	color: var(--wp--preset--color--text);
}

/* Narrow variant for order and ticket numbers in tables and lists. */
.swp-button--compact {
	padding: 0 var(--wp--preset--spacing--30);
	white-space: nowrap;
}

.swp-button-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.swp-button--new-order {
	gap: var(--wp--preset--spacing--20);
}

.swp-button--new-order::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background:
		linear-gradient(currentColor, currentColor) center / 16px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 16px no-repeat;
}

.swp-nav-toggle {
	min-height: var(--wp--custom--control-height);
	padding: 0 var(--wp--preset--spacing--30);
	background: transparent;
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

/* ---------- Badges (always text plus icon, never colour alone) ---------- */

.swp-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: 4px var(--wp--preset--spacing--30);
	border: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	white-space: nowrap;
}

.swp-badge__icon {
	flex: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.swp-badge--ok .swp-badge__icon,
.swp-badge--pending .swp-badge__icon,
.swp-badge--blocked .swp-badge__icon {
	color: var(--wp--preset--color--text);
}

.swp-badge--pending {
	border-style: dashed;
}

.swp-badge--blocked {
	border-width: 2px;
}

/* ---------- Tables ---------- */

.swp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.swp-table th,
.swp-table td {
	text-align: left;
	padding: var(--wp--preset--spacing--30);
	border-bottom: var(--wp--custom--line) solid var(--wp--preset--color--border);
	/* Middle keeps text in line with the number buttons and badges of a row. */
	vertical-align: middle;
	/* Break only a word that cannot fit on its own line; "anywhere" let columns
	   shrink until order numbers, dates and headings split mid-word. */
	overflow-wrap: break-word;
}

.swp-table th {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	white-space: nowrap;
}

/* Order, ticket and invoice numbers stay on one line despite their hyphen. */
.swp-table__id {
	white-space: nowrap;
}

/* ---------- Footer ---------- */

/* One footer on every page: copyright left, legal links right. */
.swp-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50) var(--wp--custom--content-padding);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--sidebar);
	min-width: 0;
}

.swp-footer__copy {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.swp-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.swp-footer__list li + li::before {
	content: "·";
	margin-right: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
}

.swp-footer__link {
	color: var(--wp--preset--color--muted);
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--control-height);
}

/* ---------- Focus ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--text);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius);
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
	.swp-shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.swp-sidebar {
		position: fixed;
		z-index: 20;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(var(--wp--custom--sidebar-width), 80vw);
		transform: translateX(-100%);
		/* Closed: out of the tab order and the accessibility tree; visibility flips after the slide. */
		visibility: hidden;
		transition: transform 0.2s ease, visibility 0s linear 0.2s;
		overflow-y: auto;
	}

	.swp-sidebar.is-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.2s ease, visibility 0s;
	}

	/* Dims the page behind the open menu; a tap on it closes the menu (nav.js). */
	.swp-nav-backdrop {
		position: fixed;
		z-index: 19;
		inset: 0;
		background: rgba(0, 0, 0, 0.55);
	}

	.swp-nav-backdrop[hidden] {
		display: none;
	}

	.swp-wordmark--mobile,
	.swp-nav-toggle {
		display: inline-flex;
		align-items: center;
	}

	/* At the right edge the toggle stays visible next to the open sidebar. */
	.swp-nav-toggle {
		position: relative;
		z-index: 21;
		margin-left: auto;
	}

	.swp-header {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--30) var(--wp--custom--gutter-mobile);
	}

	.swp-header .swp-breadcrumb {
		flex-basis: 100%;
	}

	.swp-content,
	.swp-footer {
		padding: var(--wp--custom--gutter-mobile);
	}

	.swp-footer {
		flex-direction: column;
		justify-content: center;
	}

	.swp-footer__list {
		justify-content: center;
	}

	.swp-card {
		padding: var(--wp--custom--gutter-mobile);
	}

	.swp-table,
	.swp-table tbody,
	.swp-table tr,
	.swp-table td {
		display: block;
		width: 100%;
	}

	.swp-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
	}

	.swp-table tr {
		margin-bottom: var(--wp--preset--spacing--40);
		border: var(--wp--custom--line) solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius);
		background: var(--wp--preset--color--card);
		padding: var(--wp--preset--spacing--30);
	}

	.swp-table td {
		border-bottom: 0;
		padding: var(--wp--preset--spacing--20) 0;
	}

	.swp-table td::before {
		content: attr(data-label);
		display: block;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
	}
}

@media (prefers-reduced-motion: reduce) {
	.swp-sidebar {
		transition: none;
	}
}

/* Order wizard: progress, two column layout, tiles, summary panel. */
.swp-wizard-card {
	padding: 0;
	background: transparent;
	border: 0;
}

.swp-wizard {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.swp-wizard__progress {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.swp-wizard__progress-item {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

.swp-wizard__progress-item::before {
	content: attr(data-step);
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--background);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: 50%;
}

.swp-wizard__progress-item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 20px;
	left: calc(50% + 24px);
	width: calc(100% - 48px);
	height: var(--wp--custom--line);
	background: var(--wp--preset--color--control-border);
}

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

.swp-wizard__progress-item.is-active::before,
.swp-wizard__progress-item.is-done::before {
	color: var(--wp--preset--color--primary-button-text);
	background: var(--wp--preset--color--primary-button);
	border-color: var(--wp--preset--color--primary-button);
}

.swp-wizard__progress-item a {
	color: inherit;
}

.swp-wizard__layout {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

.swp-wizard__layout--step-1 .swp-wizard__form {
	padding: var(--wp--custom--card-padding);
	background:
		linear-gradient(145deg, rgba(48, 51, 56, 0.24), transparent 58%),
		var(--wp--preset--color--card);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}

.swp-wizard__vehicle-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.swp-wizard__vehicle-form > .swp-field,
.swp-wizard__vehicle-form > [data-swp-ecu] .swp-field,
.swp-wizard__vehicle-form > [data-swp-flasher-details] .swp-field,
.swp-wizard__vehicle-form > p {
	margin: 0;
}

.swp-wizard__vehicle-form > [data-swp-flasher-details],
.swp-wizard__vehicle-form > .swp-field--wide,
.swp-wizard__vehicle-form > .swp-notice,
.swp-wizard__vehicle-actions {
	grid-column: 1 / -1;
}

.swp-wizard__vehicle-form > [data-swp-flasher-details][hidden] {
	display: none;
}

/* .swp-field sets display: flex, which would keep the hidden free-text ECU field visible. */
.swp-field[data-swp-ecu-other][hidden] {
	display: none;
}

.swp-wizard__vehicle-actions {
	display: flex;
	justify-content: flex-end;
}

.swp-wizard__vehicle-actions .swp-button {
	min-width: 180px;
}

.swp-wizard__summary {
	align-self: start;
	padding: var(--wp--custom--card-padding);
	background:
		linear-gradient(145deg, rgba(48, 51, 56, 0.24), transparent 58%),
		var(--wp--preset--color--card);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius, 8px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}

.swp-wizard__summary::before {
	content: attr(aria-label);
	display: block;
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	border-bottom: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-wizard__summary-list {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin: 0;
}

.swp-wizard__summary dt,
.swp-wizard__summary dd {
	min-width: 0;
	overflow-wrap: anywhere;
}

.swp-wizard__summary dt {
	color: var(--wp--preset--color--muted);
}

.swp-wizard__summary dd {
	margin: 0;
	text-align: right;
}

.swp-wizard__summary dt:last-of-type,
.swp-wizard__summary dd:last-child {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-wizard__summary dd:last-child {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.swp-wizard__abandon {
	order: 3;
	margin: 0;
}

.swp-wizard__abandon .swp-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--control-height);
	padding: 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
}

.swp-tiles {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.swp-tile {
	border: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius, 8px);
	min-height: 44px;
	padding: 0.75rem;
}

.swp-tile.is-disabled {
	color: var(--wp--preset--color--muted);
	opacity: 0.6;
}

.swp-tile__reason {
	display: block;
	font-size: 0.875rem;
}

.swp-service-card {
	min-height: 230px;
	padding: 0;
	position: relative;
	background:
		linear-gradient(145deg, rgba(48, 51, 56, 0.24), transparent 58%),
		var(--wp--preset--color--card);
	border-color: var(--wp--preset--color--control-border);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.swp-service-card > label {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	position: relative;
}

.swp-wizard__service-grid {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.swp-service-card:has(.swp-service-card__input:checked) {
	border-color: var(--wp--preset--color--text);
	box-shadow: 0 0 0 var(--wp--custom--line) var(--wp--preset--color--text);
}

.swp-service-card__input {
	opacity: 0;
	position: absolute;
}

.swp-service-card__indicator {
	border: 2px solid var(--wp--preset--color--control-border);
	border-radius: 50%;
	height: 1.25rem;
	position: absolute;
	right: var(--wp--preset--spacing--40);
	top: var(--wp--preset--spacing--40);
	width: 1.25rem;
}

.swp-service-card__input:checked + .swp-service-card__indicator {
	background: var(--wp--preset--color--primary-button);
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--base);
}

.swp-service-card__input:focus-visible + .swp-service-card__indicator {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.swp-service-card__description {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

.swp-service-card__icon {
	display: block;
	width: 52px;
	height: 52px;
	margin-bottom: var(--wp--preset--spacing--10);
	background-color: var(--wp--preset--color--text);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 36px;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 36px;
	border-radius: var(--wp--custom--radius);
	box-shadow: inset 0 0 0 24px rgba(255, 255, 255, 0.05);
}

/*
 * One icon family for all services: the three stages share a rev gauge whose
 * lit arc grows with the stage; options, file check and back to stock use the
 * same grid and stroke.
 */
.swp-service-card__icon--options-only {
	-webkit-mask-image: url("../icons/service/options.svg");
	mask-image: url("../icons/service/options.svg");
}

.swp-service-card__icon--stage1 {
	-webkit-mask-image: url("../icons/service/stage1.svg");
	mask-image: url("../icons/service/stage1.svg");
}

.swp-service-card__icon--stage2 {
	-webkit-mask-image: url("../icons/service/stage2.svg");
	mask-image: url("../icons/service/stage2.svg");
}

.swp-service-card__icon--stage3 {
	-webkit-mask-image: url("../icons/service/stage3.svg");
	mask-image: url("../icons/service/stage3.svg");
}

.swp-service-card__icon--file-check {
	-webkit-mask-image: url("../icons/service/file-check.svg");
	mask-image: url("../icons/service/file-check.svg");
}

.swp-service-card__icon--back-to-stock {
	-webkit-mask-image: url("../icons/service/back-to-stock.svg");
	mask-image: url("../icons/service/back-to-stock.svg");
}

.swp-service-card .swp-tile__label,
.swp-service-card .swp-tile__price {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.2;
}

.swp-service-card .swp-tile__price {
	order: 2;
}

.swp-service-card .swp-service-card__description {
	order: 3;
}

/* What the stage carries at no extra charge, below the description. */
.swp-service-card .swp-service-card__included {
	order: 4;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

.swp-service-card.is-disabled {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
}

.swp-service-card.is-disabled .swp-tile__reason {
	order: 4;
}

.swp-wizard__service-actions {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0 0;
}

.swp-wizard__service-actions .swp-button {
	min-width: 150px;
}

.swp-options-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.swp-options-group {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--30);
	background:
		linear-gradient(145deg, rgba(48, 51, 56, 0.24), transparent 58%),
		var(--wp--preset--color--card);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius, 8px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.swp-option-row {
	margin: 0;
	border-bottom: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-option-row:last-of-type {
	border-bottom: 0;
}

.swp-option-row label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: 58px;
	cursor: pointer;
}

.swp-option-row input[type="checkbox"] {
	margin: 0;
	accent-color: var(--wp--preset--color--text);
}

.swp-option-row__name {
	font-weight: 600;
}

.swp-option-row__price {
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

.swp-option-row:has(input:checked) {
	background: rgba(255, 255, 255, 0.045);
}

.swp-options-group--package .swp-field__hint {
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-wizard__options-actions {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0 0;
}

.swp-wizard__options-actions .swp-button {
	min-width: 150px;
}

.swp-wizard__files-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--custom--card-padding);
	background:
		linear-gradient(145deg, rgba(48, 51, 56, 0.24), transparent 58%),
		var(--wp--preset--color--card);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius, 8px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}

.swp-wizard__files-form > p,
.swp-wizard__files-details .swp-field {
	margin: 0;
}

.swp-upload-field {
	padding: var(--wp--preset--spacing--30);
	background: rgba(16, 17, 19, 0.38);
	border: var(--wp--custom--line) dashed var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
}

.swp-upload-field > label {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

.swp-content .swp-upload-field input[type="file"] {
	min-height: 58px;
	padding: 7px;
	background: rgba(16, 17, 19, 0.72);
	cursor: pointer;
}

.swp-content .swp-upload-field input[type="file"]::file-selector-button {
	min-height: 42px;
	margin-right: var(--wp--preset--spacing--30);
	padding: 0 var(--wp--preset--spacing--40);
	font: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--sidebar);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: calc(var(--wp--custom--radius) - 2px);
	cursor: pointer;
}

.swp-content .swp-upload-field input[type="file"]::file-selector-button:hover {
	border-color: var(--wp--preset--color--text);
}

.swp-upload-status {
	padding: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--text);
	background: rgba(255, 255, 255, 0.045);
	border-left: 3px solid var(--wp--preset--color--text);
}

.swp-wizard__gear-display {
	padding: var(--wp--preset--spacing--30);
	background: rgba(255, 255, 255, 0.035);
	border: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
}

.swp-wizard__files-privacy {
	padding: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	background: rgba(255, 255, 255, 0.025);
	border-left: 3px solid var(--wp--preset--color--control-border);
}

.swp-wizard__files-privacy-link {
	margin-top: calc(-1 * var(--wp--preset--spacing--20)) !important;
}

.swp-wizard__files-details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-wizard__files-details label {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

.swp-wizard__files-actions {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-wizard__files-actions .swp-button {
	min-width: 150px;
}

.swp-review-grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr;
}

.swp-wizard__review-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.swp-review-card,
.swp-review-consent {
	background:
		linear-gradient(145deg, rgba(48, 51, 56, 0.24), transparent 58%),
		var(--wp--preset--color--card);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius, 8px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.swp-review-card {
	min-width: 0;
	padding: var(--wp--preset--spacing--40);
}

.swp-review-card h3 {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
	border-bottom: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-review-card .swp-summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, auto);
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin: 0;
}

.swp-review-card .swp-summary dt {
	min-width: 0;
	color: var(--wp--preset--color--muted);
}

.swp-review-card .swp-summary dd {
	min-width: 0;
	margin: 0;
	font-weight: 600;
	text-align: right;
	overflow-wrap: anywhere;
}

.swp-review-total {
	margin-top: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--40);
	font-weight: 700 !important;
	color: var(--wp--preset--color--text) !important;
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-review-card--balance .swp-summary dd {
	font-size: var(--wp--preset--font-size--large);
}

.swp-review-card--balance .swp-summary dt:nth-of-type(2),
.swp-review-card--balance .swp-summary dd:nth-of-type(2) {
	margin-top: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-review-consent {
	padding: var(--wp--preset--spacing--40);
}

.swp-review-consent__notices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-review-consent__notices .swp-notice {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.swp-review-consent > .swp-consent {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: var(--wp--preset--spacing--30);
	background: rgba(255, 255, 255, 0.035);
	border: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
}

.swp-review-actions,
.swp-download-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.swp-review-actions {
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--card);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
}

.swp-review-actions > span {
	display: flex;
	gap: var(--wp--preset--spacing--30);
}

.swp-review-actions .swp-button {
	min-width: 180px;
}

.swp-button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.swp-field__hint {
	color: var(--wp--preset--color--muted);
	display: block;
	font-size: 0.875rem;
}

/*
 * ECU choice in the order wizard (rendered by PHP and rebuilt by order-form.js):
 * a label like every other field and one bordered row per control unit.
 */
.swp-content [data-swp-ecu] .swp-fieldset {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.swp-content [data-swp-ecu] .swp-fieldset > legend {
	margin-bottom: var(--wp--preset--spacing--20);
	padding: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.swp-content [data-swp-ecu] .swp-radio {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: var(--wp--custom--control-height);
	padding: 0 var(--wp--preset--spacing--30);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.swp-content [data-swp-ecu] .swp-radio:has(input:checked) {
	border-color: var(--wp--preset--color--text);
	font-weight: 600;
}

.swp-content [data-swp-ecu] .swp-radio:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--text);
	outline-offset: 2px;
}

.swp-content [data-swp-ecu] .swp-radio input[type="radio"] {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 2px solid var(--wp--preset--color--muted);
	border-radius: 50%;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.swp-content [data-swp-ecu] .swp-radio input[type="radio"]:checked {
	border-color: var(--wp--preset--color--text);
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--background);
	background: var(--wp--preset--color--text);
}

.swp-content [data-swp-ecu] .swp-radio input[type="radio"]:focus-visible {
	outline: none;
}

.swp-radio {
	display: block;
	min-height: 44px;
	padding: 0.5rem 0;
}

.swp-table {
	border-collapse: collapse;
	width: 100%;
}

.swp-table th,
.swp-table td {
	border-bottom: var(--wp--custom--line) solid var(--wp--preset--color--border);
	padding: 0.5rem;
	text-align: left;
}

@media (max-width: 768px) {
	.swp-wizard {
		gap: var(--wp--preset--spacing--40);
	}

	.swp-wizard__progress-item {
		gap: var(--wp--preset--spacing--10);
		font-size: 0.7rem;
	}

	.swp-wizard__progress-item::before {
		width: 34px;
		height: 34px;
	}

	.swp-wizard__progress-item:not(:last-child)::after {
		top: 17px;
		left: calc(50% + 20px);
		width: calc(100% - 40px);
	}

	.swp-wizard__layout--step-1 .swp-wizard__form,
	.swp-wizard__summary {
		padding: var(--wp--preset--spacing--40);
	}

	.swp-wizard__summary-list {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
	}

	.swp-wizard__summary dd {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.swp-wizard__vehicle-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.swp-wizard__vehicle-form > * {
		grid-column: 1 / -1;
	}

	.swp-wizard__vehicle-actions .swp-button,
	.swp-wizard__service-actions .swp-button,
	.swp-wizard__options-actions .swp-button,
	.swp-wizard__files-actions .swp-button,
	.swp-wizard__abandon .swp-link {
		width: 100%;
	}

	.swp-wizard__service-actions,
	.swp-wizard__options-actions,
	.swp-wizard__files-actions {
		flex-direction: column-reverse;
	}

	.swp-options-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.swp-option-row label {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.swp-option-row__price {
		grid-column: 2;
		white-space: normal;
	}

	.swp-wizard__files-form {
		padding: var(--wp--preset--spacing--40);
	}

	.swp-wizard__files-details {
		grid-template-columns: minmax(0, 1fr);
	}

	.swp-content .swp-upload-field input[type="file"]::file-selector-button {
		margin-right: var(--wp--preset--spacing--20);
		padding-inline: var(--wp--preset--spacing--30);
	}

	.swp-review-consent__notices {
		grid-template-columns: minmax(0, 1fr);
	}

	.swp-review-card .swp-summary {
		grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
		column-gap: var(--wp--preset--spacing--30);
	}

	.swp-review-actions {
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.swp-review-actions > span,
	.swp-review-actions .swp-button {
		width: 100%;
	}

	.swp-review-actions > span {
		flex-direction: column;
	}
}

@media (min-width: 75rem) {
	.swp-wizard__layout {
		grid-template-columns: 2fr 1fr;
		align-items: start;
	}

	.swp-wizard__summary {
		position: sticky;
		top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--40));
	}

	.swp-wizard__layout--review {
		grid-template-columns: 1fr;
	}

	.swp-tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.swp-review-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Order status badges (plan 06) ---------- */

.swp-badge--info {
	border-style: dashed;
	border-width: 2px;
}

.swp-badge--done {
	border-width: 2px;
	background: var(--wp--preset--color--sidebar);
}

.swp-badge--info .swp-badge__icon,
.swp-badge--done .swp-badge__icon {
	color: var(--wp--preset--color--text);
}

/*
 * Status colour: a badge that names its status shows the dot in the tones of
 * the admin order list. The label and the border still carry the status.
 */
.swp-badge[class*="swp-badge--status-"] {
	--swp-badge-dot: #8d96a3;
	--swp-badge-halo: rgba(141, 150, 163, 0.12);
}

.swp-badge[class*="swp-badge--status-"] .swp-badge__icon {
	width: 9px;
	height: 9px;
	margin: 0 3px;
	border-radius: 50%;
	background: var(--swp-badge-dot);
	box-shadow: 0 0 0 3px var(--swp-badge-halo);
	font-size: 0;
}

/*
 * The status rules repeat .swp-badge so they outrank the grey default above,
 * which matches the same element with two selectors.
 */
.swp-badge.swp-badge--status-received,
.swp-badge.swp-badge--status-open {
	--swp-badge-dot: #78aef7;
	--swp-badge-halo: rgba(120, 174, 247, 0.13);
}

.swp-badge.swp-badge--status-query {
	--swp-badge-dot: #e5be62;
	--swp-badge-halo: rgba(229, 190, 98, 0.13);
}

.swp-badge.swp-badge--status-accepted {
	--swp-badge-dot: #8b9ff5;
	--swp-badge-halo: rgba(139, 159, 245, 0.13);
}

.swp-badge.swp-badge--status-completed {
	--swp-badge-dot: #70cf81;
	--swp-badge-halo: rgba(112, 207, 129, 0.13);
}

.swp-badge.swp-badge--status-rejected,
.swp-badge.swp-badge--status-failed {
	--swp-badge-dot: #d97878;
	--swp-badge-halo: rgba(217, 120, 120, 0.13);
}

/* An order in progress pulses; every other status keeps a still dot. */
.swp-badge.swp-badge--status-accepted .swp-badge__icon {
	animation: swp-badge-pulse 1.6s ease-in-out infinite;
}

@keyframes swp-badge-pulse {

	0%,
	100% {
		box-shadow: 0 0 0 3px var(--swp-badge-halo);
	}

	50% {
		box-shadow: 0 0 0 6px rgba(139, 159, 245, 0.35);
	}
}

@media (prefers-reduced-motion: reduce) {

	.swp-badge.swp-badge--status-accepted .swp-badge__icon {
		animation: none;
	}
}

/*
 * Card tables: .swp-table--cards marks the tables whose cells carry a
 * data-label attribute. The stacking itself is the generic .swp-table rule
 * in the 768px media query above, which already covers every narrow screen.
 */

.swp-table--cards {
	margin-top: var(--wp--preset--spacing--30);
}

/* ---------- Status timeline ---------- */

.swp-timeline {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.swp-timeline__item {
	border-left: 2px solid var(--wp--preset--color--border);
	margin: 0;
	min-height: 44px;
	padding: 0 0 0.75rem 1rem;
	position: relative;
}

.swp-timeline__item:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

.swp-timeline__dot {
	background: var(--wp--preset--color--text);
	border-radius: 50%;
	display: block;
	height: 10px;
	left: -6px;
	position: absolute;
	top: 4px;
	width: 10px;
}

.swp-timeline__heading {
	display: block;
	font-weight: 600;
}

.swp-timeline__time {
	color: var(--wp--preset--color--muted);
	display: block;
	font-size: 0.875rem;
}

/* ---------- Message thread ---------- */

.swp-thread {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.swp-thread__message {
	border: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius, 8px);
	max-width: 42rem;
	padding: 0.75rem;
}

.swp-thread__message--operator {
	justify-self: start;
}

.swp-thread__message--customer {
	background: var(--wp--preset--color--sidebar);
	justify-self: end;
}

.swp-thread__meta {
	color: var(--wp--preset--color--muted);
	display: block;
	font-size: 0.875rem;
}

.swp-thread__message p {
	margin: 0.25rem 0 0;
}

/* ---------- File lists ---------- */

.swp-files {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.swp-files li {
	border-bottom: var(--wp--custom--line) solid var(--wp--preset--color--border);
	overflow-wrap: anywhere;
	padding: 0.75rem 0;
}

.swp-files li:last-child {
	border-bottom: 0;
}

/* ---------- Dashboard grid (plan 07) ---------- */

.swp-dash {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr;
	margin-bottom: var(--wp--preset--spacing--30);
}

.swp-dash > .swp-card {
	margin: 0;
}

@media (min-width: 40rem) {
	.swp-dash {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 72rem) {
	.swp-dash {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- Customer portal shell and dashboard visual refinement (plan 101) ---------- */

.swp-sidebar .swp-wordmark,
.swp-header .swp-wordmark--mobile {
	width: 100%;
	max-width: 206px;
	height: 69px;
	font-size: 0;
	background: url("../images/sw-sales-web-600.png") left center / contain no-repeat;
}

.swp-sidebar .swp-wordmark {
	flex: 0 0 auto;
	margin: 0;
}

.swp-route--uebersicht .swp-content {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
	align-content: start;
	align-items: start;
	gap: var(--wp--preset--spacing--40);
}

.swp-route--uebersicht .swp-content > * {
	grid-column: 1 / -1;
}

.swp-route--uebersicht .swp-dashboard__welcome {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: repeat(4, auto);
	column-gap: var(--wp--preset--spacing--60);
	row-gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
	background: transparent;
	border: 0;
}

.swp-route--uebersicht .swp-dashboard__welcome h1,
.swp-route--uebersicht .swp-dashboard__welcome p,
.swp-route--uebersicht .swp-dashboard__stat h3,
.swp-route--uebersicht .swp-dashboard__stat p,
.swp-route--uebersicht .swp-dashboard__latest h3,
.swp-route--uebersicht .swp-dashboard__hours h3,
.swp-route--uebersicht .swp-dashboard__log-review h3 {
	margin: 0;
}

.swp-route--uebersicht .swp-dashboard__welcome h1 {
	grid-column: 1;
	grid-row: 1;
}

.swp-route--uebersicht .swp-dashboard__welcome .swp-page-head__subtitle {
	grid-column: 1;
	margin-bottom: var(--wp--preset--spacing--20);
}

.swp-route--uebersicht .swp-dashboard__welcome > p:nth-of-type(-n + 3) {
	grid-column: 1;
	color: var(--wp--preset--color--muted);
}

.swp-route--uebersicht .swp-dashboard__welcome > p:nth-of-type(4) {
	grid-column: 2;
	grid-row: 1 / 5;
	align-self: center;
}

.swp-route--uebersicht .swp-dashboard__welcome .swp-button {
	min-width: 190px;
	min-height: 52px;
}

.swp-route--uebersicht .swp-dash {
	margin: 0;
	gap: var(--wp--preset--spacing--40);
}

.swp-route--uebersicht .swp-dashboard__stat,
.swp-route--uebersicht .swp-dashboard__latest,
.swp-route--uebersicht .swp-dashboard__hours,
.swp-route--uebersicht .swp-dashboard__log-review {
	border-color: var(--wp--preset--color--control-border);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.swp-route--uebersicht .swp-dashboard__stat {
	min-height: 225px;
	background:
		linear-gradient(145deg, rgba(48, 51, 56, 0.28), transparent 58%),
		var(--wp--preset--color--card);
}

.swp-route--uebersicht .swp-dashboard__stat h3,
.swp-route--uebersicht .swp-dashboard__latest h3,
.swp-route--uebersicht .swp-dashboard__hours h3,
.swp-route--uebersicht .swp-dashboard__log-review h3 {
	font-size: var(--wp--preset--font-size--large);
}

.swp-route--uebersicht .swp-dashboard__stat .swp-tiles {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}

.swp-route--uebersicht .swp-dashboard__stat .swp-tile {
	padding: 0;
	background: transparent;
	border: 0;
}

.swp-route--uebersicht .swp-dashboard__stat .swp-tile strong {
	display: block;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
}

.swp-route--uebersicht .swp-dashboard__stat .swp-tile__reason,
.swp-route--uebersicht .swp-dashboard__stat .swp-summary dt {
	color: var(--wp--preset--color--muted);
}

/* Credit figures and account facts as label/value rows; fits the narrow desktop tile and the phone width. */
.swp-route--uebersicht .swp-dashboard__credits .swp-summary,
.swp-route--uebersicht .swp-dashboard__account .swp-summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin: 0;
}

.swp-route--uebersicht .swp-dashboard__credits .swp-summary dd,
.swp-route--uebersicht .swp-dashboard__account .swp-summary dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
}

.swp-route--uebersicht .swp-dashboard__stat > p:last-child {
	margin-top: auto;
}

.swp-route--uebersicht .swp-dashboard__stat .swp-button {
	width: 100%;
}

.swp-route--uebersicht .swp-dashboard__main {
	grid-column: 1;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-content: start;
	min-width: 0;
}

.swp-route--uebersicht .swp-dashboard__hours {
	grid-column: 2;
}

.swp-route--uebersicht .swp-dashboard__latest .swp-table {
	margin-top: 0;
}

@media (max-width: 1100px) {
	.swp-route--uebersicht .swp-content {
		grid-template-columns: minmax(0, 1fr);
	}

	.swp-route--uebersicht .swp-dashboard__main,
	.swp-route--uebersicht .swp-dashboard__hours {
		grid-column: 1;
	}
}

@media (max-width: 768px) {
	.swp-header .swp-wordmark--mobile {
		width: 154px;
		height: 52px;
		background-position: left center;
	}

	.swp-route--uebersicht .swp-dashboard__welcome {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
		padding: var(--wp--preset--spacing--20) 0;
	}

	.swp-route--uebersicht .swp-dashboard__welcome > p:nth-of-type(4) {
		margin-top: var(--wp--preset--spacing--30);
	}

	.swp-route--uebersicht .swp-dashboard__welcome > p:nth-of-type(4) {
		width: 100%;
	}

	.swp-route--uebersicht .swp-dashboard__welcome .swp-button {
		width: 100%;
	}

	.swp-route--uebersicht .swp-dashboard__stat {
		min-height: 0;
	}
}

/* ---------- Denied customer access visual refinement (plan 145) ---------- */

.swp-route--uebersicht .swp-shell--auth {
	min-height: 100svh;
	background:
		radial-gradient(circle at 50% 38%, rgba(48, 51, 56, 0.24), transparent 42%),
		var(--wp--preset--color--background);
}

.swp-route--uebersicht .swp-shell--auth .swp-content--auth {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: clamp(32px, 7vh, 72px);
}

.swp-route--uebersicht .swp-shell--auth .swp-auth-column {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	max-width: 620px;
	padding: clamp(28px, 5vw, 48px);
	background: rgba(27, 29, 32, 0.86);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
}

.swp-route--uebersicht .swp-shell--auth .swp-page-title {
	font-size: var(--wp--preset--font-size--x-large);
}

.swp-route--uebersicht .swp-shell--auth .swp-logout {
	margin-left: 0;
}

.swp-route--uebersicht .swp-shell--auth .swp-card {
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	background: rgba(16, 17, 19, 0.48);
	border-color: var(--wp--preset--color--border);
}

.swp-route--uebersicht .swp-shell--auth .swp-card p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

@media (max-width: 768px) {
	.swp-route--uebersicht .swp-shell--auth .swp-content--auth {
		justify-content: flex-start;
		padding-block: var(--wp--preset--spacing--50);
	}

	.swp-route--uebersicht .swp-shell--auth .swp-auth-column {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--wp--preset--spacing--50);
	}

	.swp-route--uebersicht .swp-shell--auth .swp-logout,
	.swp-route--uebersicht .swp-shell--auth .swp-card {
		grid-column: 1;
	}
}

/* ---------- Opening hours: status, two compact weeks, estimate ---------- */

.swp-hours-status {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	font-weight: 600;
}

.swp-hours-status__dot {
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
}

/*
 * Green when open, red when closed, in the tones of the admin order status
 * dots; the text always states the status, never colour alone.
 */
.swp-hours-status--open .swp-hours-status__dot {
	background: #70cf81;
	box-shadow: 0 0 0 3px rgba(112, 207, 129, 0.13);
}

.swp-hours-status--closed .swp-hours-status__dot {
	background: #d97878;
	box-shadow: 0 0 0 3px rgba(217, 120, 120, 0.13);
}

.swp-dashboard__hours {
	gap: var(--wp--preset--spacing--30);
}

.swp-dashboard__hours h4 {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.swp-hours-week {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
}

.swp-hours-week__day {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding: 6px var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius);
}

.swp-hours-week__day + .swp-hours-week__day {
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-hours-week__label,
.swp-hours-week__time {
	white-space: nowrap;
}

.swp-hours-week__day.is-closed {
	color: var(--wp--preset--color--muted);
}

.swp-hours-week__day.is-today {
	background: var(--wp--preset--color--border);
	font-weight: 600;
}

.swp-hours-week__day.is-today + .swp-hours-week__day {
	border-top-color: transparent;
}

.swp-hours-estimate {
	margin: 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Ticket thread attachments ---------- */

.swp-thread__message .swp-files {
	margin: 0.5rem 0 0;
}

.swp-thread__message .swp-files li {
	border-bottom: 0;
	padding: 0.25rem 0;
}

/* ---------- Customer order overview visual refinement (plan 102) ---------- */

.swp-route--dateiservice .swp-order-list {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.swp-route--dateiservice .swp-order-list__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

.swp-route--dateiservice .swp-order-list__stats {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0;
}

.swp-route--dateiservice .swp-order-list__stats .swp-tile {
	min-height: 132px;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-content: start;
	align-items: center;
	column-gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	background:
		linear-gradient(145deg, rgba(48, 51, 56, 0.3), transparent 58%),
		var(--wp--preset--color--card);
	border-color: var(--wp--preset--color--control-border);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.swp-route--dateiservice .swp-order-list__stats .swp-tile::before {
	content: "";
	width: 48px;
	height: 48px;
	grid-column: 1;
	grid-row: 1 / 3;
	background-color: var(--wp--preset--color--text);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 48px;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 48px;
	border-radius: var(--wp--custom--radius);
	box-shadow: inset 0 0 0 24px rgba(255, 255, 255, 0.04);
}

.swp-route--dateiservice .swp-order-list__stat--total::before {
	-webkit-mask-image: url("../icons/document.svg");
	mask-image: url("../icons/document.svg");
}

.swp-route--dateiservice .swp-order-list__stat--processing::before {
	-webkit-mask-image: url("../icons/gear-outline.svg");
	mask-image: url("../icons/gear-outline.svg");
}

.swp-route--dateiservice .swp-order-list__stat--ready::before {
	-webkit-mask-image: url("../icons/download.svg");
	mask-image: url("../icons/download.svg");
}

.swp-route--dateiservice .swp-order-list__stats strong {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
}

.swp-route--dateiservice .swp-order-list__stats .swp-tile__reason {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	margin-top: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--muted);
}

.swp-route--dateiservice .swp-order-list__filters {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(190px, 260px) auto;
	align-items: end;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--card);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.swp-route--dateiservice .swp-order-list__filters p {
	margin: 0;
}

.swp-route--dateiservice .swp-order-list__filters .swp-field {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.swp-route--dateiservice .swp-order-list__filters .swp-button {
	min-width: 116px;
}

.swp-route--dateiservice .swp-order-list__table {
	margin-top: 0;
	background: var(--wp--preset--color--card);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-top: 0;
	border-radius: 0 0 var(--wp--custom--radius) var(--wp--custom--radius);
	border-collapse: separate;
	border-spacing: 0;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.swp-route--dateiservice .swp-order-list__table th,
.swp-route--dateiservice .swp-order-list__table td {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.swp-route--dateiservice .swp-order-list__table tbody tr:last-child td {
	border-bottom: 0;
}

/* Download buttons stacked, so vehicle and service keep a readable width. */
.swp-route--dateiservice .swp-order-list__table .swp-download-actions {
	display: grid;
	grid-template-columns: minmax(155px, 1fr);
	gap: var(--wp--preset--spacing--20);
	width: 100%;
}

.swp-route--dateiservice .swp-order-list__table .swp-download-actions .swp-button {
	width: 100%;
	min-width: 155px;
	padding-inline: var(--wp--preset--spacing--30);
	white-space: nowrap;
}

.swp-route--dateiservice .swp-order-list__table th:last-child,
.swp-route--dateiservice .swp-order-list__table td:last-child {
	width: 190px;
	min-width: 190px;
}

/* Only very wide screens have room for both buttons side by side. */
@media (min-width: 1600px) {
	.swp-route--dateiservice .swp-order-list__table .swp-download-actions {
		grid-template-columns: repeat(2, minmax(155px, 1fr));
	}

	.swp-route--dateiservice .swp-order-list__table th:last-child,
	.swp-route--dateiservice .swp-order-list__table td:last-child {
		width: 350px;
		min-width: 350px;
	}
}

@media (max-width: 1200px) {
	.swp-route--dateiservice .swp-order-list__filters {
		grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
	}

	.swp-route--dateiservice .swp-order-list__filters > p:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	.swp-route--dateiservice .swp-order-list__header {
		display: flex;
		flex-direction: column;
	}

	.swp-route--dateiservice .swp-order-list__stats {
		width: 100%;
	}

	.swp-route--dateiservice .swp-order-list__stats {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	.swp-route--dateiservice .swp-order-list__stats .swp-tile {
		min-height: 0;
		padding: var(--wp--preset--spacing--40);
	}

	.swp-route--dateiservice .swp-order-list__filters {
		grid-template-columns: 1fr;
		padding: var(--wp--preset--spacing--30);
		border-radius: var(--wp--custom--radius);
	}

	.swp-route--dateiservice .swp-order-list__filters > p:last-child {
		grid-column: auto;
	}

	.swp-route--dateiservice .swp-order-list__filters .swp-button {
		width: 100%;
	}
}

/*
 * Seven columns plus two download buttons do not fit beside the sidebar below
 * 1200px without breaking words, so the order list switches to labelled cards
 * earlier than the other tables.
 */
@media (max-width: 1200px) {
	.swp-route--dateiservice .swp-order-list__table,
	.swp-route--dateiservice .swp-order-list__table tbody,
	.swp-route--dateiservice .swp-order-list__table tr,
	.swp-route--dateiservice .swp-order-list__table td {
		display: block;
		width: 100%;
	}

	.swp-route--dateiservice .swp-order-list__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
	}

	.swp-route--dateiservice .swp-order-list__table tr {
		margin-bottom: var(--wp--preset--spacing--40);
		border: var(--wp--custom--line) solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius);
		background: var(--wp--preset--color--card);
	}

	.swp-route--dateiservice .swp-order-list__table td {
		border-bottom: 0;
	}

	.swp-route--dateiservice .swp-order-list__table td::before {
		content: attr(data-label);
		display: block;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
	}

	.swp-route--dateiservice .swp-order-list__table {
		margin-top: var(--wp--preset--spacing--30);
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.swp-route--dateiservice .swp-order-list__table tr {
		padding: var(--wp--preset--spacing--40);
		box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
	}

	.swp-route--dateiservice .swp-order-list__table th,
	.swp-route--dateiservice .swp-order-list__table td {
		padding: var(--wp--preset--spacing--20) 0;
	}

	.swp-route--dateiservice .swp-order-list__table .swp-download-actions {
		grid-template-columns: 1fr;
	}

	.swp-route--dateiservice .swp-order-list__table .swp-download-actions .swp-button {
		width: 100%;
		min-width: 0;
	}

	.swp-route--dateiservice .swp-order-list__table th:last-child,
	.swp-route--dateiservice .swp-order-list__table td:last-child {
		width: 100%;
		min-width: 0;
	}
}

/* ---------- Customer order detail visual refinement (plan 110) ---------- */

.swp-route--dateiservice .swp-order-detail {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Page head like the design reference: title and status left, price and back button right. */
.swp-route--dateiservice .swp-order-detail__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.swp-route--dateiservice .swp-order-detail__back {
	margin: 0;
}

/* Vehicle and service on their own line below the heading row. */
.swp-route--dateiservice .swp-order-detail__subtitle {
	flex-basis: 100%;
	margin-top: calc(-1 * var(--wp--preset--spacing--20));
}

.swp-route--dateiservice .swp-order-detail__back .swp-button {
	gap: var(--wp--preset--spacing--20);
}

.swp-route--dateiservice .swp-order-detail__back .swp-button::before {
	content: "\2190";
	font-size: 1.2em;
	line-height: 1;
}

.swp-route--dateiservice .swp-order-detail__number,
.swp-route--dateiservice .swp-order-detail__status,
.swp-route--dateiservice .swp-order-detail__price {
	margin: 0;
}

.swp-route--dateiservice .swp-order-detail__price {
	margin-left: auto;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	white-space: nowrap;
}

.swp-route--dateiservice .swp-order-detail__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
	align-items: start;
	gap: var(--wp--preset--spacing--40);
}

.swp-route--dateiservice .swp-order-detail__main,
.swp-route--dateiservice .swp-order-detail__aside {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

.swp-route--dateiservice .swp-order-detail__section {
	min-width: 0;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--card);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
}

.swp-route--dateiservice .swp-order-detail__section > h3:first-child {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-top: 0;
}

.swp-route--dateiservice .swp-order-detail__section > h3:first-child::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

.swp-route--dateiservice .swp-order-detail__section--files > h3:first-child::before,
.swp-route--dateiservice .swp-order-detail__section--documents > h3:first-child::before {
	-webkit-mask-image: url("../icons/document.svg");
	mask-image: url("../icons/document.svg");
}

.swp-route--dateiservice .swp-order-detail__section--support > h3:first-child::before,
.swp-route--dateiservice .swp-order-detail__section--thread > h3:first-child::before,
.swp-route--dateiservice .swp-order-detail__section--tickets > h3:first-child::before {
	-webkit-mask-image: url("../icons/support.svg");
	mask-image: url("../icons/support.svg");
}

.swp-route--dateiservice .swp-order-detail__section--acceptance > h3:first-child::before {
	-webkit-mask-image: url("../icons/download.svg");
	mask-image: url("../icons/download.svg");
}

.swp-route--dateiservice .swp-order-detail__section--specification > h3:first-child::before {
	-webkit-mask-image: url("../icons/sliders.svg");
	mask-image: url("../icons/sliders.svg");
}

.swp-route--dateiservice .swp-order-detail__section--timeline > h3:first-child::before {
	-webkit-mask-image: url("../icons/history.svg");
	mask-image: url("../icons/history.svg");
}

.swp-route--dateiservice .swp-order-detail__section > h3:not(:first-child) {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-route--dateiservice .swp-order-detail__section > :last-child {
	margin-bottom: 0;
}

.swp-route--dateiservice .swp-order-detail__section .swp-files {
	margin-bottom: 0;
}

/* File rows as in the reference table: document icon, name or version, action on the right. */
.swp-route--dateiservice .swp-order-detail__section .swp-files li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) 0;
	overflow-wrap: anywhere;
}

.swp-route--dateiservice .swp-order-detail__section .swp-files li + li {
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-route--dateiservice .swp-order-detail__section .swp-files li:has(.swp-button)::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--muted);
	-webkit-mask: url("../icons/document.svg") center / contain no-repeat;
	mask: url("../icons/document.svg") center / contain no-repeat;
}

.swp-route--dateiservice .swp-order-detail__section .swp-files li .swp-button {
	margin-left: auto;
}

.swp-route--dateiservice .swp-order-detail__section .swp-files .swp-button {
	flex: 0 0 auto;
	min-width: 150px;
}

.swp-route--dateiservice .swp-order-detail__section--specification .swp-summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin: 0;
}

.swp-route--dateiservice .swp-order-detail__section--specification .swp-summary dt {
	color: var(--wp--preset--color--muted);
}

.swp-route--dateiservice .swp-order-detail__section--specification .swp-summary dd {
	min-width: 0;
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.swp-route--dateiservice .swp-order-detail__section--timeline .swp-timeline {
	margin-bottom: 0;
}

.swp-route--dateiservice .swp-order-detail__section form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 1100px) {
	.swp-route--dateiservice .swp-order-detail__layout {
		grid-template-columns: 1fr;
	}

	.swp-route--dateiservice .swp-order-detail__aside {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.swp-route--dateiservice .swp-order-detail__section--tickets {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	.swp-route--dateiservice .swp-order-detail__number {
		flex-basis: 100%;
	}

	.swp-route--dateiservice .swp-order-detail__back,
	.swp-route--dateiservice .swp-order-detail__back .swp-button {
		width: 100%;
	}

	.swp-route--dateiservice .swp-order-detail__aside {
		grid-template-columns: 1fr;
	}

	.swp-route--dateiservice .swp-order-detail__section--tickets {
		grid-column: auto;
	}

	.swp-route--dateiservice .swp-order-detail__section {
		padding: var(--wp--preset--spacing--40);
	}

	.swp-route--dateiservice .swp-order-detail__section .swp-files li {
		align-items: stretch;
		flex-direction: column;
	}

	.swp-route--dateiservice .swp-order-detail__section .swp-files .swp-button {
		width: 100%;
		min-width: 0;
	}

	.swp-route--dateiservice .swp-order-detail__section--specification .swp-summary {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--10);
	}

	.swp-route--dateiservice .swp-order-detail__section--specification .swp-summary dd + dt {
		margin-top: var(--wp--preset--spacing--20);
	}
}

/* ---------- Customer credit purchase visual refinement (plan 111) ---------- */

.swp-route--credits .swp-credit-purchase {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.swp-route--credits .swp-credit-purchase__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.swp-route--credits .swp-credit-purchase__balance {
	flex: 0 0 auto;
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--card);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.swp-route--credits .swp-credit-purchase__packages-form {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.swp-route--credits .swp-credit-package-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.swp-route--credits .swp-credit-package {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
	min-height: 310px;
	padding: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--text);
	background:
		linear-gradient(145deg, rgba(48, 51, 56, 0.3), transparent 58%),
		var(--wp--preset--color--card);
	border: 2px solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
	cursor: pointer;
	transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.swp-route--credits .swp-credit-package:hover {
	border-color: var(--wp--preset--color--text);
	transform: translateY(-2px);
}

.swp-route--credits .swp-credit-package:has(.swp-credit-package__input:checked) {
	border-color: var(--wp--preset--color--text);
	box-shadow: 0 0 0 1px var(--wp--preset--color--text), 0 18px 40px rgba(0, 0, 0, 0.2);
}

/* The native radio stays focusable and announced, but is drawn as the button below. */
.swp-route--credits .swp-credit-package__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.swp-route--credits .swp-credit-package__advantage {
	position: absolute;
	top: calc(-1 * var(--wp--preset--spacing--30));
	left: 50%;
	transform: translateX(-50%);
	padding: 2px var(--wp--preset--spacing--30);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: 999px;
	background: var(--wp--preset--color--card);
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.swp-route--credits .swp-credit-package__choose {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--control-height);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--primary-button);
	color: var(--wp--preset--color--primary-button-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.swp-route--credits .swp-credit-package__choose-active {
	display: none;
}

.swp-route--credits .swp-credit-package__input:checked ~ .swp-credit-package__choose {
	background: transparent;
	color: var(--wp--preset--color--text);
	border: var(--wp--custom--line) solid var(--wp--preset--color--text);
}

.swp-route--credits .swp-credit-package__input:checked ~ .swp-credit-package__choose .swp-credit-package__choose-idle {
	display: none;
}

.swp-route--credits .swp-credit-package__input:checked ~ .swp-credit-package__choose .swp-credit-package__choose-active {
	display: inline;
}

.swp-route--credits .swp-credit-package__input:checked ~ .swp-credit-package__choose .swp-credit-package__choose-active::before {
	content: "\2713\00a0";
}

.swp-route--credits .swp-credit-package__input:focus-visible ~ .swp-credit-package__choose {
	outline: 2px solid var(--wp--preset--color--text);
	outline-offset: 3px;
}

.swp-route--credits .swp-credit-package__heading {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--large);
}

.swp-route--credits .swp-credit-package__icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	background-color: currentColor;
	-webkit-mask: url("../icons/credits.svg") center / 36px no-repeat;
	mask: url("../icons/credits.svg") center / 36px no-repeat;
}

.swp-route--credits .swp-credit-package__prices {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin: 0;
}

.swp-route--credits .swp-credit-package__prices dt {
	color: var(--wp--preset--color--muted);
	overflow-wrap: break-word;
}

/* Long labels such as the list price wrap; the amount stays on one line. */
.swp-route--credits .swp-credit-package__prices dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.swp-route--credits .swp-credit-package__prices dt:last-of-type,
.swp-route--credits .swp-credit-package__prices dd:last-of-type {
	margin-top: var(--wp--preset--spacing--10);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-route--credits .swp-credit-package__prices dd:last-of-type {
	font-size: var(--wp--preset--font-size--large);
}

.swp-route--credits .swp-credit-package__tax-note {
	grid-column: 1 / -1;
	text-align: left !important;
}

.swp-route--credits .swp-credit-package__unit-price {
	align-self: flex-start;
	margin-top: auto;
	white-space: normal;
}

/* Room above the grid for the advantage badges that overlap the card border. */
.swp-route--credits .swp-credit-package-grid {
	padding-top: var(--wp--preset--spacing--30);
	row-gap: var(--wp--preset--spacing--50);
}

.swp-route--credits .swp-credit-purchase__actions {
	display: flex;
	justify-content: flex-end;
	margin: 0;
}

.swp-route--credits .swp-credit-purchase__actions .swp-button {
	min-width: 250px;
}

.swp-route--credits .swp-credit-purchase__notice {
	padding: var(--wp--preset--spacing--40);
	background: rgba(255, 255, 255, 0.025);
	border: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
}

.swp-route--credits .swp-credit-purchase__notice .swp-notice {
	margin: 0;
}

.swp-route--credits .swp-credit-summary__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
	align-items: stretch;
	gap: var(--wp--preset--spacing--40);
}

.swp-route--credits .swp-credit-summary__details,
.swp-route--credits .swp-credit-summary__payment {
	min-width: 0;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--card);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.swp-route--credits .swp-credit-summary__details .swp-summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	/* No column gap: the rule above the total then runs through without a break. */
	gap: var(--wp--preset--spacing--30) 0;
	margin: 0;
}

.swp-route--credits .swp-credit-summary__details .swp-summary dd {
	padding-left: var(--wp--preset--spacing--50);
}

.swp-route--credits .swp-credit-summary__details .swp-summary dt {
	color: var(--wp--preset--color--muted);
}

.swp-route--credits .swp-credit-summary__details .swp-summary dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.swp-route--credits .swp-credit-summary__details .swp-summary dt:nth-last-of-type(3),
.swp-route--credits .swp-credit-summary__details .swp-summary dd:nth-last-of-type(3) {
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

/* The total is the figure the customer pays: largest line of the summary. */
.swp-route--credits .swp-credit-summary__details .swp-summary dt:nth-last-of-type(3) {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

.swp-route--credits .swp-credit-summary__details .swp-summary dd:nth-last-of-type(3) {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.swp-route--credits .swp-credit-summary__details .swp-card__title,
.swp-route--credits .swp-credit-summary__payment .swp-card__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: var(--wp--custom--line) solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.swp-route--credits .swp-credit-summary__payment {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--40);
}

.swp-route--credits .swp-credit-summary__payment .swp-card__title {
	margin-bottom: 0;
}

.swp-route--credits .swp-credit-summary__payment .swp-form {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	/* Consent and the binding button sit at the foot of the card. */
	margin-top: auto;
}

.swp-route--credits .swp-credit-summary__payment .swp-consent,
.swp-route--credits .swp-credit-summary__payment p {
	margin: 0;
}

.swp-route--credits .swp-credit-summary__payment .swp-credit-purchase__actions {
	justify-content: stretch;
}

/* PayPal logo: proportions untouched, free space of about half its height around it. */
.swp-route--credits .swp-credit-summary__paypal {
	padding: var(--wp--preset--spacing--30) 0;
	text-align: center;
}

.swp-route--credits .swp-credit-summary__paypal img {
	display: inline-block;
	width: auto;
	height: 2.25rem;
}

.swp-route--credits .swp-credit-summary__payment .swp-button {
	width: 100%;
}

@media (max-width: 1200px) {
	.swp-route--credits .swp-credit-package-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.swp-route--credits .swp-credit-summary__layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.swp-route--credits .swp-credit-purchase__header {
		align-items: stretch;
		flex-direction: column;
	}

	.swp-route--credits .swp-credit-purchase__balance {
		width: 100%;
	}

	.swp-route--credits .swp-credit-package-grid {
		grid-template-columns: 1fr;
	}

	.swp-route--credits .swp-credit-package {
		min-height: 0;
		padding: var(--wp--preset--spacing--40);
	}

	.swp-route--credits .swp-credit-purchase__actions,
	.swp-route--credits .swp-credit-purchase__actions .swp-button {
		width: 100%;
	}

	.swp-route--credits .swp-credit-summary__details,
	.swp-route--credits .swp-credit-summary__payment {
		padding: var(--wp--preset--spacing--40);
	}

	.swp-route--credits .swp-credit-summary__details .swp-summary {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--10);
	}

	.swp-route--credits .swp-credit-summary__details .swp-summary dd {
		padding-left: 0;
		text-align: left;
	}

	.swp-route--credits .swp-credit-summary__details .swp-summary dd + dt {
		margin-top: var(--wp--preset--spacing--20);
	}

	.swp-route--credits .swp-credit-summary__details .swp-summary dd:nth-last-of-type(3) {
		padding-top: 0;
		border-top: 0;
	}
}

/* ---------- Customer credit history and invoices (plan 112) ---------- */

.swp-credit-history,
.swp-invoice-list {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.swp-credit-history > .swp-card,
.swp-invoice-list__card {
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border-color: var(--wp--preset--color--control-border);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}

.swp-credit-history__balance .swp-card__title,
.swp-credit-history__invoices .swp-card__title,
.swp-invoice-list__card .swp-card__title {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.swp-credit-history__balance .swp-card__title::before,
.swp-credit-history__invoices .swp-card__title::before,
.swp-invoice-list__card .swp-card__title::before {
	content: "";
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	background: currentColor;
}

.swp-credit-history__balance .swp-card__title::before {
	-webkit-mask: url("../icons/credits.svg") center / contain no-repeat;
	mask: url("../icons/credits.svg") center / contain no-repeat;
}

.swp-credit-history__invoices .swp-card__title::before,
.swp-invoice-list__card .swp-card__title::before {
	-webkit-mask: url("../icons/invoice.svg") center / contain no-repeat;
	mask: url("../icons/invoice.svg") center / contain no-repeat;
}

.swp-credit-history__balance .swp-balances {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0;
}

.swp-credit-history__balance .swp-balances dt,
.swp-credit-history__balance .swp-balances dd {
	margin: 0;
	padding-inline: var(--wp--preset--spacing--40);
	background: rgba(255, 255, 255, 0.025);
	border-inline: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-credit-history__balance .swp-balances dt {
	grid-row: 1;
	padding-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius) var(--wp--custom--radius) 0 0;
}

.swp-credit-history__balance .swp-balances dd {
	grid-row: 2;
	padding-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	border-bottom: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: 0 0 var(--wp--custom--radius) var(--wp--custom--radius);
}

.swp-credit-history__balance .swp-balances dt:nth-of-type(1),
.swp-credit-history__balance .swp-balances dd:nth-of-type(1) {
	grid-column: 1;
}

.swp-credit-history__balance .swp-balances dt:nth-of-type(2),
.swp-credit-history__balance .swp-balances dd:nth-of-type(2) {
	grid-column: 2;
}

.swp-credit-history__balance .swp-balances dt:nth-of-type(3),
.swp-credit-history__balance .swp-balances dd:nth-of-type(3) {
	grid-column: 3;
}

.swp-credit-history__balance > p,
.swp-credit-history__invoices > p,
.swp-invoice-list__empty {
	margin-bottom: 0;
}

.swp-credit-history__filter {
	display: grid;
	grid-template-columns: minmax(220px, 380px) auto;
	align-items: end;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-credit-history__filter > p {
	margin: 0;
}

.swp-credit-history__filter .swp-button {
	min-width: 140px;
}

.swp-credit-history__table,
.swp-invoice-list__table {
	margin-top: 0;
}

.swp-credit-history__table th,
.swp-invoice-list__table th {
	padding-block: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.swp-credit-history__table td,
.swp-invoice-list__table td {
	padding-block: var(--wp--preset--spacing--30);
}

.swp-credit-history__table tbody tr,
.swp-invoice-list__table tbody tr {
	transition: background-color 150ms ease;
}

.swp-credit-history__table tbody tr:hover,
.swp-invoice-list__table tbody tr:hover {
	background: rgba(255, 255, 255, 0.025);
}

.swp-credit-history__journal > p:last-child .swp-link,
.swp-credit-history__invoices .swp-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--wp--preset--spacing--30);
	border: var(--wp--custom--line) solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius);
	text-decoration: none;
}

.swp-credit-history__invoices {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 var(--wp--preset--spacing--50);
}

.swp-credit-history__invoices .swp-card__title,
.swp-credit-history__invoices p {
	grid-column: 1;
}

.swp-credit-history__invoices p:last-child {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.swp-invoice-list__empty {
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: 280px;
	place-content: center;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

.swp-invoice-list__empty::before {
	content: "";
	width: 64px;
	height: 64px;
	background: currentColor;
	opacity: 0.65;
	-webkit-mask: url("../icons/invoice.svg") center / contain no-repeat;
	mask: url("../icons/invoice.svg") center / contain no-repeat;
}

@media (max-width: 768px) {
	.swp-credit-history > .swp-card,
	.swp-invoice-list__card {
		padding: var(--wp--preset--spacing--40);
	}

	.swp-credit-history__balance .swp-balances {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.swp-credit-history__balance .swp-balances dt,
	.swp-credit-history__balance .swp-balances dd {
		grid-column: 1 !important;
	}

	.swp-credit-history__balance .swp-balances dt:nth-of-type(1) {
		grid-row: 1;
	}

	.swp-credit-history__balance .swp-balances dd:nth-of-type(1) {
		grid-row: 2;
	}

	.swp-credit-history__balance .swp-balances dt:nth-of-type(2) {
		grid-row: 3;
	}

	.swp-credit-history__balance .swp-balances dd:nth-of-type(2) {
		grid-row: 4;
	}

	.swp-credit-history__balance .swp-balances dt:nth-of-type(3) {
		grid-row: 5;
	}

	.swp-credit-history__balance .swp-balances dd:nth-of-type(3) {
		grid-row: 6;
	}

	.swp-credit-history__balance .swp-balances dt:nth-of-type(n + 2) {
		margin-top: var(--wp--preset--spacing--20);
	}

	.swp-credit-history__filter,
	.swp-credit-history__invoices {
		grid-template-columns: minmax(0, 1fr);
	}

	.swp-credit-history__filter .swp-button,
	.swp-credit-history__balance .swp-button,
	.swp-credit-history__invoices .swp-link {
		width: 100%;
	}

	.swp-credit-history__invoices p:last-child {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ---------- Customer support overview and ticket thread (plan 113) ---------- */

.swp-support-overview {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
}

.swp-support-overview > .swp-card,
.swp-support-ticket__card {
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border-color: var(--wp--preset--color--control-border);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}

.swp-support-list h2,
.swp-support-overview__new .swp-card__title,
.swp-support-ticket__conversation > h3 {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.swp-support-list h2::before,
.swp-support-overview__new .swp-card__title::before,
.swp-support-ticket__conversation > h3::before {
	content: "";
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: url("../icons/support.svg") center / contain no-repeat;
	mask: url("../icons/support.svg") center / contain no-repeat;
}

.swp-support-list .swp-table {
	margin-top: var(--wp--preset--spacing--40);
}

.swp-support-list .swp-table th {
	padding-block: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.swp-support-list .swp-table td {
	padding-block: var(--wp--preset--spacing--30);
}

.swp-support-list .swp-table tbody tr {
	transition: background-color 150ms ease;
}

.swp-support-list .swp-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.025);
}

.swp-support-list > p:last-child {
	display: grid;
	min-height: 150px;
	margin-bottom: 0;
	place-items: center;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

.swp-support-new-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}

.swp-support-new-form > p {
	margin: 0;
}

.swp-support-new-form > p:has(#swp-ticket-betreff),
.swp-support-new-form > p:has(#swp-ticket-text),
.swp-support-new-form > p:has(#swp-ticket-dateien),
.swp-support-new-form > p:last-child {
	grid-column: 1 / -1;
}

.swp-support-new-form > p:last-child {
	display: flex;
	justify-content: flex-end;
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-support-new-form > p:last-child .swp-button {
	min-width: 220px;
}

.swp-support-ticket {
	display: grid;
}

.swp-support-ticket__card {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.swp-support-ticket__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-support-ticket__header > .swp-notice {
	grid-column: 1 / -1;
}

.swp-support-ticket__header > h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.swp-support-ticket__meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.swp-support-ticket__meta p {
	margin: 0;
}

.swp-support-ticket__conversation {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.swp-support-ticket__conversation > h3,
.swp-support-ticket__conversation .swp-thread {
	margin: 0;
}

.swp-support-ticket__conversation .swp-thread {
	gap: var(--wp--preset--spacing--30);
}

.swp-support-ticket__conversation .swp-thread__message {
	width: min(75%, 760px);
	max-width: none;
	padding: var(--wp--preset--spacing--40);
	background: rgba(255, 255, 255, 0.025);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.swp-support-ticket__conversation .swp-thread__message--customer {
	background: var(--wp--preset--color--sidebar);
}

.swp-support-ticket__reply {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	background: rgba(255, 255, 255, 0.025);
	border: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
}

.swp-support-ticket__reply > p {
	margin: 0;
}

.swp-support-ticket__reply > p:has(#swp-ticket-antwort) {
	grid-column: 1 / -1;
}

.swp-support-ticket__reply > p:last-child .swp-button {
	min-width: 180px;
}

.swp-support-ticket__close,
.swp-support-ticket__reopen {
	display: flex;
	justify-content: flex-end;
	margin-top: calc(-1 * var(--wp--preset--spacing--30));
}

.swp-support-ticket__close p,
.swp-support-ticket__reopen p {
	margin: 0;
}

@media (max-width: 768px) {
	.swp-support-overview > .swp-card,
	.swp-support-ticket__card {
		padding: var(--wp--preset--spacing--40);
	}

	.swp-support-new-form,
	.swp-support-ticket__header,
	.swp-support-ticket__reply {
		grid-template-columns: minmax(0, 1fr);
	}

	.swp-support-new-form > p,
	.swp-support-new-form > p:last-child .swp-button,
	.swp-support-ticket__reply > p,
	.swp-support-ticket__reply > p:last-child .swp-button,
	.swp-support-ticket__close .swp-button,
	.swp-support-ticket__reopen .swp-button {
		width: 100%;
	}

	.swp-support-new-form > p,
	.swp-support-ticket__reply > p:has(#swp-ticket-antwort) {
		grid-column: 1;
	}

	.swp-support-ticket__meta {
		justify-content: flex-start;
	}

	.swp-support-ticket__conversation .swp-thread__message {
		width: 100%;
	}

	.swp-support-ticket__close,
	.swp-support-ticket__reopen {
		margin-top: 0;
	}
}

/* ---------- Customer account (plan 114) ---------- */

.swp-account-page,
.swp-account-grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.swp-account-grid {
	grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.8fr);
	align-items: start;
}

.swp-account-notice,
.swp-account-card {
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border-color: var(--wp--preset--color--control-border);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}

.swp-account-notice {
	margin-bottom: var(--wp--preset--spacing--40);
}

.swp-account-notice .swp-notice {
	margin: 0;
}

.swp-account-column {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-content: start;
	min-width: 0;
}

.swp-account-card > h2 {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-top: 0;
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-account-card > h2::before {
	content: "";
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	background: currentColor;
	-webkit-mask: url("../icons/account.svg") center / contain no-repeat;
	mask: url("../icons/account.svg") center / contain no-repeat;
}

.swp-account-card--data > h2::before,
.swp-account-card--documents > h2::before {
	-webkit-mask-image: url("../icons/document.svg");
	mask-image: url("../icons/document.svg");
}

.swp-account-card--security > h2::before {
	-webkit-mask-image: url("../icons/lock.svg");
	mask-image: url("../icons/lock.svg");
}

.swp-account-card--closure > h2::before {
	-webkit-mask-image: url("../icons/shield.svg");
	mask-image: url("../icons/shield.svg");
}

.swp-account-card--devices > h2::before {
	-webkit-mask-image: url("../icons/sliders.svg");
	mask-image: url("../icons/sliders.svg");
}

.swp-account-data-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.swp-account-data-form > p,
.swp-account-contacts-form > p,
.swp-account-password-form > p,
.swp-account-closure-form > p {
	margin: 0;
}

.swp-account-data-form > .swp-field:nth-of-type(1),
.swp-account-data-form > .swp-field:nth-of-type(3),
.swp-account-data-form > .swp-field:nth-of-type(6),
.swp-account-data-form > .swp-field:nth-of-type(9),
.swp-account-data-form > p:last-child {
	grid-column: 1 / -1;
}

.swp-account-data-form > p:last-child,
.swp-account-contacts-form > p:last-child,
.swp-account-password-form > p:last-child,
.swp-account-closure-form > p:last-child,
.swp-account-devices-form > p:last-child {
	display: flex;
	justify-content: flex-end;
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-account-data-form > p:last-child .swp-button,
.swp-account-contacts-form > p:last-child .swp-button,
.swp-account-password-form > p:last-child .swp-button,
.swp-account-closure-form > p:last-child .swp-button,
.swp-account-devices-form > p:last-child .swp-button {
	min-width: 190px;
}

/* Read devices: one box per vendor, the boxes flow in columns. */
.swp-account-devices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}

.swp-account-devices__vendor {
	display: grid;
	gap: 6px;
	align-content: start;
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
}

.swp-account-devices__vendor legend {
	padding: 0 6px;
	font-weight: 600;
}

.swp-account-devices__item {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.swp-account-devices__item input {
	flex: none;
	margin: 0;
}

.swp-account-data-meta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-account-data-meta .swp-summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-column: 1 / -1;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin: 0;
}

.swp-account-data-meta .swp-summary dt {
	grid-row: 1;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.swp-account-data-meta .swp-summary dd {
	grid-row: 2;
	margin: 0;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.swp-account-data-meta .swp-notice,
.swp-account-data-meta > p:last-child {
	margin: 0;
}

.swp-account-data-meta .swp-notice {
	color: var(--wp--preset--color--muted);
}

.swp-account-contacts-form,
.swp-account-password-form,
.swp-account-closure-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.swp-account-card--contacts > p,
.swp-account-card--closure > p {
	color: var(--wp--preset--color--muted);
}

.swp-account-card--contacts .swp-consent,
.swp-account-card--closure .swp-consent {
	padding: var(--wp--preset--spacing--30);
	background: rgba(255, 255, 255, 0.025);
	border: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
}

.swp-account-card--documents > ul {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.swp-account-card--documents > ul > li {
	padding: var(--wp--preset--spacing--30);
	background: rgba(255, 255, 255, 0.025);
	border: var(--wp--custom--line) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	line-height: 1.6;
}

.swp-account-card--documents > h3 {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-account-card--documents .swp-link {
	display: inline-flex;
	margin-left: var(--wp--preset--spacing--20);
}

.swp-account-card--closure .swp-button--secondary {
	border-color: color-mix(in srgb, var(--wp--preset--color--danger) 55%, transparent);
}

@media (max-width: 1180px) {
	.swp-account-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 768px) {
	.swp-account-notice,
	.swp-account-card {
		padding: var(--wp--preset--spacing--40);
	}

	.swp-account-data-form,
	.swp-account-data-meta,
	.swp-account-data-meta .swp-summary {
		grid-template-columns: minmax(0, 1fr);
	}

	.swp-account-data-form > .swp-field,
	.swp-account-data-form > p:last-child,
	.swp-account-data-meta .swp-summary,
	.swp-account-data-meta .swp-summary dt,
	.swp-account-data-meta .swp-summary dd {
		grid-column: 1;
		grid-row: auto;
	}

	.swp-account-data-meta .swp-summary {
		grid-template-columns: minmax(0, 1fr) minmax(0, auto);
	}

	.swp-account-data-meta .swp-summary dt {
		grid-column: 1;
	}

	.swp-account-data-meta .swp-summary dd {
		grid-column: 2;
		text-align: right;
	}

	.swp-account-data-form > p:last-child .swp-button,
	.swp-account-contacts-form > p:last-child .swp-button,
	.swp-account-password-form > p:last-child .swp-button,
	.swp-account-closure-form > p:last-child .swp-button,
	.swp-account-data-meta > p:last-child .swp-link {
		width: 100%;
	}

	.swp-account-data-meta .swp-notice,
	.swp-account-data-meta > p:last-child {
		grid-column: 1;
	}
}

/* A table wider than its card scrolls inside the card, not the page. */
.swp-table-scroll {
	max-width: 100%;
	overflow-x: auto;
}

.swp-account-consents {
	margin-top: var(--wp--preset--spacing--30);
}

.swp-account-consents summary {
	cursor: pointer;
}

/* Second pair of downloads for the transmission file below the engine pair. */
.swp-download-actions--tcu {
	margin-top: var(--wp--preset--spacing--20);
}

/* ---------- DTC finder on the dashboard ---------- */

.swp-route--uebersicht .swp-dashboard__dtc {
	gap: var(--wp--preset--spacing--30);
	border-color: var(--wp--preset--color--control-border);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
	/* The page returns to the card after a lookup; keep it clear of the sticky header. */
	scroll-margin-top: var(--wp--preset--spacing--70);
}

.swp-dashboard__dtc h3,
.swp-dashboard__dtc h4,
.swp-dashboard__dtc p {
	margin: 0;
}

.swp-route--uebersicht .swp-dashboard__dtc h3 {
	font-size: var(--wp--preset--font-size--large);
}

.swp-dtc__form {
	display: grid;
	grid-template-columns: minmax(0, 20rem) auto;
	align-items: end;
	justify-content: start;
	gap: var(--wp--preset--spacing--30);
}

/* 16px keeps phones from zooming into the field. */
.swp-content .swp-dtc__form input {
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.swp-content .swp-dtc__form input::placeholder {
	letter-spacing: 0;
	text-transform: none;
}

.swp-dtc__result {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-dtc__result h4 {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.swp-dtc__text {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.swp-dtc__variants {
	list-style: none;
	margin: 0;
	padding: 0;
}

.swp-dtc__variants li {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: var(--wp--custom--line) solid var(--wp--preset--color--border);
}

.swp-dtc__variants li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.swp-dtc__ecus {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	overflow-wrap: anywhere;
}

@media (max-width: 768px) {
	.swp-dtc__form {
		grid-template-columns: minmax(0, 1fr);
	}

	.swp-dtc__form .swp-button {
		width: 100%;
	}
}