/* ===================================================================
   Campus Market — shared UI extras
   1. Floating Telegram-style bottom nav
   2. Hovering support button + "coming soon" popup
   3. Page fade transitions, scroll-reveal animations, scroll progress
   =================================================================== */

/* ---------- 1. FLOATING BOTTOM NAV ---------- */
html body .bnav,
html body .bottom-nav {
  left: 50%;
  right: auto;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: min(calc(100% - 24px), 460px);
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.46));
  -webkit-backdrop-filter: saturate(210%) blur(28px);
  backdrop-filter: saturate(210%) blur(28px);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.24), 0 2px 8px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(15, 23, 42, 0.05);
  view-transition-name: cm-nav;
  padding: 6px;
  gap: 2px;
  align-items: stretch;
  overflow: visible;
  animation: cmNavIn 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.15s backwards;
}
html body .bnav .bi,
html body .bottom-nav .bnav-item {
  position: relative;
  border-radius: 22px;
  padding: 8px 4px 7px;
  transition: color 0.25s, background 0.25s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}
html body .bnav .bi:active,
html body .bottom-nav .bnav-item:active {
  transform: scale(0.92);
}
html body .bnav .bi.active,
html body .bottom-nav .bnav-item.active {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: var(--primary, #2563eb);
}
html body .bnav .bi svg,
html body .bottom-nav .bnav-item svg {
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
html body .bnav .bi.active svg,
html body .bottom-nav .bnav-item.active svg {
  transform: translateY(-1px) scale(1.1);
}
html body .bnav .bi.bi-fab {
  background: transparent;
}
html body .bnav .bi-fab span {
  border-color: rgba(255, 255, 255, 0.95);
}
html body.cm-nav {
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
}
@keyframes cmNavIn {
  from { opacity: 0; transform: translateX(-50%) translateY(40px) scale(0.92); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ---------- 2. SUPPORT BUTTON + POPUP ---------- */
.cm-fab {
  position: fixed;
  right: 16px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.45);
  cursor: pointer;
  transition: transform 0.2s;
  -webkit-tap-highlight-color: transparent;
  animation: cmFabIn 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) 0.5s backwards;
  view-transition-name: cm-fab;
}
body.cm-nav .cm-fab {
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}
.cm-fab:hover { transform: translateY(-3px) scale(1.05); }
.cm-fab:active { transform: scale(0.92); }
.cm-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #2563eb;
  z-index: -1;
  animation: cmPulse 2.6s ease-out infinite;
}
.cm-fab svg { width: 24px; height: 24px; animation: cmWiggle 5s ease-in-out infinite; }
@keyframes cmPulse { 0% { transform: scale(1); opacity: 0.45; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes cmWiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-14deg); } 94% { transform: rotate(12deg); } 97% { transform: rotate(-6deg); } }
@keyframes cmFabIn { from { opacity: 0; transform: scale(0.3) translateY(30px); } to { opacity: 1; transform: none; } }

.cm-pop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.cm-pop.open { opacity: 1; pointer-events: auto; }
.cm-pop-card {
  background: #fff;
  border-radius: 26px;
  padding: 30px 24px 22px;
  width: 100%;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.4);
  transform: translateY(30px) scale(0.92);
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #111827;
}
.cm-pop.open .cm-pop-card { transform: none; }
.cm-pop-ic {
  width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 14px;
  background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.4);
  animation: cmBob 2.4s ease-in-out infinite;
}
.cm-pop-ic svg { width: 30px; height: 30px; }
@keyframes cmBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
.cm-pop-tag {
  display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; border-radius: 9999px; padding: 4px 12px; margin-bottom: 10px;
}
.cm-pop-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.cm-pop-card p { font-size: 0.85rem; line-height: 1.55; color: #6b7280; margin-bottom: 18px; }
.cm-pop-btn {
  width: 100%; padding: 12px; border: none; border-radius: 14px; font-family: inherit; font-weight: 700; font-size: 0.9rem;
  background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; cursor: pointer;
}

/* ---------- 3. ANIMATIONS ---------- */
/* page fade-in (fade-out is triggered from JS on navigation) */
html:not(.cm-vt) body { animation: cmPageIn 0.2s ease backwards; }
/* cross-document view transition (instant cross-fade, nav + support button stay put) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: cmVtOut 0.12s ease both; }
::view-transition-new(root) { animation: cmVtIn 0.2s ease both; }
@keyframes cmVtOut { to { opacity: 0; } }
@keyframes cmVtIn { from { opacity: 0; } }
@keyframes cmPageIn { from { opacity: 0; } to { opacity: 1; } }
html.cm-out body { opacity: 0; transition: opacity 0.12s ease; }

/* scroll progress bar */
.cm-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10001; pointer-events: none;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #f97316);
  border-radius: 0 3px 3px 0;
}

