@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

.dbd-wrap {
	--dbd-primary: #c0202f;
	--dbd-primary-dark: #000000;
	--dbd-primary-light: #fdeceb;
	--dbd-bg: #f7f7f8;
	--dbd-border: #e5e5e5;
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px 16px 28px;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #1a1a1a;
	box-sizing: border-box;
}
.dbd-wrap *, .dbd-wrap *:before, .dbd-wrap *:after { box-sizing: border-box; font-family: inherit; }

.dbd-header { text-align: center; margin-bottom: 14px; }
.dbd-header h1 { font-size: 26px; font-weight: 800; color: #000000; margin: 0 0 4px; letter-spacing: -0.5px; }
.dbd-subtitle { color: #6b6b6b; font-size: 14px; margin: 0; font-weight: 400; }

/* Progress bar */
.dbd-progress { display: flex; align-items: flex-start; justify-content: center; margin-bottom: 16px; flex-wrap: nowrap; gap: 4px; width: 100%; }
.dbd-progress-step { display: flex; flex-direction: column; align-items: center; width: 72px; flex: 1 1 0; min-width: 0; }
.dbd-progress-circle {
	width: 28px; height: 28px; border-radius: 50%; background: #d9d9d9; color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
	transition: background .2s ease;
}
.dbd-progress-label { font-size: 11px; color: #6b6b6b; margin-top: 4px; text-align: center; font-weight: 500; }
.dbd-progress-line { flex: 0 0 28px; height: 2px; background: #d9d9d9; margin-top: 14px; }
.dbd-progress-step.active .dbd-progress-circle { background: var(--dbd-primary); }
.dbd-progress-step.active .dbd-progress-label { color: var(--dbd-primary-dark); font-weight: 700; }
.dbd-progress-step.done .dbd-progress-circle { background: var(--dbd-primary-dark); }
.dbd-progress-line.done { background: var(--dbd-primary); }

/* Card */
.dbd-card {
	background: #fff; border: 1px solid var(--dbd-border); border-radius: 16px;
	padding: 18px 20px; margin-bottom: 16px;
}
.dbd-card-badge {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--dbd-primary); color: #fff; font-weight: 700; font-size: 13px;
	width: 26px; height: 26px; border-radius: 8px; margin-bottom: 8px;
}
.dbd-card h2 { margin: 0 0 4px; font-size: 19px; color: #000000; font-weight: 700; }
.dbd-muted { color: #6b6b6b; margin: 0 0 10px; font-size: 13px; font-weight: 400; }
.dbd-note, .dbd-info-box {
	background: var(--dbd-primary-light); color: var(--dbd-primary); padding: 12px 16px; border-radius: 10px;
	font-size: 13px; margin-top: 16px; font-weight: 500;
}

/* Step 1: body picker — legend fixed on the LEFT, image on the RIGHT,
   side by side at all but the smallest screens. */
.dbd-body-picker { display: flex; gap: 28px; align-items: center; justify-content: center; }
.dbd-legend {
	list-style: none; margin: 0; padding: 0;
	flex: 0 0 150px;
	display: flex; flex-direction: column; gap: 4px;
}
.dbd-legend li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap; }
.dbd-legend li:hover { background: #f7f7f8; }
.dbd-legend li.selected { background: var(--dbd-primary-light); font-weight: 700; color: var(--dbd-primary); }
.dbd-legend .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
.dbd-legend-check { width: 15px; height: 15px; flex: none; cursor: pointer; accent-color: var(--dbd-primary); }

/* Image wrapper hugs the <img> exactly (inline-block, no flex centering,
   no object-fit box) so hotspot percentages always map to the same visual
   point on the image no matter how small or large the screen is. */
.dbd-body-photo {
	position: relative;
	display: inline-block;
	line-height: 0;
	margin: 0 auto;
	flex: 0 1 auto;
}
.dbd-body-img {
	display: block;
	height: 38vh;
	max-height: 340px;
	min-height: 190px;
	width: auto;
	max-width: 100%;
}
.dbd-hotspot {
	position: absolute;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.35);
	transform: translate(-50%, -50%) scale(0.4);
	cursor: pointer;
	opacity: 0;
	transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
/* Dots stay invisible until picked, but a faint ring on hover shows the
   area is clickable so it's still discoverable without cluttering the
   diagram like the reference design. */
.dbd-hotspot:hover {
	opacity: .55;
	transform: translate(-50%, -50%) scale(1);
	box-shadow: 0 0 0 2px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.3);
}
.dbd-hotspot.selected {
	opacity: 1;
	border-color: #000;
	box-shadow: 0 0 0 3px rgba(192,32,47,0.35), 0 2px 8px rgba(0,0,0,0.45);
	transform: translate(-50%, -50%) scale(1.25);
}

/* Below tablet width there's no room for a left sidebar, so the legend
   becomes a compact horizontal chip row above the image instead. */
@media (max-width: 640px) {
	.dbd-body-picker { flex-direction: column; align-items: center; gap: 10px; }
	.dbd-legend { flex: none; flex-direction: row; flex-wrap: wrap; gap: 4px 8px; justify-content: center; width: 100%; }
	.dbd-legend li { font-size: 11px; padding: 3px 6px; }
	.dbd-body-img { height: 32vh; max-height: 280px; min-height: 170px; }
}
@media (max-width: 380px) {
	.dbd-body-img { height: 28vh; max-height: 230px; min-height: 150px; }
}

/* Progress bar on small screens: the fixed 72px step width + 28px lines
   need ~570px to sit on one row, so on narrow phones it was wrapping
   mid-line and throwing the numbers out of alignment. Below 640px we
   switch every step + connector to flexible, equal-width columns that
   are forced to stay on a single row (flex-wrap: nowrap), so the
   circles and lines always line up no matter how narrow the screen is. */
@media (max-width: 640px) {
	/* 5 fixed column tracks (step-line-step-line-step) are shared by both
	   rows, so column 1/3/5 in row 2 land exactly under column 1/3/5 in
	   row 1 — i.e. step 4 lines up under step 1, 5 under 2, 6 under 3.
	   Only the connector between step 3 and step 4 (the row break) is
	   hidden; every other connecting line stays visible. */
	.dbd-progress {
		display: grid;
		grid-template-columns: 1fr 22px 1fr 22px 1fr;
		row-gap: 16px;
		column-gap: 0;
		align-items: start;
		justify-items: center;
	}
	.dbd-progress-line:nth-child(6) { display: none; }
	.dbd-progress-step { width: auto; }
	.dbd-progress-line { width: 100%; margin-top: 12px; flex: none; }
	.dbd-progress-circle { width: 26px; height: 26px; font-size: 12px; }
	.dbd-progress-label { font-size: 10px; margin-top: 4px; line-height: 1.2; }
}


/* Step 2: slider */
.dbd-slider-wrap { padding: 24px 6px 4px; }
#dbd-duration-slider { width: 100%; accent-color: var(--dbd-primary); height: 6px; }
.dbd-slider-labels { position: relative; height: 16px; margin-top: 14px; }
.dbd-slider-labels span {
	position: absolute;
	top: 0;
	font-size: 12px;
	color: #9a9a9a;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}
.dbd-slider-labels span:hover { color: var(--dbd-primary); }
.dbd-slider-labels span.active { color: var(--dbd-primary); font-weight: 700; }
.dbd-slider-labels span[data-val="0"] { left: 0; }
.dbd-slider-labels span[data-val="1"] { left: 25%; transform: translateX(-50%); }
.dbd-slider-labels span[data-val="2"] { left: 50%; transform: translateX(-50%); }
.dbd-slider-labels span[data-val="3"] { left: 75%; transform: translateX(-50%); }
.dbd-slider-labels span[data-val="4"] { right: 0; }

/* On narrow screens the 5 labels don't fit on one absolute-positioned line
   without overlapping, so we switch to a wrapping row: all labels stay
   visible (so users can see what sliding changes), just flowing onto a
   second line if needed instead of overlapping. */
@media (max-width: 480px) {
	.dbd-slider-labels {
		position: static;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 6px;
		column-gap: 14px;
	}
	.dbd-slider-labels span {
		position: static;
		transform: none !important;
		font-size: 11px;
	}
}

/* Step 3: activities */
.dbd-activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dbd-activity {
	border: 1px solid var(--dbd-border); border-radius: 12px; padding: 20px 10px;
	display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
	font-size: 13px; text-align: center; transition: all .15s ease; font-weight: 500; color: #1a1a1a;
}
.dbd-activity input { display: none; }
.dbd-activity:hover { border-color: var(--dbd-primary); }
.dbd-activity:has(input:checked) { border-color: var(--dbd-primary); background: var(--dbd-primary-light); font-weight: 700; color: var(--dbd-primary); }
@media (max-width: 640px) { .dbd-activity-grid { grid-template-columns: repeat(2, 1fr); } }

/* Steps 4 & 5: dropzones */
.dbd-dropzone {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	border: 2px dashed var(--dbd-border); border-radius: 14px; padding: 40px 20px; cursor: pointer;
	color: #374151; text-align: center;
}
.dbd-dropzone:hover { border-color: var(--dbd-primary); background: #fef7f7; }
.dbd-drop-icon { font-size: 28px; color: var(--dbd-primary); }
.dbd-drop-sub { font-size: 12px; color: #9a9a9a; }
.dbd-file-list { list-style: none; margin: 12px 0 0; padding: 0; font-size: 13px; }
.dbd-file-list li { padding: 6px 10px; background: #f7f7f8; border-radius: 6px; margin-bottom: 6px; font-weight: 500; }

/* Step 6: booking fields */
.dbd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.dbd-field label { display: block; font-size: 13px; color: #374151; margin-bottom: 6px; font-weight: 600; }
.dbd-field input {
	width: 100%; padding: 10px 12px; border: 1px solid var(--dbd-border); border-radius: 8px; font-size: 14px;
	font-family: 'Poppins', sans-serif;
}
.dbd-field input:focus { outline: none; border-color: var(--dbd-primary); }
@media (max-width: 640px) { .dbd-grid-2 { grid-template-columns: 1fr; } }

/* Buttons */
.dbd-btn {
	border: none; border-radius: 10px; padding: 12px 24px; font-size: 15px; font-weight: 700;
	cursor: pointer; transition: opacity .15s ease; font-family: 'Poppins', sans-serif;
}
.dbd-btn-primary { background: var(--dbd-primary); color: #fff; }
.dbd-btn-primary:hover { opacity: .9; }
.dbd-btn-outline { background: #fff; border: 1px solid var(--dbd-border); color: #1a1a1a; }
.dbd-btn-outline:hover { border-color: var(--dbd-primary-dark); }
.dbd-submit-btn { width: 100%; }
.dbd-nav { display: flex; justify-content: space-between; margin-top: 12px; }

/* Success */
.dbd-success-card { text-align: center; }
.dbd-success-icon {
	width: 60px; height: 60px; border-radius: 50%; background: var(--dbd-primary); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 16px;
}
.dbd-dynamic-id {
	font-size: 22px; font-weight: 800; color: var(--dbd-primary); background: var(--dbd-primary-light);
	display: inline-block; padding: 10px 20px; border-radius: 10px; margin: 10px 0;
}