/* =====================================================
ORDERS PAGE HEADER
===================================================== */

.orders-filter-section{
margin-bottom:30px;
}

.orders-filter-header{
margin-bottom:20px;
}

.orders-filter-header h2{
font-size:28px;
font-weight:700;
margin-bottom:6px;
color:#111827;
}

.orders-filter-header p{
margin:0;
font-size:14px;
color:#6b7280;
}

.orders-filter-card{
background:#fff;
padding:20px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/*.order-search-box{
position:relative;
}

.order-search-box i{
position:absolute;
top:50%;
left:15px;
transform:translateY(-50%);
color:#9ca3af;
}

.order-search-box input{
padding-left:42px;
height:48px;
border-radius:12px;
border:1px solid #e5e7eb;
}

.order-search-box input:focus{
box-shadow:none;
border-color:#6366f1;
}
*/
.order-status-filters{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end;
}

.order-filter-btn{
display:inline-flex;
align-items:center;
justify-content:center;
border:none;
background:#f3f4f6;
padding:10px 16px;
border-radius:50px;
font-size:13px;
font-weight:600;
transition:.3s ease;
text-decoration:none;
color:#374151;
}

.order-filter-btn:hover{
background:#e0e7ff;
color:#4338ca;
text-decoration:none;
}

.order-filter-btn:visited{
color:#374151;
text-decoration:none;
}

.order-filter-btn:focus{
text-decoration:none;
color:#374151;
}

.order-filter-btn.active{
background:linear-gradient(
135deg,
#4f46e5,
#7c3aed
);
color:#fff;
}

@media(max-width:991px){

.order-status-filters{
justify-content:flex-start;
}

}

@media(max-width:576px){

.orders-filter-header h2{
font-size:24px;
}

.order-filter-btn{
padding:8px 14px;
font-size:12px;
}

}


/* =====================================================
EMPTY ORDERS
===================================================== */

.orders-empty-state{
background:#fff;
padding:60px 30px;
border-radius:24px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.orders-empty-icon{
width:120px;
height:120px;
border-radius:50%;
background:#eef2ff;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 25px;
}

.orders-empty-icon i{
font-size:50px;
color:#6366f1;
}

.orders-empty-state h3{
font-size:26px;
font-weight:700;
margin-bottom:10px;
color:#111827;
}

.orders-empty-state p{
max-width:500px;
margin:0 auto 25px;
font-size:14px;
line-height:1.8;
color:#6b7280;
}

.orders-shop-btn{
background:linear-gradient(
135deg,
#4f46e5,
#7c3aed
);
border:none;
padding:12px 25px;
border-radius:12px;
font-weight:600;
}

.orders-shop-btn:hover{
background:linear-gradient(
135deg,
#4338ca,
#6d28d9
);
}

/* =====================================================
ORDER LIST
===================================================== */

.orders-list-wrapper{
display:flex;
flex-direction:column;
gap:20px;
}

.order-card{
background:#fff;
border-radius:24px;
padding:25px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
transition:.3s ease;
}

.order-card:hover{
transform:translateY(-4px);
box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.order-card-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.order-main-info{
display:flex;
flex-direction:column;
gap:8px;
}

.order-id{
font-size:16px;
color:#111827;
}

.order-date{
font-size:13px;
color:#6b7280;
}

.order-amount{
font-size:24px;
font-weight:700;
color:#111827;
}

.order-card-middle{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:20px;
}

.order-status-badge,
.payment-status-badge,
.items-count{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 14px;
border-radius:50px;
font-size:12px;
font-weight:600;
line-height:1;
white-space:nowrap;
}

.items-count{
background:#f3f4f6;
color:#374151;
}

.payment-status-badge.paid{
background:#dcfce7;
color:#166534;
}

.payment-status-badge.pending{
background:#fef3c7;
color:#92400e;
}

.payment-status-badge.failed{
background:#fee2e2;
color:#991b1b;
}

.order-status-badge.placed{
background:#dbeafe;
color:#1d4ed8;
}

.order-status-badge.confirmed{
background:#ede9fe;
color:#6d28d9;
}

.order-status-badge.packed{
background:#fef3c7;
color:#92400e;
}

.order-status-badge.shipped{
background:#cffafe;
color:#155e75;
}

.order-status-badge.out_for_delivery{
background:#fce7f3;
color:#be185d;
}

.order-status-badge.delivered{
background:#dcfce7;
color:#166534;
}

.order-status-badge.cancelled{
background:#fee2e2;
color:#991b1b;
}

.order-status-badge.returned{
background:#f3f4f6;
color:#374151;
}

.order-card-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.order-action-btn{
padding:10px 18px;
border-radius:12px;
text-decoration:none;
font-size:13px;
font-weight:600;
transition:.3s ease;
}

.primary-btn{
background:linear-gradient(
135deg,
#4f46e5,
#7c3aed
);
color:#fff;
}

.primary-btn:hover{
color:#fff;
}

.secondary-btn{
background:#f3f4f6;
color:#374151;
}

.secondary-btn:hover{
background:#e5e7eb;
color:#111827;
}

@media(max-width:768px){

.order-card-top{
flex-direction:column;
align-items:flex-start;
gap:15px;
}

.order-amount{
font-size:20px;
}

.order-card-actions{
flex-direction:column;
}

.order-action-btn{
width:100%;
text-align:center;
}

}