:root{

   --font:'Inter',sans-serif;

   --bg:#f8f8f8;

}

*{

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

body{

   font-family:var(--font);

   background:var(--bg);
}








main{

padding:20px;

}


.hero{

margin-bottom:14px;

}



.hero h1{

font-size:24px;

line-height:1.1;

color:#6e082f;

margin-bottom:4px;

font-weight:700;

}



.hero p{

font-size:13px;

color:#777;

}


.map{

height:260px;

border-radius:24px;

overflow:hidden;

margin-bottom:20px;

background:#eee;

box-shadow:

0 10px 30px

rgba(
0,
0,
0,
.06

);

border:

1px solid

rgba(
0,
0,
0,
.04

);

}



.map img,

.map iframe{

width:100%;

height:100%;

border:0;

display:block;

object-fit:cover;

}


.stores{

display:flex;

flex-direction:column;

gap:18px;

}


.store{

display:flex;

align-items:center;

gap:16px;

padding:14px;

width:100%;

background:white;

border:none;

border-radius:24px;

box-shadow:

0 8px 25px

rgba(
0,
0,
0,
.05

);

transition:.25s;

}


#continueBtn{

width:100%;

height:56px;

border:none;

border-radius:18px;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-size:18px;

font-weight:700;

box-shadow:

0 12px 30px

rgba(
124,
14,
67,
.30

);

}


#continueBtn:disabled{

opacity:.4;

}

.map{

height:240px;

border-radius:16px;

overflow:hidden;

margin-bottom:20px;

}

.map img{

width:100%;

height:100%;

object-fit:cover;

}

.store{

display:flex;

gap:16px;

padding:16px;

margin-bottom:12px;

width:100%;

background:white;

border:none;

border-radius:16px;

}

.store-image{

width:120px;

height:120px;

border-radius:18px;

overflow:hidden;

flex-shrink:0;

}

.store-image img{

width:100%;

height:100%;

object-fit:cover;

object-position:center;

}

.store-info{

display:flex;

flex-direction:column;

justify-content:center;

gap:6px;

flex:1;

}



.store-info h3{

font-size:28px;

color:#5f0c31;

}



.store-info p{

color:#555;

line-height:1.5;

}

.store.active{

border:

2px solid

#7c0e43;

transform:

translateY(
-2px
);

}

.selected-store{

display:flex;

gap:16px;

padding:20px;

background:white;

border-radius:16px;

margin-bottom:20px;

}

.selected-store img{

width:80px;

height:80px;

border-radius:12px;

object-fit:cover;

}



.categories{

position:sticky;

top:76px;

z-index:50;

display:flex;

gap:12px;

overflow-x:auto;

padding:12px 0;

background:white;

}



.categories::-webkit-scrollbar{

display:none;

}

.categories button{

    height:52px;

    padding:0 24px;

    border:none;

    border-radius:999px;

    background:white;

    white-space:nowrap;

    font-weight:600;

    font-size:15px;

    color:#333;

    box-shadow:
    0 4px 12px rgba(0,0,0,.05);
}



.products{

display:flex;

flex-direction:column;

gap:16px;

}



.product{

display:flex;

gap:16px;

background:white;

padding:16px;

border-radius:16px;

min-height:180px;

}



.product img{

width:140px;

height:140px;

object-fit:cover;

border-radius:16px;

}



.product button{

margin-left:auto;

width:90px;

height:48px;

background:#7c0e43;

color:white;

border:none;

border-radius:12px;

}

.cat-btn.active{

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

}

#search{

width:100%;

height:56px;

padding:0 16px;

margin-bottom:20px;

border:none;

border-radius:16px;

background:white;

}

.hidden{

display:none !important;

}

.floating-cart{

position:fixed;

left:14px;

right:14px;

bottom:14px;

z-index:90;

display:flex;

align-items:center;

justify-content:space-between;

gap:14px;

padding:16px 18px;

border-radius:24px;

background:

rgba(
124,
14,
67,
.96

);

backdrop-filter:

blur(
16px
);

color:white;

box-shadow:

0 18px 40px

rgba(
0,
0,
0,
.22

);

}

.floating-cart button{

height:48px;

padding:0 20px;

background:white;

color:#7c0e43;

border:none;

border-radius:12px;

}

.floating-cart a{

display:flex;

align-items:center;

justify-content:center;

height:48px;

padding:

0 22px;

background:white;

color:#7c0e43;

border-radius:14px;

text-decoration:none;

font-weight:700;

flex-shrink:0;

}

.floating-cart strong{

font-size:18px;

}



.floating-cart small{

opacity:.8;

font-size:12px;

display:block;

margin-top:2px;

}

.view-cart{

background:white;

color:#7c0e43;

padding:12px 18px;

border-radius:12px;

text-decoration:none;

font-weight:700;

}

.cart-card{

display:flex;

gap:16px;

background:white;

padding:16px;

border-radius:16px;

margin-bottom:16px;

}

.cart-card img{

width:110px;

aspect-ratio:1/1;

height:auto;

display:block;

overflow:hidden;

object-fit:cover;

object-position:center;

border-radius:16px;

flex-shrink:0;

}

.cart-summary{

position:sticky;

bottom:20px;

background:#7c0e43;

padding:20px;

border-radius:20px;

color:white;

}

.cart-header{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px;

background:white;

position:sticky;

top:0;

z-index:100;

border-bottom:
1px solid rgba(0,0,0,.06);

}









.cart-header h1{

font-size:28px;

margin:0;

}



.cart-right .header-account{

width:44px;

height:44px;

border-radius:50%;

background:#f5f5f5;

display:flex;

align-items:center;

justify-content:center;

}



.cart-right .header-account img{

width:22px;

height:22px;

}

.cart-summary a{

display:block;

text-align:center;

padding:16px;

background:white;

color:#7c0e43;

text-decoration:none;

border-radius:16px;

}

.product,
.cart-card{

align-items:center;

}

.checkout-card{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:20px;

}



.checkout-card input,

.checkout-card textarea{

width:100%;

margin-top:12px;

height:52px;

padding:12px;

}



.checkout-card textarea{

height:120px;

}



.checkout-summary{

background:#fafafa;

border-radius:20px;

padding:18px;

}



.checkout-summary button{

width:100%;

height:56px;

background:white;

color:#7c0e43;

border:none;

border-radius:16px;

}



.success{

padding:40px;

text-align:center;

}

.order-card{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:16px;

display:flex;

flex-direction:column;

gap:12px;

}



.order-card select{

height:48px;

border-radius:12px;

padding:10px;

}



.order-card button{

height:48px;

background:#7c0e43;

color:white;

border:none;

border-radius:12px;

}

.detail-card{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:20px;

}



.item-card{

display:flex;

justify-content:space-between;

padding:16px;

background:white;

border-radius:12px;

margin-bottom:10px;

}

