/* ═══════════════════════════════════════════════════════════════
   CampusEats Microinteractions — Premium Animation Layer
   ═══════════════════════════════════════════════════════════════ */

/* ── Ripple Effect ─────────────────────────────────────────── */
.ce-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: ce-ripple-anim 0.55s linear;
  pointer-events: none;
}
@keyframes ce-ripple-anim {
  to { transform: scale(2.8); opacity: 0; }
}

/* ── Skeleton Loaders ──────────────────────────────────────── */
.ce-skeleton-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}
.ce-skeleton-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface, #fff);
  border-radius: 14px;
  padding: 10px;
  border: 1px solid var(--border-light, #f0ede8);
}
.ce-skel {
  background: linear-gradient(90deg, #f0ede8 25%, #faf8f5 50%, #f0ede8 75%);
  background-size: 200% 100%;
  animation: ce-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.ce-skel-img { width: 72px; height: 72px; border-radius: 10px; flex-shrink: 0; }
.ce-skel-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ce-skel-title { height: 14px; width: 70%; }
.ce-skel-sub   { height: 11px; width: 45%; }
.ce-skel-btn   { height: 28px; width: 32px; border-radius: 50%; margin-left: auto; }

@keyframes ce-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* pull-to-refresh removed */

/* ── Floating Notifications ────────────────────────────────── */
.ce-float-notif {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 700;
  z-index: 99999;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  font-family: var(--font-display, 'Roboto', sans-serif);
}
.ce-float-notif.ce-fn-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ce-float-notif.ce-fn-success { background: #166534; color: #fff; }
.ce-float-notif.ce-fn-error   { background: #991b1b; color: #fff; }
.ce-float-notif.ce-fn-info    { background: #1a1208; color: #fff; }

/* ── Confetti Bits ─────────────────────────────────────────── */
@keyframes ce-confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(120px) rotate(540deg); opacity: 0; }
}

/* ── Success Pop ───────────────────────────────────────────── */
@keyframes ce-success-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.25); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Bottom Nav Bounce ─────────────────────────────────────── */
@keyframes ce-bnav-bounce {
  0%,100% { transform: translateY(0) scale(1); }
  40%     { transform: translateY(-6px) scale(1.2); }
  70%     { transform: translateY(2px) scale(0.95); }
}

/* ── Add-to-cart Button: Springy active state ──────────────── */
.add-btn:active, .add-btn-sq:active {
  transform: scale(0.88) rotate(-8deg) !important;
  transition: transform 0.12s ease !important;
}

/* ── Enhanced Modal Entrance ───────────────────────────────── */
.modal-overlay.open {
  animation: ce-overlay-fade 0.22s ease forwards;
}
@keyframes ce-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-overlay.open .modal {
  animation: ce-modal-up 0.34s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes ce-modal-up {
  from { transform: translateY(60px); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Cart Bar Slide-in Enhancement ────────────────────────── */
.cart-bar.visible {
  animation: ce-cart-arrive 0.38s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ce-cart-arrive {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── Toast Enhancement ─────────────────────────────────────── */
.toast {
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), opacity 0.25s ease !important;
}
.toast.success { background: #166534 !important; }
.toast.error   { background: #991b1b !important; }

/* ── Pay/Subscribe Button Pulse on hover ───────────────────── */
.pay-now-btn:hover, .subscribe-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,101,0,.42) !important;
}
.pay-now-btn, .subscribe-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* ── Form Input Focus Ring ─────────────────────────────────── */
.form-input:focus {
  box-shadow: 0 0 0 3px rgba(255,101,0,.18), 0 2px 8px rgba(0,0,0,.06);
  border-color: #ff6500 !important;
}

/* ── Food Card Hover ───────────────────────────────────────── */
.food-card:hover, .food-card-sq:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,.1);
}

/* ── Plan Card Selection Bounce ────────────────────────────── */
.plan-card.selected {
  animation: ce-plan-select 0.28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ce-plan-select {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ── Category Pill Active Press ────────────────────────────── */
.category-pill:active {
  transform: scale(0.93);
  transition: transform 0.1s ease;
}
.category-pill {
  transition: all 0.2s cubic-bezier(.34,1.56,.64,1);
}

/* ── Bell Button Wiggle on new notification ─────────────────── */
@keyframes ce-bell-wiggle {
  0%,100% { transform: rotate(0deg); }
  20%     { transform: rotate(-18deg); }
  40%     { transform: rotate(18deg); }
  60%     { transform: rotate(-10deg); }
  80%     { transform: rotate(8deg); }
}
.app-bell-btn.has-new .app-bell-icon {
  animation: ce-bell-wiggle 0.5s ease;
}

/* ── Page-level slide transition ───────────────────────────── */
.view {
  will-change: opacity, transform;
}



/* ── Notif banner fade-in ──────────────────────────────────── */
#notifPermBanner {
  animation: ce-slide-down 0.4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ce-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Dialog pop ────────────────────────────────────────────── */
.dialog-overlay.open .dialog-box {
  animation: ce-dialog-pop 0.3s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes ce-dialog-pop {
  from { transform: scale(0.85) translateY(16px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── Qty button press ──────────────────────────────────────── */
.qty-btn:active {
  transform: scale(0.85);
  background: var(--orange-dim, #fff3e8);
}

/* ── Staggered food card entrance ──────────────────────────── */
#menuDisplay .food-card,
#menuDisplay .food-card-sq {
  animation: ce-card-in 0.38s ease both;
}
#menuDisplay .food-card:nth-child(1), #menuDisplay .food-card-sq:nth-child(1) { animation-delay: 0.04s; }
#menuDisplay .food-card:nth-child(2), #menuDisplay .food-card-sq:nth-child(2) { animation-delay: 0.08s; }
#menuDisplay .food-card:nth-child(3), #menuDisplay .food-card-sq:nth-child(3) { animation-delay: 0.12s; }
#menuDisplay .food-card:nth-child(4), #menuDisplay .food-card-sq:nth-child(4) { animation-delay: 0.16s; }
#menuDisplay .food-card:nth-child(5), #menuDisplay .food-card-sq:nth-child(5) { animation-delay: 0.20s; }
#menuDisplay .food-card:nth-child(6), #menuDisplay .food-card-sq:nth-child(6) { animation-delay: 0.24s; }
#menuDisplay .food-card:nth-child(n+7), #menuDisplay .food-card-sq:nth-child(n+7) { animation-delay: 0.28s; }

@keyframes ce-card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Top picks grid entrance ───────────────────────────────── */
#topPicksGrid .food-card-sq {
  animation: ce-pick-pop 0.32s cubic-bezier(.34,1.56,.64,1) both;
}
#topPicksGrid .food-card-sq:nth-child(1) { animation-delay: 0.05s; }
#topPicksGrid .food-card-sq:nth-child(2) { animation-delay: 0.10s; }
#topPicksGrid .food-card-sq:nth-child(3) { animation-delay: 0.15s; }
#topPicksGrid .food-card-sq:nth-child(4) { animation-delay: 0.20s; }
#topPicksGrid .food-card-sq:nth-child(n+5) { animation-delay: 0.25s; }
@keyframes ce-pick-pop {
  from { opacity: 0; transform: scale(0.88) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Install banner spring ─────────────────────────────────── */
#installBanner[style*="flex"] {
  animation: ce-banner-in 0.45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ce-banner-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── Order success overlay ─────────────────────────────────── */
#orderSuccessOverlay {
  animation: ce-success-bloom 0.4s ease forwards;
}
@keyframes ce-success-bloom {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── View as Customer sticky badge (admin) ─────────────────── */
#ce-view-store-btn {
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease;
  animation: ce-badge-arrive 0.5s cubic-bezier(.34,1.56,.64,1) 0.8s both;
}
#ce-view-store-btn:hover {
  transform: translateX(-50%) translateY(-3px) !important;
  box-shadow: 0 8px 32px rgba(255,101,0,.55) !important;
}
@keyframes ce-badge-arrive {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Cart count badge pop ──────────────────────────────────── */
#cartCount {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
}

/* ── Smooth scroll on view activate ───────────────────────── */
.view.active {
  scroll-behavior: smooth;
}

/* ── Qty controls enhanced ─────────────────────────────────── */
.qty-btn {
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
}
.qty-btn:hover {
  background: var(--orange-dim, #fff3e8);
  border-color: #ff6500;
  transform: scale(1.1);
}

/* ── Cart Counter: hide when zero, stay inside bar ─────────── */
#cartCount {
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1),
              visibility 0.15s ease !important;
  flex-shrink: 0;
}

/* ── Bottom Nav: always visible on customer view ────────────── */
/* JS (updateCartBar) handles show/hide — CSS is the fallback */
#bottomNav {
  display: flex !important;
}

/* ── Cart bar: sits above bottom nav gap ────────────────────── */
/* When cart has items, bottom nav is hidden by JS, cart bar fills that role */
.cart-bar {
  z-index: 92 !important;
}

/* ── When cart bar is NOT visible, bottom nav is at the base ─── */
/* Bottom nav padding accounts for safe area */
.bottom-nav {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px);
  height: auto;
  min-height: 60px;
}

/* ── Cart bar rises from EXACTLY where bottom nav sits ──────── */
.cart-bar.visible {
  bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;
}