.pedido-container{
    max-width:900px;
    margin:25px auto;
    padding:0 20px;
}

.pedido-header{
    margin-bottom:30px;
}

.pedido-header h1{
    font-size:38px;
    margin-bottom:5px;
}

.pedido-header p{
    color:#666;
}

.pedido-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:16px;
    padding:25px;
    margin-bottom:20px;
}

.pedido-card-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:20px;
}

.pedido-status-card{
    display:flex;
    align-items:center;
    gap:20px;
    padding:25px;
    border-radius:16px;
    margin-bottom:20px;
}

.status-shipping{
    background:#f5f8ff;
    border:1px solid #d7e3ff;
}

.status-icon{
    font-size:40px;
}

.status-label{
    font-size:12px;
    text-transform:uppercase;
    color:#666;
}

.status-info h2{
    margin:5px 0;
}

.rastreamento-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.btn-rastrear{
    background:#111;
    color:#fff;
    text-decoration:none;
    padding:12px 20px;
    border-radius:8px;
}

.pedido-resumo .linha{
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid #eee;
}

.pedido-resumo .total{
    font-size:18px;
    font-weight:700;
    border-bottom: none;
}

.pedido-produto{
    display:flex;
    align-items:center;
    gap:20px;
    margin: 25px 0;
}

.pedido-produto img{
    width:90px;
    border-radius:10px;
}

.produto-info{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.timeline{
    position:relative;
}

.timeline-item{
    position:relative;
    padding-left:35px;
    margin-bottom:30px;
}

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

.timeline-item:before{
    content:'';
    position:absolute;
    left:7px;
    top:12px;
    width:2px;
    height:150%;
    background:#ddd;
}
.timeline-item.active::before{
    background:#2ecc71;
}


.status-info h2{ font-size: 5rem; }

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

.timeline-dot{
    position:absolute;
    left:0;
    top:4px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#d8d8d8;
}

.timeline-item.active .timeline-dot{
    background:#2ecc71;
}

.timeline-content{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.timeline-content span{
    color:#777;
    font-size:14px;
}



@media (max-width: 500px){
    .pedido-status-card {
        padding: 10px 5px;
    }
    .status-icon {
        font-size: 25px;
    }
    #pedido .status-info{
        margin-left: -10px;
    }
    .status-info h2 {
        font-size: 3.4rem;
    }
    .pedido-header h1 {
        font-size: 27px;
        text-align: center;
    }
    .pedido-header p {
        text-align: center;
    }
}