/* ===========================================================================
   XT Deal Roundup: the submission flow. Reads the same --xdr-* tokens as the roundup.
   ======================================================================== */

.xdr-hero--flow {
	padding-block: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 48px);
}

.xdr-flow__title {
	max-width: 18ch;
	font-size: clamp(34px, 4.4vw, 60px);
}

.xdr-flow__intro {
	margin-top: 20px;
}

.xdr-flow {
	--xdr-bad: #ff8b7e;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.xdr-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The rail ------------------------------------------------------------------------ */
.xdr-rail {
	display: none;
	gap: 8px;
	margin: 0 0 36px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.is-stepped .xdr-rail {
	display: flex;
}

.xdr-rail__step {
	position: relative;
	flex: 1;
	min-width: 0;
}

.xdr-rail__step::after {
	content: "";
	position: absolute;
	top: 17px;
	right: 6px;
	left: 46px;
	height: 2px;
	border-radius: 2px;
	background: var(--xdr-line-strong);
	transform-origin: left;
	transition: background-color 0.4s;
}

.xdr-rail__step:last-child::after {
	display: none;
}

.xdr-rail__step.is-done::after {
	background: color-mix(in srgb, var(--xdr-accent) 60%, transparent);
}

.xdr-rail button {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--xdr-fg-3);
	font: inherit;
	font-size: 14px;
	font-weight: 560;
	text-align: left;
	cursor: pointer;
}

.xdr-rail button:disabled {
	cursor: default;
}

.xdr-rail__n {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--xdr-surface);
	box-shadow: inset 0 0 0 1.5px var(--xdr-line-strong);
	color: var(--xdr-fg-2);
	font-size: 15px;
	font-weight: 650;
	transition: background-color 0.35s var(--xdr-ease), color 0.35s, box-shadow 0.35s, transform 0.35s var(--xdr-ease);
}

.xdr-rail__step.is-done .xdr-rail__n {
	box-shadow: inset 0 0 0 1.5px var(--xdr-accent);
	color: var(--xdr-accent-text, var(--xdr-accent));
}

.xdr-rail__step.is-done button {
	color: var(--xdr-fg-2);
}

.xdr-rail__step.is-current .xdr-rail__n {
	background: var(--xdr-accent-fill);
	box-shadow: 0 6px 18px -8px var(--xdr-glow);
	color: var(--xdr-accent-ink);
	transform: scale(1.06);
}

.xdr-rail__step.is-current button {
	color: var(--xdr-fg);
}

/* Steps ---------------------------------------------------------------------------- */
.xdr-step {
	min-width: 0;
	margin: 0 0 32px;
	padding: 0;
	border: 0;
}

.is-stepped .xdr-step {
	margin-bottom: 0;
}

.xdr-step[hidden] {
	display: none;
}

.xdr-step__title {
	display: block;
	float: left;
	width: 100%;
	margin-bottom: 22px;
	padding: 0;
	color: var(--xdr-fg);
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 640;
	letter-spacing: -0.025em;
	line-height: 1.15;
	font-variation-settings: "wdth" 104;
}

.xdr-step__title + * {
	clear: both;
}

.xdr-motion .xdr-step.is-entering-next {
	animation: xdr-step-next 0.55s var(--xdr-ease);
}

.xdr-motion .xdr-step.is-entering-prev {
	animation: xdr-step-prev 0.55s var(--xdr-ease);
}

@keyframes xdr-step-next {
	from { opacity: 0; transform: translateX(28px); }
}

@keyframes xdr-step-prev {
	from { opacity: 0; transform: translateX(-28px); }
}

/* Fields --------------------------------------------------------------------------- */
.xdr-field {
	min-width: 0;
	margin-top: 22px;
}

.xdr-field[hidden] {
	display: none;
}

.xdr-field__label {
	display: block;
	margin-bottom: 8px;
	color: var(--xdr-fg);
	font-size: 14px;
	font-weight: 600;
}

.xdr-field__label em {
	margin-left: 4px;
	color: var(--xdr-fg-3);
	font-style: normal;
	font-weight: 450;
}

.xdr-field__hint {
	margin-top: 8px;
	color: var(--xdr-fg-3);
	font-size: 13px;
	line-height: 1.45;
}

.xdr-field__error {
	display: flex;
	gap: 6px;
	margin-top: 8px;
	color: var(--xdr-bad);
	font-size: 13px;
	font-weight: 520;
}

.xdr-field__error[hidden] {
	display: none;
}

.xdr-field__error::before {
	content: "!";
	display: grid;
	place-items: center;
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--xdr-bad);
	color: var(--xdr-ink);
	font-size: 11px;
	font-weight: 800;
}

.xdr-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 16px;
}

