:root{--red:#d71920;--yellow:#ffcc00;--dark:#222;--cream:#fff8e7;--green:#168a3a}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--cream);color:#222}
a{text-decoration:none}
.header{
background:var(--red);
color:#fff;
padding:16px 4%;
display:flex;
align-items:center;
gap:15px;
position:sticky;
top:0;
z-index:10;
box-shadow:0 2px 14px rgba(0,0,0,.15);
flex-wrap:wrap;
}

.logo{
font-size:36px;
font-weight:900;
white-space:nowrap;
letter-spacing:2px;
text-shadow:
0 0 10px rgba(255,255,255,.4),
0 0 20px rgba(255,204,0,.5);
}

.nav{
display:flex;
flex-wrap:wrap;
gap:15px;
margin-left:auto;
}

.nav a{
color:white;
font-weight:700;
margin:0;
white-space:nowrap;
}

.nav a{color:white;margin-left:22px;font-weight:700}
.hero{

height:90vh;

background:url('/images/cafe1.jpg');

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

position:relative;

transition:1s ease-in-out;

}

.hero::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

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

}

.hero-overlay{
position:relative;
z-index:2;

max-width:700px;
width:100%;

color:white;

padding:20px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.hero h1{
font-size:4rem;
font-weight:800;

margin-bottom:20px;

min-height:190px;

display:flex;
align-items:center;
justify-content:center;

text-align:center;
}
.hero p{

font-size:1.3rem;

margin-bottom:30px;

}

.hero-btn{

background:#c59d5f;

color:white;

padding:14px 32px;

border-radius:50px;

font-weight:700;

display:inline-block;

transition:.3s;

}

.hero-btn:hover{

transform:translateY(-3px);

}

.btn{border:0;background:var(--red);color:#fff;padding:12px 18px;border-radius:8px;cursor:pointer;font-weight:700}
.btn:hover{filter:brightness(.95)}
.btn.gray{background:#777}
.btn.green{background:var(--green)}
.btn.small{padding:8px 12px;font-size:13px}
.section{padding:42px 7%}
.center{text-align:center}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:22px}
.card{background:#fff;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.12);overflow:hidden;transition:.2s}
.card:hover{transform:translateY(-4px)}
.food-img{width:100%;height:165px;object-fit:cover;background:linear-gradient(135deg,#ffe1a8,#fff2c2);display:block}
.card-body{padding:18px}
.card h3{margin:0 0 8px;color:var(--red)}
.price{font-size:21px;font-weight:800;color:var(--green)}
.badge{display:inline-block;padding:5px 10px;border-radius:20px;font-size:12px;font-weight:800;margin-bottom:10px}
.available{background:#dfffe9;color:#087735}
.unavailable{background:#ffe3e3;color:#a10000}
.disabled{opacity:.62}
.cart-box,.form-box{background:#fff;border-radius:16px;padding:22px;box-shadow:0 6px 20px rgba(0,0,0,.12)}
input,textarea,select{width:100%;padding:12px;margin:8px 0;border:1px solid #ccc;border-radius:8px;font-size:15px}
textarea{min-height:80px}
.popup{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);align-items:center;justify-content:center;z-index:99}
.popup-box{
background:white;
width:90%;
max-width:900px;

max-height:90vh;
overflow-y:auto;

border-radius:20px;
padding:20px;
}

@keyframes popupShow{
from{
opacity:0;
transform:scale(.9);
}
to{
opacity:1;
transform:scale(1);
}
}
.footer{background:var(--red);color:white;text-align:center;padding:18px;margin-top:35px}
.admin-layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:#202020;color:#fff;padding:24px}
.sidebar h2{margin-top:0}
.sidebar a{display:block;color:#fff;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar a:hover{color:var(--yellow)}
.main{padding:30px;background:#f7f3ea}
.table-wrap{overflow:auto;background:white;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.1)}
table{width:100%;border-collapse:collapse;background:white}
th,td{padding:12px;border-bottom:1px solid #ddd;text-align:left;vertical-align:top}
th{background:var(--red);color:white}
.preview-img{width:80px;height:60px;object-fit:cover;border-radius:8px;background:#eee}
.login{max-width:420px;margin:70px auto;background:white;padding:30px;border-radius:16px;box-shadow:0 6px 22px rgba(0,0,0,.15)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
.stat{background:white;border-radius:16px;padding:20px;box-shadow:0 5px 16px rgba(0,0,0,.1)}
@media(max-width:760px){.admin-layout{grid-template-columns:1fr}.sidebar{position:relative}.header{display:block}.nav{margin-top:12px}.nav a{margin:0 12px 0 0}.hero h1{font-size:34px}}
.menu-toggle{
display:none;
font-size:30px;
cursor:pointer;
color:white;
}

@media(max-width:768px){

.menu-toggle{
display:block;
}

.nav{
display:none;
flex-direction:column;
width:100%;
margin-top:15px;
}

.nav.show{
display:flex;
}

.nav a{
margin:10px 0;
}
}
.order-float{
position:fixed;
bottom:95px;
right:20px;
background:#d71920;
color:white;
padding:14px 18px;
border-radius:30px;
font-weight:bold;
z-index:999;
box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.order-float:hover{
transform:scale(1.05);
}
@media(max-width:768px){

.whatsapp-float{

padding:12px 16px;

font-size:14px;

}

}
@media(max-width:768px){

.hero h1{
font-size:2.5rem;
}

.hero p{
font-size:1rem;
}

.hero{
height:70vh;
}

}
/* Scroll Animation */

.reveal{

opacity:0;

transform:translateY(50px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}
#summaryDeliveryRow{
display:none;
}
#popupImg{
width:100%;
height:280px;
object-fit:cover;
border-radius:15px;
margin-bottom:15px;
}

#popupName{
font-size:32px;
margin-bottom:10px;
color:#d71920;
}

#popupCategory{
display:inline-block;
background:#ffcc00;
padding:6px 12px;
border-radius:20px;
font-weight:bold;
margin-bottom:10px;
}

#popupDesc{
font-size:16px;
line-height:1.6;
margin:15px 0;
}

#popupPrice{
font-size:30px;
color:#168a3a;
margin:15px 0;
}

#popupStatus{
font-weight:bold;
margin-bottom:15px;
}
#favoriteFoods,
#notificationList,
#orderHistory{
max-width:1200px;
margin:auto;
}

#favoriteFoods .card,
#notificationList .card,
#orderHistory .card{
margin-bottom:15px;
}

.cart-box{
max-width:1200px;
margin:20px auto;
}
.featured-offer{
background:linear-gradient(135deg,#d71920,#ffcc00);
color:white;
padding:25px;
border-radius:20px;
text-align:center;
max-width:900px;
margin:25px auto;
box-shadow:0 10px 25px rgba(0,0,0,.2);
}

.featured-offer h2{
margin:0;
font-size:32px;
}

.featured-offer p{
font-size:18px;
margin:10px 0;
}

.featured-offer .btn{
background:white;
color:#d71920;
}
#featuredCoupon{
background:linear-gradient(135deg,#d71920,#ff9800);
color:white;
padding:25px;
border-radius:20px;
text-align:center;
margin:30px auto;
max-width:800px;
box-shadow:0 10px 25px rgba(0,0,0,.25);
animation:pulse 2s infinite;
}

#featuredCoupon h2{
font-size:32px;
margin-bottom:10px;
}

#featuredCoupon p{
font-size:18px;
}

@keyframes pulse{
0%{transform:scale(1);}
50%{transform:scale(1.02);}
100%{transform:scale(1);}
}
.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.7);
display:none;
justify-content:center;
align-items:flex-start;
overflow-y:auto;
padding:20px;
z-index:9999;
}

.popup-content{
background:white;
max-height:90vh;
overflow-y:auto;
width:90%;
max-width:900px;
border-radius:20px;
}
.special-offer-banner{
background:linear-gradient(135deg,#d71920,#ff9800);
color:white;
padding:25px;
border-radius:20px;
max-width:800px;
margin:auto;
box-shadow:0 10px 25px rgba(0,0,0,.2);
text-align:center;
}

.special-offer-banner h2{
margin-bottom:10px;
}

.social-floating a{

display:flex !important;

align-items:center;

justify-content:center;

background:transparent !important;

box-shadow:none !important;

border:none !important;

width:auto !important;

height:auto !important;

padding:0 !important;

transition:.3s;

}

.social-floating a:hover{

transform:scale(1.1);

}


.social-floating a:hover{

transform:scale(1.1);

}

.social-icon{

width:55px !important;

height:55px !important;

object-fit:contain;

display:block;

filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));

transition:.3s;

}

.social-icon:hover{

transform:scale(1.15);

}
.hero{
background-repeat:no-repeat;
image-rendering:auto;
}
.bill-heading{

text-align:center;

color:#d71920;

margin-bottom:15px;

}

.bill-summary{

background:#fff8f0;

border:2px solid #ffcc00;

padding:18px;

border-radius:15px;

margin-bottom:20px;

}

.bill-row{

display:flex;

justify-content:space-between;

padding:10px 0;

border-bottom:1px dashed #ccc;

font-weight:600;

}

.bill-total{

display:flex;

justify-content:space-between;

padding-top:15px;

font-size:24px;

font-weight:800;

color:#168a3a;

}
.delivery-pill{

background:#16a34a;

color:white;

padding:10px 18px;

border-radius:30px;

font-weight:800;

margin-left:15px;

display:inline-flex;

align-items:center;

justify-content:center;

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

transition:.3s;

}

.delivery-pill:hover{

transform:translateY(-2px);

}
.popup-price-row{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-top:20px;

padding:12px 0;

border-top:1px solid #eee;

}

.popup-price-row h2{

margin:0;

font-size:28px;

font-weight:700;

color:#16a34a;

}

#popupQtyBox{

display:flex;

align-items:center;

gap:10px;

}
.back-btn{

margin-bottom:15px;

background:#f3f3f3;

color:#333;

border:1px solid #ddd;

}

