/*==================================
ROOT
==================================*/

:root{

--primary:#8B0F45;
--secondary:#C51D64;
--gold:#D4AF37;
--bg:#f6f7fb;
--card:#ffffff;
--text:#222;
--light:#666;
--border:#ececec;
--shadow:0 15px 45px rgba(0,0,0,.08);

}

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

body{

font-family:Poppins,sans-serif;
background:var(--bg);
color:var(--text);

}

/*==================================
PAGE
==================================*/

.orders-page{

max-width:1450px;

margin:auto;

padding:40px 20px 80px;

min-height:100vh;

}

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

.orders-header{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

margin-bottom:40px;

flex-wrap:wrap;

}

.orders-header h1{

font-size:42px;

font-weight:700;

margin-bottom:8px;

}

.orders-header p{

color:#666;

font-size:15px;

}

/*==================================
SEARCH
==================================*/

.orders-search{

width:360px;

max-width:100%;

height:56px;

background:white;

display:flex;

align-items:center;

padding:0 20px;

border-radius:18px;

box-shadow:var(--shadow);

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

transition:.3s;

}

.orders-search:focus-within{

border-color:var(--gold);

box-shadow:
0 10px 30px rgba(212,175,55,.25);

}

.orders-search i{

font-size:18px;

color:#777;

margin-right:14px;

}

.orders-search input{

flex:1;

border:none;

outline:none;

background:none;

font-size:15px;

}

/*==================================
LOADER
==================================*/

.orders-loading{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

padding:120px 20px;

}

