.transaction-status-container {
  background: var(--dark-gray);
  min-height: 100vh;
  color: var(--white);
  font-family: var(--font-family-base);
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

.store-result {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--spacing-xl);
  background-color: var(--dark-gray-lighter);
  border-radius: var(--border-radius-md);
  box-shadow: var(--box-shadow-lg);
  text-align: center;

  .icon {
    margin-bottom: var(--spacing-lg);

    svg {
      display: inline-block;
      width: 80px;
      height: 80px;
    }

    &.success {
      color: var(--success);
    }

    &.processing {
      color: var(--primary-color);
    }
    
    &.cancel, &.error {
      color: var(--danger);
    }
  }

  h2 {
    margin-bottom: var(--spacing-md);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--white);
  }

  p {
    margin-bottom: var(--spacing-lg);
    color: var(--light-gray);
  }
}

.transaction-details {
  background-color: var(--dark-gray-lightest);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  text-align: left;

  .transaction-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      font-weight: 600;
      color: var(--light-gray);
    }

    .value {
      color: var(--white);
    }
  }
}

.next-steps {
  margin-top: var(--spacing-lg);

  p {
    margin-bottom: var(--spacing-md);
  }

  .buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);

    @media (max-width: var(--breakpoint-sm)) {
      flex-direction: column;
    }
  }

  .btn {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    background-color: var(--primary-color);
    border-radius: var(--border-radius-md);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-base);

    &:hover {
      background-color: var(--primary-dark);
    }

    &-outline {
      background-color: transparent;
      border: 1px solid var(--primary-color);
      color: var(--primary-color);

      &:hover {
        background-color: var(--primary-color);
        color: var(--white);
      }
    }
  }
}

// Animation for the loading spinner
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 2s linear infinite;
}