/* Shared wizard for Design with AI, Name Badges, and Engraved Gifts.
   Desktop (>=1000px): one step in a ~42% column. The page scrolls; the column does not.
   The preview is the other ~58% and stays stuck under the site header.
   Mobile: a short "Step n of n" line, a collapsible preview, and Back/Next fixed
   above the site's bottom bar. */

.ade.ap-wizard,
.apai.ap-wizard {
	--ap-sticky-top: 72px;
	--ap-sticky-bottom: 0px;
	max-width: none;
	margin-top: 0 !important;
	margin-bottom: 36px;
	box-sizing: border-box;
}

.ap-wizard [data-wiz].ap-wiz-off { display: none !important; }

.ap-wizard > .ap-wiz-stepper { margin: 0 0 8px !important; }
.ap-wizard > .ade-gated { margin: 0 0 8px !important; }
.ap-wiz-stepper ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ap-wizard .ap-wiz-stepper button {
	background: #fff !important;
	color: #1f2a44 !important;
	-webkit-text-fill-color: #1f2a44 !important;
	border: 1px solid #c9ced6;
	border-radius: 999px;
	min-height: 40px;
	height: auto !important;
	width: auto !important;
	max-width: none !important;
	padding: 6px 12px;
	font: inherit;
	font-size: 14px !important;
	font-weight: 650;
	line-height: 1.2 !important;
	cursor: pointer;
	overflow: visible !important;
	white-space: nowrap !important;
	text-overflow: clip !important;
}
.ap-wizard .ap-wiz-stepper button[aria-current="step"] {
	background: #1f2a44 !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	border-color: #1f2a44;
}
.ap-wiz-stepper button:disabled { opacity: .45; cursor: default; }
.ap-wiz-compact {
	display: none;
	margin: 0 0 8px;
	font-weight: 700;
	color: #1f2a44;
}

.ap-wiz-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0 4px;
}
.ap-wiz-back,
.ap-wiz-next {
	min-height: 48px;
	padding: 12px 22px;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
}
.ap-wizard .ap-wiz-back {
	background: #fff !important;
	color: #1f2a44 !important;
	-webkit-text-fill-color: #1f2a44 !important;
	border: 1px solid #c9ced6;
	font-size: 16px !important;
	overflow: visible !important;
	white-space: nowrap !important;
}
.ap-wizard .ap-wiz-next {
	margin-left: auto;
	background: #1f2a44 !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	border: 0;
	font-size: 16px !important;
	overflow: visible !important;
	white-space: nowrap !important;
}
.ap-wiz-next:disabled { opacity: .45; cursor: not-allowed; }
.ap-wiz-hint {
	margin: 0;
	flex: 1 1 auto;
	color: #6b4a12;
	font-size: 14px;
	font-weight: 650;
}
.ap-wiz-preview-toggle {
	display: none;
	width: 100%;
	margin: 0 0 8px;
	min-height: 44px;
	border: 1px solid #c9ced6;
	border-radius: 12px;
	background: #fff;
	color: #1f2a44;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.ap-wizard .apai-modes,
.ap-wizard .apai-methods { gap: 12px; }
.ap-wizard .apai-modes label,
.ap-wizard .apai-methods label,
.ap-wizard .apai-cmode label { padding: 14px 16px; }
.ap-wizard .ade-step { margin-top: 0; }

/* Step titles sit beside the number. Theme rules (tiny spans, ellipsis, flex shrink)
   cannot clip them. Only .ap-wiz-num is the badge. */
.ade.ap-wizard h3,
.apai.ap-wizard legend,
.apai.ap-wizard h3 {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 0 0 12px !important;
	overflow: visible !important;
	white-space: normal !important;
	text-overflow: clip !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #1f2a44 !important;
	-webkit-text-fill-color: #1f2a44 !important;
}
.ap-wizard .ap-wiz-num {
	display: inline-grid !important;
	place-items: center !important;
	flex: 0 0 32px !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: #1f2a44 !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	overflow: visible !important;
	text-overflow: clip !important;
	white-space: nowrap !important;
}
.ade.ap-wizard h3 span:not(.ap-wiz-num),
.ade.ap-wizard h3 .ade-namesh,
.apai.ap-wizard legend span:not(.ap-wiz-num),
.apai.ap-wizard h3 span:not(.ap-wiz-num) {
	display: inline !important;
	flex: 1 1 auto !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: #1f2a44 !important;
	-webkit-text-fill-color: #1f2a44 !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	overflow: visible !important;
	white-space: normal !important;
	text-overflow: clip !important;
}
.ade.ap-wizard h3 .ade-opt {
	flex: 0 1 auto !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #5a6372 !important;
	-webkit-text-fill-color: #5a6372 !important;
}

/* Checking… on Generate, Update, and the other submits. */
.apai-busy::before,
.ade-busy::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	border: 2px solid #c5cedd;
	border-top-color: #1f2a44;
	border-radius: 50%;
	vertical-align: -2px;
	animation: ap-wiz-spin .7s linear infinite;
}
@keyframes ap-wiz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.apai-busy::before,
	.ade-busy::before { animation: none; border-top-color: #1f2a44; }
}