/* scroll reveal */
.cm-r { opacity: 0; }
.cm-r.cm-in {
  opacity: 1;
  animation: var(--cm-a, cmUp) 0.55s cubic-bezier(0.22, 0.85, 0.25, 1) var(--cm-d, 0s) backwards;
}
@keyframes cmUp    { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
@keyframes cmDown  { from { opacity: 0; transform: translateY(-44px); } to { opacity: 1; transform: none; } }
@keyframes cmLeft  { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes cmRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes cmZoom  { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes cmPop   { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.08); } 80% { transform: scale(0.97); } 100% { transform: none; } }
@keyframes cmFlip  { from { opacity: 0; transform: perspective(700px) rotateX(-75deg) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes cmSpin  { from { opacity: 0; transform: rotate(-10deg) scale(0.82) translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes cmBlur  { from { opacity: 0; filter: blur(14px); transform: translateY(20px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes cmSkew  { from { opacity: 0; transform: skewY(7deg) translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes cmBounce { 0% { opacity: 0; transform: translateY(60px); } 55% { opacity: 1; transform: translateY(-14px); } 75% { transform: translateY(6px); } 90% { transform: translateY(-3px); } 100% { transform: none; } }

/* little extras */
@media (hover: hover) {
  .pc, .prod-card, .product-card, .cat-card, .stc, .wyi, .tile { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s; }
  .pc:hover, .prod-card:hover, .product-card:hover, .cat-card:hover { transform: translateY(-6px); }
}
.cm-bump { animation: cmBump 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes cmBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .cm-r, .cm-r.cm-in { opacity: 1 !important; animation: none !important; }
  .cm-fab::before, .cm-fab svg, .cm-pop-ic, html body .bnav, html body .bottom-nav, .cm-fab { animation: none !important; }
}

/* ---------- 4. SLIM TOP BAR (dashboards / admin): home + logout only ---------- */
.cm-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: calc(54px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 12px 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  background: rgba(248, 250, 252, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.cm-tb-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, 0.08); background: #fff; color: #374151;
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s, background 0.2s, color 0.2s; -webkit-tap-highlight-color: transparent; text-decoration: none; padding: 0;
}
.cm-tb-btn:hover { background: #f1f5f9; }
.cm-tb-btn:active { transform: scale(0.9); }
.cm-tb-btn.out { color: #ef4444; }
.cm-tb-btn svg { width: 19px; height: 19px; }
body.cm-has-topbar { padding-top: calc(54px + env(safe-area-inset-top, 0px)) !important; }

/* floating back button for detail pages (no header) */
.cm-back {
  position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; z-index: 55; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.78); color: #111827;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
}
.cm-back:active { transform: scale(0.9); }
.cm-back svg { width: 20px; height: 20px; }

/* ---- v5: skeletons, slot tracker, error toast ---- */
.sk{background:linear-gradient(90deg,#f0f0f0 25%,#e6e6e6 50%,#f0f0f0 75%);background-size:200% 100%;animation:cmsh 1.4s infinite;border-radius:8px}
@keyframes cmsh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.cm-slots{max-width:460px;margin:0 auto;text-align:left}
.cm-slots .st{display:flex;justify-content:space-between;font-weight:800;font-size:.9rem;margin-bottom:8px}
.cm-slots .bar{height:12px;border-radius:99px;background:#e5e7eb;overflow:hidden}
.cm-slots .bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#10B981,#2563EB);transition:width .8s ease}
.cm-slots .sm{font-size:.76rem;color:#64748b;margin-top:6px;text-align:center}
#cm-err{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);max-width:92vw;background:#111827;color:#fff;padding:12px 18px;border-radius:12px;font-size:.85rem;font-weight:600;z-index:99999;box-shadow:0 8px 24px rgba(0,0,0,.3);text-align:center}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}