/**
 * Atom: Buttons
 * Add passenger, remove passenger, submit button
 */

.add-passenger-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	padding: var(--space-2) var(--space-4);
	font-family: inherit;
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	color: var(--gray-600);
	background: var(--gray-50);
	border: 1.5px dashed var(--gray-300);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}

.add-passenger-btn:hover {
	background: var(--gray-100);
	border-color: var(--gray-400);
}

.add-passenger-btn svg {
	opacity: 0.5;
}

/* Dynamic passenger label with inline remove */
.passenger-label-row {
	display: flex;
	align-items: baseline;
	gap: var(--space-1);
}

.passenger-label-row .booking-label {
	margin-bottom: 0;
}

.remove-passenger-btn {
	width: 18px;
	height: 18px;
	border: none;
	background: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--gray-400);
	font-size: var(--text-lg);
	line-height: 1;
	transition: color var(--transition-fast);
	padding: 0;
	flex-shrink: 0;
}

.remove-passenger-btn:hover {
	color: var(--red);
}

/* Submit */
.reservation-submit {
	margin-top: var(--space-4);
	margin-bottom: var(--space-10);
}

.btn-reserve {
	width: 100%;
	max-width: 100%;
	padding: var(--space-3-5) var(--space-8);
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	border-radius: var(--radius-lg);
	background: var(--black);
	color: var(--white);
	border: none;
	transition: background var(--transition-normal);
}

.btn-reserve:hover {
	background: var(--black);
	color: var(--white);
}

.transferbooking label {
	font-weight: var(--font-normal);
}

/* Responsive */
@media (max-width: 768px) {
	.btn-reserve {
		font-size: var(--text-md);
		padding: var(--space-3) var(--space-6);
	}
}