/* =====================================================
   TRACK ORDER PAGE - PROFESSIONAL UI
===================================================== */

.track-page{
    min-height:100vh;
    padding:45px 15px 80px;
    background:
        radial-gradient(circle at 10% 0%, rgba(212,175,55,.10), transparent 28%),
        linear-gradient(180deg,#fafafa 0%,#f4f5f7 100%);
}

.track-container{
    max-width:1050px;
    margin:auto;
}


/* =====================================================
   HEADER
===================================================== */

.track-heading{
    text-align:center;
    margin-bottom:30px;
}

.track-heading .track-icon{
    width:60px;
    height:60px;
    margin:0 auto 14px;
    margin-top:35px;
    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#1c1c1c;
    color:#d4af37;

    font-size:25px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.14);
}

.track-heading h1{
    font-size:28px;
    font-weight:700;
    margin:0 0 7px;
    color:#202124;
}

.track-heading p{
    margin:0;
    color:#6b7280;
    font-size:14px;
}


/* =====================================================
   SEARCH BOX
===================================================== */

.track-search-card{

    background:rgba(255,255,255,.95);

    border-radius:18px;

    padding:14px;

    border:1px solid #e8e8e8;

    box-shadow:
        0 12px 35px rgba(0,0,0,.06);

    margin-bottom:28px;
}

.track-search-form{
    display:flex;
    gap:10px;
}

.track-search-input{

    height:54px;

    border-radius:12px;

    border:1px solid #d9dce1;

    padding:0 18px;

    font-size:15px;

    color:#222;

    flex:1;

    outline:none;

    background:#fff;

    transition:.25s ease;
}

.track-search-input::placeholder{
    color:#9ca3af;
}

.track-search-input:focus{

    border-color:#d4af37;

    box-shadow:
        0 0 0 4px rgba(212,175,55,.12);
}


.track-search-btn{

    height:54px;

    border:none;

    background:#1b1b1b;

    color:#fff;

    border-radius:12px;

    padding:0 28px;

    font-size:15px;

    font-weight:600;

    transition:.25s ease;

    min-width:155px;

    box-shadow:
        0 6px 18px rgba(0,0,0,.12);
}

.track-search-btn:hover{

    background:#000;

    transform:translateY(-1px);
}

.track-search-btn:active{
    transform:translateY(0);
}

.track-search-btn:disabled{
    opacity:.65;
    cursor:not-allowed;
    transform:none;
}


/* =====================================================
   RESULT AREA
===================================================== */

#trackResult{
    display:none;
}


/* =====================================================
   ORDER CARD
===================================================== */

.order-track-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #e8e8e8;

    box-shadow:
        0 15px 45px rgba(0,0,0,.07);
}


/* =====================================================
   ORDER TOP
===================================================== */

.order-track-top{

    padding:22px 28px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    border-bottom:1px solid #ececec;

    background:#fff;
}


.order-number-title{

    font-size:11px;

    text-transform:uppercase;

    color:#8a8f98;

    letter-spacing:.7px;

    font-weight:600;

    margin-bottom:6px;
}


.order-number{

    font-size:18px;

    font-weight:700;

    color:#252525;

    letter-spacing:.2px;
}


.status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 15px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    background:#fff4d6;

    color:#9a6b00;

    border:1px solid #f2d88a;
}


/* =====================================================
   CURRENT STATUS
===================================================== */

.current-status{

    padding:23px 28px;

    background:
        linear-gradient(
            135deg,
            #181818 0%,
            #292929 100%
        );

    color:#fff;

    display:flex;

    align-items:center;

    gap:16px;
}


.status-icon{

    width:52px;

    height:52px;

    min-width:52px;

    border-radius:15px;

    background:#d4af37;

    color:#171717;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:21px;

    box-shadow:
        0 7px 18px rgba(212,175,55,.20);
}


.status-small{

    font-size:10px;

    color:#b7b7b7;

    text-transform:uppercase;

    letter-spacing:.8px;

    font-weight:600;
}


.status-big{

    font-size:21px;

    font-weight:700;

    margin-top:4px;

    color:#fff;
}


/* =====================================================
   PROGRESS
===================================================== */

.order-progress{

    padding:30px 30px 20px;

    background:#fff;
}


.progress-title{

    font-size:18px;

    font-weight:700;

    color:#252525;

    margin:0 0 28px;
}