.xdr .xdr-input {
	display: block;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--xdr-line-strong);
	border-radius: 12px;
	background: var(--xdr-surface);
	box-shadow: none;
	color: var(--xdr-fg);
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	caret-color: var(--xdr-accent);
	transition: border-color 0.2s, box-shadow 0.25s, background-color 0.2s;
	-webkit-appearance: none;
	appearance: none;
	color-scheme: dark;
}

.xdr .xdr-input::placeholder {
	color: color-mix(in srgb, var(--xdr-fg-3) 80%, transparent);
	opacity: 1;
}

.xdr .xdr-input:hover {
	border-color: color-mix(in srgb, var(--xdr-fg-3) 70%, transparent);
}

.xdr .xdr-input:focus {
	border-color: var(--xdr-accent);
	outline: none;
	background: var(--xdr-surface-2);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--xdr-accent) 16%, transparent);
}

.xdr .xdr-input--big {
	height: 60px;
	font-size: 24px;
	font-weight: 680;
	letter-spacing: -0.02em;
}

.xdr .xdr-input--code {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-weight: 650;
	letter-spacing: 0.08em;
}

.xdr .xdr-input--area {
	height: auto;
	min-height: 96px;
	padding: 13px 16px;
	resize: vertical;
}

.xdr input[type="date"].xdr-input::-webkit-calendar-picker-indicator {
	filter: invert(0.8);
	cursor: pointer;
}

.xdr-field.is-invalid .xdr-input,
.xdr-drop.is-invalid .xdr-drop__zone {
	border-color: var(--xdr-bad);
}

.xdr-field.is-invalid .xdr-input:focus {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--xdr-bad) 18%, transparent);
}

/* The segmented choice: code or link */
.xdr-seg {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 420px;
	padding: 4px;
	border-radius: 999px;
	background: var(--xdr-surface);
	box-shadow: inset 0 0 0 1px var(--xdr-line-strong);
}

.xdr-seg__opt {
	position: relative;
	z-index: 1;
	cursor: pointer;
}

.xdr-seg__opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.xdr-seg__opt span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	border-radius: 999px;
	color: var(--xdr-fg-2);
	font-size: 15px;
	font-weight: 600;
	transition: color 0.3s;
}

.xdr-seg__opt input:checked + span {
	color: var(--xdr-accent-ink);
}

.xdr-seg__opt input:focus-visible + span {
	outline: 2px solid var(--xdr-accent);
	outline-offset: 2px;
}

.xdr-seg__opt .xdr-icon {
	width: 17px;
	height: 17px;
}

.xdr-seg__thumb {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc(50% - 4px);
	border-radius: 999px;
	background: var(--xdr-accent-fill);
	box-shadow: 0 6px 18px -8px var(--xdr-glow);
	transition: transform 0.45s var(--xdr-ease);
}

.xdr-seg.is-second .xdr-seg__thumb,
.xdr-seg:has(.xdr-seg__opt:nth-child(2) input:checked) .xdr-seg__thumb {
	transform: translateX(100%);
}

/* Suggestions, picks and presets */
.xdr-suggest,
.xdr-pick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.xdr-pick {
	margin-top: 0;
}

.xdr-pick--presets {
	margin-top: 18px;
}

.xdr-suggest__chip,
.xdr-pick__btn,
.xdr-pick__opt span {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--xdr-line-strong);
	border-radius: 999px;
	background: none;
	color: var(--xdr-fg-2);
	font: inherit;
	font-size: 14px;
	font-weight: 540;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.2s var(--xdr-ease);
}

