:root{--bg:#fff;--fg:#111827;--muted:#6b7280;--banner-h:36px;--filters-h:44px;--groupsbar-h:44px;--footer-h:84px}*{box-sizing:border-box}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--fg)}body.modal-open{overflow:hidden}.offer-banner{position:sticky;top:0;z-index:100;height:var(--banner-h);display:flex;align-items:center;overflow:hidden;border-bottom:1px solid #fde68a;background:#fff7ed}.offer-track{display:inline-block;white-space:nowrap;padding:8px 16px;font-weight:800;color:#b45309;animation:marquee 18s linear infinite;will-change:transform}@keyframes marquee{0%{transform:translate(100vw)}to{transform:translate(-100%)}}.header{position:sticky;top:var(--banner-h);z-index:95;background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #e5e7eb;transform:translateY(0);opacity:1;transition:transform .28s ease,opacity .24s ease;will-change:transform,opacity}.header.collapsed{transform:translateY(-100%);opacity:0;pointer-events:none}.header-center .title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 16px;font-weight:800}.header-center .logo,.header-center .logo.placeholder{width:64px;height:64px;border-radius:14px;object-fit:cover}.header-center .logo.placeholder{background:#e5e7eb;display:inline-block}.header-center .restaurant-name{font-weight:900;font-size:18px;letter-spacing:.2px}.section{position:sticky;top:var(--banner-h);z-index:90;padding:8px 14px;font-weight:700;background:#fff;border-top:1px solid #f3f4f6}.filters{position:sticky;top:var(--banner-h);z-index:90;display:flex;gap:8px;padding:10px 14px;background:#fff;border-bottom:1px solid #f3f4f6}.btn{padding:6px 10px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;font-weight:600;font-size:12px}.btn.active{background:#111827;color:#fff;border-color:#111827}.section-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-right:14px}.section-row .section-title{font-weight:700}.section-chef-mini{display:flex;align-items:center;justify-content:flex-end;min-height:52px}.section-chef-mini .chef-mini-svg{width:80px;height:auto;transform:translateY(6px)}@media (min-width: 480px){.section-chef-mini .chef-mini-svg{width:92px;transform:translateY(8px)}}.chef-mini-wrap{display:none!important}.groupsbar{position:sticky;top:calc(var(--banner-h));z-index:92;background:#fff;border-bottom:1px solid #f3f4f6}.filters+.groupsbar{top:calc(var(--banner-h) + var(--filters-h))}.groupsbar-track{display:flex;gap:8px;overflow-x:auto;padding:8px 14px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-behavior:smooth;scroll-padding-left:14px;overscroll-behavior-x:contain;will-change:scroll-position}.groupsbar-track::-webkit-scrollbar{display:none}.group-pill{scroll-snap-align:center;padding:6px 12px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;font-weight:700;font-size:12px;white-space:nowrap;transform:translateZ(0);transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}.group-pill:active{transform:scale(.98)}.group-pill.active{background:#111827;color:#fff;border-color:#111827}.group-section{scroll-margin-top:180px}.container{padding:12px 14px}.card{position:relative;border:1px solid #e5e7eb;border-radius:14px;background:#fff}.row{display:flex;gap:12px;padding:10px 10px 44px}.group-title{font-size:16px;font-weight:800;margin:14px 0 8px}.cat-title{font-size:13px;font-weight:700;color:#374151;margin:8px 0}.thumb{width:80px;height:80px;border-radius:12px;object-fit:cover;background:#f3f4f6}.muted{color:var(--muted);font-size:12px}.price{margin-top:4px;font-weight:700}.qty{position:absolute;right:10px;bottom:10px;display:flex;gap:8px;align-items:center}.qty button{width:28px;height:28px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;font-weight:800}.carousel{padding:10px 0;background:#fff}.carousel-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 14px}.carousel-track::-webkit-scrollbar{display:none}.carousel-card{min-width:70%;scroll-snap-align:start;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff}.carousel-img{width:100%;height:140px;object-fit:cover;background:#f3f4f6}.carousel-body{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 10px}.carousel-meta{display:flex;flex-direction:column;gap:2px}.carousel-title{font-weight:700}.carousel-price{font-weight:800;color:#111827}.carousel-qty{display:flex;gap:8px;align-items:center}.carousel-qty button{width:28px;height:28px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;font-weight:800}.carousel-qty .q{min-width:18px;text-align:center;font-weight:700}.page{padding-bottom:var(--footer-h)}.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:110;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#111827;color:#fff;padding:10px 14px;min-height:var(--footer-h)}.cartbar .right .view-order{background:#fff;color:#111827;text-decoration:none;padding:10px 14px;border-radius:10px;font-weight:800;border:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:flex-end;z-index:999}.modal{background:#fff;border-radius:16px 16px 0 0;width:100%;max-width:520px;margin:0 auto;padding:12px 14px}.modal-title{font-weight:800;margin-bottom:8px}.modal-body{max-height:50vh;overflow:auto}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0}.summary-row.total{font-weight:800}.summary-sep{height:1px;background:#e5e7eb;margin:8px 0}.tax-note{color:#6b7280;font-size:12px;margin-top:6px}.modal-actions{display:flex;justify-content:space-between;gap:8px;margin-top:12px}.modal-actions .ghost{flex:1;border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:10px;font-weight:700}.modal-actions .primary{flex:1;text-align:center;text-decoration:none;background:#22c55e;color:#111827;border-radius:10px;padding:10px;font-weight:800}.modal-actions .primary.disabled{opacity:.6;pointer-events:none}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{font-size:11px;padding:4px 8px;border:1px solid #e5e7eb;border-radius:999px;background:#f9fafb}.chip.warn{border-color:#fecaca;background:#fff7f7;color:#991b1b}.vegdot{display:inline-block;width:12px;height:12px;border-radius:3px;border:1.5px solid currentColor;position:relative}.vegdot:after{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;border-radius:1px;background:currentColor}.vegdot.veg{color:#16a34a}.vegdot.nonveg{color:#dc2626}.info-btn{margin-left:6px;width:18px;height:18px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;font-weight:800;font-size:12px;line-height:16px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.info-btn:active{transform:scale(.96)}.info-btn:focus{outline:2px solid #11182722;outline-offset:2px}.vendor-sub{color:#6b7280;font-size:12px;margin-top:4px;text-align:center;padding:0 14px;font-weight:400}const AboutModal = aboutOpen && (<div className="modal-backdrop" onClick={() => setAboutOpen(false)}> <div className="modal" onClick={(e) => e.stopPropagation()}> {} <div className="modal-title" style={{marginBottom: 6,textAlign: "center"}}> About Us </div> <div className="modal-body"> {} <div style={{display: "flex",alignItems: "center",gap: 12,marginBottom: 6}}> {vendor.logoUrl ? <img src={vendor.logoUrl} alt="" style={{width: 44,height: 44,borderRadius: 12,objectFit: "cover",background: "#f3f4f6"}} /> : <div style={{width: 44,height: 44,borderRadius: 12,background: "#f3f4f6"}} />} <div> <div style={{fontSize: 16,fontWeight: 900,letterSpacing: ".2px"}}> {vendor.name || vendorId} </div> {vendor.description && (<div style={{color: "#374151",fontSize: 13,fontWeight: 400,marginTop: 2}}> {vendor.description} </div>)} </div> </div> {} {(vendor.address || vendor.mapsUrl) && (<div style={{color: "#6b7280",fontSize: 13,marginTop: 6}}> {vendor.mapsUrl ? (<a href={vendor.mapsUrl} target="_blank" rel="noreferrer" style={{color: "inherit",textDecoration: "none"}}> 📍 {vendor.address || "View on map"} </a>) : (<>📍 {vendor.address}</>)} </div>)} {} <div style={{height: 1,background: "#e5e7eb",margin: "12px 0"}} /> {} {(vendor.contactPhone || vendor.waDigits || vendor.contactEmail || vendor.website) && (<> <div style={{fontWeight: 800,fontSize: 12,color: "#374151",marginBottom: 8,textTransform: "uppercase"}}> Contact </div> <div style={{display: "grid",gridTemplateColumns: "repeat(2, minmax(0,1fr))",gap: 10}}> {vendor.contactPhone && (<a href={`tel:${vendor.contactPhone}`} style={chipStyle}> <span style={iconStyle}>📞</span><span>Call</span> </a>)} {vendor.waDigits && (<a href={`https://wa.me/${vendor.waDigits}`} target="_blank" rel="noreferrer" style={chipStyle}> <span style={iconStyle}>💬</span><span>WhatsApp</span> </a>)} {vendor.contactEmail && (<a href={`mailto:${vendor.contactEmail}`} style={chipStyle}> <span style={iconStyle}>✉️</span><span>Email</span> </a>)} {vendor.website && (<a href={vendor.website} target="_blank" rel="noreferrer" style={chipStyle}> <span style={iconStyle}>🌐</span><span>Website</span> </a>)} </div> <div style={{height: 1,background: "#e5e7eb",margin: "12px 0"}} /> </>)} {} {(vendor.instagram || vendor.facebook || vendor.twitter || vendor.youtube) && (<> <div style={{fontWeight: 800,fontSize: 12,color: "#374151",marginBottom: 8}}> Follow us on </div> <div style={{display: "grid",gridTemplateColumns: "repeat(2, minmax(0,1fr))",gap: 10}}> {vendor.instagram && (<a href={vendor.instagram} target="_blank" rel="noreferrer" style={chipStyle}> {} <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"> <rect x="3" y="3" width="18" height="18" rx="5" ry="5" fill="none" stroke="#E1306C" strokeWidth="2"/> <circle cx="12" cy="12" r="4" fill="none" stroke="#E1306C" strokeWidth="2"/> <circle cx="17.5" cy="6.5" r="1.3" fill="#E1306C"/> </svg> <span>Instagram</span> </a>)} {vendor.facebook && (<a href={vendor.facebook} target="_blank" rel="noreferrer" style={chipStyle}> {} <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"> <path fill="#1877F2" d="M22 12.07C22 6.48 17.52 2 11.93 2S2 6.48 2 12.07c0 5.02 3.66 9.19 8.44 9.93v-7.02H7.9v-2.91h2.54V9.41c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.23.2 2.23.2v2.45h-1.26c-1.24 0-1.63.77-1.63 1.56v1.87h2.77l-.44 2.91h-2.33V22c4.78-.74 8.44-4.91 8.44-9.93z"/> </svg> <span>Facebook</span> </a>)} {vendor.twitter && (<a href={vendor.twitter} target="_blank" rel="noreferrer" style={chipStyle}> <span style={iconStyle}>🐦</span><span>Twitter/X</span> </a>)} {vendor.youtube && (<a href={vendor.youtube} target="_blank" rel="noreferrer" style={chipStyle}> <span style={iconStyle}>▶️</span><span>YouTube</span> </a>)} </div> </>)} {} <div style={{height: 1,background: "#e5e7eb",margin: "12px 0"}} /> <div style={{fontWeight: 800,fontSize: 12,color: "#374151",marginBottom: 8}}> Review Us </div> <div style={{display: "flex",gap: 6,alignItems: "center"}}> {[1,2,3,4,5].map((n) => {const active = (reviewHover || reviewRating) >= n; return (<button key={n} onClick={() => handleReviewClick(n)} onMouseEnter={() => setReviewHover(n)} onMouseLeave={() => setReviewHover(0)} aria-label={`${n} star${n>1?"s":""}`} style={{width: 32,height: 32,borderRadius: 8,border: "1px solid #e5e7eb",background: "#fff",display: "flex",alignItems: "center",justifyContent: "center",fontSize: 18,cursor: "pointer",boxShadow: "0 1px 2px rgba(0,0,0,.04)"}} > <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"> <path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z" fill={active ? "#F59E0B" : "none"} stroke="#F59E0B" strokeWidth="1.5" /> </svg> </button>);})} </div> <div className="muted" style={{marginTop: 6,fontSize: 12}}> 1–3★ will open WhatsApp (private). 4–5★ will open Google Reviews (public). </div> </div> <div className="modal-actions" style={{display: "flex",gap: 8}}> <button className="ghost" onClick={() => setAboutOpen(false)}>Close</button> {vendor.waDigits ? (<button className="primary" onClick={() => openWhatsAppSmart(vendor.waDigits,"Hi! I have a question.")}> Message on WhatsApp </button>) : (<button className="primary" onClick={() => setAboutOpen(false)}>OK</button>)} </div> </div> </div>); // inline helpers (put near the AboutModal) const chipStyle ={display:"flex",alignItems: "center",gap: 8,border: "1px solid #e5e7eb",background: "#fff",borderRadius: 12,padding: "10px 10px",textDecoration: "none",color: "#111827",fontWeight: 700,fontSize: 12,boxShadow: "0 1px 2px rgba(0,0,0,.04)"}; const iconStyle ={fontSize:16,lineHeight: 1}; .cartbar.two-btn{display:grid;grid-template-columns:1fr 1fr;gap:12px;justify-items:stretch}.footer-btn{width:100%;padding:12px 14px;border-radius:14px;font-weight:800;border:0;box-shadow:0 2px 6px #0000001f}.footer-btn:active{transform:translateY(1px)}.footer-btn.neutral{background:#fff;color:#111827}.footer-btn.primary{background:#25d366;color:#111827}.chef-hero{display:flex;justify-content:center;align-items:center;padding:8px 14px 0;background:#fff}.chef-svg{width:100%;max-width:520px;height:auto;overflow:visible}@media (prefers-reduced-motion: reduce){.chef-svg animate,.chef-svg animateTransform,.chef-svg animateMotion{display:none}}.chef-mini-wrap{display:flex;justify-content:flex-end;padding:4px 14px 0}.chef-mini-svg{width:110px;height:auto}@media (min-width:480px){.chef-mini-svg{width:128px}}@media (prefers-reduced-motion: reduce){.chef-mini-svg animate,.chef-mini-svg animateTransform,.chef-mini-svg animateMotion{display:none}}.confetti-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1200;overflow:hidden}.confetti-burst{position:absolute;left:50%;bottom:36%;transform:translate(-50%)}.confetti-piece{position:absolute;left:0;top:0;border-radius:2px;animation:confetti-pop var(--dur) ease-out var(--delay) 1 forwards;will-change:transform,opacity}@keyframes confetti-pop{0%{transform:translate(0) rotate(0);opacity:1}to{transform:translate(var(--x),calc(-140px + var(--y))) rotate(var(--rot));opacity:0}}@media (prefers-reduced-motion: reduce){.confetti-layer,.confetti-burst,.confetti-piece{display:none!important}}