/**
 * Molecule: Route Visualization
 * Vertical dot-line connecting origin and destination
 */

.transfer-route-section {
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-4);
}

.transfer-route-section:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.transfer-route-section + .transfer-route-section {
	border-top: 1px solid var(--gray-200);
	padding-top: var(--space-6);
	margin-top: var(--space-6);
}

.transfer-route-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	color: var(--gray-600);
	margin-bottom: var(--space-3-5);
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.transfer-route-label::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	flex-shrink: 0;
}

/* Route visualization: dots + vertical line */
.transfer-route {
	display: flex;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.transfer-route-line {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: var(--space-1);
	min-width: 14px;
}

.route-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--green);
	flex-shrink: 0;
}

.route-dot-start {
	background: var(--green);
}

.route-dot-end {
	background: var(--blue);
}

.route-line {
	width: 2px;
	flex: 1;
	min-height: 24px;
	background: var(--gray-300);
	margin: var(--space-1) 0;
}

.transfer-route-details {
	flex: 1;
}

.route-point {
	margin-bottom: var(--space-3);
}

.route-point:last-child {
	margin-bottom: 0;
}

.route-point-text {
	display: block;
	font-size: var(--text-md);
	font-weight: var(--font-semibold);
	color: var(--black);
	line-height: 1.3;
}

.route-point-date {
	font-size: var(--text-sm);
	color: var(--gray-500);
	margin-top: 2px;
}

/* Responsive */
@media (max-width: 480px) {
	.transfer-route {
		gap: var(--space-2-5);
	}
}