.xdr-suggest__chip {
	height: 30px;
	padding: 0 12px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.xdr-suggest__chip:hover,
.xdr-pick__btn:hover,
.xdr-pick__opt:hover span {
	border-color: var(--xdr-fg-3);
	color: var(--xdr-fg);
}

.xdr-suggest__chip:active,
.xdr-pick__btn:active {
	transform: scale(0.96);
}

.xdr-pick__opt {
	position: relative;
	cursor: pointer;
}

.xdr-pick__opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.xdr-pick__opt input:checked + span {
	border-color: var(--xdr-fg);
	background: var(--xdr-fg);
	color: var(--xdr-ink);
}

.xdr-pick__opt input:focus-visible + span {
	outline: 2px solid var(--xdr-accent);
	outline-offset: 2px;
}

.xdr-pick__btn.is-on {
	border-color: var(--xdr-accent);
	color: var(--xdr-accent-text, var(--xdr-accent));
}

/* The week strip */
.xdr-week {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0;
	margin-top: 22px;
	padding: 6px;
	border-radius: 16px;
	background: var(--xdr-surface);
	box-shadow: inset 0 0 0 1px var(--xdr-line);
}

.xdr-week__day {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 2px;
	padding: 8px 0 9px;
	color: var(--xdr-fg-3);
	transition: background-color 0.35s var(--xdr-ease), color 0.35s;
}

.xdr-week__day em {
	font-size: 11px;
	font-style: normal;
}

.xdr-week__day b {
	font-size: 16px;
	font-weight: 620;
}

.xdr-week__day.is-on {
	background: color-mix(in srgb, var(--xdr-accent) 16%, transparent);
	color: var(--xdr-fg);
}

.xdr-week__day.is-first {
	border-radius: 11px 0 0 11px;
}

.xdr-week__day.is-last {
	border-radius: 0 11px 11px 0;
}

.xdr-week__day.is-first.is-last {
	border-radius: 11px;
}

.xdr-week__day.is-first,
.xdr-week__day.is-last {
	background: var(--xdr-accent-fill);
	color: var(--xdr-accent-ink);
}

.xdr-week__day.is-bf::after {
	content: "";
	position: absolute;
	bottom: 3px;
	left: 50%;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: currentColor;
}

.xdr-motion .xdr-week__day.is-on {
	animation: xdr-day 0.4s var(--xdr-ease) backwards;
	animation-delay: calc(var(--n) * 0.02s);
}

@keyframes xdr-day {
	from { background-color: transparent; }
}

/* Image drop and crop */
.xdr-row--images {
	align-items: start;
}

.xdr-drop__zone {
	display: grid;
	place-items: center;
	aspect-ratio: var(--ratio);
	width: 100%;
	padding: 16px;
	border: 1.5px dashed var(--xdr-line-strong);
	border-radius: 16px;
	background: var(--xdr-surface);
	color: var(--xdr-fg-3);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, transform 0.3s var(--xdr-ease);
}

.xdr-drop--logo .xdr-drop__zone,
.xdr-drop--logo .xdr-crop {
	max-width: 240px;
}

.xdr-drop__zone[hidden] {
	display: none;
}

.xdr-drop__zone:hover,
.xdr-drop__zone.is-over {
	border-color: var(--xdr-accent);
	background: color-mix(in srgb, var(--xdr-accent) 6%, var(--xdr-surface));
}

.xdr-drop__zone.is-over {
	transform: scale(1.015);
}

.xdr-drop__zone:focus-within {
	outline: 2px solid var(--xdr-accent);
	outline-offset: 3px;
}

.xdr-drop__empty {
	display: grid;
	justify-items: center;
	gap: 6px;
	font-size: 13px;
	line-height: 1.4;
}

.xdr-drop__empty .xdr-icon {
	width: 24px;
	height: 24px;
	color: var(--xdr-accent-text, var(--xdr-accent));
}

.xdr-drop__empty b {
	color: var(--xdr-fg);
	font-size: 14px;
	font-weight: 600;
}

.xdr-crop[hidden] {
	display: none;
}

.xdr-crop__frame {
	position: relative;
	aspect-ratio: var(--ratio);
	width: 100%;
	overflow: hidden;
	border-radius: 16px;
	background:
		conic-gradient(var(--xdr-surface-2) 25%, var(--xdr-surface-3) 0 50%, var(--xdr-surface-2) 0 75%, var(--xdr-surface-3) 0) 0 0 / 16px 16px;
	box-shadow: inset 0 0 0 1.5px var(--xdr-accent);
	cursor: grab;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.xdr-crop__frame.is-dragging {
	cursor: grabbing;
}

.xdr-crop__frame img {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
	pointer-events: none;
	-webkit-user-drag: none;
}

.xdr-crop__tools {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 10px;
}

.xdr-crop__zoom {
	flex: 1;
}

.xdr-crop__zoom input {
	width: 100%;
	accent-color: var(--xdr-accent);
}

/* Navigation and errors ------------------------------------------------------- */
.xdr-flow__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 36px;
}

.xdr-flow__nav [hidden] {
	display: none;
}

.xdr-flow__nav [data-xdr-back] {
	margin-right: auto;
}

.xdr-flow__nav [data-xdr-next],
.xdr-flow__nav [data-xdr-send] {
	margin-left: auto;
}

.xdr-flow__nav [data-xdr-back]:not([hidden]) ~ [data-xdr-next],
.xdr-flow__nav [data-xdr-back]:not([hidden]) ~ [data-xdr-send] {
	margin-left: 0;
}

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

.xdr-motion .xdr-btn.is-busy .xdr-icon {
	animation: xdr-busy 0.8s ease-in-out infinite;
}

@keyframes xdr-busy {
	50% { opacity: 0.3; transform: scale(0.8); }
}

.xdr-flow__error {
	margin-top: 24px;
	padding: 14px 16px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--xdr-bad) 12%, transparent);
	color: var(--xdr-fg);
	font-size: 15px;
}

.xdr-flow__error[hidden] {
	display: none;
}

