/* ================= Confirm Popup ================= */

.cp-popup {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1100;
}
.cp-popup.show { display: block; }

/* mask luôn tồn tại, mặc định trong suốt */
.cp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--cp-mask-opacity,0));
}

/* dialog */
.cp-dialog {
  position: absolute;
  width: min(480px, 92vw);
  background: #fff;
  color: #111;
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
  opacity: 0;
  transform: scale(.96);
  transition: .18s ease;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size: 14px;
}

.cp-dialog.in {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}

/* positions */
.cp-pos-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(.96);
}
.cp-pos-top {
  top: 10vh;
  left: 50%;
  transform: translateX(-50%) scale(.96);
}
.cp-pos-bottom {
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%) scale(.96);
}

/* header */
/* header */
.cp-header {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr 34px; /* trái chừa chỗ cân, giữa title, phải close */
  align-items: center;
  padding: 14px 12px;
  border-bottom: 1px solid #e6e6e6;
}

/* spacer bên trái để title thật sự nằm giữa */
.cp-header::before {
  content: "";
  width: 34px;
  height: 34px;
}

.cp-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 0 8px;          /* tránh dính sát mép */
  grid-column: 2;          /* luôn ở cột giữa */
}

.cp-close {
  /* bỏ absolute để nó nằm đúng cột phải */
  position: static;
  grid-column: 3;
  justify-self: end;

  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

  /* phòng trường hợp bị style global kéo translate */
  transform: none;
}
.cp-close:hover { background: rgba(0,0,0,.06); }
.cp-close:active{
  background: rgba(0,0,0,.12);
  transform: scale(0.98);
}

/* body */
.cp-body {
  padding: 18px;
}
.cp-message {
  margin: 0;
  line-height: 1.5;
  white-space: pre-line;
}

/* actions */
.cp-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px;
  border-top: 1px solid #e6e6e6;
}
.cp-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
}

/* variants */
.cp-info .cp-yes { background:#2563eb; color:#fff; }
.cp-warning .cp-yes { background:#f59e0b; color:#111; }
.cp-danger .cp-yes { background:#dc2626; color:#fff; }

.cp-no { background:#e5e7eb; }
.cp-cancel { background:#f3f4f6; }

.cp-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  transition:
    background-color .15s ease,
    box-shadow .15s ease,
    transform .05s ease;
}

.cp-btn:active {
  transform: scale(0.97);
}

.cp-yes:hover {
  filter: brightness(0.95);
}

.cp-yes:active {
  filter: brightness(0.9);
  box-shadow: 0 1px 3px rgba(0,0,0,.25) inset;
}

.cp-no:hover,
.cp-cancel:hover {
  background-color: #e5e7eb;
}

.cp-no:active,
.cp-cancel:active {
  background-color: #d1d5db;
  box-shadow: 0 1px 2px rgba(0,0,0,.15) inset;
}

.cp-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.35);
}