/* ─────────────────────────────────────────────────────────────────────────
   Confirm modal — a reusable platform-wide confirmation pattern.

   Triggered by any element with [data-confirm-trigger] attributes.
   Two styles: 'primary' (teal confirm) and 'destructive' (sariio-pink
   confirm). See app/static/js/confirm_modal.js for the HTML API.
   ───────────────────────────────────────────────────────────────────── */

.cm-scrim {
  position: fixed;
  inset: 0;
  background: rgba(43, 42, 38, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  opacity: 0;
  transition: opacity .15s ease;
}
.cm-scrim.is-shown {
  display: flex;
  opacity: 1;
}

.cm-dialog {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  max-width: 460px;
  width: 100%;
  padding: 24px;
  font-family: inherit;
  transform: translateY(8px);
  transition: transform .15s ease;
}
.cm-scrim.is-shown .cm-dialog {
  transform: translateY(0);
}

.cm-title {
  font-size: 17px;
  font-weight: 600;
  color: #2b2a26;
  margin: 0 0 8px;
  line-height: 1.35;
}

.cm-body {
  font-size: 13.5px;
  color: #5f5e5a;
  line-height: 1.5;
  margin: 0 0 20px;
}

.cm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cm-btn {
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.cm-btn--cancel {
  background: #fff;
  color: #5f5e5a;
  border-color: #d9d6cc;
}
.cm-btn--cancel:hover {
  background: #fafaf6;
  border-color: #a3a199;
}

.cm-btn--primary {
  background: #1d7a92;
  color: #fff;
}
.cm-btn--primary:hover {
  background: #18687d;
}

.cm-btn--destructive {
  background: #c2477a;
  color: #fff;
}
.cm-btn--destructive:hover {
  background: #a83d68;
}