/* how.shop — 共用 App Toast（底部置中、自動消失）
 * 三端入口（shop / seller / admin）共用：<app-toast> + 全域 window.showToast()。
 * 自帶配色、不依賴各端主題色；--bottom-nav-height 僅買家有，故給 0px fallback
 * （seller / admin 無底部導覽 → 從畫面底算 20px）。
 */
.app-toast-stack {
  position: fixed; left: 50%; bottom: calc(var(--bottom-nav-height, 0px) + 20px);
  transform: translateX(-50%);
  z-index: 9999; pointer-events: none;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 10px;
}
.app-toast {
  display: inline-flex; align-items: center; gap: 10px;
  max-width: 90vw; padding: 12px 18px;
  background: rgba(30, 27, 75, 0.94); color: #fff;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-size: 14px; font-weight: 500;
  pointer-events: auto;
}
.app-toast-icon { font-size: 16px; }
.app-toast-success .app-toast-icon { color: var(--success); }
.app-toast-error   .app-toast-icon { color: var(--danger); }
.app-toast-info    .app-toast-icon { color: var(--primary-light, #a5b4fc); }
.app-toast-msg { line-height: 1.4; }

/* 成功態星光散邊：邊緣 6 粒微光點（兩組錯開週期）緩慢明滅；刻意低調——
   點徑 1~2px、無光暈不旋轉，僅成功 toast 有（錯誤態撒星光語意不對） */
.app-toast-success { position: relative; }
.app-toast-success::before,
.app-toast-success::after {
  content: '';
  position: absolute; inset: -7px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 3px 3px, 3px 3px, 4px 4px;
}
.app-toast-success::before {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(167, 243, 208, 0.8) 0 1.2px, transparent 2px);
  background-position: 12% 6%, 78% 96%, 97% 28%;
  animation: app-toast-sparkle 2.8s ease-in-out infinite;
}
.app-toast-success::after {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(167, 243, 208, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 0 1.2px, transparent 2px);
  background-position: 32% 100%, 58% 0%, 3% 72%;
  animation: app-toast-sparkle 3.6s ease-in-out 1.1s infinite;
}
@keyframes app-toast-sparkle {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* Transition：slide-up + fade，列表內筆數變動時平滑移動 */
.app-toast-enter-active, .app-toast-leave-active { transition: opacity .25s ease, transform .25s ease; }
.app-toast-enter-from  { opacity: 0; transform: translateY(12px); }
.app-toast-leave-to    { opacity: 0; transform: translateY(8px); }
.app-toast-move        { transition: transform .25s ease; }