/**
 * App Dialog — custom confirm/alert modal styles.
 * Matches the existing cart confirmation modal pattern (cart.css:332-392).
 */

/* ---- Overlay ---- */
.app-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  animation: dialogOverlayIn 0.2s ease;
}

.app-dialog-overlay--closing {
  animation: dialogOverlayOut 0.2s ease forwards;
}

/* ---- Dialog box ---- */
.app-dialog {
  background-color: var(--color-surface);
  border: none;
  border-radius: var(--border-radius-lg, 12px);
  width: 90%;
  max-width: 400px;
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.2));
  animation: dialogSlideIn 0.25s ease;
  outline: none;
}

.app-dialog--closing {
  animation: dialogSlideOut 0.2s ease forwards;
}

/* ---- Header ---- */
.app-dialog-header {
  padding: var(--spacing-lg, 16px);
  text-align: center;
  border-radius: var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) 0 0;
}

.app-dialog-header h3 {
  margin: 0;
  font-size: 1.2em;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-primary-contrast);
}

/* Header colour variants */
.app-dialog-header--danger {
  background: var(--color-danger);
}

.app-dialog-header--warning {
  background: var(--color-warning-dark);
}

.app-dialog-header--info {
  background: var(--color-primary-dark);
}

/* ---- Body ---- */
.app-dialog-body {
  padding: var(--spacing-xl, 20px);
  text-align: center;
}

.app-dialog-body p {
  margin: 0;
  color: var(--color-gray-700);
  font-size: 1.05em;
  line-height: 1.5;
}

/* ---- Actions ---- */
.app-dialog-actions {
  display: flex;
  gap: var(--spacing-md, 12px);
  justify-content: center;
  padding: 0 var(--spacing-xl, 20px) var(--spacing-xl, 20px) var(--spacing-xl, 20px);
}

.app-dialog-actions .btn {
  flex: 1;
  max-width: 140px;
  min-width: 100px;
  font-size: 1em;
  white-space: nowrap;
}

/* ---- Animations ---- */
@keyframes dialogOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dialogOverlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes dialogSlideIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes dialogSlideOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.92) translateY(-10px);
  }
}