@media (min-width: 1000px) {
	.ade.ap-wizard,
	.apai.ap-wizard {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		margin-bottom: 48px;
		padding-left: 24px;
		padding-right: 24px;
	}
	.ap-wizard .ap-split-work {
		display: grid;
		grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
		gap: 28px;
		align-items: start;
	}
	.ap-wizard .ap-split-form {
		min-width: 0;
		overflow: visible;
		max-height: none;
		display: flex;
		flex-direction: column;
	}
	/* Desktop: Back/Next follows the step. A sticky bar was covering the lower gift cards. */
	.ap-wizard .ap-wiz-nav {
		position: static !important;
		margin-top: 12px;
		background: transparent;
		z-index: 1;
	}
	.ap-wizard .ap-split-form .ade-step.ap-wiz-on,
	.ap-wizard .ap-split-preview .ade-previewbox,
	.ap-wizard .ap-split-preview .apai-preview {
		margin-top: 0 !important;
	}
	.ap-wizard .ap-split-preview {
		position: sticky;
		top: var(--ap-sticky-top);
		max-height: calc(100vh - var(--ap-sticky-top) - 16px);
		overflow-y: auto;
		align-self: start;
		min-width: 0;
	}
	.ap-wizard .ap-split-mini { display: none !important; }
	.ap-wizard .ap-wiz-compact,
	.ap-wizard .ap-wiz-preview-toggle { display: none; }
}

@media (max-width: 999px) {
	.ap-wizard .ap-split-work {
		display: flex;
		flex-direction: column;
	}
	.ap-wizard .ap-split-preview { order: 1; min-width: 0; max-width: 100%; }
	.ade-canvaswrap, .ade-previewbox, .ade-canvaswrap canvas { max-width: 100%; }
	.ap-wizard .ap-split-form {
		order: 2;
		display: flex;
		flex-direction: column;
		min-width: 0;
		overflow: visible;
		max-height: none;
	}
	.ap-wizard .ap-wiz-stepper ol { display: none; }
	.ap-wizard .ap-wiz-compact { display: block; }
	.ap-wizard .ap-wiz-preview-toggle { display: block; }
	.ap-wizard .ap-split-preview.is-collapsed > :not(.ap-wiz-preview-toggle) { display: none; }
	.ap-wizard .ap-split-mini { display: none !important; }
	.ade.ap-wizard,
	.apai.ap-wizard { padding-bottom: calc(120px + var(--ap-sticky-bottom)); }
	.ap-wizard .ap-wiz-nav {
		position: fixed !important;
		left: 0;
		right: 0;
		bottom: var(--ap-sticky-bottom);
		z-index: 25;
		background: #fff;
		padding: 10px 16px;
		box-shadow: 0 -2px 12px rgba(20, 28, 40, .12);
	}
	.ap-wizard .ap-wiz-nav.is-parked {
		position: static !important;
		box-shadow: none;
		padding-left: 0;
		padding-right: 0;
	}
}