/* =========================================================================
   INSTANT WRAP MOCKUP BUILDER
   Uses the same design tokens as main.css (colors, radii, easing) — this
   file only adds the builder-specific layout. Kept in its own file so it
   can be understood/edited without scrolling through the whole stylesheet.
   ========================================================================= */

.mockup-builder__intro {
	text-align: center;
	padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 48px);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(circle at 20% 20%, var(--accent-glow), transparent 55%),
		radial-gradient(circle at 80% 80%, rgba(79,179,255,0.18), transparent 55%),
		var(--surface);
}
.mockup-builder__hint { margin-top: 14px; font-size: 0.85rem; color: var(--text-faint); }

/* --- Full-screen builder panel ------------------------------------------ */
.mockup-builder__panel {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(5, 8, 14, 0.92);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
}
.mockup-builder__panel[hidden] { display: none; }
.mockup-builder__panel-inner {
	width: 100%;
	max-width: 1080px;
	max-height: 94vh;
	overflow-y: auto;
	background: var(--bg-alt);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-lg);
	padding: clamp(18px, 3vw, 32px);
	margin-block: auto;
}

.mockup-builder__topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.mockup-builder__steps { display: flex; gap: 6px; flex-wrap: wrap; }
.mockup-builder__step {
	font-family: var(--font-display);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 9px 16px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-strong);
	background: transparent;
	color: var(--text-muted);
}
.mockup-builder__step.is-active { color: #fff; border-color: var(--accent); background: rgba(30,139,255,0.12); }
.mockup-builder__close {
	width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid var(--border-strong);
	font-size: 1.4rem; line-height: 1; color: var(--text-muted);
	display: flex; align-items: center; justify-content: center;
}
.mockup-builder__close:hover { color: #fff; border-color: var(--accent); }
.mockup-builder__close svg { display: none; }

.mockup-builder__body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }

.mockup-step { display: none; }
.mockup-step.is-active { display: block; animation: mbFade 0.25s var(--ease); }
@keyframes mbFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mockup-step__title { margin-bottom: 6px; font-size: 1.3rem; }
.mockup-step__sub { font-size: 0.9rem; margin-bottom: 18px; }
.mockup-step__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 12px; }

.field-group { margin-bottom: 22px; }
.field-group__label { font-size: 0.85rem; color: var(--text); margin-bottom: 4px; font-weight: 600; }
.field-group__hint { font-size: 0.8rem; color: var(--text-faint); margin-bottom: 12px; }

.chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
	position: relative;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-pill);
	font-size: 0.88rem;
	cursor: pointer;
	transition: border-color var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease);
}
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip:has(input:checked) { border-color: var(--accent); background: rgba(30,139,255,0.12); color: #fff; }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip--color .chip__swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); display: inline-block; }

/* --- Vehicle type selector -------------------------------------------------
   Real photo/render per vehicle type (assets/vehicles/*.webp — see
   inc/mockup-builder.php -> stickawrap_mockup_vehicle_catalog()), not a
   drawn illustration. One clickable card = one <label>, radio-driven, same
   pattern as .design-type-card below. Auto-fill keeps this clean at any
   width without an odd leftover row (9 vehicle types don't divide evenly
   into a fixed 3 or 4 columns); the 780px breakpoint below pins it to a
   deliberate 2 columns on phones per spec. */
.vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.vehicle-card {
	position: relative;
	display: block;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	padding: 10px;
	cursor: pointer;
	transition: border-color var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease);
}
.vehicle-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vehicle-card:has(input:checked) { border-color: var(--accent); background: rgba(30,139,255,0.1); }
.vehicle-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.vehicle-card__media {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 4 / 3;
	margin-bottom: 8px;
	border-radius: var(--radius-sm);
	background: rgba(255,255,255,0.04);
	overflow: hidden;
}
.vehicle-card__image { width: 100%; height: 100%; object-fit: contain; display: block; }
/* [hidden] alone doesn't reliably win over the display set above (the
   UA's [hidden]{display:none} rule loses to an equal-specificity author
   rule) — every other JS-toggled element in this stylesheet re-declares
   display:none for its own [hidden] state; do the same here. */
.vehicle-card__image[hidden] { display: none; }
.vehicle-card__placeholder {
	display: block;
	text-align: center;
	font-size: 0.7rem;
	line-height: 1.3;
	color: var(--text-faint);
	padding: 6px;
}
/* Hidden by default in the markup — JS (armImageFallback in
   mockup-builder.js) only reveals this on a real image load error, and
   never falls back to a drawn illustration. */
