.payment-status-card {
  max-width: 480px;
  margin: 60px auto;
  padding: 48px 40px;
  background: var(--color-neutral-0);
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-align: center;

  @media (max-width: 480px) {
    margin: 20px auto;
    padding: 32px 20px;
  }

  h2 {
    margin: 0 0 12px;
    font-size: 22px;
  }

  .payment-status-description {
    color: var(--color-neutral-300);
    margin: 0 0 24px;
    line-height: 1.5;
  }
}

/* Status icon circle */

.payment-status-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  font-size: 36px;
  background: var(--color-neutral-150);
  color: var(--color-neutral-300);
  transition: background 0.3s, color 0.3s;

  &.payment-status--success {
    background: rgba(101, 163, 13, 0.12);
    color: var(--color-green);
  }

  &.payment-status--failure {
    background: rgba(220, 38, 38, 0.12);
    color: var(--color-red);
  }

  &.payment-status--warning {
    background: rgba(234, 179, 8, 0.12);
    color: var(--color-yellow);
  }
}

/* Spinner (processing state) */

.payment-status-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-neutral-200);
  border-top-color: var(--color-green);
  border-radius: 50%;
  animation: payment-status-spin 0.8s linear infinite;
  margin: 0 auto 28px;
}

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

/* Download links */

.payment-status-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}

/* Failure action buttons */

.payment-status-failure-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}