:root {
  --orange:#ea4826; --orange-dark:#c73a1e; --orange-light:#fff5f2;
  --black:#1a1a1a; --gray:#545454; --light:#f5f5f5; --border:#e0e0e0;
  --white:#ffffff; --yellow:#ECAD00; --green:#22c55e; --red:#ef4444;
  --radius:16px; --shadow:0 4px 24px rgba(0,0,0,.1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--black);background:#f8f8f8;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;outline:none}
input,textarea{font-family:inherit;outline:none}
img{max-width:100%}

/* ── TOP BAR ── */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:64px;background:white;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;gap:12px;
}
.topbar-logo{display:flex;align-items:center;gap:8px;white-space:nowrap}
.topbar-logo a{color:inherit;display:flex;align-items:center}
.topbar-logo img{height:36px;width:auto;display:block;object-fit:contain}
.topbar-search{flex:1;max-width:480px;position:relative}
.topbar-search input{
  width:100%;padding:10px 16px 10px 40px;
  border:2px solid var(--border);border-radius:30px;
  font-size:14px;background:var(--light);
  transition:border-color .2s;
}
.topbar-search input:focus{border-color:var(--orange);background:white}
.topbar-search .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none}
.topbar-right{display:flex;align-items:center;gap:10px}
.btn-icon{
  position:relative;width:44px;height:44px;border-radius:50%;
  background:var(--light);display:flex;align-items:center;justify-content:center;
  font-size:20px;transition:background .2s;cursor:pointer;border:none;
}
.btn-icon:hover{background:var(--orange-light)}
.cart-badge{
  position:absolute;top:2px;right:2px;
  min-width:18px;height:18px;border-radius:9px;
  background:var(--orange);color:white;
  font-size:10px;font-weight:700;
  display:none;align-items:center;justify-content:center;padding:0 4px;
}
.btn-auth{
  background:var(--orange);color:white;
  padding:9px 18px;border-radius:22px;
  font-size:13px;font-weight:700;
  white-space:nowrap;
}
.btn-auth:hover{background:var(--orange-dark)}
.user-chip{
  display:flex;align-items:center;gap:8px;
  padding:6px 14px 6px 8px;background:var(--light);border-radius:22px;cursor:pointer;
  font-size:13px;font-weight:600;
}
.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--orange);color:white;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}

/* ── LAYOUT ── */
#app{margin-top:64px;min-height:calc(100vh - 64px)}

/* ── VIEWS ── */
.view{display:none}
.view.active{display:block}

/* ── HOME ── */
.home-hero{background:linear-gradient(135deg,var(--orange) 0%,var(--orange-dark) 100%);padding:32px 20px;color:white}
.home-hero h1{font-size:22px;font-weight:800;margin-bottom:4px}
.home-hero p{font-size:14px;opacity:.85}
.content-pad{max-width:1200px;margin:0 auto;padding:24px 20px}

