body{

    margin:0;

    background:var(--background);

    color:var(--text);

    font-family:"Plus Jakarta Sans",sans-serif;

}

.container{

    width:min(900px,92%);

    margin:0 auto 40px;

    padding-top:90px;

}

.track-header{

    margin-bottom:50px;

}

.page-hero h1{

    font-family:"Space Grotesk",sans-serif;

    font-size:28px;

    font-weight:700;

    margin:0;

}

.page-hero p{

    margin-top:6px;

    color:var(--text-light);

    font-size:15px;

}

.track-search{

display:grid;

grid-template-columns:1fr auto;

gap:16px;

margin-top:30px;

}

.track-search input{

height:52px;

border:2px solid var(--border);

background:#fff;

font-size:15px;

font-family:"Plus Jakarta Sans",sans-serif;

padding:0 16px;

}

.track-search input:focus{

    outline:none;

    border-color:#22c55e;

}

.track-search button{

height:52px;

padding:0 28px;

white-space:nowrap;

}

.track-search button:hover{

    transform:translate(-4px,-4px);

    box-shadow:8px 8px white;

}

.order-card{

background:#fff;

border:2px solid var(--border);

padding:24px;

border-radius:0;

display:grid;

grid-template-columns:280px 1fr;

gap:32px;

margin-top:24px;

}

.left h2{

    line-height:1.5;

    font-size:26px;

}

.label{

font-size:12px;

font-weight:700;

text-transform:uppercase;

letter-spacing:.08em;

color:var(--text-light);

margin-bottom:6px;

}

.value{

font-size:16px;

font-weight:600;

font-family:"Plus Jakarta Sans",sans-serif;

color:var(--text);

}

.tracking-steps{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.tracking-steps div{

    font-size:16px;

}

.done{

    color:#22c55e;

}

.active{

    color:#ffd84a;

}

.pending{

    color:#5d6177;

}

.not-found{

    border:4px solid #ff4747;

    padding:30px;

    color:#ffb6b6;

}

@media(max-width:760px){

.track-search{

grid-template-columns:1fr;

}

.track-search button{

width:100%;

}

.order-card{

grid-template-columns:1fr;

gap:35px;

}

.track-header h1{

font-size:28px;

}

}

.left h2{

font-family:"Space Mono",monospace;

font-size:28px;

letter-spacing:1px;

}


/* =========================================================
   AEVAN LIQUID GLASS — TRACK ORDER
   VISUAL ONLY — NO LAYOUT / FUNCTION CHANGES
========================================================= */

body{
    background:
        radial-gradient(650px circle at 8% 0%, rgba(239,59,77,.09), transparent 55%),
        radial-gradient(650px circle at 92% 10%, rgba(255,255,255,.95), transparent 55%),
        linear-gradient(180deg,#f7f7f8 0%,#eef0f3 100%);
    color:#17181c;
    font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

#header{
    background:rgba(255,255,255,.68);
    backdrop-filter:blur(26px) saturate(155%);
    -webkit-backdrop-filter:blur(26px) saturate(155%);
    border-bottom:1px solid rgba(255,255,255,.86);
    box-shadow:0 5px 28px rgba(20,20,25,.055);
    position:relative;
    z-index:100;
}

#menu-btn,
#cart-btn{
    background:rgba(255,255,255,.58);
    border:1px solid rgba(0,0,0,.055);
    border-radius:14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

#cart-count{
    background:#ef3b4d;
    color:#fff;
    border:2px solid rgba(255,255,255,.92);
    box-shadow:0 4px 12px rgba(239,59,77,.24);
}

#side-menu,
#cart-drawer{
    background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(248,249,250,.76));
    backdrop-filter:blur(32px) saturate(155%);
    -webkit-backdrop-filter:blur(32px) saturate(155%);
    border-color:rgba(255,255,255,.88);
    box-shadow:0 15px 50px rgba(20,20,30,.10);
}

#overlay{
    background:rgba(15,17,22,.25);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}

.container{
    padding-top:70px;
}

.page-hero{
    background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,255,255,.56));
    backdrop-filter:blur(28px) saturate(150%);
    -webkit-backdrop-filter:blur(28px) saturate(150%);
    border:1px solid rgba(255,255,255,.86);
    border-radius:24px;
    padding:30px;
    box-shadow:
        0 20px 55px rgba(20,20,30,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.page-hero h1{
    font-family:"Space Grotesk","Plus Jakarta Sans",sans-serif;
    font-size:32px;
    font-weight:800;
    letter-spacing:-1px;
    color:#17181c;
}

.page-hero p{
    color:#686c74;
    line-height:1.65;
}

.track-search{
    gap:12px;
}

.track-search input{
    height:54px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 5px 18px rgba(0,0,0,.035);
    color:#17181c;
}

.track-search input:focus{
    border-color:rgba(239,59,77,.55);
    box-shadow:
        0 0 0 4px rgba(239,59,77,.09),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.track-search button{
    height:54px;
    padding:0 30px;
    background:linear-gradient(145deg,#f04a5b,#e93448);
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    box-shadow:
        0 9px 24px rgba(239,59,77,.22),
        inset 0 1px 0 rgba(255,255,255,.18);
    font-family:"Plus Jakarta Sans",sans-serif;
    font-weight:800;
    transition:.2s ease;
}

.track-search button:hover{
    transform:translateY(-2px);
    box-shadow:
        0 13px 30px rgba(239,59,77,.28),
        inset 0 1px 0 rgba(255,255,255,.2);
}

.order-card{
    background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(255,255,255,.58));
    backdrop-filter:blur(24px) saturate(145%);
    -webkit-backdrop-filter:blur(24px) saturate(145%);
    border:1px solid rgba(255,255,255,.88);
    border-radius:20px;
    padding:26px;
    box-shadow:
        0 18px 50px rgba(20,20,30,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.left h2{
    font-family:"Space Grotesk","Plus Jakarta Sans",sans-serif;
    color:#17181c;
    letter-spacing:-.5px;
}

.label{
    color:#737780;
}

.value{
    color:#17181c;
}

.tracking-steps{
    gap:18px;
}

.tracking-steps div{
    padding:14px 16px;
    background:rgba(255,255,255,.52);
    border:1px solid rgba(0,0,0,.045);
    border-radius:14px;
}

.done{
    color:#16a34a;
}

.active{
    color:#ef3b4d;
    font-weight:700;
}

.pending{
    color:#777b84;
}

.not-found{
    background:rgba(255,255,255,.68);
    border:1px solid rgba(239,59,77,.35);
    border-radius:18px;
    padding:24px;
    color:#b42335;
    box-shadow:0 12px 30px rgba(239,59,77,.08);
}

.drawer-header{
    border-bottom:1px solid rgba(0,0,0,.06);
}

.drawer-header h2{
    font-family:"Space Grotesk",sans-serif;
}

#checkout-btn{
    background:linear-gradient(145deg,#f04a5b,#e93448);
    color:#fff;
    border-radius:14px;
    box-shadow:0 9px 25px rgba(239,59,77,.23);
    font-family:"Plus Jakarta Sans",sans-serif;
    font-weight:800;
}

@media(max-width:760px){
    .container{
        padding-top:45px;
    }

    .page-hero{
        padding:24px 20px;
        border-radius:20px;
    }

    .page-hero h1{
        font-size:27px;
    }

    .track-search{
        gap:10px;
    }

    .track-search input,
    .track-search button{
        height:52px;
    }

    .order-card{
        padding:20px;
        border-radius:18px;
    }
}