*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:system-ui,-apple-system;
}

body{
background:#0B0B0F;
color:#fff;
margin:0;
display:flex;
justify-content:center;
}

.header{
margin-bottom:12px;
}

#map{
height:200px;
border-radius:20px;
margin-bottom:16px;
overflow:hidden;
position:sticky;
top:72px;
z-index:10;
background:#0B0B0F;
}

.categories{
display:flex;
gap:10px;
overflow-x:auto;
padding:8px 4px 14px 4px;
margin-bottom:10px;
scrollbar-width:none;
}

.categories::-webkit-scrollbar{
display:none;
}

.cat{
min-width:auto;
padding:10px 14px;
border-radius:999px;
white-space:nowrap;
font-size:13px;
background:#1A1A22;
border:1px solid rgba(255,255,255,0.05);
}

.cat:hover{
transform:translateY(-3px);
}

.cat.active{
background:#F7931A;
color:#000;
}

.cat span{
display:inline;
margin-left:6px;
font-size:12px;
}

.cards{
display:flex;
flex-direction:column;
gap:14px;
}

.card{
background:#1A1A22;
border-radius:22px;
padding:16px;
box-shadow:0 10px 30px rgba(0,0,0,.3);
animation:fadeUp .4s ease;
}

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

.buttons{
display:flex;
gap:10px;
margin-top:12px;
}

.btn{
flex:1;
padding:12px;
border:none;
border-radius:14px;
font-weight:600;
cursor:pointer;
transition:.2s;
}

.btn:hover{
transform:scale(1.03);
}

.whatsapp{
background:#25D366;
color:#000;
}

.lightning{
background:#F7931A;
color:#000;
}

.category{
font-size:12px;
opacity:.6;
}

.map{
background:#2A2A35;
color:#fff;
}

.delivery{
font-size:11px;
background:#F7931A;
color:#000;
display:inline-block;
padding:4px 8px;
border-radius:8px;
margin-top:6px;
font-weight:600;
}

.distance{
font-size:11px;
opacity:.7;
margin-top:4px;
}

.btc-badge{
display:inline-block;
background:#F7931A;
color:#000;
font-size:10px;
padding:2px 6px;
border-radius:6px;
font-weight:600;
width:max-content;
}

.app-header{
position:sticky;
top:0;
background:#0b0b0b;
padding:12px 16px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-bottom:1px solid rgba(255,255,255,0.05);
z-index:100;
}

.logo{
height:76px;
width:auto;
margin-bottom:4px;
filter: drop-shadow(0 0 3px rgba(0,0,0,.8));
}

.header-text{
font-size:12px;
opacity:.7;
}

.app-container{
width:100%;
max-width:420px;
padding:12px;
position:relative;
z-index:1;
background:#0B0B0F;
}

body{
background:#0B0B0F;
color:#fff;
padding:16px;
display:flex;
justify-content:center;
}

.footer{
margin-top:30px;
padding:20px 10px;
text-align:center;
opacity:.7;
font-size:12px;
}

.footer a{
color:#F7931A;
text-decoration:none;
font-weight:600;
}

.socials{
display:flex;
justify-content:center;
gap:16px;
margin-top:10px;
}

.socials a{
font-size:20px;
text-decoration:none;
transition:.2s;
}

.socials a:hover{
transform:translateY(-3px);
}

.featured{
background:linear-gradient(135deg,#1A1A22,#241800);
border:1px solid rgba(247,147,26,.4);
box-shadow:0 10px 30px rgba(247,147,26,.15);
}

.featured-badge{
background:#F7931A;
color:#000;
font-size:11px;
padding:4px 8px;
border-radius:8px;
display:inline-block;
margin-bottom:6px;
font-weight:700;
}

.header-inner{
display:flex;
align-items:center;
justify-content:center;
position:relative;
width:100%;
}

.header-center{
display:flex;
flex-direction:column;
align-items:center;
}

.cart-btn img{
width:40px;
height:40px;
object-fit:contain;
}

.cart-btn:hover img{
transform:scale(1.1);
}

.cart-btn{
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
box-shadow:0 5px 15px rgba(0,0,0,.3);
}

.card-content{
display:flex;
gap:12px;
align-items:center;
}

.card-img{
width:72px;
height:72px;
border-radius:14px;
object-fit:cover;
flex-shrink:0;
}

.card-info{
flex:1;
display:flex;
flex-direction:column;
gap:4px;
}

.card h3{
font-size:16px;
}

.category{
font-size:11px;
}

.card-img{
background:#2A2A35;
}

#map{
box-shadow:0 8px 20px rgba(0,0,0,.6);
}