/* ==========================================
   NEBO MARKETPLACE
   MY ORDERS
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#0D1D2D;
--gold:#FFD54A;
--white:#ffffff;
--bg:#f6f8fb;
--text:#1d1d1d;
--grey:#6b7280;

}

*{

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

}

body{

background:var(--bg);
color:var(--text);
padding-bottom:40px;

}

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

.ordersHeader{

position:sticky;

top:0;

z-index:100;

display:flex;

align-items:center;

justify-content:space-between;

padding:18px;

background:#fff;

box-shadow:0 5px 20px rgba(0,0,0,.06);

}

.ordersHeader h2{

font-size:22px;

font-weight:700;

}

.backBtn{

width:42px;

height:42px;

border:none;

border-radius:50%;

background:#f3f4f6;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

}

.backBtn span{

font-size:22px;

}

/* ================= SUMMARY ================= */

.ordersSummary{

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

padding:18px;

}

.summaryCard{

background:#fff;

border-radius:20px;

padding:18px;

display:flex;

gap:14px;

align-items:center;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.summaryCard span{

font-size:34px;

color:var(--gold);

}

.summaryCard h3{

font-size:22px;

margin-bottom:4px;

}

.summaryCard p{

font-size:13px;

color:var(--grey);

}

/* ================= FILTER ================= */

.filterBar{

display:flex;

gap:10px;

overflow-x:auto;

padding:0 18px 18px;

}

.filterBar::-webkit-scrollbar{

display:none;

}

.filterBtn{

border:none;

padding:10px 18px;

border-radius:999px;

background:#fff;

font-size:14px;

font-weight:600;

white-space:nowrap;

cursor:pointer;

}

.filterBtn.active{

background:var(--primary);

color:#fff;

}

/* ================= ORDERS ================= */

.ordersContainer{

padding:0 18px;

display:flex;

flex-direction:column;

gap:18px;

}

.orderCard{

display:flex;

gap:15px;

background:#fff;

padding:14px;

border-radius:22px;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.orderImage{

width:95px;

height:95px;

border-radius:16px;

object-fit:cover;

background:#f3f3f3;

}

.orderInfo{

flex:1;

}

.orderInfo h3{

font-size:17px;

font-weight:700;

margin-bottom:6px;

}

.orderInfo p{

font-size:13px;

color:var(--grey);

margin-bottom:4px;

}

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

.status{

display:inline-block;

padding:6px 12px;

border-radius:999px;

font-size:12px;

font-weight:700;

margin-top:8px;

}

.status.pending{

background:#FFF7CC;

color:#C48A00;

}

.status.processing{

background:#E0F2FE;

color:#0369A1;

}

.status.shipped{

background:#EDE9FE;

color:#6D28D9;

}

.status.delivered{

background:#DCFCE7;

color:#15803D;

}

.status.cancelled{

background:#FEE2E2;

color:#B91C1C;

}

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

.emptyOrders{

text-align:center;

padding:80px 20px;

}

.emptyIcon{

font-size:80px;

color:#d1d5db;

margin-bottom:15px;

}

.emptyOrders h2{

font-size:26px;

margin-bottom:10px;

}

.emptyOrders p{

font-size:15px;

color:var(--grey);

margin-bottom:25px;

}

.shopBtn{

display:inline-block;

padding:14px 30px;

border-radius:999px;

background:var(--gold);

color:#111;

font-weight:700;

text-decoration:none;

}

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

.loadingOrders{

padding:80px 20px;

text-align:center;

}

.loader{

width:50px;

height:50px;

border:5px solid #eee;

border-top:5px solid var(--gold);

border-radius:50%;

margin:auto;

animation:spin 1s linear infinite;

}

.loadingOrders p{

margin-top:20px;

font-size:15px;

color:var(--grey);

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

@media(max-width:600px){

.ordersSummary{

grid-template-columns:1fr;

}

.orderImage{

width:85px;

height:85px;

}

.orderInfo h3{

font-size:15px;

}

}
/* ==========================================
   NEBO ORDERS
   Premium Glossy Theme
========================================== */

:root{
    --navy:#0B1F3A;
    --navy-light:#163A70;
    --gold:#D4AF37;
    --bg:#F7F9FC;
    --white:#fff;
    --text:#1D2A3A;
    --muted:#72809A;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:"Poppins",sans-serif;
    background:radial-gradient(circle at top,#fff,#F7F9FC 70%);
    color:var(--text);
    min-height:100vh;
}

body::before{
    content:"";
    position:fixed;
    top:-220px;
    right:-220px;
    width:500px;
    height:500px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(212,175,55,.10),transparent 70%);
    z-index:-1;
}

body::after{
    content:"";
    position:fixed;
    bottom:-240px;
    left:-240px;
    width:520px;
    height:520px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(11,31,58,.08),transparent 70%);
    z-index:-1;
}

/* Header */

.ordersHeader{

    position:sticky;
    top:0;
    z-index:1000;

    height:82px;

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

    padding:0 18px;

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

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(212,175,55,.18);

}

.ordersHeader h2{

    font-size:25px;
    font-weight:700;
    color:var(--navy);

}

.backBtn{

    width:48px;
    height:48px;

    border:none;

    border-radius:16px;

    background:#fff;

    color:var(--navy);

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

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    cursor:pointer;

}

/* Summary */

.ordersSummary{

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

    gap:16px;

    padding:24px 18px;

}

.summaryCard{

    display:flex;
    align-items:center;
    gap:16px;

    padding:22px;

    background:#fff;

    border-radius:24px;

    border:1px solid rgba(212,175,55,.20);

    box-shadow:0 14px 35px rgba(11,31,58,.06);

}

.summaryCard .material-symbols-outlined{

    font-size:34px;
    color:var(--gold);

}

.summaryCard h3{

    color:var(--navy);
    font-size:24px;

}

.summaryCard p{

    color:var(--muted);
    margin-top:4px;

}

/* Filters */

.filterBar{

    display:flex;

    gap:12px;

    overflow-x:auto;

    padding:0 18px 22px;

    scrollbar-width:none;

}

.filterBar::-webkit-scrollbar{

    display:none;

}

.filterBtn{

    flex:0 0 auto;

    border:none;

    padding:12px 22px;

    border-radius:999px;

    background:#fff;

    color:var(--navy);

    font-weight:600;

    border:1px solid rgba(212,175,55,.20);

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

    cursor:pointer;

}

.filterBtn.active{

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

    color:#fff;

    border-color:var(--gold);

}

/* Orders */

.ordersContainer{

    padding:0 18px 90px;

}

.orderCard{

    background:#fff;

    border-radius:24px;

    padding:20px;

    margin-bottom:18px;

    border:1px solid rgba(212,175,55,.18);

    box-shadow:0 14px 35px rgba(11,31,58,.06);

    transition:.25s;

}

.orderCard:hover{

    transform:translateY(-3px);

}

.orderTop{

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

    margin-bottom:16px;

}

.orderNumber{

    color:var(--navy);

    font-size:18px;

    font-weight:700;

}

.orderStatus{

    padding:7px 16px;

    border-radius:999px;

    background:#EAF9EF;

    color:#1B9D4A;

    font-size:13px;

    font-weight:700;

}

.orderInfo{

    display:flex;

    justify-content:space-between;

    margin-top:10px;

    color:var(--muted);

    font-size:14px;

}

.orderTotal{

    margin-top:16px;

    font-size:22px;

    font-weight:700;

    color:var(--gold);

}

/* Empty */

.emptyOrders{

    text-align:center;

    padding:60px 25px;

}

.emptyIcon{

    font-size:70px;

    color:var(--gold);

}

.emptyOrders h2{

    margin-top:18px;

    color:var(--navy);

}

.emptyOrders p{

    margin-top:10px;

    color:var(--muted);

}

.shopBtn{

    display:inline-block;

    margin-top:26px;

    padding:15px 28px;

    border-radius:18px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

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

}

/* Loading */

.loadingOrders{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:60px 20px;

}

.loader{

    width:46px;
    height:46px;

    border:4px solid #E6EAF2;

    border-top-color:var(--gold);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

.loadingOrders p{

    margin-top:18px;

    color:var(--muted);

}

@keyframes spin{

    to{
        transform:rotate(360deg);
    }

}

/* Mobile */

@media(max-width:700px){

.ordersSummary{

    grid-template-columns:1fr;

}

.summaryCard{

    padding:18px;

}

}