/* ConfirmDialog — aligned with refresh design.
   - Title + optional subtitle live in BaseModal's header (top of modal)
   - Body is focused on the message (no forced icon/flex-row layout)
   - Variant intent is carried by the confirm button's color (see footer rules)
   - Optional `#icon` slot — if consumer passes one, it renders above the message
     in a variant-colored badge. */

.mint-confirm {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Opt-in icon — only rendered when the #icon slot is provided. */
.mint-confirm__icon {
  align-self: flex-start;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 0.5rem;
}

.mint-confirm__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.mint-confirm__icon--danger {
  background-color: var(--mint-error-bg);
  color: var(--mint-error);
}

.mint-confirm__icon--warning {
  background-color: var(--mint-warning-bg);
  color: var(--mint-warning);
}

.mint-confirm__icon--info {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.mint-confirm__message {
  font-size: 0.875rem;
  color: var(--text-primary);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  line-height: 1.6;
}

/* ─── Footer buttons — refresh-design tactile system ─── */
.mint-confirm__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
}