.loader{

width:65px;

height:65px;

border-radius:50%;

border:5px solid #eee;

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

animation:spin .8s linear infinite;

margin-bottom:18px;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

.orders-loading p{

font-size:18px;

font-weight:600;

color:#666;

}

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

.empty-orders{

background:white;

border-radius:30px;

padding:70px 40px;

text-align:center;

box-shadow:var(--shadow);

}

.empty-orders img{

width:180px;

margin-bottom:25px;

}

.empty-orders h2{

font-size:36px;

margin-bottom:10px;

}

.empty-orders p{

color:#777;

margin-bottom:35px;

}

.empty-orders a{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 35px;

border-radius:15px;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

color:white;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.empty-orders a:hover{

transform:translateY(-3px);

box-shadow:

0 15px 30px

rgba(139,15,69,.25);

}

/*==================================
ORDER GRID
==================================*/

.orders-container{

display:flex;

flex-direction:column;

gap:28px;

}

/*==================================
ORDER CARD
==================================*/

.order-card{

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

backdrop-filter:blur(16px);

border-radius:28px;

overflow:hidden;

border:1px solid rgba(255,255,255,.6);

box-shadow:

0 18px 45px rgba(0,0,0,.08);

transition:.35s;

}

.order-card:hover{

transform:translateY(-6px);

box-shadow:

0 25px 60px rgba(0,0,0,.12);

}

/*==================================
TOP BAR
==================================*/

.order-top{

padding:20px 28px;

background:

linear-gradient(

135deg,

#8B0F45,

#C51D64

);

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

color:white;

}

.order-top-left{

display:flex;

gap:40px;

flex-wrap:wrap;

}

.order-top-item{

display:flex;

flex-direction:column;

}

.order-top-item span{

font-size:12px;

opacity:.8;

text-transform:uppercase;

letter-spacing:.5px;

}

.order-top-item strong{

font-size:16px;

margin-top:4px;

}

.order-status{

padding:10px 22px;

border-radius:50px;

font-weight:700;

font-size:14px;

background:white;

color:#1BAE4B;

box-shadow:

0 8px 18px rgba(255,255,255,.2);

}

/*==================================
PRODUCT
==================================*/

.order-product{

display:flex;

gap:22px;

padding:25px 28px;

align-items:center;

border-bottom:1px solid #efefef;

transition:.3s;

}

.order-product:last-child{

border-bottom:none;

}

.order-product:hover{

background:#fcfcfc;

}

.order-image{

width:120px;

height:145px;

border-radius:18px;

overflow:hidden;

background:#fafafa;

flex-shrink:0;

}

.order-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.order-card:hover .order-image img{

transform:scale(1.08);

}

/*==================================
INFO
==================================*/

.order-info{

flex:1;

display:flex;

flex-direction:column;

gap:8px;

}

.order-info h3{

font-size:21px;

font-weight:700;

color:#222;

}

.order-category{

font-size:14px;

color:#888;

}

.order-variant{

font-size:15px;

color:#666;

}

.order-price{

font-size:28px;

font-weight:700;

color:#8B0F45;

margin-top:8px;

}

/*==================================
RIGHT
==================================*/

.order-right{

display:flex;

flex-direction:column;

align-items:flex-end;

gap:12px;

min-width:230px;

}

.delivery-date{

font-size:15px;

font-weight:600;

color:#444;

}

.payment-success{

display:flex;

align-items:center;

gap:8px;

padding:10px 18px;

border-radius:50px;

background:#EAF9EF;

color:#0F8A3E;

font-size:14px;

font-weight:700;

}

.payment-success i{

font-size:15px;

}

/*==================================
BUTTONS
==================================*/

.order-buttons{

display:flex;

gap:12px;

flex-wrap:wrap;

margin-top:10px;

}

.order-btn{

height:48px;

padding:0 24px;

border:none;

border-radius:14px;

cursor:pointer;

font-weight:600;

font-size:15px;

transition:.35s;

}

.view-btn{

background:

linear-gradient(

135deg,

#8B0F45,

#C51D64

);

color:white;

}

.view-btn:hover{

transform:translateY(-3px);

box-shadow:

0 12px 30px rgba(139,15,69,.25);

}

.invoice-btn{

background:#fff8e4;

color:#A88617;

}

.invoice-btn:hover{

background:#D4AF37;

color:white;

}

.buy-btn{

background:#F5F5F5;

}

.buy-btn:hover{

background:#111;

color:white;

}

.cancel-btn{

background:#FFECEC;

color:#C62828;

}

.cancel-btn:hover{

background:#C62828;

color:white;

}

/*==================================
DELIVERY TIMELINE
==================================*/

.order-timeline{

padding:28px;

background:#fafafa;

border-top:1px solid #eee;

}

.timeline-title{

font-size:18px;

font-weight:700;

margin-bottom:30px;

color:#222;

}

.timeline{

display:flex;

justify-content:space-between;

align-items:flex-start;

position:relative;

gap:10px;

}

.timeline::before{

content:"";

position:absolute;

left:5%;

top:22px;

width:90%;

height:5px;

background:#e5e5e5;

border-radius:20px;

z-index:1;

}

/* Progress */

.timeline-progress{

position:absolute;

left:5%;

top:22px;

height:5px;

width:0;

border-radius:20px;

background:linear-gradient(

90deg,

#D4AF37,

#F5D76E

);

z-index:2;

transition:1s ease;

}

/*==================================
STEP
==================================*/

.timeline-step{

position:relative;

z-index:3;

flex:1;

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

}

.timeline-circle{

width:46px;

height:46px;

border-radius:50%;

background:white;

border:4px solid #ddd;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

transition:.4s;

box-shadow:

0 10px 20px rgba(0,0,0,.06);

}

.timeline-step.active .timeline-circle{

background:linear-gradient(

135deg,

#D4AF37,

#F5D76E

);

border-color:#D4AF37;

color:white;

transform:scale(1.08);

box-shadow:

0 12px 30px rgba(212,175,55,.35);

}

.timeline-step span{

margin-top:14px;

font-size:14px;

font-weight:600;

color:#666;

line-height:1.5;

}

.timeline-step.active span{

color:#222;

}

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

.status-pending{

background:#FFF7E5;

color:#C48A00;

}

.status-confirmed{

background:#EDF9EE;

color:#0F8A3E;

}

.status-shipped{

background:#EAF3FF;

color:#1565C0;

}

.status-out{

background:#F2ECFF;

color:#6A1B9A;

}

.status-delivered{

background:#E9FFF1;

color:#0A8D44;

}

/*==================================
ORDER TOTAL
==================================*/

.order-total{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 30px;

background:white;

border-top:1px solid #eee;

}

.total-label{

font-size:17px;

font-weight:600;

color:#666;

}

.total-price{

font-size:34px;

font-weight:700;

color:#8B0F45;

}

/*==================================
ORDER FOOTER
==================================*/

.order-footer{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 30px;

background:#fff;

border-top:1px solid #eee;

flex-wrap:wrap;

gap:20px;

}

.payment-id{

font-size:14px;

color:#777;

}

.payment-id strong{

color:#222;

}

.order-footer-right{

display:flex;

gap:14px;

flex-wrap:wrap;

}

/*==================================
BADGES
==================================*/

.badge{

padding:8px 18px;

border-radius:50px;

font-size:13px;

font-weight:700;

}

.badge-paid{

background:#EAF9EF;

color:#0E8B3D;

}

.badge-cod{

background:#FFF5E3;

color:#A87000;

}

/*==================================
HOVER EFFECTS
==================================*/

.order-card{

position:relative;

overflow:hidden;

}

.order-card::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:120%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.28),
transparent
);

