/* Create Custom page — stepper + 3-step wizard. */

.custom-main { max-width: 1000px; margin: 0 auto; padding: 48px 56px 80px; }
.custom-main .page-title--center { margin-bottom: 40px; }

/* Stepper */
.stepper { display: flex; align-items: center; justify-content: center; margin: 0 auto 48px; max-width: 620px; }
.stepper-item { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.step-dot {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--line-2);
	color: var(--muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}
.step-dot.is-current, .step-dot.is-done { background: var(--acc); color: #17150f; }
.step-line { flex: 1; height: 2px; background: var(--line-2); margin: 0 16px; }
.step-line.is-done { background: var(--acc); }

/* Panels */
.wizard-panel[hidden] { display: none; }
.wizard-panel .dropzone { padding: 64px 40px; background: var(--panel); border-radius: 20px; }
.wizard-panel .dropzone-icon { width: 72px; height: 72px; border-radius: 18px; font-size: 32px; margin-bottom: 20px; }
.wizard-panel .dropzone-title { font-size: 24px; margin-bottom: 8px; }
.wizard-panel .dropzone-hint { font-size: 15px; margin-bottom: 28px; }

.wizard-error { color: #e2603f; text-align: center; margin-top: 16px; }
.reassurance {
	display: flex;
	gap: 16px 22px;
	justify-content: center;
	margin-top: 24px;
	font-size: 13px;
	color: var(--muted);
	flex-wrap: wrap;
}
.reassure-item { display: inline-flex; align-items: center; gap: 7px; }
.reassure-icon { width: 15px; height: 15px; color: var(--acc); flex: none; }

/* Shared preview images (uploaded photo) */
.wizard-photo {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 10px;
	background: var(--panel);
	display: block;
}

/* Step 2 */
.select-grid { display: grid; grid-template-columns: 240px 1fr; gap: 36px; align-items: start; }
.select-side-label { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.wizard-link { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--muted); }
.wizard-link:hover { color: var(--ink); }
.select-title { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.select-sub { font-size: 14px; color: var(--muted); margin: 0 0 20px; }

.design-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.design-option {
	border: 2px solid var(--line);
	border-radius: 12px;
	padding: 8px;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	color: var(--ink);
}
.design-option.is-selected { border-color: var(--acc); }
.design-option span { display: block; text-align: center; font-size: 13px; font-weight: 600; padding: 8px 0 4px; }
.design-preview { border-radius: 7px; }

/* Simulated string-art treatments (CSS filters on the uploaded photo) */
.design-preview--a { filter: grayscale(1) sepia(.4) saturate(.6) contrast(1.6) brightness(.85); }
.design-preview--b { filter: grayscale(1) sepia(.4) saturate(.6) contrast(1.25); }
.design-preview--c { filter: grayscale(1) sepia(.35) saturate(.55) contrast(1.05) brightness(1.12); }

.wizard-nav { display: flex; gap: 12px; margin-top: 26px; }

/* Step 3 */
.own-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.own-preview { border-radius: 14px; }
.own-title { font-size: 30px; font-weight: 700; margin: 0 0 12px; }
.own-sub { font-size: 16px; color: var(--soft); margin: 0 0 28px; line-height: 1.6; }
.own-options { display: flex; flex-direction: column; gap: 14px; }
.own-option {
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
}
.own-option-name { font-weight: 600; font-size: 17px; }
.own-option-desc { font-size: 14px; color: var(--muted); }
.own-option-buy { text-align: right; }
.own-price { font-weight: 700; color: var(--acc); font-size: 18px; margin-bottom: 6px; }

/* Own-step product options (Artwork Option / Size / Frame) */
.opt-group { margin-bottom: 18px; }
.opt-label { font-size: 13px; color: var(--muted); margin-bottom: 9px; }
.opt-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.opt-pill {
	padding: 10px 18px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: transparent;
	color: var(--ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}
.opt-pill:hover { border-color: var(--acc); }
.opt-pill.is-selected { background: var(--acc); color: #17150f; border-color: var(--acc); font-weight: 600; }

.own-price-line { font-size: 15px; color: var(--muted); margin: 22px 0 16px; }
.own-price-line strong { font-size: 26px; color: var(--acc); margin-left: 8px; }
.own-buy-row { display: flex; gap: 12px; flex-wrap: wrap; }
.own-buy-row .btn[disabled] { opacity: .6; cursor: wait; }
.own-submit-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

@media (max-width: 900px) {
	.custom-main { padding: 36px 20px 60px; }
	/* Title: tighter so the tool is visible above the fold */
	.custom-main .page-title--center { font-size: 28px; margin-bottom: 28px; }
	.select-grid, .own-grid { grid-template-columns: 1fr; }
	.design-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	/* Stepper: labels stay visible, stacked under their dots */
	.stepper { align-items: flex-start; }
	.stepper-item { flex-direction: column; gap: 7px; font-size: 12px; text-align: center; }
	.step-line { margin-top: 19px; margin-inline: 8px; }

	/* Step 3 (Own): compact so Add to Cart / Order Now stay on screen */
	.own-grid { gap: 14px; }
	.own-preview { width: 104px; border-radius: 10px; }
	.own-grid .kicker { margin-bottom: 4px; }
	.own-title { font-size: 24px; margin-bottom: 6px; }
	.opt-group { margin-bottom: 11px; }
	.opt-label { margin-bottom: 6px; font-size: 12px; }
	.opt-pills { gap: 7px; }
	.opt-pill { padding: 8px 13px; font-size: 13px; }
	.own-price-line { margin: 13px 0 12px; }
	.own-price-line strong { font-size: 22px; }
	.own-buy-row { gap: 10px; }
	.own-buy-row .btn { flex: 1; padding: 13px 8px; text-align: center; font-size: 15px; }
	.wizard-link { margin-top: 10px; font-size: 13px; }
}