/**
 * DTF Order Assistant - frontend wizard styles.
 * Neutral, professional defaults using CSS custom properties so themes can
 * override easily. Scoped under .dtf-wizard to avoid global pollution.
 */
.dtf-wizard {
	/* Friendly, warm palette — feels like a guided, non-binding buying flow
	   rather than a cold form. Violet primary + coral warmth + friendly green. */
	--dtf-color-accent: #7b5cff;
	--dtf-color-accent-dark: #6446e6;
	--dtf-color-accent-soft: #f1edff;
	--dtf-color-warm: #ff7a59;
	--dtf-color-warm-soft: #fff1ec;
	--dtf-color-border: #e9e6f2;
	--dtf-color-bg: #ffffff;
	--dtf-color-surface: #fbfaff;
	--dtf-color-muted: #6f6b82;
	--dtf-color-text: #2a2440;
	--dtf-color-error: #e03131;
	--dtf-color-success: #12b886;
	--dtf-color-success-soft: #e6f8f1;
	--dtf-radius: 16px;
	--dtf-radius-sm: 10px;
	--dtf-gap: 18px;
	--dtf-shadow-sm: 0 1px 2px rgba( 42, 36, 64, 0.06 ), 0 1px 3px rgba( 42, 36, 64, 0.05 );
	--dtf-shadow-md: 0 6px 20px rgba( 42, 36, 64, 0.10 );
	--dtf-shadow-lg: 0 16px 44px rgba( 42, 36, 64, 0.16 );
	--dtf-ease: cubic-bezier( 0.4, 0, 0.2, 1 );

	max-width: 760px;
	margin: 0 auto;
	padding: clamp( 16px, 4vw, 32px );
	color: var(--dtf-color-text);
	font-size: 16px;
	line-height: 1.5;
	background: linear-gradient( 180deg, #ffffff 0%, var(--dtf-color-surface) 100% );
	border: 1px solid var(--dtf-color-border);
	border-radius: calc( var(--dtf-radius) + 6px );
	box-shadow: var(--dtf-shadow-md);
	box-sizing: border-box;
	animation: dtf-wizard-in 0.5s var(--dtf-ease) both;
}
.dtf-wizard *,
.dtf-wizard *::before,
.dtf-wizard *::after { box-sizing: inherit; }

/* Reassuring intro above the wizard steps */
.dtf-wizard__intro {
	margin: 0 0 18px;
	padding: 14px 18px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--dtf-color-text);
	background: linear-gradient( 135deg, var(--dtf-color-accent-soft) 0%, var(--dtf-color-warm-soft) 100% );
	border: 1px solid var(--dtf-color-border);
	border-radius: var(--dtf-radius);
}

/* Progress */
.dtf-wizard__progress {
	height: 10px;
	background: #efecf9;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 8px;
}
.dtf-wizard__progress-bar {
	height: 100%;
	background: linear-gradient( 90deg, var(--dtf-color-accent) 0%, var(--dtf-color-warm) 100% );
	border-radius: 999px;
	transition: width 0.45s var(--dtf-ease);
}
.dtf-wizard__progress-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--dtf-color-muted);
	margin: 0 0 var(--dtf-gap);
}

/* Steps */
.dtf-wizard__step {
	border: 0;
	padding: 0;
	margin: 0 0 var(--dtf-gap);
	min-width: 0;
}
.dtf-wizard__question {
	font-size: 1.25rem;
	font-weight: 700;
	padding: 0;
	margin: 0 0 12px;
}
.dtf-wizard__question:focus { outline: none; }
.dtf-wizard__question-sm { display: block; font-weight: 600; margin: 12px 0 6px; }
.dtf-wizard__hint {
	display: block;
	font-size: 0.85rem;
	color: var(--dtf-color-muted);
	font-weight: 400;
	margin-top: 4px;
}

/* Cards */
.dtf-wizard__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
@media ( min-width: 480px ) {
	.dtf-wizard__cards { grid-template-columns: 1fr 1fr; }
	.dtf-wizard__cards--compact { grid-template-columns: repeat( 3, 1fr ); }
}
.dtf-wizard__card {
	position: relative;
	display: block;
	padding: 16px 18px;
	border: 1.5px solid var(--dtf-color-border);
	border-radius: var(--dtf-radius);
	background: var(--dtf-color-bg);
	box-shadow: var(--dtf-shadow-sm);
	cursor: pointer;
	transition: border-color 0.18s var(--dtf-ease), box-shadow 0.18s var(--dtf-ease),
		transform 0.18s var(--dtf-ease), background 0.18s var(--dtf-ease);
}
.dtf-wizard__card:hover {
	border-color: var(--dtf-color-accent);
	box-shadow: var(--dtf-shadow-md);
	transform: translateY( -2px );
}
.dtf-wizard__card input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.dtf-wizard__card:has( input:checked ) {
	border-color: var(--dtf-color-accent);
	background: var(--dtf-color-accent-soft);
	box-shadow: 0 0 0 3px rgba( 123, 92, 255, 0.18 ), var(--dtf-shadow-sm);
}
.dtf-wizard__card:has( input:focus-visible ) {
	outline: 3px solid var(--dtf-color-accent);
	outline-offset: 2px;
}
/* Animated "selected" check badge — makes each choice feel tangible. */
.dtf-wizard__card::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--dtf-color-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	opacity: 0;
	transform: scale( 0.4 );
	transition: opacity 0.2s var(--dtf-ease), transform 0.25s var(--dtf-ease);
	pointer-events: none;
}
.dtf-wizard__card:has( input:checked )::after {
	content: "✓";
	opacity: 1;
	transform: scale( 1 );
}
.dtf-wizard__card-title { display: block; font-weight: 600; padding-right: 26px; }
.dtf-wizard__card-desc { display: block; font-size: 0.85rem; color: var(--dtf-color-muted); margin-top: 4px; }
/* A card explicitly hidden via the [hidden] attribute (e.g. print positions
   filtered by product type) must actually hide — the base rule sets
   display:block, which would otherwise override the UA [hidden] default. */
