/* ============================================
   confirmation.css — Booking confirmation page
   ============================================ */

/* Override: all steps completed → all dots pink (scoped to confirmation view) */
#view-confirmation .step-dot {
  background: #FE7BCD;
}

/* Checkmark pop-in */
@keyframes scaleIn {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Confetti fall */
@keyframes confetti {
  0%   { transform: translateY(-10px) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(80px)  rotate(720deg); opacity: 0; }
}

.checkmark-anim {
  animation: scaleIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

/* Staggered entrance for confirmation content */
.fade-up-1 { animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.40s both; }
.fade-up-2 { animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; }
.fade-up-3 { animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.70s both; }
.fade-up-4 { animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both; }
.fade-up-5 { animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.00s both; }

/* Individual confetti pieces injected by JS */
.confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: confetti 1.5s ease-out forwards;
}