transition:.9s;

pointer-events:none;

}

.order-card:hover::before{

left:120%;

}

.order-image{

position:relative;

overflow:hidden;

}

.order-image::after{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:linear-gradient(

to top,

rgba(0,0,0,.08),

transparent 50%

);

opacity:0;

transition:.35s;

}

.order-card:hover .order-image::after{

opacity:1;

}

.order-btn{

position:relative;

overflow:hidden;

}

.order-btn::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;

height:100%;

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

transform:skewX(-25deg);

transition:.55s;

}

.order-btn:hover::after{

left:150%;

}

/*==================================
SCROLLBAR
==================================*/

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-thumb{

background:#C51D64;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#f2f2f2;

}

.status-cancelled{

background:#FFEAEA;

color:#D50000;

}

/*==================================
TABLET
==================================*/

@media(max-width:1100px){

.order-product{

flex-wrap:wrap;

}

.order-right{

width:100%;

align-items:flex-start;

margin-top:18px;

}

.timeline{

overflow-x:auto;

padding-bottom:10px;

}

.timeline::-webkit-scrollbar{

height:6px;

}

.timeline-step{

min-width:120px;

}

}

/*==================================
MOBILE
==================================*/

@media(max-width:768px){

.orders-page{

padding:20px 15px 60px;

}

.orders-header{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.orders-header h1{

font-size:30px;

}

.orders-search{

width:100%;

height:52px;

}

.order-top{

padding:18px;

}

.order-top-left{

gap:18px;

}

.order-product{

padding:18px;

gap:16px;

align-items:flex-start;

}

.order-image{

width:90px;

height:115px;

}

.order-info h3{

font-size:17px;

}

.order-price{

font-size:22px;

}

.order-right{

margin-top:12px;

}

.order-buttons{

width:100%;

}

.order-btn{

flex:1;

padding:0 12px;

font-size:14px;

height:44px;

}

.order-timeline{

padding:20px 15px;

}

.timeline{

justify-content:flex-start;

gap:25px;

overflow-x:auto;

padding-bottom:12px;

}

.timeline::before{

width:700px;

left:20px;

}

.timeline-progress{

left:20px;

}

.timeline-step{

min-width:95px;

}

.timeline-circle{

width:40px;

height:40px;

font-size:17px;

}

.timeline-step span{

font-size:12px;

}

.order-total{

padding:18px;

}

.total-price{

font-size:26px;

}

.order-footer{

padding:18px;

flex-direction:column;

align-items:flex-start;

}

}

/*==================================
SMALL MOBILE
==================================*/

@media(max-width:480px){

.orders-header h1{

font-size:26px;

}

.order-top{

border-radius:20px 20px 0 0;

}

.order-status{

padding:8px 16px;

font-size:12px;

}

.order-product{

padding:15px;

}

.order-image{

width:80px;

height:105px;

}

.order-info h3{

font-size:16px;

}

.order-category,

.order-variant{

font-size:13px;

}

.order-price{

font-size:20px;

}

.order-btn{

height:42px;

font-size:13px;

}

.timeline-circle{

width:36px;

height:36px;

font-size:15px;

}

.total-label{

font-size:15px;

}

.total-price{

font-size:24px;

}

.payment-id{

font-size:12px;

}

}

/*==================================
ANIMATIONS
==================================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.order-card{

animation:fadeUp .45s ease both;

}

.order-card:nth-child(2){

animation-delay:.08s;

}

.order-card:nth-child(3){

animation-delay:.16s;

}

.order-card:nth-child(4){

animation-delay:.24s;

}

.order-card:nth-child(5){

animation-delay:.32s;

}