/* ==============================
   TRACK ORDER PAGE
============================== */

:root{
    --primary:#5A321E;
    --primary-dark:#321A10;
    --primary-light:#87573B;

    --gold:#C99B3C;
    --gold-dark:#A97922;
    --gold-light:#F3D995;

    --cream:#FFF9F0;
    --cream-dark:#F5E9D8;
    --soft-bg:#FBF6EF;

    --white:#FFFFFF;
    --dark:#251B16;
    --text:#62544D;
    --muted:#8A7B73;
    --border:#E9DDCF;

    --success:#2E8B57;
    --danger:#D64545;

    --shadow-sm:0 10px 28px rgba(70,42,25,.09);
    --shadow-md:0 18px 45px rgba(70,42,25,.16);
}


/* ==============================
   PAGE
============================== */

.tracking-page{
    min-height:100vh;
    padding:80px 20px;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(201,155,60,.13),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 85%,
            rgba(90,50,30,.09),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--cream),
            var(--soft-bg)
        );

    color:var(--dark);
}


/* ==============================
   TRACKING CARD
============================== */

.tracking-card{
    position:relative;

    width:100%;
    max-width:950px;
    margin:auto;
    padding:42px;

    overflow:hidden;

    border:1px solid rgba(201,155,60,.25);
    border-radius:24px;

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

    box-shadow:var(--shadow-md);
}

.tracking-card::before{
    content:"";

    position:absolute;
    top:-80px;
    right:-80px;

    width:190px;
    height:190px;

    border-radius:50%;

    background:rgba(201,155,60,.08);

    pointer-events:none;
}

.tracking-card::after{
    content:"";

    position:absolute;
    left:50%;
    bottom:0;

    width:75%;
    height:3px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--gold),
        var(--primary),
        transparent
    );

    transform:translateX(-50%);
}


/* ==============================
   HEADING
============================== */

.tracking-heading{
    position:relative;
    z-index:2;

    margin-bottom:36px;

    text-align:center;
}

.tracking-heading > i{
    margin-bottom:16px;

    color:var(--gold);

    font-size:56px;

    filter:drop-shadow(0 10px 18px rgba(169,121,34,.20));
}

.tracking-heading h1{
    margin-bottom:10px;

    color:var(--primary);

    font-family:'Playfair Display',serif;
    font-size:39px;
    font-weight:700;
    line-height:1.25;
}

.tracking-heading p{
    color:var(--text);

    font-size:14px;
    line-height:1.7;
}


/* ==============================
   ORDER SEARCH
============================== */

.order-search{
    position:relative;
    z-index:2;

    margin-bottom:36px;
}

.order-search label{
    display:block;

    margin-bottom:10px;

    color:var(--dark);

    font-size:14px;
    font-weight:700;
}

.search-row{
    display:flex;
    gap:12px;
}