.stats{

display:grid;

grid-template-columns:

repeat(
3,
1fr
);

gap:12px;

margin-bottom:20px;

}



.stats div{

background:white;

padding:20px;

border-radius:16px;

text-align:center;

}



.stats strong{

display:block;

font-size:28px;

margin-top:10px;

color:#7c0e43;

}

.queue-grid{

display:grid;

grid-template-columns:

repeat(
3,
1fr
);

gap:20px;

}



.queue-grid section{

background:white;

padding:20px;

border-radius:20px;

min-height:80vh;

}



.queue-grid h2{

color:#7c0e43;

margin-bottom:20px;

}



.queue-card{

background:

#7c0e43;

color:white;

padding:20px;

border-radius:16px;

font-size:28px;

font-weight:700;

margin-bottom:12px;

}



@media(
max-width:900px
){

.queue-grid{

grid-template-columns:
1fr;

}

}

.track-card{

background:white;

padding:30px;

border-radius:20px;

text-align:center;

}



.track-card h2{

font-size:42px;

color:#7c0e43;

}

.order-history{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:16px;

}

.track-options{
margin-top:8px;
}

.track-option{
font-size:13px;
color:#666;
line-height:1.5;
margin-top:2px;
}



.order-history a{

display:inline-block;

margin-top:10px;

background:#7c0e43;

color:white;

padding:10px 16px;

border-radius:12px;

text-decoration:none;

}

.admin-order{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:16px;

display:flex;

flex-direction:column;

gap:10px;

}

.admin-links{

margin-top:30px;

}



.admin-links a{

display:block;

padding:20px;

background:#7c0e43;

color:white;

text-align:center;

border-radius:16px;

text-decoration:none;

font-weight:700;

}

.report-row{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:12px;

display:flex;

justify-content:space-between;

align-items:center;

}

.customer-card{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:16px;

}



.customer-card a{

display:inline-block;

margin-top:10px;

padding:10px 16px;

background:#7c0e43;

color:white;

border-radius:12px;

text-decoration:none;

}

.low-stock{

border:

3px solid

#ff9800;

}



.low-stock strong{

color:

#ff9800;

}

/* POLISH PASS */

body{

max-width:1600px;

margin:auto;

}



main{

padding:24px;
padding-bottom:120px;

}




button{

transition:

.25s;

}



button:hover{

transform:

translateY(
-1px
);

}



button:active{

transform:

scale(
.98
);

}



input,

select,

textarea{

font-size:16px;

}



.product,

.store,

.cart-card,

.order-card,

.customer-card,

.report-row{

box-shadow:

0 8px 24px

rgba(
0,
0,
0,
.05

);

}



.product img,

.store-image img,

.cart-card img{

background:

#eee;

}



button:disabled{

opacity:.6;

cursor:not-allowed;

}



.empty-state{

padding:60px;

text-align:center;

color:#777;

}



@media(
min-width:1100px
){

.products{

display:grid;

grid-template-columns:

1fr;

gap:18px;

}



.stores{

display:grid;

grid-template-columns:

repeat(
2,
1fr
);

}



}

/* MOBILE STORE COMPACT */

@media(
max-width:768px
){

.map{

height:150px;

margin-bottom:16px;

}



.store{

padding:6px 10px;

margin-bottom:0;

}



.store-image{

width:54px;

height:54px;

}
.store-info{

display:flex;

flex-direction:column;

justify-content:center;

align-items:flex-start;

text-align:left;

gap:2px;

flex:1;

}


.store-info h3{

font-size:16px;

margin:0;

text-align:left;

width:100%;

}



.store-info p{

font-size:12px;

line-height:1.2;

margin:0;

}



.stores{

gap:4px;

}

.store-address{

font-size:12px;

line-height:1.3;

color:#777;

text-align:left;

width:100%;

margin:0;

}



.store-hours{

display:flex;

justify-content:flex-start;

align-items:center;

gap:6px;

font-size:12px;

width:100%;

margin-top:4px;

}



.store-hours span{

color:#555;

font-weight:500;

}



#continueBtn{

height:50px;

font-size:16px;

margin-top:10px;

}



main{

padding-bottom:80px;

}

}

.disabled-store{

opacity:.55;

filter:

grayscale(
1
);

}



.disabled-store img{

opacity:.6;

}



.coming-soon{

margin-top:4px;

font-size:11px;

color:

#7c0e43;

font-weight:700;

}

.header-right{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

}

/* MOBILE STICKY CONTINUE */

@media(
max-width:768px
){

#continueBtn{

position:fixed;

left:12px;

right:12px;

bottom:12px;

width:auto;

height:54px;

z-index:100;

border-radius:16px;

}



main{

padding-bottom:90px;

}

}



.header-account img{

width:24px;

height:24px;

object-fit:contain;

display:block;

}



.header-account:active{

transform:

scale(
.95
);

}



.header-account:hover{

background:

#efefef;

}

/* DESKTOP STORE LAYOUT B */

@media(
min-width:1200px
){

body{

max-width:none;

}



/* CONTAINER */

main{

max-width:1320px;

margin:auto;

padding:

32px
40px
60px;

}



/* REMOVE OLD WRAPPERS */

.desktop-left,
.desktop-right{

display:contents;

}



/* TITLE */

.hero{

text-align:center;

margin-bottom:24px;

}



.hero h1{

font-size:28px;

margin-bottom:6px;

}



.hero p{

font-size:14px;

}



/* MAP */

.map{

height:320px;

max-width:1100px;

margin:

0 auto
20px;

}



/* STORE LIST */

.stores{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:

repeat(
3,
1fr
);

gap:18px;

align-items:stretch;

}



.store{

display:flex;

flex-direction:column;

align-items:flex-start;

padding:12px;

height:100%;

}



.store-image{

width:100%;

height:160px;

}

.store-image img{

width:100%;

height:100%;

object-fit:cover;

}

.store-info{

width:100%;

margin-top:14px;

}



.store-info h3{

font-size:16px;

}



.store-address{

font-size:14px;

}



.store-hours{

font-size:13px;

}



/* CONTINUE */

section:last-child{

display:flex;

justify-content:center;

}



#continueBtn{

position:static;

width:420px;

margin-top:26px;

left:auto;

right:auto;

}



}

@media(
max-width:1350px
){

.stores{

grid-template-columns:

repeat(
2,
1fr
);

}

}






.header-account img{

width:20px;

height:20px;

object-fit:contain;

}




/* MOBILE */

@media(
max-width:1400px
){









}

/* MENU PRODUCT POLISH */

.products{

display:grid;

grid-template-columns:1fr;

gap:18px;

}



.product{

display:flex;

flex-direction:column;

background:white;

padding:14px;

border-radius:24px;

overflow:hidden;

min-height:auto;

box-shadow:

0 10px 30px

rgba(
0,
0,
0,
.06

);

}



.product img{

width:100%;

height:220px;

object-fit:cover;

border-radius:18px;

margin-bottom:14px;

}



