*,*:before,*:after{box-sizing:border-box}:root{--cream: #faf6f0;--cream-dark: #f0e8dc;--coffee: #4a2c2a;--coffee-light: #7a4f4a;--gold: #d4a04a;--gold-light: #e8c878;--gold-glow: rgba(212, 160, 74, .25);--dark: #1a1412;--warm-white: #fdfcf9;--font-body: "Inter", system-ui, -apple-system, sans-serif;--font-heading: "Playfair Display", serif}body{font-family:var(--font-body);background:#f8f6f3;padding-bottom:100px;margin:0;color:var(--coffee)}.app-navbar{position:sticky;top:0;z-index:100;background:#faf6f0f0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(74,44,42,.06);padding:.55rem 0}.brand-name{font-family:var(--font-heading);font-size:1.2rem;font-weight:900;color:var(--coffee);text-decoration:none;letter-spacing:-.5px;display:flex;align-items:center;gap:2px}.brand-name span{color:var(--gold)}.meja-badge{background:#d4a04a1f;color:var(--coffee-light);border-radius:50px;padding:.25rem .7rem;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;border:1px solid rgba(212,160,74,.15)}.cart-btn{position:relative;background:linear-gradient(135deg,var(--coffee),var(--coffee-light));color:var(--gold-light);border:none;border-radius:50px;padding:.45rem 1rem;font-size:.8rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:.4rem}.cart-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px #4a2c2a33;color:#fff}.cart-btn:active{transform:scale(.96)}.cart-count{background:var(--gold);color:var(--coffee);border-radius:50px;padding:0 7px;min-width:20px;height:20px;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;transition:transform .2s}.cart-count.bump{animation:bump .35s ease}@keyframes bump{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}.cat-bar{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:60px;z-index:90;border-bottom:1px solid rgba(74,44,42,.04);padding:.65rem 0 .55rem}.cat-scroll{overflow-x:auto;display:flex;gap:.45rem;padding:0 .75rem;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory}.cat-scroll::-webkit-scrollbar{display:none}.cat-pill{flex-shrink:0;border-radius:50px;padding:.35rem .8rem;font-size:.75rem;font-weight:600;border:1.5px solid rgba(74,44,42,.1);background:#fff;color:var(--coffee-light);cursor:pointer;transition:all .2s;font-family:inherit;display:flex;align-items:center;gap:.35rem;white-space:nowrap;scroll-snap-align:start}.cat-pill:hover{border-color:var(--gold);color:var(--coffee);background:#d4a04a0f}.cat-pill.active{background:var(--coffee);color:var(--gold-light);border-color:var(--coffee)}.search-wrap{padding:.6rem .75rem 0}.search-wrap .input-group{background:#fff;border-radius:12px;overflow:hidden;border:1.5px solid rgba(74,44,42,.08);transition:border-color .2s,box-shadow .2s}.search-wrap .input-group:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px #d4a04a1a}.search-wrap .input-group-text{background:#fff;border:none;color:var(--coffee-light);padding:.5rem .6rem .5rem .85rem}.search-wrap input{border:none;outline:none;box-shadow:none;font-size:.85rem;font-family:inherit;padding:.5rem .5rem .5rem 0;color:var(--coffee)}.search-wrap input:focus{box-shadow:none}.search-wrap input::-moz-placeholder{color:#c4b5a8}.search-wrap input::placeholder{color:#c4b5a8}.menu-container{padding:.75rem}.row.g-3{margin:-.5rem}.row.g-3>*{padding:.5rem}.menu-card{background:#fff;border-radius:16px;border:1px solid rgba(74,44,42,.06);overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);height:100%;display:flex;flex-direction:column}.menu-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px #4a2c2a14}.menu-card-img{position:relative;overflow:hidden;height:160px;background:var(--cream);flex-shrink:0}.menu-card-img img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .5s ease}.menu-card:hover .menu-card-img img{transform:scale(1.06)}.menu-card-img .no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--cream),var(--cream-dark))}.menu-card-img .no-img i{font-size:2.2rem;color:var(--coffee-light);opacity:.3}.price-badge{position:absolute;bottom:8px;right:8px;background:#4a2c2ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--gold-light);font-weight:700;font-size:.75rem;padding:.2rem .55rem;border-radius:7px}.label-badges{position:absolute;top:7px;left:7px;display:flex;flex-direction:column;gap:3px}.badge-best{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--coffee);font-size:.6rem;font-weight:800;padding:.18rem .45rem;border-radius:5px;text-transform:uppercase}.badge-new{background:linear-gradient(135deg,var(--coffee),var(--coffee-light));color:var(--gold-light);font-size:.6rem;font-weight:800;padding:.18rem .45rem;border-radius:5px;text-transform:uppercase}.card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(74,44,42,.8),transparent 60%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;opacity:0;transition:opacity .25s}.menu-card:hover .card-overlay{opacity:1}.overlay-btn{background:#fffffff2;color:var(--coffee);border:none;border-radius:9px;padding:.4rem .7rem;font-size:.74rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;display:flex;align-items:center;gap:.3rem}.overlay-btn:hover{background:#fff;transform:scale(1.04)}.menu-card-body{padding:.75rem .85rem .85rem;flex:1;display:flex;flex-direction:column}.menu-card-name{font-weight:700;font-size:.86rem;color:var(--coffee);margin-bottom:.15rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.menu-card-desc{font-size:.73rem;color:var(--coffee-light);opacity:.6;margin-bottom:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.2em;flex:1}.stock-badge{display:inline-flex;align-items:center;gap:4px;font-size:.65rem;font-weight:700;padding:.15rem 0;color:#b8860b;margin-top:4px}.stock-badge i{font-size:.6rem}.qty-control{display:flex;align-items:center;border:1.5px solid rgba(74,44,42,.1);border-radius:9px;overflow:hidden;margin-top:8px}.qty-btn{background:var(--cream);border:none;width:30px;height:30px;font-size:.95rem;color:var(--coffee-light);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;font-family:inherit}.qty-btn:hover{background:var(--coffee);color:var(--gold-light)}.qty-val{flex:1;text-align:center;font-size:.82rem;font-weight:700;color:var(--coffee);min-width:28px}.btn-add{width:100%;background:linear-gradient(135deg,var(--coffee),var(--coffee-light));color:var(--gold-light);border:none;border-radius:9px;padding:.5rem;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:.35rem;margin-top:8px}.btn-add:hover{filter:brightness(1.1);box-shadow:0 5px 16px #4a2c2a33;color:#fff}.btn-add:active{transform:scale(.97)}.btn-add-outline{width:100%;background:transparent;color:var(--coffee);border:1.5px solid var(--coffee);border-radius:9px;padding:.45rem;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.35rem;text-decoration:none;margin-top:8px}.btn-add-outline:hover{background:#4a2c2a0f;color:var(--coffee)}.skeleton{background:linear-gradient(90deg,var(--cream-dark) 25%,#e5ddd0 50%,var(--cream-dark) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:10px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-card{border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(74,44,42,.06)}.skeleton-img{height:160px}.skeleton-body{padding:.85rem}.cart-overlay{position:fixed;inset:0;background:#1a141280;z-index:200;opacity:0;visibility:hidden;transition:all .3s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.cart-overlay.open{opacity:1;visibility:visible}.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,100%);background:var(--warm-white);z-index:201;transform:translate(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 50px #0000001f}.cart-drawer.open{transform:translate(0)}.cart-drawer-header{padding:1rem 1.25rem;border-bottom:1px solid rgba(74,44,42,.06);display:flex;align-items:center;justify-content:space-between;background:var(--warm-white)}.cart-drawer-header h5{font-family:var(--font-heading);font-weight:800;font-size:1rem;color:var(--coffee);margin:0;display:flex;align-items:center;gap:.5rem}.cart-drawer-header h5 i{color:var(--gold)}.btn-close-drawer{width:32px;height:32px;border-radius:8px;background:var(--cream);border:1px solid rgba(74,44,42,.06);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:var(--coffee-light)}.btn-close-drawer:hover{background:#d4a04a1f;color:var(--coffee)}.cart-items{flex:1;overflow-y:auto;padding:.75rem 1rem}.cart-item-card{background:var(--cream);border-radius:12px;padding:.75rem;margin-bottom:.6rem;border:1px solid rgba(74,44,42,.04)}.cart-item-name{font-weight:700;font-size:.84rem;color:var(--coffee);margin-bottom:.15rem}.cart-item-price{font-size:.74rem;color:var(--coffee-light);opacity:.6}.cart-item-subtotal{font-weight:800;font-size:.9rem;color:var(--gold);white-space:nowrap}.cart-item-note input{border:1px solid rgba(74,44,42,.08);border-radius:7px;padding:.35rem .55rem;font-size:.74rem;width:100%;outline:none;font-family:inherit;background:#fff;transition:border-color .2s;color:var(--coffee)}.cart-item-note input:focus{border-color:var(--gold)}.qty-ctrl-sm{display:flex;align-items:center;background:#fff;border:1px solid rgba(74,44,42,.08);border-radius:7px;overflow:hidden}.qty-ctrl-sm button{width:26px;height:26px;border:none;background:transparent;color:var(--coffee-light);cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:all .12s;font-family:inherit;padding:0}.qty-ctrl-sm button:hover{background:var(--coffee);color:var(--gold-light)}.qty-ctrl-sm span{font-size:.8rem;font-weight:700;padding:0 8px;color:var(--coffee);min-width:24px;text-align:center}.btn-del{width:26px;height:26px;border:none;border-radius:7px;background:#fef2f2;color:#dc2626;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.72rem;transition:all .12s;flex-shrink:0}.btn-del:hover{background:#fee2e2}.cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.cart-empty i{font-size:2.8rem;color:#4a2c2a14;margin-bottom:.75rem}.cart-empty p{color:var(--coffee-light);opacity:.5;font-size:.85rem;margin:0}.cart-empty small{color:var(--coffee-light);opacity:.3}.cart-footer{padding:1rem 1.25rem;border-top:1px solid rgba(74,44,42,.06);background:var(--warm-white)}.cart-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.cart-total-label{font-size:.82rem;color:var(--coffee-light)}.cart-total-val{font-size:1.2rem;font-weight:800;color:var(--coffee);font-family:var(--font-heading)}.btn-order{width:100%;background:linear-gradient(135deg,var(--coffee),var(--coffee-light));color:var(--gold-light);border:none;border-radius:12px;padding:.8rem;font-size:.9rem;font-weight:800;cursor:pointer;font-family:inherit;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:.5rem}.btn-order:hover:not(:disabled){box-shadow:0 8px 24px #4a2c2a33;color:#fff}.btn-order:disabled{opacity:.5;cursor:not-allowed}.detail-modal-overlay{position:fixed;inset:0;background:#1a14128c;z-index:300;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;visibility:hidden;transition:all .25s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.detail-modal-overlay.open{opacity:1;visibility:visible}.detail-modal{background:var(--warm-white);border-radius:20px;width:100%;max-width:460px;overflow:hidden;transform:scale(.92) translateY(20px);transition:all .35s cubic-bezier(.34,1.56,.64,1);max-height:90vh;overflow-y:auto}.detail-modal-overlay.open .detail-modal{transform:scale(1) translateY(0)}.detail-modal-img{height:200px;background:var(--cream);position:relative;overflow:hidden}.detail-modal-img img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.detail-modal-img .no-img-lg{display:flex;align-items:center;justify-content:center;height:100%;background:linear-gradient(135deg,var(--cream),var(--cream-dark))}.detail-modal-img .no-img-lg i{font-size:3.5rem;color:var(--coffee-light);opacity:.2}.detail-modal-body{padding:1.25rem}.detail-modal-name{font-family:var(--font-heading);font-size:1.3rem;font-weight:800;color:var(--coffee);margin-bottom:.35rem}.detail-modal-price{font-size:1.05rem;font-weight:800;color:var(--gold);margin-bottom:.6rem}.detail-modal-desc{font-size:.84rem;color:var(--coffee-light);line-height:1.7;margin-bottom:1.25rem;opacity:.8}.detail-modal-tags{display:flex;gap:.4rem;margin-bottom:.75rem;flex-wrap:wrap}.detail-modal-tag{background:#d4a04a1a;color:var(--coffee-light);font-size:.68rem;font-weight:700;padding:.2rem .55rem;border-radius:50px}.detail-qty-row{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem}.detail-qty-ctrl{display:flex;align-items:center;border:2px solid rgba(74,44,42,.08);border-radius:10px;overflow:hidden}.detail-qty-ctrl button{width:38px;height:38px;border:none;background:var(--cream);color:var(--coffee);font-size:1rem;cursor:pointer;transition:all .12s;font-family:inherit;font-weight:700}.detail-qty-ctrl button:hover{background:var(--coffee);color:var(--gold-light)}.detail-qty-ctrl span{font-size:1rem;font-weight:800;color:var(--coffee);width:44px;text-align:center}.btn-add-modal{flex:1;background:linear-gradient(135deg,var(--coffee),var(--coffee-light));color:var(--gold-light);border:none;border-radius:10px;padding:.7rem;font-size:.88rem;font-weight:800;cursor:pointer;font-family:inherit;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:.4rem}.btn-add-modal:hover{box-shadow:0 6px 20px #4a2c2a33;color:#fff}.btn-close-modal{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:#ffffffeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--coffee-light);font-size:.85rem;transition:all .2s}.btn-close-modal:hover{background:#fff;color:var(--coffee)}.cart-fab{position:fixed;bottom:20px;right:20px;z-index:150;display:none}.cart-fab button{background:linear-gradient(135deg,var(--coffee),var(--coffee-light));color:var(--gold-light);border:none;border-radius:50px;padding:.75rem 1.25rem;font-size:.88rem;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 6px 24px #4a2c2a33;transition:all .25s;display:flex;align-items:center;gap:.5rem}.cart-fab button:hover{transform:translateY(-2px);box-shadow:0 10px 32px #4a2c2a40;color:#fff}.fab-badge{background:var(--gold);color:var(--coffee);border-radius:50px;width:22px;height:22px;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center}.empty-state{text-align:center;padding:3rem 1rem;color:var(--coffee-light);opacity:.5}.empty-state i{font-size:3rem;margin-bottom:.75rem;display:block;color:#4a2c2a14}.empty-state p{font-size:.85rem;margin:0}.toast-container{position:fixed;top:75px;right:.75rem;z-index:500;display:flex;flex-direction:column;gap:.4rem;pointer-events:none}.toast-item{background:var(--coffee);color:var(--gold-light);border-radius:10px;padding:.65rem 1rem;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:.5rem;box-shadow:0 6px 20px #0000002e;animation:toastIn .3s ease,toastOut .3s ease 2.4s forwards;max-width:280px;pointer-events:auto}.toast-item i{color:var(--gold);font-size:.9rem;flex-shrink:0}@keyframes toastIn{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@keyframes toastOut{to{opacity:0;transform:translate(16px)}}@media(min-width:768px){.menu-card-img{height:175px}.menu-card-name{font-size:.92rem}.menu-container{padding:1rem}.cat-scroll{padding:0 1rem;gap:.55rem}.search-wrap{padding:.7rem 1rem 0}.cat-bar{top:64px}}@media(min-width:1200px){.menu-card-img{height:190px}.row.g-3{margin:-.6rem}.row.g-3>*{padding:.6rem}}@media(max-width:375px){.menu-card-img{height:140px}.menu-card-body{padding:.6rem .7rem .75rem}.menu-card-name{font-size:.8rem}.price-badge{font-size:.68rem;padding:.15rem .45rem}.btn-add{font-size:.75rem;padding:.4rem}.cart-btn span:not(.cart-count){display:none}.cat-pill{font-size:.7rem;padding:.3rem .65rem}}
