/* VenueOS — Elevation Layer (MOBILE ONLY)
   Depth, gloss and motion polish for grid cards, buttons and pop cards.
   Visual only — no layout, spacing or data changes. Loaded after glass.css;
   overrides by cascade order. Uses brand variables so every venue keeps its
   own palette (Hoxton: peach on black). Scoped to the app's mobile breakpoint
   (max-width: 768px) — desktop is intentionally untouched.
   Remove this file to revert.
*/

@media (max-width: 768px) {

/* ══════════════════════════════════════════════════════════════════════
   1. GRID CARDS — layered light, accent ring, tactile press
   ══════════════════════════════════════════════════════════════════════ */

.item-card,
.wine-detail-card,
.cocktail-card {
  position: relative;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease;
  box-shadow:
    0 1px 2px rgba(26, 20, 12, 0.06),
    0 10px 28px -10px rgba(26, 20, 12, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

body.dinner-mode .item-card,
body.dinner-mode .wine-detail-card,
body.dinner-mode .cocktail-card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 14px 36px -12px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Press: card dips under the finger with a brief accent ring */
.item-card:active,
.wine-detail-card:active,
.cocktail-card:active {
  transform: scale(0.977);
  transition-duration: 0.1s;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 6px 18px -8px rgba(0, 0, 0, 0.4),
    0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Image wells: soft inner vignette + hairline so photos sit "in" the card.
   Wine bottles stay on clean studio white — excluded on purpose. */
.item-card.food-card .item-card-img-wrap,
.item-card:not(.food-card) .item-card-img-wrap {
  position: relative;
}
.item-card.food-card .item-card-img-wrap::after,
.item-card:not(.food-card) .item-card-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 -24px 32px -24px rgba(0, 0, 0, 0.4);
}

/* Price: brushed-metal gradient in the brand accent */
.item-card.food-card .item-card-price,
.cocktail-card .cocktail-card-price,
.wine-detail-card .wine-card-price {
  background-image: linear-gradient(
    130deg,
    var(--brass-light) 0%,
    var(--brass) 55%,
    color-mix(in srgb, var(--brass) 72%, #3a2c1e) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ══════════════════════════════════════════════════════════════════════
   2. BUTTONS — gloss, depth and press feedback
   ══════════════════════════════════════════════════════════════════════ */

/* Solid CTAs: glossy top light over the brand fill + tinted drop shadow */
.allergy-apply-btn,
.briefing-banner-cta,
.pwa-install-btn,
.quiz-done-btn,
.quiz-play-again,
.set-it-right-play-btn,
.set-it-right-check-btn,
.set-it-right-play-again,
.ios-install-sheet-done,
.new-user-welcome-btn,
.staff-qr-close {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(0, 0, 0, 0.12) 100%
  );
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 8px 20px -8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition:
    transform 0.15s cubic-bezier(0.2, 0.8, 0.3, 1.1),
    box-shadow 0.15s ease,
    filter 0.15s ease,
    opacity 0.15s ease;
}

.allergy-apply-btn:active,
.briefing-banner-cta:active,
.pwa-install-btn:active,
.quiz-done-btn:active,
.quiz-play-again:active,
.set-it-right-play-btn:active,
.set-it-right-check-btn:active,
.set-it-right-play-again:active,
.ios-install-sheet-done:active,
.new-user-welcome-btn:active,
.staff-qr-close:active {
  transform: scale(0.97);
  filter: brightness(0.96);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Quiz glass chips: real depth at rest, dip + accent glow on tap */
.quiz-lvl,
.quiz-game-opt {
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
body.dinner-mode .quiz-lvl,
body.dinner-mode .quiz-game-opt {
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.quiz-lvl:active,
.quiz-game-opt:active {
  box-shadow:
    0 6px 20px -6px color-mix(in srgb, var(--accent) 45%, rgba(0, 0, 0, 0.3)),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Active filter pill: glossy accent with a soft brand glow */
.sub-pill {
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.12s ease;
}
.sub-pill.active {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.14) 100%
  );
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 16px -2px color-mix(in srgb, var(--accent) 50%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
body.dinner-mode .sub-pill.active {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 4px 18px -2px color-mix(in srgb, var(--accent) 45%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Bottom nav: glowing active pill, springy press */
.bottom-nav .bn-tab.active .bn-pill {
  box-shadow:
    0 0 18px -2px rgba(240, 184, 168, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.bn-tab {
  transition: color 0.2s ease, transform 0.15s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}
.bn-tab:active {
  opacity: 1;
  transform: scale(0.92);
}

/* ══════════════════════════════════════════════════════════════════════
   3. POP CARDS — entrance motion, deep shadows, glass details
   ══════════════════════════════════════════════════════════════════════ */

@keyframes elevate-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes elevate-pop-in {
  0% { opacity: 0; transform: translateY(24px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-overlay.open {
  animation: elevate-overlay-in 0.22s ease both;
}
.modal-overlay.open .modal,
.modal-overlay.open .quiz-modal {
  animation: elevate-pop-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Item pop card: cinematic shadow */
.modal {
  box-shadow:
    0 28px 88px -12px rgba(0, 0, 0, 0.6),
    0 6px 28px rgba(0, 0, 0, 0.35);
}

/* Body divider: fade-out accent hairline instead of a flat rule */
.modal-body {
  border-top: 1px solid transparent;
  border-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--brass) 55%, transparent) 50%,
    transparent 100%
  ) 1;
}

/* Price chip on the photo: frosted glass pill */
.modal-price-overlay {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Close button: frosted glass with press dip */
.modal-close {
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease, transform 0.15s cubic-bezier(0.2, 0.8, 0.3, 1.2), border-color 0.2s ease;
}
.modal-close:active {
  transform: scale(0.92);
  background: rgba(0, 0, 0, 0.7);
}

/* Allergy modal: soft pop entrance (overlay already fades via transition) */
.allergy-modal-overlay .allergy-modal {
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition:
    transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.18s ease;
}
.allergy-modal-overlay.open .allergy-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.allergy-modal {
  box-shadow:
    0 24px 70px -8px rgba(0, 0, 0, 0.5),
    0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Bottom sheets (86, tasks, settings, iOS install): heavier float + brand
   glow on the grab handle */
.bn-86-sheet,
.bn-daily-tasks-sheet,
.settings-sheet,
.ios-install-sheet {
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.45);
}
.bn-sheet-handle,
.settings-sheet-handle {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.14),
    color-mix(in srgb, var(--brass) 55%, rgba(255, 255, 255, 0.2)),
    rgba(255, 255, 255, 0.14)
  );
}

/* ══════════════════════════════════════════════════════════════════════
   4. REDUCED MOTION — kill transforms; design-system.css clamps durations
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .item-card:active,
  .wine-detail-card:active,
  .cocktail-card:active,
  .allergy-apply-btn:active,
  .briefing-banner-cta:active,
  .pwa-install-btn:active,
  .quiz-done-btn:active,
  .quiz-play-again:active,
  .set-it-right-play-btn:active,
  .set-it-right-check-btn:active,
  .modal-close:active,
  .bn-tab:active {
    transform: none;
  }
  .modal-overlay.open,
  .modal-overlay.open .modal,
  .modal-overlay.open .quiz-modal {
    animation: none;
  }
  .allergy-modal-overlay .allergy-modal {
    transform: none;
    transition: opacity 0.05s ease;
  }
}

} /* end @media (max-width: 768px) */