/*
=====================================================
 Tracking Order Frontend CSS
=====================================================
*/


:root{

    --tracking-color:#0066ff;

}





/*
=====================================================
 Wrapper
=====================================================
*/


.tracking-wrapper{


    max-width:700px;

    margin:40px auto;

    padding:20px;

    font-family:

    Arial,
    Helvetica,
    sans-serif;


}






/*
=====================================================
 Header
=====================================================
*/


.tracking-header{


    text-align:center;

    margin-bottom:30px;


}



.tracking-header h2{


    font-size:30px;

    font-weight:700;

    margin-bottom:10px;


}



.tracking-header p{


    color:#666;

    font-size:15px;


}






/*
=====================================================
 Search Box
=====================================================
*/


.tracking-box{


    background:#fff;

    padding:20px;

    border-radius:15px;

    box-shadow:

    0 5px 20px rgba(0,0,0,.06);


}




.tracking-form{


    display:flex;

    gap:12px;


}




.tracking-form input{


    flex:1;

    height:48px;

    padding:0 15px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:15px;


}



.tracking-form input:focus{


    outline:none;

    border-color:var(--tracking-color);


}





.tracking-form button{


    background:

    var(--tracking-color);


    color:white;

    border:none;

    padding:0 25px;

    border-radius:8px;

    cursor:pointer;

    font-weight:600;


}



.tracking-form button:hover{


    opacity:.9;


}






/*
=====================================================
 Result Card
=====================================================
*/


.tracking-card{


    margin-top:30px;

    background:#fff;

    padding:30px;

    border-radius:18px;


    box-shadow:

    0 8px 30px rgba(0,0,0,.08);


}







.tracking-top{


    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:25px;


}





.tracking-top h3{


    margin:0;

    font-size:22px;


}






/*
=====================================================
 Current Status
=====================================================
*/


.tracking-status{


    background:#e8f1ff;

    color:#0066ff;

    padding:10px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:700;


}







/*
=====================================================
 Shipment Info
=====================================================
*/


.tracking-info{


    display:grid;

    grid-template-columns:

    repeat(3,1fr);


    gap:15px;

    margin-bottom:30px;


}





.tracking-info div{


    background:#f8f9fb;

    padding:15px;

    border-radius:10px;


}





.tracking-info strong{


    display:block;

    font-size:13px;

    color:#777;

    margin-bottom:5px;


}





.tracking-info span{


    font-size:14px;

    font-weight:600;

    color:#222;


}






.timeline-title{


    margin-bottom:25px;

    font-size:20px;


}






/*
=====================================================
 Vertical Tracking Timeline
=====================================================
*/


.order-tracking-steps{


    position:relative;

    padding-left:35px;


}






.order-tracking-steps:before{


    content:"";

    position:absolute;

    left:12px;

    top:10px;

    bottom:10px;

    width:3px;

    background:#ddd;


}








.tracking-step{


    position:relative;

    display:flex;

    gap:20px;

    margin-bottom:35px;


}







.step-dot{


    position:absolute;

    left:-35px;

    top:0;


    width:28px;

    height:28px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#ddd;

    color:#fff;

    font-size:14px;

    font-weight:bold;


    z-index:2;


}





.tracking-step.completed .step-dot{


    background:#22c55e;


}





.tracking-step.current .step-dot{


    background:var(--tracking-color);


    box-shadow:

    0 0 0 6px rgba(0,102,255,.15);


}








.step-content{


    background:#fafafa;

    width:100%;

    padding:15px 18px;

    border-radius:12px;


}







.step-content h4{


    margin:0 0 8px;

    font-size:17px;


}






.step-content p{


    margin:0 0 6px;

    color:#666;

    font-size:14px;


}





.step-content span{


    color:#999;

    font-size:13px;


}







/*
=====================================================
 Empty / Loader / Error
=====================================================
*/


.tracking-loader{


    margin-top:20px;

    padding:20px;

    text-align:center;

    color:var(--tracking-color);

    font-weight:bold;


}





.tracking-empty{


    background:#f8f8f8;

    padding:20px;

    border-radius:10px;

    text-align:center;

    color:#777;


}







.tracking-error{


    margin-top:20px;

    background:#ffe8e8;

    color:#c62828;

    padding:15px;

    border-radius:10px;

    font-weight:600;


}








/*
=====================================================
 Mobile Responsive
=====================================================
*/


@media(max-width:700px){



    .tracking-wrapper{


        padding:15px;

        margin:20px auto;


    }




    .tracking-form{


        flex-direction:column;


    }



    .tracking-form button{


        height:48px;

    }




    .tracking-top{


        flex-direction:column;

        align-items:flex-start;


    }





    .tracking-info{


        grid-template-columns:1fr;


    }





    .tracking-card{


        padding:20px;


    }



}