.dtf-wizard__card[hidden] { display: none !important; }

/* Featured product card (e.g. "Eigene Textilien mitbringen" special service) */
.dtf-wizard__card--featured {
	border-color: var(--dtf-color-accent);
	background: linear-gradient( 180deg, var(--dtf-color-accent-soft) 0%, var(--dtf-color-bg) 60% );
}
.dtf-wizard__card--featured:has( input:checked ) {
	box-shadow: 0 0 0 3px rgba( 123, 92, 255, 0.22 );
}
.dtf-wizard__card-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	background: var(--dtf-color-accent);
	border-radius: 999px;
	vertical-align: middle;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Fields */
.dtf-wizard__field { margin: 12px 0; }
.dtf-wizard__field label { display: block; font-weight: 600; margin-bottom: 4px; }
.dtf-wizard__field input[type="text"],
.dtf-wizard__field input[type="email"],
.dtf-wizard__field input[type="tel"],
.dtf-wizard__field input[type="number"],
.dtf-wizard__field input[type="date"],
.dtf-wizard__field textarea,
.dtf-wizard__sizes input {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--dtf-color-border);
	border-radius: var(--dtf-radius-sm);
	font: inherit;
	color: inherit;
	background: #fff;
	transition: border-color 0.16s var(--dtf-ease), box-shadow 0.16s var(--dtf-ease);
}
.dtf-wizard__field input:focus-visible,
.dtf-wizard__field textarea:focus-visible,
.dtf-wizard__sizes input:focus-visible {
	outline: none;
	border-color: var(--dtf-color-accent);
	box-shadow: 0 0 0 3px rgba( 123, 92, 255, 0.18 );
}

/* Sizes grid */
.dtf-wizard__sizes {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 10px;
	margin-top: 12px;
}
.dtf-wizard__size label { font-size: 0.85rem; margin-bottom: 2px; }

/* Transfer formats use wider labels (e.g. "A4 (bis ca. 21 × 30 cm)") */
.dtf-wizard__sizes--transfer { grid-template-columns: repeat( 2, 1fr ); }
@media (max-width: 600px) { .dtf-wizard__sizes--transfer { grid-template-columns: 1fr; } }
.dtf-wizard__size--transfer label { font-size: 0.8rem; line-height: 1.3; }

/* Visually hidden but available to screen readers */
.dtf-wizard__sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Consent + express */
.dtf-wizard__consent label,
.dtf-wizard__express label { font-weight: 400; display: inline-flex; gap: 8px; align-items: flex-start; margin-right: 14px; }
.dtf-wizard__express { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dtf-color-border); }

/* Rights confirmation: the label contains an inline link, so flex would
   break the sentence into separate columns. Use a flowing text block with
   an absolutely positioned checkbox instead. */
.dtf-wizard__rights label {
	display: block;
	position: relative;
	padding-left: 28px;
	margin-right: 0;
}
.dtf-wizard__rights label input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 0.2em;
	margin: 0;
}
.dtf-wizard__rights a { text-decoration: underline; }

/* Customer type (private vs. B2B) */
.dtf-wizard__customer-type { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--dtf-color-border); }
.dtf-wizard__customer-type .dtf-wizard__question-sm { display: block; margin-bottom: 8px; font-weight: 600; }

/* Upload */
.dtf-wizard__upload { margin-top: 16px; }
.dtf-wizard__dropzone {
	border: 2px dashed var(--dtf-color-border);
	border-radius: var(--dtf-radius);
	padding: 20px;
	text-align: center;
	background: #fafbfc;
}
.dtf-wizard__dropzone.is-dragover { border-color: var(--dtf-color-accent); background: #eef4ff; }
.dtf-wizard__dropzone:focus-visible { outline: 3px solid var(--dtf-color-accent); outline-offset: 2px; }
.dtf-wizard__upload-hint { color: var(--dtf-color-error); font-size: 0.85rem; margin: 8px 0 0; min-height: 1em; }
.dtf-wizard__filelist { list-style: none; margin: 12px 0 0; padding: 0; }
.dtf-wizard__fileitem {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--dtf-color-border);
	border-radius: 8px;
	margin-bottom: 6px;
	font-size: 0.9rem;
}
.dtf-wizard__filename { font-weight: 600; }
.dtf-wizard__filemeta { color: var(--dtf-color-muted); }
.dtf-wizard__filestatus { color: var(--dtf-color-success); }
.dtf-wizard__fileremove {
	margin-left: auto;
	border: 0;
	background: none;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	color: var(--dtf-color-muted);
}
.dtf-wizard__fileremove:focus-visible { outline: 2px solid var(--dtf-color-accent); }