.back-btn:hover{

background:#e8e8e8;

}
.popup-back-btn{

position:sticky;

top:10px;

left:10px;

background:white;

color:#d71920;

border:none;

font-size:15px;

font-weight:700;

padding:8px 14px;

cursor:pointer;

z-index:999;

border-radius:20px;

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

margin-bottom:15px;

}
.popup-price-row{

display:flex;

justify-content:space-between;

align-items:center;

margin:15px 0;

}

#popupQtyBox{

display:flex;

align-items:center;

gap:8px;

}
.popup-top{

display:flex;

gap:25px;

align-items:flex-start;

margin-bottom:20px;

}

.popup-image{

flex:1;

}

.popup-info{

flex:1;

}

.popup-image img{

width:100%;

max-width:450px;

border-radius:15px;

}

.popup-price-row{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:20px;

}
.popup-info h2{
margin-top:10px;
margin-bottom:15px;
}

#popupCategory{
display:inline-block;
margin-bottom:15px;
}

#popupDesc{
margin-top:15px;
margin-bottom:20px;
font-size:16px;
line-height:1.6;
color:#555;
}
#popupCategory{

display:inline-block;

background:#ffc107;

padding:8px 14px;

border-radius:20px;

font-weight:600;

margin-bottom:15px;

}
#popupDesc{