/* CATEGORIES */
.categories-wrap{margin-bottom:28px}
.categories-wrap h2{font-size:17px;font-weight:700;margin-bottom:14px}
.categories-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.categories-scroll::-webkit-scrollbar{display:none}
.cat-pill{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 18px;background:white;border-radius:var(--radius);
  border:2px solid transparent;cursor:pointer;transition:.2s;min-width:80px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.cat-pill:hover{border-color:var(--orange);transform:translateY(-2px)}
.cat-pill.active{border-color:var(--orange);background:var(--orange-light)}
.cat-pill .cat-img{width:44px;height:44px;border-radius:12px;object-fit:cover;background:var(--light)}
.cat-pill .cat-emoji{font-size:30px;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.cat-pill span{font-size:11px;font-weight:600;text-align:center;color:var(--black)}

/* RESTAURANTS */
.rest-section h2{font-size:17px;font-weight:700;margin-bottom:16px}
.rest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.rest-card{
  background:white;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.07);cursor:pointer;
  transition:transform .25s,box-shadow .25s;
}
.rest-card:hover{transform:translateY(-4px);box-shadow:0 10px 32px rgba(0,0,0,.13)}
.rest-card.rest-card-closed{opacity:0.75;pointer-events:none;cursor:not-allowed}
.rest-card.rest-card-closed:hover{transform:none;box-shadow:0 2px 12px rgba(0,0,0,.07)}
.rest-cover{height:130px;position:relative;overflow:hidden}
.rest-cover img{width:100%;height:100%;object-fit:cover}
.cover-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:60px}
.badge-open{position:absolute;top:10px;right:10px;background:#22c55e;color:white;font-size:11px;font-weight:700;padding:3px 9px;border-radius:10px}
.badge-closed{background:#ef4444}
.rest-body{padding:26px 14px 14px}
.rest-name{font-size:15px;font-weight:700;margin-bottom:6px}
.rest-meta{display:flex;gap:14px;font-size:12px;color:var(--gray)}
.rest-meta .star{color:var(--yellow)}
.rest-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.rest-tag{font-size:10px;color:var(--orange);background:var(--orange-light);padding:2px 8px;border-radius:8px;font-weight:500}

/* ── RESTAURANT DETAIL ── */
#viewRestaurant{background:#f8f8f8}
.rest-detail-header{position:relative}
.rest-detail-cover{height:220px;width:100%;object-fit:cover;display:block;background:var(--light)}
.rest-detail-cover-fallback{height:220px;display:flex;align-items:center;justify-content:center;font-size:80px;background:linear-gradient(135deg,#ffd89b,#ff8c42)}
.rest-detail-back{
  position:absolute;top:16px;left:16px;
  width:40px;height:40px;background:white;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;box-shadow:var(--shadow);cursor:pointer;z-index:10;
}
.rest-detail-info{background:white;padding:20px;border-bottom:1px solid var(--border)}
.rest-detail-info h1{font-size:22px;font-weight:800;margin-bottom:6px}
.rest-detail-info p{font-size:14px;color:var(--gray);margin-bottom:10px}
.rest-detail-meta{display:flex;gap:16px;font-size:13px;color:var(--gray);flex-wrap:wrap}
.rest-detail-meta .star{color:var(--yellow)}
.detail-open{color:var(--green);font-weight:600}
.detail-closed{color:var(--red);font-weight:600}

/* MENU */
.menu-layout{max-width:1100px;margin:0 auto;padding:20px;display:grid;grid-template-columns:220px 1fr;gap:24px}
.menu-sidebar{position:sticky;top:80px;height:fit-content}
.menu-cats{background:white;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.07)}
.menu-cat-item{padding:13px 18px;font-size:14px;font-weight:500;cursor:pointer;transition:.2s;border-left:3px solid transparent}
.menu-cat-item:hover{background:var(--orange-light);color:var(--orange)}
.menu-cat-item.active{background:var(--orange-light);color:var(--orange);font-weight:700;border-left-color:var(--orange)}
.menu-main{}
.menu-closed-message{text-align:center;padding:48px 24px;color:var(--gray)}
.menu-closed-message p{margin-bottom:8px;font-size:18px;font-weight:700;color:var(--black)}
.menu-closed-sub{font-size:14px;font-weight:400 !important}
.menu-section{margin-bottom:32px}
.menu-section h3{font-size:18px;font-weight:700;margin-bottom:14px;padding-top:8px}
.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.item-card{
  background:white;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.07);cursor:pointer;
  transition:transform .25s,box-shadow .25s;
}
.item-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.item-img{height:130px;overflow:hidden;position:relative}
.item-img img{width:100%;height:100%;object-fit:cover}
.item-img-fallback{height:130px;display:flex;align-items:center;justify-content:center;font-size:52px;background:var(--light)}
.item-body{padding:12px}
.item-name{font-size:14px;font-weight:700;margin-bottom:4px}
.item-desc{font-size:12px;color:var(--gray);margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-footer{display:flex;align-items:center;justify-content:space-between}
.item-price{font-size:15px;font-weight:800;color:var(--orange)}
.btn-add{width:32px;height:32px;border-radius:50%;background:var(--orange);color:white;font-size:20px;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.btn-add:hover{transform:scale(1.12)}

/* ── CART PANEL ── */
#cartPanel{
  position:fixed;top:0;right:0;bottom:0;
  width:360px;background:white;z-index:300;
  box-shadow:-4px 0 32px rgba(0,0,0,.15);
  transform:translateX(100%);transition:transform .3s ease;
  display:flex;flex-direction:column;
}
#cartPanel.open{transform:translateX(0)}
.cart-header{padding:20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.cart-header h2{font-size:18px;font-weight:700}
.cart-close{width:36px;height:36px;border-radius:50%;background:var(--light);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}
.cart-body{flex:1;overflow-y:auto;padding:16px}
.cart-empty{text-align:center;padding:60px 20px}
.cart-empty .icon{font-size:56px;display:block;margin-bottom:16px}
.cart-empty p{color:var(--gray);font-size:15px}
.cart-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.cart-item-img{width:60px;height:60px;border-radius:10px;object-fit:cover;background:var(--light);flex-shrink:0}
.cart-item-img-fallback{width:60px;height:60px;border-radius:10px;background:var(--light);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.cart-item-info{flex:1}
.cart-item-name{font-size:14px;font-weight:600;margin-bottom:4px}
.cart-item-options{font-size:11px;color:var(--gray);font-weight:400;margin-top:2px}
.cart-item-price{font-size:13px;color:var(--orange);font-weight:700}
.cart-item-qty{display:flex;align-items:center;gap:10px;margin-top:8px}
.qty-btn{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:white;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;transition:.15s}
.qty-btn:hover{border-color:var(--orange);color:var(--orange)}
.qty-num{font-size:15px;font-weight:700;min-width:20px;text-align:center}
.cart-footer{padding:16px;border-top:1px solid var(--border)}
.cart-totals{margin-bottom:16px}
.cart-row{display:flex;justify-content:space-between;font-size:14px;padding:5px 0}
.cart-row.total{font-weight:800;font-size:16px;border-top:1px solid var(--border);padding-top:10px;margin-top:4px}
.btn-checkout{
  width:100%;padding:16px;border-radius:30px;
  background:var(--orange);color:white;font-size:16px;font-weight:700;
  transition:background .2s,transform .15s;
}
.btn-checkout:hover{background:var(--orange-dark);transform:translateY(-1px)}
.btn-checkout:disabled{background:#ccc;cursor:not-allowed;transform:none}
.coupon-row{display:flex;gap:8px;margin-bottom:14px}
.coupon-input{flex:1;padding:10px 14px;border:2px solid var(--border);border-radius:10px;font-size:13px}
.coupon-btn{padding:10px 16px;background:var(--orange-light);color:var(--orange);border-radius:10px;font-size:13px;font-weight:600}

/* ── AUTH MODAL ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.open{display:flex}
.modal{
  background:white;border-radius:24px;padding:36px;
  width:100%;max-width:420px;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  position:relative;max-height:90vh;overflow-y:auto;
}
.modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:var(--light);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer}
.modal h2{font-size:24px;font-weight:800;margin-bottom:6px}
.modal .sub{font-size:14px;color:var(--gray);margin-bottom:28px}
.tab-row{display:flex;gap:0;margin-bottom:28px;background:var(--light);border-radius:12px;padding:4px}
.tab-btn{flex:1;padding:10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--gray);transition:.2s}
.tab-btn.active{background:white;color:var(--orange);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.form-group input{
  width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:12px;
  font-size:15px;transition:border-color .2s;
}
.form-group input:focus{border-color:var(--orange)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn-submit{
  width:100%;padding:14px;border-radius:30px;
  background:var(--orange);color:white;font-size:16px;font-weight:700;
  margin-top:8px;transition:background .2s,transform .15s;
}
.btn-submit:hover{background:var(--orange-dark);transform:translateY(-1px)}
.btn-submit:disabled{background:#ccc;cursor:not-allowed;transform:none}
.form-error{color:var(--red);font-size:13px;margin-top:8px;display:none}
.form-error.show{display:block}

/* ── ITEM MODAL ── */
#itemModal .modal{max-width:480px;padding:0;overflow:hidden}
.item-modal-img{height:200px;overflow:hidden}
.item-modal-img img{width:100%;height:100%;object-fit:cover}
.item-modal-img-fallback{height:200px;display:flex;align-items:center;justify-content:center;font-size:80px;background:var(--light)}
.item-modal-body{padding:24px}
.item-modal-name{font-size:20px;font-weight:800;margin-bottom:8px}
.item-modal-desc{font-size:14px;color:var(--gray);line-height:1.6;margin-bottom:16px}
.item-modal-price{font-size:22px;font-weight:800;color:var(--orange);margin-bottom:12px}
.item-modal-variations{margin-bottom:20px}
.variation-group{margin-bottom:16px}
.variation-group-title{font-size:14px;font-weight:700;margin-bottom:8px;color:var(--black)}
.variation-group-title .required{color:var(--red);font-weight:600}
.variation-options{display:flex;flex-wrap:wrap;gap:8px}
.variation-opt{
  border:2px solid var(--border);border-radius:10px;padding:10px 14px;
  font-size:13px;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:120px;
}
.variation-opt:hover{border-color:var(--orange)}
.variation-opt.selected{border-color:var(--orange);background:var(--orange-light)}
.variation-opt .opt-price{font-weight:700;color:var(--orange);font-size:12px}
.qty-control{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.qty-control .qty-btn{width:40px;height:40px;font-size:20px;border:2px solid var(--border)}
.qty-control .qty-num{font-size:20px;font-weight:800;min-width:32px;text-align:center}
.btn-add-cart{
  width:100%;padding:14px;border-radius:30px;
  background:var(--orange);color:white;font-size:16px;font-weight:700;
  transition:background .2s;
}
.btn-add-cart:hover{background:var(--orange-dark)}

/* ── CHECKOUT VIEW ── */
#viewCheckout{background:#f8f8f8;min-height:calc(100vh - 64px)}
.checkout-layout{max-width:900px;margin:0 auto;padding:24px 20px;display:grid;grid-template-columns:1fr 360px;gap:24px}
.checkout-card{background:white;border-radius:var(--radius);padding:24px;margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.checkout-card h3{font-size:16px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.checkout-back{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gray);cursor:pointer;margin-bottom:20px}
.checkout-back:hover{color:var(--orange)}
.address-option{
  border:2px solid var(--border);border-radius:12px;padding:14px 16px;
  margin-bottom:10px;cursor:pointer;transition:.2s;
}
.address-option.selected{border-color:var(--orange);background:var(--orange-light)}
.address-option .addr-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.address-option .addr-title{font-size:14px;font-weight:600}
.address-option .addr-actions{display:flex;gap:4px}
.addr-edit-btn,.addr-delete-btn{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:white;font-size:12px;cursor:pointer;transition:.2s}
.addr-edit-btn:hover,.addr-delete-btn:hover{background:var(--light)}
.addr-delete-btn:hover{border-color:var(--red);color:var(--red)}
.address-option .addr-text{font-size:13px;color:var(--gray)}
.add-address-btn{
  border:2px dashed var(--border);border-radius:12px;padding:14px 16px;
  text-align:center;cursor:pointer;font-size:14px;color:var(--gray);
  transition:.2s;
}
.add-address-btn:hover{border-color:var(--orange);color:var(--orange)}
.payment-options{display:flex;gap:10px;flex-wrap:wrap}
.pay-option{
  flex:1;min-width:120px;border:2px solid var(--border);border-radius:12px;
  padding:14px;text-align:center;cursor:pointer;transition:.2s;
}
.pay-option.selected{border-color:var(--orange);background:var(--orange-light)}
.pay-option .pay-icon{font-size:28px;display:block;margin-bottom:8px;min-height:32px}
.pay-option .pay-icon-fallback{display:none;font-size:14px;font-weight:700;color:#0d6efd}
.pay-option .pay-icon-card{font-size:12px;font-weight:700;color:#1a1f71;letter-spacing:.02em}
.pay-option .pay-name{font-size:13px;font-weight:600}
.pay-option .pay-wallet-balance{font-size:11px;color:var(--gray);margin-top:4px}
.saved-cards-list{margin-top:10px;margin-left:8px}
.saved-card-item{border:2px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:8px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:8px}
.saved-card-item:hover{border-color:var(--orange)}
.saved-card-item.selected{border-color:var(--orange);background:var(--orange-light)}
.saved-card-item .card-mask{font-weight:600;color:var(--gray)}
.add-card-btn{
  border:2px dashed var(--border);border-radius:10px;padding:10px 14px;
  margin-top:6px;text-align:center;cursor:pointer;font-size:13px;
  color:var(--orange);font-weight:600;transition:.2s;
}
.add-card-btn:hover{border-color:var(--orange);background:var(--orange-light)}
.order-summary-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}
.order-total-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px}
.order-total-row.grand{font-weight:800;font-size:17px;border-top:2px solid var(--border);padding-top:12px;margin-top:4px}
.btn-place-order{
  width:100%;padding:16px;border-radius:30px;
  background:var(--orange);color:white;font-size:17px;font-weight:700;
  margin-top:16px;transition:background .2s,transform .15s;
}
.btn-place-order:hover{background:var(--orange-dark);transform:translateY(-1px)}
.btn-place-order:disabled{background:#ccc;cursor:not-allowed;transform:none}
.address-pin.leaflet-marker-icon{background:none!important;border:none!important;font-size:56px!important;line-height:1!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}

/* ── ORDER SUCCESS ── */
#viewSuccess{background:#f8f8f8;min-height:calc(100vh - 64px);display:none;align-items:center;justify-content:center}
#viewSuccess.active{display:flex}
.success-card{background:white;border-radius:24px;padding:48px 36px;text-align:center;max-width:480px;width:100%;margin:20px;box-shadow:var(--shadow)}
.success-icon{font-size:80px;display:block;margin-bottom:20px;animation:bounce .6s ease}
@keyframes bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.success-card h2{font-size:26px;font-weight:800;margin-bottom:10px}
.success-card p{font-size:15px;color:var(--gray);margin-bottom:28px;line-height:1.6}
.order-num{display:inline-block;background:var(--orange-light);color:var(--orange);font-size:18px;font-weight:800;padding:10px 24px;border-radius:30px;margin-bottom:24px}
.tracking-steps{display:flex;justify-content:space-between;margin-bottom:28px}
.tracking-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.tracking-dot{width:36px;height:36px;border-radius:50%;background:var(--light);display:flex;align-items:center;justify-content:center;font-size:18px;border:3px solid var(--border)}
.tracking-dot.done{background:var(--orange-light);border-color:var(--orange)}
.tracking-label{font-size:11px;color:var(--gray);font-weight:500;text-align:center}
.tracking-line{flex:1;height:3px;background:var(--border);margin-top:-2px;align-self:center;margin-bottom:28px}

/* ── ORDERS VIEW ── */
#viewOrders{background:#f8f8f8;min-height:calc(100vh - 64px)}
.orders-list{max-width:700px;margin:0 auto;padding:24px 20px}
.order-card{background:white;border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.order-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.order-card-rest{font-size:16px;font-weight:700}
.order-card-date{font-size:12px;color:var(--gray)}
.order-status-badge{font-size:12px;font-weight:600;padding:4px 12px;border-radius:10px}
.status-pending{background:#fef3c7;color:#d97706}
.status-accepted{background:#d1fae5;color:#059669}
.status-delivered{background:#d1fae5;color:#059669}
.status-cancelled{background:#fee2e2;color:#dc2626}
.status-payment-pending{background:#fff0eb;color:#ea4826;font-weight:700}
.btn-pay-now{background:var(--orange);color:white;padding:8px 18px;border-radius:20px;font-size:13px;font-weight:700;border:none;cursor:pointer;transition:background .2s}
.btn-pay-now:hover{background:var(--orange-dark)}
.btn-pay-now:disabled{background:#ccc;cursor:not-allowed}
.order-items-list{font-size:13px;color:var(--gray);margin-bottom:12px}
.order-total-text{font-size:15px;font-weight:700;color:var(--orange)}
.btn-reorder{background:var(--orange-light);color:var(--orange);padding:8px 18px;border-radius:20px;font-size:13px;font-weight:700}

/* ── ORDER TRACKING BANNER ── */
#orderBanner{
  display:none;position:fixed;top:64px;left:0;right:0;z-index:190;
  background:linear-gradient(90deg,var(--orange),var(--orange-dark));color:white;cursor:pointer;
}
.order-banner-content{max-width:800px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;gap:12px}
.order-banner-emoji{font-size:20px;flex-shrink:0}
.order-banner-text{flex:1;line-height:1.3}
.order-banner-text strong{font-size:13px;font-weight:700;display:block}
.order-banner-status{font-size:11px;opacity:.9}
.order-banner-track{font-size:12px;font-weight:700;background:rgba(255,255,255,.25);padding:4px 12px;border-radius:20px;white-space:nowrap;flex-shrink:0}
body.has-banner #app{margin-top:calc(64px + 42px)}

/* ── TOAST ── */
#toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--black);color:white;padding:12px 24px;border-radius:30px;
  font-size:14px;font-weight:600;z-index:999;
  transition:transform .3s ease,opacity .3s;opacity:0;white-space:nowrap;
  max-width:90vw;text-align:center;
}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ── LOADING ── */
.spinner{width:36px;height:36px;border:3px solid var(--light);border-top-color:var(--orange);border-radius:50%;animation:spin 0.8s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── BOTTOM NAV (mobile) ── */
#bottomNav{
  display:none;position:fixed;bottom:0;left:0;right:0;height:60px;
  background:white;border-top:1px solid var(--border);z-index:150;
  grid-template-columns:repeat(5,1fr);
}
.bnav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;font-size:11px;font-weight:500;color:var(--gray);transition:.2s;position:relative}
.bnav-item.active{color:var(--orange)}
.bnav-item .icon{font-size:22px}
.bnav-badge{position:absolute;top:4px;right:calc(50% - 20px);min-width:16px;height:16px;background:var(--orange);color:white;border-radius:8px;font-size:9px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 3px}

/* ── OVERLAY for cart ── */
#cartOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:299}
#cartOverlay.open{display:block}

/* ── SKELETON CARDS ── */
.rest-card-skel{background:white;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.07)}
.skel-cover{height:130px}
.skel-body{padding:26px 14px 14px}
.skel-line{height:12px;border-radius:6px;margin-bottom:10px}
.skel-line.wide{width:70%}
.skel-line.med{width:50%}
.skel-line.short{width:35%}

/* ── CHECKOUT PROGRESS STEPPER ── */
.checkout-stepper{display:flex;align-items:center;max-width:900px;margin:0 auto;padding:20px 20px 0}
.stepper-step{display:flex;align-items:center;gap:8px;flex-shrink:0}
.stepper-circle{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:white;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--gray);transition:.3s}
.stepper-circle.active{border-color:var(--orange);background:var(--orange);color:white}
.stepper-circle.done{border-color:var(--green);background:var(--green);color:white}
.stepper-label{font-size:12px;font-weight:600;color:var(--gray)}
.stepper-label.active{color:var(--orange)}
.stepper-label.done{color:var(--green)}
.stepper-line{flex:1;height:2px;background:var(--border);margin:0 8px;min-width:20px}
.stepper-line.done{background:var(--green)}

/* ── CART BADGE BOUNCE ── */
@keyframes badge-pop{0%{transform:scale(1)}40%{transform:scale(1.5)}70%{transform:scale(.85)}100%{transform:scale(1)}}
.cart-badge.pop,.bnav-badge.pop{animation:badge-pop .4s ease}

/* ── OPEN-NOW FILTER ── */
.filter-row{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.filter-toggle{display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:20px;border:2px solid var(--border);background:white;font-size:13px;font-weight:600;cursor:pointer;transition:.2s;color:var(--gray)}
.filter-toggle:hover{border-color:var(--orange);color:var(--orange)}
.filter-toggle.active{border-color:var(--green);background:#f0fdf4;color:#059669}
.filter-toggle .toggle-dot{width:10px;height:10px;border-radius:50%;background:var(--border);transition:.2s;flex-shrink:0}
.filter-toggle.active .toggle-dot{background:#22c55e}
.filter-count{font-size:12px;color:var(--gray);margin-left:4px}

/* ── MOBILE HERO SEARCH ── */
.hero-search{display:none;margin-top:16px;position:relative}
.hero-search input{width:100%;padding:12px 16px 12px 42px;border-radius:30px;border:none;font-size:15px;outline:none}
.hero-search .hero-search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none}
@media(max-width:640px){.hero-search{display:block}}

/* ── SCROLL-TO-TOP ── */
#scrollTop{
  position:fixed;bottom:80px;right:20px;width:44px;height:44px;border-radius:50%;
  background:var(--orange);color:white;font-size:20px;border:none;cursor:pointer;
  box-shadow:0 4px 16px rgba(234,72,38,.4);z-index:140;
  display:none;align-items:center;justify-content:center;
  transition:opacity .3s,transform .3s;
}
#scrollTop.visible{display:flex}
#scrollTop:hover{background:var(--orange-dark);transform:translateY(-2px)}
@media(max-width:640px){#scrollTop{bottom:76px}}

/* ── ORDER HISTORY PROGRESS BAR ── */
.order-progress{margin:12px 0 4px}
.order-progress-track{height:6px;background:var(--light);border-radius:3px;overflow:hidden;position:relative}
.order-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--orange),var(--orange-dark));transition:width .4s ease}
.order-progress-steps{display:flex;justify-content:space-between;margin-top:6px}
.order-progress-step-label{font-size:10px;color:var(--gray);font-weight:500}
.order-progress-step-label.done{color:var(--orange);font-weight:700}

/* ── ESTIMATED DELIVERY TIME ── */
.rest-eta{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--gray)}
.rest-eta .eta-dot{width:4px;height:4px;border-radius:50%;background:var(--border);display:inline-block}

/* ── WHATSAPP SUPPORT BUTTON ── */
#supportBtn{
  position:fixed;bottom:80px;left:20px;
  width:50px;height:50px;border-radius:50%;
  background:#25D366;color:white;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;box-shadow:0 4px 16px rgba(37,211,102,.45);
  z-index:140;text-decoration:none;
  transition:transform .2s,box-shadow .2s;
}
#supportBtn:hover{transform:scale(1.1);box-shadow:0 6px 22px rgba(37,211,102,.55)}
#supportBtn::after{
  content:'Support';
  position:absolute;left:58px;
  background:#25D366;color:white;
  font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:12px;
  white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .2s;
}
#supportBtn:hover::after{opacity:1}
@media(max-width:640px){#supportBtn{bottom:76px}}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .menu-layout{grid-template-columns:1fr}
  .menu-sidebar{position:static;display:none}
  .checkout-layout{grid-template-columns:1fr}
}
@media(max-width:640px){
  #topbar .topbar-search{display:none}
  #bottomNav{display:grid}
  #app{margin-bottom:60px}
  #cartPanel{width:100%;border-radius:24px 24px 0 0;top:auto;height:90vh;transform:translateY(100%)}
  #cartPanel.open{transform:translateY(0)}
}
@media(min-width:641px){
  .topbar-search{display:flex}
}