/* 全局样式 */
page {
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    padding-bottom: 10rpx;
}

.container {
    padding: 0 10rpx 40rpx;
}

/* 地图容器 */
.map-container {
    height: 110vh;
    border-radius: 16rpx;
    overflow: hidden;
    margin: 30rpx 20rpx;
    position: relative;
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
}

/* 卡片通用样式 */
.address-card,
.info-card {
    background: white;
    border-radius: 16rpx;
    padding: 30rpx;
    margin: 0 20rpx 30rpx;
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
    position: absolute;
    top: 500rpx;
    left: 30rpx;
    right: 30rpx;
}

/* 信息卡片 */
.info-row {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    justify-content: space-between;
}

.info-row:last-child {
    border-bottom: none;
}

.info-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 15rpx;
}

.info-label {
    font-size: 28rpx;
    color: #333;
    min-width: 120rpx;
    font-weight: 700;
}

.info-value {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    /* flex: 1; */
}

.info-value  text{
    font-size: 28rpx;
    color: #f25233;
    font-weight: 500;
    margin-left: 15rpx;
}

.copy-btn {
    width: 35rpx;
    height: 35rpx;
    float: right;
    margin-left: 20rpx;
}

/* 时间轴样式 */
.timeline {
    position: relative;
    background: white;
    border-radius: 16rpx;
    padding: 30rpx;
    margin: 0 20rpx;
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
    position: absolute;
    top: 820rpx;
    left: 30rpx;
    right: 30rpx;
}

.timeline-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    padding-left: 20rpx;
    position: relative;
}

.timeline-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 36rpx;
    background: #f25233;
    border-radius: 8rpx;
}

.timeline-item {
    position: relative;
    padding-left: 60rpx;
    margin-bottom: 40rpx;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: 20rpx;
    top: 8rpx;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background: #f25233;
    z-index: 2;
}

.timeline-item.active .timeline-dot {
    background: #ffffff;
    width: 15rpx;
    height: 15rpx;
    left: 22rpx;
    top: 6rpx;
    box-shadow: 0 0 0 6rpx #f25233;
}

.timeline-line {
    position: absolute;
    left: 29rpx;
    top: 28rpx;
    bottom: -40rpx;
    width: 2rpx;
    background: #f25233;
    z-index: 1;
}

.timeline-item:last-child .timeline-line {
    display: none;
}

.timeline-status {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 8rpx;
    color: #333;
}

.timeline-item.active .timeline-status {
    color: #333;
}

.timeline-desc {
    font-size: 28rpx;
    color: #a3a3a3;
    margin-bottom: 10rpx;
    line-height: 1.5;
}

.driver-details {
    background: #f9f9f9;
    border-radius: 10rpx;
    padding: 15rpx;
    margin: 15rpx 0;
}

.detail-item {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #555;
    margin-bottom: 10rpx;
}

.detail-item-phone {
    font-size: 28rpx;
    color: #f25233;
    margin-bottom: 10rpx;
    margin-left: 20rpx;
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-icon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
}

.timeline-time {
    font-size: 26rpx;
    color: #999;
}