/* ==========================================
   NEBO TRACK ORDER
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Poppins,sans-serif;
}

body{
    background:#F6F0E3;
    color:#0B1F3A;
}

/* Header */

header{
    position:sticky;
    top:0;
    z-index:1000;
    background:#0B1F3A;
    color:#fff;
    padding:20px;
    text-align:center;
    font-size:24px;
    font-weight:700;
}

/* Layout */

.container{
    width:100%;
    max-width:900px;
    margin:30px auto;
    padding:0 20px;
}

/* Cards */

.card,
.order-card{
    background:#fff;
    padding:30px;
    margin-bottom:30px;
}

/* Headings */

.card h1{
    font-size:32px;
    margin-bottom:12px;
    color:#0B1F3A;
}

.subtitle{
    color:#666;
    line-height:1.7;
    margin-bottom:24px;
}

/* Search */

.search{
    display:flex;
    gap:14px;
}

.search input{
    flex:1;
    height:56px;
    border:1px solid #ddd;
    padding:0 18px;
    font-size:16px;
    outline:none;
    background:#fff;
}

.search button{
    height:56px;
    padding:0 26px;
    border:none;
    background:#0B1F3A;
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
}

/* Status */

.order-top{
    margin-bottom:25px;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#0B1F3A;
    color:#fff;
    padding:12px 20px;
    font-size:14px;
    font-weight:700;
}

.badge i{
    font-size:10px;
}

/* Order Number */

.order-number-box{
    background:#F6F0E3;
    padding:18px;
    margin-bottom:35px;
}

.label{
    display:block;
    color:#666;
    font-size:13px;
    margin-bottom:8px;
}

#displayOrder{
    font-size:24px;
    color:#0B1F3A;
}

/* Timeline */

.timeline{
    position:relative;
    padding-left:42px;
}

.timeline::before{
    content:"";
    position:absolute;
    left:14px;
    top:0;
    bottom:0;
    width:4px;
    background:#ddd;
}

/* Step */

.step{
    position:relative;
    display:flex;
    margin-bottom:40px;
}

.step:last-child{
    margin-bottom:0;
}

.dot{
    width:30px;
    height:30px;
    background:#ddd;
    position:absolute;
    left:-42px;
    top:0;
    z-index:2;
}

.step.active .dot{
    background:#0B1F3A;
}

.content h3{
    font-size:20px;
    margin-bottom:8px;
    color:#0B1F3A;
}

.content p{
    color:#666;
    line-height:1.7;
}

/* Moving Ball */

#progressBall{
    position:absolute;
    left:6px;
    width:20px;
    height:20px;
    background:#16A34A;
    z-index:5;
    transition:.4s;
}

/* Result */

.result{
    display:none;
}

.result.show{
    display:block;
}

/* Mobile */

@media(max-width:768px){

.container{
    padding:18px;
}

.card,
.order-card{
    padding:22px;
}

.card h1{
    font-size:26px;
}

.search{
    flex-direction:column;
}

.search button{
    width:100%;
}

.content h3{
    font-size:18px;
}

}

/* Awaiting Approval & Order Confirmed */

#step0 .dot,
#step1 .dot{
    background:#D32F2F;
    animation:redBlink 1s infinite;
}

#step0 .content h3,
#step1 .content h3{
    color:#D32F2F;
    animation:redBlinkText 1s infinite;
}

@keyframes redBlink{

    0%,100%{
        background:#D32F2F;
        opacity:1;
    }

    50%{
        background:#FF6B6B;
        opacity:.4;
    }

}

@keyframes redBlinkText{

    0%,100%{
        color:#D32F2F;
        opacity:1;
    }

    50%{
        color:#FF6B6B;
        opacity:.4;
    }

}
#orderNumber{
    display:block;
    width:100%;
    height:56px;
    padding:0 18px;
    border:1px solid #ddd;
    outline:none;
    background:#fff;
    font-size:18px;
    color:#0B1F3A;
    margin-bottom:14px;
}
/* ==========================================
TRACK SEARCH
========================================== */

.track-search-card{

    background:#fff;

    padding:28px;

    border:1px solid #E8E8E8;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.track-label{

    font-size:15px;

    font-weight:700;

    color:#0B1F3A;

}

.track-search{

    display:flex;

    align-items:center;

    background:#F7F7F7;

    border:2px solid #E4E4E4;

    height:64px;

    transition:.25s;

}

.track-search:focus-within{

    border-color:#0B1F3A;

    background:#fff;

}

.track-icon{

    width:60px;

    display:flex;

    justify-content:center;

    color:#888;

    font-size:20px;

}

.track-search input{

    flex:1;

    height:100%;

    border:none;

    outline:none;

    background:none;

    font-size:18px;

    color:#0B1F3A;

    padding-right:18px;

}

.track-search input::placeholder{

    color:#9A9A9A;

}

.track-button{

    width:100%;

    height:60px;

    border:none;

    background:#0B1F3A;

    color:#fff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.track-button:hover{

    background:#14345D;

}

.track-button i{

    margin-right:10px;

}