/**
 * cards.css — the dish card and the order card, shared by the guest
 * client (`web/public`) and the waiter's page (`web/order`)
 * (web/docs/feature-waiter-order-site.md §5.3, waitervoice-b5cb.4).
 *
 * Moved verbatim out of `public/style.css`. Load it AFTER `tokens.css`:
 * everything below is expressed in `--wv-*` custom properties, so
 * without the token block every colour here falls back to inherited.
 *
 * `@font-face` deliberately does NOT live here. A font source is a
 * relative reference, resolved against the stylesheet that declares
 * it — from `shared/` that path would differ in every publication.
 * Each site declares its own fonts in its own `style.css`.
 */

/* ---------- Карточка (§8.2) ---------- */

.card {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;              /* §3.2 — скроллится содержимое карточки */
  overscroll-behavior: contain;  /* и не «пробивает» в карусель/страницу  */
  background: var(--wv-white);
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-r-card);
  box-shadow: var(--wv-shadow);
  animation: wv-card-in var(--wv-t-card) both;
}
/* Список анимаций, а не замена: иначе при снятии класса wv-card-in
   стартует заново, и карточка «моргает» как после refresh (bcf.5). */
.card--flash { animation: wv-card-in var(--wv-t-card) both, wv-flash 600ms ease-out; }

/* §8.2 доп. — клоны крайних карточек для кругового скролла (ui.js
   syncLoop()): видимы только на долю свайпа через границу, не должны
   ни мигать входным wv-card-in, ни ловить тапы. */
.card--clone { animation: none; pointer-events: none; }

/* Временная карточка (waitervoice-bcf.11): крестик у левого верхнего
   угла, центр чуть внутри карточки по диагонали, часть кнопки снаружи. Карточка поэтому не обрезает
   содержимое (overflow: visible), а скроллится внутренний .card__scroll
   со скруглением карточки. */
.card--temp { position: relative; overflow: visible; }
.card__scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: inherit;
}
.card__close {
  position: absolute;
  top: -10px;                    /* центр на 6px внутрь по диагонали от угла */
  inset-inline-start: -10px;
  z-index: 2;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--wv-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.18);
  color: var(--wv-navy);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background var(--wv-t-fast);
}

@keyframes wv-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wv-flash {
  0%   { box-shadow: var(--wv-shadow), 0 0 0 0 rgba(0, 198, 248, 0.7); }
  40%  { box-shadow: var(--wv-shadow), 0 0 0 4px rgba(0, 198, 248, 0.45); }
  100% { box-shadow: var(--wv-shadow), 0 0 0 0 rgba(0, 198, 248, 0); }
}

/* ---------- Карточка блюда (§8.6.2) ---------- */

/* ---------- Карточка блюда (§8.6.2) ---------- */

/* waitervoice-bcf.15: фото + корзина в левом нижнем углу (верхний левый
   занят крестиком закрытия). */
.dish__media { position: relative; }
.dish__media .dish__photo { display: block; }
.dish__photo-cart {
  position: absolute;
  inset-inline-start: 12px;
  bottom: 12px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--wv-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.22);
  color: var(--wv-cyan-ink);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: transform var(--wv-t-fast), background var(--wv-t-fast);
}
.dish__photo-cart:active { transform: scale(0.92); background: #fff; }
.dish__photo-cart:focus-visible { outline: 2px solid var(--wv-cyan); outline-offset: 2px; }
.dish__photo {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: calc(var(--wv-r-card) - 1px) calc(var(--wv-r-card) - 1px) 0 0;
  background: var(--wv-skeleton);
}
.dish__body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.dish__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dish__name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
/* Плашка «ккал / вес» справа в шапке (waitervoice-bcf.7, вариант C):
   компактные шрифты, чтобы имя блюда получило максимум ширины. */
.dish__stat {
  flex-shrink: 0;
  min-width: 62px;
  border: 1px solid var(--wv-border);
  background: var(--wv-bg-soft);
  border-radius: 10px;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
}
.dish__stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; line-height: 1.25; }
.dish__stat-row + .dish__stat-row { border-top: 1px solid var(--wv-border); margin-top: 3px; padding-top: 3px; }
.dish__stat-row b { font-size: 14px; font-weight: 800; }
.dish__stat-row span { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wv-text-muted); }
.dish__stat-row + .dish__stat-row b { font-size: 13px; font-weight: 700; }
.dish__desc { font-size: 15px; font-weight: 450; line-height: 1.5; color: var(--wv-text-muted); }

.macros { display: grid; gap: 6px; }
.macros li {
  display: grid;
  grid-template-columns: 4.2rem 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
}
.macros span:first-child { color: var(--wv-text-muted); }
.macros b { height: 6px; border-radius: 999px; background: var(--wv-skeleton); overflow: hidden; }
.macros b i { display: block; height: 100%; border-radius: inherit; }
.macros .m-p i { background: var(--wv-cyan); }
.macros .m-f i { background: var(--wv-amber); }
.macros .m-c i { background: var(--wv-carb); }
.macros u { text-decoration: none; font-variant-numeric: tabular-nums; }