.product h3{

font-size:22px;

margin-bottom:6px;

color:#5f0c31;

}



.product p{

font-size:14px;

line-height:1.5;

color:#666;

margin-bottom:12px;

}



.product strong{

font-size:22px;

color:#7c0e43;

}



.product button{

width:100%;

height:52px;

margin-top:16px;

border:none;

border-radius:14px;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-weight:700;

font-size:16px;

}



/* DESKTOP */

@media(
min-width:900px
){

.products{

grid-template-columns:

repeat(
3,
1fr
);

}

}

/* MENU MOCKUP STYLE */

.products{

display:flex;

flex-direction:column;

gap:14px;

}



/* PRODUCT CARD */

.product{

display:grid;

grid-template-columns:

110px
1fr
110px;

align-items:center;

gap:16px;

padding:14px;

background:white;

border-radius:22px;

min-height:140px;

box-shadow:

0 8px 24px

rgba(
0,
0,
0,
.05

);

}



/* IMAGE */

.product img{

width:110px;

height:110px;

border-radius:18px;

object-fit:cover;

margin:0;

}



/* INFO */

.product-info{

display:flex;

flex-direction:column;

justify-content:center;

gap:6px;

}



.product h3{

font-size:18px;

margin:0;

color:#111;

}



.product p{

font-size:14px;

line-height:1.4;

margin:0;

color:#666;

}



.product strong{

font-size:28px;

color:#7c0e43;

margin-top:8px;

}



/* BUTTON */

.product button{

width:100%;

height:52px;

border:none;

border-radius:14px;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-size:16px;

font-weight:700;

margin:0;

}



/* MOBILE */

@media(
max-width:768px
){

.product{

grid-template-columns:

92px
1fr
92px;

gap:12px;

padding:12px;

min-height:120px;

}



.product img{

width:92px;

height:92px;

border-radius:16px;

}



.product h3{

font-size:16px;

}



.product p{

font-size:12px;

}



.product strong{

font-size:18px;

}



.product button{

height:46px;

font-size:15px;

}

}

/* FINAL MENU MOCKUP */

.products{

display:flex;

flex-direction:column !important;

gap:14px !important;

}



.product{

grid-template-columns:

92px
1fr
92px;

align-items:center;

gap:14px;

padding:12px;

background:white;

border-radius:20px;

min-height:120px;

box-shadow:

0 6px 20px

rgba(
0,
0,
0,
.05

);

}

.product.show{

display:grid;

}



/* IMAGE */

.product img{

width:92px !important;

height:92px !important;

border-radius:16px !important;

object-fit:cover !important;

margin:0 !important;

}



/* INFO */

.product-info{

display:flex ;

flex-direction:column !important;

justify-content:center !important;

align-items:flex-start !important;

gap:4px !important;

}



.product h3{
    font-size:20px !important;
    margin:0 !important;
    color:#1f1f1f !important;
    font-weight:600 !important;
    line-height:1.25 !important;
    letter-spacing:-0.3px !important;
}



.product p{

font-size:12px !important;

line-height:1.4 !important;

margin:0 !important;

color:#666 !important;

}



.product strong{

font-size:18px !important;

color:#7c0e43 !important;

margin-top:6px !important;

}



/* STOCK */

.product small{

font-size:11px !important;

color:#999 !important;

margin-top:2px !important;

}



/* BUTTON */

.product button{

width:100% !important;

height:46px !important;

border:none !important;

border-radius:14px !important;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

) !important;

color:white !important;

font-size:15px !important;

font-weight:700 !important;

margin:0 !important;

}



/* OUT OF STOCK */

.product button:disabled{

background:#c7c7c7 !important;

color:white !important;

}



/* DESKTOP */

@media(
min-width:1100px
){

.products{

display:grid;

grid-template-columns:

repeat(
2,
1fr
) !important;

}

}



/* ACCOUNT */




.header-account img{

width:20px;

height:20px;

object-fit:contain;

display:block;

}

/* STORE INFO CARD */

.selected-store{

display:flex;

align-items:center;

gap:12px;

padding:10px 12px;

margin-bottom:16px;

background:#f4f8f4;

border-radius:18px;

}



.selected-store img{

width:58px;

height:58px;

border-radius:14px;

object-fit:cover;

flex-shrink:0;

}



/* INFO */

.store-details{

flex:1;

}



.store-details small{

display:block;

font-size:11px;

color:#777;

margin-bottom:2px;

}



.store-details h2{

font-size:16px;

line-height:1.2;

margin:2px 0;

color:#111;

}



.store-details p{

margin-top:2px;

font-size:12px;

color:#555;

}



/* CHANGE BUTTON */

.change-store{

display:flex;

align-items:center;

justify-content:center;

height:38px;

padding:0 14px;

border-radius:12px;

background:white;

text-decoration:none;

font-weight:700;

font-size:13px;

color:#7c0e43;

border:

1px solid

rgba(
0,
0,
0,
.06

);

flex-shrink:0;

}

/* CLEAN PRODUCT LAYOUT */

.product{

grid-template-columns:

92px
1fr
74px !important;

}



.product-info{

display:flex;

flex-direction:column;

justify-content:center;

gap:8px;

}



.product-bottom{

display:flex;

align-items:center;

justify-content:space-between;

}



.product strong{
    font-size:26px !important;
    font-weight:700 !important;
    color:#8B004B !important;
    letter-spacing:-0.5px !important;
}



.product-action{

display:flex;

align-items:center;

justify-content:center;

}



.product button{

width:70px;

height:40px;

border-radius:12px;

font-size:14px;

}

/* QTY BOX */

.qty-box{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

padding:6px 8px;

background:#f5f5f5;

border-radius:999px;

min-width:110px;

height:44px;

}



.qty-box button{

width:28px;

height:28px;

min-width:28px;

border:none;

border-radius:50%;

background:#8b004b;

color:white;

font-size:22px;

font-weight:900;

display:flex;

align-items:center;

justify-content:center;

padding:0;

line-height:1;

}



.qty-number{

min-width:18px;

text-align:center;

font-weight:700;

font-size:15px;

color:#111;

}

/* DESKTOP FLOATING CART */

@media(
min-width:1100px
){

.floating-cart{

left:auto;

right:24px;

bottom:24px;

width:320px;

border-radius:24px;

padding:18px;

box-shadow:

0 12px 40px

rgba(
0,
0,
0,
.18

);

}



.floating-cart{

display:flex;

flex-direction:column;

align-items:flex-start;

gap:14px;

}



.view-cart{

width:100%;

justify-content:center;

}



}

/* DESKTOP STORE CARD */