margin:15px 0;

font-size:16px;

line-height:1.7;

color:#555;

max-width:500px;

}
.account-hero{

background:linear-gradient(
135deg,
#d71920,
#ff9800
);

color:white;

padding:30px;

border-radius:20px;

text-align:center;

margin-bottom:25px;

box-shadow:0 10px 25px rgba(0,0,0,.2);

}

.account-hero h1{

margin:0 0 10px;

font-size:34px;

}
.stat{

transition:.3s;

cursor:pointer;

}

.stat:hover{

transform:translateY(-5px);

}
.account-avatar{

width:90px;

height:90px;

border-radius:50%;

background:white;

color:#d71920;

font-size:45px;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 15px;

font-weight:bold;

}
.order-status{

padding:6px 12px;

border-radius:20px;

display:inline-block;

font-weight:600;

}

.Pending{

background:#fff3cd;

}

.Preparing{

background:#ffe0b2;

}

.Ready{

background:#d1ecf1;

}

.Delivered{

background:#d4edda;

}

.Cancelled{

background:#f8d7da;

}
.quick-actions{

display:flex;

gap:15px;

justify-content:center;

margin:20px 0;

flex-wrap:wrap;

}
#recentOrders .card{

border-left:5px solid #d71920;

}


.dinein-btn:hover{

transform:translateY(-2px);

}


.social-floating a{
display:flex !important;
}

.social-icon{
width:55px !important;
height:55px !important;
display:block !important;
}

