* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #F4F4F4;
    display: flex;
    justify-content: center;
}

.app-container {
    width: 100%;
    max-width: 480px; /* Lebar UI Mobile */
    background: #FFFFFF;
    min-height: 100vh;
    padding-bottom: 70px;
    position: relative;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* Top Header - Hijau HalalGo */
.top-header {
    background: #008A75; /* Hijau Utama HalalGo */
    padding: 12px 14px;
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.address-bar {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin-bottom: 10px;
}

.address-text {
    margin: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.address-text .label { font-size: 11px; opacity: 0.9; display: block; }
.address-text .val { font-weight: 600; }

.cart-btn {
    position: relative;
    color: white;
    font-size: 20px;
    margin-left: 10px;
}

.cart-badge {
    position: absolute;
    top: -5px; right: -8px;
    background: #E11D48; color: white;
    font-size: 10px; font-weight: bold;
    border-radius: 50%; padding: 2px 5px;
}

.search-box {
    background: white;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
}

.search-icon { color: #008A75; margin-right: 8px; }
.search-box input {
    border: none; outline: none;
    width: 100%; font-size: 13px;
    color: #333;
}

/* Quick Menu Grid */
.quick-menu-grid {
    display: flex;
    justify-content: space-around;
    padding: 15px 10px;
    background: white;
    text-align: center;
}

.menu-item { text-decoration: none; color: #333; font-size: 11px; }
.icon-box {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 5px; font-size: 20px; color: white;
}



.icon-green { background: #10B981; }
.icon-blue { background: #3B82F6; }
.icon-teal { background: #008A75; }
.icon-lightblue { background: #0EA5E9; }
.icon-orange { background: #F59E0B; }

/* Tabs & Filter */
.main-tabs {
    display: flex;
    border-bottom: 1px solid #EEE;
    background: white;
}

.tab-btn {
    flex: 1; padding: 12px;
    border: none; background: none;
    font-weight: 600; font-size: 14px;
    color: #666; cursor: pointer;
}

.tab-btn.active {
    color: #008A75;
    border-bottom: 2px solid #008A75;
}

.filter-scroll-bar {
    display: flex; gap: 8px;
    padding: 10px 14px;
    overflow-x: auto; background: white;
    border-bottom: 8px solid #F4F4F4;
}

.filter-pill {
    padding: 6px 12px;
    background: #F3F4F6;
    border-radius: 16px;
    font-size: 12px; color: #4B5563;
    white-space: nowrap;
}

/* Product Feed */
.product-feed { padding: 10px 14px; }

.food-card {
    display: flex; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #EEE;
    cursor: pointer;
}

.food-img-wrapper {
    position: relative;
    width: 95px; height: 95px;
}

.food-img-wrapper img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 8px;
}

.badge-star {
    position: absolute; top: 0; left: 0;
    background: #008A75; color: white;
    font-size: 9px; font-weight: bold;
    padding: 2px 5px; border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.food-info { flex: 1; }
.food-title { font-size: 14px; font-weight: 700; color: #222; margin-bottom: 2px; }
.food-category { font-size: 12px; color: #888; margin-bottom: 4px; }

.food-meta { font-size: 11px; color: #666; margin-bottom: 4px; }
.rating { color: #D97706; font-weight: bold; }
.dot { margin: 0 4px; }

.food-price-tag { font-size: 15px; font-weight: bold; color: #008A75; margin-bottom: 6px; }

.promo-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { font-size: 9px; font-weight: bold; padding: 2px 6px; border-radius: 4px; }
.tag-red { border: 1px solid #E11D48; color: #E11D48; }
.tag-teal { border: 1px solid #008A75; color: #008A75; }

/* Empty State */
.empty-state { text-align: center; padding: 40px 20px; color: #999; }
.empty-state i { font-size: 40px; margin-bottom: 10px; }

/* Bottom Navbar */
.bottom-nav {
    position: fixed; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%; max-width: 480px;
    background: white; border-top: 1px solid #EEE;
    display: flex; justify-content: space-around;
    padding: 8px 0; z-index: 100;
}

.nav-item {
    display: flex; flex-direction: column;
    align-items: center; text-decoration: none;
    color: #888; font-size: 10px;
}

.nav-item i { font-size: 18px; margin-bottom: 3px; }
.nav-item.active { color: #008A75; font-weight: bold; }


.harga-coret {
    text-decoration: line-through;
    color: #888888;
    font-size: 11px;
    margin-right: 4px;
}

.badge-diskon {
    background: #FFEBEE;
    color: #D32F2F;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
}

.harga-promo {
    color: #00880C;
    font-weight: 800;
    font-size: 15px;
}

/* Style Khusus Box Icon Voucher */
.icon-box.icon-purple {
    background-color: #8B5CF6 !important; /* Warna Ungu */
    color: #FFFFFF !important;            /* Warna Ikon Putih */
}