.sect__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wv-text-muted);
  margin-bottom: 8px;
}
/* Компактные чипы (waitervoice-bcf.8): мельче и плотнее, идут в поток по
   ширине карточки. Бейджи — отдельным блоком под ингредиентами (bcf.12). */
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips span {
  background: var(--wv-cyan-50);
  color: var(--wv-navy);
  border-radius: var(--wv-r-chip);
  padding: 3px 9px;
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: 700;
}
.chips span.badge { background: var(--wv-skeleton); }
.dish__ings { font-size: 15px; font-weight: 450; line-height: 1.5; }
/* Футер карточки: цена слева, «в корзину» справа (waitervoice-bcf.9). */
.dish__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dish__price { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Общие строки корзины и заказа (§8.6.3) ---------- */

/* Строка корзины (waitervoice-bcf.14): N × [миниатюра] имя … сумма. */
.cart__pick,
.orders__pick {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0; border: 0; background: none; text-align: start;
  font: inherit; font-size: 17px; color: inherit; cursor: pointer;
}
.cart__qty,
.orders__qty { flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart__thumb,
.orders__thumb {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--wv-r-tag);
  object-fit: cover;
  background: var(--wv-skeleton);
}
.cart__name,
.orders__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cart__sum,
.orders__sum { flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart__pick:active,
.orders__pick:active { opacity: 0.6; }
.cart__pick:focus-visible,
.orders__pick:focus-visible { outline: 2px solid var(--wv-cyan); outline-offset: 2px; border-radius: var(--wv-r-tag); }
.cart__note,
.orders__note { font-size: 15px; color: var(--wv-text-muted); margin-top: 2px; }
.cart__sep,
.orders__sep { height: 1px; background: var(--wv-border); }
.cart__total,
.orders__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 17px; font-weight: 700; }
.cart__total b,
.orders__total b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Карточка истории заказов (§8.6.3a) ---------- */

/* ---------- Карточка истории заказов (§8.6.3a, waitervoice-xc1) ---------- */

.orders { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.orders__title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.orders__table { font-size: 15px; color: var(--wv-text-muted); margin-top: 2px; }
.orders__items { display: flex; flex-direction: column; gap: 10px; }
.orders__block { display: flex; flex-direction: column; gap: 8px; }
.orders__head { display: flex; justify-content: space-between; align-items: center; }

/* waitervoice-nyp.2.3: segmented Mine / Whole-table control. Sits
   flush with the title row, same chip tokens as the existing
   `.orders__status`. Tabs are 32px tall (≥ 44px touch zone with
   padding), the active tab gets the accent color. */
.orders__view {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  padding: 2px;
  border-radius: var(--wv-r-chip);
  background: var(--wv-bg-elev);
  border: 1px solid var(--wv-border);
}
.orders__view button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 6px 14px;
  min-height: 32px;
  border-radius: calc(var(--wv-r-chip) - 4px);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.orders__view button[aria-selected="true"] {
  background: var(--wv-cyan);
  color: var(--wv-bg);
}
.orders__view button:focus-visible {
  outline: 2px solid var(--wv-cyan);
  outline-offset: 2px;
}

/* waitervoice-nyp.2.3: per-guest divider in Whole-table view. Same
   visual weight as `.orders__head`, with a top margin that collapses
   for the first part. */
.orders__guest {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
  font-weight: 700;
}
.orders__guest:not(:first-child) {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--wv-border);
}
.orders__no {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wv-text-muted);
}
.orders__status {
  display: inline-flex; gap: 4px; align-items: center;
  padding: 2px 10px;
  border-radius: var(--wv-r-chip);
  background: var(--wv-cyan-50);
  color: var(--wv-cyan-ink);
  font-size: 13px; font-weight: 700;
}
.orders__subtotal {
  align-self: flex-end;
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.orders__empty {
  font-size: 15px; font-weight: 450; line-height: 1.5;
  color: var(--wv-text-muted);
}

.cart__done {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px;
  border-radius: var(--wv-r-chip);
  background: var(--wv-cyan-50);
  color: var(--wv-cyan-ink);
  font-size: 17px; font-weight: 700;
}

/* waitervoice-b5cb.4/.5: QR for the waiter under the order total. */
.orders__qr {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--wv-border);
}
/* waitervoice-6b0r: when the host can copy, the block is a <button>.
   Reset it to the plain div it used to be, so the card looks identical
   and only the affordance changes. `cursor: pointer` is the visible
   half of "this does something"; the focus ring comes from the global
   :focus-visible rule. */
button.orders__qr {
  width: 100%;
  border: 0; border-top: 1px solid var(--wv-border);
  background: none; font: inherit; color: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button.orders__qr:active { opacity: 0.7; }
.orders__qr-img { width: 168px; height: 168px; }
.orders__qr-cap { font-size: 13px; font-weight: 600; color: var(--wv-text-muted); text-align: center; }