.dinein-btn{
background:linear-gradient(135deg,#f59e0b,#ea580c);
color:white;
border:none;
padding:14px 26px;
border-radius:30px;
font-weight:800;
font-size:18px;
box-shadow:0 4px 15px rgba(234,88,12,.35);
}
.tracking-bar{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:15px;
}

.step{
padding:8px 14px;
border-radius:20px;
background:#ddd;
font-weight:600;
}

.step.active{
background:#16a34a;
color:white;
}

.tracking-bar{
display:flex;
justify-content:space-between;
gap:10px;
margin-top:20px;
flex-wrap:wrap;
}

.step{
background:#f1f1f1;
padding:12px 18px;
border-radius:30px;
font-weight:bold;
}

.step.active{
background:#16a34a;
color:white;
box-shadow:0 4px 12px rgba(22,163,74,.3);
}

.empty-state{
    background:#fff;
    padding:25px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    margin:15px auto;
    max-width:500px;
}

.empty-state h3{
    margin-bottom:10px;
    color:#222;
}

.empty-state p{
    color:#666;
    margin-bottom:15px;
}
@media(max-width:768px){

.header{
display:flex;
flex-wrap:wrap;
gap:10px;
padding:12px;
}

.logo{
width:100%;
text-align:center;
font-size:24px;
}

.delivery-pill{
order:1;
flex:1;
margin:0;
}

.dinein-btn{
order:2;
flex:1;
margin:0;
}

.menu-toggle{
order:3;
margin-left:auto;
}

.nav.show{
width:100%;
}

}
.location-suggestions{

position:absolute;
left:0;
right:0;
top:100%;
background:white;
border:1px solid #ddd;
border-radius:10px;
max-height:250px;
overflow-y:auto;
z-index:9999;
display:none;

}

.location-item{

padding:12px;
cursor:pointer;
border-bottom:1px solid #eee;

}

.location-item:hover{

background:#f5f5f5;

}


.hero-overlay{
position:relative;
text-align:center;
}

.hero-btn{
display:inline-flex;
align-items:center;
justify-content:center;

width:230px;
height:72px;

padding:0;

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

margin-top:40px;

border-radius:50px;

position:relative;
z-index:5;
}


.whatsapp-float{

position:fixed !important;

right:20px !important;

bottom:90px !important;

display:flex !important;

align-items:center !important;

gap:10px !important;

background:#25D366 !important;

color:white !important;

padding:14px 24px !important;

border-radius:40px !important;

font-weight:700 !important;

z-index:999999 !important;

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

}

.whatsapp-float span{

display:inline-block !important;

}



.social-icon{

width:58px !important;

height:58px !important;

object-fit:contain !important;

background:none !important;

border:none !important;

box-shadow:
0 8px 20px rgba(0,0,0,.25);

border-radius:14px;

transition:.3s;

}

.social-icon:hover{

transform:scale(1.12);

}


/* ===== FINAL MOBILE FLOATING FIX ===== */

/* ===== PERFECT MOBILE FLOATING ALIGNMENT ===== */

@media(max-width:768px){

.social-floating{
position:fixed !important;

right:18px !important;
bottom:170px !important;

display:flex !important;
flex-direction:column !important;

gap:12px !important;

z-index:99999 !important;
}

.social-icon{
width:52px !important;
height:52px !important;
display:block !important;
}

.whatsapp-float{
position:fixed !important;

right:18px !important;
bottom:105px !important;

width:52px !important;
height:52px !important;

padding:0 !important;

display:flex !important;
align-items:center !important;
justify-content:center !important;

border-radius:50% !important;

z-index:99999 !important;
}

.whatsapp-float span{
display:none !important;
}

.order-float{
position:fixed !important;

right:18px !important;
bottom:40px !important;

z-index:99999 !important;
}
}

@media(max-width:768px){

.hero h1{
font-size:2.5rem;
min-height:170px;
}

.hero p{
min-height:60px;

display:flex;
align-items:center;
justify-content:center;

text-align:center;
}

}

/* ===== DESKTOP FLOAT FIX ===== */

@media(min-width:769px){

.social-floating{
position:fixed;
right:20px;
bottom:180px;

display:flex;
flex-direction:column;
gap:15px;

z-index:99999;
}

.whatsapp-float{
position:fixed !important;

right:20px !important;
bottom:105px !important;

width:auto !important;
height:auto !important;

padding:14px 24px !important;

border-radius:40px !important;
}

.whatsapp-float span{
display:inline-block !important;
}

.order-float{
position:fixed !important;

right:20px !important;
bottom:40px !important;
}

}

/* ===== MOBILE SOCIAL TOGGLE ===== */

.social-toggle-btn{
display:none;
}

@media(max-width:768px){

.social-toggle-btn{

display:flex !important;

align-items:center;
justify-content:center;

position:fixed;

right:18px;
bottom:315px;

width:45px;
height:45px;

border:none;

border-radius:50%;

background:#d71920;

color:white;

font-size:24px;

font-weight:700;

cursor:pointer;

z-index:999999;

box-shadow:0 6px 18px rgba(0,0,0,.25);

transition:.3s;
}

body.social-hidden .social-floating,
body.social-hidden .whatsapp-float,
body.social-hidden .order-float{

opacity:0;

pointer-events:none;

transform:translateX(120px);

transition:.3s;
}

body.social-hidden .social-toggle-btn{

transform:rotate(180deg);

}

}

/* CATEGORY FILTER TOGGLE */

#filterToggleBtn{
    width:90%;
    max-width:320px;
    padding:14px 20px;
    border:none;
    border-radius:12px;
    background:#e31b23;
    color:white;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
}