@media(
min-width:1100px
){

.selected-store{

padding:22px 28px;

border-radius:28px;

gap:20px;

}



.selected-store img{

width:96px;

height:96px;

border-radius:22px;

}



.store-details small{

font-size:15px;

}



.store-details h2{

font-size:38px;

line-height:1.1;

margin:6px 0;

}



.store-details p{

font-size:20px;

margin-top:6px;

}



.change-store{

height:56px;

padding:0 26px;

font-size:18px;

border-radius:18px;

}

}


/* CLEAN CART UI */

/* CLEAN CART UI */

#cartItems{

display:flex;
flex-direction:column;
padding:18px;

}



.cart-card{

display:flex;

align-items:center;

gap:16px;

padding:18px 0;

border-bottom:
1px solid rgba(0,0,0,.08);

}



.cart-card img{

width:100px;

height:100px;

border-radius:20px;

object-fit:cover;

}



.cart-info{

display:flex;

flex-direction:column;

justify-content:center;

min-width:0;

}



.cart-info h3{

font-size:18px;
font-weight:700;

margin-bottom:6px;

}



.cart-info p{

font-size:18px;
font-weight:700;

color:#7c0e43;

margin-bottom:12px;

}



/* QTY */

.cart-qty{

display:flex;

align-items:center;

gap:18px;

padding:6px 14px;

border:
1px solid rgba(0,0,0,.08);

border-radius:14px;

width:max-content;

margin-left:auto;

}



.cart-qty button{

border:none;

background:none;

font-size:28px;

font-weight:700;

color:#7c0e43;

line-height:1;

padding:0;

}



.cart-qty span{

font-size:18px;

font-weight:700;

min-width:16px;

text-align:center;

}



/* REMOVE */

.remove-btn{

display:none;

}



/* SUMMARY */

#cartSummary{

padding:
0 18px 120px;

}



.cart-summary{

background:white;

border-radius:24px;

padding:22px;

box-shadow:
0 4px 14px rgba(0,0,0,.05);

}



.summary-row{

display:flex;

justify-content:space-between;

margin-bottom:14px;

font-size:17px;

}



.summary-total{

margin-top:18px;

padding-top:18px;

border-top:
1px solid rgba(0,0,0,.08);

font-size:24px;

font-weight:700;

}



/* CHECKOUT */

.checkout-btn{

position:fixed;

left:18px;
right:18px;
bottom:18px;

height:58px;

border-radius:18px;

background:
linear-gradient(
90deg,
#7c0e43,
#95004d
);

color:white !important;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:20px;

font-weight:700;

box-shadow:
0 10px 30px rgba(124,14,67,.25);

}



/* DESKTOP */

@media(min-width:1100px){

#cartItems,
#cartSummary{

max-width:760px;

margin:auto;

}



.checkout-btn{

max-width:760px;

left:0;
right:0;

margin:auto;

}

}



/* REMOVE */

.remove-btn{

display:none;

}



/* SUMMARY */

#cartSummary{

padding:

0 18px 140px;

}



.cart-summary{

padding:22px;

background:white;

border-radius:24px;

box-shadow:

0 4px 14px

rgba(
0,
0,
0,
.05

);

margin-bottom:110px;

}



.summary-row{

display:flex;

justify-content:space-between;

margin-bottom:18px;

font-size:24px;

color:#222;

}



.summary-total{

margin-top:24px;

padding-top:24px;

border-top:
1px solid rgba(0,0,0,.08);

font-size:42px;

font-weight:800;

color:#111;

}



/* CHECKOUT */
.checkout-btn{

position:fixed;

left:18px;

font-size:26px;

right:18px;

bottom:18px;

height:68px;

border-radius:22px;

background:

linear-gradient(

90deg,

#7c0e43,

#9d004d

);

color:white !important;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:20px;

font-weight:700;

box-shadow:

0 10px 30px

rgba(
124,
14,
67,
.28

);

z-index:100;

}



/* DESKTOP */

@media(
min-width:1100px
){

#cartItems,
#cartSummary{

max-width:700px;

margin:auto;

}



.checkout-btn{

max-width:700px;

margin:auto;

left:0;

right:0;

}

}

/* DESKTOP CART LAYOUT */

@media(
min-width:1100px
){

.cart-layout{

display:grid !important;

grid-template-columns:
1fr 520px !important;

gap:64px !important;

max-width:1500px !important;

padding:
40px 60px 140px !important;

align-items:center !important;

min-height:calc(100vh - 160px);

}



/* LEFT */

#cartItems{

width:100%;

}



.cart-card{

display:grid;

grid-template-columns:

100px
1fr
auto;

align-items:center;

gap:22px;

padding:24px;

border-radius:28px;

background:white;

box-shadow:

0 4px 18px

rgba(
0,
0,
0,
.04

);

}



/* RIGHT */

#cartSummary{

padding:0;

position:sticky;

top:110px;

}



/* SUMMARY CARD */

.cart-summary{

background:white;

border-radius:32px;

padding:36px;

box-shadow:

0 8px 28px

rgba(
0,
0,
0,
.05

);

}



/* CHECKOUT BUTTON */

.checkout-btn{

position:static;

width:100%;

margin-top:18px;

}



}

/* FINAL DESKTOP CART FIX */

@media(min-width:1100px){

.cart-layout{

display:grid !important;

grid-template-columns:
1fr 520px !important;

gap:64px !important;

max-width:1500px !important;

padding:
40px 60px 140px !important;

}



#cartItems{

max-width:none !important;

width:100% !important;

padding:0 !important;

margin:0 !important;

}



#cartSummary{

width:100% !important;

max-width:none !important;

padding:0 !important;

margin:0 !important;

align-self:center;

}



.cart-summary{

width:100% !important;

padding:42px !important;

border-radius:36px !important;

}



.summary-row{

font-size:22px !important;

margin-bottom:18px !important;

}



.summary-total{

font-size:36px !important;

margin-top:24px !important;

padding-top:24px !important;

}



.checkout-btn{

width:100% !important;

height:68px !important;

font-size:22px !important;

border-radius:22px !important;

margin-top:22px !important;

}

}

/* MOBILE STICKY SUMMARY */

@media(
max-width:1099px
){

#cartSummary{

position:fixed;

left:0;

right:0;

bottom:0;

z-index:120;

padding:14px;

background:

linear-gradient(
180deg,
transparent,
rgba(255,255,255,.92)
20%
);

backdrop-filter:
blur(10px);

}



.cart-summary{

margin-bottom:0 !important;

border-radius:24px;

padding:18px 18px 90px;

box-shadow:

0 -8px 30px

rgba(
0,
0,
0,
.08

);

}



/* SMALLER TEXT */

.summary-row{

font-size:16px !important;

margin-bottom:10px !important;

}



.summary-total{

font-size:28px !important;

margin-top:14px !important;

padding-top:14px !important;

}



/* BUTTON */

.checkout-btn{

left:14px !important;

right:14px !important;

bottom:14px !important;

height:58px !important;

font-size:20px !important;

border-radius:18px !important;

}





}

/* MOBILE CART CARD FIX */