/* Summary */
.dtf-wizard__summary-list { margin: 0; }
.dtf-wizard__summary-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--dtf-color-border);
}
.dtf-wizard__summary-row dt { font-weight: 600; margin: 0; }
.dtf-wizard__summary-row dd { margin: 0; text-align: right; color: var(--dtf-color-muted); }

/* Errors */
.dtf-wizard__error { color: var(--dtf-color-error); font-size: 0.85rem; margin: 6px 0 0; min-height: 1em; }
.dtf-wizard__error--global { font-size: 1rem; margin-top: 12px; }

/* Success */
.dtf-wizard__success {
	padding: 20px;
	border: 2px solid var(--dtf-color-success);
	border-radius: var(--dtf-radius);
	background: #f0faf5;
}
.dtf-wizard__reference { font-weight: 600; margin-top: 8px; }

/* Navigation */
.dtf-wizard__nav { display: flex; gap: 12px; margin-top: 24px; }
/* The nav uses display:flex, which would override the UA [hidden] default and
   keep the Back/Submit buttons visible after a successful submission. Force it
   hidden so the success screen stands alone (no way back after sending). */
.dtf-wizard__nav[hidden] { display: none !important; }
/* Individual nav buttons use display:inline-flex (for icon+label alignment),
   which would otherwise override the UA [hidden] default and keep Back/Submit
   visible on the wrong steps. Force hidden buttons to actually hide. */
.dtf-wizard__button[hidden] { display: none !important; }
.dtf-wizard__button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 2px solid var(--dtf-color-accent);
	background: var(--dtf-color-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
	padding: 13px 24px;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: var(--dtf-shadow-sm);
	transition: background 0.18s var(--dtf-ease), transform 0.12s var(--dtf-ease),
		box-shadow 0.18s var(--dtf-ease), border-color 0.18s var(--dtf-ease);
}
/* Inline button icons inherit the text color and nudge gently on hover. */
.dtf-wizard__button-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.dtf-wizard__button[data-nav="next"]:hover .dtf-wizard__button-icon,
.dtf-wizard__button[data-nav="submit"]:hover .dtf-wizard__button-icon {
	transform: translateX( 2px );
	transition: transform 0.18s var(--dtf-ease);
}
.dtf-wizard__button[data-nav="prev"]:hover .dtf-wizard__button-icon {
	transform: translateX( -2px );
	transition: transform 0.18s var(--dtf-ease);
}
.dtf-wizard__button:hover { background: var(--dtf-color-accent-dark); transform: translateY( -1px ); box-shadow: var(--dtf-shadow-md); }
.dtf-wizard__button:active { transform: translateY( 0 ) scale( 0.98 ); }
.dtf-wizard__button:focus-visible { outline: 3px solid var(--dtf-color-text); outline-offset: 2px; }
.dtf-wizard__button[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.dtf-wizard__button--ghost { background: transparent; color: var(--dtf-color-accent); box-shadow: none; }
.dtf-wizard__button--ghost:hover { background: var(--dtf-color-accent-soft); }
/* Primary CTA: warm violet→coral gradient makes the "request offer" step feel
   inviting and purchase-like (still non-binding wording in the copy). */
.dtf-wizard__button--primary {
	margin-left: auto;
	border-color: transparent;
	background: linear-gradient( 135deg, var(--dtf-color-accent) 0%, var(--dtf-color-warm) 100% );
	box-shadow: 0 6px 18px rgba( 123, 92, 255, 0.30 );
}
.dtf-wizard__button--primary:hover {
	background: linear-gradient( 135deg, var(--dtf-color-accent-dark) 0%, #ff6a45 100% );
}
.dtf-wizard__nav .dtf-wizard__button[data-nav="next"] { margin-left: auto; }

/* Honeypot - visually hidden but focusable off-screen */
.dtf-wizard__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Selected-package banner inside the wizard */
.dtf-wizard__package {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--dtf-color-accent-soft);
	border: 1px solid var(--dtf-color-border);
	color: var(--dtf-color-text);
	border-radius: var(--dtf-radius);
	padding: 10px 14px;
	margin: 0 0 var(--dtf-gap);
	font-size: 15px;
}
.dtf-wizard__package[hidden] { display: none; }
.dtf-wizard__package-label { font-weight: 600; flex: 1; }
.dtf-wizard__package-clear {
	border: 0;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--dtf-color-muted);
}
.dtf-wizard__package-clear:hover { color: var(--dtf-color-error); }

