.payment-return-page {
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background-color: #f3f7f4;
  background-image: linear-gradient(145deg, rgba(27, 109, 78, 0.08), transparent 48%),
    radial-gradient(circle at 90% 90%, rgba(245, 130, 32, 0.1), transparent 30%);
}

.payment-return-page [hidden] {
  display: none !important;
}

.payment-return__confetti {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.payment-return__confetti-side {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: max(72px, calc((100vw - 520px) / 2));
}

.payment-return__confetti-side--right {
  right: 0;
  left: auto;
}

.payment-return__confetti-group {
  position: absolute;
  inset: 0;
}

.payment-return__confetti-group--second {
  --confetti-group-delay: -0.8s;
}

.payment-return__confetti-group--third {
  --confetti-group-delay: -1.6s;
}

.payment-return__confetti-group--fourth {
  --confetti-group-delay: -2.4s;
}

.payment-return__confetti-group span {
  position: absolute;
  top: -12px;
  left: var(--confetti-x);
  width: 8px;
  height: 13px;
  border-radius: 2px;
  background: var(--confetti-color);
  opacity: 0;
  animation: payment-confetti-fall var(--confetti-duration) linear calc(var(--confetti-delay) + var(--confetti-group-delay, 0s)) 3 both;
}

.payment-return__confetti-group span:nth-child(1) { --confetti-x: 8%; --confetti-color: #f58220; --confetti-duration: 2s; --confetti-delay: 0s; --confetti-drift: 28px; --confetti-rotation: 450deg; }
.payment-return__confetti-group span:nth-child(2) { --confetti-x: 62%; --confetti-color: #187348; --confetti-duration: 2.5s; --confetti-delay: 0.2s; --confetti-drift: -22px; --confetti-rotation: -540deg; }
.payment-return__confetti-group span:nth-child(3) { --confetti-x: 34%; --confetti-color: #f5c542; --confetti-duration: 2.3s; --confetti-delay: 0.4s; --confetti-drift: 18px; --confetti-rotation: 360deg; }
.payment-return__confetti-group span:nth-child(4) { --confetti-x: 78%; --confetti-color: #4c8bf5; --confetti-duration: 2.7s; --confetti-delay: 0.6s; --confetti-drift: -30px; --confetti-rotation: 630deg; }
.payment-return__confetti-group span:nth-child(5) { --confetti-x: 18%; --confetti-color: #e65c9c; --confetti-duration: 2.1s; --confetti-delay: 0.8s; --confetti-drift: 24px; --confetti-rotation: -450deg; }
.payment-return__confetti-group span:nth-child(6) { --confetti-x: 48%; --confetti-color: #f58220; --confetti-duration: 2.6s; --confetti-delay: 1s; --confetti-drift: -18px; --confetti-rotation: 540deg; }
.payment-return__confetti-group span:nth-child(7) { --confetti-x: 2%; --confetti-color: #187348; --confetti-duration: 2.2s; --confetti-delay: 1.2s; --confetti-drift: 32px; --confetti-rotation: -360deg; }
.payment-return__confetti-group span:nth-child(8) { --confetti-x: 70%; --confetti-color: #f5c542; --confetti-duration: 2.8s; --confetti-delay: 1.4s; --confetti-drift: -26px; --confetti-rotation: 720deg; }
.payment-return__confetti-group span:nth-child(9) { --confetti-x: 27%; --confetti-color: #4c8bf5; --confetti-duration: 2.4s; --confetti-delay: 1.6s; --confetti-drift: 20px; --confetti-rotation: -540deg; }
.payment-return__confetti-group span:nth-child(10) { --confetti-x: 55%; --confetti-color: #e65c9c; --confetti-duration: 2.1s; --confetti-delay: 1.8s; --confetti-drift: -32px; --confetti-rotation: 450deg; }
.payment-return__confetti-group span:nth-child(11) { --confetti-x: 12%; --confetti-color: #f58220; --confetti-duration: 2.6s; --confetti-delay: 2s; --confetti-drift: 26px; --confetti-rotation: -630deg; }
.payment-return__confetti-group span:nth-child(12) { --confetti-x: 42%; --confetti-color: #187348; --confetti-duration: 2.3s; --confetti-delay: 2.2s; --confetti-drift: -20px; --confetti-rotation: 540deg; }
.payment-return__confetti-group span:nth-child(13) { --confetti-x: 88%; --confetti-color: #f5c542; --confetti-duration: 2.2s; --confetti-delay: 0.1s; --confetti-drift: -20px; --confetti-rotation: -450deg; }
.payment-return__confetti-group span:nth-child(14) { --confetti-x: 96%; --confetti-color: #e65c9c; --confetti-duration: 2.6s; --confetti-delay: 0.5s; --confetti-drift: 18px; --confetti-rotation: 540deg; }
.payment-return__confetti-group span:nth-child(15) { --confetti-x: 83%; --confetti-color: #4c8bf5; --confetti-duration: 2.4s; --confetti-delay: 0.9s; --confetti-drift: -26px; --confetti-rotation: 630deg; }
.payment-return__confetti-group span:nth-child(16) { --confetti-x: 92%; --confetti-color: #187348; --confetti-duration: 2.1s; --confetti-delay: 1.3s; --confetti-drift: 24px; --confetti-rotation: -540deg; }
.payment-return__confetti-group span:nth-child(17) { --confetti-x: 99%; --confetti-color: #f58220; --confetti-duration: 2.7s; --confetti-delay: 1.7s; --confetti-drift: -16px; --confetti-rotation: 720deg; }
.payment-return__confetti-group span:nth-child(18) { --confetti-x: 86%; --confetti-color: #187348; --confetti-duration: 2.3s; --confetti-delay: 2.1s; --confetti-drift: 22px; --confetti-rotation: -360deg; }

.payment-return {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 32px;
  text-align: center;
  background: #fff;
  border: 1px solid #dce8e0;
  border-radius: 8px;
  box-shadow: 0 18px 55px rgba(27, 64, 46, 0.1);
}

.payment-return__brand {
  margin-bottom: 36px;
}

.payment-return__brand img {
  width: 190px;
  height: 62px;
  object-fit: contain;
}

.payment-return__symbol {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 50%;
  background: #e8f5ec;
  color: #187348;
}

.payment-return__symbol--success::before {
  content: "✓";
  font-size: 34px;
  font-weight: 700;
}

.payment-return__symbol--success {
  background: #187348;
  color: #fff;
  animation: payment-success-pulse 3.2s ease-in-out infinite;
}

.payment-return__symbol--success .payment-return__spinner {
  display: none;
}

.payment-return__symbol--pending {
  background: #fff3df;
  color: #a85b00;
}

.payment-return__symbol--pending::before {
  content: "!";
  font-size: 32px;
  font-weight: 700;
}

.payment-return__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #c9dfd1;
  border-top-color: #187348;
  border-radius: 50%;
  animation: payment-spin 0.8s linear infinite;
}

.payment-return__eyebrow {
  margin-bottom: 8px;
  color: #187348;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.payment-return h1 {
  color: #19372a;
  font-size: clamp(1.6rem, 6vw, 2rem);
  line-height: 1.2;
}

.payment-return__message {
  max-width: 390px;
  margin-top: 12px;
  color: #52635a;
}

.payment-return__countdown {
  margin-top: 16px;
  color: #187348;
  font-size: 0.9rem;
  font-weight: 800;
}

.payment-return__action {
  min-height: 48px;
  margin-top: 24px;
}

.payment-return__retry,
.payment-return__login {
  margin-top: 22px;
  color: #187348;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes payment-spin {
  to { transform: rotate(360deg); }
}

@keyframes payment-success-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(24, 115, 72, 0.08);
  }
  50% {
    transform: scale(1.035);
    box-shadow: 0 0 16px 3px rgba(24, 115, 72, 0.2);
  }
}

@keyframes payment-confetti-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -4vh, 0) rotate(0deg);
  }
  10% {
    opacity: 0.95;
  }
  85% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--confetti-drift), 110vh, 0) rotate(var(--confetti-rotation));
  }
}

@media (max-width: 480px) {
  .payment-return {
    padding: 32px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .payment-return__spinner {
    animation-duration: 1.8s;
  }

  .payment-return__symbol--success {
    animation: none;
  }

  .payment-return__confetti {
    display: none;
  }
}