/* =====================================================
   TIMELINE
===================================================== */

.timeline{

    position:relative;

    padding-left:55px;
}


/* BACKGROUND LINE */

.timeline::before{

    content:"";

    position:absolute;

    left:18px;

    top:20px;

    bottom:22px;

    width:2px;

    background:#e6e7e9;

    border-radius:5px;
}


/* TIMELINE ITEM */

.timeline-item{

    position:relative;

    padding-bottom:30px;

    min-height:48px;
}


.timeline-item:last-child{
    padding-bottom:5px;
}


/* ACTIVE PROGRESS LINE */

.timeline-item.active::after{

    content:"";

    position:absolute;

    left:-37px;

    top:36px;

    width:2px;

    height:calc(100% - 10px);

    background:#d4af37;

    z-index:1;
}


/* LAST ITEM */

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


/* DOT */

.timeline-dot{

    position:absolute;

    left:-55px;

    top:0;

    width:38px;

    height:38px;

    border-radius:50%;

    background:#f1f2f3;

    color:#9aa0a6;

    border:3px solid #fff;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:3;

    font-size:14px;

    box-shadow:
        0 3px 10px rgba(0,0,0,.08);
}


/* ACTIVE DOT */

.timeline-item.active .timeline-dot{

    background:#1c1c1c;

    color:#fff;

    box-shadow:
        0 0 0 4px rgba(212,175,55,.16),
        0 5px 14px rgba(0,0,0,.12);
}


/* CURRENT / LATEST STATUS */

.timeline-item.current .timeline-dot{

    background:#d4af37;

    color:#1c1c1c;

    box-shadow:
        0 0 0 5px rgba(212,175,55,.16),
        0 6px 16px rgba(0,0,0,.10);
}


/* TEXT */

.timeline-title{

    font-size:15px;

    font-weight:700;

    color:#2b2b2b;

    margin-bottom:4px;
}


.timeline-item.active .timeline-title{
    color:#181818;
}


.timeline-text{

    font-size:13px;

    color:#858b94;

    line-height:1.5;

    margin:0;
}


/* =====================================================
   ORDER INFO
===================================================== */

.order-extra-info{

    margin:8px 28px 28px;

    padding:22px;

    border-radius:16px;

    background:#f8f9fa;

    border:1px solid #e9eaec;
}


.order-info-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;
}


.info-label{

    font-size:10px;

    text-transform:uppercase;

    color:#8b9199;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:7px;
}


.info-value{

    font-size:14px;

    color:#252525;

    font-weight:600;

    word-break:break-word;
}


/* =====================================================
   LOADING
===================================================== */

.track-loading{

    display:none;

    text-align:center;

    padding:45px 20px;

    background:#fff;

    border-radius:18px;

    border:1px solid #eee;
}


.track-spinner{

    width:42px;

    height:42px;

    border:4px solid #ececec;

    border-top-color:#d4af37;

    border-radius:50%;

    animation:spin .8s linear infinite;

    margin:0 auto 15px;
}


@keyframes spin{

    to{
        transform:rotate(360deg);
    }

}


/* =====================================================
   ERROR
===================================================== */

.track-error{

    display:none;

    padding:20px;

    background:#fff;

    border-radius:16px;

    border:1px solid #f3c8cc;

    color:#842029;

    text-align:center;

    box-shadow:
        0 8px 30px rgba(0,0,0,.05);
}


/* =====================================================
   EMPTY STATE
===================================================== */

.track-empty{

    text-align:center;

    padding:50px 20px;

    background:#fff;

    border-radius:18px;

    border:1px solid #eee;

    color:#777;
}


.track-empty i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:60px;

    height:60px;

    margin:0 auto 15px;

    border-radius:18px;

    background:#fff7df;

    color:#c99c1b;

    font-size:25px;
}


