/* ==========================================================================
   Slowpoke Coffee Co. — menu preview kit (the illustrated cup / pastry card)
   The one implementation of the item preview, shared by the guest menu
   (style.css + menu-render.js) and the staff register's item grid and
   pastry builder (pos.css + pos.js). It lived in style.css, which pos.php
   does not load, so the register was rendering these previews with no
   structural styling at all: a bare ~15px emoji with no cup around it.
   Extracted here and linked from both inc/header.php and pos.php so the two
   surfaces show literally the same preview and cannot drift.
   Only references custom properties that style.css and pos.css both define.
   ========================================================================== */

/* ---------- Drink cup visual preview (one technique, used everywhere) ----------
   The emoji and garnish below are sized against the cup's own width, not the
   inherited font size. A percentage font-size resolves against the parent's
   font-size, which left the emoji at roughly 5px no matter how big the cup got,
   so the cup rendered as an empty vessel. cqw makes the intent literal. */
.drink-cup, .pastry-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  container-type: inline-size;
}
.drink-cup .cup-mat, .pastry-card .cup-mat {
  position: absolute;
  inset: 8% 4% 4%;
  border-radius: 20%;
  opacity: 0.9;
  box-shadow: var(--shadow-sm);
}
.drink-cup .cup-shape {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 8%;
  top: 14%;
  background: var(--cream);
  clip-path: polygon(12% 0%, 88% 0%, 78% 100%, 22% 100%);
  box-shadow: inset 0 -10px 16px rgba(0,0,0,0.08), 0 3px 8px rgba(0,0,0,0.12);
}
:root[data-theme="dark"] .drink-cup .cup-shape { background: var(--surface); }
@media (prefers-color-scheme: dark) { .drink-cup .cup-shape { background: var(--surface); } }
.drink-cup .cup-sleeve {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 42%;
  height: 20%;
  background: repeating-linear-gradient(135deg, rgba(59,42,30,0.14) 0 6px, rgba(59,42,30,0.04) 6px 12px);
  border-radius: 4px;
}
.pastry-card .pastry-bag {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 10%;
  top: 16%;
  background: var(--cream);
  border-radius: 50% 50% 14% 14% / 32% 32% 12% 12%;
  box-shadow: inset 0 -8px 14px rgba(0,0,0,0.07), 0 3px 8px rgba(0,0,0,0.12);
}
:root[data-theme="dark"] .pastry-card .pastry-bag { background: var(--surface); }
@media (prefers-color-scheme: dark) { .pastry-card .pastry-bag { background: var(--surface); } }
.cup-emoji {
  position: relative;
  z-index: 2;
  font-size: 34cqw;
  line-height: 1;
  margin-bottom: 18%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
}
.cup-garnish {
  position: absolute;
  top: 10%;
  right: 10%;
  font-size: 22cqw;
  transform: rotate(12deg);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.22));
  z-index: 3;
}
.cup-badge {
  position: absolute;
  bottom: -2%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cocoa-900);
  color: #fffaf0;
  font-size: 0.52rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: normal;
  max-width: 96%;
  text-align: center;
  line-height: 1.2;
  font-family: var(--font-heading);
  letter-spacing: 0.2px;
  z-index: 4;
}
:root[data-theme="dark"] .cup-badge { background: var(--cream-50); color: var(--cocoa-900); }
@media (prefers-color-scheme: dark) { .cup-badge { background: var(--cream-50); color: var(--cocoa-900); } }

.mat-espresso .cup-mat  { background: linear-gradient(135deg, var(--cocoa-600), var(--rust-700)); }
.mat-iced .cup-mat      { background: linear-gradient(135deg, var(--avocado-400), var(--avocado-600)); }
.mat-coldbrew .cup-mat  { background: linear-gradient(135deg, var(--cocoa-900), var(--rust-700)); }
.mat-drip .cup-mat      { background: linear-gradient(135deg, var(--mustard-500), var(--rust-500)); }
.mat-tea .cup-mat       { background: linear-gradient(135deg, var(--avocado-400), var(--mustard-400)); }
.mat-signature .cup-mat { background: linear-gradient(135deg, var(--rust-500), var(--mustard-400) 55%, var(--sunset-500)); }
.mat-pastries .cup-mat  { background: linear-gradient(135deg, var(--cream-200), var(--mustard-400)); }
.mat-food .cup-mat      { background: linear-gradient(135deg, var(--avocado-600), var(--cocoa-700)); }
.mat-kids .cup-mat      { background: linear-gradient(135deg, var(--mustard-400), var(--rust-400)); }

.drink-cup.size-lg, .pastry-card.size-lg { max-width: 118px; }
.drink-cup.size-md, .pastry-card.size-md { max-width: 92px; }
.drink-cup.size-sm, .pastry-card.size-sm { max-width: 58px; }