/* how.shop — 共用確認對話框（置中、swal 風格）
 * 三端入口（shop / seller / admin）共用：<app-confirm> + 全域 window.showConfirm()。
 * self-contained 配色：僅依賴 tokens 與各端 :root 的 --primary，不綁各端按鈕主題。
 */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
}
.confirm-box {
  width: 100%; max-width: 360px;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px 24px 20px;
  text-align: center;
}
.confirm-box:focus { outline: none; }

/* 狀態圖示圓底：色彩隨 variant，bg 為對應色淡化 */
.confirm-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.confirm-danger  .confirm-icon { background: var(--status-danger-bg);  color: var(--danger); }
.confirm-warning .confirm-icon { background: var(--status-warning-bg); color: #e0a800; }
.confirm-primary .confirm-icon { background: #e8eaff;                  color: var(--primary, #4f46e5); }

.confirm-title {
  font-size: 17px; font-weight: 700; color: var(--text-primary);
  line-height: 1.4;
}
.confirm-msg {
  margin-top: 8px;
  font-size: 14px; color: var(--text-secondary); line-height: 1.6;
}

.confirm-actions {
  margin-top: 22px;
  display: flex; gap: 10px;
}
.confirm-btn {
  flex: 1; padding: 11px 16px;
  border: none; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: filter .15s ease, background .15s ease;
}
.confirm-btn-cancel {
  background: var(--status-muted-bg); color: var(--text-secondary);
}
.confirm-btn-cancel:hover { filter: brightness(0.96); }
.confirm-btn-go { color: #fff; }
.confirm-danger  .confirm-btn-go { background: var(--danger); }
.confirm-warning .confirm-btn-go { background: #e0a800; }
.confirm-primary .confirm-btn-go { background: var(--primary, #4f46e5); }
.confirm-btn-go:hover { filter: brightness(0.93); }
.confirm-btn:focus-visible { outline: 2px solid var(--primary, #4f46e5); outline-offset: 2px; }

/* Transition：遮罩淡入、卡片 scale + fade 彈入 */
.confirm-pop-enter-active, .confirm-pop-leave-active { transition: opacity .18s ease; }
.confirm-pop-enter-active .confirm-box { transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; }
.confirm-pop-enter-from, .confirm-pop-leave-to { opacity: 0; }
.confirm-pop-enter-from .confirm-box { transform: scale(0.9); opacity: 0; }

/* 尊重「減少動態」偏好：關閉彈入縮放與淡入，僅即時顯示 */
@media (prefers-reduced-motion: reduce) {
  .confirm-pop-enter-active, .confirm-pop-leave-active,
  .confirm-pop-enter-active .confirm-box { transition: none; }
  .confirm-pop-enter-from .confirm-box { transform: none; }
}