#categoryFiltersWrapper{
    animation:fadeDown .25s ease;
}

#categoryFilters{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

#categoryFilters .btn{
    margin:0;
}

@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(-10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.neon-logo{
    height:95px;
    width:auto;
    display:block;
    object-fit:contain;
}

/* MOBILE LOGO CENTER + BIGGER */
@media (max-width:768px){

    .header{
        justify-content:center;
    }

    .logo{
        width:100%;
        text-align:center;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-bottom:8px;
    }

    .neon-logo{
        height:110px !important;
        max-width:320px !important;
        width:auto !important;
        display:block;
        margin:0 auto;
    }

    .delivery-pill{
        flex:1;
    }

    .dinein-btn{
        flex:1;
    }
}

/* ===== MOBILE FOOD POPUP FIX ===== */

@media (max-width: 768px){

.popup{
    padding:10px !important;
    align-items:flex-start !important;
}

.popup-box{
    width:100% !important;
    max-width:100% !important;
    max-height:95vh !important;
    overflow-y:auto !important;
    border-radius:20px !important;
    padding:15px !important;
}

.popup-top{
    display:flex !important;
    flex-direction:column !important;
    gap:15px !important;
}

.popup-image{
    width:100% !important;
}

.popup-image img,
#popupImg{
    width:100% !important;
    height:220px !important;
    object-fit:cover !important;
    border-radius:15px !important;
}

.popup-info{
    width:100% !important;
}

#popupName{
    font-size:34px !important;
    line-height:1.2 !important;
}

#popupDesc{
    font-size:16px !important;
    line-height:1.6 !important;
}

.popup-price-row{
    flex-wrap:wrap !important;
    gap:12px !important;
}

#popupPrice{
    font-size:38px !important;
}

#recommendations{
    grid-template-columns:1fr !important;
}

.popup-back-btn{
    position:sticky;
    top:0;
    z-index:9999;
}
}

/* MOBILE AUTO HEADER HIDE/SHOW */

@media(max-width:768px){

.header{
transition:transform .3s ease;
}

.header.header-hidden{
transform:translateY(-100%);
}

}

/* ===== LOGIN + FORGOT PASSWORD MOBILE FIX ===== */

.auth-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.auth-box{
    width:100%;
    max-width:500px;
    background:#fff;
    border-radius:20px;
    padding:30px;
    box-shadow:0 8px 25px rgba(0,0,0,.12);
}

.auth-box h2{
    text-align:center;
    margin-bottom:25px;
    color:#222;
}

.auth-box .btn{
    width:100%;
    margin-top:10px;
}

.auth-box p{
    text-align:center;
}

@media(max-width:768px){

.auth-page{
    align-items:flex-start;
    padding-top:40px;
}

.auth-box{
    padding:20px;
    border-radius:15px;
    margin-bottom:30px;
}

.auth-box h2{
    font-size:24px;
}

}

.cancel-order-btn{
background:#e31b23 !important;
color:white;
width:100%;
max-width:220px;
margin-top:15px;
}

.cancel-order-btn:hover{
opacity:.9;
}