/*
 * Pico CSS v2.1.1 — local, scoped excerpts for lists, buttons, cards, dialog, tables and details.
 * Copyright 2019-2025 Pico (CSS distribution notice)
 * MIT License
 *
 * Copyright (c) 2019-2024 Pico
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

.wm {
  --pico-line-height: 1.6;
  --pico-font-weight: 400;
  --pico-spacing: 1rem;
  --pico-border-width: 1px;
  --pico-border-radius: 1rem;
  --pico-outline-width: 3px;
  --pico-transition: .18s ease-in-out;
  --pico-form-element-spacing-vertical: .7rem;
  --pico-form-element-spacing-horizontal: 1rem;
  --pico-primary: #ffad66;
  --pico-primary-background: #ffad66;
  --pico-primary-border: #ffad66;
  --pico-primary-hover-background: #ffc18c;
  --pico-primary-hover-border: #ffc18c;
  --pico-primary-inverse: #21180f;
  --pico-primary-focus: #ffad6655;
  --pico-color: #fff0df;
  --pico-muted-color: #b0bacb;
  --pico-table-border-color: #343d50;
  --pico-card-background-color: #1b2230;
  --pico-card-box-shadow: 0 8px 32px #0002;
  --pico-block-spacing-vertical: 1.2rem;
  --pico-block-spacing-horizontal: 1.2rem;
  --pico-accordion-close-summary-color: #fff0df;
  --pico-accordion-open-summary-color: #ffad66;
  --pico-accordion-active-summary-color: #ffad66;
  color: var(--pico-color);
  line-height: var(--pico-line-height);
  font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  min-width: 0;
}

/* Pico button essentials, scoped to site controls; the shared invite controls retain their styling. */
.wm :is(.wm-btn, .wm-qty-btn, .wm-category-btn) {
  --pico-background-color: var(--pico-primary-background);
  --pico-border-color: var(--pico-primary-border);
  --pico-button-color: var(--pico-primary-inverse);
  margin: 0;
  overflow: visible;
  -webkit-appearance: button;
  font-family: inherit;
  text-transform: none;
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  border: var(--pico-border-width) solid var(--pico-border-color);
  border-radius: var(--pico-border-radius);
  outline: none;
  background-color: var(--pico-background-color);
  box-shadow: 0 0 0 transparent;
  color: var(--pico-button-color);
  font-weight: 650;
  font-size: 1rem;
  line-height: var(--pico-line-height);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--pico-transition), border-color var(--pico-transition), box-shadow var(--pico-transition);
}
.wm :is(.wm-btn, .wm-qty-btn):is(:hover, :active) { --pico-background-color: var(--pico-primary-hover-background); }
.wm :is(.wm-btn, .wm-qty-btn, .wm-category-btn):focus-visible {
  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
  outline: 2px solid var(--pico-primary);
  outline-offset: 3px;
}
.wm button:disabled { opacity: .4; cursor: default; }
.wm .wm-btn { display: inline-block; min-height: 48px; }
.wm .wm-secondary { --pico-background-color: #252f41; --pico-border-color: #435069; --pico-button-color: #fff0df; }
.wm .wm-secondary:is(:hover, :active) { --pico-background-color: #354159; }

/* Pico card, list and table excerpts. */
.wm article {
  margin-bottom: var(--pico-block-spacing-vertical);
  padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
  border: 1px solid var(--pico-table-border-color);
  min-width: 0;
}
.wm :where(ul, ol) { padding-inline-start: var(--pico-spacing); }
.wm li { margin-bottom: calc(var(--pico-spacing) * .25); }
.wm :where(table) { width: 100%; border-collapse: collapse; border-spacing: 0; text-indent: 0; }
.wm :is(th, td) {
  padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
  border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
  color: var(--pico-color);
  font-weight: var(--pico-font-weight);
  text-align: start;
  vertical-align: top;
}
.wm th { font-weight: 650; }
.wm thead th { background: #252f41; white-space: nowrap; }
.wm caption { padding: .8rem 0; text-align: start; color: var(--pico-muted-color); font-size: .85rem; }

/* Pico details; CSS chevrons replace its image variable. */
.wm details { display: block; margin-bottom: var(--pico-spacing); }
.wm details summary {
  line-height: var(--pico-line-height);
  list-style-type: none;
  cursor: pointer;
  transition: color var(--pico-transition);
  color: var(--pico-accordion-close-summary-color);
  font-weight: 650;
}
.wm details summary::-webkit-details-marker { display: none; }
.wm details summary::marker { display: none; }
.wm details summary::after {
  display: block; width: .5rem; height: .5rem; margin: .45rem 3px 0 .75rem; float: right;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); content: ""; transition: transform var(--pico-transition);
}
.wm details summary:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: 5px; }
.wm details[open] > summary { margin-bottom: var(--pico-spacing); color: var(--pico-accordion-open-summary-color); }
.wm details[open] > summary::after { transform: rotate(225deg); }

/* Pico modal excerpt, adapted to a native dialog / bottom sheet. */
.wm dialog {
  display: flex; position: fixed; inset: 0; align-items: flex-end; justify-content: center;
  width: 100%; min-width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 1rem; border: 0; background: #080d18b8; color: var(--pico-color);
}
.wm dialog:not([open]) { display: none; }
.wm dialog::backdrop { background: #080d1880; }
.wm dialog > article {
  width: 100%; max-width: 640px; max-height: calc(100dvh - 2rem); overflow-y: auto;
  margin: 0; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
  border-radius: 1.25rem 1.25rem .6rem .6rem;
}

/* Site layout; every selector is confined to the waimai wrapper. */
.wm.wm-frame { max-width: 1180px; padding: 20px 16px; }
.wm.wm-static { max-width: 1180px; margin: auto; padding: 20px 16px; }
.wm [hidden] { display: none !important; }
.wm h1 { font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.2; margin: .5rem 0 1.25rem; letter-spacing: -.03em; }
.wm h2 { font-size: 1.2rem; line-height: 1.45; margin: 0 0 .75rem; }
.wm h3 { font-size: 1rem; line-height: 1.5; margin: 0 0 .25rem; }
.wm p { margin: .5rem 0; overflow-wrap: anywhere; }
.wm .wm-muted, .wm .wm-source, .wm .wm-privacy { color: var(--pico-muted-color); font-size: .85rem; }
.wm .wm-eyebrow { color: var(--pico-primary); font-size: .76rem; letter-spacing: .13em; }
.wm .wm-hero { position: relative; padding: 1.4rem 0 1.8rem; max-width: 820px; }
.wm .wm-opener { font-size: 1.08rem; line-height: 1.75; max-width: 720px; }
.wm .wm-hero .wm-muted { max-width: 740px; font-size: .95rem; }
.wm .wm-news { margin-top: 1.2rem; padding: .8rem 1rem; border-left: 2px solid #b27843; background: #ffad6609; color: #cbb9a9; font-size: .8rem; }
.wm .wm-order-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.wm .wm-menu-column { min-width: 0; }
.wm .wm-menu-header { padding: .3rem 0 .7rem; }
.wm .wm-menu-header h2 { margin-bottom: .25rem; }
.wm .wm-categories { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 1.5rem; }
.wm .wm-category-btn { --pico-background-color: #222c3e; --pico-border-color: #36445b; --pico-button-color: #ded9d3; padding: .5rem .85rem; border-radius: 999px; font-size: .82rem; min-height: 44px; }
.wm .wm-category-btn:hover { --pico-background-color: #36445b; }
.wm .wm-menu-category { scroll-margin-top: 20px; margin-bottom: 1.5rem; }
.wm .wm-menu-category > h2 { font-size: 1rem; color: #cdbdab; }
.wm .wm-menu-list { list-style: none; padding: 0; margin: 0; border: 1px solid #333e52; border-radius: 1rem; overflow: hidden; }
.wm .wm-menu-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 16px 12px; margin: 0; background: #1b2230; border-bottom: 1px solid #333e52; transition: background-color var(--pico-transition); }
.wm .wm-menu-item:last-child { border-bottom: 0; }
.wm .wm-menu-item.wm-selected { background: #282b31; }
.wm .wm-food-emoji { display: grid; place-items: center; width: 44px; height: 50px; font-size: 2rem; background: #ffffff06; border-radius: 10px; }
.wm .wm-food-info { min-width: 0; }
.wm .wm-food-info h3 { font-weight: 600; font-size: .91rem; }
.wm .wm-food-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: .75rem; color: #b0bacb; }
.wm .wm-food-meta b { color: #ffce9b; font-weight: 550; }
.wm .wm-badge { display: inline-block; padding: 2px 6px; border: 1px solid #596177; border-radius: 5px; font-size: .65rem; white-space: nowrap; color: #c9d0dd; }
.wm .wm-quantity { display: flex; align-items: center; gap: 4px; }
.wm .wm-quantity output { min-width: 1.4rem; text-align: center; font-size: .9rem; }
.wm .wm-qty-btn { padding: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 1.5rem; font-weight: 500; }
.wm .wm-qty-btn:not(.wm-add) { --pico-background-color: #252f41; --pico-border-color: #546179; --pico-button-color: #fff0df; }
.wm .wm-cart { position: fixed; left: 12px; right: 12px; bottom: calc(var(--wm-footer-space, 0px) + 10px + env(safe-area-inset-bottom)); z-index: 25;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  border: 1px solid #b27843; border-radius: 16px; padding: 12px; background: #222632; box-shadow: 0 -8px 36px #0006; }
.wm .wm-cart-heading, .wm .wm-cart-lines, .wm .wm-cart-note { display: none; }
.wm .wm-cart-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0 10px; font-size: .78rem; }
.wm .wm-cart-summary strong { font-size: 1.5rem; color: var(--pico-primary); }
.wm .wm-cart-summary > span { grid-column: 1 / -1; color: var(--pico-muted-color); }
.wm .wm-cart #wm-checkout { min-width: 100px; }
.wm .wm-content { margin-top: 2rem; }
.wm .wm-feedback { font-size: .8rem; color: #a8c9ba; min-height: 1.6em; }
.wm .wm-table-scroll { max-width: 100%; overflow-x: auto; }
.wm .wm-table-scroll table { min-width: 830px; font-size: .8rem; }
.wm .wm-table-scroll th:first-child { min-width: 150px; width: 22%; }
.wm .wm-table-scroll td:last-child { min-width: 330px; }
.wm .wm-components { padding-left: 1rem; margin: 0; }
.wm .wm-components li { font-size: .78rem; }
.wm .wm-faq-item { border-bottom: 1px solid #343d50; padding: .65rem 0; }
.wm .wm-faq-item:last-child { border-bottom: 0; }
.wm .wm-faq-item p { font-size: .9rem; color: #c9d0dd; }
.wm .wm-question { margin: 2rem 0; text-align: center; color: #ffce9b; font-size: 1.15rem; }
.wm #wm-sources { padding-bottom: 110px; }
.wm.wm-foot, .wm .wm-contact { color: #a6b0c2; font-size: .78rem; }
.wm.wm-foot { max-width: 1180px; padding-bottom: 120px; }
.wm .wm-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 1rem; }
.wm .wm-sheet-header h2 { margin: 0; }
.wm .wm-close { font-size: .78rem; min-height: 44px; padding: .5rem .7rem; flex-shrink: 0; }
.wm .wm-receipt-lines { list-style: none; padding: 0; margin: 1rem 0; }
.wm .wm-receipt-lines li { padding: .75rem 0; border-bottom: 1px dashed #4b4c56; font-size: .88rem; }
.wm .wm-receipt-lines li > span { display: block; }
.wm .wm-payment-notice { padding: 1rem; border: 2px solid #ffad66; border-radius: 12px; color: #ffce9b; font-weight: 750; font-size: 1.05rem; }
.wm .wm-checkout-total { font-weight: 700; }
.wm .wm-pay { width: 100%; margin-top: 1rem; }
.wm .wm-result-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; scroll-margin-top: 20px; }
.wm .wm-receipt { border-top: 3px solid #ffad66; }
.wm #wm-result-title { font-size: 1.15rem; margin-top: 1rem; }
.wm #wm-result-title > strong { display: block; font-size: clamp(2.8rem, 8vw, 4rem); line-height: 1.25; color: #ffad66; letter-spacing: -.03em; }
.wm .wm-saved-kcal { display: block; font-size: 1.55rem; margin-top: .6rem; }
.wm .wm-equivalent { color: #c6cfdf; font-size: .85rem; padding: .8rem; background: #ffffff05; border-radius: 10px; }
.wm .wm-time { color: #b0bacb; font-size: .78rem; }
.wm .wm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 1rem 0; }
.wm .wm-actions > button { flex: 1; white-space: nowrap; font-size: .88rem; }
.wm .wm-receipt .okx-ad { margin-top: 1.3rem; }
.wm .wm-rider { align-self: start; }
.wm .wm-road { position: relative; height: 145px; overflow: hidden; margin: 1rem 0; border-radius: 12px; background: linear-gradient(#17243b 0 78%, #344053 78% 100%); }
.wm .wm-road::after { content: ""; position: absolute; inset: auto 0 12px; height: 3px; background: repeating-linear-gradient(90deg, #ffe4c480 0 20px, transparent 20px 42px); animation: wm-road 2s linear infinite; }
.wm .wm-scooter { position: absolute; width: 135px; bottom: 16px; left: 5%; animation: wm-ride 12s ease-in-out infinite; z-index: 1; }
.wm .wm-scooter svg { display: block; width: 100%; height: auto; }
.wm .wm-moon { position: absolute; top: 4px; right: 20px; color: #ffce9b; font-size: 2.7rem; }
.wm .wm-road-end { position: absolute; right: 12px; bottom: 35px; font-size: .75rem; color: #b0bacb; }
.wm .wm-meter { display: flex; align-items: center; gap: 12px; }
.wm .wm-meter progress { appearance: none; display: block; width: 100%; height: 7px; border: 0; border-radius: 999px; background: #354159; color: #ffad66; }
.wm .wm-meter progress::-webkit-progress-bar { background: #354159; border-radius: 999px; }
.wm .wm-meter progress::-webkit-progress-value { background: #ffad66; border-radius: 999px; }
.wm .wm-meter progress::-moz-progress-bar { background: #ffad66; border-radius: 999px; }
.wm .wm-meter b { font-size: .8rem; min-width: 3rem; color: #ffad66; }
.wm .wm-rider-status { padding: .75rem 0; font-size: .95rem; min-height: 4.5em; }
.wm .wm-timeline { padding: 0; margin: .5rem 0 1.25rem; list-style: none; }
.wm .wm-timeline li { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: 8px; padding: .5rem 0; color: #b0bacb; font-size: .78rem; border-top: 1px solid #343d50; }
.wm .wm-timeline time { color: #8cb9a8; }
.wm #wm-call, .wm #wm-again { width: 100%; margin-top: .65rem; }
.wm .wm-call { padding: 1rem; margin-top: .75rem; background: #252f41; border-radius: 12px; font-size: .85rem; }
.wm .wm-copy-fallback { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; padding: 12px; background: #252f41; border-radius: 8px; }
.wm .wm-poster-image { display: block; width: 100%; height: auto; margin: 1rem 0; }
.wm #wm-download { width: 100%; }

@keyframes wm-ride { 0%, 100% { left: 5%; transform: translateY(0); } 48% { left: calc(100% - 170px); transform: translateY(-2px); } 52% { transform: translateY(1px); } }
@keyframes wm-road { to { background-position: -84px 0; } }
@media (max-width: 420px) {
  .wm { --pico-block-spacing-horizontal: 1rem; }
  .wm .wm-menu-item { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
  .wm .wm-quantity { grid-column: 2; justify-self: end; margin-top: 4px; }
  .wm .wm-food-emoji { width: 40px; }
}
@media (min-width: 900px) {
  .wm.wm-frame, .wm.wm-static { padding: 24px 32px; }
  .wm .wm-order-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .wm .wm-cart { position: sticky; inset: auto; top: 24px; z-index: 5; align-self: start; display: block; padding: 24px; }
  .wm .wm-cart-heading { display: flex; justify-content: space-between; align-items: baseline; }
  .wm .wm-cart-heading h2 { font-size: 1rem; }
  .wm .wm-cart-lines { display: block; list-style: none; padding: 0; max-height: 45vh; overflow: auto; }
  .wm .wm-cart-lines li { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; padding: .7rem 0; border-bottom: 1px solid #435069; }
  .wm .wm-cart-lines li b { white-space: nowrap; color: #ffce9b; }
  .wm .wm-cart-summary { margin: 1.2rem 0; font-size: .85rem; }
  .wm .wm-cart #wm-checkout { width: 100%; }
  .wm .wm-cart-note { display: block; font-size: .75rem; color: #b0bacb; text-align: center; margin-top: .7rem; }
  .wm .wm-result-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; }
  .wm .wm-rider { position: sticky; top: 24px; }
  .wm dialog { align-items: center; }
  .wm dialog > article { border-radius: 1.25rem; }
  .wm #wm-sources { padding-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .wm { --pico-transition: none; }
  .wm .wm-scooter, .wm .wm-road::after { animation: none; }
}