/* === Payment & Success Styles === */

/* PayPal Card Fields */
#card-name-field,
#card-number-field,
#card-expiry-field,
#card-cvv-field {
  height: 50px;
}

/* Success Checkmark Animation */
.success-checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: success-circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-checkmark-check {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: success-check 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}

@keyframes success-circle {
  to { stroke-dashoffset: 0; }
}

@keyframes success-check {
  to { stroke-dashoffset: 0; }
}

.success-checkmark-container {
  animation: success-scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes success-scale {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Success Confetti */
.confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: confetti-fall 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  opacity: 0;
}

@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(300px) rotate(720deg) scale(0.3);
  }
}

@media (max-width: 640px) {
  .confetti-piece {
    width: 6px;
    height: 6px;
  }
}

/* Success Amount Pop */
#success-amount-display {
  animation: amount-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both;
}

@keyframes amount-pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Success Share Buttons Stagger */
#modal-phase-success .grid button {
  opacity: 0;
  animation: success-fade-up 0.4s ease forwards;
}
#modal-phase-success .grid button:nth-child(1) { animation-delay: 0.9s; }
#modal-phase-success .grid button:nth-child(2) { animation-delay: 1.0s; }
#modal-phase-success .grid button:nth-child(3) { animation-delay: 1.1s; }
#modal-phase-success .grid button:nth-child(4) { animation-delay: 1.2s; }

@keyframes success-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* PayPal Button Container Styling - hide empty containers */
#apple-pay-container:empty,
#google-pay-container:empty,
#paypal-button-container:empty,
#venmo-button-container:empty {
  display: none !important;
}

/* Remove gap for hidden elements */
#express-checkout-buttons > *:empty {
  display: none !important;
}

/* PayPal button rounded corners */
#paypal-button-container iframe {
  border-radius: 12px !important;
}

/* Apple Pay Button - Native styling */
#apple-pay-btn {
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: donate;
  -apple-pay-button-style: black;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

/* Google Pay Button Enhancement */
#google-pay-btn {
  font-family: 'Outfit', sans-serif;
}

/* Loading Spinner for Card Submit */
#card-submit-btn svg.animate-spin {
  margin-right: 8px;
}

/* Express Checkout Section */
.express-checkout-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}

.express-checkout-divider::before,
.express-checkout-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}