@media(
max-width:768px
){

.cart-card{

display:grid;

grid-template-columns:

72px
1fr
auto;

gap:8px;

padding:2px 0;

border-radius:0;

background:transparent;

box-shadow:none;

border-bottom:
1px solid rgba(0,0,0,.05);

}



.cart-card img{

width:72px;

height:72px;

border-radius:14px;

margin-left:2px;

}

#cartItems{

padding:

0 0 240px;

gap:0;

}

@media(max-width:768px){

#cartItems .cart-card:last-child{

border-bottom:none;

}

}



/* INFO */

.cart-info{

display:flex;

flex-direction:column;

justify-content:center;

min-width:0;

}






/* QTY RIGHT */

.cart-qty{

margin-left:auto;

align-self:center;

}



/* SMALLER TITLE */

.cart-info h3{

font-size:16px;

line-height:1.15;

margin-bottom:4px;

}



/* PRICE */

.cart-info p{

font-size:15px;

margin-bottom:8px;

}

}


/* BOTTOM ACTIONS */

.bottom-actions{

position:fixed;

left:14px;
right:14px;
bottom:14px;

display:grid;

grid-template-columns:
140px 1fr;

gap:14px;

z-index:200;

}



/* BACK */

.back-menu-btn{

height:58px;

border-radius:18px;

background:white;

border:
1px solid rgba(0,0,0,.08);

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:18px;

font-weight:700;

color:#111;

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

}



/* CHECKOUT */

.bottom-actions .checkout-btn{

position:static !important;

width:100%;

margin:0 !important;

}



/* DESKTOP */

@media(min-width:1100px){

.bottom-actions{

position:static;

display:flex;

flex-direction:column-reverse;

gap:16px;

margin-top:24px;

}



.back-menu-btn{

width:100%;

height:64px;

border-radius:22px;

}



.bottom-actions .checkout-btn{

height:82px;

}

}

/* AUTH */

.auth-page{

max-width:420px;

margin:auto;

padding:

40px 20px;

}



.auth-page h1{

font-size:36px;

margin-bottom:24px;

color:#111;

}



.auth-form{

display:flex;

flex-direction:column;

gap:14px;

}



.auth-form input{

height:56px;

padding:0 18px;

border:none;

border-radius:16px;

background:white;

font-size:16px;

box-shadow:

0 4px 14px

rgba(
0,
0,
0,
.04

);

}



.auth-form button{

height:58px;

border:none;

border-radius:18px;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-size:18px;

font-weight:700;

margin-top:8px;

}



.auth-link{

display:block;

margin-top:20px;

text-align:center;

color:#7c0e43;

font-weight:700;

text-decoration:none;

}



.auth-error{

padding:14px;

background:#ffe7e7;

color:#b00020;

border-radius:14px;

margin-bottom:16px;

}

/* AUTH UI */

.auth-container{

min-height:

calc(100vh - 76px);

display:flex;

align-items:center;

justify-content:center;

padding:24px;

}



.auth-card{

width:100%;

max-width:460px;

background:white;

border-radius:32px;

padding:34px 28px;

box-shadow:

0 10px 40px

rgba(
0,
0,
0,
.06

);

}



.auth-top{

text-align:center;

margin-bottom:28px;

}



.auth-logo{

height:72px;

width:auto;

margin-bottom:18px;

}



.auth-top h1{

font-size:36px;

line-height:1.1;

margin-bottom:8px;

color:#111;

}



.auth-top p{

font-size:15px;

color:#777;

}



/* FORM */

.auth-form{

display:flex;

flex-direction:column;

gap:18px;

}



.input-group{

display:flex;

flex-direction:column;

gap:8px;

}



.input-group label{

font-size:14px;

font-weight:700;

color:#333;

}



.auth-form input{

height:58px;

padding:0 18px;

border:none;

border-radius:18px;

background:#f7f7f7;

font-size:16px;

outline:none;

transition:.2s;

}



.auth-form input:focus{

background:#f1f1f1;

}



.auth-form button{

height:60px;

border:none;

border-radius:20px;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-size:18px;

font-weight:700;

margin-top:6px;

box-shadow:

0 10px 24px

rgba(
124,
14,
67,
.22

);

}



/* FOOTER */

.auth-bottom{

margin-top:22px;

text-align:center;

font-size:15px;

color:#666;

}



.auth-bottom a{

color:#7c0e43;

font-weight:700;

text-decoration:none;

margin-left:6px;

}



/* ERROR */

.auth-error{

padding:14px 16px;

border-radius:16px;

background:#ffe5e8;

color:#b00020;

margin-bottom:18px;

font-size:14px;

font-weight:600;

}



/* MOBILE */

@media(
max-width:768px
){

.auth-container{

padding:18px;

align-items:flex-start;

padding-top:30px;

}



.auth-card{

padding:28px 20px;

border-radius:28px;

}



.auth-top h1{

font-size:30px;

}



.auth-logo{

height:64px;

}

}

/* ACCOUNT PAGE */

.account-page{

max-width:700px;

margin:auto;

padding:24px;

}



.account-card{

background:white;

border-radius:32px;

padding:32px 24px;

box-shadow:

0 10px 40px

rgba(
0,
0,
0,
.05

);

}



/* TOP */

.account-top{

text-align:center;

margin-bottom:32px;

}



.account-avatar{

width:96px;

height:96px;

border-radius:50%;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-size:42px;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

margin:

0 auto
18px;

}



.account-top h1{

font-size:34px;

margin-bottom:6px;

color:#111;

}



.account-top p{

color:#777;

font-size:15px;

}



/* INFO */

.account-section{

margin-bottom:28px;

}



.account-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

border-bottom:
1px solid rgba(0,0,0,.06);

}



.account-row span{

color:#777;

font-size:15px;

}



.account-row strong{

font-size:16px;

color:#111;

}



/* BUTTONS */

.account-actions{

display:flex;

flex-direction:column;

gap:14px;

}



.account-actions a{

height:58px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:17px;

font-weight:700;

background:#f5f5f5;

color:#111;

}



.logout-btn{

background:

#ffe7ea !important;

color:#b00020 !important;

}



/* MOBILE */

@media(
max-width:768px
){

.account-page{

padding:16px;

}



.account-card{

padding:26px 18px;

border-radius:26px;

}



.account-avatar{

width:82px;

height:82px;

font-size:34px;

}



.account-top h1{

font-size:28px;

}

}

/* CHECKOUT */

.checkout-page{

max-width:760px;

margin:auto;

padding:

18px
18px
220px;

}



/* CARD */

.checkout-card{

background:white;

border-radius:28px;

padding:22px;

margin-bottom:18px;

box-shadow:

0 4px 18px

rgba(
0,
0,
0,
.04

);

}



.checkout-card h3{

font-size:28px;

margin-bottom:18px;

color:#111;

}



/* ORDER TYPE */

