/* Ordering on the Oodles Wok site. Tailwind's compiled classes (copied from the live site) do the
   layout; this adds what the live site has no equivalent for: prices, the basket and checkout. */
:root { --ow-red: #FF2D2D; --ow-bg: #0B0B0D; --ow-panel: #111113; --ow-line: #222; --ow-mute: #B7B7B7; --ow-ok: #8FA97A; }
html.ow-lock { overflow: hidden; }

/* Header: the Our Food panel opens on hover, as on the live site. */
nav > div.absolute.ow-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
.ow-mobile-cats { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-top: .5rem; }
.ow-mobile-cats[hidden] { display: none; }
.ow-mobile-cats a { color: rgba(255,255,255,.75); font-size: 1.05rem; font-weight: 500; }

.ow-loading, .ow-empty { color: var(--ow-mute); text-align: center; padding: 3rem 0; }
.ow-notice { padding: .9rem 1.25rem; border-radius: 14px; border: 1px solid var(--ow-line); background: var(--ow-panel); color: #fff; font-size: .95rem; }
.ow-notice.good { border-color: var(--ow-ok); }
.ow-notice.bad { border-color: var(--ow-red); }
.ow-notice[hidden] { display: none; }
#ow-root { position: relative; z-index: 90; }
#ow-root .ow-notice { position: fixed; z-index: 99; top: 5.5rem; left: 1rem; right: 1rem; max-width: 720px; margin-inline: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* Cards: price and the add button under the title. */
.ow-pic { cursor: pointer; }
.ow-noimg { width: 55%; opacity: .18; filter: grayscale(1); }
.ow-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; }
.ow-price { color: #fff; font-weight: 700; font-size: .95rem; white-space: nowrap; }
.ow-add { border: 0; cursor: pointer; background: var(--ow-red); color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: .5rem .95rem; border-radius: 999px; transition: background .2s, transform .15s; }
.ow-add:hover { background: #ff4a4a; }
.ow-add:active { transform: scale(.96); }
.ow-add:disabled { background: #2a2a2a; color: #777; cursor: not-allowed; }
.ow-out { opacity: .55; }
@media (min-width: 640px) { .ow-price { font-size: 1.05rem; } .ow-add { font-size: .78rem; padding: .6rem 1.2rem; } }

/* Floating basket bar */
.ow-bar { position: fixed; z-index: 95; left: 50%; bottom: 1rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .6rem; box-shadow: 0 14px 40px rgba(255,45,45,.35); max-width: calc(100vw - 2rem); white-space: nowrap; cursor: pointer; border: 0; }
.ow-bar[hidden] { display: none; }
.ow-toast { position: fixed; z-index: 96; left: 50%; bottom: 5.5rem; transform: translate(-50%, 10px); background: #1c1c1e; color: #fff; border: 1px solid var(--ow-line); padding: .6rem 1.1rem; border-radius: 999px; font-size: .85rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 2rem); }
.ow-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Basket drawer */
.ow-scrim { position: fixed; inset: 0; z-index: 97; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .25s; }
.ow-scrim.on { opacity: 1; pointer-events: auto; }
.ow-basket { position: fixed; z-index: 98; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--ow-bg); border-left: 1px solid var(--ow-line); transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s; display: flex; flex-direction: column; color: #fff; }
.ow-basket.open { transform: none; visibility: visible; transition: transform .3s ease; }
.ow-basket-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--ow-line); }
.ow-basket-head h2 { font-family: var(--font-montserrat), sans-serif; font-weight: 900; text-transform: uppercase; font-size: 1.35rem; margin: 0; outline: 0; }
#ow-basket-body { overflow-y: auto; padding: 1rem 1.25rem 2rem; flex: 1; }
.ow-x { background: none; border: 0; color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: .2rem .5rem; }
.ow-lines { display: grid; gap: .9rem; }
.ow-line { border-bottom: 1px solid var(--ow-line); padding-bottom: .9rem; }
.ow-line-top { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.ow-sub { color: var(--ow-mute); font-size: .85rem; margin: .2rem 0 0; }
.ow-sub.ok { color: var(--ow-ok); }
.ow-sub.bad { color: #ff7a7a; }
.ow-line-bot { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; }
.ow-qty { display: inline-flex; align-items: center; gap: .6rem; background: #161618; border: 1px solid var(--ow-line); border-radius: 999px; padding: .15rem; }
.ow-qty button { width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: #232326; color: #fff; font-size: 1.1rem; cursor: pointer; }
.ow-qty output { min-width: 1.4rem; text-align: center; font-weight: 700; }
.ow-rm { background: none; border: 0; color: var(--ow-mute); text-decoration: underline; cursor: pointer; font-size: .85rem; }
.ow-totals { margin: 1rem 0; display: grid; gap: .35rem; color: var(--ow-mute); }
.ow-totals > div { display: flex; justify-content: space-between; }
.ow-totals .ow-grand { color: #fff; font-weight: 800; font-size: 1.15rem; border-top: 1px solid var(--ow-line); padding-top: .6rem; margin-top: .3rem; }
.ow-hint { background: rgba(255,45,45,.08); border: 1px solid rgba(255,45,45,.3); border-radius: 12px; padding: .6rem .8rem; font-size: .88rem; margin: 0 0 1rem; }

/* Checkout */
#ow-checkout { display: grid; gap: .9rem; }
.ow-fulfil { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ow-fulfil label { position: relative; }
.ow-fulfil input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ow-fulfil span { display: block; text-align: center; padding: .7rem; border-radius: 999px; border: 1px solid var(--ow-line); background: #141414; color: var(--ow-mute); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.ow-fulfil input:checked + span { background: var(--ow-red); border-color: var(--ow-red); color: #fff; }
.ow-fulfil input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.ow-field { display: grid; gap: .3rem; font-size: .85rem; color: var(--ow-mute); }
.ow-field input, .ow-field select, .ow-field textarea { width: 100%; background: #141416; color: #fff; border: 1px solid #2a2a2e; border-radius: 12px; padding: .7rem .85rem; font: inherit; font-size: 1rem; }
.ow-field input:focus, .ow-field select:focus, .ow-field textarea:focus { outline: 2px solid var(--ow-red); outline-offset: 0; border-color: transparent; }
.ow-field textarea { min-height: 4.2rem; resize: vertical; }
.ow-row2 { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: end; }
.ow-ghost { background: #1b1b1e; color: #fff; border: 1px solid #333; border-radius: 12px; padding: .75rem 1.1rem; cursor: pointer; font-weight: 600; }
.ow-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ow-pay { color: var(--ow-mute); font-size: .85rem; margin: 0; }
.ow-err { color: #ff7a7a; margin: 0; min-height: 1.2em; font-size: .9rem; }
.ow-place, .ow-confirm { width: 100%; justify-content: center; cursor: pointer; border: 0; }
.ow-place:disabled { opacity: .5; cursor: not-allowed; }
.ow-done { text-align: center; padding: 2rem 0; display: grid; gap: .8rem; }
.ow-done h3 { font-family: var(--font-montserrat), sans-serif; font-weight: 900; text-transform: uppercase; font-size: 1.6rem; margin: 0; }
.ow-big { font-size: 2.6rem; font-weight: 900; color: var(--ow-red); margin: 0; }

/* Options dialog */
.ow-opt { border: 1px solid var(--ow-line); border-radius: 24px; background: var(--ow-bg); color: #fff; padding: 0; width: min(560px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow: hidden; }
.ow-opt::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(3px); }
.ow-opt-in { position: relative; padding: 1.5rem 1.25rem 1rem; max-height: calc(100dvh - 1.5rem); overflow-y: auto; }
.ow-opt-in h2 { font-family: var(--font-montserrat), sans-serif; font-weight: 900; text-transform: uppercase; font-size: 1.4rem; margin: 0 2rem .3rem 0; line-height: 1.05; }
.ow-opt-in h3 { margin: 1.3rem 0 .6rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ow-red); display: flex; gap: .5rem; align-items: center; }
.ow-opt-in .ow-x { position: absolute; top: .6rem; right: .6rem; }
.ow-count { color: var(--ow-mute); letter-spacing: 0; text-transform: none; font-weight: 600; }
.ow-count.full { color: var(--ow-ok); }
.ow-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 420px) { .ow-chips { grid-template-columns: 1fr; } }
.ow-chips label { position: relative; }
.ow-chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ow-chips .ow-choice-name { display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: .7rem .85rem; border-radius: 14px; border: 1px solid var(--ow-line); background: #141416; font-size: .92rem; min-height: 3rem; }
.ow-chips input:checked + .ow-choice-name { border-color: var(--ow-red); background: rgba(255,45,45,.12); }
.ow-chips input:focus-visible + .ow-choice-name { outline: 2px solid #fff; }
.ow-choice-name small { color: var(--ow-mute); font-size: .78rem; white-space: nowrap; margin-left: auto; }
.ow-v { font-style: normal; width: 15px; height: 15px; border-radius: 50%; background: var(--ow-ok); color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-left: .35rem; }
.ow-steppers { display: grid; gap: .45rem; }
.ow-step { display: grid; grid-template-columns: 1fr auto 1.6rem auto; align-items: center; gap: .5rem; padding: .45rem .5rem .45rem .85rem; border-radius: 14px; border: 1px solid var(--ow-line); background: #141416; font-size: .92rem; }
.ow-step button { width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: #2a2a2e; color: #fff; font-size: 1.1rem; cursor: pointer; }
.ow-step button:disabled { opacity: .35; cursor: default; }
.ow-step output { text-align: center; font-weight: 700; }
.ow-opt-foot { position: sticky; bottom: -1rem; background: var(--ow-bg); display: flex; gap: .8rem; align-items: center; padding: 1rem 0 .25rem; margin-top: 1rem; border-top: 1px solid var(--ow-line); }
.ow-opt-foot .ow-confirm { flex: 1; }

@media (min-width: 1024px) { .ow-bar { bottom: 1.5rem; } }
body.ow-has-bar #footer { padding-bottom: 6rem; }
@media (prefers-reduced-motion: reduce) { .ow-basket, .ow-scrim, .ow-toast, .ow-add { transition: none; } }

/* Find Us map pins, the offers viewer and notes under forms */
.leaflet-container { background: #141414; font-family: inherit; }
.oodles-pin svg { display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); transition: transform .2s; transform-origin: 50% 100%; }
.oodles-pin-on svg, .oodles-pin:hover svg { transform: scale(1.18); }
.oodles-pin-on { z-index: 9999 !important; }
.ow-zoom { border: 0; background: transparent; padding: 0; max-width: 96vw; max-height: 96dvh; overflow: visible; }
.ow-zoom::backdrop { background: rgba(0,0,0,.85); }
.ow-zoom img { display: block; max-width: 96vw; max-height: 92dvh; border-radius: 12px; }
.ow-zoom .ow-x { position: absolute; top: -.2rem; right: .4rem; z-index: 2; background: rgba(0,0,0,.6); border-radius: 50%; width: 2.4rem; height: 2.4rem; }
.ow-form-note { margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; border: 1px solid #333; background: #141416; color: #B7B7B7; font-size: .9rem; }
.ow-form-note a { color: #fff; text-decoration: underline; }

/* Branch picker */
.ow-pick-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; max-height: 46dvh; overflow-y: auto; }
.ow-branch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .85rem; border-radius: 14px; border: 1px solid var(--ow-line); background: #141416; }
.ow-branch.on { border-color: var(--ow-red); background: rgba(255,45,45,.1); }
.ow-branch strong { display: block; font-size: .95rem; }
.ow-branch .ow-ghost { padding: .5rem .8rem; font-size: .8rem; white-space: nowrap; text-decoration: none; }

/* ---------- Payment return page (/order/) ---------- */
.ow-complete-wrap { min-height: 100vh; display: grid; place-items: center; padding: 8rem 1rem 4rem; background: #0B0B0D; }
.ow-complete { width: 100%; max-width: 560px; }
.ow-complete-card { background: var(--ow-panel); border: 1px solid var(--ow-line); border-radius: 24px; padding: 2.5rem 1.5rem; color: #fff; }
.ow-complete-card.good { border-color: var(--ow-ok); }
.ow-complete-card.bad { border-color: var(--ow-red); }
.ow-complete-title { font-family: var(--font-montserrat), sans-serif; font-weight: 900; text-transform: uppercase; font-size: 1.8rem; margin: 0; }
.ow-tick { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; font-weight: 900; background: var(--ow-ok); color: #0B0B0D; }
.ow-test { color: #ffd166; }
.ow-complete-card .ow-place { display: inline-block; margin-top: .6rem; text-decoration: none; }

/* ---------- One long menu with pinned tabs ---------- */
.ow-sec { scroll-margin-top: 9.5rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.ow-sec:last-child { margin-bottom: 0; }
@media (min-width: 1024px) { .ow-sec { scroll-margin-top: 10.5rem; } }

/* ---------- Chevrons on the category tab bar ---------- */
.ow-tabhost { position: relative; }
.ow-chev { position: absolute; top: 0; bottom: 0; width: 3.4rem; display: flex; align-items: center; border: 0; padding: 0 .35rem; color: #fff; cursor: pointer; font-size: 2rem; line-height: 1; z-index: 2; }
.ow-chev[hidden] { display: none; }
.ow-chev.left { left: 0; justify-content: flex-start; background: linear-gradient(90deg, #0B0B0D 45%, rgba(11,11,13,0)); }
.ow-chev.right { right: 0; justify-content: flex-end; background: linear-gradient(270deg, #0B0B0D 45%, rgba(11,11,13,0)); }
.ow-chev span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #FF2D2D; font-weight: 700; padding-bottom: .2rem; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
@media (min-width: 1024px) { .ow-chev { width: 4rem; } }