.search-row input{
    min-width:0;
    flex:1;

    padding:14px 16px;

    border:1px solid var(--border);
    border-radius:11px;

    background:var(--cream);

    color:var(--dark);

    font-family:inherit;
    font-size:14px;

    outline:none;

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.search-row input::placeholder{
    color:var(--muted);
}

.search-row input:focus{
    border-color:var(--gold);

    background:var(--white);

    box-shadow:0 0 0 3px rgba(201,155,60,.13);

    transform:translateY(-1px);
}

.search-row button{
    min-width:145px;
    padding:14px 23px;

    border:none;
    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:var(--white);

    font-family:inherit;
    font-size:14px;
    font-weight:700;

    cursor:pointer;

    box-shadow:0 9px 22px rgba(70,42,25,.20);

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.search-row button:hover{
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    transform:translateY(-2px);

    box-shadow:0 13px 27px rgba(169,121,34,.24);
}

#trackingMessage{
    margin-top:12px;

    color:var(--text);

    font-size:13px;
    line-height:1.6;
}


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

.order-basic-info{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;

    margin-bottom:36px;
}

.order-basic-info div{
    padding:19px;

    border:1px solid var(--border);
    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            var(--cream),
            var(--white)
        );

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.order-basic-info div:hover{
    border-color:rgba(201,155,60,.45);

    transform:translateY(-3px);

    box-shadow:0 14px 30px rgba(70,42,25,.13);
}

.order-basic-info span{
    display:block;

    margin-bottom:7px;

    color:var(--muted);

    font-size:13px;
}

.order-basic-info strong{
    color:var(--primary);

    font-size:17px;
    font-weight:700;
}


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

.tracking-timeline{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    gap:30px;

    margin:22px 0 42px;
    padding-left:10px;
}

.tracking-timeline::before{
    content:"";

    position:absolute;
    left:30px;
    top:25px;
    bottom:25px;

    width:3px;

    border-radius:10px;

    background:var(--border);
}

.tracking-step{
    position:relative;

    display:flex;
    align-items:flex-start;
    gap:18px;

    opacity:.45;

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.tracking-step.active{
    opacity:1;
}

.tracking-step.active:hover{
    transform:translateX(3px);
}

.tracking-icon{
    position:relative;
    z-index:2;

    width:42px;
    height:42px;
    min-width:42px;

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

    border:1px solid var(--border);
    border-radius:50%;

    background:var(--cream-dark);

    color:var(--muted);

    box-shadow:0 5px 14px rgba(70,42,25,.07);

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.tracking-step.active .tracking-icon{
    border-color:var(--gold);

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:var(--white);

    box-shadow:0 9px 20px rgba(70,42,25,.22);
}

.tracking-step h3{
    margin-bottom:5px;

    color:var(--primary);

    font-size:16px;
    font-weight:700;
}

.tracking-step p{
    color:var(--muted);

    font-size:14px;
    line-height:1.6;
}


/* ==============================
   TRACKING PRODUCTS
============================== */

#trackingProducts{
    position:relative;
    z-index:2;

    padding-top:26px;

    border-top:1px solid var(--border);
}

.tracking-product{
    padding:16px 0;

    display:grid;
    grid-template-columns:72px minmax(0,1fr) auto;
    align-items:center;
    gap:16px;

    border-bottom:1px solid var(--border);
}

.tracking-product:last-child{
    border-bottom:none;
}

.tracking-product img{
    width:72px;
    height:72px;

    object-fit:cover;

    border:1px solid rgba(201,155,60,.22);
    border-radius:11px;

    background:var(--cream);

    box-shadow:0 7px 18px rgba(70,42,25,.09);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.tracking-product:hover img{
    transform:scale(1.04);

    box-shadow:0 10px 23px rgba(70,42,25,.14);
}

.tracking-product h4{
    margin-bottom:6px;

    color:var(--dark);

    font-size:15px;
    font-weight:700;
}

.tracking-product p{
    color:var(--muted);

    font-size:13px;
    line-height:1.5;
}

.tracking-product-total{
    color:var(--primary);

    font-size:16px;
    font-weight:700;

    white-space:nowrap;
}


/* ==============================
   TRACK BUTTON ON ORDERS PAGE
============================== */

.track-order-btn{
    min-height:42px;
    padding:10px 17px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    border:none;
    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            var(--primary-light),
            var(--primary)
        );

    color:var(--white);

    text-decoration:none;

    font-family:inherit;
    font-size:13px;
    font-weight:700;

    box-shadow:0 8px 19px rgba(70,42,25,.18);

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.track-order-btn:hover{
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    transform:translateY(-2px);

    box-shadow:0 11px 24px rgba(169,121,34,.23);
}


/* ==============================
   RESPONSIVE
============================== */

@media(max-width:700px){

    .tracking-page{
        padding:50px 15px;
    }

    .tracking-card{
        padding:29px 18px;

        border-radius:20px;
    }

    .tracking-heading{
        margin-bottom:30px;
    }

    .tracking-heading > i{
        font-size:48px;
    }

    .tracking-heading h1{
        font-size:30px;
    }

    .tracking-heading p{
        font-size:13px;
    }

    .search-row{
        flex-direction:column;
    }

    .search-row button{
        width:100%;
        min-width:0;
    }

    .order-basic-info{
        grid-template-columns:1fr;
        gap:13px;
    }

    .tracking-timeline{
        gap:26px;
    }

    .tracking-product{
        grid-template-columns:58px minmax(0,1fr);
        gap:13px;
    }

    .tracking-product img{
        width:58px;
        height:58px;
    }

    .tracking-product-total{
        grid-column:2;
    }

}


@media(max-width:380px){

    .tracking-page{
        padding-left:10px;
        padding-right:10px;
    }

    .tracking-card{
        padding-left:14px;
        padding-right:14px;
    }

    .tracking-heading h1{
        font-size:27px;
    }

    .tracking-timeline{
        padding-left:4px;
    }

    .tracking-timeline::before{
        left:24px;
    }

    .tracking-icon{
        width:40px;
        height:40px;
        min-width:40px;
    }

}

/* =====================================
   TRACKING TIMELINE DETAILS
===================================== */

.tracking-step-content {
    flex: 1;
}

.tracking-step-note {
    margin: 4px 0 6px;
}

.tracking-step-date {
    display: inline-flex;

    color: #8a6a55;

    font-size: 12px;
    font-weight: 600;
}

.tracking-step.active .tracking-step-date {
    color: #198754;
}

.tracking-step.cancelled .tracking-step-date {
    color: #c0392b;
}