/* ============================================================
   WhatsOrder — shared ordering chrome (cart, add-ons, toast)
   Neutral by default; every restaurant re-themes it with these
   custom properties on :root —

     --wo-bg        panel background
     --wo-fg        panel text
     --wo-muted     secondary text
     --wo-line      hairline / border colour
     --wo-accent    buttons, badges, active states
     --wo-on-accent text on top of --wo-accent
     --wo-radius    corner radius (0 for square designs)
     --wo-font      panel font stack
   ============================================================ */
:root {
  --wo-bg: #ffffff;
  --wo-fg: #1b1b1b;
  --wo-muted: #7a7a7a;
  --wo-line: rgba(0, 0, 0, .12);
  --wo-accent: #128c7e;
  --wo-on-accent: #ffffff;
  --wo-radius: 10px;
  --wo-font: inherit;
}

.wo-locked { overflow: hidden; }

/* ── per-item controls ─────────────────────────────────────── */
.wo-controls { display: grid; gap: 8px; margin-top: auto; padding-top: 12px; font-family: var(--wo-font); }
.wo-qty {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--wo-line); border-radius: var(--wo-radius); padding: 2px 4px;
}
.wo-qty button {
  width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: inherit; border-radius: var(--wo-radius);
}
.wo-qty button:hover { background: var(--wo-line); }
.wo-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.wo-addon, .wo-add {
  border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px;
  padding: 10px 14px; border-radius: var(--wo-radius); transition: filter .15s, background .15s;
}
.wo-addon { background: none; border: 1px solid var(--wo-accent); color: var(--wo-accent); }
.wo-addon:hover { background: var(--wo-accent); color: var(--wo-on-accent); }
.wo-add { background: var(--wo-accent); color: var(--wo-on-accent); }
.wo-add:hover { filter: brightness(1.12); }
.wo-add:active { transform: scale(.98); }

/* ── floating cart button ──────────────────────────────────── */
.wo-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 58px; height: 58px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--wo-accent); color: var(--wo-on-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28); transition: transform .18s;
}
.wo-fab:hover { transform: scale(1.07); }
.wo-fab svg { width: 25px; height: 25px; }
.wo-fab-count {
  position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: #e0342c; color: #fff;
  font: 700 12px/22px system-ui, sans-serif; text-align: center;
}
.wo-fab-count[hidden] { display: none; }
.wo-locked .wo-fab { display: none; }

/* ── drawer ────────────────────────────────────────────────── */
.wo-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 950; display: none; }
.wo-backdrop.is-open { display: block; }
.wo-drawer {
  position: fixed; top: 0; right: 0; z-index: 960;
  width: min(410px, 100vw); height: 100%; display: flex; flex-direction: column;
  background: var(--wo-bg); color: var(--wo-fg); font-family: var(--wo-font);
  transform: translateX(105%); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -12px 0 40px rgba(0, 0, 0, .25);
}
.wo-drawer.is-open { transform: none; }
.wo-drawer-head, .wo-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--wo-line);
}
.wo-drawer-head h3 { margin: 0; font-size: 18px; }
.wo-close {
  border: 0; background: none; cursor: pointer; color: var(--wo-muted);
  font-size: 18px; line-height: 1; padding: 4px 6px;
}
.wo-close:hover { color: var(--wo-fg); }

.wo-lines { flex: 1; overflow-y: auto; padding: 8px 20px; }
.wo-empty { color: var(--wo-muted); font-size: 14px; padding: 28px 0; text-align: center; }
.wo-line { padding: 12px 0; border-bottom: 1px dashed var(--wo-line); }
.wo-line-main { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.wo-line-name { font-weight: 600; }
.wo-line-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wo-line-addons { font-size: 12.5px; color: var(--wo-muted); margin-top: 2px; }
.wo-line-qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; }
.wo-line-qty button {
  width: 26px; height: 26px; border: 1px solid var(--wo-line); border-radius: 50%;
  background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1;
}
.wo-line-qty button:hover { background: var(--wo-line); }
.wo-line-del {
  width: auto !important; border-radius: var(--wo-radius) !important;
  padding: 0 10px; margin-left: auto; font-size: 12px !important; color: var(--wo-muted);
}

.wo-fields { display: grid; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--wo-line); }
.wo-fields input, .wo-fields select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  color: inherit; background: transparent;
  border: 1px solid var(--wo-line); border-radius: var(--wo-radius);
}
.wo-fields input:focus, .wo-fields select:focus { outline: 2px solid var(--wo-accent); outline-offset: -1px; }
.wo-fields option { color: #1b1b1b; }

.wo-drawer-foot { padding: 14px 20px 18px; border-top: 1px solid var(--wo-line); display: grid; gap: 9px; }
.wo-total { display: flex; justify-content: space-between; font-size: 16px; }
.wo-total strong { font-variant-numeric: tabular-nums; }
.wo-copy, .wo-send {
  display: block; text-align: center; text-decoration: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 15px; padding: 12px; border-radius: var(--wo-radius);
}
.wo-copy { border: 1px solid var(--wo-line); background: none; color: inherit; }
.wo-copy:hover { background: var(--wo-line); }
.wo-send { border: 0; background: #25d366; color: #08331d; }
.wo-send:hover { filter: brightness(1.06); }
.wo-demo { margin: 0; text-align: center; font-size: 11.5px; color: var(--wo-muted); }

/* ── add-on modal ──────────────────────────────────────────── */
.wo-modal {
  position: fixed; inset: 0; z-index: 970; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, .55);
}
.wo-modal.is-open { display: flex; }
.wo-modal-box {
  width: min(400px, 100%); max-height: 84vh; display: flex; flex-direction: column;
  background: var(--wo-bg); color: var(--wo-fg); font-family: var(--wo-font);
  border-radius: var(--wo-radius); overflow: hidden;
}
.wo-modal-head h4 { margin: 0; font-size: 16px; }
.wo-addon-list { flex: 1; overflow-y: auto; padding: 6px 20px; }
.wo-addon-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--wo-line); font-size: 14.5px; cursor: pointer;
}
.wo-addon-row:last-child { border-bottom: 0; }
.wo-addon-row input { width: 18px; height: 18px; accent-color: var(--wo-accent); }
.wo-addon-row span { flex: 1; }
.wo-addon-row em { font-style: normal; color: var(--wo-muted); font-size: 13px; }
.wo-modal-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 14px 20px 18px; border-top: 1px solid var(--wo-line); }
.wo-cancel, .wo-confirm {
  border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 15px;
  padding: 11px; border-radius: var(--wo-radius);
}
.wo-cancel { border: 1px solid var(--wo-line); background: none; color: inherit; }
.wo-confirm { background: var(--wo-accent); color: var(--wo-on-accent); }

/* ── toast ─────────────────────────────────────────────────── */
.wo-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 980;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 11px 20px; border-radius: 999px; font-size: 14px; font-family: var(--wo-font);
  background: rgba(20, 20, 20, .93); color: #fff; transition: opacity .25s, transform .25s;
}
.wo-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── language switch (host styles the container) ───────────── */
[data-lang-btn] { cursor: pointer; font: inherit; background: none; border: 0; color: inherit; opacity: .5; }
[data-lang-btn].is-active { opacity: 1; font-weight: 700; }

@media (max-width: 520px) {
  .wo-drawer { width: 100vw; }
  .wo-fab { right: 14px; bottom: 14px; }
}