/* =====================================================
ORDER DETAILS PAGE
===================================================== */

.order-details-header{
background:#fff;
padding:30px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

.order-number{
font-size:24px;
font-weight:700;
color:#111827;
margin-bottom:8px;
}

.order-date{
font-size:14px;
color:#6b7280;
}

.order-header-right{
text-align:right;
}

.order-total{
font-size:32px;
font-weight:800;
margin-top:10px;
color:#111827;
}

.order-detail-status{
display:inline-block;
padding:10px 16px;
border-radius:50px;
font-size:13px;
font-weight:700;
}

.order-detail-status.placed{
background:#dbeafe;
color:#1d4ed8;
}

.order-detail-status.confirmed{
background:#ede9fe;
color:#6d28d9;
}

.order-detail-status.packed{
background:#fef3c7;
color:#92400e;
}

.order-detail-status.shipped{
background:#cffafe;
color:#155e75;
}

.order-detail-status.out_for_delivery{
background:#fce7f3;
color:#be185d;
}

.order-detail-status.delivered{
background:#dcfce7;
color:#166534;
}

.order-detail-status.cancelled{
background:#fee2e2;
color:#991b1b;
}

.order-detail-status.returned{
background:#f3f4f6;
color:#374151;
}

.order-detail-status.refunded{
background:#e0e7ff;
color:#4338ca;
}

@media(max-width:768px){

.order-details-header{
flex-direction:column;
align-items:flex-start;
gap:20px;
}

.order-header-right{
text-align:left;
}

.order-number{
font-size:20px;
}

.order-total{
font-size:26px;
}

}

/* =====================================================
ORDER TIMELINE
===================================================== */

.order-timeline-card{
background:#fff;
padding:30px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
margin-bottom:25px;
}

.section-title{
margin-bottom:25px;
}

.section-title h3{
font-size:22px;
font-weight:700;
margin:0;
color:#111827;
}

.timeline-wrapper{
display:flex;
justify-content:space-between;
position:relative;
}

.timeline-wrapper::before{
content:'';
position:absolute;
top:20px;
left:8%;
right:8%;
height:4px;
background:#e5e7eb;
z-index:1;
}

.timeline-step{
position:relative;
z-index:2;
text-align:center;
flex:1;
}

.timeline-circle{
width:42px;
height:42px;
border-radius:50%;
background:#e5e7eb;
margin:0 auto 12px;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:700;
color:#fff;
}

.timeline-circle.completed{
background:#22c55e;
}

.timeline-label{
font-size:13px;
font-weight:600;
color:#374151;
}

.timeline-special-status{
text-align:center;
padding:30px;
}

.special-status-badge{
display:inline-block;
padding:12px 22px;
border-radius:50px;
font-size:14px;
font-weight:700;
background:#fee2e2;
color:#991b1b;
}

@media(max-width:991px){

.timeline-wrapper{
flex-wrap:wrap;
gap:20px;
}

.timeline-wrapper::before{
display:none;
}

.timeline-step{
width:33.33%;
flex:none;
}

}

@media(max-width:576px){

.timeline-step{
width:50%;
}

.timeline-label{
font-size:12px;
}

}


/* =====================================================
ORDER PRODUCTS
===================================================== */

.order-products-card{
background:#fff;
padding:30px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
margin-bottom:25px;
}

.ordered-product{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 0;
border-bottom:1px solid #f1f5f9;
}

.ordered-product:last-child{
border-bottom:none;
padding-bottom:0;
}

.ordered-product-left{
display:flex;
align-items:center;
gap:20px;
}

.ordered-product-image{
width:80px;
height:80px;
border-radius:18px;
background:#eef2ff;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
color:#4f46e5;
}

.ordered-product-details h4{
font-size:16px;
font-weight:700;
margin-bottom:8px;
color:#111827;
}

.product-meta{
font-size:13px;
color:#6b7280;
}

.ordered-product-right{
text-align:right;
}

.product-price{
font-size:18px;
font-weight:700;
color:#111827;
margin-bottom:6px;
}

.product-subtotal{
font-size:13px;
color:#6b7280;
}

@media(max-width:768px){

.ordered-product{
flex-direction:column;
align-items:flex-start;
gap:15px;
}

.ordered-product-right{
text-align:left;
}

}

/* =====================================================
SHIPPING ADDRESS
===================================================== */

.shipping-address-card{
background:#fff;
padding:30px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
margin-bottom:25px;
}

.shipping-address-content h4{
font-size:18px;
font-weight:700;
margin-bottom:12px;
color:#111827;
}

.shipping-address-content p{
margin-bottom:8px;
font-size:14px;
color:#4b5563;
line-height:1.8;
}

.address-unavailable{
padding:20px;
border-radius:12px;
background:#fef2f2;
color:#991b1b;
font-weight:600;
}

.shipping-address-content{
font-size:14px;
line-height:1.8;
color:#4b5563;
/*white-space:pre-line;*/
}

/* =====================================================
PAYMENT DETAILS
===================================================== */

.payment-details-card{
background:#fff;
padding:30px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
margin-bottom:25px;
}

.payment-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.payment-item{
padding:20px;
background:#f8fafc;
border-radius:16px;
}

.payment-label{
display:block;
font-size:13px;
color:#6b7280;
margin-bottom:10px;
}

.payment-value{
font-size:16px;
font-weight:700;
color:#111827;
}

.payment-status-badge{
display:inline-block;
padding:8px 14px;
border-radius:50px;
font-size:12px;
font-weight:700;
}

.payment-status-badge.paid{
background:#dcfce7;
color:#166534;
}

.payment-status-badge.pending{
background:#fef3c7;
color:#92400e;
}

.payment-status-badge.failed{
background:#fee2e2;
color:#991b1b;
}

.payment-status-badge.refunded{
background:#e0e7ff;
color:#4338ca;
}

@media(max-width:768px){

.payment-grid{
grid-template-columns:1fr;
}

}

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

.order-summary-card{
background:#fff;
padding:30px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
margin-bottom:25px;
}

.summary-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 0;
font-size:15px;
color:#374151;
}

.summary-divider{
height:1px;
background:#e5e7eb;
margin:10px 0;
}

.discount-value{
color:#16a34a;
font-weight:600;
}

.total-row{
font-size:20px;
font-weight:700;
color:#111827;
}

.total-row span:last-child{
color:#4f46e5;
}