.vehicle-card__placeholder[hidden] { display: none; }
.vehicle-card__label { display: block; text-align: center; font-size: 0.8rem; color: var(--text-muted); }
.vehicle-card:has(input:checked) .vehicle-card__label { color: #fff; }

.mockup-color-picker { margin-top: 10px; width: 60px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: none; padding: 2px; }

.field-disclosure { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 16px; margin-bottom: 20px; }
.field-disclosure summary { cursor: pointer; padding: 12px 0; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.field-disclosure[open] summary { margin-bottom: 8px; }
.field-disclosure > *:not(summary) { margin-bottom: 14px; }

.upload-choice__or { font-size: 0.82rem; color: var(--text-faint); margin-top: 8px; }
.upload-drop--sm { padding: 16px 10px; font-size: 0.78rem; }
.upload-drop--sm svg { width: 18px; height: 18px; }

.toggle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.toggle-grid--inline { display: flex; flex-wrap: wrap; gap: 16px; }
.toggle { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; padding: 8px 4px; }
.toggle input { width: 18px; height: 18px; accent-color: var(--accent); }

.design-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 10px; }
.design-type-card {
	position: relative;
	display: block;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	padding: 18px;
	cursor: pointer;
	transition: border-color var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease);
}
.design-type-card input { position: absolute; opacity: 0; }
.design-type-card:has(input:checked) { border-color: var(--accent); background: rgba(30,139,255,0.1); }
.design-type-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.design-type-card__label { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 1rem; color: #fff; margin-bottom: 6px; }
.design-type-card__desc { display: block; font-size: 0.85rem; color: var(--text-muted); }

.style-tag-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.style-tag { position: relative; }
.style-tag input { position: absolute; opacity: 0; }
.style-tag span {
	display: inline-block; padding: 8px 14px; border-radius: var(--radius-pill);
	border: 1px solid var(--border-strong); font-size: 0.82rem; cursor: pointer;
	transition: border-color var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}
.style-tag input:checked + span { border-color: var(--accent); background: rgba(30,139,255,0.12); color: #fff; }
.style-tag input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Layout preview (instant, non-AI) ------------------------------------ */
.mockup-preview {
	position: sticky; top: 0;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	padding: 18px;
	background: var(--surface);
}
.mockup-preview__label { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px; }
.mockup-preview__stage {
	position: relative;
	aspect-ratio: 4/3;
	display: flex; align-items: center; justify-content: center;
	background: radial-gradient(ellipse at center, rgba(255,255,255,0.05), transparent 70%);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
/* Real vehicle photo/render (assets/vehicles/*.webp) — object-fit: contain
   so it's never stretched, cropped, or forced to fill the box. Deliberately
   NOT recolored: tinting a real photo would also tint tires/glass/lights,
   so the selected color is shown only as the swatch + label below. */
.mockup-preview__image { width: 90%; height: 90%; object-fit: contain; display: block; }
.mockup-preview__image[hidden] { display: none; }
.mockup-preview__placeholder { display: block; text-align: center; font-size: 0.8rem; line-height: 1.4; color: var(--text-faint); padding: 16px; }
.mockup-preview__placeholder[hidden] { display: none; }
.mockup-preview__color-tag { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.85rem; color: var(--text-muted); }
.mockup-preview__color-tag strong { color: #fff; font-weight: 600; }
.mockup-preview__color-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); display: inline-block; flex-shrink: 0; }
.mockup-preview__note { font-size: 0.78rem; color: var(--text-faint); margin-top: 12px; }

/* --- Result screen -------------------------------------------------------- */
.mockup-result[hidden] { display: none; }
.mockup-result { margin-top: 8px; }
.mockup-result__concepts { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.mockup-result__concepts button {
	padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
	font-size: 0.8rem; color: var(--text-muted);
}
.mockup-result__concepts button.is-active { border-color: var(--accent); color: #fff; background: rgba(30,139,255,0.12); }

.mockup-result__stage {
	position: relative;
	min-height: 280px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	background: var(--surface);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.mockup-result__stage img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; }
.mockup-result__loading { text-align: center; color: var(--text-muted); }
.mockup-spinner {
	display: inline-block; width: 36px; height: 36px; margin-bottom: 12px;
	border: 3px solid var(--border-strong); border-top-color: var(--accent);
	border-radius: 50%; animation: mbSpin 0.8s linear infinite;
}
@keyframes mbSpin { to { transform: rotate(360deg); } }
.mockup-result__fallback[hidden] { display: none; }
.mockup-result__fallback { padding: 28px; text-align: center; color: var(--text-muted); font-size: 0.92rem; }

.mockup-disclaimer { font-size: 0.8rem; color: var(--text-faint); margin: 16px 0; padding: 12px 16px; border-left: 2px solid var(--border-strong); }

.mockup-result__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.mockup-result__actions .btn { font-size: 0.78rem; padding: 10px 16px; }

.mockup-instruction-box { margin-bottom: 20px; }
.mockup-instruction-box label { display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 8px; }
.mockup-instruction-box__row { display: flex; gap: 10px; flex-wrap: wrap; }
.mockup-instruction-box__row input { flex: 1; min-width: 220px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 12px 16px; color: #fff; }

.mockup-result__primary-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

.mockup-chatgpt-fallback { text-align: center; padding-top: 14px; border-top: 1px solid var(--border); }
.mockup-chatgpt-fallback__note[hidden] { display: none; }
.mockup-chatgpt-fallback__note { font-size: 0.85rem; color: var(--text-muted); margin-top: 10px; max-width: 60ch; margin-inline: auto; }
.btn--ghost { background: none; border: 1px dashed var(--border-strong); color: var(--text-muted); }
.btn--ghost:hover { color: #fff; border-color: var(--accent); }

.mockup-sent-confirmation[hidden] { display: none; }
.mockup-sent-confirmation { text-align: center; padding: 28px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: rgba(34,197,94,0.06); }
.mockup-sent-confirmation h3 { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.2rem; margin-bottom: 10px; }
.mockup-sent-confirmation h3 svg { width: 22px; height: 22px; color: #6ee7a0; }
.mockup-sent-confirmation__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.mockup-limit-note[hidden] { display: none; }
.mockup-limit-note { text-align: center; margin-top: 18px; font-size: 0.9rem; color: var(--text-muted); }
.mockup-limit-note a { color: var(--accent-2); text-decoration: underline; }

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 780px) {
	.mockup-builder__body { grid-template-columns: 1fr; }
	.mockup-preview { position: static; order: -1; }
	.vehicle-grid { grid-template-columns: repeat(2, 1fr); }
	.design-type-grid { grid-template-columns: 1fr; }
	.toggle-grid { grid-template-columns: 1fr; }
	.mockup-builder__panel { padding: 0; }
	.mockup-builder__panel-inner { max-height: 100vh; height: 100%; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mockup-step.is-active { animation: none; }
	.mockup-spinner { animation-duration: 1.6s; }
}