.track-hero{
padding:100px 0;
text-align:center;
background:#050505;
}

.track-hero h1{
font-size:60px;
color:#ffffff;
margin-bottom:15px;
}

.track-hero p{
color:#bbb;
max-width:700px;
margin:auto;
}

.track-section{
padding:80px 0;
}

.track-box{
max-width:650px;
margin:auto;
background:#111;
padding:40px;
border:1px solid rgba(255,255,255,.08);
}

.track-box h2{
text-align:center;
margin-bottom:25px;
}

.track-box form{
display:flex;
flex-direction:column;
gap:15px;
}

.track-box input{
padding:15px;
background:#000;
border:1px solid #333;
color:#fff;
outline:none;
}

.track-box input:focus{
border-color:#ffffff;
}

.track-btn{
padding:15px;
background:#ffffff;
border:none;
color:#fff;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.track-btn:hover{
background:#e0e0e0;
}

.track-result { margin-top: 30px; }
.track-loading { text-align: center; padding: 30px; color: #ffffff; font-size: 18px; }
.track-error { text-align: center; padding: 20px; color: #ff4444; background: #1a0000; border: 1px solid #ff4444; border-radius: 8px; }
.track-card { background: #111; border: 1px solid #333; border-radius: 12px; padding: 30px; }
.track-status-bar { text-align: center; margin-bottom: 20px; }
.track-status-badge { display: inline-block; padding: 8px 24px; border-radius: 20px; font-weight: 600; font-size: 14px; text-transform: uppercase; background: #ffffff; color: #000; }
.status-pending .track-status-badge { background: #f59e0b; }
.status-processing .track-status-badge { background: #3b82f6; }
.status-shipped .track-status-badge { background: #8b5cf6; }
.status-delivered .track-status-badge { background: #10b981; }
.status-cancelled .track-status-badge { background: #ef4444; }
.track-details p { margin: 8px 0; color: #ccc; font-size: 15px; }
.track-details strong { color: #fff; }
.track-items { margin-top: 15px; padding-top: 15px; border-top: 1px solid #333; }
.track-items ul { list-style: none; padding: 0; margin: 10px 0 0; }
.track-items li { padding: 6px 0; color: #aaa; font-size: 14px; border-bottom: 1px solid #222; }
.track-timeline { display: flex; justify-content: space-between; margin: 25px 0; padding: 0; position: relative; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.track-timeline::before { content: ""; position: absolute; top: 14px; left: 10%; right: 10%; height: 3px; background: #333; z-index: 0; }
.tl-step { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; min-width:60px; }
.tl-step span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #222; border: 3px solid #333; color: #666; font-size: 0; margin-bottom: 8px; }
.tl-step.completed span { background: #ffffff; border-color: #ffffff; }
.tl-step.completed span::after { content: "\\2713"; font-size: 14px; color: #000; }
.tl-step span + span { font-size: 12px; color: #666; }
.tl-step.completed::after { content: ""; }
.track-help { text-align: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid #333; color: #888; }
.track-help a { color: #ffffff; text-decoration: none; }

@media(max-width:768px){

.track-hero h1{
font-size:42px;
}

.track-box{
padding:25px;
}

.track-timeline::before{left:5%;right:5%;}
.tl-step{min-width:50px;}

}