.track-empty h5{

    color:#222;

    font-weight:700;

    margin-bottom:6px;
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

    .track-page{

        padding:
            22px 10px
            90px;

        background:
            linear-gradient(
                180deg,
                #f7f8fa,
                #f2f3f5
            );
    }


    .track-container{
        max-width:100%;
    }


    /* HEADER */

    .track-heading{

        margin-bottom:20px;
    }


    .track-heading .track-icon{

        width:52px;

        height:52px;

        border-radius:16px;

        font-size:21px;

        margin-bottom:10px;
    }


    .track-heading h1{

        font-size:23px;

        margin-bottom:5px;
    }


    .track-heading p{

        font-size:12px;

        padding:0 10px;

        line-height:1.5;
    }


    /* =================================================
       SEARCH - APP STYLE
    ================================================= */

    .track-search-card{

        padding:9px;

        border-radius:16px;

        margin-bottom:20px;

        box-shadow:
            0 8px 25px rgba(0,0,0,.07);

        position:sticky;

        top:8px;

        z-index:20;
    }


    .track-search-form{

        gap:8px;
    }


    .track-search-input{

        height:50px;

        font-size:13px;

        padding:0 13px;

        border-radius:11px;
    }


    .track-search-btn{

        height:50px;

        width:50px;

        min-width:50px;

        padding:0;

        border-radius:11px;

        font-size:0;

        display:flex;

        align-items:center;

        justify-content:center;
    }


    .track-search-btn i{

        font-size:17px;
    }


    /* =================================================
       ORDER CARD
    ================================================= */

    .order-track-card{

        border-radius:18px;

        box-shadow:
            0 10px 30px rgba(0,0,0,.07);
    }


    /* TOP */

    .order-track-top{

        padding:17px;

        gap:12px;
    }


    .order-number-title{

        font-size:9px;

        margin-bottom:4px;
    }


    .order-number{

        font-size:13px;

        word-break:break-all;
    }


    .status-badge{

        font-size:10px;

        padding:6px 10px;

        white-space:nowrap;
    }


    /* STATUS */

    .current-status{

        padding:17px;

        gap:12px;
    }


    .status-icon{

        width:45px;

        height:45px;

        min-width:45px;

        border-radius:13px;

        font-size:18px;
    }


    .status-small{

        font-size:9px;
    }


    .status-big{

        font-size:17px;

        margin-top:3px;
    }


    /* =================================================
       PROGRESS
    ================================================= */

    .order-progress{

        padding:23px 18px 12px;
    }


    .progress-title{

        font-size:16px;

        margin-bottom:23px;
    }


    /* =================================================
       MOBILE TIMELINE
    ================================================= */

    .timeline{

        padding-left:47px;
    }


    .timeline::before{

        left:16px;

        top:18px;

        bottom:20px;
    }


    .timeline-item{

        padding-bottom:26px;
    }


    .timeline-item.active::after{

        left:-31px;

        top:32px;
    }


    .timeline-dot{

        left:-47px;

        width:34px;

        height:34px;

        font-size:12px;
    }


    .timeline-title{

        font-size:14px;

        margin-bottom:3px;
    }


    .timeline-text{

        font-size:12px;

        line-height:1.45;
    }


    /* =================================================
       INFO
    ================================================= */

    .order-extra-info{

        margin:8px 16px 16px;

        padding:16px;

        border-radius:14px;
    }


    .order-info-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:18px 14px;
    }


    .info-label{

        font-size:9px;

        margin-bottom:5px;
    }


    .info-value{

        font-size:12px;

        line-height:1.4;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:380px){

    .track-page{
        padding-left:7px;
        padding-right:7px;
    }


    .order-track-top{

        flex-direction:column;

        align-items:flex-start;
    }


    .status-badge{

        align-self:flex-start;
    }


    .track-heading h1{

        font-size:21px;
    }


    .order-info-grid{

        grid-template-columns:1fr 1fr;

        gap:14px;
    }

}
/* =====================================================
   FIX: REMOVE YELLOW BACKGROUND FROM TIMELINE
===================================================== */

.timeline,
.timeline-item,
.timeline-item.active,
.timeline-item::before,
.timeline-item.active::before {
    background-color: transparent !important;
}

/* Timeline item background forcefully white */
.timeline-item,
.timeline-item.active {
    background: transparent !important;
    background-image: none !important;
}

/* Progress line */
.timeline::before {
    background: #e5e7eb !important;
}

/* Completed progress line */
.timeline-item.active::before {
    width: 2px !important;
    background: #d4af37 !important;
}

/* Only icons should be dark */
.timeline-dot {
    background: #f1f1f1 !important;
}

.timeline-item.active .timeline-dot {
    background: #181818 !important;
    color: #ffffff !important;
}

/* Text area */
.timeline-title {
    background: transparent !important;
}

.timeline-text {
    background: transparent !important;
}