/* The customer's side of the counter.
 *
 * Its own stylesheet rather than the Hub's: this page is read on a phone by
 * somebody standing in a kitchen, and it should carry a few kilobytes, not the
 * whole dashboard's styling. Light only -- a price list is read like paper. */

:root {
  --ink: #1d2422;
  --muted: #667471;
  --line: #e2e8e5;
  --panel: #ffffff;
  --page: #f6f8f7;
  --brand: #14614a;
  --brand-ink: #ffffff;
  --shadow: 0 1px 2px rgba(16, 32, 28, 0.06), 0 8px 24px rgba(16, 32, 28, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 120px;
  background: var(--page);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, "Noto Sans Thai", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

.masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  background: var(--brand);
  color: var(--brand-ink);
}

.masthead img { width: 40px; height: 40px; border-radius: 10px; background: #fff; padding: 4px; }
.masthead h1 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.masthead p { margin: 2px 0 0; font-size: 13px; opacity: 0.85; }

/* The bar is brand green, and the page's own buttons are brand green too, so a
   plain button here reads as white lettering floating on the bar with nothing
   to say it can be pressed. The actions on the bar are outlined instead, and
   the language you are reading is the one filled in. */
.masthead > div:nth-of-type(1) { min-width: 0; }

.masthead-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.language-picker { display: flex; gap: 6px; }

.masthead-action,
.language-chip {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: transparent;
  color: var(--brand-ink);
  font-size: 14px;
  font-weight: 700;
}

.language-chip.is-on {
  background: var(--brand-ink);
  color: var(--brand);
  border-color: var(--brand-ink);
}

main { max-width: 900px; margin: 0 auto; padding: 16px; }

/* Each question in its own block. Run together in one panel they read as one
   long form, and a chef looking for "where do I say ribeye" had to find the
   label among the controls of the question before it. */
.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.filters .field {
  gap: 8px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  align-content: start;
}

.filters .field > label {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.filters #clearFilters {
  align-self: stretch;
  min-height: 56px;
}

.field { display: grid; gap: 4px; min-width: 0; }
.field.chips { grid-column: span 2; }

@media (max-width: 620px) {
  .field.chips { grid-column: span 1; }
}

/* Tap targets, not a multi-select list: several can be on at once and the
   choice is visible without opening anything. */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.chip.is-on { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); }
.range-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.range-pair span { color: var(--muted); font-size: 13px; font-weight: 700; }

@media (max-width: 520px) {
  .field.range { grid-column: span 1; }
}
.field label { color: var(--muted); font-size: 12px; font-weight: 700; }
.field label span { font-weight: 400; }

select,
input,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  /* 16px so iOS does not zoom the page when a field takes focus. */
  font: inherit;
  font-size: 16px;
}

textarea { min-height: 64px; resize: vertical; }

button {
  min-height: 44px;
  padding: 11px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: var(--brand-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button.ghost { background: #eef3f1; color: var(--ink); }
button[disabled] { opacity: 0.5; cursor: default; }

.summary { margin: 16px 2px 8px; color: var(--muted); font-size: 13px; font-weight: 700; }

.list { display: grid; gap: 10px; }

.steak {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  align-items: center;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.steak h2 { grid-column: 1; margin: 0; font-size: 16px; line-height: 1.3; }
.steak .meta { grid-column: 1; margin: 0; color: var(--muted); font-size: 13px; }
.steak .price { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
.steak .price b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
.steak .price small { color: var(--muted); font-size: 11px; font-weight: 700; }

.steak .pick { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.steak .pick label { color: var(--muted); font-size: 13px; font-weight: 700; }
.steak .pick input { width: 84px; min-width: 0; text-align: center; }
.steak .pick .pick-stock { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.steak.is-chosen { border-color: var(--brand); }

.prompt p { margin: 0 0 10px; }
.prompt p b { color: var(--ink); font-size: 17px; }
.prompt button { margin-top: 4px; }

.empty {
  padding: 28px 16px;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}

/* The basket sits on the bottom edge, where a thumb is. */
.basket {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(16, 32, 28, 0.08);
}

.basket-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 0;
  text-align: left;
}

.basket-summary { display: grid; gap: 1px; }
.basket-summary b { font-size: 15px; }
.basket-summary small { font-size: 12px; font-weight: 400; opacity: 0.85; }

/* Underlined and arrowed, because the bar is the way on and nothing else on
   it looked like a control. */
.basket-action {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.basket-panel {
  max-width: 900px;
  max-height: min(70vh, 560px);
  margin: 0 auto;
  padding: 14px 16px 18px;
  overflow-y: auto;
}

.basket-lines { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; }
.basket-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.basket-lines b { font-variant-numeric: tabular-nums; font-weight: 700; }

.enquiry { display: grid; gap: 10px; }
.enquiry-message { margin: 0; font-size: 13px; font-weight: 700; color: var(--brand); }
.enquiry-message.is-bad { color: #a3261a; }
.enquiry-small { margin: 0; color: var(--muted); font-size: 12px; }

.thanks { padding: 10px 0; }
.thanks h2 { margin: 0 0 6px; font-size: 18px; }
.thanks p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }

@media (min-width: 640px) {
  .steak { grid-template-columns: 1fr auto auto; }
  .steak .pick { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
  .steak .price { grid-column: 2; }
}

button.small { min-height: 38px; padding: 8px 12px; font-size: 14px; }

/* The shop answering back -- "we have three of those today" -- above the
   basket bar so it never covers the thing it is talking about. */
.page-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 8;
  max-width: min(90vw, 460px);
  padding: 10px 16px;
  transform: translate(-50%, 8px);
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.page-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }