/* =========================================================
   0027d 二次確認對話框(全客人端共用)
   取代 window.confirm:原生對話框沒辦法說清楚「這一步會扣多少點」,
   而取消類動作最重要的資訊就是費用。
   ========================================================= */
.pm-confirm {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg) 66%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.pm-confirm.is-open { opacity: 1; pointer-events: auto; }

.pm-confirm-box {
  width: min(100%, 400px);
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-pop);
  transform: translateY(14px) scale(.97);
  transition: transform .24s var(--ease);
}
.pm-confirm.is-open .pm-confirm-box { transform: none; }

.pm-confirm-icon {
  width: 42px; height: 42px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--st-busy-soft); color: var(--st-busy);
  margin-bottom: 12px;
}
.pm-confirm-icon svg { width: 20px; height: 20px; }
.pm-confirm-box h3 { font-size: 18px; font-weight: 900; margin-bottom: 7px; }
.pm-confirm-box p {
  font-size: 13.5px; line-height: 1.7; color: var(--text-soft); font-weight: 600;
  white-space: pre-line;   /* 讓費用說明可以換行分點 */
}
.pm-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }

/* 危險動作的主鈕用警示色,不要用品牌金 —— 金色會讓人以為那是「好的那個選項」 */
.btn.btn-danger {
  background: var(--st-busy); color: var(--on-accent); font-weight: 800;
}
.btn.btn-danger:hover { filter: brightness(1.08); }

@media (max-width: 380px) {
  .pm-confirm-actions { grid-template-columns: 1fr; }
}