/* Non-binding surcharge hint notes inside wizard steps */
.dtf-wizard__note {
	font-size: 0.85rem;
	color: #8a6d00;
	background: #fff8e1;
	border: 1px solid #ffe6a3;
	border-radius: 8px;
	padding: 8px 12px;
	margin: 10px 0 0;
}
.dtf-wizard__note::before { content: "ⓘ "; font-weight: 700; }

/* Optional advanced options (quality step) */
.dtf-wizard__details {
	margin: 12px 0 0;
	border: 1px solid var(--dtf-color-border, #d8dee6);
	border-radius: 8px;
	background: #fafbfc;
}
.dtf-wizard__details > summary {
	cursor: pointer;
	padding: 10px 12px;
	font-size: 0.9rem;
	font-weight: 600;
	list-style: revert;
}
.dtf-wizard__details[open] > summary {
	border-bottom: 1px solid var(--dtf-color-border, #d8dee6);
}
.dtf-wizard__details-body {
	padding: 12px;
}
.dtf-wizard__details-body select,
.dtf-wizard__details-body input[type="text"] {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Upload info + preparation guide (artwork step) */
.dtf-wizard__upload-info {
	margin: 0 0 10px;
	padding: 10px 12px;
	background: #f3f8ff;
	border: 1px solid #cfe0ff;
	border-radius: 8px;
	font-size: 0.85rem;
	line-height: 1.5;
}
.dtf-wizard__upload-info p { margin: 0; }
.dtf-wizard__upload-formats { font-weight: 500; }
.dtf-wizard__upload-limits { color: var(--dtf-color-muted); }
.dtf-wizard__upload-tip { color: var(--dtf-color-muted); }
.dtf-wizard__guide { margin-top: 12px; }
.dtf-wizard__guide-list {
	margin: 0 0 8px;
	padding-left: 1.1rem;
}
.dtf-wizard__guide-list li { margin: 4px 0; font-size: 0.88rem; line-height: 1.5; }

/* Live price estimate box */
.dtf-wizard__estimate {
	display: block;
	background: var(--dtf-color-success-soft);
	border: 1px solid #a5e8cf;
	border-radius: var(--dtf-radius);
	padding: 14px 16px;
	margin: 0 0 var(--dtf-gap);
}
.dtf-wizard__estimate[hidden] { display: none; }
.dtf-wizard__estimate-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.dtf-wizard__estimate-label { font-size: 14px; color: var(--dtf-color-muted); }
.dtf-wizard__estimate-value { font-size: 1.35rem; font-weight: 800; color: var(--dtf-color-success); }
.dtf-wizard__estimate-note { display: block; font-size: 12px; color: var(--dtf-color-muted); margin-top: 4px; }

/* Itemized breakdown (FR-15) */
.dtf-wizard__estimate-breakdown { margin-top: 8px; }
.dtf-wizard__estimate-breakdown[hidden] { display: none; }
.dtf-wizard__breakdown-list { margin: 0; }
.dtf-wizard__breakdown-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 0;
	font-size: 0.85rem;
	border-bottom: 1px solid rgba(0,0,0,.06);
}
.dtf-wizard__breakdown-row:last-child { border-bottom: none; }
.dtf-wizard__breakdown-row dt { font-weight: 500; margin: 0; color: var(--dtf-color-text); }
.dtf-wizard__breakdown-row dd { margin: 0; text-align: right; color: var(--dtf-color-muted); font-variant-numeric: tabular-nums; }
.dtf-wizard__estimate-toggle {
	display: inline-block;
	margin-top: 6px;
	border: none;
	background: none;
	color: var(--dtf-color-accent);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}
.dtf-wizard__estimate-toggle:focus-visible { outline: 2px solid var(--dtf-color-accent); outline-offset: 2px; }
@media (min-width: 768px) {
	/* Desktop: breakdown always visible, no toggle needed */
	.dtf-wizard__estimate-toggle { display: none !important; }
	.dtf-wizard__estimate-breakdown { display: block !important; }
}

/* Selection summary (FR-3.7) */
.dtf-wizard__selection-summary {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--dtf-color-accent-soft);
	border: 1px solid var(--dtf-color-border);
	border-radius: var(--dtf-radius);
	padding: 10px 14px;
	margin: 0 0 var(--dtf-gap);
	font-size: 14px;
}
.dtf-wizard__selection-summary[hidden] { display: none; }
.dtf-wizard__selection-text { flex: 1; font-weight: 600; }
.dtf-wizard__selection-edit {
	border: 1px solid var(--dtf-color-accent);
	background: transparent;
	color: var(--dtf-color-accent);
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
}
.dtf-wizard__selection-edit:hover { background: #eef4ff; }
.dtf-wizard__selection-edit:focus-visible { outline: 2px solid var(--dtf-color-accent); outline-offset: 2px; }

/* Visual position picker (FR-11) */
.dtf-wizard__position-visual {
	max-width: 180px;
	margin: 0 auto 16px;
}
.dtf-wizard__position-visual svg {
	width: 100%;
	height: auto;
	display: block;
}
/* Motif-position hotspots on the product illustration (FR-11). Hidden by
   default; shown subtly for available positions, highlighted on hover/focus
   of the matching card, and strongly when the position is selected. */
.dtf-wizard__position-visual [data-position] {
	fill: rgba( 31, 111, 235, 0.14 );
	stroke: var(--dtf-color-accent);
	stroke-width: 1.4;
	stroke-dasharray: 4 3;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, fill 0.15s ease;
}
.dtf-wizard__position-visual [data-position].is-available {
	opacity: 0.4;
	pointer-events: auto;
	cursor: pointer;
}
.dtf-wizard__position-visual [data-position].is-hover {
	opacity: 0.85;
	fill: rgba( 31, 111, 235, 0.28 );
}
.dtf-wizard__position-visual [data-position].is-active {
	opacity: 1;
	fill: rgba( 31, 111, 235, 0.34 );
	stroke-dasharray: none;
	stroke-width: 2;
}
.dtf-wizard__position-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
@media (min-width: 480px) {
	.dtf-wizard__position-cards { grid-template-columns: 1fr 1fr; }
}
.dtf-wizard__position-card {
	position: relative;
}
/* Position price hint */
.dtf-wizard__position-price,
.dtf-wizard__quality-price {
	display: block;
	font-size: 0.78rem;
	color: var(--dtf-color-accent);
	font-weight: 600;
	margin-top: 4px;
}
/* "Individuelle Position" highlight (FR-11.3) */
.dtf-wizard__position-card[data-pos-key="multiple"] {
	border-color: var(--dtf-color-accent);
	background: linear-gradient(180deg, #f5f8ff 0%, var(--dtf-color-bg) 60%);
}

/* Trust area (FR-4.1) */
.dtf-wizard__trust {
	margin: 0 0 12px;
	padding: 10px 14px;
	background: #f0faf5;
	border: 1px solid #b7e4cd;
	border-radius: 10px;
}
.dtf-wizard__trust-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}
.dtf-wizard__trust-list li {
	font-size: 0.85rem;
	line-height: 1.5;
}
.dtf-wizard__trust-list li::before {
	content: "✓ ";
	color: var(--dtf-color-success);
	font-weight: 700;
}

/* Process transparency (FR-4.2) */
.dtf-wizard__process { margin-bottom: 12px; }
.dtf-wizard__process-list {
	margin: 0;
	padding-left: 1.4rem;
}
.dtf-wizard__process-list li {
	margin: 6px 0;
	font-size: 0.9rem;
}

/* Draft restore notice (FR-19) */
.dtf-wizard__draft-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 10px 14px;
	background: #fff8e1;
	border: 1px solid #ffe6a3;
	border-radius: 10px;
	font-size: 0.85rem;
}
.dtf-wizard__draft-discard {
	border: 1px solid #ccc;
	background: transparent;
	font-size: 0.8rem;
	padding: 3px 8px;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
}
.dtf-wizard__draft-discard:hover { background: #f5f5f5; }

/* Own textile details */
.dtf-wizard__own-textile-details {
	margin-top: 12px;
	padding: 12px;
	border: 1px solid var(--dtf-color-border);
	border-radius: 8px;
	background: #fafbfc;
}
.dtf-wizard__own-textile-details label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 12px;
	font-weight: 400;
}

/* ─── Responsive & a11y (FR-21, FR-22) ──────────────────────────── */

/* Minimum touch targets (FR-21.1) */
.dtf-wizard__card,
.dtf-wizard__button,
.dtf-wizard__dropzone,
.dtf-wizard__selection-edit,
.dtf-wizard__estimate-toggle,
.dtf-wizard__fileremove {
	min-height: 44px;
	min-width: 44px;
}

/* Reduced motion (FR-22) */
@media (prefers-reduced-motion: reduce) {
	.dtf-wizard__progress-bar { transition: none; }
	.dtf-wizard__card { transition: none; }
	.dtf-wizard__button { transition: none; }
}

/* Mobile compact (320–480px) */
@media (max-width: 480px) {
	.dtf-wizard { font-size: 15px; }
	.dtf-wizard__question { font-size: 1.1rem; }
	.dtf-wizard__cards { grid-template-columns: 1fr; }
	.dtf-wizard__cards--compact { grid-template-columns: 1fr 1fr; }
	.dtf-wizard__position-cards { grid-template-columns: 1fr; }
	.dtf-wizard__trust-list { flex-direction: column; }
	.dtf-wizard__selection-summary { flex-direction: column; text-align: center; }
	.dtf-wizard__estimate-header { flex-direction: column; }
	.dtf-wizard__nav { flex-direction: column; }
	.dtf-wizard__nav .dtf-wizard__button { width: 100%; text-align: center; }
}


/* Ready-made package cards ([dtf_packages]) */
.dtf-packages {
	--dtf-color-accent: #1f6feb;
	--dtf-color-border: #d6dbe1;
	--dtf-color-muted: #5b6470;
	--dtf-color-text: #1c2531;
	--dtf-radius: 12px;
	max-width: 1080px;
	margin: 0 auto;
	color: var(--dtf-color-text);
	box-sizing: border-box;
}
.dtf-packages *, .dtf-packages *::before, .dtf-packages *::after { box-sizing: border-box; }
.dtf-packages__heading { text-align: center; font-size: 1.75rem; margin: 0 0 8px; }
.dtf-packages__intro { text-align: center; color: var(--dtf-color-muted); margin: 0 0 24px; }
.dtf-packages__lead {
	max-width: 720px;
	margin: 0 auto 28px;
	text-align: center;
	font-size: 15px;
	line-height: 1.6;
	color: var(--dtf-color-text);
	background: #eef4ff;
	border: 1px solid #cfe0ff;
	border-radius: var(--dtf-radius);
	padding: 14px 20px;
}
.dtf-packages__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, 1fr);
}
.dtf-packages__grid--cols-1 { grid-template-columns: 1fr; }
.dtf-packages__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.dtf-packages__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .dtf-packages__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dtf-packages__grid { grid-template-columns: 1fr; } }
.dtf-packages__card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--dtf-color-border);
	border-radius: var(--dtf-radius);
	background: #fff;
	padding: 24px 20px 20px;
}
.dtf-packages__card.is-popular {
	border-color: var(--dtf-color-accent);
	box-shadow: 0 6px 24px rgba(31, 111, 235, 0.15);
}
/* "Template" flag: makes clear every package is only a customisable starting
   point, never a fixed take-it-or-leave-it product. */
