/* Full-screen success celebration — scoped to avoid clashing with page buttons (e.g. .submit-btn) */

.celebrate-overlay {
   position: fixed;
   inset: 0;
   z-index: 99999;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0;
   padding: 0;
   background: rgba(255, 255, 255, 0.94);
   backdrop-filter: blur(0.625rem);
   -webkit-backdrop-filter: blur(0.625rem);
   font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

.celebrate-overlay[hidden] {
   display: none !important;
}

.celebrate-container {
   position: relative;
   width: 100%;
   max-width: 100vw;
   min-height: 100dvh;
   display: flex;
   align-items: center;
   justify-content: center;
}

.celebrate-overlay .confetti-container {
   perspective: 43.75rem;
   position: absolute;
   overflow: hidden;
   inset: 0;
   z-index: 1;
   pointer-events: none;
}

.celebrate-overlay .confetti {
   position: absolute;
   z-index: 1;
   top: -0.625rem;
   border-radius: 0.125rem;
}

.celebrate-overlay .confetti--animation-slow {
   animation: celebrate-confetti-slow 2.25s linear 1 forwards;
}

.celebrate-overlay .confetti--animation-medium {
   animation: celebrate-confetti-medium 1.75s linear 1 forwards;
}

.celebrate-overlay .confetti--animation-fast {
   animation: celebrate-confetti-fast 1.25s linear 1 forwards;
}

@keyframes celebrate-confetti-slow {
   0% {
      transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
   }
   100% {
      transform: translate3d(1.5625rem, 105vh, 0) rotateX(360deg) rotateY(180deg);
   }
}

@keyframes celebrate-confetti-medium {
   0% {
      transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
   }
   100% {
      transform: translate3d(6.25rem, 105vh, 0) rotateX(100deg) rotateY(360deg);
   }
}

@keyframes celebrate-confetti-fast {
   0% {
      transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
   }
   100% {
      transform: translate3d(-3.125rem, 105vh, 0) rotateX(10deg) rotateY(250deg);
   }
}

.celebrate-content {
   position: relative;
   z-index: 2;
   text-align: center;
   padding: 1.5rem;
   max-width: 27.5rem;
   pointer-events: none;
}

.celebrate-title {
   margin: 1.25rem 0 0.625rem;
   font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
   font-size: 1.65rem;
   font-weight: 800;
   letter-spacing: -0.02em;
   color: #101828;
}

.celebrate-subtitle {
   margin: 0;
   font-size: 0.95rem;
   color: #667085;
   line-height: 1.55;
}

/* Checkmark */
.celebrate-checkmark-circle {
   width: 7.5rem;
   height: 7.5rem;
   position: relative;
   display: block;
   margin-left: auto;
   margin-right: auto;
   vertical-align: top;
}

.celebrate-checkmark-circle .celebrate-checkmark-bg {
   width: 7.5rem;
   height: 7.5rem;
   border-radius: 50%;
   background: #00c09d;
   position: absolute;
   left: 0;
   top: 0;
}

.celebrate-checkmark-circle .celebrate-checkmark {
   border-radius: 0.3125rem;
}

.celebrate-checkmark-circle .celebrate-checkmark.draw::after {
   animation-delay: 0.12s;
   animation-duration: 0.75s;
   animation-timing-function: ease;
   animation-name: celebrate-checkmark;
   animation-fill-mode: forwards;
   transform: scaleX(-1) rotate(135deg);
}

.celebrate-checkmark-circle .celebrate-checkmark::after {
   opacity: 1;
   height: 3.75rem;
   width: 1.875rem;
   transform-origin: left top;
   border-right: 0.75rem solid #fff;
   border-top: 0.75rem solid #fff;
   border-radius: 0.125rem !important;
   content: '';
   left: 1.25rem;
   top: 3.875rem;
   position: absolute;
}

@keyframes celebrate-checkmark {
   0% {
      height: 0;
      width: 0;
      opacity: 1;
   }
   20% {
      height: 0;
      width: 1.875rem;
      opacity: 1;
   }
   40% {
      height: 3.75rem;
      width: 1.875rem;
      opacity: 1;
   }
   100% {
      height: 3.75rem;
      width: 1.875rem;
      opacity: 1;
   }
}

@media (prefers-reduced-motion: reduce) {
   .celebrate-overlay .confetti {
      animation: none !important;
      opacity: 0 !important;
   }

   .celebrate-checkmark-circle .celebrate-checkmark.draw::after {
      animation: none !important;
      height: 3.75rem;
      width: 1.875rem;
   }
}