/* ── Карточка блюда — ЕДИНЫЙ источник стилей ──────────────────────────────────
   Разметку строит общий frontend/js/menu-card-render.js (renderItemCardHtml) —
   подключается и публичным сайтом (menu.html), и живым превью в карточке позиции
   меню босс-панели (boss.html, renderVariantPreview). Раньше CSS под эту разметку
   каждая страница держала СВОЕЙ копией (в boss.html — под префиксом .vphone),
   и копия в боссе отставала от реальной (кнопка без тени/блика, цена плоским
   цветом вместо градиента) — владелец сравнил два скриншота и это стало видно.
   Теперь обе страницы грузят этот файл — менять стиль карточки/кнопки/цены
   нужно ТОЛЬКО здесь, расхождение исключено по конструкции.
   boss.html подключает файл БЕЗ скоупинга (внутри .vphone других одноимённых
   элементов нет, кроме .item-name — для него в boss.html остаётся отдельная,
   более специфичная переопределяющая запись `.vphone .item-name`, см. комментарий
   там же). ── */

.item-card {
  background: #fff; border-radius: 12px;
  overflow: hidden; position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  display: flex; flex-direction: column;
}
.pickup-badge {
  display: none; position: absolute; top: 8px; right: 8px;
  background: #F5E8EA; color: #8B2635; font-weight: 700;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 4px 8px; border-radius: 10px; z-index: 1;
}
.pickup-mode .pickup-badge { display: block; }
.item-img-wrap {
  width: 100%; aspect-ratio: 4/3; overflow: hidden; flex-shrink: 0;
}
.item-img {
  width: 100%; height: 100%; object-fit: cover;
  background: #f5f5f5; display: block;
  transition: transform .4s ease;
}
.item-card:hover .item-img { transform: scale(1.08); }
.item-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 }
.item-name { font-size: 15px; font-weight: 600; color: #111 }
.item-desc { font-size: 13px; color: #777; line-height: 1.4; flex: 1; white-space: pre-wrap }
.item-meta { font-size: 12px; color: #888; flex-shrink: 0 }
.item-footer { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 8px }
.item-price-row { display: flex; align-items: center; justify-content: space-between; gap: 8px }
@keyframes price-gold-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.item-price {
  font-size: 22px; font-weight: 700; line-height: 1;
  padding: 8px 0;
  background: linear-gradient(135deg, #7A5500, #C8960C, #FFE566, #C8960C, #7A5500);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0.3px 0.3px 0 #7A5200) drop-shadow(-0.3px -0.3px 0 #7A5200);
  transition: filter 0.3s;
}
.item-card:hover .item-price {
  background: linear-gradient(105deg,
    #C8960C 0%, #FFE566 20%, #FFF8CC 30%, #FFE566 40%,
    #C8960C 55%, #FFE566 70%, #FFF8CC 80%, #FFE566 90%, #C8960C 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: price-gold-flow 2.5s ease-in-out infinite;
  filter: drop-shadow(0.3px 0.3px 0 #7A5200) drop-shadow(-0.3px -0.3px 0 #7A5200) drop-shadow(0 0 6px rgba(200,150,0,0.25));
}
.item-stop { font-size: 12px; color: #8B2635; font-style: italic }

/* ── Variant selector strip ── */
.variant-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.variant-btn {
  padding: 6px 12px; min-height: 32px; border-radius: 20px; border: 1.5px solid #ddd;
  font-size: 12px; font-weight: 600; color: #555; background: #fff;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.variant-btn.active { border-color: #8B2635; color: #8B2635; background: #F5E8EA; }
.variant-btn:hover:not(.active):not(.variant-stop) { border-color: #bbb; color: #333; }
.variant-btn.variant-stop { color: #bbb; border-color: #e0e0e0; text-decoration: line-through; cursor: default; }

/* ── «Добавить»/«Выбрать» — одна и та же кнопка ── */
.add-btn {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg,
    #C0394D 0%, #9B2535 18%, #7A1728 35%,
    #9B2535 52%, #C0394D 68%, #9B2535 85%, #6B1020 100%
  );
  background-size: 200% 200%;
  color: #fff; border: none; border-radius: 8px;
  padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
  white-space: nowrap; letter-spacing: 0.02em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 4px rgba(0,0,0,0.35),
    0 3px 8px rgba(139,38,53,0.45),
    0 1px 2px rgba(0,0,0,0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  transition: box-shadow .2s, filter .2s, background-position .4s;
}
.add-btn::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
}
.add-btn:hover {
  background-position: 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 4px rgba(0,0,0,0.4),
    0 5px 16px rgba(139,38,53,0.65),
    0 2px 4px rgba(0,0,0,0.35);
  filter: brightness(1.1);
}
.add-btn:hover::before {
  animation: btn-sheen 0.55s ease forwards;
}
.add-btn:active {
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.5),
    0 1px 3px rgba(139,38,53,0.3);
  filter: brightness(0.9);
  transform: translateY(1px);
}
@keyframes btn-sheen {
  0%   { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(320%)  skewX(-20deg); }
}

/* ── Избранное: сердечко на карточке (левый верхний угол; справа — бейдж −10%) ── */
.fav-btn {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.15);
  color: #8B2635; font-size: 19px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.fav-btn:hover { transform: scale(1.1) }
/* Без фото сердечко и бейдж «−10%» висели прямо на названии — опускаем текст под них */
.item-card.no-img .item-body { padding-top: 50px }
.fav-btn.on { color: #e11d48 }
.fav-btn.fav-inline {
  position: static; display: inline-flex; vertical-align: middle;
  width: 30px; height: 30px; margin-left: 6px; box-shadow: none; background: #f7f2f3;
}