.dtf-packages__template-flag {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(28, 37, 49, 0.72);
	color: #fff;
	backdrop-filter: blur(2px);
}
/* Individual/custom "template" card stands out as the most flexible option. */
.dtf-packages__card.is-custom {
	border-color: #f08c00;
	background: linear-gradient(180deg, #fffaf3 0%, #fff 60%);
	box-shadow: 0 6px 24px rgba(240, 140, 0, 0.16);
}
.dtf-packages__card.is-custom .dtf-packages__template-flag { background: #f08c00; }
.dtf-packages__card.is-custom .dtf-packages__badge { background: #f08c00; }
.dtf-packages__card.is-custom .dtf-packages__features li::before { color: #f08c00; }
.dtf-packages__card.is-custom .dtf-wizard__button--primary { background: #f08c00; border-color: #f08c00; }
.dtf-packages__price--custom .dtf-packages__price-value { font-size: 1.4rem; color: #b26a04; }
.dtf-packages__badge {
	position: absolute;
	top: -12px;
	left: 20px;
	background: var(--dtf-color-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	z-index: 2;
}
.dtf-packages__media {
	position: relative;
	margin: -24px -20px 16px;
	border-top-left-radius: var(--dtf-radius);
	border-top-right-radius: var(--dtf-radius);
	overflow: hidden;
	background: #f2f5f9;
	aspect-ratio: 16 / 10;
}
.dtf-packages__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.dtf-packages__card:hover .dtf-packages__image { transform: scale(1.03); }
.dtf-packages__card.is-popular .dtf-packages__media {
	box-shadow: inset 0 -3px 0 var(--dtf-color-accent);
}
.dtf-packages__name { font-size: 1.2rem; margin: 0 0 4px; }
.dtf-packages__tagline { color: var(--dtf-color-muted); margin: 0 0 16px; }
.dtf-packages__price { margin: 0 0 16px; }
.dtf-packages__price-from { display: inline-block; font-size: 13px; color: var(--dtf-color-muted); margin-right: 4px; }
.dtf-packages__price-value { font-size: 1.8rem; font-weight: 800; }
.dtf-packages__price-note { display: block; font-size: 12px; color: var(--dtf-color-muted); margin-top: 4px; }
.dtf-packages__features { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.dtf-packages__features li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.dtf-packages__features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--dtf-color-accent);
	font-weight: 700;
}
.dtf-packages__actions { display: flex; flex-direction: column; gap: 8px; }
.dtf-packages__actions .dtf-wizard__button { margin: 0; text-align: center; text-decoration: none; }

/* Individual-request highlight: makes clear that fully custom requests
   (without picking a package) are just as welcome. */
.dtf-packages__custom {
	margin: 28px auto 0;
	max-width: 820px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 20px;
	text-align: center;
	padding: 24px 28px;
	border: 2px dashed var(--dtf-color-accent);
	border-radius: var(--dtf-radius);
	background: linear-gradient( 180deg, #f4f8ff 0%, #eef4ff 100% );
}
.dtf-packages__custom-text { flex: 1 1 320px; text-align: left; }
.dtf-packages__custom-title { display: block; font-size: 1.2rem; font-weight: 800; margin-bottom: 4px; }
.dtf-packages__custom-desc { display: block; color: var(--dtf-color-muted); }
.dtf-packages__custom .dtf-wizard__button { flex: 0 0 auto; text-decoration: none; white-space: nowrap; }
@media (max-width: 600px) {
	.dtf-packages__custom { flex-direction: column; }
	.dtf-packages__custom-text { text-align: center; }
}

/* ── Individual product tile (FR-4) ─────────────────────────────── */
.dtf-wizard__card--individual {
	border-color: var(--dtf-color-accent);
	background: linear-gradient( 180deg, var(--dtf-color-warm-soft) 0%, var(--dtf-color-bg) 65% );
}
.dtf-wizard__card-badge--individual { background: var(--dtf-color-warm); }
.dtf-wizard__dropzone.is-dragover {
	border-color: var(--dtf-color-accent);
	background: var(--dtf-color-accent-soft);
}

/* ── Size distribution live counter (FR-8) ──────────────────────── */
.dtf-wizard__size-counter {
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: 8px;
	background: #eef4ff;
	color: var(--dtf-color-text);
	font-size: 0.9rem;
	font-weight: 600;
}
.dtf-wizard__size-counter.is-warning {
	background: #fff4e5;
	color: #8a4b00;
}

/* ── Personalization table (FR-9) ───────────────────────────────── */
.dtf-wizard__personalization { margin-top: 12px; }
.dtf-wizard__pers-head,
.dtf-wizard__pers-row {
	display: grid;
	grid-template-columns: 1.4fr 0.8fr 1fr 0.8fr auto;
	gap: 8px;
	align-items: center;
}
.dtf-wizard__pers-head {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--dtf-color-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 6px;
}
.dtf-wizard__pers-row { margin-bottom: 8px; }
.dtf-wizard__pers-row input,
.dtf-wizard__pers-row select {
	width: 100%;
	padding: 8px 10px;
	border: 2px solid var(--dtf-color-border);
	border-radius: 8px;
	font: inherit;
}
.dtf-wizard__pers-remove {
	border: none;
	background: transparent;
	color: var(--dtf-color-error);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	min-width: 44px;
	min-height: 44px;
}
.dtf-wizard__pers-import { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dtf-wizard__pers-import-status { font-size: 0.85rem; color: var(--dtf-color-muted); }
@media (max-width: 600px) {
	.dtf-wizard__pers-head { display: none; }
	.dtf-wizard__pers-row {
		grid-template-columns: 1fr 1fr;
		padding: 10px;
		border: 1px solid var(--dtf-color-border);
		border-radius: 8px;
	}
	.dtf-wizard__pers-remove { grid-column: 1 / -1; justify-self: end; }
}

/* ── Non-blocking plausibility hints (FR-21) ────────────────────── */
.dtf-wizard__plausibility {
	margin: 12px 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: #fff4e5;
	border: 1px solid #f0c78a;
}
.dtf-wizard__plausibility-title { margin: 0 0 4px; font-weight: 700; color: #8a4b00; }
.dtf-wizard__plausibility-list { margin: 0; padding-left: 18px; color: #8a4b00; font-size: 0.9rem; }
.dtf-wizard__plausibility-list li { margin: 2px 0; }

/* ── Pickup location block ───────────────────────────────────────── */
.dtf-wizard__pickup {
	margin-top: 12px;
	padding: 14px 16px;
	border: 1px solid #cfe0ff;
	border-radius: var(--dtf-radius);
	background: #f3f8ff;
}
.dtf-wizard__pickup-intro { margin: 0 0 6px; font-weight: 600; }
.dtf-wizard__pickup-address {
	font-style: normal;
	line-height: 1.5;
	margin: 0 0 8px;
}
.dtf-wizard__pickup-hours {
	margin: 0 0 10px;
	font-size: 0.9rem;
	color: var(--dtf-color-muted);
}
.dtf-wizard__pickup-maps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
.dtf-wizard__pickup-map {
	text-decoration: none;
	text-align: center;
	flex: 1 1 auto;
}
@media (max-width: 480px) {
	.dtf-wizard__pickup-map { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   Friendly guided-flow theme: motion, transitions & palette alignment
   ═══════════════════════════════════════════════════════════════════ */

@keyframes dtf-wizard-in {
	from { opacity: 0; transform: translateY( 10px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}
@keyframes dtf-step-in {
	from { opacity: 0; transform: translateY( 14px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}
@keyframes dtf-pop {
	0%   { transform: scale( 0.4 ); }
	60%  { transform: scale( 1.12 ); }
	100% { transform: scale( 1 ); }
}

/* Each newly revealed step gently rises in — feels like moving forward
   through a guided flow rather than paging a static form. */
.dtf-wizard__step:not( [hidden] ) {
	animation: dtf-step-in 0.4s var(--dtf-ease) both;
}
/* Selected-card check badge pops in. */
.dtf-wizard__card:has( input:checked )::after {
	animation: dtf-pop 0.28s var(--dtf-ease);
}

/* Section question headline gets a friendly accent underline accent. */
.dtf-wizard__question { letter-spacing: -0.01em; }

/* Palette alignment for remaining tinted surfaces (violet/green family). */
.dtf-wizard__selection-edit { border-color: var(--dtf-color-accent); }
.dtf-wizard__selection-edit:hover { background: var(--dtf-color-accent-soft); }
.dtf-wizard__size-counter { background: var(--dtf-color-accent-soft); }
.dtf-wizard__upload-info {
	background: var(--dtf-color-accent-soft);
	border-color: var(--dtf-color-border);
}
.dtf-wizard__pickup {
	background: var(--dtf-color-accent-soft);
	border-color: var(--dtf-color-border);
}
.dtf-wizard__success {
	background: var(--dtf-color-success-soft);
	border-color: var(--dtf-color-success);
	animation: dtf-step-in 0.45s var(--dtf-ease) both;
}
.dtf-wizard__trust {
	background: var(--dtf-color-success-soft);
	border-color: #a5e8cf;
}
.dtf-wizard__position-card[data-pos-key="multiple"] {
	background: linear-gradient( 180deg, var(--dtf-color-accent-soft) 0%, var(--dtf-color-bg) 60% );
}
/* Motif hotspots in the friendly violet. */
.dtf-wizard__position-visual [data-position] { fill: rgba( 123, 92, 255, 0.14 ); }
.dtf-wizard__position-visual [data-position].is-hover { fill: rgba( 123, 92, 255, 0.28 ); }
.dtf-wizard__position-visual [data-position].is-active { fill: rgba( 123, 92, 255, 0.34 ); }

/* Summary rows: lighter, card-like separation. */
.dtf-wizard__summary-row { border-bottom-color: var(--dtf-color-border); }

/* Conditional blocks slide/fade in smoothly when revealed. */
.dtf-wizard__address:not( [hidden] ),
.dtf-wizard__pickup:not( [hidden] ),
.dtf-wizard__own-textile-details:not( [hidden] ),
.dtf-wizard__personalization:not( [hidden] ),
.dtf-wizard__upload:not( [hidden] ),
.dtf-wizard__sizes:not( [hidden] ) {
	animation: dtf-step-in 0.3s var(--dtf-ease) both;
}

/* Respect reduced-motion: keep it calm, no transforms/animations. */
@media (prefers-reduced-motion: reduce) {
	.dtf-wizard,
	.dtf-wizard__step:not( [hidden] ),
	.dtf-wizard__success,
	.dtf-wizard__address:not( [hidden] ),
	.dtf-wizard__pickup:not( [hidden] ),
	.dtf-wizard__own-textile-details:not( [hidden] ),
	.dtf-wizard__personalization:not( [hidden] ),
	.dtf-wizard__upload:not( [hidden] ),
	.dtf-wizard__sizes:not( [hidden] ),
	.dtf-wizard__card:has( input:checked )::after {
		animation: none;
	}
	.dtf-wizard__card:hover,
	.dtf-wizard__button:hover,
	.dtf-wizard__button:active { transform: none; }
}

/* Featured / individual tiles + dropzone in the friendly violet family. */
.dtf-wizard__card--featured {
	background: linear-gradient( 180deg, var(--dtf-color-accent-soft) 0%, var(--dtf-color-bg) 60% );
}
.dtf-wizard__card--featured:has( input:checked ) {
	box-shadow: 0 0 0 3px rgba( 123, 92, 255, 0.22 ), var(--dtf-shadow-sm);
}
.dtf-wizard__card--individual {
	background: linear-gradient( 180deg, var(--dtf-color-warm-soft) 0%, var(--dtf-color-bg) 65% );
	border-color: var(--dtf-color-warm);
}
.dtf-wizard__card-badge--individual { background: var(--dtf-color-warm); }
.dtf-wizard__dropzone.is-dragover {
	border-color: var(--dtf-color-accent);
	background: var(--dtf-color-accent-soft);
}

/* ═══════════════════════════════════════════════════════════════════
   Iconography: reinforce each question/step visually (guided feel)
   ═══════════════════════════════════════════════════════════════════ */

/* Icon that precedes a step question — sits in a soft accent chip so each
   step reads like a friendly milestone rather than a form field. */
.dtf-wizard__q-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-right: 10px;
	vertical-align: -9px;
	border-radius: 10px;
	color: var(--dtf-color-accent);
	background: var(--dtf-color-accent-soft);
}
.dtf-wizard__q-icon svg { width: 20px; height: 20px; }
@media (max-width: 480px) {
	.dtf-wizard__q-icon { width: 30px; height: 30px; vertical-align: -8px; margin-right: 8px; }
	.dtf-wizard__q-icon svg { width: 18px; height: 18px; }
}

/* Intro gets a small welcoming icon. */
.dtf-wizard__intro { display: flex; align-items: flex-start; gap: 10px; }
.dtf-wizard__intro-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--dtf-color-accent);
}

/* Success screen: a friendly animated confirmation badge. */
.dtf-wizard__success { text-align: center; }
.dtf-wizard__success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 12px;
	border-radius: 50%;
	color: #fff;
	background: var(--dtf-color-success);
	box-shadow: 0 8px 22px rgba( 18, 184, 134, 0.35 );
	animation: dtf-pop 0.5s var(--dtf-ease) both;
}
.dtf-wizard__success-icon svg { width: 34px; height: 34px; }
@media (prefers-reduced-motion: reduce) {
	.dtf-wizard__success-icon { animation: none; }
}