/* ===================================================
   JA Vouchers — configurator + live preview
   =================================================== */

/* ---------- Page shell ---------- */
.ja-vb-wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: 60px 20px 100px;
}

.ja-vb-hero {
	text-align: center;
	margin-bottom: 56px;
}
.ja-vb-hero h1 {
	font-family: 'Anton', sans-serif;
	font-size: clamp(2rem, 5vw, 3.2rem);
	letter-spacing: .04em;
	color: #f3f3f5;
	margin: 0 0 12px;
}
.ja-vb-hero p {
	color: #a0a0a8;
	font-size: 1.05rem;
	margin: 0;
}

/* ---------- Step progress bar ---------- */
.ja-vb-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-bottom: 48px;
}
.ja-vb-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.ja-vb-step__num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #1e1e22;
	border: 2px solid #2e2e36;
	color: #60606a;
	font-size: .8rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .25s, border-color .25s, color .25s;
}
.ja-vb-step__label {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #50505a;
	transition: color .25s;
	white-space: nowrap;
}
.ja-vb-step.is-active  .ja-vb-step__num   { background: #e63026; border-color: #e63026; color: #fff; }
.ja-vb-step.is-active  .ja-vb-step__label { color: #f3f3f5; }
.ja-vb-step.is-done    .ja-vb-step__num   { background: #22c55e; border-color: #22c55e; color: #fff; }
.ja-vb-step.is-done    .ja-vb-step__label { color: #22c55e; }

.ja-vb-step-line {
	flex: 1;
	height: 2px;
	background: #2e2e36;
	margin: 0 6px;
	margin-bottom: 22px;
	max-width: 60px;
	min-width: 16px;
}

/* ---------- Panel cards ---------- */
.ja-vb-panel {
	background: #111114;
	border: 1px solid #2a2a32;
	border-radius: 12px;
	padding: 36px 32px;
	display: none;
}
.ja-vb-panel.is-active { display: block; }

.ja-vb-panel h2 {
	font-family: 'Anton', sans-serif;
	font-size: 1.5rem;
	letter-spacing: .04em;
	color: #f3f3f5;
	margin: 0 0 6px;
}
.ja-vb-panel > p {
	color: #80808a;
	margin: 0 0 28px;
	font-size: .9rem;
}

/* ---------- Car grid (step 1) ---------- */
.ja-vb-car-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 16px;
}
.ja-vb-car-card {
	border: 2px solid #2a2a32;
	border-radius: 10px;
	padding: 20px 16px 16px;
	cursor: pointer;
	transition: border-color .2s, transform .2s;
	text-align: center;
}
.ja-vb-car-card:hover  { border-color: #e63026; }
.ja-vb-car-card.is-sel { border-color: #e63026; background: rgba(230,48,38,.06); }
.ja-vb-car-card img {
	width: 100%;
	height: 90px;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 12px;
}
.ja-vb-car-card strong {
	display: block;
	color: #f3f3f5;
	font-size: .9rem;
}
.ja-vb-car-card span {
	display: block;
	color: #70707a;
	font-size: .75rem;
	margin-top: 3px;
}

/* ---------- Duration list (step 2) ---------- */
.ja-vb-dur-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
}
.ja-vb-dur-btn {
	border: 2px solid #2a2a32;
	border-radius: 8px;
	padding: 14px 12px;
	cursor: pointer;
	text-align: center;
	background: transparent;
	color: #c0c0c8;
	font-size: .9rem;
	transition: border-color .2s, color .2s, background .2s;
}
.ja-vb-dur-btn:hover  { border-color: #e63026; color: #f3f3f5; }
.ja-vb-dur-btn.is-sel { border-color: #e63026; background: rgba(230,48,38,.08); color: #fff; }

/* ---------- Design picker (step 3) ---------- */
.ja-vb-design-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}
.ja-vb-design-thumb {
	border: 3px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .2s, transform .2s;
	aspect-ratio: 210/120;
	position: relative;
}
.ja-vb-design-thumb:hover  { border-color: #e63026; transform: translateY(-2px); }
.ja-vb-design-thumb.is-sel { border-color: #e63026; }
.ja-vb-design-thumb .ja-vc {
	transform: scale(.45);
	transform-origin: top left;
	width: 222%;
	height: 222%;
	pointer-events: none;
}

/* ---------- Text form (step 4) ---------- */
.ja-vb-form {
	display: grid;
	gap: 20px;
}
.ja-vb-field label {
	display: block;
	color: #a0a0a8;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: 6px;
}
.ja-vb-field input,
.ja-vb-field textarea {
	width: 100%;
	background: #1a1a1e;
	border: 1px solid #2e2e38;
	border-radius: 6px;
	color: #f3f3f5;
	font-size: .95rem;
	padding: 10px 14px;
	outline: none;
	transition: border-color .2s;
	box-sizing: border-box;
}
.ja-vb-field input:focus,
.ja-vb-field textarea:focus { border-color: #e63026; }
.ja-vb-field textarea { resize: vertical; min-height: 80px; }

/* ---------- Preview step (step 5) ---------- */
.ja-vb-preview-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.ja-vb-preview-stage {
	width: 100%;
	max-width: 630px;
	aspect-ratio: 210/120;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.ja-vb-preview-stage .ja-vc {
	transform: scale(1);
	transform-origin: top left;
	width: 100%;
	height: 100%;
}
.ja-vb-preview-note {
	color: #70707a;
	font-size: .82rem;
	text-align: center;
}

/* ---------- Navigation buttons ---------- */
.ja-vb-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 32px;
}
.ja-vb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: 6px;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .04em;
	cursor: pointer;
	border: none;
	transition: background .2s, transform .15s;
}
.ja-vb-btn--back {
	background: #1e1e24;
	color: #a0a0a8;
}
.ja-vb-btn--back:hover { background: #2a2a32; }
.ja-vb-btn--next {
	background: #e63026;
	color: #fff;
}
.ja-vb-btn--next:hover   { background: #c82a20; }
.ja-vb-btn--next:active  { transform: scale(.97); }
.ja-vb-btn--confirm {
	background: #22c55e;
	color: #fff;
	font-size: 1rem;
	padding: 14px 36px;
}
.ja-vb-btn--confirm:hover { background: #16a34a; }
.ja-vb-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- Spinner overlay ---------- */
.ja-vb-spinner {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(10,10,11,.75);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 16px;
	color: #f3f3f5;
	font-size: 1rem;
}
.ja-vb-spinner.is-vis { display: flex; }
.ja-vb-spinner__ring {
	width: 48px;
	height: 48px;
	border: 4px solid #2e2e38;
	border-top-color: #e63026;
	border-radius: 50%;
	animation: vb-spin .7s linear infinite;
}
@keyframes vb-spin { to { transform: rotate(360deg); } }

/* ===================================================
   VOUCHER CARD (ja-vc) — 5 designs
   Base: 210×120mm rendered at 3px/mm = 630×360px
   =================================================== */

.ja-vc {
	width: 630px;
	height: 360px;
	position: relative;
	overflow: hidden;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	flex-shrink: 0;
}

/* Accent stripe */
.ja-vc__stripe {
	position: absolute;
	left: 0; top: 0;
	width: 18px; height: 100%;
}

/* Content area (padding-left for stripe) */
.ja-vc__body {
	position: absolute;
	left: 42px; top: 0;
	right: 204px;
	bottom: 0;
	display: flex;
	flex-direction: column;
	padding: 24px 0 20px;
}

.ja-vc__brand {
	font-size: 19px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: 4px;
}
.ja-vc__divider {
	width: 130px;
	height: 1px;
	margin-bottom: 8px;
}
.ja-vc__label {
	font-size: 8px;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .6;
	margin-bottom: 4px;
}
.ja-vc__recipient {
	font-size: 34px;
	font-weight: 900;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.05;
	margin-bottom: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ja-vc__experience {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.ja-vc__message {
	font-size: 10px;
	line-height: 1.55;
	opacity: .7;
	max-height: 52px;
	overflow: hidden;
	flex: 1;
}
.ja-vc__from {
	font-size: 9px;
	opacity: .5;
	margin-top: auto;
}

/* Code box — right side */
.ja-vc__code-box {
	position: absolute;
	right: 0; top: 0;
	width: 192px; height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 20px 12px;
	box-sizing: border-box;
}
.ja-vc__code-label {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
	opacity: .85;
}
.ja-vc__code-val {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: .12em;
	color: #fff;
	text-align: center;
}
.ja-vc__code-hint {
	font-size: 7.5px;
	color: #fff;
	opacity: .7;
	text-align: center;
	line-height: 1.6;
}
.ja-vc__code-site {
	font-size: 7px;
	color: #fff;
	opacity: .5;
	position: absolute;
	bottom: 10px;
}

/* --- Design 1: Dark / Red --- */
.ja-vc--1 { background: #0a0a0b; }
.ja-vc--1 .ja-vc__stripe   { background: #e63026; }
.ja-vc--1 .ja-vc__brand    { color: #e63026; }
.ja-vc--1 .ja-vc__divider  { background: #e63026; }
.ja-vc--1 .ja-vc__label    { color: #f3f3f5; }
.ja-vc--1 .ja-vc__recipient { color: #ffffff; }
.ja-vc--1 .ja-vc__experience { color: #e63026; }
.ja-vc--1 .ja-vc__message  { color: #b4b4ba; }
.ja-vc--1 .ja-vc__from     { color: #f3f3f5; }
.ja-vc--1 .ja-vc__code-box { background: #e63026; }

/* --- Design 2: Dark / Amber --- */
.ja-vc--2 { background: #0c0a08; }
.ja-vc--2 .ja-vc__stripe   { background: #ff6b00; }
.ja-vc--2 .ja-vc__brand    { color: #ff6b00; }
.ja-vc--2 .ja-vc__divider  { background: #ff6b00; }
.ja-vc--2 .ja-vc__label    { color: #f3f3f5; }
.ja-vc--2 .ja-vc__recipient { color: #ffffff; }
.ja-vc--2 .ja-vc__experience { color: #ff6b00; }
.ja-vc--2 .ja-vc__message  { color: #b4b4aa; }
.ja-vc--2 .ja-vc__from     { color: #f3f3f5; }
.ja-vc--2 .ja-vc__code-box { background: #ff6b00; }

/* --- Design 3: Dark / Purple --- */
.ja-vc--3 { background: #08080e; }
.ja-vc--3 .ja-vc__stripe   { background: #8b5cf6; }
.ja-vc--3 .ja-vc__brand    { color: #8b5cf6; }
.ja-vc--3 .ja-vc__divider  { background: #8b5cf6; }
.ja-vc--3 .ja-vc__label    { color: #f3f3f5; }
.ja-vc--3 .ja-vc__recipient { color: #ffffff; }
.ja-vc--3 .ja-vc__experience { color: #8b5cf6; }
.ja-vc--3 .ja-vc__message  { color: #b4b4c0; }
.ja-vc--3 .ja-vc__from     { color: #f3f3f5; }
.ja-vc--3 .ja-vc__code-box { background: #8b5cf6; }

/* --- Design 4: Dark / Green --- */
.ja-vc--4 { background: #080e08; }
.ja-vc--4 .ja-vc__stripe   { background: #22c55e; }
.ja-vc--4 .ja-vc__brand    { color: #22c55e; }
.ja-vc--4 .ja-vc__divider  { background: #22c55e; }
.ja-vc--4 .ja-vc__label    { color: #f3f3f5; }
.ja-vc--4 .ja-vc__recipient { color: #ffffff; }
.ja-vc--4 .ja-vc__experience { color: #22c55e; }
.ja-vc--4 .ja-vc__message  { color: #b4bab4; }
.ja-vc--4 .ja-vc__from     { color: #f3f3f5; }
.ja-vc--4 .ja-vc__code-box { background: #22c55e; }

/* --- Design 5: Dark / White/Silver --- */
.ja-vc--5 { background: #0e0e0e; }
.ja-vc--5 .ja-vc__stripe   { background: #f0f0f0; }
.ja-vc--5 .ja-vc__brand    { color: #f0f0f0; }
.ja-vc--5 .ja-vc__divider  { background: #f0f0f0; }
.ja-vc--5 .ja-vc__label    { color: #f3f3f5; }
.ja-vc--5 .ja-vc__recipient { color: #ffffff; }
.ja-vc--5 .ja-vc__experience { color: #f0f0f0; }
.ja-vc--5 .ja-vc__message  { color: #b4b4ba; }
.ja-vc--5 .ja-vc__from     { color: #f3f3f5; }
.ja-vc--5 .ja-vc__code-box { background: #2a2a2a; border-left: 1px solid #404040; }
.ja-vc--5 .ja-vc__code-val { color: #f0f0f0; }
.ja-vc--5 .ja-vc__code-label { color: #c0c0c0; }

/* ===================================================
   Responsive
   =================================================== */
@media (max-width: 600px) {
	.ja-vb-panel { padding: 24px 18px; }
	.ja-vb-steps { gap: 0; }
	.ja-vb-step__label { display: none; }
	.ja-vb-preview-stage { max-width: 100%; }
}