/*
 * Confirmation dialog overlay and box.
 * Used by shared/confirmation_dialog partial.
 * Visibility is toggled via inline style (display:none / display:flex) from JS.
 */

.confirmation-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  /* On mobile PWA, respect safe areas */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* On desktop with sidebar, offset the centering to match the content area */
@media (min-width: 1024px) {
  .confirmation-dialog-overlay {
    padding-left: 280px;
  }
}

.confirmation-dialog-overlay.confirmation-dialog-show {
  opacity: 1;
}

.confirmation-dialog-box {
  transform: scale(0.85) translateY(8px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  /* Ensure consistent box sizing */
  box-sizing: border-box;
}

.confirmation-dialog-box.confirmation-dialog-show {
  transform: scale(1) translateY(0);
  opacity: 1;
}

@keyframes confirmation-bounce-once {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.confirmation-dialog-animate-bounce {
  animation: confirmation-bounce-once 0.5s ease-out forwards;
}

@keyframes confirmation-draw-check {
  0% {
    stroke-dashoffset: 24;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.confirmation-dialog-icon-success svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: confirmation-draw-check 0.4s ease-out 0.2s forwards;
}