/* ============================================
   STTYTT — Orders Page
   Theme: Maroon × Gold, scrap-to-EV
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
    --maroon:#3D0000;
    --maroon-2:#6B0000;
    --maroon-3:#1F0000;
    --gold:#D4AF37;
    --gold-dark:#8B6914;
    --gold-light:#F5DEB3;
    --bg:#FAF3E0;
    --card:#FFFFFF;
    --text:#2A0E0E;
    --muted:#7A6A5D;
    --border:#E6D9BE;
    --danger:#E23D3D;
    --danger-bg:#FDECEC;
    --shadow: 0 4px 24px rgba(31,0,0,.07);
    --shadow-hover: 0 8px 32px rgba(31,0,0,.12);
}

*{ box-sizing:border-box; }

body{
    background:var(--bg);
    background-image:
        radial-gradient(circle at 100% 0%, rgba(212,175,55,.07), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(139,105,20,.06), transparent 40%);
    font-family:'DM Sans', Arial, sans-serif;
    color:var(--text);
    padding:32px 20px;
    line-height:1.5;
}

#ordersContainer{
    max-width:820px;
    margin:0 auto;
}

/* ---------- Order Card ---------- */

.order-card{

    background:#fff;

    border-radius:16px;

    padding:22px;

    margin-bottom:25px;

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

}

.order-card::before{
    content:"";
    position:absolute;
    top:0; left:0;
    width:4px;
    height:100%;
    background:linear-gradient(180deg, var(--gold), var(--gold-dark));
}

.order-card:hover{
    box-shadow:var(--shadow-hover);
    transform:translateY(-2px);
}

.order-card h2{
    font-family:'Space Grotesk', sans-serif;
    font-size:20px;
    font-weight:600;
    color:var(--maroon-2);
    margin:0 0 16px;
    letter-spacing:.2px;
}

.order-card p{
    margin:6px 0;
    font-size:14.5px;
    color:var(--text);
}

.order-card p strong{
    color:var(--muted);
    font-weight:600;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.4px;
    margin-right:6px;
}

.status{

    background:#e8f5e9;

    color:#2e7d32;

    padding:4px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

}


.order-actions button{

    width:180px;

    height:45px;

    border-radius:8px;

    font-size:15px;

    font-weight:600;

}

/* ---------- Ordered Products ---------- */

.order-card h3{
    font-family:'Space Grotesk', sans-serif;
    font-size:15px;
    font-weight:600;
    color:var(--maroon-2);
    margin:22px 0 10px;
    padding-top:16px;
    border-top:1px dashed var(--border);
}

.ordered-product{
   
    display:flex;

    align-items:center;

    gap:15px;

    background:#fff;

    border:1px solid #e7e7e7;

    border-radius:12px;

    padding:12px;

    margin-bottom:12px;
}

.ordered-product h4{

    margin:0 0 8px;

    font-size:16px;

    color:#222;

}

.ordered-product p{
 margin:4px 0;

    color:#555;

    font-size:14px;
}

.ordered-product-image{

    width:90px;

    height:90px;

    object-fit:contain;

    background:#f8f8f8;

    border-radius:10px;

    border:1px solid #ddd;

    flex-shrink:0;

}


.ordered-product div{

    flex:1;

}


/* ---------- Timeline (charge-progress motif) ---------- */

.timeline{
    display:flex;
    justify-content:space-between;
    margin:32px 0 12px;
    padding:0 4px;
}

.step{
    flex:1;
    text-align:center;
    position:relative;
}

.step::before{
    content:"";
    width:100%;
    height:3px;
    background:var(--border);
    position:absolute;
    top:11px;
    left:-50%;
    z-index:0;
    border-radius:2px;
}

.step:first-child::before{
    display:none;
}

.step.active::before{
    background:linear-gradient(90deg, var(--gold-dark), var(--gold));
}

.circle{
    width:24px;
    height:24px;
    border-radius:50%;
    background:var(--card);
    border:3px solid var(--border);
    margin:auto;
    position:relative;
    z-index:1;
    transition:all .3s ease;
}

.active .circle{
    background:var(--maroon);
    border-color:var(--maroon);
    box-shadow:0 0 0 4px rgba(139,105,20,.22);
}

.step.active:last-child .circle,
.step.active .circle{
    animation:pulse 1.8s ease-in-out infinite;
}

.step:not(.active) ~ .step.active .circle,
.step.active:not(:has(~ .step.active)) .circle{
    animation:pulse 1.8s ease-in-out infinite;
}

@keyframes pulse{
    0%,100%{ box-shadow:0 0 0 4px rgba(139,105,20,.22); }
    50%{ box-shadow:0 0 0 8px rgba(139,105,20,.12); }
}

.label{
    margin-top:10px;
    font-size:11.5px;
    font-weight:600;
    color:var(--muted);
}

.step.active .label{
    color:var(--maroon-2);
}

.label small{
    display:block;
    font-weight:400;
    color:var(--muted);
    font-size:10.5px;
    margin-top:2px;
}

/* ---------- Actions ---------- */

.order-actions{
    margin-top:20px;
    display:flex;
    gap:10px;
}

.order-actions button{
    background:var(--maroon-2);
    color:#fff;
    border:none;
    padding:11px 22px;
    border-radius:8px;
    cursor:pointer;
    font-family:'DM Sans', sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:.1px;
    transition:background .2s ease, transform .15s ease;
}

.order-actions button:hover{
    background:var(--gold);
    transform:translateY(-1px);
    color: #3D0000;
}

.order-actions .cancel-btn{
    background:var(--danger-bg);
    color:var(--danger);
}

.order-actions .cancel-btn:hover{
    background:var(--danger);
    color:#fff;
}

/* ---------- Cancelled ---------- */

.cancelled-order{
    margin-top:18px;
    padding:12px;
    background:var(--danger-bg);
    color:var(--danger);
    font-weight:700;
    text-align:center;
    border-radius:8px;
    font-size:14px;
    letter-spacing:.2px;
}

/* ---------- Empty State ---------- */

.empty-orders{
    background:var(--card);
    border:1px dashed var(--border);
    border-radius:16px;
    padding:60px 30px;
    text-align:center;
    color:var(--muted);
}

.empty-orders h2{
    font-family:'Space Grotesk', sans-serif;
    color:var(--maroon-2);
    font-size:20px;
    margin-bottom:8px;
}

/* ---------- Responsive ---------- */

@media (max-width:640px){
    .order-card{ padding:20px 18px; }
    .timeline{ flex-wrap:wrap; row-gap:20px; }
    .step{ flex:1 0 30%; }
    .step::before{ display:none; }
    .order-actions{ flex-direction:column; }
    .order-actions button{ width:100%; }
}

/* ---------- Reduced Motion ---------- */

@media (prefers-reduced-motion:reduce){
    .active .circle{ animation:none; }
    .order-card{ transition:none; }
}


@media(max-width:768px){

.ordered-product{

    gap:12px;

    padding:12px;

}

.ordered-product-image{

    width:90px;

    height:90px;

}

.product-details h4{

    font-size:15px;

    display:-webkit-box;



    -webkit-box-orient:vertical;

    overflow:hidden;

}

.product-price{

    font-size:18px;

    margin-top:8px;

}

.product-info{

    gap:6px;

    margin-top:8px;

}

.product-info span{

    font-size:12px;

    padding:5px 10px;

}

}