.order-types{

display:grid;

grid-template-columns:
1fr 1fr;

gap:14px;

}



.order-type-btn{

height:140px;

border:
2px solid rgba(0,0,0,.08);

border-radius:24px;

background:white;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:12px;

font-size:18px;

font-weight:700;

}



.order-type-btn.active{

border-color:#7c0e43;

box-shadow:

0 0 0 3px

rgba(
124,
14,
67,
.08

);

}



/* PICKUP */

.checkout-select{

width:100%;

height:64px;

border:none;

border-radius:18px;

background:#f5f5f5;

padding:0 18px;

font-size:18px;

}



.checkout-date{

margin-top:14px;

font-size:15px;

color:#777;

}



/* CUSTOMER */

.customer-box{

margin-bottom:16px;

}



.customer-box label{

display:block;

font-size:14px;

font-weight:700;

margin-bottom:8px;

color:#666;

}



.customer-value{

height:62px;

border-radius:18px;

background:#f5f5f5;

display:flex;

align-items:center;

padding:0 18px;

font-size:18px;

font-weight:700;

}



/* BOTTOM */

.checkout-bottom{

background:white;

padding:18px;

border-radius:28px;

box-shadow:

0 4px 18px

rgba(
0,
0,
0,
.04

);

margin-top:18px;

margin-bottom:30px;

}



/* SUMMARY */

.checkout-summary{

margin-bottom:18px;

}



.checkout-summary .summary-row{

display:flex;

justify-content:space-between;

margin-bottom:10px;

font-size:18px;

}



.checkout-summary .summary-total{

display:flex;

justify-content:space-between;

align-items:center;

padding-top:14px;

margin-top:14px;

border-top:
1px solid rgba(0,0,0,.08);

font-size:28px;

font-weight:800;

color:#111;

}



/* ACTIONS */

.checkout-actions{

display:grid;

grid-template-columns:
120px 1fr;

gap:14px;

}



.cart-btn{

height:62px;

border-radius:20px;

background:white;

border:
1px solid rgba(0,0,0,.08);

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:22px;

font-weight:700;

color:#111;

}



.place-order-btn{

height:62px;

border:none;

border-radius:20px;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-size:22px;

font-weight:700;

box-shadow:

0 10px 24px

rgba(
124,
14,
67,
.22

);

}



/* DESKTOP */

@media(
min-width:1100px
){

.checkout-page{

max-width:1200px;

padding:
40px
40px
260px;

}

}

/* COMPACT MOBILE CHECKOUT */

@media(
max-width:768px
){

.checkout-page{

padding:

10px
10px
30px;

}



/* STORE */

.selected-store{

padding:12px;

border-radius:22px;

margin-bottom:12px;

}



.selected-store img{

width:72px;

height:72px;

border-radius:16px;

}



.store-details h2{

    font-size:24px !important;
    line-height:1.1;
    color:#1b1b1b;

    letter-spacing:-1.5px;
}



.store-details p{

font-size:14px;

}



/* CARD */

.checkout-card{

padding:16px;

border-radius:22px;

margin-bottom:12px;

}



.checkout-card h3{

font-size:22px;

margin-bottom:12px;

}



/* ORDER TYPE */

.order-type-btn{

height:108px;

border-radius:20px;

font-size:16px;

gap:8px;

}



/* SELECT */

.checkout-select{

height:54px;

font-size:16px;

border-radius:16px;

}



/* CUSTOMER */

.customer-box{

margin-bottom:12px;

}



.customer-value{

height:54px;

font-size:16px;

border-radius:16px;

}



/* BOTTOM */

.checkout-bottom{

padding:14px;

border-top-left-radius:24px;

border-top-right-radius:24px;

}



/* SUMMARY */

.checkout-summary{

margin-bottom:14px;

}



.checkout-summary .summary-row{

font-size:16px;

margin-bottom:8px;

}



.checkout-summary .summary-total{

font-size:28px;

padding-top:12px;

margin-top:12px;

}



/* BUTTONS */

.checkout-actions{

grid-template-columns:
100px 1fr;

gap:10px;

}



.cart-btn{

height:54px;

font-size:18px;

border-radius:16px;

}



.place-order-btn{

height:54px;

font-size:18px;

border-radius:16px;

}

}

/* SUCCESS PAGE */

.success-page{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:20px;

}



.success-card{

width:100%;

max-width:420px;

background:white;

border-radius:36px;

padding:34px 24px;

text-align:center;

box-shadow:

0 10px 40px

rgba(
0,
0,
0,
.06

);

}



/* IMAGE */

.success-image-wrap{

position:relative;

width:220px;

height:220px;

margin:
0 auto
10px;

}



.success-circle{

position:absolute;

top:10px;
left:50%;

transform:
translateX(-50%);

width:110px;

height:110px;

border-radius:50%;

background:#ffdbe3;

display:flex;

align-items:center;

justify-content:center;

font-size:56px;

font-weight:800;

color:#7c0e43;

z-index:1;

}



.success-image{

position:absolute;

bottom:0;
left:50%;

transform:
translateX(-50%);

width:180px;

height:180px;

object-fit:cover;

border-radius:24px;

z-index:2;

}



/* TEXT */

.success-card h1{

font-size:44px;

margin-bottom:10px;

color:#111;

}



.success-text{

font-size:18px;

color:#666;

margin-bottom:24px;

}



.success-order{

font-size:20px;

margin-bottom:20px;

color:#444;

}



.success-order strong{

display:block;

font-size:28px;

margin-top:8px;

color:#111;

}



.success-time{

font-size:18px;

color:#666;

margin-bottom:34px;

}



.success-time strong{

display:block;

font-size:28px;

margin-top:8px;

color:#111;

}



/* BUTTONS */

.success-primary{

display:flex;

align-items:center;

justify-content:center;

height:62px;

border-radius:20px;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-size:20px;

font-weight:700;

text-decoration:none;

margin-bottom:14px;

box-shadow:

0 10px 24px

rgba(
124,
14,
67,
.22

);

}



.success-secondary{

display:flex;

align-items:center;

justify-content:center;

height:62px;

border-radius:20px;

border:
2px solid rgba(124,14,67,.14);

background:white;

color:#7c0e43;

font-size:18px;

font-weight:700;

text-decoration:none;

}



/* MOBILE */

@media(
max-width:768px
){

.success-card{

padding:28px 20px;

border-radius:28px;

}



.success-image-wrap{

width:180px;

height:180px;

}



.success-image{

width:150px;

height:150px;

}



.success-circle{

width:92px;

height:92px;

font-size:44px;

}



.success-card h1{

font-size:38px;

}



.success-order strong,
.success-time strong{

font-size:24px;

}

}

/* ORDERS */

.orders-page{

max-width:760px;

margin:auto;

padding:20px;

}



.orders-page h1{

font-size:38px;

margin-bottom:24px;

}



/* TABS */