/* The preview stage --------------------------------------------------------------- */
.xdr-stage {
	padding: clamp(20px, 3vw, 28px);
	border-radius: 24px;
	background:
		radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--xdr-glow) 14%, transparent), transparent 70%),
		var(--xdr-bg-2);
	box-shadow: inset 0 0 0 1px var(--xdr-line);
}

.xdr-stage__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	color: var(--xdr-fg-2);
	font-size: 14px;
	font-weight: 560;
}

.xdr-stage__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--xdr-live);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--xdr-live) 22%, transparent);
}

.xdr-stage__card {
	max-width: 380px;
	margin-inline: auto;
}

.xdr-stage__card .xdr-ticket {
	transition: none;
}

.xdr-stage__card .xdr-ticket.is-sample .xdr-ticket__vendor,
.xdr-stage__card .xdr-ticket.is-sample .xdr-ticket__title,
.xdr-stage__card .xdr-ticket.is-sample .xdr-ticket__discount {
	opacity: 0.5;
}

.xdr-stage__hint {
	margin-top: 14px;
	color: var(--xdr-fg-3);
	font-size: 13px;
	text-align: center;
}

/* Done ----------------------------------------------------------------------------- */
.xdr-done {
	display: grid;
	justify-items: center;
	padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px);
	border-radius: 28px;
	background:
		radial-gradient(70% 70% at 50% 0%, color-mix(in srgb, var(--xdr-glow) 22%, transparent), transparent 70%),
		var(--xdr-surface);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--xdr-accent) 30%, transparent);
	text-align: center;
}

.xdr-done[hidden] {
	display: none;
}

.xdr-done:focus {
	outline: none;
}

.xdr-done__bolt {
	width: 64px;
	height: 64px;
	color: var(--xdr-accent-text, var(--xdr-accent));
	filter: drop-shadow(0 0 24px var(--xdr-glow));
}

.xdr-motion .xdr-done__bolt {
	animation: xdr-zap 0.9s var(--xdr-ease) both;
}

@keyframes xdr-zap {
	0% { opacity: 0; transform: scale(0.3) rotate(-30deg); }
	55% { opacity: 1; transform: scale(1.15) rotate(6deg); }
	100% { transform: none; }
}

.xdr-done__title {
	margin-top: 18px;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 640;
	letter-spacing: -0.03em;
}

.xdr-done__text {
	max-width: 46ch;
	margin-top: 10px;
	color: var(--xdr-fg-2);
	font-size: 17px;
}

.xdr-done__warn {
	max-width: 46ch;
	margin-top: 12px;
	color: var(--xdr-bad);
	font-size: 14px;
}

.xdr-done__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}

.xdr-flow.is-done {
	grid-template-columns: minmax(0, 1fr);
}

.xdr-flow.is-done .xdr-done {
	order: -1;
}

/* Larger screens ------------------------------------------------------------------ */
@media (min-width: 640px) {
	.xdr-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.xdr-row--images {
		grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
	}
}

@media (min-width: 960px) {
	.xdr-flow {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
		gap: clamp(48px, 6vw, 88px);
	}

	.xdr-flow__preview {
		position: sticky;
		top: calc(var(--xdr-sticky-top) + 24px);
	}

	.admin-bar .xdr-flow__preview {
		top: calc(var(--xdr-sticky-top) + 56px);
	}

	.xdr-flow.is-done {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
	}
}

@media (max-width: 560px) {
	.xdr-rail__label {
		display: none;
	}

	.xdr-rail__step.is-current .xdr-rail__label {
		display: block;
		position: absolute;
		top: 44px;
		left: 0;
		white-space: nowrap;
	}

	.xdr-rail {
		margin-bottom: 52px;
	}

	.xdr-rail__step::after {
		left: 44px;
	}

	.xdr-week__day em {
		font-size: 10px;
	}

	.xdr-week__day b {
		font-size: 14px;
	}
}

/* The line under the title: partners sign in here; signed in, who they are. */
.xdr-flow__partner {
	margin-top: 18px;
	color: var(--xdr-fg-3);
	font-size: 15px;
}

.xdr-flow__partner b {
	color: var(--xdr-fg);
	font-weight: 600;
}

/* Opening a partner's deal: the form waits for its values instead of flashing empty. */
.xdr-flow.is-loading .xdr-flow__form,
.xdr-flow.is-loading .xdr-flow__preview {
	opacity: 0;
}

.xdr-flow .xdr-flow__form,
.xdr-flow .xdr-flow__preview {
	transition: opacity 0.3s var(--xdr-ease);
}

.xdr .xdr-flow select.xdr-input {
	appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238c8b85' stroke-width='1.6'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
	background-position: right 18px center;
	background-repeat: no-repeat;
	cursor: pointer;
}