/* Takeaway Pacific · front door styles: the choice sheet for sizes and extras (js/front/menu-3.js, step 77). */
.mopt-sheet{position:fixed;inset:0;z-index:8000;display:flex;align-items:flex-end;justify-content:center;background:rgba(15,23,42,0);transition:background .3s ease,-webkit-backdrop-filter .3s,backdrop-filter .3s}
.mopt-sheet.on{background:rgba(15,23,42,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mopt-box{position:relative;box-sizing:border-box;width:100%;max-width:430px;max-height:88svh;display:flex;flex-direction:column;padding:10px 16px 0;border-radius:26px 26px 0 0;background:#fff;color:var(--midnight);transform:translateY(105%);transition:transform .38s cubic-bezier(.4,0,.2,1);box-shadow:0 -18px 40px -18px rgba(15,23,42,.45)}
.mopt-sheet.on .mopt-box{transition:transform .46s cubic-bezier(.3,1.25,.5,1)}
.mopt-sheet.on .mopt-box{transform:none}
.mopt-grab{display:block;width:40px;height:5px;margin:0 auto 10px;border-radius:99px;background:var(--line)}
.mopt-x{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ivory);box-shadow:inset 0 0 0 1px var(--line)}
.mopt-x .ic{width:18px;height:18px}
.mopt-box h2{margin:0 48px 0 0;font:800 22px/1.2 var(--serif);letter-spacing:-.02em}
.mopt-d{margin:4px 0 0;font-size:14px;color:var(--ink-2)}
.mopt-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 0 12px}
.mopt-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:16px 0 8px}
.mopt-h b{font:800 16px/1.2 var(--sans)}
.mopt-h small{font:800 11.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--coral)}
.mopt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mopt-ch{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;row-gap:1px;align-items:center;align-content:center;min-height:58px;padding:8px 12px 8px 10px;border-radius:16px;background:var(--ivory);box-shadow:inset 0 0 0 1.5px var(--line),0 3px 0 var(--line);font:700 14.5px/1.2 var(--sans);color:var(--midnight);text-align:left;transition:background .2s var(--out),color .2s var(--out),box-shadow .2s var(--out),opacity .2s var(--out),transform .16s var(--out)}
.mopt-ch span{grid-column:2;min-width:0;overflow-wrap:break-word;hyphens:auto;line-height:1.2}
.mopt-ch b{grid-column:2;font-size:12.5px;font-weight:700;color:var(--ink-3);transition:color .2s var(--out)}
.mopt-tick{grid-row:1 / span 2;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background .2s var(--out),box-shadow .2s var(--out)}
.mopt-tick .ic{width:13px;height:13px;stroke-width:3;color:#fff;opacity:0;transform:scale(.4);transition:opacity .18s var(--out),transform .3s cubic-bezier(.3,1.6,.5,1)}
.mopt-ch[aria-pressed="true"]{background:var(--midnight);color:#fff;box-shadow:inset 0 0 0 1.5px var(--midnight),0 4px 0 #020617}
.mopt-ch[aria-pressed="true"] b{color:#CBD5E1}
.mopt-ch[aria-pressed="true"] .mopt-tick{background:var(--coral);box-shadow:none}
.mopt-ch[aria-pressed="true"] .mopt-tick .ic{opacity:1;transform:none}
.mopt-ch:active{transform:translateY(2px);box-shadow:inset 0 0 0 1.5px var(--line),0 1px 0 var(--line)}
.mopt-ch[aria-pressed="true"]:active{box-shadow:inset 0 0 0 1.5px var(--midnight),0 1px 0 #020617}
.mopt-ch.full{opacity:.5}
/* opening: each part rises in turn */
.mopt-sheet.on .mopt-part,.mopt-sheet.on .mopt-box>h2,.mopt-sheet.on .mopt-d{animation:moUp .42s cubic-bezier(.2,1,.3,1) both;animation-delay:calc(80ms + var(--i,0) * 55ms)}
@keyframes moUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mopt-note{box-sizing:border-box;width:100%;min-height:48px;margin-top:16px;padding:10px 14px;border:1.5px solid var(--line);border-radius:14px;font:500 15px var(--sans);color:inherit;background:#fff}
.mopt-note:focus{outline:none;border-color:var(--midnight)}
.mopt-bar{display:flex;align-items:center;gap:10px;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.mopt-add{flex:1;min-height:54px;transition:background .2s var(--out),box-shadow .2s var(--out),transform 160ms var(--out)}
.mopt-add:disabled{background:#94A3B8;box-shadow:0 4px 0 #64748B}
.rrow.ropts{align-items:flex-start}
.rdish{display:grid;gap:5px;min-width:0}
.rdish>b{line-height:1.2}
.ropt{display:flex;flex-wrap:wrap;gap:4px}
.ropt i{font-style:normal;font:700 12px/1 var(--sans);padding:5px 8px;border-radius:99px;background:var(--ivory);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);animation:moUp .3s cubic-bezier(.2,1,.3,1) both}
.rnote{display:block;padding:6px 10px 6px 26px;border-radius:10px;background:#FEF3C7;color:#78350F;font:600 13px/1.3 var(--sans);position:relative;overflow-wrap:anywhere}
.rnote::before{content:'✎';position:absolute;left:9px;top:5px;font-size:13px}
@media (prefers-reduced-motion:reduce){.mopt-sheet,.mopt-box,.mopt-sheet.on .mopt-box,.mopt-ch,.mopt-tick,.mopt-tick .ic,.mopt-add{transition:none}.mopt-sheet.on .mopt-part,.mopt-sheet.on .mopt-box>h2,.mopt-sheet.on .mopt-d,.ropt i{animation:none}}
/* shop packs (step 99): one a row, with the description and the price for one under the name; units on item cards */
.mopt-grid.one{grid-template-columns:minmax(0,1fr)}
.mopt-ch .mopt-sub{grid-column:2;font-size:12px;font-weight:600;color:var(--ink-3);line-height:1.25}
.mopt-ch[aria-pressed="true"] .mopt-sub{color:#CBD5E1}
.utag{padding:3px 7px;border-radius:7px;background:var(--ivory,#F8FAFC);box-shadow:inset 0 0 0 1px var(--line,#E2E8F0);color:var(--ink-3,#64748B);font:700 11.5px/1.2 var(--sans)}