/**
 * style.css — the waiter order page (`order.waitervoice.ai`,
 * web/docs/feature-waiter-order-site.md §7.4, waitervoice-b5cb.6).
 *
 * The dish and order CARDS are not here: they come from
 * `../shared/cards.css`, which the guest page also loads. What is here
 * is the furniture around them — fonts, reset, header, screens — plus
 * this page's two-column layout.
 *
 * The copied blocks (fonts, reset, header, .cta, .screen) are verbatim
 * from `public/style.css`; only the layout section below is new. No
 * literal colours outside the tokens: everything reads a `--wv-*` from
 * `../shared/tokens.css`.
 */

/* ---------- Шрифты (self-hosted) ---------- */

/* ---------- Шрифты (self-hosted, §4.3) ---------- */

@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/manrope-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans Georgian Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/noto-sans-georgian-georgian-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
}

/* ---------- Сброс и документ ---------- */

/* ---------- Сброс и документ (§3, §3.2) ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  height: 100dvh;
  overflow: hidden;             /* §3.2 — документ не скроллится никогда */
  overscroll-behavior: none;    /* и не тянется pull-to-refresh'ем       */
}

body {
  font-family: var(--wv-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--wv-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background:
    radial-gradient(22rem 18rem at 50% 100%, rgba(0, 198, 248, 0.16), transparent 70%),
    linear-gradient(180deg, var(--wv-white) 0%, var(--wv-bg-soft) 45%, #eef7fd 100%);
  background-attachment: fixed;
}

img, svg { display: block; max-width: 100%; }
/* display: block перебивает UA-правило [hidden] — без этого спрятанное фото
   ресторана (нет photo_url) оставалось пустым серым прямоугольником. */
img[hidden] { display: none; }
button { font: inherit; cursor: pointer; }
p, h1, h2, h3, ul, ol, li { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--wv-cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Шапка ---------- */

.header {
  position: relative;
  flex: 0 0 var(--wv-header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.header__mark {
  width: 24px; height: 24px;
  object-fit: contain;
}
.header__word {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--wv-navy);
}
/* Логотип — исключение из правила контраста §4.2 (как на лендинге). */
.header__word i { font-style: normal; color: var(--wv-cyan); }
/* Логотип — кнопка «домой» (bcf.16): выглядит как прежде, без рамки. */
.header__logo {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
  border-radius: var(--wv-r-tag);
}

/* ---------- Раскладка страницы ---------- */

/* A phone gets the card edge to edge; a tablet or desktop gets a 640px
   column. `100dvh` (not `100vh`) so the iOS address bar collapsing does
   not cut off the bottom of the order. */
.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 640px;
  margin-inline: auto;
  padding-top: env(safe-area-inset-top);
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.app[hidden] { display: none; }

.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-inline: var(--wv-gutter);
}
/* Both cards fill the stage and sit on top of each other; the dish card
   carries `hidden` until a row is tapped. They must NOT be re-parented
   on repaint — that is what keeps the order card's scroll position. */
.stage > .card {
  position: absolute;
  inset: 0;
}
.stage > .card[hidden] { display: none; }
.card--order {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Кнопка и полноэкранные состояния ---------- */

.cta {
  min-height: 52px;
  border: 0;
  border-radius: var(--wv-r-chip);
  background: var(--wv-cyan);
  color: var(--wv-navy);         /* §4.2 — navy на cyan, не белый */
  font-size: 17px;
  font-weight: 700;
  box-shadow: var(--wv-glow-cyan);
  transition: background var(--wv-t-base), box-shadow var(--wv-t-base);
}
.cta[disabled] { background: var(--wv-border-strong); color: var(--wv-text-muted); box-shadow: none; }

.screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  text-align: center;
  background:
    radial-gradient(22rem 18rem at 50% 100%, rgba(0, 198, 248, 0.16), transparent 70%),
    linear-gradient(180deg, var(--wv-white) 0%, var(--wv-bg-soft) 45%, #eef7fd 100%);
}
.screen.is-on { display: flex; animation: wv-card-in var(--wv-t-slow) both; }
.screen img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 8px; }
.screen h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.screen p { font-size: 17px; color: var(--wv-text-muted); max-width: 22rem; }
.screen__progress {
  position: absolute; top: 0; inset-inline: 0; height: 3px; overflow: hidden;
  background: var(--wv-cyan-50);
}
.screen__progress i {
  display: block; width: 40%; height: 100%; background: var(--wv-cyan);
  animation: wv-indet 1.2s ease-in-out infinite;
}
@keyframes wv-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* Шторка «стол закрыт» §11.4 — снизу, не модалка по центру */