.orders-tabs{

display:grid;

grid-template-columns:
1fr 1fr;

gap:12px;

margin-bottom:24px;

}



.orders-tab{

height:52px;

border:none;

border-radius:16px;

background:#f3f3f3;

font-size:18px;

font-weight:700;

}



.orders-tab.active{

background:#7c0e43;

color:white;

}



/* CARD */

.order-card{

background:white;

border-radius:28px;

padding:22px;

margin-bottom:18px;

box-shadow:

0 4px 18px

rgba(
0,
0,
0,
.04

);

}



/* TOP */

.order-top{

display:flex;

justify-content:space-between;

align-items:flex-start;

margin-bottom:18px;

}



.order-top h2{

font-size:28px;

margin-bottom:6px;

}



.order-top p{

font-size:14px;

color:#777;

}



/* STATUS */

.status-badge{

padding:
8px 14px;

border-radius:999px;

font-size:14px;

font-weight:700;

}



.status-pending,
.status-preparing{

background:#fff1da;

color:#d47a00;

}



.status-ready,
.status-completed{

background:#e7f8ea;

color:#15803d;

}



/* STORE */

.order-store{

font-size:17px;

font-weight:700;

margin-bottom:8px;

}



.order-type-line{

font-size:16px;

color:#666;

margin-bottom:18px;

}



/* ITEMS */

.order-items-preview{

border-top:
1px solid rgba(0,0,0,.06);

border-bottom:
1px solid rgba(0,0,0,.06);

padding:
16px 0;

margin-bottom:18px;

}



.preview-row{

display:flex;

justify-content:space-between;

margin-bottom:10px;

font-size:16px;

}



.more-items{

font-size:14px;

font-weight:700;

color:#7c0e43;

}



/* TOTAL */

.order-total{

display:flex;

justify-content:space-between;

align-items:center;

font-size:22px;

font-weight:800;

margin-bottom:18px;

}



/* BUTTON */

.view-order-btn{

height:56px;

border-radius:18px;

border:
2px solid rgba(124,14,67,.16);

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:18px;

font-weight:700;

color:#7c0e43;

background:white;

}

/* TRACK PAGE */

.track-page{

max-width:760px;

margin:auto;

padding:20px;

}



/* TOP CARD */

.track-card{

background:white;

border-radius:28px;

padding:24px;

margin-bottom:18px;

box-shadow:

0 4px 18px

rgba(
0,
0,
0,
.04

);

}

.track-status-card{

background:#fff8f2;

border:1px solid #f2d9c7;

padding:16px;

margin-top:16px;

border-radius:12px;

text-align:center;

}

.track-status-card h3{

margin:0 0 8px;

font-size:18px;

color:#7c0e43;

}

.track-status-card h4{

margin:0 0 8px;

font-size:16px;

color:#7c0e43;

}

.track-status-card p{

margin:0;

color:#555;

line-height:1.6;

}

.track-status-card small{

display:block;

margin-top:8px;

color:#777;

line-height:1.5;

}



.track-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:14px;

}



.track-top h1{

font-size:30px;

text-align:center;

width:100%;

}



.track-status{

padding:
10px 16px;

border-radius:999px;

background:#fff1da;

color:#d47a00;

font-size:14px;

font-weight:700;

}



.track-store{

font-size:18px;

font-weight:700;

margin-bottom:8px;

}



.track-meta{

font-size:16px;

color:#666;

}



/* ITEMS */

.track-items{

background:white;

border-radius:28px;

padding:20px;

margin-bottom:18px;

box-shadow:

0 4px 18px

rgba(
0,
0,
0,
.04

);

}



.track-item{

display:flex;

align-items:center;

gap:16px;

padding:14px 0;

border-bottom:
1px solid rgba(0,0,0,.06);

}



.track-item:last-child{

border-bottom:none;

}



.track-item img{

width:78px;

height:78px;

object-fit:cover;

border-radius:18px;

}



.track-item-info{

flex:1;

}



.track-item-info h3{

font-size:18px;

margin-bottom:6px;

}



.track-item-info p{

font-size:14px;

color:#777;

}



/* SUMMARY */

.track-summary{

background:white;

border-radius:28px;

padding:22px;

margin-bottom:20px;

box-shadow:

0 4px 18px

rgba(
0,
0,
0,
.04

);

}



.track-row{

display:flex;

justify-content:space-between;

margin-bottom:14px;

font-size:17px;

}



.track-total{

display:flex;

justify-content:space-between;

align-items:center;

padding-top:16px;

margin-top:16px;

border-top:
1px solid rgba(0,0,0,.08);

font-size:28px;

font-weight:800;

}



/* BUTTONS */

.track-actions{

display:grid;

grid-template-columns:
1fr 1fr;

gap:14px;

}



.track-primary,
.track-secondary{

height:58px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:18px;

font-weight:700;

}



.track-primary{

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

}



.track-secondary{

background:white;

border:
2px solid rgba(124,14,67,.14);

color:#7c0e43;

}

.track-type{

font-size:18px;

font-weight:700;

color:#7c0e43;

margin-top:10px;

text-align:center;

}

.product{

    grid-template-columns:
    110px
    1fr
    100px !important;

    min-height:140px !important;

    padding:18px !important;

    border-radius:28px !important;

    box-shadow:
    0 6px 18px rgba(0,0,0,.04) !important;
}

.product img{

    width:110px !important;
    height:110px !important;

    border-radius:22px !important;
}

.product-info{

    gap:10px !important;
}

.product h3{

    font-size:18px !important;

    font-weight:700 !important;

    line-height:1.2 !important;

    color:#1d1d1d !important;
}

.product strong{

    font-size:20px !important;

    font-weight:700 !important;

    color:#8B004B !important;
}

.product button{

    height:52px !important;

    width:86px !important;

    border-radius:18px !important;

    font-size:17px !important;

    font-weight:700 !important;
}

/* =========================
   TOAST NOTIFICATION
========================= */

#toast{

position:fixed;

top:20px;

left:50%;

transform:
translateX(-50%)
translateY(-20px);

min-width:280px;

max-width:90vw;

padding:18px 24px;

border-radius:18px;

font-size:16px;

font-weight:700;

text-align:center;

color:#fff;

opacity:0;

z-index:99999;

pointer-events:none;

transition:
all .3s ease;

box-shadow:
0 15px 40px rgba(0,0,0,.25);

}

#toast.show{

opacity:1;

transform:
translateX(-50%)
translateY(0);

}

#toast.success{

background:
linear-gradient(
135deg,
#16a34a,
#15803d
);

}

#toast.error{

background:
linear-gradient(
135deg,
#ef4444,
#dc2626
);

}

@media(min-width:768px){

#toast{

top:24px;

right:24px;

left:auto;

transform:
translateX(40px);

min-width:340px;

max-width:420px;

padding:20px 26px;

font-size:17px;

text-align:left;

}

#toast.show{

transform:
translateX(0);

}

}

.progress-tracker{

display:flex;

align-items:center;

justify-content:space-between;

margin:24px 0;

}

.progress-step{

display:flex;

flex-direction:column;

align-items:center;

width:80px;

}

.circle{

width:36px;

height:36px;

border-radius:50%;

background:#ddd;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

}

.progress-step.active .circle{

background:#7c0e43;

}

.progress-line{

flex:1;

height:4px;

background:#ddd;

margin:0 6px;

}

.progress-line.active{

background:#7c0e43;

}

.label{

margin-top:8px;

font-size:13px;

font-weight:600;

text-align:center;

}

.track-cancel-box{

margin-top:20px;

padding:16px;

border-radius:12px;

background:#fff4f4;

border:1px solid #f3bcbc;

text-align:center;

}

.feedback-btn{

width:100%;

padding:14px;

border:none;

border-radius:10px;

background:#7c0e43;

color:#fff;

font-weight:700;

cursor:pointer;

margin-bottom:12px;

}

.feedback-modal{

position:fixed;

inset:0;

background:rgba(0,0,0,.5);

display:none;

align-items:center;

justify-content:center;

z-index:9999;

}

.feedback-box{

background:#fff;

width:420px;

max-width:92%;

padding:24px;

border-radius:14px;

}

.rating-stars{

display:flex;

justify-content:center;

gap:8px;

margin:18px 0;

}

.rating-stars span{

font-size:34px;

cursor:pointer;

color:#d5d5d5;

transition:.2s;

}

.rating-stars span.active{

color:#ffc107;

}

#feedbackMessage{

width:100%;

height:140px;

resize:none;

padding:12px;

border:1px solid #ddd;

border-radius:10px;

margin-top:10px;

}

.feedback-actions{

display:flex;

justify-content:flex-end;

gap:12px;

margin-top:20px;

}

.feedback-actions button{

padding:12px 22px;

border:none;

border-radius:10px;

font-size:14px;

font-weight:600;

cursor:pointer;

transition:.2s;

}

.feedback-actions button:first-child{

background:#ececec;

color:#444;

}

.feedback-actions button:first-child:hover{

background:#dddddd;

}
.feedback-actions button:last-child{

background:#7c0e43;

color:#fff;

}

.feedback-actions button:last-child:hover{

background:#5f0932;

}


.feedback-success-btn{

padding:12px 28px;

border:none;

border-radius:10px;

background:#7c0e43;

color:#fff;

font-weight:600;

cursor:pointer;

}

.feedback-success-btn:hover{

background:#5f0932;

}

.feedback-error{

display:none;

margin:12px 0;

padding:10px 14px;

border-radius:8px;

background:#fff4f4;

border:1px solid #f3bcbc;

color:#c62828;

font-size:14px;

font-weight:600;

}

.cart-limit-info{

margin-top:16px;

padding:12px;

border-radius:10px;

background:#f7f7f7;

font-size:13px;

line-height:1.6;

color:#666;

}

.limit-error{

background:#fff4f4;

border:1px solid #f3bcbc;

color:#c62828;

font-weight:600;

}

.checkout-btn.disabled{

opacity:.55;

pointer-events:none;

cursor:not-allowed;

}

/* ==========================================
   EMPTY CART LAYOUT OVERRIDE
   (Place at the very bottom of cart.css)
========================================== */

.cart-layout.cart-empty{

    display:grid !important;

    grid-template-columns:1fr 380px;

    align-items:flex-start !important;

    justify-content:center !important;

    column-gap:60px;

    min-height:calc(100vh - 120px);

}

.cart-layout.cart-empty #cartItems{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    width:100%;

    padding-top:80px;

}

.cart-layout.cart-empty .empty-cart{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    text-align:center;

    width:100%;

    max-width:700px;

    margin:0 auto;

    height:auto;

    min-height:auto;

    padding:0 40px;

    box-sizing:border-box;

}

.cart-layout.cart-empty .empty-cart-icon{

    font-size:95px;

    margin-bottom:22px;

}

.cart-layout.cart-empty .empty-cart h2{

    font-size:58px;

    line-height:1.1;

    margin-bottom:18px;

}

.cart-layout.cart-empty .empty-cart p{

    max-width:480px;

    font-size:21px;

    line-height:1.65;

}

/* RIGHT SIDE */

.cart-layout.cart-empty #cartSummary{

    position:sticky;

    top:110px;

    align-self:flex-start;

}



/* ==========================================
   MOBILE EMPTY CART (FINAL)
========================================== */

@media (max-width:768px){

.cart-layout.cart-empty{

    display:flex !important;

    flex-direction:column;

    height:calc(100vh - 78px);

    overflow:hidden;

}

/* LEFT */

.cart-layout.cart-empty #cartItems{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    padding-bottom:360px;

}

/* EMPTY */

.cart-layout.cart-empty .empty-cart{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    width:100%;

    margin:0;

    padding:0;

}

.cart-layout.cart-empty .empty-cart-icon{

    font-size:62px;

    margin-bottom:14px;

}

.cart-layout.cart-empty .empty-cart h2{

    font-size:36px;

    line-height:1.1;

    margin-bottom:14px;

}

.cart-layout.cart-empty .empty-cart p{

    max-width:300px;

    font-size:17px;

    line-height:1.55;

}

/* FLOATING CARD */

.cart-layout.cart-empty #cartSummary{

    position:fixed !important;

    left:12px;

    right:12px;

    bottom:12px;

    top:auto !important;

    z-index:999;

    padding:0;

    background:none;

    align-self:auto;

}

.cart-layout.cart-empty .cart-summary{

    background:#fff;

    border-radius:30px;

    padding:20px;

    margin:0;

    box-shadow:

    0 -10px 35px rgba(0,0,0,.10);

}

/* BUTTONS */

.cart-layout.cart-empty .bottom-actions{

    position:static;

    display:grid;

    grid-template-columns:120px 1fr;

    gap:12px;

    margin-top:18px;

}

.cart-layout.cart-empty .back-menu-btn{

    height:58px;

    border-radius:18px;

}

.cart-layout.cart-empty .checkout-btn{

    position:static !important;

    width:100%;

    height:58px;

}

}

/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width:430px){

.cart-layout.cart-empty #cartItems{

    padding-bottom:340px;

}

.cart-layout.cart-empty .empty-cart-icon{

    font-size:54px;

}

.cart-layout.cart-empty .empty-cart h2{

    font-size:30px;

}

.cart-layout.cart-empty .empty-cart p{

    font-size:15px;

    max-width:250px;

}

}

.store-status{

    display:inline-flex;

    align-items:center;

    gap:6px;

    font-weight:700;

    font-size:14px;

    padding:5px 10px;

    border-radius:20px;

}

.store-status.open{

    color:#198754;

    background:#eaf8ef;

}

.store-status.closed{

    color:#dc3545;

    background:#fdecec;

}