.spkg-wizard {
	--spkg-primary: #6c4ef5;
	--spkg-success: #2ecc71;
	--spkg-radius: 24px;
	--spkg-map-height: 460px;
	--spkg-overlay-size: 60%;
	--spkg-pad-x: 24px;
	--spkg-pad-y: 28px;
	max-width: 480px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	width: 100%;
}
.spkg-wizard, .spkg-wizard * { box-sizing: border-box; }

.spkg-card { background: #fff; border-radius: var(--spkg-radius); padding: var(--spkg-pad-y) var(--spkg-pad-x); box-shadow: 0 4px 24px rgba(0,0,0,0.06); overflow: hidden; }
.spkg-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.spkg-back { background: #f2f2f5; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 18px; cursor: pointer; flex: none; }
.spkg-header h2 { margin: 0; font-size: 26px; font-weight: 800; color: #1a1a2e; }
.spkg-step-label { margin: 2px 0 0; color: #8a8a9a; font-size: 14px; }
.spkg-progress { display: flex; gap: 8px; margin-bottom: 22px; }
.spkg-bar { flex: 1; height: 6px; border-radius: 4px; background: #eceaf5; }
.spkg-bar.active { background: var(--spkg-primary); }
.spkg-step { display: none; }
.spkg-step.active { display: block; }
.spkg-step h3 { font-size: 20px; font-weight: 700; margin: 0 0 16px; color: #1a1a2e; }

.spkg-vehicle-card { display: flex; align-items: center; gap: 14px; border: 2px solid #eceaf5; border-radius: calc(var(--spkg-radius) * 0.65); padding: 14px 16px; margin-bottom: 12px; cursor: pointer; transition: border-color .15s; }
.spkg-vehicle-card.selected { border-color: var(--spkg-primary); box-shadow: 0 0 0 1px var(--spkg-primary) inset; }
.spkg-vehicle-icon { font-size: 30px; line-height: 1; flex: none; }
.spkg-vehicle-info { flex: 1; min-width: 0; }
.spkg-vehicle-title { font-weight: 700; color: #1a1a2e; }
.spkg-badge { background: var(--spkg-primary); color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 10px; vertical-align: middle; }
.spkg-vehicle-sub { color: #8a8a9a; font-size: 13px; margin-top: 2px; }
.spkg-vehicle-price { text-align: right; font-size: 13px; color: #8a8a9a; flex: none; }
.spkg-vehicle-price strong { display: block; color: var(--spkg-primary); font-size: 16px; }

.spkg-input { width: 100%; border: 2px solid #eceaf5; border-radius: calc(var(--spkg-radius) * 0.5); padding: 14px 16px; font-size: 15px; }
.spkg-input:focus { outline: none; border-color: var(--spkg-primary); }

/* ===================================================================
   Step 2: full-bleed map with a floating pickup/destination + live
   estimate panel on top of it (bottom sheet on phones, side panel on
   tablet/desktop).
   =================================================================== */

.spkg-step-map {
	position: relative;
	height: var(--spkg-map-height);
	min-height: 340px;
	margin: 0 calc(var(--spkg-pad-x) * -1);
	width: calc(100% + var(--spkg-pad-x) * 2);
	border-radius: calc(var(--spkg-radius) * 0.7);
	overflow: hidden;
	background: #f4f1fd;
}

.spkg-step2-footer { margin-top: 16px; }

.spkg-map-full { position: absolute; inset: 0; background: #f4f1fd; }
.spkg-map-full:empty:before {
	content: 'Loading map…';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #8a8a9a;
	font-size: 13px;
}
.spkg-map-full.spkg-map-broken { display: none; }

.spkg-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: var(--spkg-overlay-size);
	background: #fff;
	border-radius: 20px 20px 0 0;
	padding: 12px 20px 20px;
	box-shadow: 0 -10px 30px rgba(0,0,0,.14);
	overflow-y: auto;
	transition: max-height .25s ease, flex-basis .25s ease;
}

.spkg-overlay-bar { display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 10px; }
.spkg-overlay-handle { width: 36px; height: 4px; background: #e2e0ec; border-radius: 3px; cursor: pointer; }
.spkg-overlay-toggle {
	position: absolute;
	right: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	background: #f4f1fd;
	color: var(--spkg-primary);
	border: none;
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.spkg-overlay-toggle-icon { display: inline-block; transition: transform .2s ease; font-size: 10px; }
.spkg-overlay.spkg-minimized .spkg-overlay-toggle-icon { transform: rotate(180deg); }

/* Minimized: collapse the panel down to just the handle/toggle bar so the
   full map is visible underneath. */
.spkg-overlay.spkg-minimized {
	max-height: 54px;
	overflow: hidden;
	padding-bottom: 14px;
}
.spkg-overlay.spkg-minimized .spkg-field-stack,
.spkg-overlay.spkg-minimized .spkg-overlay-actions,
.spkg-overlay.spkg-minimized .spkg-live-estimate,
.spkg-overlay.spkg-minimized .spkg-error,
.spkg-overlay.spkg-minimized .spkg-review {
	display: none;
}

.spkg-field-stack { position: relative; margin-bottom: 12px; }
.spkg-field-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.spkg-field-row + .spkg-field-row { border-top: 1px solid #eceaf5; }
.spkg-field-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.spkg-field-input.spkg-input { flex: 1; min-width: 0; border: none; padding: 0; border-radius: 0; font-size: 15px; background: transparent; }
.spkg-field-input.spkg-input:focus { outline: none; }
.spkg-field-check {
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--spkg-success);
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	opacity: 0;
	transform: scale(.5);
	transition: opacity .15s ease, transform .15s ease;
}
.spkg-field-row.spkg-field-set .spkg-field-check { opacity: 1; transform: scale(1); }

.spkg-overlay-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.spkg-locate-btn { display: flex; align-items: center; gap: 8px; width: 100%; background: #f4f1fd; color: var(--spkg-primary); border: none; border-radius: calc(var(--spkg-radius) * 0.5); padding: 11px 16px; font-weight: 600; font-size: 13px; cursor: pointer; }
.spkg-locate-btn:disabled { opacity: .6; cursor: not-allowed; }

.spkg-map-target { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #8a8a9a; }
.spkg-target-btn { border: 2px solid #eceaf5; background: #fff; border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: #6a6a7a; cursor: pointer; }
.spkg-target-btn.active { border-color: var(--spkg-primary); color: var(--spkg-primary); background: #f4f1fd; }

.spkg-live-estimate { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .25s ease, opacity .25s ease, margin .25s ease; }
.spkg-live-estimate.visible { max-height: 200px; opacity: 1; margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid #eceaf5; }
.spkg-live-row { display: flex; justify-content: space-between; font-size: 13px; color: #6a6a7a; padding: 3px 0; }
.spkg-live-total { margin-top: 2px; }
.spkg-live-total span { color: #1a1a2e; font-weight: 700; font-size: 14px; }
.spkg-live-total strong { color: var(--spkg-primary); font-size: 19px; }

/* Places Autocomplete dropdown sits above the card */
.pac-container { z-index: 10000; }

.spkg-btn { width: 100%; border: none; border-radius: calc(var(--spkg-radius) * 0.6); padding: 16px; font-size: 16px; font-weight: 700; color: #fff; background: var(--spkg-primary); cursor: pointer; margin-top: 14px; }
.spkg-btn:disabled { background: #c9bdf7; cursor: not-allowed; }

.spkg-summary { border-radius: calc(var(--spkg-radius) * 0.65); }
.spkg-row { display: flex; justify-content: space-between; padding: 10px 0; color: #1a1a2e; }
.spkg-row span { color: #8a8a9a; }
.spkg-total strong { color: var(--spkg-primary); font-size: 20px; }
.spkg-error { color: #e0455a; font-size: 13px; min-height: 16px; margin-top: 8px; }
.spkg-success { text-align: center; padding: 30px 0; }
.spkg-success h3 { font-size: 20px; margin-bottom: 8px; color: #1a1a2e; }
.spkg-success p { color: #6a6a7a; }

/* ---------- Responsive ---------- */

/* Small phones: tighter card padding (bleed math follows automatically
   via the --spkg-pad-* variables). */
@media (max-width: 380px) {
	.spkg-wizard { --spkg-pad-x: 16px; --spkg-pad-y: 20px; }
	.spkg-header h2 { font-size: 22px; }
	.spkg-overlay { padding: 10px 16px 16px; }
}

/* Tablets and up: the map + overlay switch from a bottom sheet to a
   side-by-side panel, and everything else gets a little more room. */
@media (min-width: 700px) {
	.spkg-wizard { --spkg-pad-x: 40px; --spkg-pad-y: 36px; max-width: 720px; }
	.spkg-header h2 { font-size: 30px; }
	.spkg-vehicle-card { padding: 18px 20px; }
	.spkg-btn { font-size: 17px; }

	.spkg-step-map {
		display: flex;
		flex-direction: row;
		height: calc(var(--spkg-map-height) + 40px);
		border-radius: calc(var(--spkg-radius) * 0.7);
	}
	.spkg-map-full { position: relative; flex: 1 1 auto; }
	.spkg-overlay {
		position: relative;
		flex: 0 0 clamp(240px, var(--spkg-overlay-size), 480px);
		max-height: none;
		height: 100%;
		border-radius: 0;
		box-shadow: none;
		border-left: 1px solid #eceaf5;
		padding: 24px;
	}
	.spkg-overlay-handle { display: none; }
	.spkg-overlay-bar { justify-content: flex-end; margin-bottom: 16px; }
	.spkg-overlay-toggle { position: static; }

	/* Minimized on desktop: shrink the side panel to a thin strip instead
	   of capping its height, so the map gets almost the full width. */
	.spkg-overlay.spkg-minimized {
		flex-basis: 64px;
		max-height: none;
		padding: 20px 10px;
		overflow: hidden;
	}
	.spkg-overlay.spkg-minimized .spkg-overlay-bar { justify-content: center; }
	.spkg-overlay.spkg-minimized .spkg-overlay-toggle-text { display: none; }
}

/* Desktop: center the whole widget with breathing room and a bigger map */
@media (min-width: 1024px) {
	.spkg-wizard { max-width: 860px; margin: 40px auto; }
	.spkg-step-map { height: calc(var(--spkg-map-height) + 100px); }
	.spkg-overlay:not(.spkg-minimized) { padding: 28px; }
}