/* MeO.CS theme — maroon & cream taken from the logo */
:root{--coffee:#7c1a19;--coffee-dark:#5c1211;--cream:#faf6f0;--accent:#b0473f;--soft:#f5e8e3}
body{background:var(--cream);color:#2b1a1d}
.coffee-nav{background:var(--coffee)}
.navbar-brand{letter-spacing:.02em}
.navbar-brand small{font-size:.55em;font-weight:400;letter-spacing:.12em;opacity:.85}
.hero{background:linear-gradient(135deg,var(--soft),#fff)}
.menu-card,.stat-card,.order-card,.shop-card{border:0;box-shadow:0 3px 16px #6b142414}
.item-icon{height:44px;width:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-size:1.3rem}
.item-photo{width:76px;height:76px;flex:none;object-fit:cover;border-radius:.75rem}
.admin-thumb{width:48px;height:48px;object-fit:cover;border-radius:.5rem}
.category-title{border-left:4px solid var(--accent);padding-left:.55rem}
.btn-dark{background:var(--coffee);border-color:var(--coffee)}
.btn-dark:hover,.btn-dark:focus,.btn-dark:active{background:var(--coffee-dark)!important;border-color:var(--coffee-dark)!important}
.btn-outline-dark{color:var(--coffee);border-color:var(--coffee)}
.btn-outline-dark:hover{background:var(--coffee);border-color:var(--coffee);color:#fff}
.form-control:focus,.form-select:focus,.form-check-input:focus{border-color:var(--accent);box-shadow:0 0 0 .2rem #b8475a33}
.form-check-input:checked{background-color:var(--coffee);border-color:var(--coffee)}
.text-bg-light{color:var(--coffee)!important}
.table{--bs-table-bg:transparent}

/* ===== Admin (tablet-friendly) ===== */
body.admin{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;background:#f8f3f2;font-size:1rem}
.a-wrap{max-width:1280px}
.a-top{position:sticky;top:0;z-index:30;background:var(--coffee);color:#fff;box-shadow:0 2px 10px #0002}
.a-top>.a-wrap{padding-top:.6rem;padding-bottom:.4rem}
.a-brand{color:#fff;font-weight:800;font-size:1.3rem;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.a-brand img{width:34px;height:34px;border-radius:50%;border:2px solid #fff6}
.a-brand .brand-text>span{color:#f3b3bf}.a-brand small{font-weight:500;font-size:.7rem;opacity:.75;letter-spacing:.12em;text-transform:uppercase}
.a-nav{overflow-x:auto;scrollbar-width:none}.a-nav::-webkit-scrollbar{display:none}
.a-nav .a-wrap{padding-bottom:.5rem}
.a-nav-link{flex:none;display:flex;align-items:center;gap:.4rem;min-height:44px;padding:.5rem .9rem;border-radius:.8rem;color:#f6dfe3;text-decoration:none;font-weight:600;font-size:.92rem;white-space:nowrap}
@media (max-width:820px){.a-nav-link{padding:.5rem .65rem;font-size:.88rem}}
.a-nav-badge{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#e53935;color:#fff;font-size:.75rem;font-weight:800;display:inline-grid;place-items:center;margin-left:.15rem;box-shadow:0 0 0 2px var(--coffee)}
.a-nav-link.active .a-nav-badge{box-shadow:0 0 0 2px #fff}
.a-toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,140%);z-index:90;display:flex;align-items:center;gap:.75rem;background:var(--coffee);color:#fff;text-decoration:none;padding:.85rem 1.3rem;border-radius:1rem;box-shadow:0 12px 30px #0005;transition:transform .3s ease;min-width:260px}
.a-toast.show{transform:translate(-50%,0)}
.a-toast:hover{color:#fff}
.a-toast>span:first-child{font-size:1.5rem}
.a-toast strong{display:block;font-size:1.05rem}.a-toast small{opacity:.8}
.a-nav-link:hover{background:#ffffff14;color:#fff}
.a-nav-link.active{background:#fff;color:var(--coffee)}
.a-nav-cta{background:#ffffff22;color:#fff}
body.admin .btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:.3rem}
body.admin .btn-sm{min-height:36px;padding-left:.75rem;padding-right:.75rem}
body.admin .btn-link{min-height:28px}
body.admin .form-control,body.admin .form-select{min-height:44px}
body.admin .card{border-radius:1rem}
body.admin .table td,body.admin .table th{padding-top:.75rem;padding-bottom:.75rem}
.order-card .btn-lg{min-height:52px;font-weight:700}
.order-card h2{font-weight:800}
.a-pay{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.75rem;padding:.5rem .6rem;margin-bottom:.6rem;font-weight:700;font-size:.9rem}
.a-pay-unpaid{background:#fff4e0;color:#9a5b00}.a-pay-paid{background:#e3f4e7;color:#1f6b3f}
.a-pay .btn-link{color:#1f6b3f;min-height:auto}
.a-timer{font-weight:700;font-size:.95rem;color:#6c757d;font-variant-numeric:tabular-nums;white-space:nowrap}
.a-timer.warn{color:#b07400}
.a-timer.late{color:#c62828;animation:timerPulse 1.2s ease-in-out infinite}
@keyframes timerPulse{50%{opacity:.45}}
.a-itemopts{background:#faf4f5;border:1px solid #eadde0;border-radius:.8rem;padding:.75rem .9rem}
.a-itemopt-group{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.35rem 0;border-top:1px dashed #e6d6d9}
.a-itemopt-group:first-child{border-top:0}
.a-itemopt-name{font-weight:700;font-size:.85rem;min-width:110px}
.a-itemopt-chip{display:inline-flex;align-items:center;gap:.35rem;background:#fff;border:1px solid #e3d3d6;border-radius:999px;padding:.3rem .75rem;font-size:.85rem;cursor:pointer;min-height:36px}
.a-itemopt-chip:has(input:not(:checked)){opacity:.5;text-decoration:line-through}
.a-wa{display:flex;width:fit-content;align-items:center;gap:.3rem;margin-top:.35rem;padding:.3rem .7rem;border-radius:999px;background:#e7f8ee;color:#137a3e;font-weight:700;font-size:.85rem;text-decoration:none;min-height:34px}
.a-wa:hover{background:#d2f2df;color:#0f6332}
.a-choice{display:flex;align-items:center;border:1px solid #e3d3d6;border-radius:.75rem;padding:.6rem .8rem;cursor:pointer;min-height:44px;background:#fff}
.a-choice:has(input:checked){border-color:var(--coffee);background:var(--soft);font-weight:600}
.a-promo-box{background:#fffaf0;border-color:#f0dcb0}
.a-pickup{font-size:2rem;line-height:1.05;color:var(--coffee);letter-spacing:.03em}
.badge-counter{background:#334;color:#fff}
/* POS */
.pos{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:700px){.pos{grid-template-columns:minmax(0,1fr) 320px;align-items:start}}
@media (min-width:1100px){.pos{grid-template-columns:minmax(0,1fr) 380px}}
.pos-tabs{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;margin-bottom:.75rem}
.pos-tabs button{flex:none;min-height:44px;padding:.4rem 1.1rem;border-radius:999px;border:1px solid #e3d3d6;background:#fff;font-weight:600}
.pos-tabs button.active{background:var(--coffee);border-color:var(--coffee);color:#fff}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}
.pos-item{border:0;background:#fff;border-radius:1rem;padding:0;overflow:hidden;text-align:left;box-shadow:0 2px 10px #6b14240f;display:flex;flex-direction:column;transition:transform .1s}
.pos-item:active{transform:scale(.96)}
.pos-item-img{aspect-ratio:4/3;background:linear-gradient(160deg,var(--soft),#fff);display:grid;place-items:center;font-size:2.2rem;position:relative;overflow:hidden}
.pos-item-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pos-item-body{padding:.55rem .7rem .7rem}.pos-item-body strong{display:block;font-size:.9rem;line-height:1.2}.pos-item-body span{font-size:.85rem;color:var(--coffee);font-weight:700}
.pos-cart{background:#fff;border-radius:1rem;box-shadow:0 2px 14px #6b142414;display:flex;flex-direction:column;max-height:calc(100vh - 150px);position:sticky;top:130px}
.pos-cart-head{padding:1rem 1rem .5rem;border-bottom:1px solid #f1e6e8}
.pos-lines{overflow-y:auto;padding:.25rem 1rem;flex:1;min-height:80px}
.pos-line{padding:.7rem 0;border-bottom:1px dashed #eadde0}
.pos-line-top{display:flex;align-items:center;gap:.5rem}
.pos-line .c-chips{margin-top:.45rem;gap:.35rem}.pos-line .c-chips button{padding:.3rem .65rem;font-size:.75rem;min-height:32px}
.pos-cart-foot{padding:1rem;border-top:1px solid #f1e6e8}
.pos-done{position:fixed;inset:0;z-index:80;background:#1c0a0e99;display:grid;place-items:center;padding:1rem}
.pos-done>div{background:#fff;border-radius:1.3rem;padding:1.6rem;text-align:center;max-width:420px;width:100%;max-height:94vh;overflow-y:auto}

/* ===== Customer app ===== */
body.customer{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;background:#fbf7f6}
body.customer main{max-width:760px}
body.c-locked{overflow:hidden}
.c-header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #f0e4e6;padding:.7rem 0}
.c-header .container{max-width:760px}
.c-brand{font-weight:800;font-size:1.35rem;color:var(--coffee);text-decoration:none;letter-spacing:-.02em}
.c-brand .brand-text>span{color:var(--accent)}
.brand-text{white-space:nowrap}
.c-pill{font-size:.75rem;font-weight:600;background:var(--soft);color:var(--coffee);padding:.35rem .7rem;border-radius:999px}
.c-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(135deg,var(--coffee) 0%,#9b2338 100%);color:#fff;border-radius:1.4rem;padding:1.4rem 1.3rem;margin-bottom:1rem;overflow:hidden;position:relative}
.c-hero h1{font-weight:800;font-size:1.55rem;line-height:1.15;margin:.15rem 0 .5rem;letter-spacing:-.02em}
.c-hero p{font-size:.85rem;opacity:.9}
.c-hero-kicker{font-weight:600;opacity:.85;margin:0}
/* Highlights carousel */
.c-hl{margin-bottom:1rem}
.c-hl-title{font-size:1.05rem;font-weight:800;color:var(--coffee);margin:0 0 .5rem}
.c-hl-viewport{overflow:hidden;border-radius:1.3rem;box-shadow:0 6px 22px #7c1a191f;background:#fff;position:relative;touch-action:pan-y}
.c-hl-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.c-hl-slide{flex:0 0 100%;display:grid;grid-template-columns:44% 1fr;min-height:180px;user-select:none}
.c-hl-img{position:relative;background:linear-gradient(160deg,var(--soft),#fff);display:grid;place-items:center;font-size:3rem;overflow:hidden}
.c-hl-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 6s ease}
.c-hl-slide.is-active .c-hl-img img{transform:scale(1.08)}
.c-hl-body{padding:1rem 1.1rem;display:flex;flex-direction:column;justify-content:center;gap:.25rem}
.c-hl-body h3{font-size:1.15rem;font-weight:800;margin:0}
.c-hl-body p{font-size:.8rem;color:#8b7a7d;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-hl-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.5rem}
.c-hl-price{font-size:1.05rem;white-space:nowrap}
.c-hl-btn{flex:none;padding:.55rem 1rem;font-size:.85rem;white-space:nowrap}
.c-hl-slide.is-active .c-hl-body>*{animation:hlIn .6s ease both}
.c-hl-slide.is-active .c-hl-body>*:nth-child(2){animation-delay:.08s}.c-hl-slide.is-active .c-hl-body>*:nth-child(3){animation-delay:.16s}
@keyframes hlIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* fade style: slides stacked, cross-fading */
.c-hl--fade .c-hl-track{display:grid}
.c-hl--fade .c-hl-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}
.c-hl--fade .c-hl-slide.is-active{opacity:1;visibility:visible}
/* none style / reduced motion: no movement */
.c-hl--none .c-hl-track{transition:none}
.c-hl--none .c-hl-slide.is-active .c-hl-body>*,.c-hl--none .c-hl-slide.is-active .c-hl-img img{animation:none;transform:none}
.c-hl-dots{display:flex;justify-content:center;gap:.4rem;margin-top:.55rem}
.c-hl-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#e0cfd2;transition:width .3s,background .3s}
.c-hl-dots button.on{width:22px;background:var(--coffee)}
@media (max-width:420px){.c-hl-slide{grid-template-columns:40% 1fr;min-height:160px}.c-hl-body h3{font-size:1rem}}
@media (prefers-reduced-motion:reduce){.c-hl-track,.c-hl-slide,.c-hl-img img{transition:none!important;animation:none!important}}
/* Badges & promo prices */
.c-ribbons{position:absolute;top:.5rem;left:.5rem;display:flex;flex-wrap:wrap;gap:.3rem;z-index:1}
.c-ribbon{position:relative;overflow:hidden;font-size:.68rem;font-weight:800;letter-spacing:.02em;padding:.22rem .5rem;border-radius:.45rem;background:#fff;color:var(--coffee);box-shadow:0 2px 6px #0002;white-space:nowrap}
.c-ribbon-new,.c-ribbon-limited{text-transform:uppercase;letter-spacing:.12em;font-size:.64rem;padding:.26rem .55rem}
.c-ribbon-new{background:#7c1a19;color:#fff}.c-ribbon-best{background:#f0b429;color:#3a2600}.c-ribbon-promo,.c-ribbon-off{background:#e53935;color:#fff}.c-ribbon-limited{background:#2b1a1d;color:#fff}
.badge-anim .c-ribbon::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff9 50%,transparent 70%);transform:translateX(-120%);animation:ribbonShine 2.6s ease-in-out infinite}
.badge-anim .c-ribbon-new,.badge-anim .c-ribbon-off{animation:ribbonPop 2.6s ease-in-out infinite}
@keyframes ribbonShine{60%,100%{transform:translateX(120%)}}
@keyframes ribbonPop{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.badge-anim .c-ribbon::after,.badge-anim .c-ribbon{animation:none}}
.c-was{color:#9a8a8d;font-weight:500;font-size:.8em}
.c-now{color:#d32f2f}
.c-card-price{line-height:1.15}
.c-brand{display:inline-flex;align-items:center;gap:.5rem}
.c-brand img{width:40px;height:40px;border-radius:50%;box-shadow:0 1px 4px #0002}
.c-hero-logo{width:104px;height:104px;flex:none;border-radius:50%;border:3px solid #fff8;box-shadow:0 8px 20px #0004}
.c-closed-logo{width:120px;height:120px;border-radius:50%;box-shadow:0 6px 18px #7c1a1925}
.c-hero-cup{font-size:4.2rem;line-height:1;flex:none;transform:rotate(-12deg);filter:drop-shadow(0 8px 12px #0004)}
.c-tabs{position:sticky;top:57px;z-index:20;display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;background:#fbf7f6;padding:.6rem 0;margin:0 -.75rem;padding-left:.75rem;padding-right:.75rem}
.c-tabs::-webkit-scrollbar{display:none}
.c-tab{flex:none;padding:.45rem 1rem;border-radius:999px;background:#fff;border:1px solid #eadadd;color:#5d4a4e;font-weight:600;font-size:.85rem;text-decoration:none;transition:.2s}
.c-tab.active{background:var(--coffee);border-color:var(--coffee);color:#fff}
.c-section{scroll-margin-top:115px;margin-top:.9rem}
.c-section-title{font-weight:800;font-size:1.15rem;margin-bottom:.75rem}
.c-section-title small{font-weight:500;font-size:.75rem;color:#9a8a8d;margin-left:.3rem}
.c-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
@media (min-width:576px){.c-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.c-card{background:#fff;border-radius:1.1rem;overflow:hidden;box-shadow:0 2px 12px #6b14240f;cursor:pointer;display:flex;flex-direction:column;transition:transform .15s}
.c-card:active{transform:scale(.97)}
.c-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.c-card-img{aspect-ratio:1/1;background:linear-gradient(160deg,var(--soft),#fff);display:grid;place-items:center;font-size:3rem}
.c-card-img img{width:100%;height:100%;object-fit:cover}
.c-card-body{padding:.7rem .8rem .8rem;display:flex;flex-direction:column;flex:1}
.c-card-body h3{font-size:.92rem;font-weight:700;margin:0 0 .2rem}
.c-card-body p{font-size:.72rem;color:#8b7a7d;margin:0 0 .5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between}
.c-card-foot strong{font-size:.9rem}
.c-plus{width:30px;height:30px;border-radius:50%;background:var(--coffee);color:#fff;display:grid;place-items:center;font-size:1.2rem;font-weight:600;line-height:1}
.c-bottom-space{height:90px}
.c-cartbar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(728px,calc(100% - 24px));z-index:40;display:flex;align-items:center;gap:.75rem;border:0;border-radius:999px;background:var(--coffee);color:#fff;padding:.85rem 1.2rem;font-weight:700;box-shadow:0 10px 24px #6b142455}
.c-cartbar span:nth-child(2){flex:1;text-align:left}
.c-cartbar-count{background:#fff;color:var(--coffee);min-width:26px;height:26px;border-radius:999px;display:grid;place-items:center;font-size:.8rem;padding:0 .4rem}
.c-cartbar.bump{animation:bump .35s ease}@keyframes bump{40%{transform:translateX(-50%) scale(1.05)}}
.c-backdrop{position:fixed;inset:0;background:#1c0a0e80;z-index:50;opacity:0;transition:opacity .25s}
.c-backdrop.open{opacity:1}
.c-sheet{position:fixed;left:50%;bottom:0;width:min(760px,100%);max-height:92vh;z-index:60;background:#fff;border-radius:1.5rem 1.5rem 0 0;display:flex;flex-direction:column;transform:translate(-50%,100%);transition:transform .25s ease;overflow:hidden}
.c-sheet.open{transform:translate(-50%,0)}
.c-sheet form{min-height:0}
.c-sheet-close{position:absolute;top:.75rem;right:.75rem;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:#fff;box-shadow:0 2px 8px #0002;font-size:1.4rem;line-height:1}
.c-sheet-img{height:220px;flex:none;background:linear-gradient(160deg,var(--soft),#fff);display:grid;place-items:center;font-size:5rem}
.c-sheet-img,.c-card-img{position:relative;overflow:hidden}
.c-sheet-img img,.c-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-card.is-sold-out{cursor:default;box-shadow:none;background:#f4efee}
.c-card.is-sold-out:active{transform:none}
.c-card.is-sold-out .c-card-img img,.c-card.is-sold-out .c-card-img>span:first-child{filter:grayscale(1);opacity:.45}
.c-card.is-sold-out h3,.c-card.is-sold-out strong{color:#9a8a8d}
.c-soldout-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);background:#2b1a1d;color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .8rem;border-radius:.5rem;z-index:1;white-space:nowrap}
.pos-item.is-sold-out{opacity:.55;cursor:not-allowed}
.pos-item.is-sold-out .pos-item-img img{filter:grayscale(1)}
.a-soldout{background:#2b1a1d;color:#fff}
.c-sheet-body{padding:1.2rem 1.2rem .5rem;overflow-y:auto;flex:1;min-height:0}
#cartSheet .c-sheet-body{padding-top:1.4rem}
.c-sheet-body h2{font-weight:800;font-size:1.3rem;margin-bottom:.25rem}
.c-price{font-weight:800;font-size:1.1rem;color:var(--coffee)}
.c-opt{margin-top:1rem}
.c-opt h4{font-size:.85rem;font-weight:700;margin-bottom:.5rem}
.c-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.c-chips button{border:1.5px solid #eadadd;background:#fff;border-radius:999px;padding:.4rem .9rem;font-size:.82rem;font-weight:600;color:#5d4a4e}
.c-chips button.on{border-color:var(--coffee);background:var(--soft);color:var(--coffee)}
.c-sheet-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.2rem calc(.9rem + env(safe-area-inset-bottom));border-top:1px solid #f0e4e6;background:#fff}
.c-btn{border:0;border-radius:999px;background:var(--coffee);color:#fff;font-weight:700;padding:.85rem 1.4rem;flex:1;max-width:340px}
.c-btn:disabled{opacity:.5}
.c-qty{display:flex;align-items:center;gap:.8rem;font-weight:700}
.c-qty button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--coffee);background:#fff;color:var(--coffee);font-size:1.1rem;line-height:1;display:grid;place-items:center}
.c-qty-sm{gap:.55rem}.c-qty-sm button{width:28px;height:28px;font-size:.95rem}
.c-line{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;border-bottom:1px solid #f3e9eb}
body.customer .form-control{border-radius:.8rem;padding:.6rem .8rem}
body.customer .hero{border-radius:1.4rem!important}
.c-done{width:72px;height:72px;margin:0 auto;border-radius:50%;background:var(--coffee);color:#fff;display:grid;place-items:center;font-size:2.2rem;font-weight:800;box-shadow:0 8px 20px #6b142440}
.c-ticket{display:inline-block;background:#fff;border:2px dashed var(--accent);border-radius:1rem;padding:.8rem 1.6rem}
.c-ticket small{display:block;color:#8b7a7d;font-size:.75rem}
.c-ticket div{font-weight:800;font-size:1.6rem;color:var(--coffee);letter-spacing:.02em}
.c-ticket .c-ticket-no,.c-pickup{font-size:3.2rem;line-height:1.1;letter-spacing:.04em;color:var(--coffee)}
#myOrders:not(:empty){display:grid;gap:.5rem;margin-bottom:1rem}
.c-myorder{display:flex;align-items:center;gap:.75rem;background:#fff;border-radius:1rem;padding:.75rem 1rem;text-decoration:none;color:inherit;box-shadow:0 2px 12px #6b14241a;border-left:5px solid var(--accent)}
.c-myorder small{display:block;color:#8b7a7d;font-size:.72rem}
.c-myorder strong{font-size:.95rem}
.c-myorder-icon{font-size:1.5rem}
.c-myorder-go{font-weight:700;color:var(--coffee);font-size:.85rem}
.c-myorder.status-preparing{border-left-color:#e0a100}
.c-myorder.status-ready{border-left-color:#2e8b57;background:#eaf7ee;animation:flash 1s ease 3}
.c-pay{background:#fff;border-radius:1.1rem;padding:1.1rem 1.2rem;box-shadow:0 2px 12px #6b14240f;margin-top:1rem}
.c-pay-paid{display:none;align-items:center;gap:.8rem}
.c-pay-paid span{width:42px;height:42px;border-radius:50%;background:#2e8b57;color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.3rem}
.c-pay-paid strong{display:block;color:#2e8b57;font-size:1.1rem}.c-pay-paid small{color:#6b7c70}
.c-pay.is-paid{background:#eaf7ee}.c-pay.is-paid .c-pay-paid{display:flex}.c-pay.is-paid .c-pay-due{display:none}
.c-pay-qr{width:100%;max-width:260px;border-radius:.8rem;border:1px solid #eee}
.c-pay-amount{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:1rem 0;text-align:center}
.c-pay-amount>div{background:var(--soft);border-radius:.8rem;padding:.55rem}
.c-pay-amount small{display:block;color:#8b7a7d;font-size:.72rem}.c-pay-amount strong{font-size:1.15rem;color:var(--coffee)}
.c-pay-note{display:flex;align-items:center;gap:.75rem;background:#fff4d6;border:2px solid #f0b429;color:#4a3200;border-radius:1rem;padding:.85rem 1rem;margin-bottom:1rem}
.c-pay-note>span{font-size:1.8rem;line-height:1}
.c-pay-note strong{display:block;font-size:1rem;line-height:1.3}
.c-pay-note small{display:block;font-size:.88rem;margin-top:.15rem;font-weight:600}
.c-confirm{position:fixed;inset:0;z-index:70;background:#1c0a0eaa;display:grid;place-items:center;padding:1rem}
.c-confirm-card{background:#fff;border-radius:1.3rem;padding:1.4rem;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 50px #0004}
.c-confirm-items{display:grid;gap:.5rem;max-height:40vh;overflow-y:auto}
.c-receipt{background:#fff;border-radius:1.1rem;padding:1.1rem 1.2rem;box-shadow:0 2px 12px #6b14240f;margin-top:1rem}

/* Customer order status */
.status-box{padding:1.5rem;border-radius:1rem;background:var(--soft);transition:background .4s}
.c-wa-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:52px;border-radius:999px;background:#25d366;color:#fff;font-weight:800;font-size:1rem;text-decoration:none;box-shadow:0 6px 16px #25d36655}
.c-wa-btn:hover,.c-wa-btn:active{background:#1ebe5b;color:#fff}
.c-pay-ways{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.c-pay-ways>div{background:var(--soft);border-radius:.8rem;padding:.6rem;text-align:center;font-weight:700;color:var(--coffee)}
.c-pay-ways span{display:block;font-size:1.4rem}.c-pay-ways small{display:block;font-weight:500;font-size:.7rem;color:#8b7a7d}
.status-awaiting{background:#fff4d6;border:2px solid #f0b429;color:#4a3200}
.c-await-amount{margin-top:.75rem;padding-top:.6rem;border-top:1px dashed #e0b84a;font-size:.95rem}
.c-await-amount strong{font-size:1.4rem;margin-left:.3rem}
.status-preparing{background:#fdf0d5}.status-ready{background:#d9f0df}.status-completed{background:#e8e8e8}.status-cancelled{background:#f7d9d9}
.flash{animation:flash 1s ease 2}@keyframes flash{50%{transform:scale(1.03)}}
.steps{display:flex;list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{flex:1;text-align:center;font-size:.8rem;color:#9a8a8d;position:relative;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;margin:0 auto .35rem;border-radius:50%;background:#e9dfe1;color:#7c6b6e;font-weight:600;position:relative;z-index:1}
.steps li+li::after{content:"";position:absolute;top:15px;right:50%;width:100%;height:3px;background:#e9dfe1}
.steps li.done{color:var(--coffee);font-weight:600}
.steps li.done::before,.steps li.done::after{background:var(--coffee);color:#fff}

/* Admin */
.shop-open{background:#e3f4e7}.shop-closed{background:#f9dfe2}
.status-badge-pending{background:#d63c52;color:#fff}.status-badge-accepted{background:#8a5cc4;color:#fff}.status-badge-preparing{background:#e0a100;color:#222}.status-badge-ready{background:#2e8b57;color:#fff}.status-badge-completed{background:#9aa0a6;color:#fff}.status-badge-cancelled{background:#555;color:#fff}
.status-pending-card{border-left:5px solid #d63c52!important}.status-accepted-card{border-left:5px solid #8a5cc4!important}.status-preparing-card{border-left:5px solid #e0a100!important}.status-ready-card{border-left:5px solid #2e8b57!important}

/* ---------- Line icons (icon() helper) ---------- */
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;stroke:currentColor}
.btn .ic{margin-right:.35em}.btn .ic:only-child{margin-right:0}
.a-top .btn{display:inline-flex;align-items:center}
.a-nav-link .ic{width:19px;height:19px;opacity:.85}
.a-nav-link.active .ic{opacity:1;stroke-width:2.1}
.a-toast>.ic{width:26px;height:26px}
@media (max-width:820px){.a-top .btn span{display:none}.a-top .btn .ic{margin-right:0;width:18px;height:18px}}
.c-ph{display:grid;place-items:center;color:#7c1a1959}
.c-ph .ic{width:1.1em;height:1.1em;stroke-width:1.3;vertical-align:0}
.c-wa-btn .ic,.a-wa .ic{width:1.1em;height:1.1em}
.a-dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;margin-right:.45em;vertical-align:.12em;background:#1f9d55;box-shadow:0 0 0 4px #1f9d5526}.shop-closed .a-dot{background:#c0392b;box-shadow:0 0 0 4px #c0392b26}
.c-pay-note>.ic{width:30px;height:30px;color:#b7791f}
.c-pay-ways .ic{display:block;margin:0 auto .25rem;width:24px;height:24px}
.c-myorder-icon .ic{width:24px;height:24px}
.c-pill{display:inline-flex;align-items:center;gap:.3rem}.c-pill .ic{width:15px;height:15px}
.item-icon .ic{color:var(--coffee);opacity:.55}