/* ABOUTME: Layout rules for booking wizard button containers and navigation controls. */
/* ABOUTME: Includes responsive nav label variants and control-buttons flex layout. */

.button-wrapper {
	display: flex;
	justify-content: flex-end;
}

/* Mobile base: short labels, auto height, touch targets */
.control-buttons {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	height: auto;
}

.control-buttons > * {
	flex-basis: 100%;
}

.control-buttons button {
	font-size: 1rem;
}

.booking-wizard-page .booking-form .button.danger {
	color: var(--color-pink);
}

.control-buttons button.back_button {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	min-height: 44px;
}

.control-buttons button.reset_button {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	min-height: 44px;
}

/* Mobile: show short labels, hide detail labels */
.nav-short {
	display: inline;
}

.nav-detail {
	display: none;
}

/* --- Desktop (>=1024px) --- */

@media screen and (min-width: 1024px) {
	.control-buttons {
		grid-area: 2 / 1 / 2 / 3;
		gap: 10px;
		height: 60px;
	}

	.control-buttons button {
		max-width: 450px;
		font-size: 1.2rem;
	}

	.control-buttons button.back_button {
		min-height: auto;
	}

	.control-buttons button.reset_button {
		min-height: auto;
	}

	/* Desktop: show detail labels, hide short labels */
	.nav-short {
		display: none;
	}

	.nav-detail {
		display: inline;
	}
}

/* --- Narrow mobile (<=400px) --- */

@media screen and (max-width: 400px) {
	.control-buttons {
		flex-direction: column;
	}

	.control-buttons button {
		max-width: 100%;
		width: 100%;
	}
}